raft-ui 0.0.6 → 0.0.7

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

@@ -1,128 +0,0 @@
-import { Check, Minus } from "lucide-react";
-import type { ComponentPropsWithRef } from "react";
-import { tv, type VariantProps } from "../../lib/tv";
-import { useThemeFamily } from "../../lib/theme/use-theme";
-
-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

@@ -1,350 +0,0 @@
-import { useId } from "react";
-import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
-import { tv, type VariantProps } from "../../lib/tv";
-import { CheckboxIndicator } from "./checkbox-indicator";
-import type { StyledProps } from "../../lib/styled-props";
-import { useThemeFamily } from "../../lib/theme/use-theme";
-
-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

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