@kanzo-tech/ui 0.0.1-alpha

package/dist/simples/progress.d.ts

@@ -0,0 +1,23 @@
+import { Progress as ArkProgress } from '@ark-ui/react/progress';
+import { default as React } from 'react';
+export declare const useProgress: () => import('@ark-ui/react').UseProgressContext;
+interface ProgressProps extends Omit<React.ComponentProps<typeof ArkProgress.Root>, "value"> {
+    /**
+     * Shows indeterminate progress
+     *
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * The value of the progress bar
+     *
+     * @default 0
+     */
+    value?: number;
+}
+export declare const Progress: (props: ProgressProps) => React.JSX.Element;
+export declare const ProgressTrack: ({ slot, ...rest }: React.ComponentProps<typeof ArkProgress.Track>) => React.JSX.Element;
+export declare const ProgressRange: ({ slot, ...rest }: React.ComponentProps<typeof ArkProgress.Range>) => React.JSX.Element;
+export declare const ProgressValue: (props: React.ComponentProps<typeof ArkProgress.ValueText>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=progress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/simples/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,IAAI,WAAW,EAExB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,WAAW,kDAAqB,CAAC;AAE9C,UAAU,aACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACpE;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBA+B5C,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,KAAK,CAAC,sBAalE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,mBAG3B,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,KAAK,CAAC,sBAahD,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,SAAS,CAAC,sBAa1D,CAAC"}

package/dist/simples/progress.js

@@ -0,0 +1,82 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { useProgressContext as u, Progress as r } from "@ark-ui/react/progress";
+import { cn as o } from "../lib/cn.js";
+import { FieldLabel as g } from "./field.js";
+const w = u, N = (a) => {
+  const {
+    value: t,
+    orientation: n = "horizontal",
+    indeterminate: s = !1,
+    className: i,
+    children: l,
+    slot: d,
+    ...c
+  } = a;
+  return /* @__PURE__ */ m(
+    r.Root,
+    {
+      className: o(
+        "flex flex-wrap gap-3",
+        "data-[orientation=horizontal]:w-full",
+        "data-[orientation=vertical]:-scale-y-100",
+        i
+      ),
+      orientation: n,
+      value: s ? null : t,
+      ...c,
+      "data-slot": d ?? "progress",
+      children: [
+        l,
+        /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(f, {}) })
+      ]
+    }
+  );
+}, h = ({ slot: a, ...t }) => /* @__PURE__ */ e(
+  r.Track,
+  {
+    className: o(
+      "bg-border",
+      "rounded-full",
+      "overflow-x-hidden",
+      "data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full",
+      "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2"
+    ),
+    ...t,
+    "data-slot": a ?? "progress-track"
+  }
+), f = ({
+  slot: a,
+  ...t
+}) => /* @__PURE__ */ e(
+  r.Range,
+  {
+    className: o(
+      "bg-primary",
+      "transition-all duration-300 ease-out",
+      "data-[orientation=horizontal]:h-full",
+      "data-[orientation=vertical]:h-full",
+      "motion-reduce:animate-none! motion-reduce:transition-none!",
+      "data-[state=indeterminate]:w-1/3 data-[state=indeterminate]:animate-indeterminate! data-[state=indeterminate]:duration-100"
+    ),
+    ...t,
+    "data-slot": a ?? "progress-range"
+  }
+), b = (a) => {
+  const { className: t, slot: n, ...s } = a;
+  return /* @__PURE__ */ e(g, { asChild: !0, children: /* @__PURE__ */ e(
+    r.ValueText,
+    {
+      className: o("ms-auto tabular-nums", t),
+      ...s,
+      "data-slot": n ?? "progress-value"
+    }
+  ) });
+};
+export {
+  N as Progress,
+  f as ProgressRange,
+  h as ProgressTrack,
+  b as ProgressValue,
+  w as useProgress
+};
+//# sourceMappingURL=progress.js.map

