@kanzo-tech/ui 0.0.1-alpha

package/dist/simples/scroll-area.js

@@ -0,0 +1,88 @@
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { useScrollAreaContext as m, ScrollArea as o } from "@ark-ui/react/scroll-area";
+import { tv as f } from "tailwind-variants";
+import { cn as s } from "../lib/cn.js";
+const x = m, h = f({
+  base: [
+    "h-full",
+    "rounded-[inherit]",
+    "outline-none",
+    "scrollbar-none",
+    "outline-none"
+  ],
+  variants: {
+    scrollFade: {
+      true: [
+        "mask-t-from-[calc(100%-var(--fade-size))]",
+        "mask-b-from-[calc(100%-var(--fade-size))]",
+        "data-at-top:mask-t-from-100%",
+        "data-at-bottom:mask-b-from-100%",
+        "transition-shadow",
+        "motion-reduce:transition-none!"
+      ]
+    }
+  },
+  defaultVariants: {
+    scrollFade: !1
+  }
+}), y = (t) => {
+  const { scrollFade: r = !1, className: l, children: e, slot: n, ...c } = t;
+  return /* @__PURE__ */ d(
+    o.Root,
+    {
+      className: s("size-full min-h-0 [--fade-size:1.5rem]", l),
+      ...c,
+      "data-slot": n ?? "scroll-area",
+      children: [
+        /* @__PURE__ */ a(
+          o.Viewport,
+          {
+            className: s(h({ scrollFade: r })),
+            "data-slot": "scroll-area-viewport",
+            children: /* @__PURE__ */ a(o.Content, { "data-slot": "scroll-area-content", children: e })
+          }
+        ),
+        /* @__PURE__ */ a(i, { orientation: "vertical" }),
+        /* @__PURE__ */ a(i, { orientation: "horizontal" }),
+        /* @__PURE__ */ a(o.Corner, { "data-slot": "scroll-area-corner" })
+      ]
+    }
+  );
+}, i = (t) => {
+  const { orientation: r, className: l, slot: e, ...n } = t;
+  return /* @__PURE__ */ a(
+    o.Scrollbar,
+    {
+      className: s(
+        "flex",
+        "m-1",
+        "bg-transparent",
+        "opacity-0 transition-opacity delay-300",
+        "data-[orientation=vertical]:w-1.5",
+        "data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:flex-col",
+        "data-hover:opacity-100 data-hover:delay-0 data-hover:duration-100",
+        "data-scrolling:opacity-100 data-scrolling:delay-0 data-scrolling:duration-100",
+        "data-[orientation=vertical]:in-[[data-slot=scroll-area]:not([data-overflow-y])]:hidden",
+        "data-[orientation=horizontal]:in-[[data-slot=scroll-area]:not([data-overflow-x])]:hidden",
+        "motion-reduce:transition-none!",
+        l
+      ),
+      orientation: r,
+      ...n,
+      "data-slot": e ?? "scroll-area-scrollbar",
+      children: /* @__PURE__ */ a(
+        o.Thumb,
+        {
+          className: "relative flex-1 rounded-full bg-input",
+          "data-slot": "scroll-area-thumb"
+        }
+      )
+    }
+  );
+};
+export {
+  y as ScrollArea,
+  i as ScrollAreaScrollbar,
+  x as useScrollArea
+};
+//# sourceMappingURL=scroll-area.js.map

