@kanzo-tech/ui 0.0.1-alpha

package/dist/simples/color-picker.js

@@ -0,0 +1,391 @@
+"use client";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { parseColor as h, useColorPickerContext as C, ColorPicker as n } from "@ark-ui/react/color-picker";
+import { ark as _ } from "@ark-ui/react/factory";
+import { Portal as N } from "@ark-ui/react/portal";
+import { Pipette as z, CheckIcon as P } from "lucide-react";
+import p from "react";
+import { cn as s } from "../lib/cn.js";
+import { Button as S } from "./button.js";
+const M = h, B = C, m = (e) => {
+  if (e != null && e.trim())
+    try {
+      return h(e);
+    } catch {
+      return;
+    }
+}, H = (e) => {
+  const {
+    value: r,
+    defaultValue: t,
+    positioning: o = {
+      placement: "top-start"
+    },
+    lazyMount: i = !0,
+    unmountOnExit: l = !0,
+    onValueChange: d,
+    className: f,
+    children: g,
+    slot: k,
+    ...b
+  } = e, w = p.useMemo(() => m(r), [r]), x = p.useMemo(
+    () => m(t),
+    [t]
+  ), v = (u) => {
+    d == null || d({ ...u, valueAsHex: u.value.toString("hex") });
+  };
+  return /* @__PURE__ */ c(
+    n.Root,
+    {
+      className: s("group/color-picker", "w-fit", "flex gap-2", f),
+      defaultValue: x,
+      lazyMount: i,
+      onValueChange: v,
+      positioning: o,
+      unmountOnExit: l,
+      value: w,
+      ...b,
+      "data-slot": k ?? "color-picker",
+      children: [
+        g,
+        /* @__PURE__ */ a(n.HiddenInput, {})
+      ]
+    }
+  );
+}, R = (e) => {
+  const { className: r, slot: t, ...o } = e;
+  return /* @__PURE__ */ a(
+    n.Control,
+    {
+      className: s("flex flex-row items-center gap-2", r),
+      ...o,
+      "data-slot": t ?? "color-picker-control"
+    }
+  );
+}, $ = ({
+  slot: e,
+  ...r
+}) => /* @__PURE__ */ a(
+  n.Trigger,
+  {
+    ...r,
+    "data-slot": e ?? "color-picker-trigger"
+  }
+), y = (e) => {
+  const { className: r, ...t } = e;
+  return /* @__PURE__ */ a(
+    n.TransparencyGrid,
+    {
+      className: s(
+        "size-full rounded-[calc(var(--radius-sm)-0.5px)]",
+        "bg-[linear-gradient(45deg,#e4e4e4_25%,transparent_25%),linear-gradient(-45deg,#e4e4e4_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#e4e4e4_75%),linear-gradient(-45deg,transparent_75%,#e4e4e4_75%)]",
+        "bg-position-[0_0,0_4px,4px_-4px,-4px_0] bg-size-(--spacing(2))",
+        r
+      ),
+      ...t
+    }
+  );
+}, q = (e) => {
+  const { className: r, slot: t, ...o } = e;
+  return /* @__PURE__ */ a(N, { children: /* @__PURE__ */ a(n.Positioner, { "data-slot": "color-picker-positioner", children: /* @__PURE__ */ a(
+    n.Content,
+    {
+      className: s(
+        "[--space:--spacing(3)]",
+        "z-50",
+        "relative",
+        "w-full min-w-56",
+        "flex flex-col gap-4",
+        "p-(--space)",
+        "bg-popover",
+        "rounded-xl border shadow-lg/5",
+        "outline-none",
+        "origin-(--transform-origin)",
+        "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-[98%] data-[state=open]:animate-in",
+        "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[98%] data-[state=closed]:animate-out",
+        "motion-reduce:animate-none!",
+        r
+      ),
+      ...o,
+      "data-slot": t ?? "color-picker-content"
+    }
+  ) }) });
+}, O = (e) => {
+  const { className: r, slot: t, ...o } = e;
+  return /* @__PURE__ */ a(
+    n.View,
+    {
+      className: s("relative flex size-full flex-1 flex-col gap-4", r),
+      ...o,
+      "data-slot": t ?? "color-picker-view"
+    }
+  );
+}, F = (e) => {
+  const { className: r, children: t, slot: o, ...i } = e;
+  return /* @__PURE__ */ c(
+    n.ChannelSlider,
+    {
+      className: s(
+        "relative",
+        "flex items-center",
+        "touch-none select-none",
+        "rounded-full border",
+        "data-[orientation=horizontal]:w-full",
+        "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        "group-data-disabled/color-picker:pointer-events-none group-data-disabled/color-picker:cursor-not-allowed group-data-disabled/color-picker:opacity-64",
+        r
+      ),
+      ...i,
+      "data-slot": o ?? "color-picker-channel-slider",
+      children: [
+        t,
+        /* @__PURE__ */ a(
+          n.ChannelSliderTrack,
+          {
+            className: s(
+              "grow",
+              "rounded-full",
+              "select-none overflow-hidden",
+              "data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full",
+              "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2"
+            ),
+            "data-slot": "color-picker-channel-slider-track"
+          }
+        ),
+        /* @__PURE__ */ a(
+          n.ChannelSliderThumb,
+          {
+            className: s(
+              "relative shrink-0",
+              "size-4.5",
+              "-translate-1/2",
+              "rounded-full border-[3px] border-white shadow-[0_0_0_1px_rgba(0,0,0,0.1),inset_0_0_0_1px_rgba(0,0,0,0.1)]",
+              "outline-none ring-1 ring-border/64",
+              "origin-left data-[orientation=vertical]:origin-bottom"
+            ),
+            "data-slot": "color-picker-channel-slider-thumb"
+          }
+        )
+      ]
+    }
+  );
+}, J = (e) => {
+  const {
+    variant: r = "outline",
+    size: t = "icon-md",
+    children: o,
+    slot: i,
+    ...l
+  } = e;
+  return /* @__PURE__ */ a(n.EyeDropperTrigger, { ...l, asChild: !0, children: /* @__PURE__ */ a(
+    S,
+    {
+      size: t,
+      slot: i ?? "color-picker-eye-dropper",
+      variant: r,
+      children: o || /* @__PURE__ */ a(z, {})
+    }
+  ) });
+}, K = (e) => {
+  const { className: r, slot: t, ...o } = e;
+  return /* @__PURE__ */ a(
+    n.SwatchGroup,
+    {
+      className: s("flex flex-wrap items-center gap-2", r),
+      ...o,
+      "data-slot": t ?? "color-picker-swatch-group"
+    }
+  );
+}, L = (e) => {
+  const { className: r, slot: t, ...o } = e;
+  return /* @__PURE__ */ a(
+    n.SwatchTrigger,
+    {
+      className: s(
+        "relative",
+        "size-8",
+        "flex items-center justify-center",
+        "rounded-full",
+        "transition-[border-color,box-shadow] duration-100 ease-out will-change-transform",
+        "outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "data-disabled:pointer-events-none data-disabled:opacity-64",
+        "data-[state=checked]:shadow-sm/5 data-[state=checked]:ring-(--color) data-[state=checked]:ring-2",
+        "motion-reduce:transition-none!",
+        r
+      ),
+      ...o,
+      "data-slot": t ?? "color-picker-swatch-trigger"
+    }
+  );
+}, Q = (e) => {
+  const { className: r, slot: t, ...o } = e;
+  return /* @__PURE__ */ a(
+    n.Swatch,
+    {
+      className: s(
+        "size-full",
+        "shrink-0",
+        "overflow-hidden",
+        "rounded-[inherit]",
+        "transition-transform duration-100 ease-out will-change-transform",
+        "not-[data-state=checked]:hover:scale-110",
+        "data-[state=checked]:scale-[0.8]",
+        "motion-reduce:transition-none!",
+        r
+      ),
+      ...o,
+      "data-slot": t ?? "color-picker-swatch"
+    }
+  );
+}, U = (e) => {
+  const { className: r, children: t, slot: o, ...i } = e;
+  return /* @__PURE__ */ a(
+    n.SwatchIndicator,
+    {
+      className: s(
+        "absolute inset-0 z-10",
+        "flex items-center justify-center",
+        // Deliberately raw, not a token: this check sits on a swatch whose colour the USER
+        // picked, so no design token can describe what contrasts with it.
+        "text-white",
+        "pointer-events-none",
+        "zoom-in-5 animate-in blur-in-md",
+        "[&_svg]:size-1/2",
+        "motion-reduce:animate-none!",
+        r
+      ),
+      ...i,
+      "data-slot": o ?? "color-picker-swatch-indicator",
+      children: t || /* @__PURE__ */ a(P, {})
+    }
+  );
+}, W = (e) => {
+  const { className: r, slot: t, ...o } = e;
+  return /* @__PURE__ */ a(
+    n.ValueText,
+    {
+      className: s("font-medium text-sm", r),
+      ...o,
+      "data-slot": t ?? "color-picker-value"
+    }
+  );
+}, X = (e) => {
+  const { className: r, slot: t, ...o } = e;
+  return /* @__PURE__ */ a(
+    n.ValueSwatch,
+    {
+      className: s(
+        "relative size-8 shrink-0",
+        "overflow-hidden",
+        "rounded-full border",
+        r
+      ),
+      ...o,
+      "data-slot": t ?? "color-picker-value-swatch"
+    }
+  );
+}, Y = (e) => {
+  const { className: r, showDots: t = !1, children: o, slot: i, ...l } = e;
+  return /* @__PURE__ */ c(
+    n.Area,
+    {
+      className: s(
+        "relative",
+        "aspect-square size-full",
+        "rounded-xl border",
+        "touch-none",
+        {
+          "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[radial-gradient(circle,#fff3_1px,#0000_1px)] after:bg-size-[8px_8px]": t
+        },
+        r
+      ),
+      ...l,
+      "data-slot": i ?? "color-picker-area",
+      children: [
+        /* @__PURE__ */ a(
+          n.AreaBackground,
+          {
+            className: "size-full rounded-[inherit]",
+            "data-slot": "color-picker-area-background"
+          }
+        ),
+        o
+      ]
+    }
+  );
+}, Z = (e) => {
+  const { className: r, slot: t, ...o } = e;
+  return /* @__PURE__ */ a(
+    n.AreaThumb,
+    {
+      className: s(
+        "size-4.5",
+        "rounded-full border-[3px] border-white shadow-[0_0_0_1px_rgba(0,0,0,0.1),inset_0_0_0_1px_rgba(0,0,0,0.1)]",
+        "outline-none ring-border/64",
+        "data-disabled:pointer-events-none data-disabled:opacity-64",
+        r
+      ),
+      ...o,
+      "data-slot": t ?? "color-picker-area-thumb"
+    }
+  );
+}, ee = (e) => {
+  const { channel: r = "hex", slot: t, ...o } = e;
+  return /* @__PURE__ */ a(
+    n.ChannelInput,
+    {
+      channel: r,
+      ...o,
+      "data-slot": t ?? "color-picker-input"
+    }
+  );
+}, re = (e) => {
+  const { className: r, slot: t, ...o } = e;
+  return /* @__PURE__ */ c(
+    _.div,
+    {
+      className: s(
+        "relative",
+        "size-8",
+        "shrink-0",
+        "rounded-full border",
+        "pointer-events-none overflow-hidden",
+        "group-data-[size=lg]/input-group:size-5",
+        "group-data-[size=md]/input-group:size-4",
+        "group-data-[size=sm]/input-group:size-3.5",
+        "group-data-disabled/color-input:opacity-64",
+        r
+      ),
+      ...o,
+      "data-slot": t ?? "color-picker-input-swatch",
+      children: [
+        /* @__PURE__ */ a(y, {}),
+        /* @__PURE__ */ a(n.ValueSwatch, { className: "z-1 size-full" })
+      ]
+    }
+  );
+};
+export {
+  H as ColorPicker,
+  Y as ColorPickerArea,
+  Z as ColorPickerAreaThumb,
+  q as ColorPickerContent,
+  R as ColorPickerControl,
+  J as ColorPickerEyeDropperTrigger,
+  ee as ColorPickerInput,
+  F as ColorPickerSlider,
+  Q as ColorPickerSwatch,
+  K as ColorPickerSwatchGroup,
+  U as ColorPickerSwatchIndicator,
+  re as ColorPickerSwatchPreview,
+  L as ColorPickerSwatchTrigger,
+  y as ColorPickerTransparencyGrid,
+  $ as ColorPickerTrigger,
+  W as ColorPickerValue,
+  X as ColorPickerValueSwatch,
+  O as ColorPickerView,
+  M as parseColor,
+  m as safeParseColor,
+  B as useColorPicker
+};
+//# sourceMappingURL=color-picker.js.map

