@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/tabs.js

@@ -0,0 +1,128 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import "react";
+import { Tabs as Tabs$1 } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/tabs.tsx
+function Tabs({ className, orientation = "horizontal", ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Root, {
+		"data-slot": "tabs",
+		"data-orientation": orientation,
+		className: cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className),
+		...props
+	});
+}
+var tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none", {
+	variants: {
+		variant: {
+			default: "bg-secondary",
+			line: "gap-1 bg-transparent"
+		},
+		size: {
+			default: "group-data-[orientation=horizontal]/tabs:h-8",
+			sm: "group-data-[orientation=horizontal]/tabs:h-7"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function TabsList({ className, variant = "default", size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1.List, {
+		"data-slot": "tabs-list",
+		"data-variant": variant,
+		"data-size": size,
+		className: cn(tabsListVariants({
+			variant,
+			size
+		}), className),
+		...props
+	});
+}
+function TabsTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Trigger, {
+		"data-slot": "tabs-trigger",
+		className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-muted-foreground transition-colors group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[size=sm]/tabs-list:gap-1 group-data-[size=sm]/tabs-list:px-1 group-data-[size=sm]/tabs-list:text-xs", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:text-primary dark:group-data-[variant=line]/tabs-list:data-[state=active]:hover:text-primary-hover", "group-data-[variant=line]/tabs-list:hover:after:bg-muted-foreground group-data-[variant=line]/tabs-list:hover:after:opacity-100 group-data-[variant=line]/tabs-list:data-[state=active]:hover:after:bg-primary-hover dark:group-data-[variant=line]/tabs-list:data-[state=active]:hover:after:bg-primary-hover", "group-data-[variant=default]/tabs-list:hover:bg-muted group-data-[variant=default]/tabs-list:hover:text-foreground dark:group-data-[variant=default]/tabs-list:hover:text-foreground group-data-[variant=default]/tabs-list:data-[state=active]:hover:bg-primary/10 group-data-[variant=default]/tabs-list:data-[state=active]:hover:text-primary-hover", "data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=active]:hover:text-primary-hover dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground", "after:absolute after:bg-primary after:opacity-0 after:transition group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100", className),
+		...props
+	});
+}
+function TabsContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Content, {
+		"data-slot": "tabs-content",
+		className: cn("flex-1 text-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Switching between 2–6 named views of the same entity (e.g. a record's
+*   Overview / History / Notes)
+* - orientation="vertical" for a side-by-side settings-style layout
+*
+* NOT WHEN
+* - Top-level app navigation — use NavigationMenu
+* - An ordered sequence where each step has its own pending/done state —
+*   use Stepper, which is Tabs plus a step-circle icon
+* - A one-question-at-a-time form flow with its own Previous/Next/Submit —
+*   use Questionnaire
+* - Showing hierarchical position — use Breadcrumb
+*
+* KEY RULES
+* - TabsList variant: "default" (transparent track, default) | "line"
+*   (underline, also transparent) — set once on TabsList, not per trigger
+* - Both variants read the active tab as primary, not neutral: "default" gets a
+*   subtle bg-primary/10 fill + text-primary (translucent, so it blends on any
+*   surface with no per-container overrides needed); "line" gets text-primary
+*   plus a bg-primary underline, no fill (there's no track to fill)
+* - Hover, inactive tab: "default" gets a bg-muted fill + darker text; "line"
+*   doesn't change text at all — it reveals a bg-border underline instead,
+*   a plain hover affordance, not a color change
+* - Hover, active tab: "default"'s fill doesn't change, only its text darkens
+*   to text-primary-hover; "line" darkens BOTH its text and its underline to
+*   text-primary-hover/bg-primary-hover — hovering the current tab still
+*   reads as "this one, more so," not a neutral hover state
+* - A leading icon on a trigger uses the same `data-icon="inline-start"` slot
+*   convention as Button/Toggle/SelectTrigger — no separate icon prop; the
+*   trigger's own padding adjusts automatically once that attribute is present
+* - Individual TabsTrigger can be `disabled`
+* - orientation defaults to "horizontal"; vertical stacks TabsList in a column
+* - TabsList size: "default" (h-8 track, text-sm triggers) | "sm" (h-7,
+*   text-xs, tighter gap/padding) — same default/sm vocabulary as Button/
+*   Item/Attachment/Select, not Tabs-specific naming. Set once on TabsList;
+*   TabsTrigger reacts to it automatically.
+* - A count next to a label (e.g. "Inbox 12") is a plain `Badge` child, same
+*   `gap-1.5` slot the leading-icon convention above already uses — no
+*   dedicated count prop. Badge's own static color reads fine against both
+*   the active and inactive tab state as-is.
+*
+* USAGE
+* <Tabs defaultValue="overview">
+*   <TabsList>
+*     <TabsTrigger value="overview">Overview</TabsTrigger>
+*     <TabsTrigger value="history">History</TabsTrigger>
+*   </TabsList>
+*   <TabsContent value="overview">...</TabsContent>
+*   <TabsContent value="history">...</TabsContent>
+* </Tabs>
+*
+* <TabsList size="sm">
+*   <TabsTrigger value="a">A</TabsTrigger>
+*   <TabsTrigger value="b">B</TabsTrigger>
+* </TabsList>
+*
+* <TabsList variant="line">
+*   <TabsTrigger value="a">A</TabsTrigger>
+*   <TabsTrigger value="b" disabled>B</TabsTrigger>
+* </TabsList>
+*
+* <TabsTrigger value="overview">
+*   <LayoutGridIcon data-icon="inline-start" />
+*   Overview
+* </TabsTrigger>
+*/
+//#endregion
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };
+
+//# sourceMappingURL=tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":[],"sources":["../../../src/components/ui/tabs.tsx"],"sourcesContent":["\"use client\"\n\n/**\n * Tabs — switches between panels of the same content area.\n *\n * Radix Tabs primitive with two TabsList visual variants: \"default\" (pill\n * background, active tab gets a raised background) and \"line\" (transparent\n * background, active tab gets an underline).\n */\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-[orientation=horizontal]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-secondary\",\n        line: \"gap-1 bg-transparent\",\n      },\n      size: {\n        default: \"group-data-[orientation=horizontal]/tabs:h-8\",\n        sm: \"group-data-[orientation=horizontal]/tabs:h-7\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> &\n  VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(tabsListVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-muted-foreground transition-colors group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[size=sm]/tabs-list:gap-1 group-data-[size=sm]/tabs-list:px-1 group-data-[size=sm]/tabs-list:text-xs\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:text-primary dark:group-data-[variant=line]/tabs-list:data-[state=active]:hover:text-primary-hover\",\n        \"group-data-[variant=line]/tabs-list:hover:after:bg-muted-foreground group-data-[variant=line]/tabs-list:hover:after:opacity-100 group-data-[variant=line]/tabs-list:data-[state=active]:hover:after:bg-primary-hover dark:group-data-[variant=line]/tabs-list:data-[state=active]:hover:after:bg-primary-hover\",\n        \"group-data-[variant=default]/tabs-list:hover:bg-muted group-data-[variant=default]/tabs-list:hover:text-foreground dark:group-data-[variant=default]/tabs-list:hover:text-foreground group-data-[variant=default]/tabs-list:data-[state=active]:hover:bg-primary/10 group-data-[variant=default]/tabs-list:data-[state=active]:hover:text-primary-hover\",\n        \"data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=active]:hover:text-primary-hover dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground\",\n        \"after:absolute after:bg-primary after:opacity-0 after:transition group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\n        \"flex-1 text-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n\n/**\n * WHEN TO USE\n * - Switching between 2–6 named views of the same entity (e.g. a record's\n *   Overview / History / Notes)\n * - orientation=\"vertical\" for a side-by-side settings-style layout\n *\n * NOT WHEN\n * - Top-level app navigation — use NavigationMenu\n * - An ordered sequence where each step has its own pending/done state —\n *   use Stepper, which is Tabs plus a step-circle icon\n * - A one-question-at-a-time form flow with its own Previous/Next/Submit —\n *   use Questionnaire\n * - Showing hierarchical position — use Breadcrumb\n *\n * KEY RULES\n * - TabsList variant: \"default\" (transparent track, default) | \"line\"\n *   (underline, also transparent) — set once on TabsList, not per trigger\n * - Both variants read the active tab as primary, not neutral: \"default\" gets a\n *   subtle bg-primary/10 fill + text-primary (translucent, so it blends on any\n *   surface with no per-container overrides needed); \"line\" gets text-primary\n *   plus a bg-primary underline, no fill (there's no track to fill)\n * - Hover, inactive tab: \"default\" gets a bg-muted fill + darker text; \"line\"\n *   doesn't change text at all — it reveals a bg-border underline instead,\n *   a plain hover affordance, not a color change\n * - Hover, active tab: \"default\"'s fill doesn't change, only its text darkens\n *   to text-primary-hover; \"line\" darkens BOTH its text and its underline to\n *   text-primary-hover/bg-primary-hover — hovering the current tab still\n *   reads as \"this one, more so,\" not a neutral hover state\n * - A leading icon on a trigger uses the same `data-icon=\"inline-start\"` slot\n *   convention as Button/Toggle/SelectTrigger — no separate icon prop; the\n *   trigger's own padding adjusts automatically once that attribute is present\n * - Individual TabsTrigger can be `disabled`\n * - orientation defaults to \"horizontal\"; vertical stacks TabsList in a column\n * - TabsList size: \"default\" (h-8 track, text-sm triggers) | \"sm\" (h-7,\n *   text-xs, tighter gap/padding) — same default/sm vocabulary as Button/\n *   Item/Attachment/Select, not Tabs-specific naming. Set once on TabsList;\n *   TabsTrigger reacts to it automatically.\n * - A count next to a label (e.g. \"Inbox 12\") is a plain `Badge` child, same\n *   `gap-1.5` slot the leading-icon convention above already uses — no\n *   dedicated count prop. Badge's own static color reads fine against both\n *   the active and inactive tab state as-is.\n *\n * USAGE\n * <Tabs defaultValue=\"overview\">\n *   <TabsList>\n *     <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n *     <TabsTrigger value=\"history\">History</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"overview\">...</TabsContent>\n *   <TabsContent value=\"history\">...</TabsContent>\n * </Tabs>\n *\n * <TabsList size=\"sm\">\n *   <TabsTrigger value=\"a\">A</TabsTrigger>\n *   <TabsTrigger value=\"b\">B</TabsTrigger>\n * </TabsList>\n *\n * <TabsList variant=\"line\">\n *   <TabsTrigger value=\"a\">A</TabsTrigger>\n *   <TabsTrigger value=\"b\" disabled>B</TabsTrigger>\n * </TabsList>\n *\n * <TabsTrigger value=\"overview\">\n *   <LayoutGridIcon data-icon=\"inline-start\" />\n *   Overview\n * </TabsTrigger>\n */\n"],"mappings":";;;;;;;AAgBA,SAAS,KAAK,EACZ,WACA,cAAc,cACd,GAAG,SAC+C;CAClD,OACE,oBAAC,OAAc,MAAf;EACE,aAAU;EACV,oBAAkB;EAClB,WAAW,GACT,gEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,mBAAmB,IACvB,wOACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,MAAM;EACR;EACA,MAAM;GACJ,SAAS;GACT,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAEA,SAAS,SAAS,EAChB,WACA,UAAU,WACV,OAAO,WACP,GAAG,SAEoC;CACvC,OACE,oBAAC,OAAc,MAAf;EACE,aAAU;EACV,gBAAc;EACd,aAAW;EACX,WAAW,GAAG,iBAAiB;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAAC,OAAc,SAAf;EACE,aAAU;EACV,WAAW,GACT,goBACA,mHACA,ybACA,kTACA,2VACA,uOACA,ydACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAAC,OAAc,SAAf;EACE,aAAU;EACV,WAAW,GACT,sIACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,35 @@
+/**
+ * Textarea — multi-line text field.
+ *
+ * A plain native `<textarea>` with MMDS border/focus/error styling.
+ * Height auto-grows to content (`field-sizing-content`, min-h-16) instead of
+ * a fixed rows count, and error state is driven off `aria-invalid` rather
+ * than a prop.
+ */
+import * as React from "react";
+declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+export { Textarea };
+/**
+ * WHEN TO USE
+ * - Notes, descriptions, messages — any free text that can span multiple lines
+ *
+ * NOT WHEN
+ * - A short single-line value — use Input
+ * - Rich text or markdown editing — Textarea is plain text only
+ *
+ * KEY RULES
+ * - Height grows with content (`field-sizing-content`); min-height is 4rem, no fixed `rows` styling
+ * - Error state is driven entirely by `aria-invalid` — there is no `error` prop
+ * - An AI-drafted value is a plain composition, not a dedicated prop, and the same shape as
+ *   Input's: put `AILabel` in the label row as a sibling of FieldLabel (never inside it —
+ *   AILabelTrigger is a button). The Textarea 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 !== draft}` 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/Textarea.
+ *
+ * USAGE
+ * <Textarea placeholder="Add a description..." />
+ * <Textarea aria-invalid defaultValue="..." />
+ */
+//# sourceMappingURL=textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/ui/textarea.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,qBAW1E;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA;AAEnB;;;;;;;;;;;;;;;;;;;;;;GAsBG"}

package/dist/components/ui/textarea.js

@@ -0,0 +1,38 @@
+import { cn } from "../../lib/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/textarea.tsx
+function Textarea({ className, ...props }) {
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "textarea",
+		className: cn("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 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", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Notes, descriptions, messages — any free text that can span multiple lines
+*
+* NOT WHEN
+* - A short single-line value — use Input
+* - Rich text or markdown editing — Textarea is plain text only
+*
+* KEY RULES
+* - Height grows with content (`field-sizing-content`); min-height is 4rem, no fixed `rows` styling
+* - Error state is driven entirely by `aria-invalid` — there is no `error` prop
+* - An AI-drafted value is a plain composition, not a dedicated prop, and the same shape as
+*   Input's: put `AILabel` in the label row as a sibling of FieldLabel (never inside it —
+*   AILabelTrigger is a button). The Textarea 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 !== draft}` 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/Textarea.
+*
+* USAGE
+* <Textarea placeholder="Add a description..." />
+* <Textarea aria-invalid defaultValue="..." />
+*/
+//#endregion
+export { Textarea };
+
+//# sourceMappingURL=textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","names":[],"sources":["../../../src/components/ui/textarea.tsx"],"sourcesContent":["/**\n * Textarea — multi-line text field.\n *\n * A plain native `<textarea>` with MMDS border/focus/error styling.\n * Height auto-grows to content (`field-sizing-content`, min-h-16) instead of\n * a fixed rows count, and error state is driven off `aria-invalid` rather\n * than a prop.\n */\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 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        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n\n/**\n * WHEN TO USE\n * - Notes, descriptions, messages — any free text that can span multiple lines\n *\n * NOT WHEN\n * - A short single-line value — use Input\n * - Rich text or markdown editing — Textarea is plain text only\n *\n * KEY RULES\n * - Height grows with content (`field-sizing-content`); min-height is 4rem, no fixed `rows` styling\n * - Error state is driven entirely by `aria-invalid` — there is no `error` prop\n * - An AI-drafted value is a plain composition, not a dedicated prop, and the same shape as\n *   Input's: put `AILabel` in the label row as a sibling of FieldLabel (never inside it —\n *   AILabelTrigger is a button). The Textarea 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 !== draft}` 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/Textarea.\n *\n * USAGE\n * <Textarea placeholder=\"Add a description...\" />\n * <Textarea aria-invalid defaultValue=\"...\" />\n */\n"],"mappings":";;;;AAaA,SAAS,SAAS,EAAE,WAAW,GAAG,SAA2C;CAC3E,OACE,oBAAC,YAAD;EACE,aAAU;EACV,WAAW,GACT,0hBACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ui/time-picker.d.ts

