@kanzo-tech/ui 0.0.1-alpha

package/dist/simples/card.js

@@ -0,0 +1,151 @@
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { ark as o } from "@ark-ui/react/factory";
+import { tv as p } from "tailwind-variants";
+import { cn as c } from "../lib/cn.js";
+const h = (s) => {
+  const { className: t, slot: a, ...e } = s;
+  return /* @__PURE__ */ r(
+    o.article,
+    {
+      className: c(
+        "[--space:--spacing(6)]",
+        "group/card",
+        "py-(--space)",
+        "flex flex-col gap-4",
+        "bg-card",
+        "text-foreground",
+        "has-data-[variant=image]:pt-0 has-data-[slot=card-footer]:pb-0",
+        "rounded-box border shadow-xs/5",
+        t
+      ),
+      ...e,
+      "data-slot": a ?? "card"
+    }
+  );
+}, u = p({
+  base: [
+    "flex shrink-0 items-center gap-2",
+    "[&_svg]:pointer-events-none",
+    "px-(--space)"
+  ],
+  variants: {
+    variant: {
+      default: "bg-transparent",
+      icon: "[&_svg:not([class*='size-'])]:size-4",
+      image: [
+        "overflow-hidden rounded-t-sm",
+        "px-0",
+        "[&_img]:size-full [&_img]:object-cover"
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), b = (s) => {
+  const { variant: t = "default", className: a, slot: e, ...d } = s;
+  return /* @__PURE__ */ r(
+    o.div,
+    {
+      className: c(u({ variant: t }), a),
+      "data-variant": t,
+      ...d,
+      "data-slot": e ?? "card-media"
+    }
+  );
+}, C = (s) => {
+  const { title: t, description: a, className: e, children: d, slot: l, ...i } = s;
+  return /* @__PURE__ */ m(
+    o.div,
+    {
+      className: c(
+        "grid auto-rows-min grid-rows-[auto_auto] gap-1",
+        "px-(--space)",
+        "items-start",
+        "has-data-[slot=card-action]:grid-cols-[1fr_auto]",
+        e
+      ),
+      ...i,
+      "data-slot": l ?? "card-header",
+      children: [
+        !!t && /* @__PURE__ */ r(n, { children: t }),
+        !!a && /* @__PURE__ */ r(f, { children: a }),
+        !t && typeof d == "string" ? /* @__PURE__ */ r(n, { children: d }) : d
+      ]
+    }
+  );
+}, n = (s) => {
+  const { className: t, slot: a, ...e } = s;
+  return /* @__PURE__ */ r(
+    o.h3,
+    {
+      className: c(
+        "font-heading font-semibold text-foreground text-lg/6",
+        t
+      ),
+      ...e,
+      "data-slot": a ?? "card-title"
+    }
+  );
+}, f = (s) => {
+  const { className: t, slot: a, ...e } = s;
+  return /* @__PURE__ */ r(
+    o.div,
+    {
+      className: c("row-start-2", "text-muted-foreground text-sm", t),
+      ...e,
+      "data-slot": a ?? "card-description"
+    }
+  );
+}, w = (s) => {
+  const { className: t, slot: a, ...e } = s;
+  return /* @__PURE__ */ r(
+    o.div,
+    {
+      className: c(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        t
+      ),
+      ...e,
+      "data-slot": a ?? "card-action"
+    }
+  );
+}, _ = (s) => {
+  const { className: t, slot: a, ...e } = s;
+  return /* @__PURE__ */ r(
+    o.div,
+    {
+      className: c("px-(--space)", t),
+      ...e,
+      "data-slot": a ?? "card-content"
+    }
+  );
+}, j = (s) => {
+  const { className: t, slot: a, ...e } = s;
+  return /* @__PURE__ */ r(
+    o.div,
+    {
+      className: c(
+        "flex items-center gap-2",
+        "px-(--space)",
+        "bg-muted/48",
+        "rounded-b-xl border-t",
+        "py-(--space)",
+        t
+      ),
+      ...e,
+      "data-slot": a ?? "card-footer"
+    }
+  );
+};
+export {
+  h as Card,
+  w as CardAction,
+  _ as CardContent,
+  f as CardDescription,
+  j as CardFooter,
+  C as CardHeader,
+  b as CardMedia,
+  n as CardTitle
+};
+//# sourceMappingURL=card.js.map

package/dist/simples/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sources":["../../src/simples/card.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\n\n// A card is a self-contained composition → `<article>` (still `asChild`-swappable, e.g. to an\n// `<a>` for a clickable card, exactly as before).\nexport const Card = (props: React.ComponentProps<typeof ark.article>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.article\n      className={cn(\n        \"[--space:--spacing(6)]\",\n        \"group/card\",\n        \"py-(--space)\",\n        \"flex flex-col gap-4\",\n        \"bg-card\",\n        \"text-foreground\",\n        \"has-data-[variant=image]:pt-0 has-data-[slot=card-footer]:pb-0\",\n        \"rounded-box border shadow-xs/5\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"card\"}\n    />\n  );\n};\n\nconst cardMediaVariants = tv({\n  base: [\n    \"flex shrink-0 items-center gap-2\",\n    \"[&_svg]:pointer-events-none\",\n    \"px-(--space)\",\n  ],\n  variants: {\n    variant: {\n      default: \"bg-transparent\",\n      icon: \"[&_svg:not([class*='size-'])]:size-4\",\n      image: [\n        \"overflow-hidden rounded-t-sm\",\n        \"px-0\",\n        \"[&_img]:size-full [&_img]:object-cover\",\n      ],\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\ninterface CardMediaProps\n  extends React.ComponentProps<typeof ark.div>,\n    VariantProps<typeof cardMediaVariants> {}\n\nexport const CardMedia = (props: CardMediaProps) => {\n  const { variant = \"default\", className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(cardMediaVariants({ variant }), className)}\n      data-variant={variant}\n      {...rest}\n      data-slot={slot ?? \"card-media\"}\n    />\n  );\n};\n\ninterface HeaderProps extends React.ComponentProps<typeof ark.div> {\n  /**\n   * The description of the card\n   */\n  description?: string;\n  /**\n   * The title of the card\n   */\n  title?: string;\n}\n\nexport const CardHeader = (props: HeaderProps) => {\n  const { title, description, className, children, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"grid auto-rows-min grid-rows-[auto_auto] gap-1\",\n        \"px-(--space)\",\n        \"items-start\",\n        \"has-data-[slot=card-action]:grid-cols-[1fr_auto]\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"card-header\"}\n    >\n      {!!title && <CardTitle>{title}</CardTitle>}\n      {!!description && <CardDescription>{description}</CardDescription>}\n      {!title && typeof children === \"string\" ? (\n        <CardTitle>{children}</CardTitle>\n      ) : (\n        children\n      )}\n    </ark.div>\n  );\n};\n\n// A real heading (h3) so cards contribute to the document outline; the visual size is set by\n// the class, and `asChild` lets a consumer pick another level where the hierarchy needs it.\nexport const CardTitle = (props: React.ComponentProps<typeof ark.h3>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.h3\n      className={cn(\n        \"font-heading font-semibold text-foreground text-lg/6\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"card-title\"}\n    />\n  );\n};\n\nexport const CardDescription = (\n  props: React.ComponentProps<typeof ark.div>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\"row-start-2\", \"text-muted-foreground text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"card-description\"}\n    />\n  );\n};\n\nexport const CardAction = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"card-action\"}\n    />\n  );\n};\n\nexport const CardContent = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\"px-(--space)\", className)}\n      {...rest}\n      data-slot={slot ?? \"card-content\"}\n    />\n  );\n};\n\nexport const CardFooter = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"flex items-center gap-2\",\n        \"px-(--space)\",\n        \"bg-muted/48\",\n        \"rounded-b-xl border-t\",\n        \"py-(--space)\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"card-footer\"}\n    />\n  );\n};\n"],"names":["Card","props","className","slot","rest","jsx","ark","cn","cardMediaVariants","tv","CardMedia","variant","CardHeader","title","description","children","jsxs","CardTitle","CardDescription","CardAction","CardContent","CardFooter"],"mappings":"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"}

package/dist/simples/checkbox.d.ts

@@ -0,0 +1,25 @@
+import { Checkbox as ArkCheckbox } from '@ark-ui/react/checkbox';
+import { default as React } from 'react';
+export declare const useCheckbox: () => import('@ark-ui/react').UseCheckboxContext;
+export declare const CheckboxGroup: (props: React.ComponentProps<typeof ArkCheckbox.Group>) => React.JSX.Element;
+export declare const checkboxVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+/**
+ * Two defects this component carried for as long as it existed, both found by a composite trying to
+ * use it and both measured before the fix.
+ *
+ * The box styling sat on the **root**, so the root was the box and there was nowhere for a label to
+ * go: `children` arrived through `...rest` above hardcoded JSX children, JSX children win, and
+ * `<Checkbox>Sealed orders</Checkbox>` rendered `textContent: ""`. Four docs examples are written
+ * that way, the default one included, so the Checkbox page shipped unlabelled boxes
+ *. `RadioGroupItem` one file over already had
+ * the right shape — box on the control, root as the row, children beside it — and this now matches
+ * it. `checkboxVariants` still names the box; what changed is which element wears it.
+ *
+ * And `role="checkbox"` sat on that root, which is Ark's `<label>`, while `HiddenInput` renders a
+ * real `<input type="checkbox">` underneath. Two elements answered to the role, the outer carrying
+ * the name and the inner the focus. Ark declares no role there on purpose: the input is the
+ * control, and the label names it through the `htmlFor` Ark already sets.
+ */
+export declare const Checkbox: (props: React.ComponentProps<typeof ArkCheckbox.Root>) => React.JSX.Element;
+export declare const CheckboxIndicator: (props: React.ComponentProps<typeof ArkCheckbox.Indicator>) => React.JSX.Element;
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/simples/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,IAAI,WAAW,EAExB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,WAAW,kDAAqB,CAAC;AAE9C,eAAO,MAAM,aAAa,GACxB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,KAAK,CAAC,sBAWtD,CAAC;AAEF,eAAO,MAAM,gBAAgB,sMAgB3B,CAAC;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ,GACnB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,sBA+CrD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,SAAS,CAAC,sBAoB1D,CAAC"}

package/dist/simples/checkbox.js

@@ -0,0 +1,103 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { useCheckboxContext as f, Checkbox as o } from "@ark-ui/react/checkbox";
+import { CheckIcon as x, MinusIcon as h } from "lucide-react";
+import { tv as m } from "tailwind-variants";
+import { cn as d } from "../lib/cn.js";
+const N = f, I = (a) => {
+  const { className: t, slot: r, ...i } = a;
+  return /* @__PURE__ */ e(
+    o.Group,
+    {
+      className: d("flex flex-col gap-2", t),
+      ...i,
+      "data-slot": r ?? "checkbox-group"
+    }
+  );
+}, k = m({
+  base: [
+    "relative",
+    "inline-flex shrink-0 items-center justify-center",
+    "bg-transparent",
+    "rounded-selector border border-input shadow-xs/5",
+    "transition-shadow",
+    "data-focus-visible:border-primary data-focus-visible:ring-[3px] data-focus-visible:ring-ring data-focus-visible:ring-offset-1 data-focus-visible:ring-offset-background",
+    "dark:data-focus-visible:data-invalid:border-destructive-foreground/64 dark:data-focus-visible:data-invalid:ring-destructive-foreground/48",
+    "data-disabled:opacity-64",
+    "[[data-disabled],[data-checked],[data-invalid]]:shadow-none",
+    "data-invalid:border-destructive data-invalid:ring-[3px] data-invalid:ring-destructive/24",
+    "dark:data-invalid:text-destructive-foreground",
+    "dark:not-data-checked:bg-field",
+    "motion-reduce:transition-none!"
+  ]
+}), j = (a) => {
+  const {
+    className: t,
+    tabIndex: r,
+    slot: i,
+    children: c,
+    "aria-label": l,
+    "aria-labelledby": b,
+    ...u
+  } = a;
+  return /* @__PURE__ */ s(
+    o.Root,
+    {
+      className: d(
+        "inline-flex items-center gap-2",
+        "data-disabled:opacity-64",
+        t
+      ),
+      ...u,
+      "data-slot": i ?? "checkbox",
+      children: [
+        /* @__PURE__ */ s(
+          o.Control,
+          {
+            className: k(),
+            "data-slot": "checkbox-control",
+            children: [
+              /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(x, {}) }),
+              /* @__PURE__ */ e(n, { indeterminate: !0, children: /* @__PURE__ */ e(h, {}) })
+            ]
+          }
+        ),
+        c,
+        /* @__PURE__ */ e(
+          o.HiddenInput,
+          {
+            "aria-label": l,
+            "aria-labelledby": b,
+            tabIndex: r
+          }
+        )
+      ]
+    }
+  );
+}, n = (a) => {
+  const { className: t, slot: r, ...i } = a;
+  return /* @__PURE__ */ e(
+    o.Indicator,
+    {
+      className: d(
+        "absolute -inset-px",
+        "flex items-center justify-center",
+        "rounded-selector",
+        "text-primary-foreground",
+        "data-[state=checked]:bg-primary",
+        "data-[state=unchecked]:hidden",
+        "data-[state=indeterminate]:text-foreground",
+        t
+      ),
+      ...i,
+      "data-slot": r ?? "checkbox-indicator"
+    }
+  );
+};
+export {
+  j as Checkbox,
+  I as CheckboxGroup,
+  n as CheckboxIndicator,
+  k as checkboxVariants,
+  N as useCheckbox
+};
+//# sourceMappingURL=checkbox.js.map

package/dist/simples/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sources":["../../src/simples/checkbox.tsx"],"sourcesContent":["import {\n  Checkbox as ArkCheckbox,\n  useCheckboxContext,\n} from \"@ark-ui/react/checkbox\";\nimport { CheckIcon, MinusIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\n\nexport const useCheckbox = useCheckboxContext;\n\nexport const CheckboxGroup = (\n  props: React.ComponentProps<typeof ArkCheckbox.Group>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkCheckbox.Group\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...rest}\n      data-slot={slot ?? \"checkbox-group\"}\n    />\n  );\n};\n\nexport const checkboxVariants = tv({\n  base: [\n    \"relative\",\n    \"inline-flex shrink-0 items-center justify-center\",\n    \"bg-transparent\",\n    \"rounded-selector border border-input shadow-xs/5\",\n    \"transition-shadow\",\n    \"data-focus-visible:border-primary data-focus-visible:ring-[3px] data-focus-visible:ring-ring data-focus-visible:ring-offset-1 data-focus-visible:ring-offset-background\",\n    \"dark:data-focus-visible:data-invalid:border-destructive-foreground/64 dark:data-focus-visible:data-invalid:ring-destructive-foreground/48\",\n    \"data-disabled:opacity-64\",\n    \"[[data-disabled],[data-checked],[data-invalid]]:shadow-none\",\n    \"data-invalid:border-destructive data-invalid:ring-[3px] data-invalid:ring-destructive/24\",\n    \"dark:data-invalid:text-destructive-foreground\",\n    \"dark:not-data-checked:bg-field\",\n    \"motion-reduce:transition-none!\",\n  ],\n});\n\n/**\n * Two defects this component carried for as long as it existed, both found by a composite trying to\n * use it and both measured before the fix.\n *\n * The box styling sat on the **root**, so the root was the box and there was nowhere for a label to\n * go: `children` arrived through `...rest` above hardcoded JSX children, JSX children win, and\n * `<Checkbox>Sealed orders</Checkbox>` rendered `textContent: \"\"`. Four docs examples are written\n * that way, the default one included, so the Checkbox page shipped unlabelled boxes\n *. `RadioGroupItem` one file over already had\n * the right shape — box on the control, root as the row, children beside it — and this now matches\n * it. `checkboxVariants` still names the box; what changed is which element wears it.\n *\n * And `role=\"checkbox\"` sat on that root, which is Ark's `<label>`, while `HiddenInput` renders a\n * real `<input type=\"checkbox\">` underneath. Two elements answered to the role, the outer carrying\n * the name and the inner the focus. Ark declares no role there on purpose: the input is the\n * control, and the label names it through the `htmlFor` Ark already sets.\n */\nexport const Checkbox = (\n  props: React.ComponentProps<typeof ArkCheckbox.Root>\n) => {\n  const {\n    className,\n    tabIndex,\n    slot,\n    children,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...rest\n  } = props;\n\n  return (\n    <ArkCheckbox.Root\n      className={cn(\n        \"inline-flex items-center gap-2\",\n        \"data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"checkbox\"}\n    >\n      <ArkCheckbox.Control\n        className={checkboxVariants()}\n        data-slot=\"checkbox-control\"\n      >\n        <CheckboxIndicator>\n          <CheckIcon />\n        </CheckboxIndicator>\n\n        <CheckboxIndicator indeterminate>\n          <MinusIcon />\n        </CheckboxIndicator>\n      </ArkCheckbox.Control>\n\n      {children}\n\n      {/* The name belongs to the control, and the control is this input. Ark's root is a\n          `<label htmlFor>`, so visible children name it for free — but an `aria-label` on a\n          `<label>` names nothing, which is why the two naming props are forwarded here. */}\n      <ArkCheckbox.HiddenInput\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        tabIndex={tabIndex}\n      />\n    </ArkCheckbox.Root>\n  );\n};\n\nexport const CheckboxIndicator = (\n  props: React.ComponentProps<typeof ArkCheckbox.Indicator>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkCheckbox.Indicator\n      className={cn(\n        \"absolute -inset-px\",\n        \"flex items-center justify-center\",\n        \"rounded-selector\",\n        \"text-primary-foreground\",\n        \"data-[state=checked]:bg-primary\",\n        \"data-[state=unchecked]:hidden\",\n        \"data-[state=indeterminate]:text-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"checkbox-indicator\"}\n    />\n  );\n};\n"],"names":["useCheckbox","useCheckboxContext","CheckboxGroup","props","className","slot","rest","jsx","ArkCheckbox","cn","checkboxVariants","tv","Checkbox","tabIndex","children","ariaLabel","ariaLabelledBy","jsxs","CheckboxIndicator","CheckIcon","MinusIcon"],"mappings":";;;;;AASO,MAAMA,IAAcC,GAEdC,IAAgB,CAC3BC,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,WAAWC,EAAG,uBAAuBL,CAAS;AAAA,MAC7C,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaK,IAAmBC,EAAG;AAAA,EACjC,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ,CAAC,GAmBYC,IAAW,CACtBT,MACG;AACH,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAS;AAAA,IACA,MAAAR;AAAA,IACA,UAAAS;AAAA,IACA,cAAcC;AAAA,IACd,mBAAmBC;AAAA,IACnB,GAAGV;AAAA,EAAA,IACDH;AAEJ,SACE,gBAAAc;AAAA,IAACT,EAAY;AAAA,IAAZ;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAEnB,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACT,EAAY;AAAA,UAAZ;AAAA,YACC,WAAWE,EAAA;AAAA,YACX,aAAU;AAAA,YAEV,UAAA;AAAA,cAAA,gBAAAH,EAACW,GAAA,EACC,UAAA,gBAAAX,EAACY,GAAA,CAAA,CAAU,GACb;AAAA,gCAECD,GAAA,EAAkB,eAAa,IAC9B,UAAA,gBAAAX,EAACa,KAAU,EAAA,CACb;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGDN;AAAA,QAKD,gBAAAP;AAAA,UAACC,EAAY;AAAA,UAAZ;AAAA,YACC,cAAYO;AAAA,YACZ,mBAAiBC;AAAA,YACjB,UAAAH;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,GAEaK,IAAoB,CAC/Bf,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;"}

