@kanzo-tech/ui 0.0.1-alpha

package/dist/simples/table.js

@@ -0,0 +1,166 @@
+import { jsx as o } from "react/jsx-runtime";
+import { ark as l } from "@ark-ui/react/factory";
+import { cn as s } from "../lib/cn.js";
+const f = (e) => {
+  const {
+    variant: a = "plain",
+    isHoverable: r = !0,
+    stickyHeader: t = !1,
+    maxHeight: d,
+    className: c,
+    slot: b,
+    ...h
+  } = e;
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: s("relative w-full", t && d === void 0 ? "overflow-visible" : "overflow-auto"),
+      "data-slot": "table-wrapper",
+      style: d === void 0 ? void 0 : { maxHeight: d },
+      children: /* @__PURE__ */ o(
+        l.table,
+        {
+          className: s(
+            "group/table",
+            "w-full",
+            "caption-bottom",
+            "text-foreground text-sm",
+            "data-[sticky-header=true]:[&_thead_th]:sticky",
+            "data-[sticky-header=true]:[&_thead_th]:top-0",
+            "data-[sticky-header=true]:[&_thead_th]:z-10",
+            "data-[sticky-header=true]:[&_thead_th]:bg-background",
+            // `top: 0` pins to the scrollport's CONTENT edge, so a scroll region with padding leaves
+            // a band above the header where the rows scroll past in plain sight. The header cannot
+            // know that padding, so it covers it: an opaque strip standing on the cell's top edge,
+            // clipped by the bordered box and therefore invisible at rest, since the header is the
+            // first thing that box contains.
+            "data-[sticky-header=true]:[&_thead_th]:before:absolute",
+            "data-[sticky-header=true]:[&_thead_th]:before:inset-x-0",
+            "data-[sticky-header=true]:[&_thead_th]:before:bottom-full",
+            "data-[sticky-header=true]:[&_thead_th]:before:h-24",
+            "data-[sticky-header=true]:[&_thead_th]:before:bg-background",
+            c
+          ),
+          "data-hoverable": r,
+          "data-sticky-header": t,
+          "data-variant": a,
+          ...h,
+          "data-slot": b ?? "table"
+        }
+      )
+    }
+  );
+}, p = (e) => {
+  const { className: a, slot: r, ...t } = e;
+  return /* @__PURE__ */ o(
+    l.thead,
+    {
+      className: s("[&_tr]:border-b", a),
+      ...t,
+      "data-slot": r ?? "table-header"
+    }
+  );
+}, g = (e) => {
+  const { className: a, slot: r, ...t } = e;
+  return /* @__PURE__ */ o(
+    l.tbody,
+    {
+      className: s("[&_tr:last-child]:border-0", a),
+      ...t,
+      "data-slot": r ?? "table-body"
+    }
+  );
+}, _ = (e) => {
+  const { className: a, slot: r, ...t } = e;
+  return /* @__PURE__ */ o(
+    l.tfoot,
+    {
+      className: s(
+        "border-t",
+        "bg-muted/48",
+        "font-medium",
+        "last:[&>tr]:border-b-0",
+        a
+      ),
+      ...t,
+      "data-slot": r ?? "table-footer"
+    }
+  );
+}, k = (e) => {
+  const { className: a, slot: r, ...t } = e;
+  return /* @__PURE__ */ o(
+    l.tr,
+    {
+      className: s(
+        "border-b",
+        // Three levels, and they had to move together. The hover was a 48% `bg-muted`, which measures
+        // ΔE 1.50 over a light page, 1.20 over a striped row and 1.40 over a dark card — under the
+        // ramp's own ΔE-2 hover bar, i.e. a hover that is not one. Raising it collided with
+        // `data-[state=selected]:bg-muted`, which is a *solid* and so cannot be trusted either: a
+        // table inside a popover measures ΔE 0.00 in dark, because `--muted` and `--popover` are
+        // the same step there. So rest stays the backdrop, hover takes step 4 and selected step 5,
+        // both as washes because a table does not know what it was dropped onto: hover measures
+        // ΔE 4.82–5.11 (light) and 7.51–7.73 (dark) from rest, striped or not, and selected clears
+        // hover by 3.95–4.27 and 4.15–4.65.
+        "data-[state=selected]:bg-foreground/17",
+        "group-data-[variant=striped]/table:even:bg-muted/30",
+        "group-data-[hoverable=true]/table:[&:has(td):hover]:bg-foreground/14",
+        a
+      ),
+      ...t,
+      "data-slot": r ?? "table-row"
+    }
+  );
+}, N = (e) => {
+  const { className: a, slot: r, ...t } = e;
+  return /* @__PURE__ */ o(
+    l.th,
+    {
+      className: s(
+        "h-10 px-2",
+        "text-left align-middle",
+        "font-medium text-muted-foreground",
+        "rtl:text-right",
+        "has-[[role=checkbox]]:ps-2 has-[[role=checkbox]]:pe-0",
+        a
+      ),
+      ...t,
+      "data-slot": r ?? "table-head"
+    }
+  );
+}, v = (e) => {
+  const { className: a, slot: r, ...t } = e;
+  return /* @__PURE__ */ o(
+    l.td,
+    {
+      className: s(
+        "whitespace-nowrap p-2 align-middle",
+        "has-[[role=checkbox]]:ps-2 has-[[role=checkbox]]:pe-0",
+        a
+      ),
+      ...t,
+      "data-slot": r ?? "table-cell"
+    }
+  );
+}, x = (e) => {
+  const { className: a, slot: r, ...t } = e;
+  return /* @__PURE__ */ o(
+    l.caption,
+    {
+      className: s("mt-4", "text-muted-foreground text-sm", a),
+      ...t,
+      "data-slot": r ?? "table-caption"
+    }
+  );
+};
+export {
+  f as Table,
+  g as TableBody,
+  x as TableCaption,
+  v as TableCell,
+  _ as TableFooter,
+  N as TableHead,
+  p as TableHeader,
+  k as TableRow
+};
+//# sourceMappingURL=table.js.map

