@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/input-group.js

@@ -0,0 +1,115 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/input-group.tsx
+function InputGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
+		...props
+	});
+}
+var inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+	variants: { align: {
+		"inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+		"inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+		"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+		"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		className: cn(inputGroupAddonVariants({ align }), className),
+		onClick: (e) => {
+			if (e.target.closest("button")) return;
+			e.currentTarget.parentElement?.querySelector("input")?.focus();
+		},
+		...props
+	});
+}
+var inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+	variants: { size: {
+		xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+		sm: "",
+		"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+var INPUT_GROUP_ICON_ONLY_SIZE = {
+	xs: "icon-xs",
+	sm: "icon-sm"
+};
+function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", iconOnly = false, ...props }) {
+	const resolvedSize = iconOnly && size in INPUT_GROUP_ICON_ONLY_SIZE ? INPUT_GROUP_ICON_ONLY_SIZE[size] : size;
+	return /* @__PURE__ */ jsx(Button, {
+		type,
+		"data-size": resolvedSize,
+		variant,
+		className: cn(inputGroupButtonVariants({ size: resolvedSize }), className),
+		...props
+	});
+}
+function InputGroupText({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+}
+function InputGroupInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
+		...props
+	});
+}
+function InputGroupTextarea({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Textarea, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - A search field with a leading icon
+* - A URL field with an "https://" prefix or a units suffix
+* - A textarea with a send button beneath it (a composer) — use `align="block-end"` on the addon
+*
+* NOT WHEN
+* - A plain field with no icon/affix — use Input or Textarea directly
+* - Two or more unrelated buttons standing alone — use ButtonGroup
+*
+* KEY RULES
+* - Use InputGroupInput / InputGroupTextarea inside, not the plain Input/Textarea — they strip the inner border/ring so only the InputGroup shell shows focus/error state
+* - InputGroupAddon align: inline-start, inline-end (default row, sit beside the control), block-start, block-end (full-width row above/below the control — this is what turns the group into a multi-row composer)
+* - Clicking an addon focuses the control automatically, unless the click target is a button inside it
+* - InputGroupButton sizes: xs (default), sm — plus `iconOnly` for a square icon button at that step
+*   (the old icon-xs/icon-sm values still work as deprecated aliases) — matches the group's compact height
+*
+* USAGE
+* <InputGroup>
+*   <InputGroupAddon><SearchIcon /></InputGroupAddon>
+*   <InputGroupInput placeholder="Search..." />
+* </InputGroup>
+*
+* <InputGroup>
+*   <InputGroupTextarea placeholder="Message..." />
+*   <InputGroupAddon align="block-end">
+*     <InputGroupButton size="sm" iconOnly aria-label="Send"><SendIcon /></InputGroupButton>
+*   </InputGroupAddon>
+* </InputGroup>
+*/
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
+
+//# sourceMappingURL=input-group.js.map

package/dist/components/ui/input-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.js","names":[],"sources":["../../../src/components/ui/input-group.tsx"],"sourcesContent":["/**\n * InputGroup — Input/Textarea with attached icons, affixes, or buttons.\n *\n * A composite family: InputGroup is the bordered shell; InputGroupInput /\n * InputGroupTextarea render the actual control borderless inside it;\n * InputGroupAddon positions icons/text/buttons at any edge.\n * The group's focus/error rings live on the shell (InputGroup), not the\n * inner control.\n */\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]\",\n        \"inline-end\":\n          \"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n        \"block-end\":\n          \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"flex items-center gap-2 text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\ntype InputGroupButtonSize = \"xs\" | \"sm\"\n/** @deprecated use `iconOnly` with \"xs\" | \"sm\" — same two-axis split as Button. */\ntype InputGroupButtonIconSize = \"icon-xs\" | \"icon-sm\"\nconst INPUT_GROUP_ICON_ONLY_SIZE: Record<\n  InputGroupButtonSize,\n  InputGroupButtonIconSize\n> = { xs: \"icon-xs\", sm: \"icon-sm\" }\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  iconOnly = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\"> & {\n    asChild?: boolean\n    /** Height step inside the group: \"xs\" (default) or \"sm\". Icon-only is a separate axis — `iconOnly`. */\n    size?: InputGroupButtonSize | InputGroupButtonIconSize\n    /** Square, icon-only button at the chosen `size` step (the same split Button uses). Pass `aria-label`. */\n    iconOnly?: boolean\n  }) {\n  const resolvedSize =\n    iconOnly && size in INPUT_GROUP_ICON_ONLY_SIZE\n      ? INPUT_GROUP_ICON_ONLY_SIZE[size as InputGroupButtonSize]\n      : size\n  return (\n    <Button\n      type={type}\n      data-size={resolvedSize}\n      variant={variant}\n      className={cn(\n        inputGroupButtonVariants({ size: resolvedSize }),\n        className\n      )}\n      // `size` here is InputGroupButton's own scale, never forwarded to\n      // Button (which stays at its own default), so `asChild`'s widened\n      // boolean type can't actually violate the icon-only/aria-label\n      // invariant at runtime — TS just can't prove that through a spread.\n      {...(props as React.ComponentProps<typeof Button>)}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: Omit<React.ComponentProps<\"input\">, \"size\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n\n/**\n * WHEN TO USE\n * - A search field with a leading icon\n * - A URL field with an \"https://\" prefix or a units suffix\n * - A textarea with a send button beneath it (a composer) — use `align=\"block-end\"` on the addon\n *\n * NOT WHEN\n * - A plain field with no icon/affix — use Input or Textarea directly\n * - Two or more unrelated buttons standing alone — use ButtonGroup\n *\n * KEY RULES\n * - Use InputGroupInput / InputGroupTextarea inside, not the plain Input/Textarea — they strip the inner border/ring so only the InputGroup shell shows focus/error state\n * - InputGroupAddon align: inline-start, inline-end (default row, sit beside the control), block-start, block-end (full-width row above/below the control — this is what turns the group into a multi-row composer)\n * - Clicking an addon focuses the control automatically, unless the click target is a button inside it\n * - InputGroupButton sizes: xs (default), sm — plus `iconOnly` for a square icon button at that step\n *   (the old icon-xs/icon-sm values still work as deprecated aliases) — matches the group's compact height\n *\n * USAGE\n * <InputGroup>\n *   <InputGroupAddon><SearchIcon /></InputGroupAddon>\n *   <InputGroupInput placeholder=\"Search...\" />\n * </InputGroup>\n *\n * <InputGroup>\n *   <InputGroupTextarea placeholder=\"Message...\" />\n *   <InputGroupAddon align=\"block-end\">\n *     <InputGroupButton size=\"sm\" iconOnly aria-label=\"Send\"><SendIcon /></InputGroupButton>\n *   </InputGroupAddon>\n * </InputGroup>\n */\n"],"mappings":";;;;;;;;AAkBA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,ylCACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,0BAA0B,IAC9B,2PACA;CACE,UAAU,EACR,OAAO;EACL,gBACE;EACF,cACE;EACF,eACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CACF;AAEA,SAAS,gBAAgB,EACvB,WACA,QAAQ,gBACR,GAAG,SAC0E;CAC7E,OACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,wBAAwB,EAAE,MAAM,CAAC,GAAG,SAAS;EAC3D,UAAU,MAAM;GACd,IAAK,EAAE,OAAuB,QAAQ,QAAQ,GAC5C;GAEF,EAAE,cAAc,eAAe,cAAc,OAAO,CAAC,EAAE,MAAM;EAC/D;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,2BAA2B,IAC/B,+CACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,WACE;EACF,WAAW;CACb,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAKA,IAAM,6BAGF;CAAE,IAAI;CAAW,IAAI;AAAU;AAEnC,SAAS,iBAAiB,EACxB,WACA,OAAO,UACP,UAAU,SACV,OAAO,MACP,WAAW,OACX,GAAG,SAQA;CACH,MAAM,eACJ,YAAY,QAAQ,6BAChB,2BAA2B,QAC3B;CACN,OACE,oBAAC,QAAD;EACQ;EACN,aAAW;EACF;EACT,WAAW,GACT,yBAAyB,EAAE,MAAM,aAAa,CAAC,GAC/C,SACF;EAKA,GAAK;CACN,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,oBAAC,QAAD;EACE,WAAW,GACT,0HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC2C;CAC9C,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,oLACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACgC;CACnC,OACE,oBAAC,UAAD;EACE,aAAU;EACV,WAAW,GACT,qMACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ui/input-otp.d.ts