package/dist/simples/client-only.d.ts

@@ -0,0 +1,3 @@
+import { ClientOnly as ArkClientOnly } from '@ark-ui/react/client-only';
+export declare const ClientOnly: (props: React.ComponentProps<typeof ArkClientOnly>) => import("react").JSX.Element;
+//# sourceMappingURL=client-only.d.ts.map

package/dist/simples/client-only.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client-only.d.ts","sourceRoot":"","sources":["../../src/simples/client-only.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAIxE,eAAO,MAAM,UAAU,GACrB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,gCAClB,CAAC"}

package/dist/simples/client-only.js

@@ -0,0 +1,7 @@
+import { jsx as t } from "react/jsx-runtime";
+import { ClientOnly as l } from "@ark-ui/react/client-only";
+const r = (n) => /* @__PURE__ */ t(l, { ...n });
+export {
+  r as ClientOnly
+};
+//# sourceMappingURL=client-only.js.map

package/dist/simples/client-only.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client-only.js","sources":["../../src/simples/client-only.tsx"],"sourcesContent":["import { ClientOnly as ArkClientOnly } from \"@ark-ui/react/client-only\";\n\n// Renders `children` only after mount; `fallback` covers the SSR/first paint. Ark's ClientOnly\n// is transparent (it renders `children`, not a host element), so there is no DOM node to slot.\nexport const ClientOnly = (\n  props: React.ComponentProps<typeof ArkClientOnly>\n) => <ArkClientOnly {...props} />;\n"],"names":["ClientOnly","props","jsx","ArkClientOnly"],"mappings":";;AAIO,MAAMA,IAAa,CACxBC,MACG,gBAAAC,EAACC,GAAA,EAAe,GAAGF,EAAA,CAAO;"}