package/dist/simples/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","sources":["../../src/simples/progress.tsx"],"sourcesContent":["import {\n  Progress as ArkProgress,\n  useProgressContext,\n} from \"@ark-ui/react/progress\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldLabel } from \"./field\";\n\nexport const useProgress = useProgressContext;\n\ninterface ProgressProps\n  extends Omit<React.ComponentProps<typeof ArkProgress.Root>, \"value\"> {\n  /**\n   * Shows indeterminate progress\n   *\n   * @default false\n   */\n  indeterminate?: boolean;\n  /**\n   * The value of the progress bar\n   *\n   * @default 0\n   */\n  value?: number;\n}\n\nexport const Progress = (props: ProgressProps) => {\n  const {\n    value,\n    orientation = \"horizontal\",\n    indeterminate = false,\n    className,\n    children,\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <ArkProgress.Root\n      className={cn(\n        \"flex flex-wrap gap-3\",\n        \"data-[orientation=horizontal]:w-full\",\n        \"data-[orientation=vertical]:-scale-y-100\",\n        className\n      )}\n      orientation={orientation}\n      value={indeterminate ? null : value}\n      {...rest}\n      data-slot={slot ?? \"progress\"}\n    >\n      {children}\n\n      <ProgressTrack>\n        <ProgressRange />\n      </ProgressTrack>\n    </ArkProgress.Root>\n  );\n};\n\nexport const ProgressTrack = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkProgress.Track>\n) => (\n  <ArkProgress.Track\n    className={cn(\n      \"bg-border\",\n      \"rounded-full\",\n      \"overflow-x-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    {...rest}\n    data-slot={slot ?? \"progress-track\"}\n  />\n);\n\nexport const ProgressRange = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkProgress.Range>) => (\n  <ArkProgress.Range\n    className={cn(\n      \"bg-primary\",\n      \"transition-all duration-300 ease-out\",\n      \"data-[orientation=horizontal]:h-full\",\n      \"data-[orientation=vertical]:h-full\",\n      \"motion-reduce:animate-none! motion-reduce:transition-none!\",\n      \"data-[state=indeterminate]:w-1/3 data-[state=indeterminate]:animate-indeterminate! data-[state=indeterminate]:duration-100\"\n    )}\n    {...rest}\n    data-slot={slot ?? \"progress-range\"}\n  />\n);\n\nexport const ProgressValue = (\n  props: React.ComponentProps<typeof ArkProgress.ValueText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <FieldLabel asChild>\n      <ArkProgress.ValueText\n        className={cn(\"ms-auto tabular-nums\", className)}\n        {...rest}\n        data-slot={slot ?? \"progress-value\"}\n      />\n    </FieldLabel>\n  );\n};\n"],"names":["useProgress","useProgressContext","Progress","props","value","orientation","indeterminate","className","children","slot","rest","jsxs","ArkProgress","cn","jsx","ProgressTrack","ProgressRange","ProgressValue","FieldLabel"],"mappings":";;;;AAQO,MAAMA,IAAcC,GAkBdC,IAAW,CAACC,MAAyB;AAChD,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,eAAAC,IAAgB;AAAA,IAChB,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDP;AAEJ,SACE,gBAAAQ;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAEF,aAAAF;AAAA,MACA,OAAOC,IAAgB,OAAOF;AAAA,MAC7B,GAAGM;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAElB,UAAA;AAAA,QAAAD;AAAA,QAED,gBAAAM,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACE,GAAA,CAAA,CAAc,EAAA,CACjB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEaD,IAAgB,CAC3B,EAAE,MAAAN,GAAM,GAAGC,QAEX,gBAAAI;AAAA,EAACF,EAAY;AAAA,EAAZ;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAGH;AAAA,IACJ,aAAWD,KAAQ;AAAA,EAAA;AACrB,GAGWO,IAAgB,CAAC;AAAA,EAC5B,MAAAP;AAAA,EACA,GAAGC;AACL,MACE,gBAAAI;AAAA,EAACF,EAAY;AAAA,EAAZ;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAGH;AAAA,IACJ,aAAWD,KAAQ;AAAA,EAAA;AACrB,GAGWQ,IAAgB,CAC3Bd,MACG;AACH,QAAM,EAAE,WAAAI,GAAW,MAAAE,GAAM,GAAGC,MAASP;AAErC,SACE,gBAAAW,EAACI,GAAA,EAAW,SAAO,IACjB,UAAA,gBAAAJ;AAAA,IAACF,EAAY;AAAA,IAAZ;AAAA,MACC,WAAWC,EAAG,wBAAwBN,CAAS;AAAA,MAC9C,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA,GAEvB;AAEJ;"}

package/dist/simples/prose.d.ts

@@ -0,0 +1,17 @@
+import { ark } from '@ark-ui/react/factory';
+import { default as React } from 'react';
+/**
+ * Prose — a block of rendered long-form content: markdown, a changelog, an article.
+ *
+ * It is the ONLY typography component in the library, and that is the whole position. There
+ * used to be `Heading` and `Text` atoms with `size` / `weight` / `variant` / `align` /
+ * `truncate` props — five styling knobs on a `<span>`, which is styling-by-props competing
+ * with the utilities, and precisely the ad-hoc styling a recipe exists to prevent. They
+ * also had no consumer anywhere in the library: every component styles its own text, which is
+ * what Shark does and what the type scale is actually for.
+ *
+ * So: chrome styles itself, and `Prose` handles the case utilities cannot — a tree of elements
+ * you did not author, arriving from a markdown renderer or a CMS.
+ */
+export declare const Prose: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+//# sourceMappingURL=prose.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prose.d.ts","sourceRoot":"","sources":["../../src/simples/prose.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,KAAK,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAUhE,CAAC"}

package/dist/simples/prose.js

@@ -0,0 +1,18 @@
+import { jsx as a } from "react/jsx-runtime";
+import { ark as m } from "@ark-ui/react/factory";
+import { cn as e } from "../lib/cn.js";
+const i = (o) => {
+  const { className: r, slot: s, ...t } = o;
+  return /* @__PURE__ */ a(
+    m.div,
+    {
+      className: e("kanzo-prose mx-auto max-w-[65ch]", r),
+      ...t,
+      "data-slot": s ?? "prose"
+    }
+  );
+};
+export {
+  i as Prose
+};
+//# sourceMappingURL=prose.js.map

package/dist/simples/prose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prose.js","sources":["../../src/simples/prose.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * Prose — a block of rendered long-form content: markdown, a changelog, an article.\n *\n * It is the ONLY typography component in the library, and that is the whole position. There\n * used to be `Heading` and `Text` atoms with `size` / `weight` / `variant` / `align` /\n * `truncate` props — five styling knobs on a `<span>`, which is styling-by-props competing\n * with the utilities, and precisely the ad-hoc styling a recipe exists to prevent. They\n * also had no consumer anywhere in the library: every component styles its own text, which is\n * what Shark does and what the type scale is actually for.\n *\n * So: chrome styles itself, and `Prose` handles the case utilities cannot — a tree of elements\n * you did not author, arriving from a markdown renderer or a CMS.\n */\nexport const Prose = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\"kanzo-prose mx-auto max-w-[65ch]\", className)}\n      {...rest}\n      data-slot={slot ?? \"prose\"}\n    />\n  );\n};\n"],"names":["Prose","props","className","slot","rest","jsx","ark","cn"],"mappings":";;;AAiBO,MAAMA,IAAQ,CAACC,MAAgD;AACpE,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAG,oCAAoCL,CAAS;AAAA,MAC1D,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;"}

package/dist/simples/radio-group.d.ts