package/dist/simples/color-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.js","sources":["../../src/simples/color-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ColorPicker as ArkColorPicker,\n  type ColorPickerValueChangeDetails,\n  type Color,\n  parseColor as parseColorArk,\n  useColorPickerContext,\n} from \"@ark-ui/react/color-picker\";\nimport { ark } from \"@ark-ui/react/factory\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport { CheckIcon, Pipette } from \"lucide-react\";\nimport React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Button, type ButtonProps } from \"./button\";\n\nexport const parseColor = parseColorArk;\nexport const useColorPicker = useColorPickerContext;\n\n/**\n * `parseColor` that returns `undefined` instead of throwing on a blank or unparseable string.\n */\nexport const safeParseColor = (value?: string): Color | undefined => {\n  if (!value?.trim()) {\n    return undefined;\n  }\n\n  try {\n    return parseColorArk(value);\n  } catch {\n    return undefined;\n  }\n};\n\nexport interface ColorPickerChangeDetails\n  extends ColorPickerValueChangeDetails {\n  /**\n   * The value as a hex string. The machine's `format` is `\"rgba\" | \"hsla\" | \"hsba\"` — there is\n   * no `\"hex\"` member — so `valueAsString` is never hex, which is the one format most consumers\n   * actually store.\n   */\n  valueAsHex: string;\n}\n\nexport interface ColorPickerProps\n  extends Omit<\n    React.ComponentProps<typeof ArkColorPicker.Root>,\n    \"defaultValue\" | \"onValueChange\" | \"value\"\n  > {\n  /**\n   * The default value of the color picker. A blank or unparseable string is treated as \"no\n   * value\" rather than throwing.\n   */\n  defaultValue?: string;\n  /**\n   * The value of the color picker. A blank or unparseable string is treated as \"no value\"\n   * rather than throwing.\n   */\n  value?: string;\n  /**\n   * Called when the value changes, with `valueAsHex` added to Ark's details.\n   */\n  onValueChange?: (details: ColorPickerChangeDetails) => void;\n}\n\n// Divergence from Shark (whose ColorPicker this file otherwise matches part for part) on two\n// points, both inherited defects rather than deliberate design:\n//\n//  1. Shark calls `parseColor(value)` on every render, and Ark's `parseColor` THROWS on `\"\"` or\n//     on any half-typed string. That makes an optional colour field impossible and crashes any\n//     form that binds `value` to raw user input. We parse defensively; an unparseable string\n//     leaves the machine on its own last value instead of blowing up.\n//  2. Shark only forwards `onValueChange` when the picker is controlled, so an uncontrolled\n//     `<ColorPicker defaultValue onValueChange>` silently never fires. We always forward, and\n//     drop the mirror state that existed only to feed `defaultValue` back to a machine that\n//     reads it once.\n//\n// Ark's `useColorPicker` already bridges `useFieldContext`, so `<Field invalid>` reaches this\n// control with no help from us — unlike RadioGroup and Slider.\nexport const ColorPicker = (props: ColorPickerProps) => {\n  const {\n    value,\n    defaultValue,\n    positioning = {\n      placement: \"top-start\",\n    },\n    lazyMount = true,\n    unmountOnExit = true,\n    onValueChange,\n    className,\n    children,\n    slot,\n    ...rest\n  } = props;\n\n  const parsedValue = React.useMemo(() => safeParseColor(value), [value]);\n\n  const parsedDefaultValue = React.useMemo(\n    () => safeParseColor(defaultValue),\n    [defaultValue]\n  );\n\n  const handleValueChange = (details: ColorPickerValueChangeDetails) => {\n    onValueChange?.({ ...details, valueAsHex: details.value.toString(\"hex\") });\n  };\n\n  return (\n    <ArkColorPicker.Root\n      className={cn(\"group/color-picker\", \"w-fit\", \"flex gap-2\", className)}\n      defaultValue={parsedDefaultValue}\n      lazyMount={lazyMount}\n      onValueChange={handleValueChange}\n      positioning={positioning}\n      unmountOnExit={unmountOnExit}\n      value={parsedValue}\n      {...rest}\n      data-slot={slot ?? \"color-picker\"}\n    >\n      {children}\n\n      <ArkColorPicker.HiddenInput />\n    </ArkColorPicker.Root>\n  );\n};\n\nexport const ColorPickerControl = (\n  props: React.ComponentProps<typeof ArkColorPicker.Control>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkColorPicker.Control\n      className={cn(\"flex flex-row items-center gap-2\", className)}\n      {...rest}\n      data-slot={slot ?? \"color-picker-control\"}\n    />\n  );\n};\n\nexport const ColorPickerTrigger = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkColorPicker.Trigger>) => (\n  <ArkColorPicker.Trigger\n    {...rest}\n    data-slot={slot ?? \"color-picker-trigger\"}\n  />\n);\n\nexport const ColorPickerTransparencyGrid = (\n  props: React.ComponentProps<typeof ArkColorPicker.TransparencyGrid>\n) => {\n  const { className, ...rest } = props;\n\n  return (\n    <ArkColorPicker.TransparencyGrid\n      className={cn(\n        \"size-full rounded-[calc(var(--radius-sm)-0.5px)]\",\n        \"bg-[linear-gradient(45deg,#e4e4e4_25%,transparent_25%),linear-gradient(-45deg,#e4e4e4_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#e4e4e4_75%),linear-gradient(-45deg,transparent_75%,#e4e4e4_75%)]\",\n        \"bg-position-[0_0,0_4px,4px_-4px,-4px_0] bg-size-(--spacing(2))\",\n        className\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport const ColorPickerContent = (\n  props: React.ComponentProps<typeof ArkColorPicker.Content>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <ArkColorPicker.Positioner data-slot=\"color-picker-positioner\">\n        <ArkColorPicker.Content\n          className={cn(\n            \"[--space:--spacing(3)]\",\n            \"z-50\",\n            \"relative\",\n            \"w-full min-w-56\",\n            \"flex flex-col gap-4\",\n            \"p-(--space)\",\n            \"bg-popover\",\n            \"rounded-xl border shadow-lg/5\",\n            \"outline-none\",\n            \"origin-(--transform-origin)\",\n            \"data-[state=open]:fade-in-0 data-[state=open]:zoom-in-[98%] data-[state=open]:animate-in\",\n            \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[98%] data-[state=closed]:animate-out\",\n            \"motion-reduce:animate-none!\",\n            className\n          )}\n          {...rest}\n          data-slot={slot ?? \"color-picker-content\"}\n        />\n      </ArkColorPicker.Positioner>\n    </Portal>\n  );\n};\n\nexport const ColorPickerView = (\n  props: React.ComponentProps<typeof ArkColorPicker.View>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkColorPicker.View\n      className={cn(\"relative flex size-full flex-1 flex-col gap-4\", className)}\n      {...rest}\n      data-slot={slot ?? \"color-picker-view\"}\n    />\n  );\n};\n\nexport const ColorPickerSlider = (\n  props: React.ComponentProps<typeof ArkColorPicker.ChannelSlider>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkColorPicker.ChannelSlider\n      className={cn(\n        \"relative\",\n        \"flex items-center\",\n        \"touch-none select-none\",\n        \"rounded-full border\",\n        \"data-[orientation=horizontal]:w-full\",\n        \"data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\",\n        \"group-data-disabled/color-picker:pointer-events-none group-data-disabled/color-picker:cursor-not-allowed group-data-disabled/color-picker:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"color-picker-channel-slider\"}\n    >\n      {children}\n\n      <ArkColorPicker.ChannelSliderTrack\n        className={cn(\n          \"grow\",\n          \"rounded-full\",\n          \"select-none overflow-hidden\",\n          \"data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full\",\n          \"data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2\"\n        )}\n        data-slot=\"color-picker-channel-slider-track\"\n      />\n      <ArkColorPicker.ChannelSliderThumb\n        className={cn(\n          \"relative shrink-0\",\n          \"size-4.5\",\n          \"-translate-1/2\",\n          \"rounded-full border-[3px] border-white shadow-[0_0_0_1px_rgba(0,0,0,0.1),inset_0_0_0_1px_rgba(0,0,0,0.1)]\",\n          \"outline-none ring-1 ring-border/64\",\n          \"origin-left data-[orientation=vertical]:origin-bottom\"\n        )}\n        data-slot=\"color-picker-channel-slider-thumb\"\n      />\n    </ArkColorPicker.ChannelSlider>\n  );\n};\n\ninterface ColorPickerEyeDropperTrigger\n  extends React.ComponentProps<typeof ArkColorPicker.EyeDropperTrigger>,\n    ButtonProps {}\n\nexport const ColorPickerEyeDropperTrigger = (\n  props: ColorPickerEyeDropperTrigger\n) => {\n  const {\n    variant = \"outline\",\n    size = \"icon-md\",\n    children,\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <ArkColorPicker.EyeDropperTrigger {...rest} asChild>\n      <Button\n        size={size}\n        slot={slot ?? \"color-picker-eye-dropper\"}\n        variant={variant}\n      >\n        {children || <Pipette />}\n      </Button>\n    </ArkColorPicker.EyeDropperTrigger>\n  );\n};\n\nexport const ColorPickerSwatchGroup = (\n  props: React.ComponentProps<typeof ArkColorPicker.SwatchGroup>\n) => {\n  const { className, slot, ...rest } = props;\n  return (\n    <ArkColorPicker.SwatchGroup\n      className={cn(\"flex flex-wrap items-center gap-2\", className)}\n      {...rest}\n      data-slot={slot ?? \"color-picker-swatch-group\"}\n    />\n  );\n};\n\nexport const ColorPickerSwatchTrigger = (\n  props: React.ComponentProps<typeof ArkColorPicker.SwatchTrigger>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkColorPicker.SwatchTrigger\n      className={cn(\n        \"relative\",\n        \"size-8\",\n        \"flex items-center justify-center\",\n        \"rounded-full\",\n        \"transition-[border-color,box-shadow] duration-100 ease-out will-change-transform\",\n        \"outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        \"data-[state=checked]:shadow-sm/5 data-[state=checked]:ring-(--color) data-[state=checked]:ring-2\",\n        \"motion-reduce:transition-none!\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"color-picker-swatch-trigger\"}\n    />\n  );\n};\n\nexport const ColorPickerSwatch = (\n  props: React.ComponentProps<typeof ArkColorPicker.Swatch>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkColorPicker.Swatch\n      className={cn(\n        \"size-full\",\n        \"shrink-0\",\n        \"overflow-hidden\",\n        \"rounded-[inherit]\",\n        \"transition-transform duration-100 ease-out will-change-transform\",\n        \"not-[data-state=checked]:hover:scale-110\",\n        \"data-[state=checked]:scale-[0.8]\",\n        \"motion-reduce:transition-none!\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"color-picker-swatch\"}\n    />\n  );\n};\n\nexport const ColorPickerSwatchIndicator = (\n  props: React.ComponentProps<typeof ArkColorPicker.SwatchIndicator>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkColorPicker.SwatchIndicator\n      className={cn(\n        \"absolute inset-0 z-10\",\n        \"flex items-center justify-center\",\n        // Deliberately raw, not a token: this check sits on a swatch whose colour the USER\n        // picked, so no design token can describe what contrasts with it.\n        \"text-white\",\n        \"pointer-events-none\",\n        \"zoom-in-5 animate-in blur-in-md\",\n        \"[&_svg]:size-1/2\",\n        \"motion-reduce:animate-none!\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"color-picker-swatch-indicator\"}\n    >\n      {children || <CheckIcon />}\n    </ArkColorPicker.SwatchIndicator>\n  );\n};\n\nexport const ColorPickerValue = (\n  props: React.ComponentProps<typeof ArkColorPicker.ValueText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkColorPicker.ValueText\n      className={cn(\"font-medium text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"color-picker-value\"}\n    />\n  );\n};\n\nexport const ColorPickerValueSwatch = (\n  props: React.ComponentProps<typeof ArkColorPicker.ValueSwatch>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkColorPicker.ValueSwatch\n      className={cn(\n        \"relative size-8 shrink-0\",\n        \"overflow-hidden\",\n        \"rounded-full border\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"color-picker-value-swatch\"}\n    />\n  );\n};\n\ninterface ColorPickerAreaProps\n  extends React.ComponentProps<typeof ArkColorPicker.Area> {\n  /**\n   *\n   */\n  showDots?: boolean;\n}\n\nexport const ColorPickerArea = (props: ColorPickerAreaProps) => {\n  const { className, showDots = false, children, slot, ...rest } = props;\n\n  return (\n    <ArkColorPicker.Area\n      className={cn(\n        \"relative\",\n        \"aspect-square size-full\",\n        \"rounded-xl border\",\n        \"touch-none\",\n        {\n          \"after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[radial-gradient(circle,#fff3_1px,#0000_1px)] after:bg-size-[8px_8px]\":\n            showDots,\n        },\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"color-picker-area\"}\n    >\n      <ArkColorPicker.AreaBackground\n        className=\"size-full rounded-[inherit]\"\n        data-slot=\"color-picker-area-background\"\n      />\n\n      {children}\n    </ArkColorPicker.Area>\n  );\n};\n\nexport const ColorPickerAreaThumb = (\n  props: React.ComponentProps<typeof ArkColorPicker.AreaThumb>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkColorPicker.AreaThumb\n      className={cn(\n        \"size-4.5\",\n        \"rounded-full border-[3px] border-white shadow-[0_0_0_1px_rgba(0,0,0,0.1),inset_0_0_0_1px_rgba(0,0,0,0.1)]\",\n        \"outline-none ring-border/64\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"color-picker-area-thumb\"}\n    />\n  );\n};\n\nexport const ColorPickerInput = (\n  props: Partial<React.ComponentProps<typeof ArkColorPicker.ChannelInput>>\n) => {\n  const { channel = \"hex\", slot, ...rest } = props;\n\n  return (\n    <ArkColorPicker.ChannelInput\n      channel={channel}\n      {...rest}\n      data-slot={slot ?? \"color-picker-input\"}\n    />\n  );\n};\n\nexport const ColorPickerSwatchPreview = (\n  props: React.ComponentProps<typeof ark.div>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"relative\",\n        \"size-8\",\n        \"shrink-0\",\n        \"rounded-full border\",\n        \"pointer-events-none overflow-hidden\",\n        \"group-data-[size=lg]/input-group:size-5\",\n        \"group-data-[size=md]/input-group:size-4\",\n        \"group-data-[size=sm]/input-group:size-3.5\",\n        \"group-data-disabled/color-input:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"color-picker-input-swatch\"}\n    >\n      <ColorPickerTransparencyGrid />\n      <ArkColorPicker.ValueSwatch className=\"z-1 size-full\" />\n    </ark.div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAgBO;AAOL;AAIA;AACE;AAA0B;AAE1B;AAAA;AAEJ;AAgDE;AAAM;AACJ;AACA;AACc;AACD;AAAA;AAED;AACI;AAChB;AACA;AACA;AACA;AACG;AAK4B;AACE;AACpB;AAIb;;AAGF;AACE;AAAgB;AAAf;AACqE;AACtD;AACd;AACe;AACf;AACA;AACO;AACH;AACe;AAElB;AAAA;AAE2B;AAAA;AAAA;AAGlC;AAKE;AAEA;AACE;AAAgB;AAAf;AAC4D;AACvD;AACe;AAAA;AAGzB;AAEmC;AACjC;AAEF;AACE;AAAgB;AAAf;AACK;AACe;AACrB;AAMA;AAEA;AACE;AAAgB;AAAf;AACY;AACT;AACA;AACA;AACA;AAAA;AAEE;AAAA;AAGV;AAKE;AAEA;AAGM;AAAgB;AAAf;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAK7B;AAKE;AAEA;AACE;AAAgB;AAAf;AACyE;AACpE;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAgB;AAAf;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAElB;AAAA;AAED;AAAgB;AAAf;AACY;AACT;AACA;AACA;AACA;AACA;AAAA;AAEQ;AAAA;AAAA;AAEZ;AAAgB;AAAf;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AAAA;AAEQ;AAAA;AAAA;AACZ;AAAA;AAGN;AASE;AAAM;AACM;AACH;AACP;AACA;AACG;AAGL;AAEI;AAAC;AAAA;AACC;AACc;AACd;AAEsB;AAAA;AAI9B;AAKE;AACA;AACE;AAAgB;AAAf;AAC6D;AACxD;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAgB;AAAf;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAgB;AAAf;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAgB;AAAf;AACY;AACT;AACA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAEK;AAAA;AAG9B;AAKE;AAEA;AACE;AAAgB;AAAf;AAC+C;AAC1C;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAgB;AAAf;AACY;AACT;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAWE;AAEA;AACE;AAAgB;AAAf;AACY;AACT;AACA;AACA;AACA;AACA;AAEI;AAAA;AAEJ;AAAA;AAEE;AACe;AAEnB;AAAA;AAAgB;AAAf;AACW;AACA;AAAA;AAAA;AAGX;AAAA;AAAA;AAGP;AAKE;AAEA;AACE;AAAgB;AAAf;AACY;AACT;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAgB;AAAf;AACC;AACI;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAK;AAAJ;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAEnB;AAA6B;AACyB;AAAA;AAAA;AAG5D;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/simples/combobox.d.ts