package/dist/simples/clipboard.d.ts

@@ -0,0 +1,11 @@
+import { Clipboard as ArkClipboard } from '@ark-ui/react/clipboard';
+import { default as React } from 'react';
+export declare const useClipboard: () => import('@ark-ui/react').UseClipboardContext;
+export declare const Clipboard: (props: React.ComponentProps<typeof ArkClipboard.Root>) => React.JSX.Element;
+export declare const ClipboardLabel: ({ slot, ...rest }: React.ComponentProps<typeof ArkClipboard.Label>) => React.JSX.Element;
+export declare const ClipboardControl: (props: React.ComponentProps<typeof ArkClipboard.Control>) => React.JSX.Element;
+export declare const ClipboardInput: (props: React.ComponentProps<typeof ArkClipboard.Input>) => React.JSX.Element;
+export declare const ClipboardValueText: (props: React.ComponentProps<typeof ArkClipboard.ValueText>) => React.JSX.Element;
+export declare const ClipboardIndicator: (props: React.ComponentProps<typeof ArkClipboard.Indicator>) => React.JSX.Element;
+export declare const ClipboardTrigger: (props: React.ComponentProps<typeof ArkClipboard.Trigger>) => React.JSX.Element;
+//# sourceMappingURL=clipboard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard.d.ts","sourceRoot":"","sources":["../../src/simples/clipboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,IAAI,YAAY,EAE1B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,eAAO,MAAM,YAAY,mDAAsB,CAAC;AAEhD,eAAO,MAAM,SAAS,GACpB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,sBAWtD,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,KAAK,CAAC,sBAKnE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,OAAO,CAAC,sBAWzD,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,KAAK,CAAC,sBAevD,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,SAAS,CAAC,sBAgB3D,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,SAAS,CAAC,sBAmB3D,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,OAAO,CAAC,sBAgBzD,CAAC"}