@@ -0,0 +1,52 @@
+/**
+ * InputOTP — segmented input for entering a fixed-length one-time code.
+ *
+ * The underlying `input-otp` library (OTPInput) handles focus, paste-splitting,
+ * and caret behavior across slots; MMDS supplies the slot/group/separator
+ * visuals.
+ */
+import * as React from "react";
+import { OTPInput } from "input-otp";
+declare function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof OTPInput> & {
+    containerClassName?: string;
+}): React.JSX.Element;
+declare function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function InputOTPSlot({ index, className, ...props }: React.ComponentProps<"div"> & {
+    index: number;
+}): React.JSX.Element;
+declare function InputOTPSeparator({ ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
+/**
+ * WHEN TO USE
+ * - Entering a verification or 2FA code of a known, fixed length.
+ *
+ * NOT WHEN
+ * - General short text entry — use Input.
+ * - Passwords — use Input type="password".
+ *
+ * KEY RULES
+ * - `maxLength` on InputOTP sets the code length; render exactly one InputOTPSlot per index, 0 through maxLength - 1.
+ * - Split slots into multiple InputOTPGroup blocks with an InputOTPSeparator between them for a grouped layout (e.g. 3+3).
+ * - InputOTPSlot reads its char/caret/active state from context set by InputOTP — it must be rendered inside InputOTP, not standalone.
+ * - Pasting a full code fills all slots in one action (input-otp library behavior, not custom logic here).
+ *
+ * USAGE
+ * <InputOTP maxLength={6}>
+ *   <InputOTPGroup>
+ *     {Array.from({ length: 6 }, (_, i) => <InputOTPSlot key={i} index={i} />)}
+ *   </InputOTPGroup>
+ * </InputOTP>
+ *
+ * // Split into two groups of three
+ * <InputOTP maxLength={6}>
+ *   <InputOTPGroup>{[0, 1, 2].map((i) => <InputOTPSlot key={i} index={i} />)}</InputOTPGroup>
+ *   <InputOTPSeparator />
+ *   <InputOTPGroup>{[3, 4, 5].map((i) => <InputOTPSlot key={i} index={i} />)}</InputOTPGroup>
+ * </InputOTP>
+ *
+ * // Prefilled
+ * <InputOTP maxLength={4} defaultValue="1234">
+ *   <InputOTPGroup>{[0, 1, 2, 3].map((i) => <InputOTPSlot key={i} index={i} />)}</InputOTPGroup>
+ * </InputOTP>
+ */
+//# sourceMappingURL=input-otp.d.ts.map

package/dist/components/ui/input-otp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input-otp.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAmB,MAAM,WAAW,CAAA;AAKrD,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IACzC,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,qBAaA;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW1E;AAED,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;CACd,qBAsBA;AAED,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWnE;AAED,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAA;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG"}

package/dist/components/ui/input-otp.js

@@ -0,0 +1,89 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { MinusIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OTPInput, OTPInputContext } from "input-otp";
+//#region src/components/ui/input-otp.tsx
+/**
+* InputOTP — segmented input for entering a fixed-length one-time code.
+*
+* The underlying `input-otp` library (OTPInput) handles focus, paste-splitting,
+* and caret behavior across slots; MMDS supplies the slot/group/separator
+* visuals.
+*/
+function InputOTP({ className, containerClassName, ...props }) {
+	return /* @__PURE__ */ jsx(OTPInput, {
+		"data-slot": "input-otp",
+		containerClassName: cn("cn-input-otp flex items-center has-disabled:opacity-50", containerClassName),
+		spellCheck: false,
+		className: cn("disabled:cursor-not-allowed", className),
+		...props
+	});
+}
+function InputOTPGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-group",
+		className: cn("flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40", className),
+		...props
+	});
+}
+function InputOTPSlot({ index, className, ...props }) {
+	const { char, hasFakeCaret, isActive } = React.useContext(OTPInputContext)?.slots[index] ?? {};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "input-otp-slot",
+		"data-active": isActive,
+		className: cn("relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-colors outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40", className),
+		...props,
+		children: [char, hasFakeCaret && /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+			children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" })
+		})]
+	});
+}
+function InputOTPSeparator({ ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-separator",
+		className: "flex items-center [&_svg:not([class*='size-'])]:size-4",
+		role: "separator",
+		...props,
+		children: /* @__PURE__ */ jsx(MinusIcon, {})
+	});
+}
+/**
+* WHEN TO USE
+* - Entering a verification or 2FA code of a known, fixed length.
+*
+* NOT WHEN
+* - General short text entry — use Input.
+* - Passwords — use Input type="password".
+*
+* KEY RULES
+* - `maxLength` on InputOTP sets the code length; render exactly one InputOTPSlot per index, 0 through maxLength - 1.
+* - Split slots into multiple InputOTPGroup blocks with an InputOTPSeparator between them for a grouped layout (e.g. 3+3).
+* - InputOTPSlot reads its char/caret/active state from context set by InputOTP — it must be rendered inside InputOTP, not standalone.
+* - Pasting a full code fills all slots in one action (input-otp library behavior, not custom logic here).
+*
+* USAGE
+* <InputOTP maxLength={6}>
+*   <InputOTPGroup>
+*     {Array.from({ length: 6 }, (_, i) => <InputOTPSlot key={i} index={i} />)}
+*   </InputOTPGroup>
+* </InputOTP>
+*
+* // Split into two groups of three
+* <InputOTP maxLength={6}>
+*   <InputOTPGroup>{[0, 1, 2].map((i) => <InputOTPSlot key={i} index={i} />)}</InputOTPGroup>
+*   <InputOTPSeparator />
+*   <InputOTPGroup>{[3, 4, 5].map((i) => <InputOTPSlot key={i} index={i} />)}</InputOTPGroup>
+* </InputOTP>
+*
+* // Prefilled
+* <InputOTP maxLength={4} defaultValue="1234">
+*   <InputOTPGroup>{[0, 1, 2, 3].map((i) => <InputOTPSlot key={i} index={i} />)}</InputOTPGroup>
+* </InputOTP>
+*/
+//#endregion
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
+
+//# sourceMappingURL=input-otp.js.map