package/dist/simples/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sources":["../../src/simples/table.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\n\ninterface TableProps extends React.ComponentProps<typeof ark.table> {\n  /**\n   * Whether the table rows are hoverable.\n   *\n   * @default true\n   */\n  isHoverable?: boolean;\n  /**\n   * The variant of the table.\n   *\n   * @default \"plain\"\n   */\n  variant?: \"plain\" | \"striped\";\n  /**\n   * Pin the header row while the rows scroll under it.\n   *\n   * This has to change the wrapper, not just the cells: `position: sticky` resolves against the\n   * nearest scroll container, and the wrapper's `overflow-auto` is one — so a sticky `th` pins to\n   * a box exactly as tall as its own content, which never moves. WHICH scroll container it should\n   * pin to is what `maxHeight` decides, and the two answers behave differently enough to choose\n   * between deliberately.\n   *\n   * The pinned cells need to be opaque or the rows read through them; `bg-background` assumes the\n   * table sits on the page surface, so on a `Card` pass `className=\"bg-card\"` to `TableHead`.\n   *\n   * @default false\n   */\n  stickyHeader?: boolean;\n  /**\n   * Give the table its own scroll region, and pin the header to that.\n   *\n   * With it, the wrapper stays a scroll container and simply gains a height: the header pins to\n   * the table's own scrollport and a table wider than its box still scrolls sideways. Without it,\n   * `stickyHeader` stands the wrapper's overflow down so the header pins to whatever encloses the\n   * table — a `ShellMain`, a dialog body, the page — which reads better, one scrollbar instead of\n   * two, but gives up that sideways scroll: CSS cannot keep one axis scrollable while the other\n   * stays sticky. Set it whenever the columns may not fit, which on a narrow viewport is most\n   * tables.\n   */\n  maxHeight?: string | number;\n}\n\nexport const Table = (props: TableProps) => {\n  const {\n    variant = \"plain\",\n    isHoverable = true,\n    stickyHeader = false,\n    maxHeight,\n    className,\n    slot,\n    ...rest\n  } = props;\n\n  /** Only a header pinned to the ENCLOSING region needs the wrapper to stop scrolling. */\n  const regionScrolled = stickyHeader && maxHeight === undefined;\n\n  return (\n    <div\n      className={cn(\"relative w-full\", regionScrolled ? \"overflow-visible\" : \"overflow-auto\")}\n      data-slot=\"table-wrapper\"\n      style={maxHeight === undefined ? undefined : { maxHeight }}\n    >\n      <ark.table\n        className={cn(\n          \"group/table\",\n          \"w-full\",\n          \"caption-bottom\",\n          \"text-foreground text-sm\",\n          \"data-[sticky-header=true]:[&_thead_th]:sticky\",\n          \"data-[sticky-header=true]:[&_thead_th]:top-0\",\n          \"data-[sticky-header=true]:[&_thead_th]:z-10\",\n          \"data-[sticky-header=true]:[&_thead_th]:bg-background\",\n          // `top: 0` pins to the scrollport's CONTENT edge, so a scroll region with padding leaves\n          // a band above the header where the rows scroll past in plain sight. The header cannot\n          // know that padding, so it covers it: an opaque strip standing on the cell's top edge,\n          // clipped by the bordered box and therefore invisible at rest, since the header is the\n          // first thing that box contains.\n          \"data-[sticky-header=true]:[&_thead_th]:before:absolute\",\n          \"data-[sticky-header=true]:[&_thead_th]:before:inset-x-0\",\n          \"data-[sticky-header=true]:[&_thead_th]:before:bottom-full\",\n          \"data-[sticky-header=true]:[&_thead_th]:before:h-24\",\n          \"data-[sticky-header=true]:[&_thead_th]:before:bg-background\",\n          className\n        )}\n        data-hoverable={isHoverable}\n        data-sticky-header={stickyHeader}\n        data-variant={variant}\n        {...rest}\n        data-slot={slot ?? \"table\"}\n      />\n    </div>\n  );\n};\n\nexport const TableHeader = (props: React.ComponentProps<typeof ark.thead>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.thead\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...rest}\n      data-slot={slot ?? \"table-header\"}\n    />\n  );\n};\n\nexport interface TableBodyProps\n  extends React.ComponentProps<typeof ark.tbody> {}\n\nexport const TableBody = (props: TableBodyProps) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.tbody\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...rest}\n      data-slot={slot ?? \"table-body\"}\n    />\n  );\n};\n\nexport const TableFooter = (props: React.ComponentProps<typeof ark.tfoot>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.tfoot\n      className={cn(\n        \"border-t\",\n        \"bg-muted/48\",\n        \"font-medium\",\n        \"last:[&>tr]:border-b-0\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"table-footer\"}\n    />\n  );\n};\n\nexport const TableRow = (props: React.ComponentProps<typeof ark.tr>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.tr\n      className={cn(\n        \"border-b\",\n        // Three levels, and they had to move together. The hover was a 48% `bg-muted`, which measures\n        // ΔE 1.50 over a light page, 1.20 over a striped row and 1.40 over a dark card — under the\n        // ramp's own ΔE-2 hover bar, i.e. a hover that is not one. Raising it collided with\n        // `data-[state=selected]:bg-muted`, which is a *solid* and so cannot be trusted either: a\n        // table inside a popover measures ΔE 0.00 in dark, because `--muted` and `--popover` are\n        // the same step there. So rest stays the backdrop, hover takes step 4 and selected step 5,\n        // both as washes because a table does not know what it was dropped onto: hover measures\n        // ΔE 4.82–5.11 (light) and 7.51–7.73 (dark) from rest, striped or not, and selected clears\n        // hover by 3.95–4.27 and 4.15–4.65.\n        \"data-[state=selected]:bg-foreground/17\",\n        \"group-data-[variant=striped]/table:even:bg-muted/30\",\n        \"group-data-[hoverable=true]/table:[&:has(td):hover]:bg-foreground/14\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"table-row\"}\n    />\n  );\n};\n\nexport const TableHead = (props: React.ComponentProps<typeof ark.th>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.th\n      className={cn(\n        \"h-10 px-2\",\n        \"text-left align-middle\",\n        \"font-medium text-muted-foreground\",\n        \"rtl:text-right\",\n        \"has-[[role=checkbox]]:ps-2 has-[[role=checkbox]]:pe-0\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"table-head\"}\n    />\n  );\n};\n\nexport const TableCell = (props: React.ComponentProps<typeof ark.td>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.td\n      className={cn(\n        \"whitespace-nowrap p-2 align-middle\",\n        \"has-[[role=checkbox]]:ps-2 has-[[role=checkbox]]:pe-0\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"table-cell\"}\n    />\n  );\n};\n\nexport const TableCaption = (\n  props: React.ComponentProps<typeof ark.caption>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.caption\n      className={cn(\"mt-4\", \"text-muted-foreground text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"table-caption\"}\n    />\n  );\n};\n"],"names":["Table","props","variant","isHoverable","stickyHeader","maxHeight","className","slot","rest","jsx","cn","ark","TableHeader","TableBody","TableFooter","TableRow","TableHead","TableCell","TableCaption"],"mappings":"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"}