@@ -0,0 +1,23 @@
+import { RadioGroup as ArkRadioGroup } from '@ark-ui/react/radio-group';
+import { default as React } from 'react';
+export declare const useRadioGroup: () => import('@ark-ui/react').UseRadioGroupContext;
+export interface RadioGroupProps extends React.ComponentProps<typeof ArkRadioGroup.Root> {
+    /**
+     * Lay the items out as a grid instead of the default column. `"auto"` fits as many
+     * card-width tracks as the container allows; a number pins the count.
+     *
+     * A declared addition to Shark's file, and the whole of what the deleted `CardRadioGroup`
+     * added over this compound. Distinct from Ark's `orientation`, which is arrow-key direction
+     * and not layout. The count is written to a `--columns` custom property rather than a class,
+     * so a responsive count stays CSS and needs no second prop:
+     * `columns={1} className="sm:[--columns:2] lg:[--columns:4]"`.
+     */
+    columns?: number | "auto";
+}
+export declare const RadioGroup: (props: RadioGroupProps) => React.JSX.Element;
+export declare const RadioGroupItem: (props: React.ComponentProps<typeof ArkRadioGroup.Item>) => React.JSX.Element;
+export declare const RadioGroupCard: (props: React.ComponentProps<typeof ArkRadioGroup.Item>) => React.JSX.Element;
+export declare const RadioGroupIndicator: (props: React.ComponentProps<typeof ArkRadioGroup.ItemControl>) => React.JSX.Element;
+export declare const RadioGroupText: (props: React.ComponentProps<typeof ArkRadioGroup.ItemText>) => React.JSX.Element;
+export declare const RadioGroupLabel: (props: React.ComponentProps<typeof ArkRadioGroup.Label>) => React.JSX.Element;
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/simples/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/simples/radio-group.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,UAAU,IAAI,aAAa,EAE5B,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,aAAa,oDAAuB,CAAC;AAElD,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC;IACvD;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAgBD,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBA8BhD,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,sBAwCvD,CAAC;AAKF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,sBAyCvD,CAAC;AAGF,eAAO,MAAM,mBAAmB,GAC9B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,WAAW,CAAC,sBAgB9D,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,QAAQ,CAAC,sBAc3D,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,sBAWxD,CAAC"}

package/dist/simples/radio-group.js

@@ -0,0 +1,149 @@
+"use client";
+import { jsx as i, jsxs as c } from "react/jsx-runtime";
+import { useFieldContext as b } from "@ark-ui/react/field";
+import { useRadioGroupContext as m, RadioGroup as o } from "@ark-ui/react/radio-group";
+import { cn as l } from "../lib/cn.js";
+import { FieldLabel as u } from "./field.js";
+const k = m, I = (a) => {
+  const { className: d, children: t, columns: e, style: s, slot: n, ...p } = a, r = b();
+  return /* @__PURE__ */ i(
+    o.Root,
+    {
+      className: l(
+        e === void 0 ? "flex flex-col gap-3" : "grid gap-3",
+        e === "auto" && "grid-cols-[repeat(auto-fit,minmax(8.5rem,1fr))]",
+        typeof e == "number" && "grid-cols-[repeat(var(--columns),minmax(0,1fr))]",
+        "data-invalid:text-destructive dark:data-invalid:text-destructive-foreground",
+        d
+      ),
+      disabled: r == null ? void 0 : r.disabled,
+      invalid: r == null ? void 0 : r.invalid,
+      readOnly: r == null ? void 0 : r.readOnly,
+      required: r == null ? void 0 : r.required,
+      style: typeof e == "number" ? { "--columns": e, ...s } : s,
+      ...p,
+      "data-slot": n ?? "radio-group",
+      children: t
+    }
+  );
+}, R = (a) => {
+  const { tabIndex: d, className: t, children: e, slot: s, ...n } = a;
+  return /* @__PURE__ */ c(
+    o.Item,
+    {
+      className: l(
+        "inline-flex items-center gap-2",
+        "data-disabled:opacity-64",
+        t
+      ),
+      ...n,
+      "data-slot": s ?? "radio-group-item",
+      children: [
+        /* @__PURE__ */ i(
+          o.ItemControl,
+          {
+            className: l(
+              "relative",
+              "inline-flex shrink-0 items-center justify-center",
+              "size-4",
+              "border border-input shadow-xs/5",
+              "bg-field",
+              "rounded-full",
+              "before:size-1.5 before:rounded-full",
+              "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",
+              // No border clause here: `data-invalid` below already paints it solid `--destructive`,
+              // and the `/64` this used to carry made focus *weaken* the boundary 1.4.11 asks 3:1 of.
+              "data-focus-visible:data-invalid:ring-destructive/48",
+              "data-invalid:border-destructive data-invalid:text-destructive-foreground data-invalid:ring-[3px] data-invalid:ring-destructive/24",
+              "dark:data-invalid:text-destructive-foreground dark:data-invalid:ring-[3px]",
+              "data-[state=checked]:bg-primary data-[state=checked]:before:bg-primary-foreground",
+              "data-invalid:data-[state=checked]:bg-transparent data-invalid:data-[state=checked]:before:bg-destructive-foreground"
+            ),
+            "data-slot": "radio-group-item-control"
+          }
+        ),
+        /* @__PURE__ */ i(f, { children: e }),
+        /* @__PURE__ */ i(o.ItemHiddenInput, { tabIndex: d })
+      ]
+    }
+  );
+}, G = (a) => {
+  const { tabIndex: d, className: t, children: e, slot: s, ...n } = a;
+  return /* @__PURE__ */ c(
+    o.Item,
+    {
+      className: l(
+        "relative flex cursor-pointer gap-2 rounded-field border border-input bg-transparent p-3 transition-colors",
+        // The rest state is the backdrop (`bg-transparent`) and a card can sit anywhere, so no
+        // solid and no percentage is right everywhere: a 50% `bg-accent` measures ΔE 0.00 from rest
+        // on an accent backdrop and solid `bg-secondary` measures 0.00 on a secondary one — a hover
+        // and a selected state a user cannot see, on the surface each is most likely to meet. Both
+        // are therefore alpha steps, composited onto whatever is under them.
+        //
+        // **Selected is the BRAND's step and hover is the neutral's**, which is the half worth not
+        // undoing: the border already goes `--primary` when checked, so a neutral fill under a
+        // brand border was the one place a tenant's palette stopped at the outline. It is also what
+        // the reference does — shadcn's choice card is `border-primary` over a 5% `--primary`.
+        //
+        // Measured 2026-08-20 over `packages/theme/palettes/*.css` — six documents × two modes ×
+        // the six surfaces a card can sit on (background, card, popover, muted, secondary, accent),
+        // 72 pairs. Floors, light / dark: rest→hover ΔE 3.34 / 5.32, rest→selected 5.81 / 9.46,
+        // hover→selected **1.46 / 3.47**. That last figure is the one to read before changing this:
+        // the neutral `base-a5` it replaced measured 2.73 / 3.03 there, so the fill alone separates
+        // hover from selected LESS well than it did. **`border-input` → `border-primary` is what
+        // carries that step**, and it is a far larger signal than either fill; the fill's own job is
+        // rest→selected, which improved. Take the border away and this stops being measured.
+        "hover:bg-foreground/14",
+        "data-[state=checked]:border-primary data-[state=checked]:bg-primary/17",
+        "data-disabled:pointer-events-none data-disabled:opacity-64",
+        "has-data-focus-visible:border-primary has-data-focus-visible:ring-[3px] has-data-focus-visible:ring-ring",
+        "data-invalid:border-destructive",
+        t
+      ),
+      ...n,
+      "data-slot": s ?? "radio-group-card",
+      children: [
+        e,
+        /* @__PURE__ */ i(o.ItemHiddenInput, { tabIndex: d })
+      ]
+    }
+  );
+}, N = (a) => {
+  const { className: d, slot: t, ...e } = a;
+  return /* @__PURE__ */ i(
+    o.ItemControl,
+    {
+      className: l(
+        "inline-flex size-4 shrink-0 items-center justify-center rounded-full border border-input bg-field shadow-xs/5",
+        "before:size-1.5 before:rounded-full",
+        "data-[state=checked]:bg-primary data-[state=checked]:before:bg-primary-foreground",
+        d
+      ),
+      ...e,
+      "data-slot": t ?? "radio-group-indicator"
+    }
+  );
+}, f = (a) => {
+  const { className: d, children: t, slot: e, ...s } = a;
+  return /* @__PURE__ */ i(u, { asChild: !0, children: /* @__PURE__ */ i(
+    o.ItemText,
+    {
+      ...s,
+      "data-slot": e ?? "radio-group-item-text",
+      children: t
+    }
+  ) });
+}, C = (a) => {
+  const { children: d, slot: t, ...e } = a;
+  return /* @__PURE__ */ i(u, { asChild: !0, children: /* @__PURE__ */ i(o.Label, { ...e, "data-slot": t ?? "radio-group-label", children: d }) });
+};
+export {
+  I as RadioGroup,
+  G as RadioGroupCard,
+  N as RadioGroupIndicator,
+  R as RadioGroupItem,
+  C as RadioGroupLabel,
+  f as RadioGroupText,
+  k as useRadioGroup
+};
+//# sourceMappingURL=radio-group.js.map

