raft-ui 0.0.1

package/src/components/checkbox/checkbox-indicator.tsx

@@ -0,0 +1,128 @@
+import { Check, Minus } from "lucide-react";
+import type { ComponentPropsWithRef } from "react";
+import { tv, type VariantProps } from "../../lib/tv.ts";
+import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+
+const checkboxIndicator = tv({
+  slots: {
+    root: [
+      "inline-flex shrink-0 items-center justify-center",
+      "transition-colors",
+      "[&_svg]:shrink-0",
+    ],
+  },
+  variants: {
+    theme: {
+      brutal: {
+        root: ["border-2 border-line-strong"],
+      },
+      elegant: {},
+    },
+    shape: {
+      square: {
+        root: "",
+      },
+      circle: {
+        root: "rounded-full",
+      },
+    },
+    size: {
+      sm: {
+        root: ["size-3.5", "[&_svg:not([class*='size-'])]:size-2.5 [&_svg]:[stroke-width:4]"],
+      },
+      md: {
+        root: ["size-4", "[&_svg:not([class*='size-'])]:size-3 [&_svg]:[stroke-width:4]"],
+      },
+      lg: {
+        root: ["size-5", "[&_svg:not([class*='size-'])]:size-[13px] [&_svg]:[stroke-width:3]"],
+      },
+    },
+    fill: {
+      black: {
+        root: "",
+      },
+      yellow: {
+        root: "",
+      },
+    },
+    checked: {
+      true: {
+        root: "",
+      },
+      false: {
+        root: "bg-layer-panel text-transparent",
+      },
+    },
+    disabled: {
+      true: {
+        root: "opacity-50",
+      },
+      false: {
+        root: "",
+      },
+    },
+    previewOnHover: {
+      true: {
+        root: "",
+      },
+      false: {
+        root: "",
+      },
+    },
+  },
+  compoundVariants: [
+    { checked: true, fill: "black", class: { root: "bg-line-strong text-foreground-inverse" } },
+    { checked: true, fill: "yellow", class: { root: "bg-primary-400 text-foreground-strong" } },
+    { checked: false, previewOnHover: true, class: { root: "group-hover:text-foreground/20" } },
+  ],
+  defaultVariants: {
+    shape: "square",
+    size: "sm",
+    fill: "black",
+    disabled: false,
+    previewOnHover: false,
+  },
+});
+
+type CheckboxIndicatorMark = "check" | "minus";
+
+export type CheckboxIndicatorProps = ComponentPropsWithRef<"span"> &
+  Omit<VariantProps<typeof checkboxIndicator>, "theme" | "checked"> & {
+    checked: boolean;
+    mark?: CheckboxIndicatorMark;
+  };
+
+export function CheckboxIndicator({
+  checked,
+  mark = "check",
+  shape,
+  size,
+  fill,
+  disabled,
+  previewOnHover,
+  className,
+  ...props
+}: CheckboxIndicatorProps) {
+  const theme = useThemeFamily();
+  const { root } = checkboxIndicator({
+    theme,
+    shape,
+    size,
+    fill,
+    checked,
+    disabled,
+    previewOnHover,
+  });
+  const Icon = mark === "minus" ? Minus : Check;
+
+  return (
+    <span
+      {...props}
+      data-slot="checkbox-indicator-graphic"
+      aria-hidden
+      className={root({ className })}
+    >
+      {(checked || previewOnHover) && <Icon />}
+    </span>
+  );
+}