package/dist/components/ui/input-otp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp.js","names":[],"sources":["../../../src/components/ui/input-otp.tsx"],"sourcesContent":["\"use client\"\n\n/**\n * InputOTP — segmented input for entering a fixed-length one-time code.\n *\n * The underlying `input-otp` library (OTPInput) handles focus, paste-splitting,\n * and caret behavior across slots; MMDS supplies the slot/group/separator\n * visuals.\n */\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/lib/utils\"\nimport { MinusIcon } from \"lucide-react\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\n        \"flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-colors outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"flex items-center [&_svg:not([class*='size-'])]:size-4\"\n      role=\"separator\"\n      {...props}\n    >\n      <MinusIcon />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n\n/**\n * WHEN TO USE\n * - Entering a verification or 2FA code of a known, fixed length.\n *\n * NOT WHEN\n * - General short text entry — use Input.\n * - Passwords — use Input type=\"password\".\n *\n * KEY RULES\n * - `maxLength` on InputOTP sets the code length; render exactly one InputOTPSlot per index, 0 through maxLength - 1.\n * - Split slots into multiple InputOTPGroup blocks with an InputOTPSeparator between them for a grouped layout (e.g. 3+3).\n * - InputOTPSlot reads its char/caret/active state from context set by InputOTP — it must be rendered inside InputOTP, not standalone.\n * - Pasting a full code fills all slots in one action (input-otp library behavior, not custom logic here).\n *\n * USAGE\n * <InputOTP maxLength={6}>\n *   <InputOTPGroup>\n *     {Array.from({ length: 6 }, (_, i) => <InputOTPSlot key={i} index={i} />)}\n *   </InputOTPGroup>\n * </InputOTP>\n *\n * // Split into two groups of three\n * <InputOTP maxLength={6}>\n *   <InputOTPGroup>{[0, 1, 2].map((i) => <InputOTPSlot key={i} index={i} />)}</InputOTPGroup>\n *   <InputOTPSeparator />\n *   <InputOTPGroup>{[3, 4, 5].map((i) => <InputOTPSlot key={i} index={i} />)}</InputOTPGroup>\n * </InputOTP>\n *\n * // Prefilled\n * <InputOTP maxLength={4} defaultValue=\"1234\">\n *   <InputOTPGroup>{[0, 1, 2, 3].map((i) => <InputOTPSlot key={i} index={i} />)}</InputOTPGroup>\n * </InputOTP>\n */\n"],"mappings":";;;;;;;;;;;;;;AAgBA,SAAS,SAAS,EAChB,WACA,oBACA,GAAG,SAGF;CACD,OACE,oBAAC,UAAD;EACE,aAAU;EACV,oBAAoB,GAClB,0DACA,kBACF;EACA,YAAY;EACZ,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,2KACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EACpB,OACA,WACA,GAAG,SAGF;CAED,MAAM,EAAE,MAAM,cAAc,aADJ,MAAM,WAAW,eACA,CAAA,EAAiB,MAAM,UAAU,CAAC;CAE3E,OACE,qBAAC,OAAD;EACE,aAAU;EACV,eAAa;EACb,WAAW,GACT,gfACA,SACF;EACA,GAAI;EAPN,UAAA,CASG,MACA,gBACC,oBAAC,OAAD;GAAK,WAAU;GACb,UAAA,oBAAC,OAAD,EAAK,WAAU,2DAA4D,CAAA;EACxE,CAAA,CAEJ;;AAET;AAEA,SAAS,kBAAkB,EAAE,GAAG,SAAsC;CACpE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAU;EACV,MAAK;EACL,GAAI;EAEJ,UAAA,oBAAC,WAAD,CAAY,CAAA;CACT,CAAA;AAET"}