package/dist/simples/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","sources":["../../src/simples/radio-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { type UseFieldContext, useFieldContext } from \"@ark-ui/react/field\";\nimport {\n  RadioGroup as ArkRadioGroup,\n  useRadioGroupContext,\n} from \"@ark-ui/react/radio-group\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldLabel } from \"./field\";\n\nexport const useRadioGroup = useRadioGroupContext;\n\nexport interface RadioGroupProps\n  extends React.ComponentProps<typeof ArkRadioGroup.Root> {\n  /**\n   * Lay the items out as a grid instead of the default column. `\"auto\"` fits as many\n   * card-width tracks as the container allows; a number pins the count.\n   *\n   * A declared addition to Shark's file, and the whole of what the deleted `CardRadioGroup`\n   * added over this compound. Distinct from Ark's `orientation`, which is arrow-key direction\n   * and not layout. The count is written to a `--columns` custom property rather than a class,\n   * so a responsive count stays CSS and needs no second prop:\n   * `columns={1} className=\"sm:[--columns:2] lg:[--columns:4]\"`.\n   */\n  columns?: number | \"auto\";\n}\n\n// Divergence from Shark, declared: Ark 5.37.2's `useRadioGroup` bridges `useFieldsetContext`\n// (disabled/invalid/legend id) but NOT `useFieldContext` — grep `dist/components` and radio-group\n// is one of only two form machines with zero `useFieldContext` imports (Slider is the other; the\n// thirteen single-control machines all have one). Ark's Field docs only claim \"most\" components\n// support the context and there is no upstream issue, so this reads as an unfilled gap, not a\n// decision. Shark neither bridges nor documents it: its docs say \"use the `invalid` prop on\n// RadioGroup\", and its own TanStack example wraps `<Field invalid>` around a RadioGroup that\n// never turns red. We bridge it, so `invalid` is stated once on the Field.\n//\n// State flags only, never `field.ids`: Field addresses ONE control, and a radio group has one\n// hidden input per item, so there is no single id for its label to point at — `FieldSet` +\n// `FieldLegend` remains the right labelling container. Explicit props still win, and with no\n// `Field` ancestor every flag is `undefined`, which Ark strips before it reaches the machine, so\n// the built-in Fieldset bridge is untouched.\nexport const RadioGroup = (props: RadioGroupProps) => {\n  const { className, children, columns, style, slot, ...rest } = props;\n\n  const field: UseFieldContext | undefined = useFieldContext();\n\n  return (\n    <ArkRadioGroup.Root\n      className={cn(\n        columns === undefined ? \"flex flex-col gap-3\" : \"grid gap-3\",\n        columns === \"auto\" && \"grid-cols-[repeat(auto-fit,minmax(8.5rem,1fr))]\",\n        typeof columns === \"number\" &&\n          \"grid-cols-[repeat(var(--columns),minmax(0,1fr))]\",\n        \"data-invalid:text-destructive dark:data-invalid:text-destructive-foreground\",\n        className\n      )}\n      disabled={field?.disabled}\n      invalid={field?.invalid}\n      readOnly={field?.readOnly}\n      required={field?.required}\n      style={\n        typeof columns === \"number\"\n          ? ({ \"--columns\": columns, ...style } as React.CSSProperties)\n          : style\n      }\n      {...rest}\n      data-slot={slot ?? \"radio-group\"}\n    >\n      {children}\n    </ArkRadioGroup.Root>\n  );\n};\n\nexport const RadioGroupItem = (\n  props: React.ComponentProps<typeof ArkRadioGroup.Item>\n) => {\n  const { tabIndex, className, children, slot, ...rest } = props;\n\n  return (\n    <ArkRadioGroup.Item\n      className={cn(\n        \"inline-flex items-center gap-2\",\n        \"data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"radio-group-item\"}\n    >\n      <ArkRadioGroup.ItemControl\n        className={cn(\n          \"relative\",\n          \"inline-flex shrink-0 items-center justify-center\",\n          \"size-4\",\n          \"border border-input shadow-xs/5\",\n          \"bg-field\",\n          \"rounded-full\",\n          \"before:size-1.5 before:rounded-full\",\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          // No border clause here: `data-invalid` below already paints it solid `--destructive`,\n          // and the `/64` this used to carry made focus *weaken* the boundary 1.4.11 asks 3:1 of.\n          \"data-focus-visible:data-invalid:ring-destructive/48\",\n          \"data-invalid:border-destructive data-invalid:text-destructive-foreground data-invalid:ring-[3px] data-invalid:ring-destructive/24\",\n          \"dark:data-invalid:text-destructive-foreground dark:data-invalid:ring-[3px]\",\n          \"data-[state=checked]:bg-primary data-[state=checked]:before:bg-primary-foreground\",\n          \"data-invalid:data-[state=checked]:bg-transparent data-invalid:data-[state=checked]:before:bg-destructive-foreground\"\n        )}\n        data-slot=\"radio-group-item-control\"\n      />\n\n      <RadioGroupText>{children}</RadioGroupText>\n\n      <ArkRadioGroup.ItemHiddenInput tabIndex={tabIndex} />\n    </ArkRadioGroup.Item>\n  );\n};\n\n// A card-shaped option: raw children (compose label/description/preview/indicator yourself),\n// full radio semantics from Ark, the selected look driven by `data-[state=checked]`. This is\n// what \"card radio\" is — the same machine styled as a card, not a separate component.\nexport const RadioGroupCard = (\n  props: React.ComponentProps<typeof ArkRadioGroup.Item>\n) => {\n  const { tabIndex, className, children, slot, ...rest } = props;\n\n  return (\n    <ArkRadioGroup.Item\n      className={cn(\n        \"relative flex cursor-pointer gap-2 rounded-field border border-input bg-transparent p-3 transition-colors\",\n        // The rest state is the backdrop (`bg-transparent`) and a card can sit anywhere, so no\n        // solid and no percentage is right everywhere: a 50% `bg-accent` measures ΔE 0.00 from rest\n        // on an accent backdrop and solid `bg-secondary` measures 0.00 on a secondary one — a hover\n        // and a selected state a user cannot see, on the surface each is most likely to meet. Both\n        // are therefore alpha steps, composited onto whatever is under them.\n        //\n        // **Selected is the BRAND's step and hover is the neutral's**, which is the half worth not\n        // undoing: the border already goes `--primary` when checked, so a neutral fill under a\n        // brand border was the one place a tenant's palette stopped at the outline. It is also what\n        // the reference does — shadcn's choice card is `border-primary` over a 5% `--primary`.\n        //\n        // Measured 2026-08-20 over `packages/theme/palettes/*.css` — six documents × two modes ×\n        // the six surfaces a card can sit on (background, card, popover, muted, secondary, accent),\n        // 72 pairs. Floors, light / dark: rest→hover ΔE 3.34 / 5.32, rest→selected 5.81 / 9.46,\n        // hover→selected **1.46 / 3.47**. That last figure is the one to read before changing this:\n        // the neutral `base-a5` it replaced measured 2.73 / 3.03 there, so the fill alone separates\n        // hover from selected LESS well than it did. **`border-input` → `border-primary` is what\n        // carries that step**, and it is a far larger signal than either fill; the fill's own job is\n        // rest→selected, which improved. Take the border away and this stops being measured.\n        \"hover:bg-foreground/14\",\n        \"data-[state=checked]:border-primary data-[state=checked]:bg-primary/17\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        \"has-data-focus-visible:border-primary has-data-focus-visible:ring-[3px] has-data-focus-visible:ring-ring\",\n        \"data-invalid:border-destructive\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"radio-group-card\"}\n    >\n      {children}\n      <ArkRadioGroup.ItemHiddenInput tabIndex={tabIndex} />\n    </ArkRadioGroup.Item>\n  );\n};\n\n// The visual radio dot, no semantics of its own — drop it inside a card to show selection.\nexport const RadioGroupIndicator = (\n  props: React.ComponentProps<typeof ArkRadioGroup.ItemControl>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkRadioGroup.ItemControl\n      className={cn(\n        \"inline-flex size-4 shrink-0 items-center justify-center rounded-full border border-input bg-field shadow-xs/5\",\n        \"before:size-1.5 before:rounded-full\",\n        \"data-[state=checked]:bg-primary data-[state=checked]:before:bg-primary-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"radio-group-indicator\"}\n    />\n  );\n};\n\nexport const RadioGroupText = (\n  props: React.ComponentProps<typeof ArkRadioGroup.ItemText>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <FieldLabel asChild>\n      <ArkRadioGroup.ItemText\n        {...rest}\n        data-slot={slot ?? \"radio-group-item-text\"}\n      >\n        {children}\n      </ArkRadioGroup.ItemText>\n    </FieldLabel>\n  );\n};\n\nexport const RadioGroupLabel = (\n  props: React.ComponentProps<typeof ArkRadioGroup.Label>\n) => {\n  const { children, slot, ...rest } = props;\n\n  return (\n    <FieldLabel asChild>\n      <ArkRadioGroup.Label {...rest} data-slot={slot ?? \"radio-group-label\"}>\n        {children}\n      </ArkRadioGroup.Label>\n    </FieldLabel>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAWO;AAgCL;AAIA;AACE;AAAe;AAAd;AACY;AACuC;AAC1B;AAEpB;AACF;AACA;AAAA;AAEe;AACD;AACC;AACA;AAIX;AAEF;AACe;AAElB;AAAA;AAGP;AAKE;AAEA;AACE;AAAe;AAAd;AACY;AACT;AACA;AACA;AAAA;AAEE;AACe;AAEnB;AAAA;AAAe;AAAd;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAEQ;AAAA;AAAA;AAGc;AAEyB;AAAA;AAAA;AAGzD;AAQE;AAEA;AACE;AAAe;AAAd;AACY;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAElB;AAAA;AACkD;AAAA;AAAA;AAGzD;AAME;AAEA;AACE;AAAe;AAAd;AACY;AACT;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAKE;AAEA;AAEI;AAAe;AAAd;AACK;AACe;AAElB;AAAA;AAIT;AAKE;AAEA;AAOF;;;;;;;;;;"}