package/dist/simples/clipboard.js

@@ -0,0 +1,99 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useClipboardContext as c, Clipboard as s } from "@ark-ui/react/clipboard";
+import { CheckIcon as d, CopyIcon as p } from "lucide-react";
+import { cn as l } from "../lib/cn.js";
+import { buttonVariants as m } from "./button.js";
+import { FieldLabel as u } from "./field.js";
+import { inputVariants as n } from "./input.js";
+const y = c, T = (t) => {
+  const { className: o, slot: r, ...e } = t;
+  return /* @__PURE__ */ a(
+    s.Root,
+    {
+      className: l("flex flex-col gap-1.5", o),
+      ...e,
+      "data-slot": r ?? "clipboard"
+    }
+  );
+}, V = ({ slot: t, ...o }) => /* @__PURE__ */ a(u, { asChild: !0, children: /* @__PURE__ */ a(s.Label, { ...o, "data-slot": t ?? "clipboard-label" }) }), v = (t) => {
+  const { className: o, slot: r, ...e } = t;
+  return /* @__PURE__ */ a(
+    s.Control,
+    {
+      className: l("flex items-center gap-2", o),
+      ...e,
+      "data-slot": r ?? "clipboard-control"
+    }
+  );
+}, w = (t) => {
+  const { className: o, slot: r, ...e } = t;
+  return /* @__PURE__ */ a(
+    s.Input,
+    {
+      className: l(
+        n({ size: "md" }),
+        "read-only:cursor-default read-only:text-muted-foreground",
+        o
+      ),
+      ...e,
+      "data-slot": r ?? "clipboard-input"
+    }
+  );
+}, z = (t) => {
+  const { className: o, slot: r, ...e } = t;
+  return /* @__PURE__ */ a(
+    s.ValueText,
+    {
+      className: l(
+        n({ size: "md" }),
+        "inline-flex items-center overflow-hidden whitespace-nowrap",
+        "text-muted-foreground",
+        o
+      ),
+      ...e,
+      "data-slot": r ?? "clipboard-value-text"
+    }
+  );
+}, b = (t) => {
+  const {
+    copied: o = /* @__PURE__ */ a(d, {}),
+    children: r = /* @__PURE__ */ a(p, {}),
+    slot: e,
+    ...i
+  } = t;
+  return /* @__PURE__ */ a(
+    s.Indicator,
+    {
+      className: "flex items-center justify-center",
+      copied: o,
+      ...i,
+      "data-slot": e ?? "clipboard-indicator",
+      children: r
+    }
+  );
+}, L = (t) => {
+  const { className: o, children: r = /* @__PURE__ */ a(b, {}), slot: e, ...i } = t;
+  return /* @__PURE__ */ a(
+    s.Trigger,
+    {
+      className: l(
+        m({ variant: "ghost", size: "icon-sm" }),
+        o
+      ),
+      ...i,
+      "data-slot": e ?? "clipboard-trigger",
+      children: r
+    }
+  );
+};
+export {
+  T as Clipboard,
+  v as ClipboardControl,
+  b as ClipboardIndicator,
+  w as ClipboardInput,
+  V as ClipboardLabel,
+  L as ClipboardTrigger,
+  z as ClipboardValueText,
+  y as useClipboard
+};
+//# sourceMappingURL=clipboard.js.map