package/dist/components/ui/input.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Input — single-line text field.
+ *
+ * A plain native `<input>` with MMDS border/focus/error styling. Error state
+ * is driven purely off `aria-invalid`
+ * (no separate `error` prop), there is no built-in icon/affix slot, and a
+ * `size` prop ("default" | "sm" | "xs") matching Select/Combobox/NativeSelect's
+ * own height/radius steps — default and sm share text size, only xs drops it.
+ * Omits the native `size` (character-width) attribute `<input>` normally has,
+ * same as ComboboxInput does, since that name is repurposed for this instead.
+ */
+import * as React from "react";
+declare function Input({ className, type, size, ...props }: Omit<React.ComponentProps<"input">, "size"> & {
+    size?: "default" | "sm" | "xs";
+}): React.JSX.Element;
+export { Input };
+/**
+ * WHEN TO USE
+ * - Short free text: names, emails, search queries, numeric values
+ * - Any native `type` (text, email, password, number, file, ...) — styling is type-agnostic
+ *
+ * NOT WHEN
+ * - Multi-line content — use Textarea
+ * - A fixed set of choices — use Select or Combobox
+ * - Needs a leading/trailing icon, prefix, or attached button — wrap in InputGroup instead of adding children here (Input renders no slots of its own)
+ *
+ * KEY RULES
+ * - Error state is driven entirely by `aria-invalid` — there is no `error` prop
+ * - Always pair with a Label (via htmlFor) or wrap in Field for validation messaging
+ * - size: default | sm | xs (default "default") — same height/radius steps as
+ *   Select/Combobox/NativeSelect, so they line up in the same form row. default
+ *   and sm share text size; xs also drops to text-xs.
+ * - An AI-filled value is a plain composition, not a dedicated prop, and the same shape as
+ *   Textarea's: put `AILabel` in the label row as a sibling of FieldLabel — never inside the
+ *   input box (via InputGroupAddon) where it reads as part of the value, and never inside the
+ *   label (AILabelTrigger is a button). The Input itself stays plain: no `shadow-ai-glow` or
+ *   gradient border — that boundary glow is reserved for card-like AI surfaces (Card, Dialog),
+ *   never form controls, where it fights the field's own focus/invalid rings. Pass AILabel
+ *   `edited={value !== aiValue}` and an `onRevert` that restores it, so once the user edits the
+ *   marker becomes a ghost undo button (AILabel's own override/undo morph). See AI/Input.
+ *
+ * USAGE
+ * <Input placeholder="Email" type="email" />
+ * <Input aria-invalid defaultValue="not-an-email" />
+ * <Input size="sm" placeholder="Compact row" />
+ */
+//# sourceMappingURL=input.d.ts.map

