@kanzo-tech/ui 0.0.1-alpha

package/dist/simples/input-group.js

@@ -0,0 +1,245 @@
+"use client";
+import { jsx as s } from "react/jsx-runtime";
+import { ark as p } from "@ark-ui/react/factory";
+import { tv as l } from "tailwind-variants";
+import { cn as o } from "../lib/cn.js";
+import { Button as c } from "./button.js";
+import { Input as g } from "./input.js";
+import { Textarea as m } from "./textarea.js";
+const b = l({
+  base: [
+    "group/input-group",
+    "relative",
+    "w-full min-w-0",
+    "flex items-center",
+    "bg-background bg-field",
+    "rounded-lg border border-input shadow-xs/5",
+    "transition-[color,box-shadow]",
+    // **The group holds its controls; it does not press them against its border.**
+    //
+    // The height used to be fixed — `h-8` at `md`, a border-box 32px with 1px of border — while
+    // `InputGroupButton`'s `icon-sm` is `size-8`, also 32px. A fixed box cannot contain a control
+    // its own size, so the ✨ painted over the border a pixel above and below, and two at `sm`.
+    // Measured on `/docs/ai/fields`.
+    //
+    // Sizing the control down instead was tried and rejected on sight: it made the ✨ a different
+    // size here than the identical mark inside a `TagsInput`, which is the same component doing
+    // the same job. **`TagsInput` is the shape, and it is now literally the same one** — `p-1.5`
+    // around a `min-h-*` box, so the group grows to whatever it holds and every control keeps the
+    // size it has everywhere else. A group holding a 32px mark measures 46px, exactly as
+    // `TagsInputControl` does.
+    //
+    // The input's own `px-3` is replaced by `px-1.5` so the group's padding and the field's do not
+    // add up: 1px of border plus 6px of padding plus 6px is the 13px of inset the fixed-height
+    // version had, unchanged.
+    "[&>input]:px-1.5 [&>textarea]:px-1.5",
+    "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+    "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+    "outline-none focus-within:border-primary focus-within:ring-[3px] focus-within:ring-ring",
+    "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive/24",
+    "dark:has-[[data-slot][aria-invalid=true]]:border-destructive-foreground dark:has-[[data-slot][aria-invalid=true]]:ring-destructive-foreground/40",
+    "motion-reduce:transition-none!"
+  ],
+  variants: {
+    // `min-h`, not `h`: the box is sized by what it holds, and this is the floor it starts from.
+    // A fixed height is what made a control the same size as the group overflow it.
+    //
+    // **The padding is what the size axis now moves, and it has to be.** A content-sized box whose
+    // size variant only sets a floor is a size variant that does nothing: every group came out
+    // 46px — `sm`, `md` and `lg` alike — because the `<input>` inside carries its own `h-8` and
+    // that plus the padding cleared every floor. Measured on `/docs/forms/input-group`. Scaling
+    // the inset instead keeps the controls identical across the three, which is the whole point of
+    // this shape: an ✨ is the same ✨ in a small group, a large one and a `TagsInput`.
+    size: {
+      sm: ["min-h-7", "p-1"],
+      md: ["min-h-8", "p-1.5"],
+      lg: ["min-h-9", "p-2"]
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), y = (r) => {
+  const { size: t = "md", className: a, slot: e, ...n } = r;
+  return /* @__PURE__ */ s(
+    p.div,
+    {
+      className: o(b({ size: t }), a),
+      "data-size": t,
+      role: "group",
+      ...n,
+      "data-slot": e ?? "input-group"
+    }
+  );
+}, f = l({
+  base: [
+    "h-auto",
+    "flex items-center justify-center gap-2",
+    "select-none font-medium text-muted-foreground text-sm",
+    "cursor-text",
+    "group-data-[disabled=true]/input-group:opacity-64",
+    "[&>kbd]:rounded-[calc(var(--radius)-5px)]",
+    "[&_svg:not([class*='size-'])]:size-4"
+  ],
+  variants: {
+    align: {
+      // **A smaller padding, not a negative margin**, and this is a measured divergence from the
+      // reference rather than a taste one. Shark tucks the button in with `pe-3` plus
+      // `me-[-0.45rem]`; a negative margin on the last flex item lets its border box run past the
+      // container's content edge, so measured live on `docs/ai/fields` the addon sat **6.2px
+      // outside the group's inline border and 6px outside its block border** — in a box with
+      // `overflow: visible`, which is why it also showed up as 6px of scroll width on the parent.
+      // The inner gap is what was wanted and it is unchanged: 12px of padding minus 7.2px of
+      // margin is the 6px this sets directly.
+      // **A button needs no padding beside it — the group's own `p-1.5` is the inset**, and this
+      // is what puts the ✨ the same distance from the border here as inside a `TagsInputControl`.
+      // Text and a `kbd` still take theirs, because neither carries a box of its own.
+      "inline-start": ["order-first ps-3", "has-[>button]:ps-0", "has-[>kbd]:ps-2"],
+      "inline-end": ["order-last pe-3", "has-[>button]:pe-0", "has-[>kbd]:pe-2"],
+      // The block padding lives on the two block aligns and nowhere else. It was `py-1.5` in the
+      // base, which is right for a band across the field and wrong for a control tucked into its
+      // end: measured on `docs/ai/fields`, an `inline-end` addon was **44px tall inside a 32px
+      // group** — 6px of transparent padding past the border on each side, in a box with
+      // `overflow: visible`. The mark inside it is `size-8` and looked fine; what was wrong was the
+      // group's own box.
+      "block-start": [
+        "order-first w-full justify-start px-3 pt-3 pb-1.5",
+        "group-has-[>input]/input-group:pt-2.5",
+        "[.border-b]:pb-3"
+      ],
+      "block-end": [
+        "order-last w-full justify-start px-3 pt-1.5 pb-3",
+        "group-has-[>input]/input-group:pb-2.5",
+        "[.border-t]:pt-3"
+      ]
+    }
+  },
+  defaultVariants: {
+    align: "inline-start"
+  }
+}), I = (r) => {
+  const { className: t, align: a = "inline-start", slot: e, ...n } = r;
+  return /* @__PURE__ */ s(
+    p.div,
+    {
+      className: o(f({ align: a }), t),
+      "data-align": a,
+      onClick: (i) => {
+        var u, d;
+        i.target.closest("button") || (d = (u = i.currentTarget.parentElement) == null ? void 0 : u.querySelector("input")) == null || d.focus();
+      },
+      role: "group",
+      ...n,
+      "data-slot": e ?? "input-group-addon"
+    }
+  );
+}, h = l({
+  base: [
+    "relative",
+    "flex items-center gap-2",
+    "text-sm",
+    "shadow-none",
+    "pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11"
+  ],
+  variants: {
+    size: {
+      /**
+       * The floor, and the default, because there is nothing legal below it.
+       *
+       * `xs` and `icon-xs` were `1.5rem`, which is 24px at the default root and **21px at compact** —
+       * every size here is a `rem` against a root the density axis sets. That is under the 24×24
+       * WCAG 2.5.8 states in CSS pixels, and it was this component's DEFAULT, so an input group
+       * that said nothing got the failing size.
+       *
+       * The `pointer-coarse` hit area below does not save it. 44px is the touch answer and 2.5.8
+       * asks about pointers generally: with a mouse the target was 21px and the `::after` is not in
+       * the hit path. This is the one thing `Button` does not carry, and it is why the two were
+       * decided separately rather than in one sweep.
+       */
+      sm: ["h-8", "gap-1.5", "px-2.5", "rounded-md", "has-[>svg]:px-2.5"],
+      "icon-sm": ["size-8", "p-0", "has-[>svg]:p-0"]
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+}), V = (r) => {
+  const {
+    className: t,
+    type: a = "button",
+    variant: e = "ghost",
+    size: n = "sm",
+    slot: i,
+    ...u
+  } = r;
+  return /* @__PURE__ */ s(
+    c,
+    {
+      className: o(h({ size: n }), t),
+      "data-size": n,
+      type: a,
+      variant: e,
+      ...u,
+      slot: i ?? "input-group-button"
+    }
+  );
+}, j = (r) => {
+  const { className: t, slot: a, ...e } = r;
+  return /* @__PURE__ */ s(
+    p.span,
+    {
+      className: o(
+        "flex items-center gap-2",
+        "text-muted-foreground text-sm",
+        "[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        t
+      ),
+      ...e,
+      "data-slot": a ?? "input-group-text"
+    }
+  );
+}, T = (r) => {
+  const { className: t, slot: a, ...e } = r;
+  return /* @__PURE__ */ s(
+    g,
+    {
+      className: o(
+        "flex-1",
+        "bg-transparent",
+        "rounded-none border-0 shadow-none",
+        "focus-visible:ring-0",
+        "disabled:bg-transparent aria-invalid:ring-0 data-invalid:ring-0",
+        t
+      ),
+      ...e,
+      slot: a ?? "input-group-control"
+    }
+  );
+}, B = (r) => {
+  const { className: t, slot: a, ...e } = r;
+  return /* @__PURE__ */ s(
+    m,
+    {
+      className: o(
+        "flex-1",
+        "py-3",
+        "bg-transparent",
+        "resize-none rounded-none border-0 shadow-none",
+        "focus-visible:ring-0",
+        "disabled:bg-transparent aria-invalid:ring-0 data-invalid:ring-0",
+        t
+      ),
+      ...e,
+      slot: a ?? "input-group-control"
+    }
+  );
+};
+export {
+  y as InputGroup,
+  I as InputGroupAddon,
+  V as InputGroupButton,
+  T as InputGroupInput,
+  j as InputGroupText,
+  B as InputGroupTextarea
+};
+//# sourceMappingURL=input-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.js","sources":["../../src/simples/input-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { Textarea } from \"./textarea\";\n\nconst inpuGroupVariants = tv({\n  base: [\n    \"group/input-group\",\n    \"relative\",\n    \"w-full min-w-0\",\n    \"flex items-center\",\n    \"bg-background bg-field\",\n    \"rounded-lg border border-input shadow-xs/5\",\n    \"transition-[color,box-shadow]\",\n    // **The group holds its controls; it does not press them against its border.**\n    //\n    // The height used to be fixed — `h-8` at `md`, a border-box 32px with 1px of border — while\n    // `InputGroupButton`'s `icon-sm` is `size-8`, also 32px. A fixed box cannot contain a control\n    // its own size, so the ✨ painted over the border a pixel above and below, and two at `sm`.\n    // Measured on `/docs/ai/fields`.\n    //\n    // Sizing the control down instead was tried and rejected on sight: it made the ✨ a different\n    // size here than the identical mark inside a `TagsInput`, which is the same component doing\n    // the same job. **`TagsInput` is the shape, and it is now literally the same one** — `p-1.5`\n    // around a `min-h-*` box, so the group grows to whatever it holds and every control keeps the\n    // size it has everywhere else. A group holding a 32px mark measures 46px, exactly as\n    // `TagsInputControl` does.\n    //\n    // The input's own `px-3` is replaced by `px-1.5` so the group's padding and the field's do not\n    // add up: 1px of border plus 6px of padding plus 6px is the 13px of inset the fixed-height\n    // version had, unchanged.\n    \"[&>input]:px-1.5 [&>textarea]:px-1.5\",\n    \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n    \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n    \"outline-none focus-within:border-primary focus-within:ring-[3px] focus-within:ring-ring\",\n    \"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive/24\",\n    \"dark:has-[[data-slot][aria-invalid=true]]:border-destructive-foreground dark:has-[[data-slot][aria-invalid=true]]:ring-destructive-foreground/40\",\n    \"motion-reduce:transition-none!\",\n  ],\n  variants: {\n    // `min-h`, not `h`: the box is sized by what it holds, and this is the floor it starts from.\n    // A fixed height is what made a control the same size as the group overflow it.\n    //\n    // **The padding is what the size axis now moves, and it has to be.** A content-sized box whose\n    // size variant only sets a floor is a size variant that does nothing: every group came out\n    // 46px — `sm`, `md` and `lg` alike — because the `<input>` inside carries its own `h-8` and\n    // that plus the padding cleared every floor. Measured on `/docs/forms/input-group`. Scaling\n    // the inset instead keeps the controls identical across the three, which is the whole point of\n    // this shape: an ✨ is the same ✨ in a small group, a large one and a `TagsInput`.\n    size: {\n      sm: [\"min-h-7\", \"p-1\"],\n      md: [\"min-h-8\", \"p-1.5\"],\n      lg: [\"min-h-9\", \"p-2\"],\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface InputGroupProps\n  extends React.ComponentProps<typeof ark.div>,\n    VariantProps<typeof inpuGroupVariants> {}\n\nexport const InputGroup = (props: InputGroupProps) => {\n  const { size = \"md\", className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(inpuGroupVariants({ size }), className)}\n      data-size={size}\n      role=\"group\"\n      {...rest}\n      data-slot={slot ?? \"input-group\"}\n    />\n  );\n};\n\nconst inputGroupAddonVariants = tv({\n  base: [\n    \"h-auto\",\n    \"flex items-center justify-center gap-2\",\n    \"select-none font-medium text-muted-foreground text-sm\",\n    \"cursor-text\",\n    \"group-data-[disabled=true]/input-group:opacity-64\",\n    \"[&>kbd]:rounded-[calc(var(--radius)-5px)]\",\n    \"[&_svg:not([class*='size-'])]:size-4\",\n  ],\n  variants: {\n    align: {\n      // **A smaller padding, not a negative margin**, and this is a measured divergence from the\n      // reference rather than a taste one. Shark tucks the button in with `pe-3` plus\n      // `me-[-0.45rem]`; a negative margin on the last flex item lets its border box run past the\n      // container's content edge, so measured live on `docs/ai/fields` the addon sat **6.2px\n      // outside the group's inline border and 6px outside its block border** — in a box with\n      // `overflow: visible`, which is why it also showed up as 6px of scroll width on the parent.\n      // The inner gap is what was wanted and it is unchanged: 12px of padding minus 7.2px of\n      // margin is the 6px this sets directly.\n      // **A button needs no padding beside it — the group's own `p-1.5` is the inset**, and this\n      // is what puts the ✨ the same distance from the border here as inside a `TagsInputControl`.\n      // Text and a `kbd` still take theirs, because neither carries a box of its own.\n      \"inline-start\": [\"order-first ps-3\", \"has-[>button]:ps-0\", \"has-[>kbd]:ps-2\"],\n      \"inline-end\": [\"order-last pe-3\", \"has-[>button]:pe-0\", \"has-[>kbd]:pe-2\"],\n      // The block padding lives on the two block aligns and nowhere else. It was `py-1.5` in the\n      // base, which is right for a band across the field and wrong for a control tucked into its\n      // end: measured on `docs/ai/fields`, an `inline-end` addon was **44px tall inside a 32px\n      // group** — 6px of transparent padding past the border on each side, in a box with\n      // `overflow: visible`. The mark inside it is `size-8` and looked fine; what was wrong was the\n      // group's own box.\n      \"block-start\": [\n        \"order-first w-full justify-start px-3 pt-3 pb-1.5\",\n        \"group-has-[>input]/input-group:pt-2.5\",\n        \"[.border-b]:pb-3\",\n      ],\n      \"block-end\": [\n        \"order-last w-full justify-start px-3 pt-1.5 pb-3\",\n        \"group-has-[>input]/input-group:pb-2.5\",\n        \"[.border-t]:pt-3\",\n      ],\n    },\n  },\n  defaultVariants: {\n    align: \"inline-start\",\n  },\n});\n\ninterface InputGroupAddonProps\n  extends React.ComponentProps<typeof ark.div>,\n    VariantProps<typeof inputGroupAddonVariants> {}\n\nexport const InputGroupAddon = (props: InputGroupAddonProps) => {\n  const { className, align = \"inline-start\", slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      data-align={align}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n      }}\n      role=\"group\"\n      {...rest}\n      data-slot={slot ?? \"input-group-addon\"}\n    />\n  );\n};\n\nconst inputGroupButtonVariants = tv({\n  base: [\n    \"relative\",\n    \"flex items-center gap-2\",\n    \"text-sm\",\n    \"shadow-none\",\n    \"pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11\",\n  ],\n  variants: {\n    size: {\n      /**\n       * The floor, and the default, because there is nothing legal below it.\n       *\n       * `xs` and `icon-xs` were `1.5rem`, which is 24px at the default root and **21px at compact** —\n       * every size here is a `rem` against a root the density axis sets. That is under the 24×24\n       * WCAG 2.5.8 states in CSS pixels, and it was this component's DEFAULT, so an input group\n       * that said nothing got the failing size.\n       *\n       * The `pointer-coarse` hit area below does not save it. 44px is the touch answer and 2.5.8\n       * asks about pointers generally: with a mouse the target was 21px and the `::after` is not in\n       * the hit path. This is the one thing `Button` does not carry, and it is why the two were\n       * decided separately rather than in one sweep.\n       */\n      sm: [\"h-8\", \"gap-1.5\", \"px-2.5\", \"rounded-md\", \"has-[>svg]:px-2.5\"],\n      \"icon-sm\": [\"size-8\", \"p-0\", \"has-[>svg]:p-0\"],\n    },\n  },\n  defaultVariants: {\n    size: \"sm\",\n  },\n});\n\ninterface InputGroupButtonProps\n  extends Omit<React.ComponentProps<typeof Button>, \"size\">,\n    VariantProps<typeof inputGroupButtonVariants> {}\n\nexport const InputGroupButton = (props: InputGroupButtonProps) => {\n  const {\n    className,\n    type = \"button\",\n    variant = \"ghost\",\n    size = \"sm\",\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <Button\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      data-size={size}\n      type={type}\n      variant={variant}\n      {...rest}\n      slot={slot ?? \"input-group-button\"}\n    />\n  );\n};\n\nexport const InputGroupText = (\n  props: React.ComponentProps<typeof ark.span>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.span\n      className={cn(\n        \"flex items-center gap-2\",\n        \"text-muted-foreground text-sm\",\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"input-group-text\"}\n    />\n  );\n};\n\nexport const InputGroupInput = (props: React.ComponentProps<typeof Input>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Input\n      className={cn(\n        \"flex-1\",\n        \"bg-transparent\",\n        \"rounded-none border-0 shadow-none\",\n        \"focus-visible:ring-0\",\n        \"disabled:bg-transparent aria-invalid:ring-0 data-invalid:ring-0\",\n                className\n      )}\n      {...rest}\n      slot={slot ?? \"input-group-control\"}\n    />\n  );\n};\n\nexport const InputGroupTextarea = (\n  props: React.ComponentProps<typeof Textarea>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Textarea\n      className={cn(\n        \"flex-1\",\n        \"py-3\",\n        \"bg-transparent\",\n        \"resize-none rounded-none border-0 shadow-none\",\n        \"focus-visible:ring-0\",\n        \"disabled:bg-transparent aria-invalid:ring-0 data-invalid:ring-0\",\n                className\n      )}\n      {...rest}\n      slot={slot ?? \"input-group-control\"}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAUA;AAA6B;AACrB;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUF;AACiB;AACE;AACF;AAAA;AACvB;AAEe;AACT;AAEV;AAOE;AAEA;AACE;AAAK;AAAJ;AACqD;AACzC;AACN;AACD;AACe;AAAA;AAGzB;AAEmC;AAC3B;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEQ;AACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYuE;AACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1D;AACb;AACA;AACA;AAAA;AAEW;AACX;AACA;AACA;AAAA;AACF;AACF;AAEe;AACR;AAEX;AAOE;AAEA;AACE;AAAK;AAAJ;AAC4D;AAC/C;;AAEV;AAGuD;AACzD;AACK;AACD;AACe;AAAA;AAGzB;AAEoC;AAC5B;AACJ;AACA;AACA;AACA;AACA;AAAA;AAEQ;AACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc8D;AACrB;AAAA;AAC/C;AAEe;AACT;AAEV;AAOE;AAAM;AACJ;AACO;AACG;AACH;AACP;AACG;AAGL;AACE;AAAC;AAAA;AAC4D;AAChD;AACX;AACA;AACI;AACU;AAAA;AAGpB;AAKE;AAEA;AACE;AAAK;AAAJ;AACY;AACT;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAGE;AAEA;AACE;AAAC;AAAA;AACY;AACT;AACA;AACA;AACA;AACA;AACQ;AAAA;AAEN;AACU;AAAA;AAGpB;AAKE;AAEA;AACE;AAAC;AAAA;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACQ;AAAA;AAEN;AACU;AAAA;AAGpB;;;;;;;;;"}

package/dist/simples/input.d.ts

@@ -0,0 +1,26 @@
+import { FieldInput } from '@ark-ui/react/field';
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const inputVariants: 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 InputProps extends Omit<React.ComponentProps<typeof FieldInput>, "size">, VariantProps<typeof inputVariants> {
+}
+export declare const Input: (props: InputProps) => React.JSX.Element;
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/simples/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;qDAsCxB,CAAC;AAEH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,MAAM,CAAC,EAC3D,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,sBAYtC,CAAC"}

package/dist/simples/input.js

@@ -0,0 +1,60 @@
+import { jsx as n } from "react/jsx-runtime";
+import { FieldInput as s } from "@ark-ui/react/field";
+import { tv as o } from "tailwind-variants";
+import { cn as l } from "../lib/cn.js";
+const c = o({
+  base: [
+    "peer",
+    // On the base, not on the size — see `button.tsx`.
+    "h-(--size)",
+    "w-full min-w-0",
+    "px-3",
+    "bg-field",
+    "text-base md:text-sm",
+    "rounded-field border border-input shadow-xs/5",
+    "placeholder:text-faint",
+    "file:inline-flex file:h-7 file:items-center file:border-0",
+    "file:font-medium file:text-foreground file:text-sm",
+    "transition-[color,box-shadow]",
+    "outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring",
+    "aria-invalid:border-destructive aria-invalid:text-destructive-foreground aria-invalid:ring-[3px] aria-invalid:ring-destructive/24",
+    "data-invalid:border-destructive data-invalid:text-destructive-foreground data-invalid:ring-[3px] data-invalid:ring-destructive/24",
+    // The dark branch is TEXT only, and this is the site the other eleven recipes point at.
+    // Shark repaints the border and the ring here too; measured across all six compiled documents,
+    // `--destructive` reads 4.15:1 against that document's own dark page — over the 3:1 WCAG 1.4.11
+    // asks of the visual information identifying a control or its state, so the border and the ring
+    // were buying a hue rather than contrast. Text owes AA's 4.5 and 4.15 misses it, so this half
+    // stays.
+    "dark:aria-invalid:text-destructive-foreground",
+    "dark:data-invalid:text-destructive-foreground",
+    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64",
+    "motion-reduce:transition-none!"
+  ],
+  variants: {
+    size: {
+      sm: ["[--size:calc(var(--size-field)*7)]"],
+      md: ["[--size:calc(var(--size-field)*8)]"],
+      lg: ["[--size:calc(var(--size-field)*9)]"]
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), p = (e) => {
+  const { size: i = "md", type: t = "text", className: r, slot: a, ...d } = e;
+  return /* @__PURE__ */ n(
+    s,
+    {
+      className: l(c({ size: i }), r),
+      "data-size": i,
+      type: t,
+      ...d,
+      "data-slot": a ?? "input"
+    }
+  );
+};
+export {
+  p as Input,
+  c as inputVariants
+};
+//# sourceMappingURL=input.js.map

package/dist/simples/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sources":["../../src/simples/input.tsx"],"sourcesContent":["import { FieldInput } from \"@ark-ui/react/field\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\n\nexport const inputVariants = tv({\n  base: [\n    \"peer\",\n    // On the base, not on the size — see `button.tsx`.\n    \"h-(--size)\",\n    \"w-full min-w-0\",\n    \"px-3\",\n    \"bg-field\",\n    \"text-base md:text-sm\",\n    \"rounded-field border border-input shadow-xs/5\",\n    \"placeholder:text-faint\",\n    \"file:inline-flex file:h-7 file:items-center file:border-0\",\n    \"file:font-medium file:text-foreground file:text-sm\",\n    \"transition-[color,box-shadow]\",\n    \"outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring\",\n    \"aria-invalid:border-destructive aria-invalid:text-destructive-foreground aria-invalid:ring-[3px] aria-invalid:ring-destructive/24\",\n    \"data-invalid:border-destructive data-invalid:text-destructive-foreground data-invalid:ring-[3px] data-invalid:ring-destructive/24\",\n    // The dark branch is TEXT only, and this is the site the other eleven recipes point at.\n    // Shark repaints the border and the ring here too; measured across all six compiled documents,\n    // `--destructive` reads 4.15:1 against that document's own dark page — over the 3:1 WCAG 1.4.11\n    // asks of the visual information identifying a control or its state, so the border and the ring\n    // were buying a hue rather than contrast. Text owes AA's 4.5 and 4.15 misses it, so this half\n    // stays.\n    \"dark:aria-invalid:text-destructive-foreground\",\n    \"dark:data-invalid:text-destructive-foreground\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64\",\n    \"motion-reduce:transition-none!\",\n  ],\n  variants: {\n    size: {\n      sm: [\"[--size:calc(var(--size-field)*7)]\"],\n      md: [\"[--size:calc(var(--size-field)*8)]\"],\n      lg: [\"[--size:calc(var(--size-field)*9)]\"],\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface InputProps\n  extends Omit<React.ComponentProps<typeof FieldInput>, \"size\">,\n    VariantProps<typeof inputVariants> {}\n\nexport const Input = (props: InputProps) => {\n  const { size = \"md\", type = \"text\", className, slot, ...rest } = props;\n\n  return (\n    <FieldInput\n      className={cn(inputVariants({ size }), className)}\n      data-size={size}\n      type={type}\n      {...rest}\n      data-slot={slot ?? \"input\"}\n    />\n  );\n};\n"],"names":["inputVariants","tv","Input","props","size","type","className","slot","rest","jsx","FieldInput","cn"],"mappings":";;;;AAKO,MAAMA,IAAgBC,EAAG;AAAA,EAC9B,MAAM;AAAA,IACJ;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI,CAAC,oCAAoC;AAAA,MACzC,IAAI,CAAC,oCAAoC;AAAA,MACzC,IAAI,CAAC,oCAAoC;AAAA,IAAA;AAAA,EAC3C;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC,GAMYC,IAAQ,CAACC,MAAsB;AAC1C,QAAM,EAAE,MAAAC,IAAO,MAAM,MAAAC,IAAO,QAAQ,WAAAC,GAAW,MAAAC,GAAM,GAAGC,EAAA,IAASL;AAEjE,SACE,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAGX,EAAc,EAAE,MAAAI,EAAA,CAAM,GAAGE,CAAS;AAAA,MAChD,aAAWF;AAAA,MACX,MAAAC;AAAA,MACC,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;"}

package/dist/simples/item.d.ts

@@ -0,0 +1,72 @@
+import { ark } from '@ark-ui/react/factory';
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { Separator } from './separator';
+export declare const ItemGroup: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export declare const ItemSeparator: (props: React.ComponentProps<typeof Separator>) => React.JSX.Element;
+declare const itemVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+        muted: string;
+    };
+}, undefined, string[], {
+    variant: {
+        default: string;
+        outline: string;
+        muted: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+        muted: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export interface ItemProps extends React.ComponentProps<typeof ark.div>, VariantProps<typeof itemVariants> {
+}
+/**
+ * One row. A `<div>` carrying `role="listitem"`, which is what `ItemGroup`'s `role="list"` requires
+ * of its children.
+ *
+ * **Do not `asChild` this onto an interactive element.** Ark clones the parent's props onto the
+ * child through zag's `mergeProps`, and there the child only wins where the child *declares* a
+ * value — a `<button>` declares no `role`, so `role="listitem"` lands on it and replaces the
+ * implicit `button`. The control keeps working and stops being announced as a control, which is the
+ * kind of defect nothing in the pipeline reports.
+ *
+ * A pressable row is a button **inside** the item, not merged with it. `p-0` on the item and the
+ * padding on the button keeps the whole row as the target, which is what makes 2.5.8 easy here.
+ * `asChild` is still right for a non-interactive swap — an `<li>`, an `<article>`.
+ */
+export declare const Item: (props: ItemProps) => React.JSX.Element;
+declare const itemMediaVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+        icon: string;
+        image: string;
+    };
+}, undefined, string[], {
+    variant: {
+        default: string;
+        icon: string;
+        image: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+        icon: string;
+        image: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export interface ItemMediaProps extends React.ComponentProps<typeof ark.div>, VariantProps<typeof itemMediaVariants> {
+}
+export declare const ItemMedia: (props: ItemMediaProps) => React.JSX.Element;
+export declare const ItemHeader: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export declare const ItemContent: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export declare const ItemTitle: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export declare const ItemDescription: (props: React.ComponentProps<typeof ark.p>) => React.JSX.Element;
+export declare const ItemActions: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export declare const ItemFooter: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../src/simples/item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAWpE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,sBAW1E,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;qDAuBhB,CAAC;AAEH,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,EAC1C,YAAY,CAAC,OAAO,YAAY,CAAC;CAAG;AAExC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,sBAYpC,CAAC;AAEF,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;qDAgBrB,CAAC;AAEH,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,EAC1C,YAAY,CAAC,OAAO,iBAAiB,CAAC;CAAG;AAE7C,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBAW9C,CAAC;AAGF,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAcrE,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBActE,CAAC;AAKF,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAepE,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,sBAcxE,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAUtE,CAAC;AAGF,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAUrE,CAAC"}

package/dist/simples/item.js

@@ -0,0 +1,180 @@
+import { jsx as r } from "react/jsx-runtime";
+import { ark as n } from "@ark-ui/react/factory";
+import { tv as l } from "tailwind-variants";
+import { cn as o } from "../lib/cn.js";
+import { Separator as m } from "./separator.js";
+const x = (e) => {
+  const { className: t, slot: s, ...a } = e;
+  return /* @__PURE__ */ r(
+    n.div,
+    {
+      className: o("group/item-group flex w-full flex-col gap-4", t),
+      role: "list",
+      ...a,
+      "data-slot": s ?? "item-group"
+    }
+  );
+}, b = (e) => {
+  const { className: t, slot: s, ...a } = e;
+  return /* @__PURE__ */ r(
+    m,
+    {
+      className: o("my-2", t),
+      orientation: "horizontal",
+      ...a,
+      slot: s ?? "item-separator"
+    }
+  );
+}, c = l({
+  base: [
+    "[--space:--spacing(3)]",
+    "group/item",
+    "flex w-full flex-wrap items-center",
+    "gap-(--space) p-(--space)",
+    "in-data-[slot=menu-content]:p-0",
+    "rounded-xl border text-sm",
+    "transition-colors duration-100",
+    "[a]:transition-colors [a]:hover:bg-muted",
+    "outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring",
+    "[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ],
+  variants: {
+    variant: {
+      default: "border-transparent",
+      outline: "border-border shadow-xs/5",
+      muted: "border-transparent bg-muted/48 shadow-muted/5 shadow-xs"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), N = (e) => {
+  const { variant: t = "default", className: s, slot: a, ...i } = e;
+  return /* @__PURE__ */ r(
+    n.div,
+    {
+      className: o(c({ variant: t }), s),
+      "data-variant": t,
+      role: "listitem",
+      ...i,
+      "data-slot": a ?? "item"
+    }
+  );
+}, d = l({
+  base: [
+    "flex shrink-0 items-center justify-center gap-2",
+    "group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start",
+    "[&_svg]:pointer-events-none"
+  ],
+  variants: {
+    variant: {
+      default: "bg-transparent",
+      icon: "[&_svg:not([class*='size-'])]:size-4",
+      image: "size-10 overflow-hidden rounded-xl [&_img]:size-full [&_img]:object-cover"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), h = (e) => {
+  const { variant: t = "default", className: s, slot: a, ...i } = e;
+  return /* @__PURE__ */ r(
+    n.div,
+    {
+      className: o(d({ variant: t }), s),
+      "data-variant": t,
+      ...i,
+      "data-slot": a ?? "item-media"
+    }
+  );
+}, w = (e) => {
+  const { className: t, slot: s, ...a } = e;
+  return /* @__PURE__ */ r(
+    n.div,
+    {
+      className: o(
+        "flex basis-full items-center justify-between gap-2",
+        "[&_img]:size-full [&_img]:rounded-xl [&_img]:object-cover",
+        t
+      ),
+      ...a,
+      "data-slot": s ?? "item-header"
+    }
+  );
+}, I = (e) => {
+  const { className: t, slot: s, ...a } = e;
+  return /* @__PURE__ */ r(
+    n.div,
+    {
+      className: o(
+        "flex min-w-0 flex-1 flex-col gap-0.5",
+        "[&+[data-slot=item-content]]:flex-none",
+        t
+      ),
+      ...a,
+      "data-slot": s ?? "item-content"
+    }
+  );
+}, _ = (e) => {
+  const { className: t, slot: s, ...a } = e;
+  return /* @__PURE__ */ r(
+    n.div,
+    {
+      className: o(
+        "flex w-fit items-center gap-2",
+        "font-medium text-sm leading-snug",
+        "underline-offset-4",
+        t
+      ),
+      ...a,
+      "data-slot": s ?? "item-title"
+    }
+  );
+}, z = (e) => {
+  const { className: t, slot: s, ...a } = e;
+  return /* @__PURE__ */ r(
+    n.p,
+    {
+      className: o(
+        "line-clamp-2 text-start font-normal text-muted-foreground text-sm leading-normal",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        t
+      ),
+      ...a,
+      "data-slot": s ?? "item-description"
+    }
+  );
+}, y = (e) => {
+  const { className: t, slot: s, ...a } = e;
+  return /* @__PURE__ */ r(
+    n.div,
+    {
+      className: o("flex items-center gap-2", t),
+      ...a,
+      "data-slot": s ?? "item-actions"
+    }
+  );
+}, j = (e) => {
+  const { className: t, slot: s, ...a } = e;
+  return /* @__PURE__ */ r(
+    n.div,
+    {
+      className: o("flex basis-full items-center justify-between gap-2", t),
+      ...a,
+      "data-slot": s ?? "item-footer"
+    }
+  );
+};
+export {
+  N as Item,
+  y as ItemActions,
+  I as ItemContent,
+  z as ItemDescription,
+  j as ItemFooter,
+  x as ItemGroup,
+  w as ItemHeader,
+  h as ItemMedia,
+  b as ItemSeparator,
+  _ as ItemTitle
+};
+//# sourceMappingURL=item.js.map

package/dist/simples/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","sources":["../../src/simples/item.tsx"],"sourcesContent":["// The row counterpart to Card: a horizontal media · content · actions strip, for lists of\n// records where a Card would be too heavy. Presentational (`ark.*`), no client boundary.\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Separator } from \"./separator\";\n\nexport const ItemGroup = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\"group/item-group flex w-full flex-col gap-4\", className)}\n      role=\"list\"\n      {...rest}\n      data-slot={slot ?? \"item-group\"}\n    />\n  );\n};\n\nexport const ItemSeparator = (props: React.ComponentProps<typeof Separator>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Separator\n      className={cn(\"my-2\", className)}\n      orientation=\"horizontal\"\n      {...rest}\n      slot={slot ?? \"item-separator\"}\n    />\n  );\n};\n\nconst itemVariants = tv({\n  base: [\n    \"[--space:--spacing(3)]\",\n    \"group/item\",\n    \"flex w-full flex-wrap items-center\",\n    \"gap-(--space) p-(--space)\",\n    \"in-data-[slot=menu-content]:p-0\",\n    \"rounded-xl border text-sm\",\n    \"transition-colors duration-100\",\n    \"[a]:transition-colors [a]:hover:bg-muted\",\n    \"outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring\",\n    \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  ],\n  variants: {\n    variant: {\n      default: \"border-transparent\",\n      outline: \"border-border shadow-xs/5\",\n      muted: \"border-transparent bg-muted/48 shadow-muted/5 shadow-xs\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\nexport interface ItemProps\n  extends React.ComponentProps<typeof ark.div>,\n    VariantProps<typeof itemVariants> {}\n\n/**\n * One row. A `<div>` carrying `role=\"listitem\"`, which is what `ItemGroup`'s `role=\"list\"` requires\n * of its children.\n *\n * **Do not `asChild` this onto an interactive element.** Ark clones the parent's props onto the\n * child through zag's `mergeProps`, and there the child only wins where the child *declares* a\n * value — a `<button>` declares no `role`, so `role=\"listitem\"` lands on it and replaces the\n * implicit `button`. The control keeps working and stops being announced as a control, which is the\n * kind of defect nothing in the pipeline reports.\n *\n * A pressable row is a button **inside** the item, not merged with it. `p-0` on the item and the\n * padding on the button keeps the whole row as the target, which is what makes 2.5.8 easy here.\n * `asChild` is still right for a non-interactive swap — an `<li>`, an `<article>`.\n */\nexport const Item = (props: ItemProps) => {\n  const { variant = \"default\", className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(itemVariants({ variant }), className)}\n      data-variant={variant}\n      role=\"listitem\"\n      {...rest}\n      data-slot={slot ?? \"item\"}\n    />\n  );\n};\n\nconst itemMediaVariants = tv({\n  base: [\n    \"flex shrink-0 items-center justify-center gap-2\",\n    \"group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start\",\n    \"[&_svg]:pointer-events-none\",\n  ],\n  variants: {\n    variant: {\n      default: \"bg-transparent\",\n      icon: \"[&_svg:not([class*='size-'])]:size-4\",\n      image: \"size-10 overflow-hidden rounded-xl [&_img]:size-full [&_img]:object-cover\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\nexport interface ItemMediaProps\n  extends React.ComponentProps<typeof ark.div>,\n    VariantProps<typeof itemMediaVariants> {}\n\nexport const ItemMedia = (props: ItemMediaProps) => {\n  const { variant = \"default\", className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(itemMediaVariants({ variant }), className)}\n      data-variant={variant}\n      {...rest}\n      data-slot={slot ?? \"item-media\"}\n    />\n  );\n};\n\n// A full-width row above the main line (breaks to its own line via `basis-full`).\nexport const ItemHeader = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        \"[&_img]:size-full [&_img]:rounded-xl [&_img]:object-cover\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"item-header\"}\n    />\n  );\n};\n\nexport const ItemContent = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"flex min-w-0 flex-1 flex-col gap-0.5\",\n        \"[&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"item-content\"}\n    />\n  );\n};\n\n// No `line-clamp-1` here, deliberately: it sets `display: -webkit-box`, which cannot coexist\n// with the `flex` this row needs, so tailwind-merge kept one and silently dropped `flex` — and\n// with it the `gap-2` between a title's children. Truncation is opt-in at the call site.\nexport const ItemTitle = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"flex w-fit items-center gap-2\",\n        \"font-medium text-sm leading-snug\",\n        \"underline-offset-4\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"item-title\"}\n    />\n  );\n};\n\nexport const ItemDescription = (props: React.ComponentProps<typeof ark.p>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.p\n      className={cn(\n        \"line-clamp-2 text-start font-normal text-muted-foreground text-sm leading-normal\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"item-description\"}\n    />\n  );\n};\n\nexport const ItemActions = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\"flex items-center gap-2\", className)}\n      {...rest}\n      data-slot={slot ?? \"item-actions\"}\n    />\n  );\n};\n\n// A full-width row below the main line.\nexport const ItemFooter = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\n      {...rest}\n      data-slot={slot ?? \"item-footer\"}\n    />\n  );\n};\n"],"names":["ItemGroup","props","className","slot","rest","jsx","ark","cn","ItemSeparator","Separator","itemVariants","tv","Item","variant","itemMediaVariants","ItemMedia","ItemHeader","ItemContent","ItemTitle","ItemDescription","ItemActions","ItemFooter"],"mappings":";;;;;AASO,MAAMA,IAAY,CAACC,MAAgD;AACxE,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAG,+CAA+CL,CAAS;AAAA,MACtE,MAAK;AAAA,MACJ,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaK,IAAgB,CAACP,MAAkD;AAC9E,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,WAAWF,EAAG,QAAQL,CAAS;AAAA,MAC/B,aAAY;AAAA,MACX,GAAGE;AAAA,MACJ,MAAMD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGpB,GAEMO,IAAeC,EAAG;AAAA,EACtB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,EAAA;AAEb,CAAC,GAoBYC,IAAO,CAACX,MAAqB;AACxC,QAAM,EAAE,SAAAY,IAAU,WAAW,WAAAX,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAE1D,SACE,gBAAAI;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAGG,EAAa,EAAE,SAAAG,EAAA,CAAS,GAAGX,CAAS;AAAA,MAClD,gBAAcW;AAAA,MACd,MAAK;AAAA,MACJ,GAAGT;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEMW,IAAoBH,EAAG;AAAA,EAC3B,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,EAAA;AAEb,CAAC,GAMYI,IAAY,CAACd,MAA0B;AAClD,QAAM,EAAE,SAAAY,IAAU,WAAW,WAAAX,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAE1D,SACE,gBAAAI;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAGO,EAAkB,EAAE,SAAAD,EAAA,CAAS,GAAGX,CAAS;AAAA,MACvD,gBAAcW;AAAA,MACb,GAAGT;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAGaa,IAAa,CAACf,MAAgD;AACzE,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEac,IAAc,CAAChB,MAAgD;AAC1E,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAKae,IAAY,CAACjB,MAAgD;AACxE,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEagB,IAAkB,CAAClB,MAA8C;AAC5E,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaiB,IAAc,CAACnB,MAAgD;AAC1E,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAG,2BAA2BL,CAAS;AAAA,MACjD,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAGakB,IAAa,CAACpB,MAAgD;AACzE,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAG,sDAAsDL,CAAS;AAAA,MAC5E,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;"}