package/dist/simples/clipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard.js","sources":["../../src/simples/clipboard.tsx"],"sourcesContent":["import {\n  Clipboard as ArkClipboard,\n  useClipboardContext,\n} from \"@ark-ui/react/clipboard\";\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { buttonVariants } from \"./button\";\nimport { FieldLabel } from \"./field\";\nimport { inputVariants } from \"./input\";\n\nexport const useClipboard = useClipboardContext;\n\nexport const Clipboard = (\n  props: React.ComponentProps<typeof ArkClipboard.Root>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkClipboard.Root\n      className={cn(\"flex flex-col gap-1.5\", className)}\n      {...rest}\n      data-slot={slot ?? \"clipboard\"}\n    />\n  );\n};\n\nexport const ClipboardLabel = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkClipboard.Label>\n) => (\n  <FieldLabel asChild>\n    <ArkClipboard.Label {...rest} data-slot={slot ?? \"clipboard-label\"} />\n  </FieldLabel>\n);\n\nexport const ClipboardControl = (\n  props: React.ComponentProps<typeof ArkClipboard.Control>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkClipboard.Control\n      className={cn(\"flex items-center gap-2\", className)}\n      {...rest}\n      data-slot={slot ?? \"clipboard-control\"}\n    />\n  );\n};\n\nexport const ClipboardInput = (\n  props: React.ComponentProps<typeof ArkClipboard.Input>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkClipboard.Input\n      className={cn(\n        inputVariants({ size: \"md\" }),\n        \"read-only:cursor-default read-only:text-muted-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"clipboard-input\"}\n    />\n  );\n};\n\nexport const ClipboardValueText = (\n  props: React.ComponentProps<typeof ArkClipboard.ValueText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkClipboard.ValueText\n      className={cn(\n        inputVariants({ size: \"md\" }),\n        \"inline-flex items-center overflow-hidden whitespace-nowrap\",\n        \"text-muted-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"clipboard-value-text\"}\n    />\n  );\n};\n\nexport const ClipboardIndicator = (\n  props: React.ComponentProps<typeof ArkClipboard.Indicator>\n) => {\n  const {\n    copied = <CheckIcon />,\n    children = <CopyIcon />,\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <ArkClipboard.Indicator\n      className=\"flex items-center justify-center\"\n      copied={copied}\n      {...rest}\n      data-slot={slot ?? \"clipboard-indicator\"}\n    >\n      {children}\n    </ArkClipboard.Indicator>\n  );\n};\n\nexport const ClipboardTrigger = (\n  props: React.ComponentProps<typeof ArkClipboard.Trigger>\n) => {\n  const { className, children = <ClipboardIndicator />, slot, ...rest } = props;\n\n  return (\n    <ArkClipboard.Trigger\n      className={cn(\n        buttonVariants({ variant: \"ghost\", size: \"icon-sm\" }),\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"clipboard-trigger\"}\n    >\n      {children}\n    </ArkClipboard.Trigger>\n  );\n};\n"],"names":["useClipboard","useClipboardContext","Clipboard","props","className","slot","rest","jsx","ArkClipboard","cn","ClipboardLabel","FieldLabel","ClipboardControl","ClipboardInput","inputVariants","ClipboardValueText","ClipboardIndicator","copied","CheckIcon","children","CopyIcon","ClipboardTrigger","buttonVariants"],"mappings":";;;;;;;AAWO,MAAMA,IAAeC,GAEfC,IAAY,CACvBC,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,WAAWC,EAAG,yBAAyBL,CAAS;AAAA,MAC/C,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaK,IAAiB,CAC5B,EAAE,MAAAL,GAAM,GAAGC,EAAA,wBAEVK,GAAA,EAAW,SAAO,IACjB,UAAA,gBAAAJ,EAACC,EAAa,OAAb,EAAoB,GAAGF,GAAM,aAAWD,KAAQ,mBAAmB,EAAA,CACtE,GAGWO,IAAmB,CAC9BT,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,WAAWC,EAAG,2BAA2BL,CAAS;AAAA,MACjD,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaQ,IAAiB,CAC5BV,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,WAAWC;AAAA,QACTK,EAAc,EAAE,MAAM,MAAM;AAAA,QAC5B;AAAA,QACAV;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaU,IAAqB,CAChCZ,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,WAAWC;AAAA,QACTK,EAAc,EAAE,MAAM,MAAM;AAAA,QAC5B;AAAA,QACA;AAAA,QACAV;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaW,IAAqB,CAChCb,MACG;AACH,QAAM;AAAA,IACJ,QAAAc,sBAAUC,GAAA,EAAU;AAAA,IACpB,UAAAC,sBAAYC,GAAA,EAAS;AAAA,IACrB,MAAAf;AAAA,IACA,GAAGC;AAAA,EAAA,IACDH;AAEJ,SACE,gBAAAI;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,WAAU;AAAA,MACV,QAAAS;AAAA,MACC,GAAGX;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAElB,UAAAc;AAAA,IAAA;AAAA,EAAA;AAGP,GAEaE,IAAmB,CAC9BlB,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,UAAAe,IAAW,gBAAAZ,EAACS,KAAmB,GAAI,MAAAX,GAAM,GAAGC,EAAA,IAASH;AAExE,SACE,gBAAAI;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,WAAWC;AAAA,QACTa,EAAe,EAAE,SAAS,SAAS,MAAM,WAAW;AAAA,QACpDlB;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAElB,UAAAc;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/simples/collapsible.d.ts