@@ -0,0 +1,58 @@
+/**
+ * TimePicker — masked text input for typing a 12-hour time (HH:MM AM/PM).
+ *
+ * Not a native `<input type="time">` (that renders OS/browser chrome, not
+ * a plain masked text field) and not a dropdown/list picker (compose
+ * Select or Combobox for that shape instead) — this is purely a typing
+ * experience, driven entirely through onKeyDown (not onChange) so the
+ * displayed value can never drift out of sync with what was actually
+ * typed.
+ *
+ * The mask is always fully visible — "--:-- AM" from the very first
+ * render, never a placeholder that vanishes on the first keystroke. Each
+ * digit replaces one "-" in place; the meridiem always shows a real
+ * "AM"/"PM" (defaults "AM" on mount), and its "M" never changes — only the
+ * leading "A"/"P" toggles. Uncontrolled only: `defaultValue` seeds it,
+ * `onValueChange` notifies of every change, there is no `value` prop.
+ */
+import * as React from "react";
+import { Input } from "../../components/ui/input";
+declare function TimePicker({ defaultValue, onValueChange, className, ...props }: Omit<React.ComponentProps<typeof Input>, "value" | "defaultValue" | "onChange" | "type"> & {
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}): React.JSX.Element;
+export { TimePicker };
+/**
+ * WHEN TO USE
+ * - Typing a time directly is faster than scrolling/clicking through a list — appointment
+ *   forms, scheduling fields, anywhere the exact time is usually already known.
+ *
+ * NOT WHEN
+ * - Picking from a fixed set of bookable slots (e.g. every 15 minutes) — compose Select or
+ *   Combobox with those options instead; this component has no dropdown at all.
+ * - Full date + time together — pair this with Calendar inside the same Popover; see Calendar's
+ *   doc comment for the date-picker composition pattern.
+ *
+ * KEY RULES
+ * - Uncontrolled only — `defaultValue` seeds it, `onValueChange` fires on every change. There is
+ *   no `value` prop; this component owns its own text the same way a plain `<input>` would.
+ * - `onValueChange` reports exactly what's on screen, mask characters included (e.g. "09:-- AM"
+ *   while the minute is still unfilled) — check for "-" to know whether entry is complete.
+ * - The mask never disappears: it's the value itself, not a `placeholder` (which only shows on an
+ *   empty value — this input is never actually empty). Each keystroke replaces one "-" in place.
+ * - The meridiem always shows a real "AM"/"PM" (starts "AM") — "a"/"p" toggles it at any time,
+ *   independent of how much of the hour/minute has been typed; there's nothing to erase there.
+ *   A trailing AM/PM button mirrors this toggle for touch/virtual-keyboard users, since
+ *   `inputMode="numeric"` hides letter keys on those keyboards.
+ * - Digits fill hour then minute, each clamped live (hour rejects >12 or "00", minute rejects
+ *   >59). Backspace removes the most recently-typed digit (minute first, then hour). Pasting a
+ *   full time string (masked or clean) is also handled.
+ * - Error state is driven entirely by `aria-invalid` (spreads through to Input) — there is no
+ *   separate `error` prop, consistent with every other input in this library.
+ * - This wraps Input purely for the visual shell — don't reach for Input directly and rebuild
+ *   this masking logic; that's the one thing this component exists to own.
+ *
+ * USAGE
+ * <TimePicker defaultValue="09:30 AM" onValueChange={(value) => console.log(value)} />
+ */
+//# sourceMappingURL=time-picker.d.ts.map