@@ -0,0 +1,66 @@
+import { Combobox as ArkCombobox, ComboboxList as ArkComboboxList } from '@ark-ui/react/combobox';
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { inputVariants } from './input';
+export declare const useCombobox: () => import('@ark-ui/react').UseComboboxContext<any>;
+export declare const ComboboxContext: <T extends unknown>(props: ArkCombobox.ContextProps<T>) => React.ReactNode;
+export declare const Combobox: ArkCombobox.RootComponent;
+export declare const ComboboxControl: (props: React.ComponentProps<typeof ArkCombobox.Control>) => React.JSX.Element;
+interface ComboboxInputProps extends Omit<React.ComponentProps<typeof ArkCombobox.Input>, "size">, VariantProps<typeof inputVariants> {
+    /**
+     * Whether the control is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show the clear button.
+     *
+     * @default false
+     */
+    showClear?: boolean;
+    /**
+     * Whether to show the trigger button.
+     *
+     * @default true
+     */
+    showTrigger?: boolean;
+}
+export declare const ComboboxInput: (props: ComboboxInputProps) => React.JSX.Element;
+export declare const ComboboxTrigger: (props: React.ComponentProps<typeof ArkCombobox.Trigger>) => React.JSX.Element;
+export declare const ComboboxClear: ({ slot, ...rest }: React.ComponentProps<typeof ArkCombobox.ClearTrigger>) => React.JSX.Element;
+/** Composable combobox input for custom controls (e.g. Tags Input). */
+export declare const ComboboxFieldInput: ({ slot, ...rest }: React.ComponentProps<typeof ArkCombobox.Input>) => React.JSX.Element;
+export declare const ComboboxPositioner: ({ slot, ...rest }: React.ComponentProps<typeof ArkCombobox.Positioner>) => React.JSX.Element;
+export declare const ComboboxContent: (props: React.ComponentProps<typeof ArkCombobox.Content>) => React.JSX.Element;
+interface ComboboxGroupProps extends React.ComponentProps<typeof ArkCombobox.ItemGroup> {
+    /**
+     * The heading of the group
+     */
+    heading?: string | React.ReactNode;
+}
+export declare const ComboboxGroup: (props: ComboboxGroupProps) => React.JSX.Element;
+export declare const ComboboxGroupLabel: (props: React.ComponentProps<typeof ArkCombobox.ItemGroupLabel>) => React.JSX.Element;
+export declare const comboboxItemVariants: import('tailwind-variants').TVReturnType<{
+    showIndicator: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], {
+    showIndicator: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    showIndicator: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+interface ComboboxItemProps extends React.ComponentProps<typeof ArkCombobox.Item>, VariantProps<typeof comboboxItemVariants> {
+}
+export declare const ComboboxItem: (props: ComboboxItemProps) => React.JSX.Element;
+export declare const ComboboxEmpty: (props: React.ComponentProps<typeof ArkCombobox.Empty>) => React.JSX.Element;
+export declare const ComboboxList: (props: React.ComponentProps<typeof ArkComboboxList>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=combobox.d.ts.map

package/dist/simples/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/simples/combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,QAAQ,IAAI,WAAW,EACvB,KAAK,YAAY,IAAI,eAAe,EAErC,MAAM,wBAAwB,CAAC;AAGhC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAQ7C,eAAO,MAAM,WAAW,uDAAwB,CAAC;AAEjD,eAAO,MAAM,eAAe,4EAAsB,CAAC;AAEnD,eAAO,MAAM,QAAQ,EAAE,WAAW,CAAC,aAkBlC,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,sBAexD,CAAC;AAEF,UAAU,kBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,EAClE,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBA6CtD,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,sBA6BxD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,mBAG3B,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,YAAY,CAAC,sBAEvD,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,kBAAkB,GAC7B,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,KAAK,CAAC,sBACY,CAAC;AAEhF,eAAO,MAAM,kBAAkB,GAAI,mBAGhC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,UAAU,CAAC,sBAErD,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,sBAoCxD,CAAC;AAEF,UAAU,kBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,SAAS,CAAC;IAC1D;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;CACpC;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAUtD,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,cAAc,CAAC,sBAc/D,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;qDAwB/B,CAAC;AAEH,UAAU,iBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,EACnD,YAAY,CAAC,OAAO,oBAAoB,CAAC;CAAG;AAEhD,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBAqBpD,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,KAAK,CAAC,sBAiBtD,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,sBAWpD,CAAC"}