@@ -0,0 +1,8 @@
+import { Collapsible as ArkCollapsible } from '@ark-ui/react/collapsible';
+import { default as React } from 'react';
+export declare const useCollapsible: () => import('@ark-ui/react').UseCollapsibleContext;
+export declare const Collapsible: (props: React.ComponentProps<typeof ArkCollapsible.Root>) => React.JSX.Element;
+export declare const CollapsibleTrigger: (props: React.ComponentProps<typeof ArkCollapsible.Trigger>) => React.JSX.Element;
+export declare const CollapsibleContent: (props: React.ComponentProps<typeof ArkCollapsible.Content>) => React.JSX.Element;
+export declare const CollapsibleIndicator: (props: React.ComponentProps<typeof ArkCollapsible.Indicator>) => React.JSX.Element;
+//# sourceMappingURL=collapsible.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../src/simples/collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,IAAI,cAAc,EAE9B,MAAM,2BAA2B,CAAC;AAEnC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,cAAc,qDAAwB,CAAC;AAEpD,eAAO,MAAM,WAAW,GACtB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,sBAsBxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,sBAgB3D,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,sBAqB3D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,SAAS,CAAC,sBAa7D,CAAC"}

package/dist/simples/collapsible.js

@@ -0,0 +1,79 @@
+import { jsx as l } from "react/jsx-runtime";
+import { useCollapsibleContext as d, Collapsible as s } from "@ark-ui/react/collapsible";
+import { ChevronDownIcon as p } from "lucide-react";
+import { cn as n } from "../lib/cn.js";
+const g = d, C = (a) => {
+  const {
+    collapsedHeight: t,
+    lazyMount: o = !0,
+    unmountOnExit: e = !0,
+    className: i,
+    slot: r,
+    ...c
+  } = a;
+  return /* @__PURE__ */ l(
+    s.Root,
+    {
+      className: n("group/collapsible", i),
+      collapsedHeight: t,
+      "data-partial-collapse": t ? "" : void 0,
+      lazyMount: t ? !1 : o,
+      unmountOnExit: t ? !1 : e,
+      ...c,
+      "data-slot": r ?? "collapsible"
+    }
+  );
+}, f = (a) => {
+  const { className: t, slot: o, ...e } = a;
+  return /* @__PURE__ */ l(
+    s.Trigger,
+    {
+      className: n(
+        "cursor-pointer",
+        "data-disabled:pointer-events-none data-disabled:opacity-64",
+        "has-data-[slot=collapsible-indicator]:[button]:justify-between",
+        t
+      ),
+      ...e,
+      "data-slot": o ?? "collapsible-trigger"
+    }
+  );
+}, N = (a) => {
+  const { className: t, children: o, slot: e, ...i } = a;
+  return /* @__PURE__ */ l(
+    s.Content,
+    {
+      className: n(
+        "h-(--collapsed-height)",
+        "group-data-partial-collapse/collapsible:h-full",
+        "transition-[height] duration-200",
+        "overflow-hidden",
+        "data-[state=open]:animate-expand",
+        "data-[state=closed]:animate-collapse",
+        "motion-reduce:animate-none! motion-reduce:transition-none!"
+      ),
+      ...i,
+      "data-slot": e ?? "collapsible-content",
+      children: /* @__PURE__ */ l("div", { className: t, children: o })
+    }
+  );
+}, v = (a) => {
+  const { className: t, slot: o, ...e } = a;
+  return /* @__PURE__ */ l(
+    s.Indicator,
+    {
+      className: n("data-[state=open]:[&_svg]:rotate-180", t),
+      ...e,
+      "data-slot": o ?? "collapsible-indicator",
+      children: /* @__PURE__ */ l(p, { className: "transition-transform duration-200 motion-reduce:transition-none!" })
+    }
+  );
+};
+export {
+  C as Collapsible,
+  N as CollapsibleContent,
+  v as CollapsibleIndicator,
+  f as CollapsibleTrigger,
+  g as useCollapsible
+};
+//# sourceMappingURL=collapsible.js.map