package/dist/components/ui/time-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../../../src/components/ui/time-picker.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AA0D7C,iBAAS,UAAU,CAAC,EAClB,YAAY,EACZ,aAAa,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CACL,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAClC,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,MAAM,CAC/C,GAAG;IACF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC,qBAyGA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA;AAErB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG"}

package/dist/components/ui/time-picker.js

@@ -0,0 +1,188 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ui/time-picker.tsx
+/**
+* TimePicker — masked text input for typing a 12-hour time (HH:MM AM/PM).
+*
+* Not a native `<input type="time">` (that renders OS/browser chrome, not
+* a plain masked text field) and not a dropdown/list picker (compose
+* Select or Combobox for that shape instead) — this is purely a typing
+* experience, driven entirely through onKeyDown (not onChange) so the
+* displayed value can never drift out of sync with what was actually
+* typed.
+*
+* The mask is always fully visible — "--:-- AM" from the very first
+* render, never a placeholder that vanishes on the first keystroke. Each
+* digit replaces one "-" in place; the meridiem always shows a real
+* "AM"/"PM" (defaults "AM" on mount), and its "M" never changes — only the
+* leading "A"/"P" toggles. Uncontrolled only: `defaultValue` seeds it,
+* `onValueChange` notifies of every change, there is no `value` prop.
+*/
+var EMPTY_SEGMENTS = {
+	hour: "",
+	minute: "",
+	meridiem: "AM"
+};
+function maskChar(digits, index) {
+	return digits[index] ?? "-";
+}
+/** The always-visible mask string — e.g. "09:-- AM" while the minute is still unfilled. */
+function formatSegments({ hour, minute, meridiem }) {
+	return `${maskChar(hour, 0)}${maskChar(hour, 1)}:${maskChar(minute, 0)}${maskChar(minute, 1)} ${meridiem}`;
+}
+/** Clamps/normalizes a segment set from an external source (defaultValue, paste) — rejects an out-of-range hour/minute instead of displaying it, and zero-pads a single digit to match the two-digit look typing always produces. */
+function clampSegments({ hour, minute, meridiem }) {
+	const validHour = hour !== "" && Number(hour) >= 1 && Number(hour) <= 12;
+	const validMinute = minute !== "" && Number(minute) <= 59;
+	return {
+		hour: validHour ? hour.padStart(2, "0") : "",
+		minute: validMinute ? minute.padStart(2, "0") : "",
+		meridiem
+	};
+}
+/** Accepts either the clean "9:30 AM" shape or the masked "09:-- AM" shape (dashes are just treated as unfilled). */
+function parseValue(value) {
+	const match = value.trim().match(/^([\d-]{1,2})?:?([\d-]{1,2})?\s*(AM|PM)?$/i);
+	if (!match) return EMPTY_SEGMENTS;
+	const [, hourRaw = "", minuteRaw = "", meridiemRaw = ""] = match;
+	return clampSegments({
+		hour: hourRaw.replace(/-/g, ""),
+		minute: minuteRaw.replace(/-/g, ""),
+		meridiem: meridiemRaw.toUpperCase() || "AM"
+	});
+}
+var NAVIGATION_KEYS = /* @__PURE__ */ new Set([
+	"Tab",
+	"ArrowLeft",
+	"ArrowRight",
+	"Home",
+	"End",
+	"Shift",
+	"Delete"
+]);
+function TimePicker({ defaultValue, onValueChange, className, ...props }) {
+	const [segments, setSegments] = React.useState(() => parseValue(defaultValue ?? ""));
+	const [announcement, setAnnouncement] = React.useState("");
+	const commit = (next) => {
+		setSegments(next);
+		setAnnouncement(formatSegments(next));
+		onValueChange?.(formatSegments(next));
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Backspace") {
+			e.preventDefault();
+			if (segments.minute) return commit({
+				...segments,
+				minute: segments.minute.slice(0, -1)
+			});
+			if (segments.hour) return commit({
+				...segments,
+				hour: segments.hour.slice(0, -1)
+			});
+			return;
+		}
+		if (/^[ap]$/i.test(e.key)) {
+			e.preventDefault();
+			commit({
+				...segments,
+				meridiem: e.key.toLowerCase() === "a" ? "AM" : "PM"
+			});
+			return;
+		}
+		if (/^[0-9]$/.test(e.key)) {
+			e.preventDefault();
+			if (segments.hour.length < 2) {
+				const nextHour = segments.hour + e.key;
+				if (Number(nextHour) > 12 || nextHour === "00") return;
+				commit({
+					...segments,
+					hour: nextHour
+				});
+				return;
+			}
+			if (segments.minute.length < 2) {
+				const nextMinute = segments.minute + e.key;
+				if (Number(nextMinute) > 59) return;
+				commit({
+					...segments,
+					minute: nextMinute
+				});
+			}
+			return;
+		}
+		if (!NAVIGATION_KEYS.has(e.key) && !e.metaKey && !e.ctrlKey) e.preventDefault();
+	};
+	return /* @__PURE__ */ jsxs(InputGroup, { children: [
+		/* @__PURE__ */ jsx(InputGroupInput, {
+			type: "text",
+			inputMode: "numeric",
+			autoComplete: "off",
+			value: formatSegments(segments),
+			onChange: () => {},
+			onKeyDown: handleKeyDown,
+			onPaste: (e) => {
+				e.preventDefault();
+				commit(parseValue(e.clipboardData.getData("text")));
+			},
+			className: cn(className),
+			...props
+		}),
+		/* @__PURE__ */ jsx(InputGroupAddon, {
+			align: "inline-end",
+			children: /* @__PURE__ */ jsx(InputGroupButton, {
+				type: "button",
+				"aria-label": segments.meridiem === "AM" ? "Switch to PM" : "Switch to AM",
+				onClick: () => commit({
+					...segments,
+					meridiem: segments.meridiem === "AM" ? "PM" : "AM"
+				}),
+				children: segments.meridiem
+			})
+		}),
+		/* @__PURE__ */ jsx("span", {
+			role: "status",
+			className: "sr-only",
+			children: announcement
+		})
+	] });
+}
+/**
+* WHEN TO USE
+* - Typing a time directly is faster than scrolling/clicking through a list — appointment
+*   forms, scheduling fields, anywhere the exact time is usually already known.
+*
+* NOT WHEN
+* - Picking from a fixed set of bookable slots (e.g. every 15 minutes) — compose Select or
+*   Combobox with those options instead; this component has no dropdown at all.
+* - Full date + time together — pair this with Calendar inside the same Popover; see Calendar's
+*   doc comment for the date-picker composition pattern.
+*
+* KEY RULES
+* - Uncontrolled only — `defaultValue` seeds it, `onValueChange` fires on every change. There is
+*   no `value` prop; this component owns its own text the same way a plain `<input>` would.
+* - `onValueChange` reports exactly what's on screen, mask characters included (e.g. "09:-- AM"
+*   while the minute is still unfilled) — check for "-" to know whether entry is complete.
+* - The mask never disappears: it's the value itself, not a `placeholder` (which only shows on an
+*   empty value — this input is never actually empty). Each keystroke replaces one "-" in place.
+* - The meridiem always shows a real "AM"/"PM" (starts "AM") — "a"/"p" toggles it at any time,
+*   independent of how much of the hour/minute has been typed; there's nothing to erase there.
+*   A trailing AM/PM button mirrors this toggle for touch/virtual-keyboard users, since
+*   `inputMode="numeric"` hides letter keys on those keyboards.
+* - Digits fill hour then minute, each clamped live (hour rejects >12 or "00", minute rejects
+*   >59). Backspace removes the most recently-typed digit (minute first, then hour). Pasting a
+*   full time string (masked or clean) is also handled.
+* - Error state is driven entirely by `aria-invalid` (spreads through to Input) — there is no
+*   separate `error` prop, consistent with every other input in this library.
+* - This wraps Input purely for the visual shell — don't reach for Input directly and rebuild
+*   this masking logic; that's the one thing this component exists to own.
+*
+* USAGE
+* <TimePicker defaultValue="09:30 AM" onValueChange={(value) => console.log(value)} />
+*/
+//#endregion
+export { TimePicker };
+
+//# sourceMappingURL=time-picker.js.map