package/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,350 @@
+import { useId } from "react";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { tv, type VariantProps } from "../../lib/tv.ts";
+import { CheckboxIndicator } from "./checkbox-indicator.tsx";
+import type { StyledProps } from "../../lib/styled-props.ts";
+import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+
+const checkbox = tv({
+  slots: {
+    root: [
+      "relative inline-flex shrink-0 touch-manipulation items-center justify-center outline-none",
+      "focus-visible:ring-2 focus-visible:ring-line-focus",
+      "data-disabled:cursor-not-allowed",
+      "after:absolute after:-inset-x-3 after:-inset-y-2 after:content-['']",
+    ],
+    indicator: ["pointer-events-none"],
+    graphic: ["pointer-events-none"],
+    outerRect: ["transition-[fill,stroke] duration-[160ms] ease-out motion-reduce:transition-none"],
+    overlayRect: [
+      "pointer-events-none opacity-0 transition-opacity duration-[160ms] ease-out motion-reduce:transition-none",
+      "group-data-[disabled]/checkbox:opacity-0",
+      "group-hover/checkbox:group-data-[disabled]/checkbox:opacity-0 group-focus-visible/checkbox:group-data-[disabled]/checkbox:opacity-0",
+    ],
+    mark: ["absolute left-1/2 top-1/2 shrink-0 origin-center -translate-x-1/2 -translate-y-1/2"],
+    checkMark: [
+      "-rotate-6 scale-[0.82] opacity-0",
+      "transition-[opacity,transform] duration-[180ms] ease-out motion-reduce:transition-none",
+      "motion-reduce:rotate-0 motion-reduce:scale-100",
+    ],
+    indeterminateMark: [
+      "invisible scale-x-50 opacity-0",
+      "transition-[opacity,transform] duration-[160ms] ease-out motion-reduce:transition-none",
+      "motion-reduce:scale-x-100",
+    ],
+  },
+  variants: {
+    theme: {
+      brutal: {},
+      elegant: {
+        root: [
+          "group/checkbox rounded-[3px] focus:outline-none",
+          "shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_2px_2px_-1px_oklch(0_0_0_/_0.04),0_4px_4px_-2px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]",
+          "transition-[box-shadow,transform] duration-100 ease-out motion-reduce:transition-none",
+          "active:scale-[0.96] data-[disabled]:active:scale-100 motion-reduce:active:scale-100",
+        ],
+        graphic: ["absolute inset-0 size-full"],
+      },
+    },
+    variant: {
+      default: {},
+      primary: {},
+    },
+    color: {
+      default: {},
+      primary: {},
+    },
+    size: {
+      sm: {
+        root: "size-3.5",
+      },
+      md: {
+        root: "size-4",
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      theme: "elegant",
+      size: "sm",
+      class: { root: "size-4" },
+    },
+    {
+      theme: "elegant",
+      size: "md",
+      class: { root: "size-[18px]" },
+    },
+    {
+      theme: "elegant",
+      variant: "default",
+      color: "default",
+      class: {
+        root: [
+          "data-[checked]:shadow-[0_2px_2px_-1px_oklch(0_0_0_/_0.04),0_4px_4px_-2px_oklch(0_0_0_/_0.02)]",
+          "data-[indeterminate]:shadow-[0_2px_2px_-1px_oklch(0_0_0_/_0.04),0_4px_4px_-2px_oklch(0_0_0_/_0.02)]",
+          "data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]",
+          "data-[checked]:data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]",
+          "data-[indeterminate]:data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]",
+        ],
+        outerRect: [
+          "fill-layer-panel",
+          "stroke-transparent",
+          "group-hover/checkbox:fill-[oklch(0.976_0.001_286)]",
+          "group-focus-visible/checkbox:fill-foreground-strong",
+          "group-hover/checkbox:group-data-[checked]/checkbox:fill-[oklch(0.38_0.006_285)]",
+          "group-hover/checkbox:group-data-[indeterminate]/checkbox:fill-[oklch(0.38_0.006_285)]",
+          "group-focus-visible/checkbox:group-data-[checked]/checkbox:fill-foreground-strong",
+          "group-focus-visible/checkbox:group-data-[indeterminate]/checkbox:fill-foreground-strong",
+          "group-data-[checked]/checkbox:fill-foreground-strong",
+          "group-data-[indeterminate]/checkbox:fill-foreground-strong",
+          "group-data-[disabled]/checkbox:fill-layer-muted",
+          "group-data-[checked]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+          "group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+          "group-hover/checkbox:group-data-[checked]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+          "group-hover/checkbox:group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+          "group-focus-visible/checkbox:group-data-[checked]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+          "group-focus-visible/checkbox:group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+        ],
+        mark: ["text-foreground-inverse group-data-[disabled]/checkbox:text-line"],
+      },
+    },
+    {
+      theme: "elegant",
+      variant: "primary",
+      class: {
+        root: [
+          "data-[checked]:shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.2),0_1px_1px_-0.5px_oklch(0.85_0.162_91.89_/_0.1),0_2px_2px_-1px_oklch(0.85_0.162_91.89_/_0.06),0_0_0_1px_oklch(0.83_0.14_91.89_/_0.7)]",
+          "data-[indeterminate]:shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.2),0_1px_1px_-0.5px_oklch(0.85_0.162_91.89_/_0.1),0_2px_2px_-1px_oklch(0.85_0.162_91.89_/_0.06),0_0_0_1px_oklch(0.83_0.14_91.89_/_0.7)]",
+          "data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]",
+          "data-[checked]:data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]",
+          "data-[indeterminate]:data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]",
+        ],
+        outerRect: [
+          "fill-layer-panel",
+          "stroke-transparent",
+          "group-hover/checkbox:fill-[oklch(0.976_0.001_286)]",
+          "group-focus-visible/checkbox:fill-primary-400",
+          "group-hover/checkbox:group-data-[checked]/checkbox:fill-[oklch(0.86_0.15_91.89)]",
+          "group-hover/checkbox:group-data-[indeterminate]/checkbox:fill-[oklch(0.86_0.15_91.89)]",
+          "group-focus-visible/checkbox:group-data-[checked]/checkbox:fill-primary-400",
+          "group-focus-visible/checkbox:group-data-[indeterminate]/checkbox:fill-primary-400",
+          "group-data-[checked]/checkbox:fill-primary-400",
+          "group-data-[indeterminate]/checkbox:fill-primary-400",
+          "group-data-[disabled]/checkbox:fill-layer-muted",
+          "group-data-[checked]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+          "group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+          "group-hover/checkbox:group-data-[checked]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+          "group-hover/checkbox:group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+          "group-focus-visible/checkbox:group-data-[checked]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+          "group-focus-visible/checkbox:group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+        ],
+        overlayRect: [
+          "group-hover/checkbox:group-data-[checked]/checkbox:opacity-100 group-focus-visible/checkbox:group-data-[checked]/checkbox:opacity-100",
+          "group-hover/checkbox:group-data-[indeterminate]/checkbox:opacity-100 group-focus-visible/checkbox:group-data-[indeterminate]/checkbox:opacity-100",
+        ],
+        mark: ["text-primary-950 group-data-[disabled]/checkbox:text-line"],
+      },
+    },
+    {
+      theme: "elegant",
+      variant: "default",
+      color: "primary",
+      class: {
+        root: [
+          "data-[checked]:shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.2),0_1px_1px_-0.5px_oklch(0.85_0.162_91.89_/_0.1),0_2px_2px_-1px_oklch(0.85_0.162_91.89_/_0.06),0_0_0_1px_oklch(0.83_0.14_91.89_/_0.7)]",
+          "data-[indeterminate]:shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.2),0_1px_1px_-0.5px_oklch(0.85_0.162_91.89_/_0.1),0_2px_2px_-1px_oklch(0.85_0.162_91.89_/_0.06),0_0_0_1px_oklch(0.83_0.14_91.89_/_0.7)]",
+          "data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]",
+          "data-[checked]:data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]",
+          "data-[indeterminate]:data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]",
+        ],
+        outerRect: [
+          "fill-layer-panel",
+          "stroke-transparent",
+          "group-hover/checkbox:fill-[oklch(0.976_0.001_286)]",
+          "group-focus-visible/checkbox:fill-primary-400",
+          "group-hover/checkbox:group-data-[checked]/checkbox:fill-[oklch(0.86_0.15_91.89)]",
+          "group-hover/checkbox:group-data-[indeterminate]/checkbox:fill-[oklch(0.86_0.15_91.89)]",
+          "group-focus-visible/checkbox:group-data-[checked]/checkbox:fill-primary-400",
+          "group-focus-visible/checkbox:group-data-[indeterminate]/checkbox:fill-primary-400",
+          "group-data-[checked]/checkbox:fill-primary-400",
+          "group-data-[indeterminate]/checkbox:fill-primary-400",
+          "group-data-[disabled]/checkbox:fill-layer-muted",
+          "group-data-[checked]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+          "group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+          "group-hover/checkbox:group-data-[checked]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+          "group-hover/checkbox:group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+          "group-focus-visible/checkbox:group-data-[checked]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+          "group-focus-visible/checkbox:group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+        ],
+        overlayRect: [
+          "group-hover/checkbox:group-data-[checked]/checkbox:opacity-100 group-focus-visible/checkbox:group-data-[checked]/checkbox:opacity-100",
+          "group-hover/checkbox:group-data-[indeterminate]/checkbox:opacity-100 group-focus-visible/checkbox:group-data-[indeterminate]/checkbox:opacity-100",
+        ],
+        mark: ["text-primary-950 group-data-[disabled]/checkbox:text-line"],
+      },
+    },
+  ],
+  defaultVariants: {
+    color: "default",
+    size: "sm",
+    variant: "default",
+  },
+});
+
+function CheckboxCheckIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="10"
+      height="8"
+      viewBox="0 0 10 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      className={className}
+    >
+      <path
+        d="M1 3.5L4 6.5L9 1.5"
+        stroke="currentColor"
+        strokeWidth="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function CheckboxIndeterminateIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="8"
+      height="2"
+      viewBox="0 0 8 2"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      className={className}
+    >
+      <path d="M0 1H8" stroke="currentColor" strokeWidth="1" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+type ElegantCheckboxGraphicProps = {
+  classNames: {
+    graphic: string;
+    outerRect: string;
+    overlayRect: string;
+  };
+};
+
+function ElegantCheckboxGraphic({ classNames }: ElegantCheckboxGraphicProps) {
+  const gradientId = `checkbox-hover-${useId().replace(/:/g, "")}`;
+
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      className={classNames.graphic}
+    >
+      <defs>
+        <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="oklab(100% 0 0 / 14%)" />
+          <stop offset="100%" stopColor="oklab(0% 0 0 / 3%)" />
+        </linearGradient>
+      </defs>
+      <rect width="16" height="16" rx="3" className={classNames.outerRect} />
+      <rect
+        width="16"
+        height="16"
+        rx="3"
+        fill={`url(#${gradientId})`}
+        className={classNames.overlayRect}
+      />
+    </svg>
+  );
+}
+
+export type CheckboxProps = StyledProps<BaseCheckbox.Root.Props> &
+  Omit<VariantProps<typeof checkbox>, "theme">;
+
+export function Checkbox({
+  size,
+  color = "default",
+  variant = "default",
+  className,
+  ...props
+}: CheckboxProps) {
+  const theme = useThemeFamily();
+  const { root, indicator, graphic, outerRect, overlayRect, mark, checkMark, indeterminateMark } =
+    checkbox({
+      theme,
+      size,
+      color,
+      variant,
+    });
+
+  if (theme === "elegant") {
+    return (
+      <BaseCheckbox.Root data-slot="checkbox" className={root({ className })} {...props}>
+        <ElegantCheckboxGraphic
+          classNames={{
+            graphic: graphic(),
+            outerRect: outerRect(),
+            overlayRect: overlayRect(),
+          }}
+        />
+        <BaseCheckbox.Indicator
+          keepMounted
+          data-slot="checkbox-indicator"
+          className={indicator()}
+          render={(indicatorProps, state) => (
+            <span
+              {...indicatorProps}
+              className={indicator({ className: indicatorProps.className })}
+            >
+              <CheckboxCheckIcon
+                className={mark({
+                  className: checkMark({
+                    className:
+                      state.checked && !state.indeterminate ? "rotate-0 scale-100 opacity-100" : "",
+                  }),
+                })}
+              />
+              <CheckboxIndeterminateIcon
+                className={mark({
+                  className: indeterminateMark({
+                    className: state.indeterminate ? "visible scale-x-100 opacity-100" : "",
+                  }),
+                })}
+              />
+            </span>
+          )}
+        />
+      </BaseCheckbox.Root>
+    );
+  }
+
+  return (
+    <BaseCheckbox.Root data-slot="checkbox" className={root({ className })} {...props}>
+      <BaseCheckbox.Indicator
+        keepMounted
+        data-slot="checkbox-indicator"
+        className={indicator()}
+        render={(indicatorProps, state) => (
+          <CheckboxIndicator
+            {...indicatorProps}
+            checked={state.checked || state.indeterminate}
+            disabled={state.disabled}
+            mark={state.indeterminate ? "minus" : "check"}
+            size={size}
+            fill={variant === "primary" || color === "primary" ? "yellow" : "black"}
+          />
+        )}
+      />
+    </BaseCheckbox.Root>
+  );
+}

package/src/components/checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from "./checkbox.tsx";
+export type { CheckboxProps } from "./checkbox.tsx";