package/dist/simples/collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.js","sources":["../../src/simples/collapsible.tsx"],"sourcesContent":["import {\n  Collapsible as ArkCollapsible,\n  useCollapsibleContext,\n} from \"@ark-ui/react/collapsible\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport const useCollapsible = useCollapsibleContext;\n\nexport const Collapsible = (\n  props: React.ComponentProps<typeof ArkCollapsible.Root>\n) => {\n  const {\n    collapsedHeight,\n    lazyMount = true,\n    unmountOnExit = true,\n    className,\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <ArkCollapsible.Root\n      className={cn(\"group/collapsible\", className)}\n      collapsedHeight={collapsedHeight}\n      data-partial-collapse={collapsedHeight ? \"\" : undefined}\n      lazyMount={collapsedHeight ? false : lazyMount}\n      unmountOnExit={collapsedHeight ? false : unmountOnExit}\n      {...rest}\n      data-slot={slot ?? \"collapsible\"}\n    />\n  );\n};\n\nexport const CollapsibleTrigger = (\n  props: React.ComponentProps<typeof ArkCollapsible.Trigger>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkCollapsible.Trigger\n      className={cn(\n        \"cursor-pointer\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        \"has-data-[slot=collapsible-indicator]:[button]:justify-between\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"collapsible-trigger\"}\n    />\n  );\n};\n\nexport const CollapsibleContent = (\n  props: React.ComponentProps<typeof ArkCollapsible.Content>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkCollapsible.Content\n      className={cn(\n        \"h-(--collapsed-height)\",\n        \"group-data-partial-collapse/collapsible:h-full\",\n        \"transition-[height] duration-200\",\n        \"overflow-hidden\",\n        \"data-[state=open]:animate-expand\",\n        \"data-[state=closed]:animate-collapse\",\n        \"motion-reduce:animate-none! motion-reduce:transition-none!\"\n      )}\n      {...rest}\n      data-slot={slot ?? \"collapsible-content\"}\n    >\n      <div className={className}>{children}</div>\n    </ArkCollapsible.Content>\n  );\n};\n\nexport const CollapsibleIndicator = (\n  props: React.ComponentProps<typeof ArkCollapsible.Indicator>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkCollapsible.Indicator\n      className={cn(\"data-[state=open]:[&_svg]:rotate-180\", className)}\n      {...rest}\n      data-slot={slot ?? \"collapsible-indicator\"}\n    >\n      <ChevronDownIcon className=\"transition-transform duration-200 motion-reduce:transition-none!\" />\n    </ArkCollapsible.Indicator>\n  );\n};\n"],"names":["useCollapsible","useCollapsibleContext","Collapsible","props","collapsedHeight","lazyMount","unmountOnExit","className","slot","rest","jsx","ArkCollapsible","cn","CollapsibleTrigger","CollapsibleContent","children","CollapsibleIndicator","ChevronDownIcon"],"mappings":";;;;AAQO,MAAMA,IAAiBC,GAEjBC,IAAc,CACzBC,MACG;AACH,QAAM;AAAA,IACJ,iBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,eAAAC,IAAgB;AAAA,IAChB,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDN;AAEJ,SACE,gBAAAO;AAAA,IAACC,EAAe;AAAA,IAAf;AAAA,MACC,WAAWC,EAAG,qBAAqBL,CAAS;AAAA,MAC5C,iBAAAH;AAAA,MACA,yBAAuBA,IAAkB,KAAK;AAAA,MAC9C,WAAWA,IAAkB,KAAQC;AAAA,MACrC,eAAeD,IAAkB,KAAQE;AAAA,MACxC,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaK,IAAqB,CAChCV,MACG;AACH,QAAM,EAAE,WAAAI,GAAW,MAAAC,GAAM,GAAGC,MAASN;AAErC,SACE,gBAAAO;AAAA,IAACC,EAAe;AAAA,IAAf;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaM,IAAqB,CAChCX,MACG;AACH,QAAM,EAAE,WAAAI,GAAW,UAAAQ,GAAU,MAAAP,GAAM,GAAGC,MAASN;AAE/C,SACE,gBAAAO;AAAA,IAACC,EAAe;AAAA,IAAf;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAGH;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAEnB,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAAH,GAAuB,UAAAQ,EAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAG3C,GAEaC,IAAuB,CAClCb,MACG;AACH,QAAM,EAAE,WAAAI,GAAW,MAAAC,GAAM,GAAGC,MAASN;AAErC,SACE,gBAAAO;AAAA,IAACC,EAAe;AAAA,IAAf;AAAA,MACC,WAAWC,EAAG,wCAAwCL,CAAS;AAAA,MAC9D,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAEnB,UAAA,gBAAAE,EAACO,GAAA,EAAgB,WAAU,mEAAA,CAAmE;AAAA,IAAA;AAAA,EAAA;AAGpG;"}