package/dist/components/ui/time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.js","names":[],"sources":["../../../src/components/ui/time-picker.tsx"],"sourcesContent":["\"use client\"\n\n/**\n * TimePicker — masked text input for typing a 12-hour time (HH:MM AM/PM).\n *\n * Not a native `<input type=\"time\">` (that renders OS/browser chrome, not\n * a plain masked text field) and not a dropdown/list picker (compose\n * Select or Combobox for that shape instead) — this is purely a typing\n * experience, driven entirely through onKeyDown (not onChange) so the\n * displayed value can never drift out of sync with what was actually\n * typed.\n *\n * The mask is always fully visible — \"--:-- AM\" from the very first\n * render, never a placeholder that vanishes on the first keystroke. Each\n * digit replaces one \"-\" in place; the meridiem always shows a real\n * \"AM\"/\"PM\" (defaults \"AM\" on mount), and its \"M\" never changes — only the\n * leading \"A\"/\"P\" toggles. Uncontrolled only: `defaultValue` seeds it,\n * `onValueChange` notifies of every change, there is no `value` prop.\n */\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/components/ui/input-group\"\n\ntype TimeSegments = {\n  hour: string // 0-2 digit chars, unfilled positions render as \"-\"\n  minute: string // 0-2 digit chars, unfilled positions render as \"-\"\n  meridiem: \"AM\" | \"PM\" // always has a real value — never unset\n}\n\nconst EMPTY_SEGMENTS: TimeSegments = { hour: \"\", minute: \"\", meridiem: \"AM\" }\n\nfunction maskChar(digits: string, index: number): string {\n  return digits[index] ?? \"-\"\n}\n\n/** The always-visible mask string — e.g. \"09:-- AM\" while the minute is still unfilled. */\nfunction formatSegments({ hour, minute, meridiem }: TimeSegments): string {\n  return `${maskChar(hour, 0)}${maskChar(hour, 1)}:${maskChar(minute, 0)}${maskChar(minute, 1)} ${meridiem}`\n}\n\n/** Clamps/normalizes a segment set from an external source (defaultValue, paste) — rejects an out-of-range hour/minute instead of displaying it, and zero-pads a single digit to match the two-digit look typing always produces. */\nfunction clampSegments({ hour, minute, meridiem }: TimeSegments): TimeSegments {\n  const validHour = hour !== \"\" && Number(hour) >= 1 && Number(hour) <= 12\n  const validMinute = minute !== \"\" && Number(minute) <= 59\n  return {\n    hour: validHour ? hour.padStart(2, \"0\") : \"\",\n    minute: validMinute ? minute.padStart(2, \"0\") : \"\",\n    meridiem,\n  }\n}\n\n/** Accepts either the clean \"9:30 AM\" shape or the masked \"09:-- AM\" shape (dashes are just treated as unfilled). */\nfunction parseValue(value: string): TimeSegments {\n  const match = value.trim().match(/^([\\d-]{1,2})?:?([\\d-]{1,2})?\\s*(AM|PM)?$/i)\n  if (!match) return EMPTY_SEGMENTS\n  const [, hourRaw = \"\", minuteRaw = \"\", meridiemRaw = \"\"] = match\n  return clampSegments({\n    hour: hourRaw.replace(/-/g, \"\"),\n    minute: minuteRaw.replace(/-/g, \"\"),\n    meridiem: (meridiemRaw.toUpperCase() as \"AM\" | \"PM\") || \"AM\",\n  })\n}\n\nconst NAVIGATION_KEYS = new Set([\n  \"Tab\",\n  \"ArrowLeft\",\n  \"ArrowRight\",\n  \"Home\",\n  \"End\",\n  \"Shift\",\n  \"Delete\",\n])\n\nfunction TimePicker({\n  defaultValue,\n  onValueChange,\n  className,\n  ...props\n}: Omit<\n  React.ComponentProps<typeof Input>,\n  \"value\" | \"defaultValue\" | \"onChange\" | \"type\"\n> & {\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}) {\n  const [segments, setSegments] = React.useState<TimeSegments>(() =>\n    parseValue(defaultValue ?? \"\")\n  )\n  // Every accepted keystroke is intercepted in onKeyDown and only ever\n  // reaches the screen through React re-rendering `value` — never through\n  // native text insertion — so most screen readers' typing-echo has\n  // nothing to announce. This mirrors the resulting mask into a live\n  // region so each accepted digit/backspace/meridiem change is still\n  // spoken.\n  const [announcement, setAnnouncement] = React.useState(\"\")\n\n  const commit = (next: TimeSegments) => {\n    setSegments(next)\n    setAnnouncement(formatSegments(next))\n    onValueChange?.(formatSegments(next))\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Backspace\") {\n      e.preventDefault()\n      if (segments.minute)\n        return commit({ ...segments, minute: segments.minute.slice(0, -1) })\n      if (segments.hour)\n        return commit({ ...segments, hour: segments.hour.slice(0, -1) })\n      return\n    }\n\n    if (/^[ap]$/i.test(e.key)) {\n      e.preventDefault()\n      commit({\n        ...segments,\n        meridiem: e.key.toLowerCase() === \"a\" ? \"AM\" : \"PM\",\n      })\n      return\n    }\n\n    if (/^[0-9]$/.test(e.key)) {\n      e.preventDefault()\n      if (segments.hour.length < 2) {\n        const nextHour = segments.hour + e.key\n        if (Number(nextHour) > 12 || nextHour === \"00\") return\n        commit({ ...segments, hour: nextHour })\n        return\n      }\n      if (segments.minute.length < 2) {\n        const nextMinute = segments.minute + e.key\n        if (Number(nextMinute) > 59) return\n        commit({ ...segments, minute: nextMinute })\n      }\n      return\n    }\n\n    // Block anything else from reaching the native input — we render a\n    // fully-controlled value ourselves, so an uncaught keystroke would\n    // otherwise desync what's displayed from what these segments hold.\n    if (!NAVIGATION_KEYS.has(e.key) && !e.metaKey && !e.ctrlKey) {\n      e.preventDefault()\n    }\n  }\n\n  return (\n    <InputGroup>\n      <InputGroupInput\n        type=\"text\"\n        inputMode=\"numeric\"\n        autoComplete=\"off\"\n        value={formatSegments(segments)}\n        onChange={() => {}}\n        onKeyDown={handleKeyDown}\n        onPaste={(e) => {\n          e.preventDefault()\n          commit(parseValue(e.clipboardData.getData(\"text\")))\n        }}\n        className={cn(className)}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {/*\n          \"a\"/\"p\" only reaches this component through a physical keyboard —\n          `inputMode=\"numeric\"` above tells on-screen/virtual keyboards to\n          show digits only, so touch users on those devices have no letter\n          key to press at all. This button is the modality-independent\n          fallback; the \"a\"/\"p\" shortcut still works for physical keyboards.\n        */}\n        <InputGroupButton\n          type=\"button\"\n          aria-label={\n            segments.meridiem === \"AM\" ? \"Switch to PM\" : \"Switch to AM\"\n          }\n          onClick={() =>\n            commit({\n              ...segments,\n              meridiem: segments.meridiem === \"AM\" ? \"PM\" : \"AM\",\n            })\n          }\n        >\n          {segments.meridiem}\n        </InputGroupButton>\n      </InputGroupAddon>\n      <span role=\"status\" className=\"sr-only\">\n        {announcement}\n      </span>\n    </InputGroup>\n  )\n}\n\nexport { TimePicker }\n\n/**\n * WHEN TO USE\n * - Typing a time directly is faster than scrolling/clicking through a list — appointment\n *   forms, scheduling fields, anywhere the exact time is usually already known.\n *\n * NOT WHEN\n * - Picking from a fixed set of bookable slots (e.g. every 15 minutes) — compose Select or\n *   Combobox with those options instead; this component has no dropdown at all.\n * - Full date + time together — pair this with Calendar inside the same Popover; see Calendar's\n *   doc comment for the date-picker composition pattern.\n *\n * KEY RULES\n * - Uncontrolled only — `defaultValue` seeds it, `onValueChange` fires on every change. There is\n *   no `value` prop; this component owns its own text the same way a plain `<input>` would.\n * - `onValueChange` reports exactly what's on screen, mask characters included (e.g. \"09:-- AM\"\n *   while the minute is still unfilled) — check for \"-\" to know whether entry is complete.\n * - The mask never disappears: it's the value itself, not a `placeholder` (which only shows on an\n *   empty value — this input is never actually empty). Each keystroke replaces one \"-\" in place.\n * - The meridiem always shows a real \"AM\"/\"PM\" (starts \"AM\") — \"a\"/\"p\" toggles it at any time,\n *   independent of how much of the hour/minute has been typed; there's nothing to erase there.\n *   A trailing AM/PM button mirrors this toggle for touch/virtual-keyboard users, since\n *   `inputMode=\"numeric\"` hides letter keys on those keyboards.\n * - Digits fill hour then minute, each clamped live (hour rejects >12 or \"00\", minute rejects\n *   >59). Backspace removes the most recently-typed digit (minute first, then hour). Pasting a\n *   full time string (masked or clean) is also handled.\n * - Error state is driven entirely by `aria-invalid` (spreads through to Input) — there is no\n *   separate `error` prop, consistent with every other input in this library.\n * - This wraps Input purely for the visual shell — don't reach for Input directly and rebuild\n *   this masking logic; that's the one thing this component exists to own.\n *\n * USAGE\n * <TimePicker defaultValue=\"09:30 AM\" onValueChange={(value) => console.log(value)} />\n */\n"],"mappings":"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"}