package/dist/simples/scroll-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.js","sources":["../../src/simples/scroll-area.tsx"],"sourcesContent":["import {\n  ScrollArea as ArkScrollArea,\n  useScrollAreaContext,\n} from \"@ark-ui/react/scroll-area\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\n\nexport const useScrollArea = useScrollAreaContext;\n\nconst scrollAreaVariants = tv({\n  base: [\n    \"h-full\",\n    \"rounded-[inherit]\",\n    \"outline-none\",\n    \"scrollbar-none\",\n    \"outline-none\",\n  ],\n  variants: {\n    scrollFade: {\n      true: [\n        \"mask-t-from-[calc(100%-var(--fade-size))]\",\n        \"mask-b-from-[calc(100%-var(--fade-size))]\",\n        \"data-at-top:mask-t-from-100%\",\n        \"data-at-bottom:mask-b-from-100%\",\n        \"transition-shadow\",\n        \"motion-reduce:transition-none!\",\n      ],\n    },\n  },\n  defaultVariants: {\n    scrollFade: false,\n  },\n});\n\ninterface ScrollAreaProps\n  extends React.ComponentProps<typeof ArkScrollArea.Root>,\n    VariantProps<typeof scrollAreaVariants> {}\n\nexport const ScrollArea = (props: ScrollAreaProps) => {\n  const { scrollFade = false, className, children, slot, ...rest } = props;\n\n  return (\n    <ArkScrollArea.Root\n      className={cn(\"size-full min-h-0 [--fade-size:1.5rem]\", className)}\n      {...rest}\n      data-slot={slot ?? \"scroll-area\"}\n    >\n      <ArkScrollArea.Viewport\n        className={cn(scrollAreaVariants({ scrollFade }))}\n        data-slot=\"scroll-area-viewport\"\n      >\n        <ArkScrollArea.Content data-slot=\"scroll-area-content\">\n          {children}\n        </ArkScrollArea.Content>\n      </ArkScrollArea.Viewport>\n\n      <ScrollAreaScrollbar orientation=\"vertical\" />\n      <ScrollAreaScrollbar orientation=\"horizontal\" />\n\n      <ArkScrollArea.Corner data-slot=\"scroll-area-corner\" />\n    </ArkScrollArea.Root>\n  );\n};\n\nexport const ScrollAreaScrollbar = (\n  props: React.ComponentProps<typeof ArkScrollArea.Scrollbar>\n) => {\n  const { orientation, className, slot, ...rest } = props;\n\n  return (\n    <ArkScrollArea.Scrollbar\n      className={cn(\n        \"flex\",\n        \"m-1\",\n        \"bg-transparent\",\n        \"opacity-0 transition-opacity delay-300\",\n        \"data-[orientation=vertical]:w-1.5\",\n        \"data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:flex-col\",\n        \"data-hover:opacity-100 data-hover:delay-0 data-hover:duration-100\",\n        \"data-scrolling:opacity-100 data-scrolling:delay-0 data-scrolling:duration-100\",\n        \"data-[orientation=vertical]:in-[[data-slot=scroll-area]:not([data-overflow-y])]:hidden\",\n        \"data-[orientation=horizontal]:in-[[data-slot=scroll-area]:not([data-overflow-x])]:hidden\",\n        \"motion-reduce:transition-none!\",\n        className\n      )}\n      orientation={orientation}\n      {...rest}\n      data-slot={slot ?? \"scroll-area-scrollbar\"}\n    >\n      {/* The thumb is the whole control — the track is `bg-transparent` — so its fill is the\n          visual information that identifies it, at 3:1. Diluted it measured 1.55:1 on the light\n          page and 1.69–1.78 on the dark surfaces; `--input`, the boundary role, gives 4.54 and\n          3.89–4.18. A fill by spelling, a boundary by duty, like a switch's unchecked track. */}\n      <ArkScrollArea.Thumb\n        className=\"relative flex-1 rounded-full bg-input\"\n        data-slot=\"scroll-area-thumb\"\n      />\n    </ArkScrollArea.Scrollbar>\n  );\n};\n"],"names":["useScrollArea","useScrollAreaContext","scrollAreaVariants","tv","ScrollArea","props","scrollFade","className","children","slot","rest","jsxs","ArkScrollArea","cn","jsx","ScrollAreaScrollbar","orientation"],"mappings":";;;;AAQO,MAAMA,IAAgBC,GAEvBC,IAAqBC,EAAG;AAAA,EAC5B,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,YAAY;AAAA,EAAA;AAEhB,CAAC,GAMYC,IAAa,CAACC,MAA2B;AACpD,QAAM,EAAE,YAAAC,IAAa,IAAO,WAAAC,GAAW,UAAAC,GAAU,MAAAC,GAAM,GAAGC,MAASL;AAEnE,SACE,gBAAAM;AAAA,IAACC,EAAc;AAAA,IAAd;AAAA,MACC,WAAWC,EAAG,0CAA0CN,CAAS;AAAA,MAChE,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAEnB,UAAA;AAAA,QAAA,gBAAAK;AAAA,UAACF,EAAc;AAAA,UAAd;AAAA,YACC,WAAWC,EAAGX,EAAmB,EAAE,YAAAI,EAAA,CAAY,CAAC;AAAA,YAChD,aAAU;AAAA,YAEV,4BAACM,EAAc,SAAd,EAAsB,aAAU,uBAC9B,UAAAJ,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,QAGF,gBAAAM,EAACC,GAAA,EAAoB,aAAY,WAAA,CAAW;AAAA,QAC5C,gBAAAD,EAACC,GAAA,EAAoB,aAAY,aAAA,CAAa;AAAA,QAE9C,gBAAAD,EAACF,EAAc,QAAd,EAAqB,aAAU,qBAAA,CAAqB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3D,GAEaG,IAAsB,CACjCV,MACG;AACH,QAAM,EAAE,aAAAW,GAAa,WAAAT,GAAW,MAAAE,GAAM,GAAGC,MAASL;AAElD,SACE,gBAAAS;AAAA,IAACF,EAAc;AAAA,IAAd;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAEF,aAAAS;AAAA,MACC,GAAGN;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAMnB,UAAA,gBAAAK;AAAA,QAACF,EAAc;AAAA,QAAd;AAAA,UACC,WAAU;AAAA,UACV,aAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,27 @@
+import { SegmentGroup as ArkSegmentGroup } from '@ark-ui/react/segment-group';
+import { default as React } from 'react';
+export declare const useSegmentGroup: () => import('@ark-ui/react').UseSegmentGroupContext;
+type SegmentGroupVariant = "default" | "underline" | "solid";
+export interface SegmentGroupOption {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+interface SegmentGroupProps extends React.ComponentProps<typeof ArkSegmentGroup.Root> {
+    /**
+     * The visual variant of the segment group.
+     *
+     * @default "default"
+     */
+    variant?: SegmentGroupVariant;
+    /** Data-driven items rendered before `children` (additive with the compound API). */
+    options?: readonly SegmentGroupOption[];
+    /** Extra classes applied to each `options`-rendered item. */
+    itemClassName?: string;
+}
+export declare const SegmentGroup: (props: SegmentGroupProps) => React.JSX.Element;
+export declare const SegmentGroupItem: (props: React.ComponentProps<typeof ArkSegmentGroup.Item>) => React.JSX.Element;
+export declare const SegmentGroupItemText: (props: React.ComponentProps<typeof ArkSegmentGroup.ItemText>) => React.JSX.Element;
+export declare const SegmentGroupIndicator: (props: React.ComponentProps<typeof ArkSegmentGroup.Indicator>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=segment-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"segment-group.d.ts","sourceRoot":"","sources":["../../src/simples/segment-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,IAAI,eAAe,EAEhC,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,eAAe,sDAAyB,CAAC;AAEtD,KAAK,mBAAmB,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAE7D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,iBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACzD;;;;OAIG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,qFAAqF;IACrF,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACxC,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBAsDpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,sBA4BzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,sBAW7D,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,sBA8B9D,CAAC"}

package/dist/simples/segment-group.js

@@ -0,0 +1,129 @@
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { useSegmentGroupContext as c, SegmentGroup as o } from "@ark-ui/react/segment-group";
+import { cn as i } from "../lib/cn.js";
+const N = c, w = (e) => {
+  const {
+    orientation: a = "horizontal",
+    variant: r = "default",
+    options: t,
+    itemClassName: s,
+    className: u,
+    children: p,
+    slot: g,
+    ...m
+  } = e;
+  return /* @__PURE__ */ l(
+    o.Root,
+    {
+      className: i(
+        "group/segment-group relative",
+        "flex gap-2",
+        "isolate",
+        "data-[orientation=vertical]:flex-col",
+        "data-disabled:opacity-64",
+        "data-[variant=underline]:gap-1 data-[variant=underline]:border-input",
+        "data-[orientation=horizontal]:data-[variant=underline]:border-b",
+        "data-[orientation=vertical]:data-[variant=underline]:border-l",
+        // `solid`: a filled `bg-muted` track with equal-width segments — the contained
+        // "segmented control" look, so consumers stop hand-rolling the track each time.
+        // The track border is solid: diluted, it composited to ramp step 5 on every backdrop
+        // (ΔE 0.00–1.65), and step 5 is `--accent`. `--border` moved from 5 to 6 precisely so a
+        // border and a hover surface would stop being the same colour.
+        "data-[variant=solid]:rounded-field data-[variant=solid]:border data-[variant=solid]:border-border data-[variant=solid]:bg-muted data-[variant=solid]:p-1",
+        u
+      ),
+      "data-variant": r,
+      orientation: a,
+      ...m,
+      "data-slot": g ?? "segment-group",
+      children: [
+        /* @__PURE__ */ n(b, {}),
+        t == null ? void 0 : t.map((d) => /* @__PURE__ */ n(
+          v,
+          {
+            value: d.value,
+            disabled: d.disabled,
+            className: i("px-3 py-1.5", s),
+            children: /* @__PURE__ */ n(h, { className: "flex items-center justify-center gap-2 text-sm font-medium", children: d.label })
+          },
+          d.value
+        )),
+        p
+      ]
+    }
+  );
+}, v = (e) => {
+  const { className: a, children: r, slot: t, ...s } = e;
+  return /* @__PURE__ */ l(
+    o.Item,
+    {
+      className: i(
+        "relative z-1",
+        "inline-flex items-center justify-center",
+        "cursor-pointer select-none",
+        "text-sm font-medium text-muted-foreground transition-colors",
+        "hover:text-foreground data-[state=checked]:text-foreground",
+        "data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start",
+        "group-data-[variant=solid]/segment-group:flex-1 group-data-[variant=solid]/segment-group:justify-center",
+        "rounded-[inherit] border border-transparent",
+        "outline-none data-focus-visible:border-primary data-focus-visible:ring-[3px] data-focus-visible:ring-ring",
+        "data-disabled:pointer-events-none data-disabled:opacity-64",
+        a
+      ),
+      ...s,
+      "data-slot": t ?? "segment-group-item",
+      children: [
+        r,
+        /* @__PURE__ */ n(o.ItemControl, {}),
+        /* @__PURE__ */ n(o.ItemHiddenInput, {})
+      ]
+    }
+  );
+}, h = (e) => {
+  const { className: a, slot: r, ...t } = e;
+  return /* @__PURE__ */ n(
+    o.ItemText,
+    {
+      className: i("relative z-1", a),
+      ...t,
+      "data-slot": r ?? "segment-group-item-text"
+    }
+  );
+}, b = (e) => {
+  const { className: a, slot: r, ...t } = e;
+  return /* @__PURE__ */ n(
+    o.Indicator,
+    {
+      className: i(
+        "absolute top-(--top) left-(--left) z-0",
+        "h-(--height) w-(--width)",
+        "rounded-[inherit]",
+        // The moving "pill": an elevated surface with a hairline border and a soft shadow, so
+        // the selected segment reads as a raised chip on the muted track (crisp, not flat).
+        // Solid for the same reason as the track — diluted it landed on step 5, `--accent`.
+        "border border-border bg-background shadow-sm",
+        "transition-[width,height,left,top] duration-150 ease-out",
+        "[transition-property:var(--transition-property,width,height,left,top)]",
+        // `underline` is a bar, not a pill: drop the chrome and paint the accent.
+        "group-data-[variant=underline]/segment-group:border-transparent group-data-[variant=underline]/segment-group:bg-primary group-data-[variant=underline]/segment-group:shadow-none",
+        "data-[orientation=horizontal]:group-data-[variant=underline]/segment-group:top-[calc(var(--top)+var(--height)-1px)]",
+        "data-[orientation=vertical]:group-data-[variant=underline]/segment-group:right-[calc(var(--left)+var(--width)-1px)]",
+        "data-[orientation=vertical]:group-data-[variant=underline]/segment-group:-translate-x-px",
+        "data-[orientation=horizontal]:group-data-[variant=underline]/segment-group:h-0.5",
+        "data-[orientation=vertical]:group-data-[variant=underline]/segment-group:w-0.5",
+        "motion-reduce:transition-none!",
+        a
+      ),
+      ...t,
+      "data-slot": r ?? "segment-group-indicator"
+    }
+  );
+};
+export {
+  w as SegmentGroup,
+  b as SegmentGroupIndicator,
+  v as SegmentGroupItem,
+  h as SegmentGroupItemText,
+  N as useSegmentGroup
+};
+//# sourceMappingURL=segment-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"segment-group.js","sources":["../../src/simples/segment-group.tsx"],"sourcesContent":["import {\n  SegmentGroup as ArkSegmentGroup,\n  useSegmentGroupContext,\n} from \"@ark-ui/react/segment-group\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport const useSegmentGroup = useSegmentGroupContext;\n\ntype SegmentGroupVariant = \"default\" | \"underline\" | \"solid\";\n\nexport interface SegmentGroupOption {\n  value: string;\n  label: React.ReactNode;\n  disabled?: boolean;\n}\n\ninterface SegmentGroupProps\n  extends React.ComponentProps<typeof ArkSegmentGroup.Root> {\n  /**\n   * The visual variant of the segment group.\n   *\n   * @default \"default\"\n   */\n  variant?: SegmentGroupVariant;\n  /** Data-driven items rendered before `children` (additive with the compound API). */\n  options?: readonly SegmentGroupOption[];\n  /** Extra classes applied to each `options`-rendered item. */\n  itemClassName?: string;\n}\n\nexport const SegmentGroup = (props: SegmentGroupProps) => {\n  const {\n    orientation = \"horizontal\",\n    variant = \"default\",\n    options,\n    itemClassName,\n    className,\n    children,\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <ArkSegmentGroup.Root\n      className={cn(\n        \"group/segment-group relative\",\n        \"flex gap-2\",\n        \"isolate\",\n        \"data-[orientation=vertical]:flex-col\",\n        \"data-disabled:opacity-64\",\n        \"data-[variant=underline]:gap-1 data-[variant=underline]:border-input\",\n        \"data-[orientation=horizontal]:data-[variant=underline]:border-b\",\n        \"data-[orientation=vertical]:data-[variant=underline]:border-l\",\n        // `solid`: a filled `bg-muted` track with equal-width segments — the contained\n        // \"segmented control\" look, so consumers stop hand-rolling the track each time.\n        // The track border is solid: diluted, it composited to ramp step 5 on every backdrop\n        // (ΔE 0.00–1.65), and step 5 is `--accent`. `--border` moved from 5 to 6 precisely so a\n        // border and a hover surface would stop being the same colour.\n        \"data-[variant=solid]:rounded-field data-[variant=solid]:border data-[variant=solid]:border-border data-[variant=solid]:bg-muted data-[variant=solid]:p-1\",\n        className\n      )}\n      data-variant={variant}\n      orientation={orientation}\n      {...rest}\n      data-slot={slot ?? \"segment-group\"}\n    >\n      <SegmentGroupIndicator />\n\n      {options?.map((o) => (\n        <SegmentGroupItem\n          key={o.value}\n          value={o.value}\n          disabled={o.disabled}\n          className={cn(\"px-3 py-1.5\", itemClassName)}\n        >\n          <SegmentGroupItemText className=\"flex items-center justify-center gap-2 text-sm font-medium\">\n            {o.label}\n          </SegmentGroupItemText>\n        </SegmentGroupItem>\n      ))}\n\n      {children}\n    </ArkSegmentGroup.Root>\n  );\n};\n\nexport const SegmentGroupItem = (\n  props: React.ComponentProps<typeof ArkSegmentGroup.Item>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkSegmentGroup.Item\n      className={cn(\n        \"relative z-1\",\n        \"inline-flex items-center justify-center\",\n        \"cursor-pointer select-none\",\n        \"text-sm font-medium text-muted-foreground transition-colors\",\n        \"hover:text-foreground data-[state=checked]:text-foreground\",\n        \"data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start\",\n        \"group-data-[variant=solid]/segment-group:flex-1 group-data-[variant=solid]/segment-group:justify-center\",\n        \"rounded-[inherit] border border-transparent\",\n        \"outline-none data-focus-visible:border-primary data-focus-visible:ring-[3px] data-focus-visible:ring-ring\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"segment-group-item\"}\n    >\n      {children}\n\n      <ArkSegmentGroup.ItemControl />\n      <ArkSegmentGroup.ItemHiddenInput />\n    </ArkSegmentGroup.Item>\n  );\n};\n\nexport const SegmentGroupItemText = (\n  props: React.ComponentProps<typeof ArkSegmentGroup.ItemText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkSegmentGroup.ItemText\n      className={cn(\"relative z-1\", className)}\n      {...rest}\n      data-slot={slot ?? \"segment-group-item-text\"}\n    />\n  );\n};\n\nexport const SegmentGroupIndicator = (\n  props: React.ComponentProps<typeof ArkSegmentGroup.Indicator>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkSegmentGroup.Indicator\n      className={cn(\n        \"absolute top-(--top) left-(--left) z-0\",\n        \"h-(--height) w-(--width)\",\n        \"rounded-[inherit]\",\n        // The moving \"pill\": an elevated surface with a hairline border and a soft shadow, so\n        // the selected segment reads as a raised chip on the muted track (crisp, not flat).\n        // Solid for the same reason as the track — diluted it landed on step 5, `--accent`.\n        \"border border-border bg-background shadow-sm\",\n        \"transition-[width,height,left,top] duration-150 ease-out\",\n        \"[transition-property:var(--transition-property,width,height,left,top)]\",\n        // `underline` is a bar, not a pill: drop the chrome and paint the accent.\n        \"group-data-[variant=underline]/segment-group:border-transparent group-data-[variant=underline]/segment-group:bg-primary group-data-[variant=underline]/segment-group:shadow-none\",\n        \"data-[orientation=horizontal]:group-data-[variant=underline]/segment-group:top-[calc(var(--top)+var(--height)-1px)]\",\n        \"data-[orientation=vertical]:group-data-[variant=underline]/segment-group:right-[calc(var(--left)+var(--width)-1px)]\",\n        \"data-[orientation=vertical]:group-data-[variant=underline]/segment-group:-translate-x-px\",\n        \"data-[orientation=horizontal]:group-data-[variant=underline]/segment-group:h-0.5\",\n        \"data-[orientation=vertical]:group-data-[variant=underline]/segment-group:w-0.5\",\n        \"motion-reduce:transition-none!\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"segment-group-indicator\"}\n    />\n  );\n};\n"],"names":["useSegmentGroup","useSegmentGroupContext","SegmentGroup","props","orientation","variant","options","itemClassName","className","children","slot","rest","jsxs","ArkSegmentGroup","cn","jsx","SegmentGroupIndicator","o","SegmentGroupItem","SegmentGroupItemText"],"mappings":";;;AAOO,MAAMA,IAAkBC,GAwBlBC,IAAe,CAACC,MAA6B;AACxD,QAAM;AAAA,IACJ,aAAAC,IAAc;AAAA,IACd,SAAAC,IAAU;AAAA,IACV,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDR;AAEJ,SACE,gBAAAS;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMA;AAAA,QACAN;AAAA,MAAA;AAAA,MAEF,gBAAcH;AAAA,MACd,aAAAD;AAAA,MACC,GAAGO;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAEnB,UAAA;AAAA,QAAA,gBAAAK,EAACC,GAAA,EAAsB;AAAA,QAEtBV,KAAA,gBAAAA,EAAS,IAAI,CAACW,MACb,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YAEC,OAAOD,EAAE;AAAA,YACT,UAAUA,EAAE;AAAA,YACZ,WAAWH,EAAG,eAAeP,CAAa;AAAA,YAE1C,UAAA,gBAAAQ,EAACI,GAAA,EAAqB,WAAU,8DAC7B,YAAE,MAAA,CACL;AAAA,UAAA;AAAA,UAPKF,EAAE;AAAA,QAAA;AAAA,QAWVR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,GAEaS,IAAmB,CAC9Bf,MACG;AACH,QAAM,EAAE,WAAAK,GAAW,UAAAC,GAAU,MAAAC,GAAM,GAAGC,MAASR;AAE/C,SACE,gBAAAS;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAElB,UAAA;AAAA,QAAAD;AAAA,QAED,gBAAAM,EAACF,EAAgB,aAAhB,EAA4B;AAAA,QAC7B,gBAAAE,EAACF,EAAgB,iBAAhB,CAAA,CAAgC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvC,GAEaM,IAAuB,CAClChB,MACG;AACH,QAAM,EAAE,WAAAK,GAAW,MAAAE,GAAM,GAAGC,MAASR;AAErC,SACE,gBAAAY;AAAA,IAACF,EAAgB;AAAA,IAAhB;AAAA,MACC,WAAWC,EAAG,gBAAgBN,CAAS;AAAA,MACtC,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaM,IAAwB,CACnCb,MACG;AACH,QAAM,EAAE,WAAAK,GAAW,MAAAE,GAAM,GAAGC,MAASR;AAErC,SACE,gBAAAY;AAAA,IAACF,EAAgB;AAAA,IAAhB;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA;AAAA;AAAA;AAAA,QAIA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;"}

package/dist/simples/select.d.ts

@@ -0,0 +1,34 @@
+import { ark } from '@ark-ui/react/factory';
+import { Select as ArkSelect } from '@ark-ui/react/select';
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { inputVariants } from './input';
+import { Separator } from './separator';
+export declare const useSelect: () => import('@ark-ui/react').UseSelectContext<any>;
+export declare const SelectContext: <T extends unknown>(props: ArkSelect.ContextProps<T>) => React.ReactNode;
+export declare const Select: ArkSelect.RootComponent;
+interface SelectTriggerProps extends React.ComponentProps<typeof ArkSelect.Trigger>, VariantProps<typeof inputVariants> {
+    /**
+     * Show clear trigger
+     *
+     * @default false
+     */
+    showClear?: boolean;
+}
+export declare const SelectTrigger: (props: SelectTriggerProps) => React.JSX.Element;
+export declare const SelectSeparator: (props: React.ComponentProps<typeof Separator>) => React.JSX.Element;
+export declare const SelectValue: (props: React.ComponentProps<typeof ArkSelect.ValueText>) => React.JSX.Element;
+export declare const SelectContent: (props: React.ComponentProps<typeof ArkSelect.Content>) => React.JSX.Element;
+interface SelectGroupProps extends React.ComponentProps<typeof ArkSelect.ItemGroup> {
+    /**
+     * The heading of the group
+     */
+    heading?: string | React.ReactNode;
+}
+export declare const SelectGroup: (props: SelectGroupProps) => React.JSX.Element;
+export declare const SelectGroupLabel: (props: React.ComponentProps<typeof ArkSelect.ItemGroupLabel>) => React.JSX.Element;
+export declare const SelectItem: (props: React.ComponentProps<typeof ArkSelect.Item>) => React.JSX.Element;
+export declare const SelectClearTrigger: (props: React.ComponentProps<typeof ArkSelect.ClearTrigger>) => React.JSX.Element;
+export declare const SelectEmpty: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/simples/select.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,SAAS,EAAoB,MAAM,sBAAsB,CAAC;AAE7E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,eAAO,MAAM,SAAS,qDAAmB,CAAC;AAE1C,eAAO,MAAM,aAAa,0EAAoB,CAAC;AAE/C,eAAO,MAAM,MAAM,EAAE,SAAS,CAAC,aAqB9B,CAAC;AAiDF,UAAU,kBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,OAAO,CAAC,EACpD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAsCtD,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,sBAW9C,CAAC;AAEF,eAAO,MAAM,WAAW,GACtB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,sBAexD,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,OAAO,CAAC,sBAoCtD,CAAC;AAEF,UAAU,gBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC;IACxD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;CACpC;AAED,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAUlD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,cAAc,CAAC,sBAe7D,CAAC;AAEF,eAAO,MAAM,UAAU,GACrB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,sBAuCnD,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,YAAY,CAAC,sBAoB3D,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,6BAoBtE,CAAC"}

package/dist/simples/select.js

@@ -0,0 +1,258 @@
+"use client";
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { Portal as g } from "@ark-ui/react";
+import { ark as u } from "@ark-ui/react/factory";
+import { Select as a, useSelectContext as m } from "@ark-ui/react/select";
+import { CheckIcon as f, ChevronsUpDownIcon as h, XIcon as x } from "lucide-react";
+import { tv as v } from "tailwind-variants";
+import { cn as n } from "../lib/cn.js";
+import { inputVariants as N } from "./input.js";
+import { Separator as b } from "./separator.js";
+const E = m, L = a.Context, P = (t) => {
+  const {
+    lazyMount: e = !0,
+    unmountOnExit: s = !0,
+    children: o,
+    slot: l,
+    ...i
+  } = t;
+  return /* @__PURE__ */ c(
+    a.Root,
+    {
+      lazyMount: e,
+      unmountOnExit: s,
+      ...i,
+      "data-slot": l ?? "select",
+      children: [
+        o,
+        /* @__PURE__ */ r(a.HiddenSelect, {})
+      ]
+    }
+  );
+}, S = v({
+  slots: {
+    trigger: [
+      "w-fit",
+      "flex items-center gap-2",
+      "text-sm",
+      "data-placeholder-shown:text-faint",
+      "data-[state=open]:border-primary data-[state=open]:ring-[3px] data-[state=open]:ring-ring",
+      "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"
+    ],
+    indicators: "ms-auto flex items-center gap-1 rtl:me-auto",
+    // Pulled back over the room `indicators` reserves, so the clear lands exactly where it
+    // rendered as a child of the trigger: 3 (trigger padding) + 4 (indicator) + 1 (gap) +
+    // 4 (clear) spacing units, plus the trigger's 1px border. The matching positive
+    // margin-inline-end cancels the negative one (-12u-1px + 4u + 8u+1px = 0), so the clear
+    // still contributes nothing to the control's intrinsic width and a shrink-to-fit parent
+    // keeps measuring the trigger alone. `[&_svg]:size-4` restates the icon rule the trigger
+    // used to cascade onto this icon from the outside.
+    clear: [
+      "relative shrink-0",
+      "ms-[calc(var(--spacing)*-12-1px)] me-[calc(var(--spacing)*8+1px)]",
+      "[&_svg]:size-4"
+    ]
+  },
+  variants: {
+    showClear: {
+      // The room the clear overlays: its own 4 units plus the group's 1-unit gap. Reserved
+      // only while the clear is on screen — Ark hides it with `hidden` when nothing is
+      // selected, and inline it then took no room either, so a `w-fit` trigger keeps sizing
+      // exactly as it did.
+      true: {
+        indicators: "group-has-[[data-slot=select-clear-trigger]:not([hidden])]/select-control:ps-5"
+      }
+    }
+  },
+  defaultVariants: { showClear: !1 }
+}), D = (t) => {
+  const {
+    showClear: e = !1,
+    size: s = "md",
+    className: o,
+    children: l,
+    slot: i,
+    ...p
+  } = t, d = S({ showClear: e });
+  return /* @__PURE__ */ c(
+    a.Control,
+    {
+      className: "group/select-control relative flex items-center",
+      "data-slot": "select-control",
+      children: [
+        /* @__PURE__ */ c(
+          a.Trigger,
+          {
+            className: n(N({ size: s }), d.trigger(), o),
+            ...p,
+            "data-slot": i ?? "select-trigger",
+            children: [
+              l,
+              /* @__PURE__ */ r("div", { className: d.indicators(), children: /* @__PURE__ */ r(a.Indicator, { "data-slot": "select-indicator", children: /* @__PURE__ */ r(h, {}) }) })
+            ]
+          }
+        ),
+        e && /* @__PURE__ */ r(w, { className: d.clear(), children: /* @__PURE__ */ r(x, {}) })
+      ]
+    }
+  );
+}, H = (t) => {
+  const { className: e, slot: s, ...o } = t;
+  return /* @__PURE__ */ r(
+    b,
+    {
+      className: n("pointer-events-none -mx-1 my-1 h-px bg-border", e),
+      ...o,
+      slot: s ?? "select-separator"
+    }
+  );
+}, M = (t) => {
+  const { className: e, ...s } = t;
+  return /* @__PURE__ */ r(
+    a.ValueText,
+    {
+      className: n(
+        "min-w-0",
+        "flex items-center gap-2",
+        "truncate text-nowrap",
+        e
+      ),
+      ...s
+    }
+  );
+}, O = (t) => {
+  const { className: e, slot: s, ...o } = t;
+  return /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(a.Positioner, { "data-slot": "select-positioner", children: /* @__PURE__ */ r(
+    a.Content,
+    {
+      className: n(
+        "z-50",
+        "relative",
+        "max-h-96 min-w-(--reference-width)",
+        "p-1",
+        "bg-popover",
+        "text-popover-foreground",
+        "rounded-box border shadow-lg/5",
+        "origin-(--transform-origin)",
+        "outline-none",
+        "overflow-y-auto",
+        "duration-100",
+        "data-[state=open]:animate-in",
+        "data-[state=open]:fade-in-0",
+        "data-[state=open]:zoom-in-[98%]",
+        "data-[placement=bottom]:slide-in-from-top-2",
+        "data-[placement=left]:slide-in-from-end-2",
+        "data-[placement=right]:slide-in-from-start-2",
+        "data-[placement=top]:slide-in-from-bottom-2",
+        "motion-reduce:animate-none!",
+        e
+      ),
+      ...o,
+      "data-slot": s ?? "select-content"
+    }
+  ) }) });
+}, R = (t) => {
+  const { heading: e, children: s, slot: o, ...l } = t;
+  return /* @__PURE__ */ c(a.ItemGroup, { ...l, "data-slot": o ?? "select-group", children: [
+    !!e && /* @__PURE__ */ r(y, { children: e }),
+    s
+  ] });
+}, y = (t) => {
+  const { className: e, slot: s, ...o } = t;
+  return /* @__PURE__ */ r(
+    a.ItemGroupLabel,
+    {
+      className: n(
+        "px-2 py-1.5",
+        "font-semibold text-muted-foreground text-xs",
+        e
+      ),
+      ...o,
+      "data-slot": s ?? "select-group-label"
+    }
+  );
+}, U = (t) => {
+  const { className: e, children: s, slot: o, ...l } = t;
+  return /* @__PURE__ */ c(
+    a.Item,
+    {
+      className: n(
+        "relative",
+        "w-full",
+        "py-1.5 ps-2 pe-8",
+        "flex items-center gap-2",
+        "select-none text-base md:text-sm",
+        "rounded-field",
+        "cursor-default",
+        "outline-hidden",
+        "in-[[data-slot=select-content]:has([data-slot=select-group-label])]:ps-4",
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
+        "data-disabled:pointer-events-none data-disabled:opacity-64",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "[&_svg:not([class*='size-'])]:size-4 [&_svg]:text-muted-foreground",
+        e
+      ),
+      ...l,
+      "data-slot": o ?? "select-item",
+      children: [
+        /* @__PURE__ */ r(
+          a.ItemText,
+          {
+            className: "flex w-full flex-1 items-center gap-2",
+            "data-slot": "select-item-text",
+            children: s
+          }
+        ),
+        /* @__PURE__ */ r("span", { className: "absolute inset-e-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ r(a.ItemIndicator, { "data-slot": "select-item-indicator", children: /* @__PURE__ */ r(f, {}) }) })
+      ]
+    }
+  );
+}, w = (t) => {
+  const { className: e, slot: s, ...o } = t;
+  return /* @__PURE__ */ r(
+    a.ClearTrigger,
+    {
+      "aria-label": "Clear selected value(s)",
+      className: n(
+        "[&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:text-muted-foreground",
+        "transition-opacity",
+        "opacity-64",
+        "outline-none focus-visible:opacity-100",
+        "hover:opacity-100",
+        "motion-reduce:transition-none!",
+        e
+      ),
+      ...o,
+      "data-slot": s ?? "select-clear-trigger"
+    }
+  );
+}, X = (t) => {
+  const { className: e, ...s } = t, { empty: o } = m();
+  return o ? /* @__PURE__ */ r(
+    u.div,
+    {
+      className: n(
+        "px-2 py-1.5",
+        "text-center text-muted-foreground text-sm",
+        e
+      ),
+      role: "presentation",
+      ...s
+    }
+  ) : null;
+};
+export {
+  P as Select,
+  w as SelectClearTrigger,
+  O as SelectContent,
+  L as SelectContext,
+  X as SelectEmpty,
+  R as SelectGroup,
+  y as SelectGroupLabel,
+  U as SelectItem,
+  H as SelectSeparator,
+  D as SelectTrigger,
+  M as SelectValue,
+  E as useSelect
+};
+//# sourceMappingURL=select.js.map

package/dist/simples/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sources":["../../src/simples/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { Portal } from \"@ark-ui/react\";\nimport { ark } from \"@ark-ui/react/factory\";\nimport { Select as ArkSelect, useSelectContext } from \"@ark-ui/react/select\";\nimport { CheckIcon, ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { inputVariants } from \"./input\";\nimport { Separator } from \"./separator\";\n\nexport const useSelect = useSelectContext;\n\nexport const SelectContext = ArkSelect.Context;\n\nexport const Select: ArkSelect.RootComponent = (props) => {\n  const {\n    lazyMount = true,\n    unmountOnExit = true,\n    children,\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <ArkSelect.Root\n      lazyMount={lazyMount}\n      unmountOnExit={unmountOnExit}\n      {...rest}\n      data-slot={slot ?? \"select\"}\n    >\n      {children}\n\n      <ArkSelect.HiddenSelect />\n    </ArkSelect.Root>\n  );\n};\n\n// Divergence from Shark, declared: Shark renders `Select.ClearTrigger` *inside*\n// `Select.Trigger`, i.e. a <button> inside a <button>. That is invalid HTML (React logs\n// `validateDOMNesting`), the inner button is not reliably reachable by keyboard or screen\n// reader, and the clear click bubbles into the trigger, so clearing also opened the listbox.\n// Ark's anatomy is `Select.Control > Select.Trigger + Select.ClearTrigger` — the clear is a\n// SIBLING — so that is what we render. The look is unchanged: the trigger's indicator group\n// keeps reserving the room the clear used to occupy inline, and the clear is pulled back over\n// that room with a negative inline-start margin (logical, so RTL flips with it).\nconst selectTriggerVariants = tv({\n  slots: {\n    trigger: [\n      \"w-fit\",\n      \"flex items-center gap-2\",\n      \"text-sm\",\n      \"data-placeholder-shown:text-faint\",\n      \"data-[state=open]:border-primary data-[state=open]:ring-[3px] data-[state=open]:ring-ring\",\n      \"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground\",\n    ],\n    indicators: \"ms-auto flex items-center gap-1 rtl:me-auto\",\n    // Pulled back over the room `indicators` reserves, so the clear lands exactly where it\n    // rendered as a child of the trigger: 3 (trigger padding) + 4 (indicator) + 1 (gap) +\n    // 4 (clear) spacing units, plus the trigger's 1px border. The matching positive\n    // margin-inline-end cancels the negative one (-12u-1px + 4u + 8u+1px = 0), so the clear\n    // still contributes nothing to the control's intrinsic width and a shrink-to-fit parent\n    // keeps measuring the trigger alone. `[&_svg]:size-4` restates the icon rule the trigger\n    // used to cascade onto this icon from the outside.\n    clear: [\n      \"relative shrink-0\",\n      \"ms-[calc(var(--spacing)*-12-1px)] me-[calc(var(--spacing)*8+1px)]\",\n      \"[&_svg]:size-4\",\n    ],\n  },\n  variants: {\n    showClear: {\n      // The room the clear overlays: its own 4 units plus the group's 1-unit gap. Reserved\n      // only while the clear is on screen — Ark hides it with `hidden` when nothing is\n      // selected, and inline it then took no room either, so a `w-fit` trigger keeps sizing\n      // exactly as it did.\n      true: {\n        indicators:\n          \"group-has-[[data-slot=select-clear-trigger]:not([hidden])]/select-control:ps-5\",\n      },\n    },\n  },\n  defaultVariants: { showClear: false },\n});\n\ninterface SelectTriggerProps\n  extends React.ComponentProps<typeof ArkSelect.Trigger>,\n    VariantProps<typeof inputVariants> {\n  /**\n   * Show clear trigger\n   *\n   * @default false\n   */\n  showClear?: boolean;\n}\n\nexport const SelectTrigger = (props: SelectTriggerProps) => {\n  const {\n    showClear = false,\n    size = \"md\",\n    className,\n    children,\n    slot,\n    ...rest\n  } = props;\n\n  const styles = selectTriggerVariants({ showClear });\n\n  return (\n    <ArkSelect.Control\n      className=\"group/select-control relative flex items-center\"\n      data-slot=\"select-control\"\n    >\n      <ArkSelect.Trigger\n        className={cn(inputVariants({ size }), styles.trigger(), className)}\n        {...rest}\n        data-slot={slot ?? \"select-trigger\"}\n      >\n        {children}\n\n        <div className={styles.indicators()}>\n          <ArkSelect.Indicator data-slot=\"select-indicator\">\n            <ChevronsUpDownIcon />\n          </ArkSelect.Indicator>\n        </div>\n      </ArkSelect.Trigger>\n\n      {showClear && (\n        <SelectClearTrigger className={styles.clear()}>\n          <XIcon />\n        </SelectClearTrigger>\n      )}\n    </ArkSelect.Control>\n  );\n};\n\nexport const SelectSeparator = (\n  props: React.ComponentProps<typeof Separator>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Separator\n      className={cn(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...rest}\n      slot={slot ?? \"select-separator\"}\n    />\n  );\n};\n\nexport const SelectValue = (\n  props: React.ComponentProps<typeof ArkSelect.ValueText>\n) => {\n  const { className, ...rest } = props;\n\n  return (\n    <ArkSelect.ValueText\n      className={cn(\n        \"min-w-0\",\n        \"flex items-center gap-2\",\n        \"truncate text-nowrap\",\n        className\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport const SelectContent = (\n  props: React.ComponentProps<typeof ArkSelect.Content>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <ArkSelect.Positioner data-slot=\"select-positioner\">\n        <ArkSelect.Content\n          className={cn(\n            \"z-50\",\n            \"relative\",\n            \"max-h-96 min-w-(--reference-width)\",\n            \"p-1\",\n            \"bg-popover\",\n            \"text-popover-foreground\",\n            \"rounded-box border shadow-lg/5\",\n            \"origin-(--transform-origin)\",\n            \"outline-none\",\n            \"overflow-y-auto\",\n            \"duration-100\",\n            \"data-[state=open]:animate-in\",\n            \"data-[state=open]:fade-in-0\",\n            \"data-[state=open]:zoom-in-[98%]\",\n            \"data-[placement=bottom]:slide-in-from-top-2\",\n            \"data-[placement=left]:slide-in-from-end-2\",\n            \"data-[placement=right]:slide-in-from-start-2\",\n            \"data-[placement=top]:slide-in-from-bottom-2\",\n            \"motion-reduce:animate-none!\",\n            className\n          )}\n          {...rest}\n          data-slot={slot ?? \"select-content\"}\n        />\n      </ArkSelect.Positioner>\n    </Portal>\n  );\n};\n\ninterface SelectGroupProps\n  extends React.ComponentProps<typeof ArkSelect.ItemGroup> {\n  /**\n   * The heading of the group\n   */\n  heading?: string | React.ReactNode;\n}\n\nexport const SelectGroup = (props: SelectGroupProps) => {\n  const { heading, children, slot, ...rest } = props;\n\n  return (\n    <ArkSelect.ItemGroup {...rest} data-slot={slot ?? \"select-group\"}>\n      {!!heading && <SelectGroupLabel>{heading}</SelectGroupLabel>}\n\n      {children}\n    </ArkSelect.ItemGroup>\n  );\n};\n\nexport const SelectGroupLabel = (\n  props: React.ComponentProps<typeof ArkSelect.ItemGroupLabel>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkSelect.ItemGroupLabel\n      className={cn(\n        \"px-2 py-1.5\",\n        \"font-semibold text-muted-foreground text-xs\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"select-group-label\"}\n    />\n  );\n};\n\nexport const SelectItem = (\n  props: React.ComponentProps<typeof ArkSelect.Item>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkSelect.Item\n      className={cn(\n        \"relative\",\n        \"w-full\",\n        \"py-1.5 ps-2 pe-8\",\n        \"flex items-center gap-2\",\n        \"select-none text-base md:text-sm\",\n        \"rounded-field\",\n        \"cursor-default\",\n        \"outline-hidden\",\n        \"in-[[data-slot=select-content]:has([data-slot=select-group-label])]:ps-4\",\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:text-muted-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"select-item\"}\n    >\n      <ArkSelect.ItemText\n        className=\"flex w-full flex-1 items-center gap-2\"\n        data-slot=\"select-item-text\"\n      >\n        {children}\n      </ArkSelect.ItemText>\n\n      <span className=\"absolute inset-e-2 flex size-4 items-center justify-center\">\n        <ArkSelect.ItemIndicator data-slot=\"select-item-indicator\">\n          <CheckIcon />\n        </ArkSelect.ItemIndicator>\n      </span>\n    </ArkSelect.Item>\n  );\n};\n\nexport const SelectClearTrigger = (\n  props: React.ComponentProps<typeof ArkSelect.ClearTrigger>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkSelect.ClearTrigger\n      aria-label=\"Clear selected value(s)\"\n      className={cn(\n        \"[&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:text-muted-foreground\",\n        \"transition-opacity\",\n        \"opacity-64\",\n        \"outline-none focus-visible:opacity-100\",\n        \"hover:opacity-100\",\n        \"motion-reduce:transition-none!\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"select-clear-trigger\"}\n    />\n  );\n};\n\nexport const SelectEmpty = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, ...rest } = props;\n\n  const { empty } = useSelectContext();\n\n  if (empty) {\n    return (\n      <ark.div\n        className={cn(\n          \"px-2 py-1.5\",\n          \"text-center text-muted-foreground text-sm\",\n          className\n        )}\n        role=\"presentation\"\n        {...rest}\n      />\n    );\n  }\n\n  return null;\n};\n"],"names":[],"mappings":";;;;;;;;;;AAYO;AAKL;AAAM;AACQ;AACI;AAChB;AACA;AACG;AAGL;AACE;AAAW;AAAV;AACC;AACA;AACI;AACe;AAElB;AAAA;AAEuB;AAAA;AAAA;AAG9B;AAUiC;AACxB;AACI;AACP;AACA;AACA;AACA;AACA;AACA;AAAA;AAEU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQL;AACL;AACA;AACA;AAAA;AACF;AAEQ;AACG;AAAA;AAAA;AAAA;AAAA;AAKH;AAEF;AAAA;AACJ;AACF;AAGJ;AAcE;AAAM;AACQ;AACL;AACP;AACA;AACA;AACG;AAKL;AACE;AAAW;AAAV;AACW;AACA;AAEV;AAAA;AAAW;AAAV;AACmE;AAC9D;AACe;AAElB;AAAA;AAMD;AAAA;AAAA;AAAA;AAMA;AAAA;AAAA;AAIR;AAKE;AAEA;AACE;AAAC;AAAA;AACyE;AACpE;AACU;AAAA;AAGpB;AAKE;AAEA;AACE;AAAW;AAAV;AACY;AACT;AACA;AACA;AACA;AAAA;AAEE;AAAA;AAGV;AAKE;AAEA;AAGM;AAAW;AAAV;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAK7B;AAWE;AAEA;AAEK;AAAwC;AAExC;AAGP;AAKE;AAEA;AACE;AAAW;AAAV;AACY;AACT;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAW;AAAV;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAEnB;AAAA;AAAW;AAAV;AACW;AACA;AAET;AAAA;AAAA;AAOH;AAAA;AAAA;AAGN;AAKE;AAEA;AACE;AAAW;AAAV;AACY;AACA;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAGE;AAIA;AAEI;AAAK;AAAJ;AACY;AACT;AACA;AACA;AAAA;AAEG;AACD;AAAA;AAMZ;;;;;;;;;;;;;;;"}

package/dist/simples/separator.d.ts

@@ -0,0 +1,12 @@
+import { ark } from '@ark-ui/react/factory';
+interface SeparatorProps extends React.ComponentProps<typeof ark.div> {
+    /**
+     * The orientation of the separator.
+     *
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+}
+export declare const Separator: (props: SeparatorProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=separator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/simples/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAG5C,UAAU,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;IACnE;;;;OAIG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAED,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,gCAmB9C,CAAC"}

package/dist/simples/separator.js

@@ -0,0 +1,27 @@
+import { jsx as n } from "react/jsx-runtime";
+import { ark as e } from "@ark-ui/react/factory";
+import { cn as s } from "../lib/cn.js";
+const d = (a) => {
+  const { orientation: t = "horizontal", className: o, slot: r, ...i } = a;
+  return /* @__PURE__ */ n(
+    e.div,
+    {
+      "aria-orientation": t,
+      className: s(
+        "shrink-0",
+        "bg-border",
+        "data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full",
+        "data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch",
+        o
+      ),
+      "data-orientation": t,
+      role: "separator",
+      ...i,
+      "data-slot": r ?? "separator"
+    }
+  );
+};
+export {
+  d as Separator
+};
+//# sourceMappingURL=separator.js.map