package/dist/simples/rating.d.ts

@@ -0,0 +1,10 @@
+import { RatingGroup as ArkRatingGroup } from '@ark-ui/react/rating-group';
+import { default as React } from 'react';
+export declare const useRating: () => import('@ark-ui/react').UseRatingGroupContext;
+export declare const RatingContext: (props: ArkRatingGroup.ContextProps) => React.ReactNode;
+export declare const Rating: (props: React.ComponentProps<typeof ArkRatingGroup.Root>) => React.JSX.Element;
+export declare const RatingLabel: (props: React.ComponentProps<typeof ArkRatingGroup.Label>) => React.JSX.Element;
+export declare const RatingControl: (props: React.ComponentProps<typeof ArkRatingGroup.Control>) => React.JSX.Element;
+export declare const RatingItem: (props: React.ComponentProps<typeof ArkRatingGroup.Item>) => React.JSX.Element;
+export declare const RatingHiddenInput: ({ slot, ...rest }: React.ComponentProps<typeof ArkRatingGroup.HiddenInput>) => React.JSX.Element;
+//# sourceMappingURL=rating.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rating.d.ts","sourceRoot":"","sources":["../../src/simples/rating.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,IAAI,cAAc,EAE9B,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,SAAS,qDAAwB,CAAC;AAG/C,eAAO,MAAM,aAAa,yDAAyB,CAAC;AAEpD,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,sBAiBxD,CAAC;AAEF,eAAO,MAAM,WAAW,GACtB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,sBAWzD,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,sBAe3D,CAAC;AAEF,eAAO,MAAM,UAAU,GACrB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,sBAuCxD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,sBAG3E,CAAC"}