package/dist/simples/color-picker.d.ts

@@ -0,0 +1,62 @@
+import { ColorPicker as ArkColorPicker, ColorPickerValueChangeDetails, Color } from '@ark-ui/react/color-picker';
+import { ark } from '@ark-ui/react/factory';
+import { default as React } from 'react';
+import { ButtonProps } from './button';
+export declare const parseColor: (colorString: string) => Color;
+export declare const useColorPicker: () => import('@ark-ui/react').UseColorPickerContext;
+/**
+ * `parseColor` that returns `undefined` instead of throwing on a blank or unparseable string.
+ */
+export declare const safeParseColor: (value?: string) => Color | undefined;
+export interface ColorPickerChangeDetails extends ColorPickerValueChangeDetails {
+    /**
+     * The value as a hex string. The machine's `format` is `"rgba" | "hsla" | "hsba"` — there is
+     * no `"hex"` member — so `valueAsString` is never hex, which is the one format most consumers
+     * actually store.
+     */
+    valueAsHex: string;
+}
+export interface ColorPickerProps extends Omit<React.ComponentProps<typeof ArkColorPicker.Root>, "defaultValue" | "onValueChange" | "value"> {
+    /**
+     * The default value of the color picker. A blank or unparseable string is treated as "no
+     * value" rather than throwing.
+     */
+    defaultValue?: string;
+    /**
+     * The value of the color picker. A blank or unparseable string is treated as "no value"
+     * rather than throwing.
+     */
+    value?: string;
+    /**
+     * Called when the value changes, with `valueAsHex` added to Ark's details.
+     */
+    onValueChange?: (details: ColorPickerChangeDetails) => void;
+}
+export declare const ColorPicker: (props: ColorPickerProps) => React.JSX.Element;
+export declare const ColorPickerControl: (props: React.ComponentProps<typeof ArkColorPicker.Control>) => React.JSX.Element;
+export declare const ColorPickerTrigger: ({ slot, ...rest }: React.ComponentProps<typeof ArkColorPicker.Trigger>) => React.JSX.Element;
+export declare const ColorPickerTransparencyGrid: (props: React.ComponentProps<typeof ArkColorPicker.TransparencyGrid>) => React.JSX.Element;
+export declare const ColorPickerContent: (props: React.ComponentProps<typeof ArkColorPicker.Content>) => React.JSX.Element;
+export declare const ColorPickerView: (props: React.ComponentProps<typeof ArkColorPicker.View>) => React.JSX.Element;
+export declare const ColorPickerSlider: (props: React.ComponentProps<typeof ArkColorPicker.ChannelSlider>) => React.JSX.Element;
+interface ColorPickerEyeDropperTrigger extends React.ComponentProps<typeof ArkColorPicker.EyeDropperTrigger>, ButtonProps {
+}
+export declare const ColorPickerEyeDropperTrigger: (props: ColorPickerEyeDropperTrigger) => React.JSX.Element;
+export declare const ColorPickerSwatchGroup: (props: React.ComponentProps<typeof ArkColorPicker.SwatchGroup>) => React.JSX.Element;
+export declare const ColorPickerSwatchTrigger: (props: React.ComponentProps<typeof ArkColorPicker.SwatchTrigger>) => React.JSX.Element;
+export declare const ColorPickerSwatch: (props: React.ComponentProps<typeof ArkColorPicker.Swatch>) => React.JSX.Element;
+export declare const ColorPickerSwatchIndicator: (props: React.ComponentProps<typeof ArkColorPicker.SwatchIndicator>) => React.JSX.Element;
+export declare const ColorPickerValue: (props: React.ComponentProps<typeof ArkColorPicker.ValueText>) => React.JSX.Element;
+export declare const ColorPickerValueSwatch: (props: React.ComponentProps<typeof ArkColorPicker.ValueSwatch>) => React.JSX.Element;
+interface ColorPickerAreaProps extends React.ComponentProps<typeof ArkColorPicker.Area> {
+    /**
+     *
+     */
+    showDots?: boolean;
+}
+export declare const ColorPickerArea: (props: ColorPickerAreaProps) => React.JSX.Element;
+export declare const ColorPickerAreaThumb: (props: React.ComponentProps<typeof ArkColorPicker.AreaThumb>) => React.JSX.Element;
+export declare const ColorPickerInput: (props: Partial<React.ComponentProps<typeof ArkColorPicker.ChannelInput>>) => React.JSX.Element;
+export declare const ColorPickerSwatchPreview: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=color-picker.d.ts.map

package/dist/simples/color-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../src/simples/color-picker.tsx"],"names":[],"mappings":"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"}