Checkbox

import { StatelessComponent } from "@praxisjs/core";import { Component } from "@praxisjs/decorators";import { Checkbox as MorphosCheckbox, type CheckboxProps as MorphosCheckboxProps  } from "@morphos/inputs";import { cn } from "@/lib/utils";export type CheckboxProps = MorphosCheckboxProps;@Component()export class Checkbox extends StatelessComponent<CheckboxProps> {  render() {    const { class: cls, ...rest } = this.props;    return (      <MorphosCheckbox        class={cn(          "peer relative size-4 shrink-0 appearance-none rounded-[4px] border border-input bg-transparent shadow-xs outline-none transition-shadow focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-checked:bg-primary data-checked:border-primary data-checked:text-primary-foreground data-indeterminate:bg-primary data-indeterminate:border-primary data-indeterminate:text-primary-foreground after:absolute after:inset-0 after:hidden after:items-center after:justify-center after:text-current data-checked:after:flex data-checked:after:content-['✓'] data-indeterminate:after:flex data-indeterminate:after:content-['–'] after:text-[10px] after:leading-none",          cls,        )}        {...rest}      />    );  }}

import { StatelessComponent } from "@praxisjs/core";import { cx, Stylesheet, Styled, tokenVars } from "@praxisjs/css";import { Component } from "@praxisjs/decorators";import { Checkbox as MorphosCheckbox, type CheckboxProps as MorphosCheckboxProps  } from "@morphos/inputs";import { KosmesisTokens } from "@/lib/kosmesis-theme";const t = tokenVars(KosmesisTokens);class CheckboxStyles extends Stylesheet {  $root = this.css({    position: "relative",    width: "1rem",    height: "1rem",    flexShrink: 0,    appearance: "none",    borderRadius: "4px",    border: `1px solid ${t.input}`,    backgroundColor: "transparent",    boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",    outline: "none",    transition: "box-shadow 120ms ease",    cursor: "pointer",  })    .focusVisible({ borderColor: t.ring, boxShadow: `0 0 0 3px color-mix(in oklab, ${t.ring} 50%, transparent)` })    .disabled({ cursor: "not-allowed", opacity: 0.5 })    .on("&[data-disabled]", { cursor: "not-allowed", opacity: 0.5 })    .on("&[data-checked], &[data-indeterminate]", { backgroundColor: t.primary, borderColor: t.primary, color: t.primaryForeground })    .after({      position: "absolute",      inset: "0",      display: "none",      alignItems: "center",      justifyContent: "center",      fontSize: "10px",      lineHeight: "1",      color: "currentColor",    })    .on('&[data-checked]::after', { display: "flex", content: '"✓"' })    .on('&[data-indeterminate]::after', { display: "flex", content: '"–"' });}export type CheckboxProps = MorphosCheckboxProps;@Component()export class Checkbox extends StatelessComponent<CheckboxProps> {  @Styled(CheckboxStyles) $s!: CheckboxStyles;  render() {    const { class: cls, ...rest } = this.props;    return <MorphosCheckbox class={cx(this.$s.$root, cls)} {...rest} />;  }}