package/dist/simples/rating.js

@@ -0,0 +1,81 @@
+import { jsx as e, jsxs as d, Fragment as c } from "react/jsx-runtime";
+import { RatingGroup as r, useRatingGroupContext as g } from "@ark-ui/react/rating-group";
+import { StarIcon as l } from "lucide-react";
+import { cn as o } from "../lib/cn.js";
+import { FieldLabel as u } from "./field.js";
+const b = g, R = r.Context, v = (t) => {
+  const { className: a, children: n, slot: i, ...s } = t;
+  return /* @__PURE__ */ e(
+    r.Root,
+    {
+      className: o(
+        "flex flex-col gap-2",
+        "data-invalid:text-destructive dark:data-invalid:text-destructive-foreground",
+        a
+      ),
+      ...s,
+      "data-slot": i ?? "rating",
+      children: n
+    }
+  );
+}, N = (t) => {
+  const { children: a, slot: n, ...i } = t;
+  return /* @__PURE__ */ e(u, { asChild: !0, children: /* @__PURE__ */ e(r.Label, { ...i, "data-slot": n ?? "rating-label", children: a }) });
+}, C = (t) => {
+  const { className: a, slot: n, ...i } = t;
+  return /* @__PURE__ */ e(
+    r.Control,
+    {
+      className: o(
+        "inline-flex items-center gap-0.5",
+        "data-disabled:pointer-events-none data-disabled:opacity-64",
+        a
+      ),
+      ...i,
+      "data-slot": n ?? "rating-control"
+    }
+  );
+}, I = (t) => {
+  const { className: a, children: n, slot: i, ...s } = t;
+  return /* @__PURE__ */ e(
+    r.Item,
+    {
+      className: o(
+        "group/rating-item relative",
+        "cursor-pointer",
+        "rounded-sm",
+        "outline-none data-focus-visible:ring-[3px] data-focus-visible:ring-ring",
+        "data-readonly:cursor-default",
+        "data-disabled:cursor-default",
+        a
+      ),
+      ...s,
+      "data-slot": i ?? "rating-item",
+      children: n ?? /* @__PURE__ */ d(c, { children: [
+        /* @__PURE__ */ e(l, { "aria-hidden": !0, className: "size-5 text-input" }),
+        /* @__PURE__ */ e(
+          l,
+          {
+            "aria-hidden": !0,
+            className: o(
+              "absolute inset-0 size-5",
+              "fill-warning text-warning",
+              "opacity-0 group-data-highlighted/rating-item:opacity-100",
+              "group-data-half/rating-item:[clip-path:inset(0_50%_0_0)]"
+            )
+          }
+        )
+      ] })
+    }
+  );
+}, y = ({ slot: t, ...a }) => /* @__PURE__ */ e(r.HiddenInput, { ...a, "data-slot": t ?? "rating-hidden-input" });
+export {
+  v as Rating,
+  R as RatingContext,
+  C as RatingControl,
+  y as RatingHiddenInput,
+  I as RatingItem,
+  N as RatingLabel,
+  b as useRating
+};
+//# sourceMappingURL=rating.js.map