package/dist/simples/tabs.d.ts

@@ -0,0 +1,55 @@
+import { Tabs as ArkTabs } from '@ark-ui/react/tabs';
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const useTabs: () => import('@ark-ui/react').UseTabsContext;
+export declare const Tabs: (props: React.ComponentProps<typeof ArkTabs.Root>) => React.JSX.Element;
+declare const tabsListVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: {
+            base: string[];
+            indicator: string[];
+        };
+        underline: {
+            base: string[];
+            indicator: string[];
+        };
+    };
+}, {
+    base: string[];
+    indicator: string[];
+}, undefined, {
+    variant: {
+        default: {
+            base: string[];
+            indicator: string[];
+        };
+        underline: {
+            base: string[];
+            indicator: string[];
+        };
+    };
+}, {
+    base: string[];
+    indicator: string[];
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: {
+            base: string[];
+            indicator: string[];
+        };
+        underline: {
+            base: string[];
+            indicator: string[];
+        };
+    };
+}, {
+    base: string[];
+    indicator: string[];
+}, undefined, unknown, unknown, undefined>>;
+interface TabsListProps extends React.ComponentProps<typeof ArkTabs.List>, VariantProps<typeof tabsListVariants> {
+}
+export declare const TabsList: (props: TabsListProps) => React.JSX.Element;
+export declare const TabsTrigger: (props: React.ComponentProps<typeof ArkTabs.Trigger>) => React.JSX.Element;
+export declare const TabsContent: (props: React.ComponentProps<typeof ArkTabs.Content>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/simples/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,OAAO,EAAkB,MAAM,oBAAoB,CAAC;AACrE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D,eAAO,MAAM,OAAO,8CAAiB,CAAC;AAEtC,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,IAAI,CAAC,sBAsBpE,CAAC;AAEF,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAyCpB,CAAC;AACH,UAAU,aACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,IAAI,CAAC,EAC/C,YAAY,CAAC,OAAO,gBAAgB,CAAC;CAAG;AAE5C,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBAmB5C,CAAC;AAEF,eAAO,MAAM,WAAW,GACtB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,OAAO,CAAC,sBA4BpD,CAAC;AAEF,eAAO,MAAM,WAAW,GACtB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,OAAO,CAAC,sBAWpD,CAAC"}

package/dist/simples/tabs.js

@@ -0,0 +1,133 @@
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import { useTabsContext as b, Tabs as s } from "@ark-ui/react/tabs";
+import { tv as m } from "tailwind-variants";
+import { cn as n } from "../lib/cn.js";
+const h = b, w = (t) => {
+  const {
+    lazyMount: a = !0,
+    unmountOnExit: e = !0,
+    className: o,
+    slot: i,
+    ...l
+  } = t;
+  return /* @__PURE__ */ r(
+    s.Root,
+    {
+      className: n(
+        "flex flex-col gap-2",
+        "data-[orientation=vertical]:flex-row",
+        o
+      ),
+      lazyMount: a,
+      unmountOnExit: e,
+      ...l,
+      "data-slot": i ?? "tabs"
+    }
+  );
+}, f = m({
+  slots: {
+    base: [
+      "relative z-0",
+      "w-fit",
+      "text-muted-foreground",
+      "flex items-center justify-center gap-x-0.5",
+      "data-[orientation=vertical]:flex-col"
+    ],
+    indicator: [
+      "absolute inset-s-0 bottom-0",
+      "h-(--height) w-(--width)",
+      "transition-[width,translate] duration-200 ease-in-out",
+      "motion-reduce:transition-none!"
+    ]
+  },
+  variants: {
+    variant: {
+      default: {
+        base: ["rounded-field"],
+        indicator: ["-z-1 rounded-field bg-accent"]
+      },
+      underline: {
+        base: [
+          "data-[orientation=vertical]:px-1",
+          "data-[orientation=horizontal]:py-1",
+          "*:data-[slot=tabs-tab]:hover:bg-accent"
+        ],
+        indicator: [
+          "z-10",
+          "absolute bottom-0",
+          "bg-primary",
+          "data-[orientation=horizontal]:h-0.5",
+          "data-[orientation=vertical]:w-0.5"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), z = (t) => {
+  const { variant: a = "default", className: e, children: o, slot: i, ...l } = t, { base: c, indicator: d } = f({ variant: a });
+  return /* @__PURE__ */ u(
+    s.List,
+    {
+      className: n(c(), e),
+      ...l,
+      "data-slot": i ?? "tabs-list",
+      children: [
+        o,
+        /* @__PURE__ */ r(
+          s.Indicator,
+          {
+            className: n(d()),
+            "data-slot": "tab-indicator"
+          }
+        )
+      ]
+    }
+  );
+}, T = (t) => {
+  const { className: a, slot: e, ...o } = t;
+  return /* @__PURE__ */ r(
+    s.Trigger,
+    {
+      className: n(
+        "relative",
+        "h-9 sm:h-8",
+        "flex shrink-0 grow items-center justify-center gap-1.5",
+        "px-[calc(--spacing(2.5)-1px)]",
+        "whitespace-nowrap font-medium text-sm",
+        "rounded-field border border-transparent",
+        "cursor-pointer",
+        "transition-[color,background-color,box-shadow]",
+        "data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start",
+        "hover:text-foreground/72",
+        "aria-selected:text-foreground",
+        "outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring",
+        "data-disabled:pointer-events-none data-disabled:opacity-64",
+        "[&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
+        "motion-reduce:transition-none!",
+        a
+      ),
+      ...o,
+      "data-slot": e ?? "tabs-trigger"
+    }
+  );
+}, N = (t) => {
+  const { className: a, slot: e, ...o } = t;
+  return /* @__PURE__ */ r(
+    s.Content,
+    {
+      className: n("flex-1 outline-none", a),
+      ...o,
+      "data-slot": e ?? "tabs-content"
+    }
+  );
+};
+export {
+  w as Tabs,
+  N as TabsContent,
+  z as TabsList,
+  T as TabsTrigger,
+  h as useTabs
+};
+//# sourceMappingURL=tabs.js.map

package/dist/simples/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../src/simples/tabs.tsx"],"sourcesContent":["import { Tabs as ArkTabs, useTabsContext } from \"@ark-ui/react/tabs\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\n\nexport const useTabs = useTabsContext;\n\nexport const Tabs = (props: React.ComponentProps<typeof ArkTabs.Root>) => {\n  const {\n    lazyMount = true,\n    unmountOnExit = true,\n    className,\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <ArkTabs.Root\n      className={cn(\n        \"flex flex-col gap-2\",\n        \"data-[orientation=vertical]:flex-row\",\n        className\n      )}\n      lazyMount={lazyMount}\n      unmountOnExit={unmountOnExit}\n      {...rest}\n      data-slot={slot ?? \"tabs\"}\n    />\n  );\n};\n\nconst tabsListVariants = tv({\n  slots: {\n    base: [\n      \"relative z-0\",\n      \"w-fit\",\n      \"text-muted-foreground\",\n      \"flex items-center justify-center gap-x-0.5\",\n      \"data-[orientation=vertical]:flex-col\",\n    ],\n    indicator: [\n      \"absolute inset-s-0 bottom-0\",\n      \"h-(--height) w-(--width)\",\n      \"transition-[width,translate] duration-200 ease-in-out\",\n      \"motion-reduce:transition-none!\",\n    ],\n  },\n  variants: {\n    variant: {\n      default: {\n        base: [\"rounded-field\"],\n        indicator: [\"-z-1 rounded-field bg-accent\"],\n      },\n      underline: {\n        base: [\n          \"data-[orientation=vertical]:px-1\",\n          \"data-[orientation=horizontal]:py-1\",\n          \"*:data-[slot=tabs-tab]:hover:bg-accent\",\n        ],\n        indicator: [\n          \"z-10\",\n          \"absolute bottom-0\",\n          \"bg-primary\",\n          \"data-[orientation=horizontal]:h-0.5\",\n          \"data-[orientation=vertical]:w-0.5\",\n        ],\n      },\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\ninterface TabsListProps\n  extends React.ComponentProps<typeof ArkTabs.List>,\n    VariantProps<typeof tabsListVariants> {}\n\nexport const TabsList = (props: TabsListProps) => {\n  const { variant = \"default\", className, children, slot, ...rest } = props;\n\n  const { base, indicator } = tabsListVariants({ variant });\n\n  return (\n    <ArkTabs.List\n      className={cn(base(), className)}\n      {...rest}\n      data-slot={slot ?? \"tabs-list\"}\n    >\n      {children}\n\n      <ArkTabs.Indicator\n        className={cn(indicator())}\n        data-slot=\"tab-indicator\"\n      />\n    </ArkTabs.List>\n  );\n};\n\nexport const TabsTrigger = (\n  props: React.ComponentProps<typeof ArkTabs.Trigger>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTabs.Trigger\n      className={cn(\n        \"relative\",\n        \"h-9 sm:h-8\",\n        \"flex shrink-0 grow items-center justify-center gap-1.5\",\n        \"px-[calc(--spacing(2.5)-1px)]\",\n        \"whitespace-nowrap font-medium text-sm\",\n        \"rounded-field border border-transparent\",\n        \"cursor-pointer\",\n        \"transition-[color,background-color,box-shadow]\",\n        \"data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start\",\n        \"hover:text-foreground/72\",\n        \"aria-selected:text-foreground\",\n        \"outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        \"[&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        \"motion-reduce:transition-none!\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tabs-trigger\"}\n    />\n  );\n};\n\nexport const TabsContent = (\n  props: React.ComponentProps<typeof ArkTabs.Content>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTabs.Content\n      className={cn(\"flex-1 outline-none\", className)}\n      {...rest}\n      data-slot={slot ?? \"tabs-content\"}\n    />\n  );\n};\n"],"names":["useTabs","useTabsContext","Tabs","props","lazyMount","unmountOnExit","className","slot","rest","jsx","ArkTabs","cn","tabsListVariants","tv","TabsList","variant","children","base","indicator","jsxs","TabsTrigger","TabsContent"],"mappings":";;;;AAKO,MAAMA,IAAUC,GAEVC,IAAO,CAACC,MAAqD;AACxE,QAAM;AAAA,IACJ,WAAAC,IAAY;AAAA,IACZ,eAAAC,IAAgB;AAAA,IAChB,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDL;AAEJ,SACE,gBAAAM;AAAA,IAACC,EAAQ;AAAA,IAAR;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAEF,WAAAF;AAAA,MACA,eAAAC;AAAA,MACC,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEMK,IAAmBC,EAAG;AAAA,EAC1B,OAAO;AAAA,IACL,MAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAAA,EAEF,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP,MAAM,CAAC,eAAe;AAAA,QACtB,WAAW,CAAC,8BAA8B;AAAA,MAAA;AAAA,MAE5C,WAAW;AAAA,QACT,MAAM;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,EAAA;AAEb,CAAC,GAKYC,IAAW,CAACX,MAAyB;AAChD,QAAM,EAAE,SAAAY,IAAU,WAAW,WAAAT,GAAW,UAAAU,GAAU,MAAAT,GAAM,GAAGC,MAASL,GAE9D,EAAE,MAAAc,GAAM,WAAAC,EAAA,IAAcN,EAAiB,EAAE,SAAAG,GAAS;AAExD,SACE,gBAAAI;AAAA,IAACT,EAAQ;AAAA,IAAR;AAAA,MACC,WAAWC,EAAGM,EAAA,GAAQX,CAAS;AAAA,MAC9B,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAElB,UAAA;AAAA,QAAAS;AAAA,QAED,gBAAAP;AAAA,UAACC,EAAQ;AAAA,UAAR;AAAA,YACC,WAAWC,EAAGO,GAAW;AAAA,YACzB,aAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN,GAEaE,IAAc,CACzBjB,MACG;AACH,QAAM,EAAE,WAAAG,GAAW,MAAAC,GAAM,GAAGC,MAASL;AAErC,SACE,gBAAAM;AAAA,IAACC,EAAQ;AAAA,IAAR;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,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEac,IAAc,CACzBlB,MACG;AACH,QAAM,EAAE,WAAAG,GAAW,MAAAC,GAAM,GAAGC,MAASL;AAErC,SACE,gBAAAM;AAAA,IAACC,EAAQ;AAAA,IAAR;AAAA,MACC,WAAWC,EAAG,uBAAuBL,CAAS;AAAA,MAC7C,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;"}

package/dist/simples/tags-input.d.ts

@@ -0,0 +1,64 @@
+import { TagsInput as ArkTagsInput } from '@ark-ui/react/tags-input';
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+/**
+ * The only place the plain name is a CHOICE, and it goes to the machine hook.
+ *
+ * Thirty-six components here write `export const useX = useXContext`, and so does Shark in fifty of
+ * its ninety-five — `accordion.tsx` is our line character for character. `tags-input` is where Shark
+ * ships both, because {@link TagsInputRootProvider} needs a machine to be handed, and a compound
+ * that offers a controlled root has two hooks to name rather than one. So the plain name goes to the
+ * machine and the context hook takes the suffix, here as there.
+ *
+ * `useHighlight` is also a machine hook and is not the same case: Ark's `highlight` module exports
+ * no context hook at all, so there was nothing to choose between. Here both exist.
+ *
+ * If you are reaching for the value, the items or `clearAll` from inside the compound, that is
+ * {@link useTagsInputContext}.
+ */
+export declare const useTagsInput: (props?: import('@ark-ui/react').UseTagsInputProps) => import('@ark-ui/react').UseTagsInputReturn;
+/** The context hook — what `useX` is everywhere else in this library. */
+export declare const useTagsInputContext: () => import('@ark-ui/react').UseTagsInputContext;
+export declare const TagsInputContext: (props: ArkTagsInput.ContextProps) => React.ReactNode;
+export declare const TagsInput: (props: React.ComponentProps<typeof ArkTagsInput.Root>) => React.JSX.Element;
+/**
+ * The controlled root: build the machine with {@link useTagsInput} and pass it as `value`.
+ *
+ * The same shape as `FileUploadRootProvider`, and for the same reason — a surface outside the
+ * compound that has to drive it. It is also why this file names two hooks where the rest of the
+ * library names one.
+ */
+export declare const TagsInputRootProvider: (props: React.ComponentProps<typeof ArkTagsInput.RootProvider>) => React.JSX.Element;
+export declare const TagsInputLabel: (props: React.ComponentProps<typeof ArkTagsInput.Label>) => React.JSX.Element;
+declare const tagsInputControlVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+}, undefined, string[], {
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export interface TagsInputControlProps extends React.ComponentProps<typeof ArkTagsInput.Control>, VariantProps<typeof tagsInputControlVariants> {
+}
+export declare const TagsInputControl: (props: TagsInputControlProps) => React.JSX.Element;
+export declare const TagsInputInput: (props: React.ComponentProps<typeof ArkTagsInput.Input>) => React.JSX.Element;
+export declare const TagsInputItem: (props: React.ComponentProps<typeof ArkTagsInput.Item>) => React.JSX.Element;
+export declare const TagsInputItemPreview: (props: React.ComponentProps<typeof ArkTagsInput.ItemPreview>) => React.JSX.Element;
+export declare const TagsInputItemText: (props: React.ComponentProps<typeof ArkTagsInput.ItemText>) => React.JSX.Element;
+export declare const TagsInputItemInput: (props: React.ComponentProps<typeof ArkTagsInput.ItemInput>) => React.JSX.Element;
+export declare const TagsInputItemDeleteTrigger: (props: React.ComponentProps<typeof ArkTagsInput.ItemDeleteTrigger>) => React.JSX.Element;
+export declare const TagsInputClearTrigger: (props: React.ComponentProps<typeof ArkTagsInput.ClearTrigger>) => React.JSX.Element;
+export declare const TagsInputHiddenInput: ({ slot, ...rest }: React.ComponentProps<typeof ArkTagsInput.HiddenInput>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=tags-input.d.ts.map

package/dist/simples/tags-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags-input.d.ts","sourceRoot":"","sources":["../../src/simples/tags-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,IAAI,YAAY,EAG1B,MAAM,0BAA0B,CAAC;AAElC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,mGAAkB,CAAC;AAE5C,yEAAyE;AACzE,eAAO,MAAM,mBAAmB,mDAAyB,CAAC;AAG1D,eAAO,MAAM,gBAAgB,uDAAuB,CAAC;AAErD,eAAO,MAAM,SAAS,GACpB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,sBAiBtD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,GAChC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,YAAY,CAAC,sBAe9D,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,KAAK,CAAC,sBAWvD,CAAC;AAEF,QAAA,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;qDA0B5B,CAAC;AAEH,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,OAAO,CAAC,EACvD,YAAY,CAAC,OAAO,wBAAwB,CAAC;CAAG;AAEpD,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,sBAW5D,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,KAAK,CAAC,sBAoBvD,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,sBAetD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,WAAW,CAAC,sBAqB7D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,QAAQ,CAAC,sBAW1D,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,SAAS,CAAC,sBAkB3D,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,iBAAiB,CAAC,sBAwBnE,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,YAAY,CAAC,sBAyB9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,mBAGlC,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,WAAW,CAAC,sBAKvD,CAAC"}