package/dist/components/ui/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,IAAI,EACJ,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IAC/C,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;CAC/B,qBAmBA;AAED,OAAO,EAAE,KAAK,EAAE,CAAA;AAEhB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG"}

package/dist/components/ui/input.js

@@ -0,0 +1,47 @@
+import { cn } from "../../lib/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/input.tsx
+function Input({ className, type, size = "default", ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		type,
+		"data-slot": "input",
+		"data-size": size,
+		className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", "data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md,0.375rem),10px)] data-[size=xs]:h-6 data-[size=xs]:px-2 data-[size=xs]:text-xs data-[size=xs]:md:text-xs data-[size=xs]:rounded-[min(var(--radius-md,0.375rem),8px)]", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Short free text: names, emails, search queries, numeric values
+* - Any native `type` (text, email, password, number, file, ...) — styling is type-agnostic
+*
+* NOT WHEN
+* - Multi-line content — use Textarea
+* - A fixed set of choices — use Select or Combobox
+* - Needs a leading/trailing icon, prefix, or attached button — wrap in InputGroup instead of adding children here (Input renders no slots of its own)
+*
+* KEY RULES
+* - Error state is driven entirely by `aria-invalid` — there is no `error` prop
+* - Always pair with a Label (via htmlFor) or wrap in Field for validation messaging
+* - size: default | sm | xs (default "default") — same height/radius steps as
+*   Select/Combobox/NativeSelect, so they line up in the same form row. default
+*   and sm share text size; xs also drops to text-xs.
+* - An AI-filled value is a plain composition, not a dedicated prop, and the same shape as
+*   Textarea's: put `AILabel` in the label row as a sibling of FieldLabel — never inside the
+*   input box (via InputGroupAddon) where it reads as part of the value, and never inside the
+*   label (AILabelTrigger is a button). The Input itself stays plain: no `shadow-ai-glow` or
+*   gradient border — that boundary glow is reserved for card-like AI surfaces (Card, Dialog),
+*   never form controls, where it fights the field's own focus/invalid rings. Pass AILabel
+*   `edited={value !== aiValue}` and an `onRevert` that restores it, so once the user edits the
+*   marker becomes a ghost undo button (AILabel's own override/undo morph). See AI/Input.
+*
+* USAGE
+* <Input placeholder="Email" type="email" />
+* <Input aria-invalid defaultValue="not-an-email" />
+* <Input size="sm" placeholder="Compact row" />
+*/
+//#endregion
+export { Input };
+
+//# sourceMappingURL=input.js.map

package/dist/components/ui/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":[],"sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["/**\n * Input — single-line text field.\n *\n * A plain native `<input>` with MMDS border/focus/error styling. Error state\n * is driven purely off `aria-invalid`\n * (no separate `error` prop), there is no built-in icon/affix slot, and a\n * `size` prop (\"default\" | \"sm\" | \"xs\") matching Select/Combobox/NativeSelect's\n * own height/radius steps — default and sm share text size, only xs drops it.\n * Omits the native `size` (character-width) attribute `<input>` normally has,\n * same as ComboboxInput does, since that name is repurposed for this instead.\n */\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({\n  className,\n  type,\n  size = \"default\",\n  ...props\n}: Omit<React.ComponentProps<\"input\">, \"size\"> & {\n  size?: \"default\" | \"sm\" | \"xs\"\n}) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      data-size={size}\n      className={cn(\n        \"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        // Same height/radius steps as Select/Combobox at matching sizes, so\n        // an Input and a Select in the same form row line up. xs also drops\n        // text size at every viewport (both the mobile text-base and the\n        // md:text-sm above) — sm keeps the default text, only height/radius\n        // tighten, same as Select's own sm step.\n        \"data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md,0.375rem),10px)] data-[size=xs]:h-6 data-[size=xs]:px-2 data-[size=xs]:text-xs data-[size=xs]:md:text-xs data-[size=xs]:rounded-[min(var(--radius-md,0.375rem),8px)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n\n/**\n * WHEN TO USE\n * - Short free text: names, emails, search queries, numeric values\n * - Any native `type` (text, email, password, number, file, ...) — styling is type-agnostic\n *\n * NOT WHEN\n * - Multi-line content — use Textarea\n * - A fixed set of choices — use Select or Combobox\n * - Needs a leading/trailing icon, prefix, or attached button — wrap in InputGroup instead of adding children here (Input renders no slots of its own)\n *\n * KEY RULES\n * - Error state is driven entirely by `aria-invalid` — there is no `error` prop\n * - Always pair with a Label (via htmlFor) or wrap in Field for validation messaging\n * - size: default | sm | xs (default \"default\") — same height/radius steps as\n *   Select/Combobox/NativeSelect, so they line up in the same form row. default\n *   and sm share text size; xs also drops to text-xs.\n * - An AI-filled value is a plain composition, not a dedicated prop, and the same shape as\n *   Textarea's: put `AILabel` in the label row as a sibling of FieldLabel — never inside the\n *   input box (via InputGroupAddon) where it reads as part of the value, and never inside the\n *   label (AILabelTrigger is a button). The Input itself stays plain: no `shadow-ai-glow` or\n *   gradient border — that boundary glow is reserved for card-like AI surfaces (Card, Dialog),\n *   never form controls, where it fights the field's own focus/invalid rings. Pass AILabel\n *   `edited={value !== aiValue}` and an `onRevert` that restores it, so once the user edits the\n *   marker becomes a ghost undo button (AILabel's own override/undo morph). See AI/Input.\n *\n * USAGE\n * <Input placeholder=\"Email\" type=\"email\" />\n * <Input aria-invalid defaultValue=\"not-an-email\" />\n * <Input size=\"sm\" placeholder=\"Compact row\" />\n */\n"],"mappings":";;;;AAgBA,SAAS,MAAM,EACb,WACA,MACA,OAAO,WACP,GAAG,SAGF;CACD,OACE,oBAAC,SAAD;EACQ;EACN,aAAU;EACV,aAAW;EACX,WAAW,GACT,+oBAMA,uOACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ui/item.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Item — row for an entity in a list: media, text, and actions.
+ *
+ * cva-driven `div` (or `Slot` via `asChild`), no external primitive.
+ * `ItemMedia` has `default` | `icon` | `image` variants only — there is no
+ * separate `avatar` variant, so an `<Avatar>` goes in a plain (`default`)
+ * `ItemMedia`.
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Separator } from "../../components/ui/separator";
+declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
+declare const itemVariants: (props?: ({
+    variant?: "default" | "outline" | "muted" | null | undefined;
+    size?: "sm" | "default" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Item({ className, variant, size, asChild, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare const itemMediaVariants: (props?: ({
+    variant?: "image" | "default" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): React.JSX.Element;
+declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function ItemActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, };
+/**
+ * WHEN TO USE
+ * - An entity list where each row has media, text, and actions — settings
+ *   rows, search results, member lists, file/folder rows.
+ *
+ * NOT WHEN
+ * - Columnar data that needs alignment across rows — use Table.
+ * - A single grouped panel of content — use Card.
+ * - The row is a form control (checkbox, input, radio, select) — use Field.
+ *
+ * KEY RULES
+ * - Three sizes (default, sm, xs) and three variants (default, outline,
+ *   muted) — `xs` is dense enough to use inside a dropdown-menu content
+ *   area with zero padding.
+ * - `ItemMedia variant="icon"` auto-sizes any un-sized svg to `size-4`;
+ *   `variant="image"` clips to a rounded square that shrinks with `size`.
+ * - `ItemGroup` sets `role="list"` and controls row gap by size — use it
+ *   (not a plain `div`) whenever stacking more than one Item. Item only sets
+ *   `role="listitem"` on itself when actually rendered inside an ItemGroup
+ *   (detected via context) — a standalone Item outside any group stays role-less,
+ *   since a bare `listitem` with no `list` ancestor is its own ARIA violation.
+ * - `ItemSeparator` is Separator pre-styled with `my-2` — use it between
+ *   rows in a group instead of a raw `<Separator />`.
+ *
+ * USAGE
+ * <Item>
+ *   <ItemMedia variant="icon"><FolderIcon /></ItemMedia>
+ *   <ItemContent>
+ *     <ItemTitle>Design tokens</ItemTitle>
+ *     <ItemDescription>Colors, radius and typography.</ItemDescription>
+ *   </ItemContent>
+ *   <ItemActions>
+ *     <Button variant="ghost" size="sm" iconOnly aria-label="Open"><ChevronRightIcon /></Button>
+ *   </ItemActions>
+ * </Item>
+ *
+ * <ItemGroup className="rounded-xl border">
+ *   <Item>...</Item>
+ *   <ItemSeparator />
+ *   <Item>...</Item>
+ * </ItemGroup>
+ */
+//# sourceMappingURL=item.d.ts.map

package/dist/components/ui/item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/components/ui/item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAIrD,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBActE;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,qBASxC;AAED,QAAA,MAAM,YAAY;;;8EAoBjB,CAAA;AAED,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAC5B,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,qBAa1D;AAED,QAAA,MAAM,iBAAiB;;8EAetB,CAAA;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,qBAStE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWtE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAW1E;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,OAAO,EACL,IAAI,EACJ,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,aAAa,EACb,SAAS,EACT,eAAe,EACf,UAAU,EACV,UAAU,GACX,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG"}