package/dist/simples/rating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating.js","sources":["../../src/simples/rating.tsx"],"sourcesContent":["import {\n  RatingGroup as ArkRatingGroup,\n  useRatingGroupContext,\n} from \"@ark-ui/react/rating-group\";\nimport { StarIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldLabel } from \"./field\";\n\nexport const useRating = useRatingGroupContext;\n\n// Render-prop context used to map the machine's items into styled stars.\nexport const RatingContext = ArkRatingGroup.Context;\n\nexport const Rating = (\n  props: React.ComponentProps<typeof ArkRatingGroup.Root>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkRatingGroup.Root\n      className={cn(\n        \"flex flex-col gap-2\",\n        \"data-invalid:text-destructive dark:data-invalid:text-destructive-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"rating\"}\n    >\n      {children}\n    </ArkRatingGroup.Root>\n  );\n};\n\nexport const RatingLabel = (\n  props: React.ComponentProps<typeof ArkRatingGroup.Label>\n) => {\n  const { children, slot, ...rest } = props;\n\n  return (\n    <FieldLabel asChild>\n      <ArkRatingGroup.Label {...rest} data-slot={slot ?? \"rating-label\"}>\n        {children}\n      </ArkRatingGroup.Label>\n    </FieldLabel>\n  );\n};\n\nexport const RatingControl = (\n  props: React.ComponentProps<typeof ArkRatingGroup.Control>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkRatingGroup.Control\n      className={cn(\n        \"inline-flex items-center gap-0.5\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"rating-control\"}\n    />\n  );\n};\n\nexport const RatingItem = (\n  props: React.ComponentProps<typeof ArkRatingGroup.Item>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkRatingGroup.Item\n      className={cn(\n        \"group/rating-item relative\",\n        \"cursor-pointer\",\n        \"rounded-sm\",\n        \"outline-none data-focus-visible:ring-[3px] data-focus-visible:ring-ring\",\n        \"data-readonly:cursor-default\",\n        \"data-disabled:cursor-default\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"rating-item\"}\n    >\n      {children ?? (\n        <>\n          {/* The empty star is what says \"out of five\", so it owes the 3:1 that identifies a\n              control's unfilled state. Diluted it measured 2.03:1 in light and 2.23 in dark.\n              `--input` is the boundary role — the first ramp step that reaches 3:1 — and lands at\n              4.54 and 4.18 while staying well under step 11, which at 9.19 would out-shout the\n              filled stars (`--warning`, 3.07 in light). Same duty as a switch's unchecked track. */}\n          <StarIcon aria-hidden className=\"size-5 text-input\" />\n          <StarIcon\n            aria-hidden\n            className={cn(\n              \"absolute inset-0 size-5\",\n              \"fill-warning text-warning\",\n              \"opacity-0 group-data-highlighted/rating-item:opacity-100\",\n              \"group-data-half/rating-item:[clip-path:inset(0_50%_0_0)]\"\n            )}\n          />\n        </>\n      )}\n    </ArkRatingGroup.Item>\n  );\n};\n\nexport const RatingHiddenInput = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkRatingGroup.HiddenInput>\n) => (\n  <ArkRatingGroup.HiddenInput {...rest} data-slot={slot ?? \"rating-hidden-input\"} />\n);\n"],"names":["useRating","useRatingGroupContext","RatingContext","ArkRatingGroup","Rating","props","className","children","slot","rest","jsx","cn","RatingLabel","FieldLabel","RatingControl","RatingItem","jsxs","Fragment","StarIcon","RatingHiddenInput"],"mappings":";;;;;AASO,MAAMA,IAAYC,GAGZC,IAAgBC,EAAe,SAE/BC,IAAS,CACpBC,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,MAAAC,GAAM,GAAGC,MAASJ;AAE/C,SACE,gBAAAK;AAAA,IAACP,EAAe;AAAA,IAAf;AAAA,MACC,WAAWQ;AAAA,QACT;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAElB,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP,GAEaK,IAAc,CACzBP,MACG;AACH,QAAM,EAAE,UAAAE,GAAU,MAAAC,GAAM,GAAGC,MAASJ;AAEpC,SACE,gBAAAK,EAACG,GAAA,EAAW,SAAO,IACjB,4BAACV,EAAe,OAAf,EAAsB,GAAGM,GAAM,aAAWD,KAAQ,gBAChD,UAAAD,GACH,GACF;AAEJ,GAEaO,IAAgB,CAC3BT,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,MAAAE,GAAM,GAAGC,MAASJ;AAErC,SACE,gBAAAK;AAAA,IAACP,EAAe;AAAA,IAAf;AAAA,MACC,WAAWQ;AAAA,QACT;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaO,IAAa,CACxBV,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,MAAAC,GAAM,GAAGC,MAASJ;AAE/C,SACE,gBAAAK;AAAA,IAACP,EAAe;AAAA,IAAf;AAAA,MACC,WAAWQ;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAElB,eACC,gBAAAQ,EAAAC,GAAA,EAME,UAAA;AAAA,QAAA,gBAAAP,EAACQ,GAAA,EAAS,eAAW,IAAC,WAAU,qBAAoB;AAAA,QACpD,gBAAAR;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,eAAW;AAAA,YACX,WAAWP;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAIR,GAEaQ,IAAoB,CAC/B,EAAE,MAAAX,GAAM,GAAGC,EAAA,MAEX,gBAAAC,EAACP,EAAe,aAAf,EAA4B,GAAGM,GAAM,aAAWD,KAAQ,sBAAA,CAAuB;"}

package/dist/simples/resizable.d.ts

@@ -0,0 +1,16 @@
+import { Splitter as ArkSplitter } from '@ark-ui/react/splitter';
+import { default as React } from 'react';
+export declare const useResizable: () => import('@ark-ui/react').UseSplitterContext;
+export declare const Resizable: (props: React.ComponentProps<typeof ArkSplitter.Root>) => React.JSX.Element;
+export declare const ResizablePanel: ({ slot, ...rest }: React.ComponentProps<typeof ArkSplitter.Panel>) => React.JSX.Element;
+interface ResizableResizeTriggerProps extends React.ComponentProps<typeof ArkSplitter.ResizeTrigger> {
+    /**
+     * Whether to show the handle
+     *
+     * @default false
+     */
+    withHandle?: boolean;
+}
+export declare const ResizableResizeTrigger: (props: ResizableResizeTriggerProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=resizable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../src/simples/resizable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,IAAI,WAAW,EAExB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,YAAY,kDAAqB,CAAC;AAE/C,eAAO,MAAM,SAAS,GACpB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,sBAWrD,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,KAAK,CAAC,sBACO,CAAC;AAE3E,UAAU,2BACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,aAAa,CAAC;IAC9D;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,sBAAsB,GAAI,OAAO,2BAA2B,sBAoCxE,CAAC"}

package/dist/simples/resizable.js

@@ -0,0 +1,57 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useSplitterContext as n, Splitter as l } from "@ark-ui/react/splitter";
+import { GripVertical as c } from "lucide-react";
+import { cn as s } from "../lib/cn.js";
+const u = n, v = (e) => {
+  const { className: t, slot: r, ...i } = e;
+  return /* @__PURE__ */ a(
+    l.Root,
+    {
+      className: s("flex size-full", t),
+      ...i,
+      "data-slot": r ?? "resizable"
+    }
+  );
+}, z = ({ slot: e, ...t }) => /* @__PURE__ */ a(l.Panel, { ...t, "data-slot": e ?? "resizable-panel" }), g = (e) => {
+  const { withHandle: t = !1, className: r, slot: i, ...o } = e;
+  return /* @__PURE__ */ a(
+    l.ResizeTrigger,
+    {
+      "aria-label": "Resize",
+      className: s(
+        "relative bg-border",
+        "flex w-px items-center justify-center",
+        "after:-translate-x-1/2 data-[orientation=vertical]:after:-translate-y-1/2",
+        "after:absolute after:inset-s-1/2 after:inset-y-0 after:w-1",
+        "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
+        "data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full",
+        "data-[orientation=vertical]:after:inset-s-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full",
+        "data-[orientation=vertical]:after:translate-x-0",
+        "[&[data-orientation=vertical]>div]:rotate-90",
+        r
+      ),
+      ...o,
+      "data-slot": i ?? "resizable-resize-trigger",
+      children: t && /* @__PURE__ */ a(
+        "div",
+        {
+          className: s(
+            "z-10",
+            "h-4 w-3",
+            "flex items-center justify-center",
+            "bg-border",
+            "rounded-xs border"
+          ),
+          children: /* @__PURE__ */ a(c, { className: "size-2.5" })
+        }
+      )
+    }
+  );
+};
+export {
+  v as Resizable,
+  z as ResizablePanel,
+  g as ResizableResizeTrigger,
+  u as useResizable
+};
+//# sourceMappingURL=resizable.js.map