package/dist/components/ui/toggle-group.d.ts

@@ -0,0 +1,52 @@
+/**
+ * ToggleGroup — set of related Toggles sharing one selection state.
+ *
+ * `type` (required) is "single" for radio-like exclusive selection or
+ * "multiple" for any-number-pressed. variant/size set on the group cascade to
+ * every ToggleGroupItem via context, so items don't need to repeat them.
+ * Built on the Radix ToggleGroup primitive. Adds `orientation` (vertical
+ * stacking) and `spacing` (gap between items — spacing=0 collapses items
+ * into one seamless bar with shared borders, like ButtonGroup).
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
+import { toggleVariants } from "../../components/ui/toggle";
+declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+    orientation?: "horizontal" | "vertical";
+}): React.JSX.Element;
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): React.JSX.Element;
+export { ToggleGroup, ToggleGroupItem };
+/**
+ * WHEN TO USE
+ * - Text alignment pickers, view density switchers, multi-select formatting toolbars
+ * - Any set of related Toggles that should share pressed state, variant, and size
+ *
+ * NOT WHEN
+ * - Switching between views/pages of content — use Tabs
+ * - A form field that needs a single mutually-exclusive value — use RadioGroup
+ * - Actions that don't hold pressed state — use ButtonGroup
+ *
+ * KEY RULES
+ * - type is required: "single" (only one item pressed at a time, like radio) or "multiple" (any number pressed)
+ * - variant/size set on ToggleGroup cascade to every ToggleGroupItem and take priority over a variant/size
+ *   passed directly on an item
+ * - spacing: default 2 (gap between items); spacing={0} collapses items into a seamless segmented
+ *   control with shared borders and collapsed inner radii
+ * - orientation: horizontal (default) | vertical
+ * - Each ToggleGroupItem needs its own aria-label (or visible text) when icon-only — none is added automatically
+ *
+ * USAGE
+ * <ToggleGroup type="single" defaultValue="center" variant="outline">
+ *   <ToggleGroupItem value="left" aria-label="Align left"><AlignLeftIcon /></ToggleGroupItem>
+ *   <ToggleGroupItem value="center" aria-label="Align center"><AlignCenterIcon /></ToggleGroupItem>
+ *   <ToggleGroupItem value="right" aria-label="Align right"><AlignRightIcon /></ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ * <ToggleGroup type="multiple" defaultValue={["bold"]}>
+ *   <ToggleGroupItem value="bold" aria-label="Bold"><BoldIcon /></ToggleGroupItem>
+ *   <ToggleGroupItem value="italic" aria-label="Italic"><ItalicIcon /></ToggleGroupItem>
+ * </ToggleGroup>
+ */
+//# sourceMappingURL=toggle-group.d.ts.map

package/dist/components/ui/toggle-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/toggle-group.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAG9D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAcvD,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAW,EACX,WAA0B,EAC1B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GACvD,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;CACxC,qBAsBF;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GACvD,YAAY,CAAC,OAAO,cAAc,CAAC,qBAsBpC;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAA;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG"}