package/dist/simples/resizable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.js","sources":["../../src/simples/resizable.tsx"],"sourcesContent":["import {\n  Splitter as ArkSplitter,\n  useSplitterContext,\n} from \"@ark-ui/react/splitter\";\nimport { GripVertical } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport const useResizable = useSplitterContext;\n\nexport const Resizable = (\n  props: React.ComponentProps<typeof ArkSplitter.Root>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkSplitter.Root\n      className={cn(\"flex size-full\", className)}\n      {...rest}\n      data-slot={slot ?? \"resizable\"}\n    />\n  );\n};\n\nexport const ResizablePanel = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkSplitter.Panel>\n) => <ArkSplitter.Panel {...rest} data-slot={slot ?? \"resizable-panel\"} />;\n\ninterface ResizableResizeTriggerProps\n  extends React.ComponentProps<typeof ArkSplitter.ResizeTrigger> {\n  /**\n   * Whether to show the handle\n   *\n   * @default false\n   */\n  withHandle?: boolean;\n}\n\nexport const ResizableResizeTrigger = (props: ResizableResizeTriggerProps) => {\n  const { withHandle = false, className, slot, ...rest } = props;\n\n  return (\n    <ArkSplitter.ResizeTrigger\n      aria-label=\"Resize\"\n      className={cn(\n        \"relative bg-border\",\n        \"flex w-px items-center justify-center\",\n        \"after:-translate-x-1/2 data-[orientation=vertical]:after:-translate-y-1/2\",\n        \"after:absolute after:inset-s-1/2 after:inset-y-0 after:w-1\",\n        \"focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1\",\n        \"data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full\",\n        \"data-[orientation=vertical]:after:inset-s-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full\",\n        \"data-[orientation=vertical]:after:translate-x-0\",\n        \"[&[data-orientation=vertical]>div]:rotate-90\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"resizable-resize-trigger\"}\n    >\n      {withHandle && (\n        <div\n          className={cn(\n            \"z-10\",\n            \"h-4 w-3\",\n            \"flex items-center justify-center\",\n            \"bg-border\",\n            \"rounded-xs border\"\n          )}\n        >\n          <GripVertical className=\"size-2.5\" />\n        </div>\n      )}\n    </ArkSplitter.ResizeTrigger>\n  );\n};\n"],"names":["useResizable","useSplitterContext","Resizable","props","className","slot","rest","jsx","ArkSplitter","cn","ResizablePanel","ResizableResizeTrigger","withHandle","GripVertical"],"mappings":";;;;AAQO,MAAMA,IAAeC,GAEfC,IAAY,CACvBC,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,WAAWC,EAAG,kBAAkBL,CAAS;AAAA,MACxC,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaK,IAAiB,CAC5B,EAAE,MAAAL,GAAM,GAAGC,EAAA,MACR,gBAAAC,EAACC,EAAY,OAAZ,EAAmB,GAAGF,GAAM,aAAWD,KAAQ,kBAAA,CAAmB,GAY3DM,IAAyB,CAACR,MAAuC;AAC5E,QAAM,EAAE,YAAAS,IAAa,IAAO,WAAAR,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAEzD,SACE,gBAAAI;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,cAAW;AAAA,MACX,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAElB,UAAAO,KACC,gBAAAL;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWE;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAGF,UAAA,gBAAAF,EAACM,GAAA,EAAa,WAAU,WAAA,CAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IACrC;AAAA,EAAA;AAIR;"}

package/dist/simples/scroll-area.d.ts

@@ -0,0 +1,23 @@
+import { ScrollArea as ArkScrollArea } from '@ark-ui/react/scroll-area';
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const useScrollArea: () => import('@ark-ui/react').UseScrollAreaContext;
+declare const scrollAreaVariants: import('tailwind-variants').TVReturnType<{
+    scrollFade: {
+        true: string[];
+    };
+}, undefined, string[], {
+    scrollFade: {
+        true: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    scrollFade: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+interface ScrollAreaProps extends React.ComponentProps<typeof ArkScrollArea.Root>, VariantProps<typeof scrollAreaVariants> {
+}
+export declare const ScrollArea: (props: ScrollAreaProps) => React.JSX.Element;
+export declare const ScrollAreaScrollbar: (props: React.ComponentProps<typeof ArkScrollArea.Scrollbar>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=scroll-area.d.ts.map

package/dist/simples/scroll-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../src/simples/scroll-area.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,IAAI,aAAa,EAE5B,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D,eAAO,MAAM,aAAa,oDAAuB,CAAC;AAElD,QAAA,MAAM,kBAAkB;;;;;;;;;;;;qDAuBtB,CAAC;AAEH,UAAU,eACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,EACrD,YAAY,CAAC,OAAO,kBAAkB,CAAC;CAAG;AAE9C,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBAwBhD,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,SAAS,CAAC,sBAkC5D,CAAC"}