@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/item.js

@@ -0,0 +1,176 @@
+import { cn } from "../../lib/utils.js";
+import { Separator as Separator$1 } from "./separator.js";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/item.tsx
+/**
+* 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`.
+*/
+var ItemGroupContext = React.createContext(false);
+function ItemGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ItemGroupContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx("div", {
+			role: "list",
+			"data-slot": "item-group",
+			className: cn("group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2", className),
+			...props
+		})
+	});
+}
+function ItemSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Separator$1, {
+		"data-slot": "item-separator",
+		orientation: "horizontal",
+		className: cn("my-2", className),
+		...props
+	});
+}
+var itemVariants = cva("group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted", {
+	variants: {
+		variant: {
+			default: "border-transparent",
+			outline: "border-border",
+			muted: "border-transparent bg-muted/50"
+		},
+		size: {
+			default: "gap-2.5 px-3 py-2.5",
+			sm: "gap-2.5 px-3 py-2.5",
+			xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function Item({ className, variant = "default", size = "default", asChild = false, ...props }) {
+	const isGrouped = React.useContext(ItemGroupContext);
+	const Comp = asChild ? Slot.Root : "div";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "item",
+		"data-variant": variant,
+		"data-size": size,
+		role: isGrouped ? "listitem" : void 0,
+		className: cn(itemVariants({
+			variant,
+			size,
+			className
+		})),
+		...props
+	});
+}
+var itemMediaVariants = cva("flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none", {
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: "[&_svg:not([class*='size-'])]:size-4",
+		image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function ItemMedia({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-media",
+		"data-variant": variant,
+		className: cn(itemMediaVariants({
+			variant,
+			className
+		})),
+		...props
+	});
+}
+function ItemContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-content",
+		className: cn("flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none", className),
+		...props
+	});
+}
+function ItemTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-title",
+		className: cn("line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4", className),
+		...props
+	});
+}
+function ItemDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "item-description",
+		className: cn("line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		...props
+	});
+}
+function ItemActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-actions",
+		className: cn("flex items-center gap-2", className),
+		...props
+	});
+}
+function ItemHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-header",
+		className: cn("flex basis-full items-center justify-between gap-2", className),
+		...props
+	});
+}
+function ItemFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-footer",
+		className: cn("flex basis-full items-center justify-between gap-2", className),
+		...props
+	});
+}
+/**
+* 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>
+*/
+//#endregion
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };
+
+//# sourceMappingURL=item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","names":[],"sources":["../../../src/components/ui/item.tsx"],"sourcesContent":["/**\n * Item — row for an entity in a list: media, text, and actions.\n *\n * cva-driven `div` (or `Slot` via `asChild`), no external primitive.\n * `ItemMedia` has `default` | `icon` | `image` variants only — there is no\n * separate `avatar` variant, so an `<Avatar>` goes in a plain (`default`)\n * `ItemMedia`.\n */\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/components/ui/separator\"\n\nconst ItemGroupContext = React.createContext(false)\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <ItemGroupContext.Provider value={true}>\n      <div\n        role=\"list\"\n        data-slot=\"item-group\"\n        className={cn(\n          \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n          className\n        )}\n        {...props}\n      />\n    </ItemGroupContext.Provider>\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"border-transparent bg-muted/50\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const isGrouped = React.useContext(ItemGroupContext)\n  const Comp = asChild ? Slot.Root : \"div\"\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      role={isGrouped ? \"listitem\" : undefined}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n\n/**\n * WHEN TO USE\n * - An entity list where each row has media, text, and actions — settings\n *   rows, search results, member lists, file/folder rows.\n *\n * NOT WHEN\n * - Columnar data that needs alignment across rows — use Table.\n * - A single grouped panel of content — use Card.\n * - The row is a form control (checkbox, input, radio, select) — use Field.\n *\n * KEY RULES\n * - Three sizes (default, sm, xs) and three variants (default, outline,\n *   muted) — `xs` is dense enough to use inside a dropdown-menu content\n *   area with zero padding.\n * - `ItemMedia variant=\"icon\"` auto-sizes any un-sized svg to `size-4`;\n *   `variant=\"image\"` clips to a rounded square that shrinks with `size`.\n * - `ItemGroup` sets `role=\"list\"` and controls row gap by size — use it\n *   (not a plain `div`) whenever stacking more than one Item. Item only sets\n *   `role=\"listitem\"` on itself when actually rendered inside an ItemGroup\n *   (detected via context) — a standalone Item outside any group stays role-less,\n *   since a bare `listitem` with no `list` ancestor is its own ARIA violation.\n * - `ItemSeparator` is Separator pre-styled with `my-2` — use it between\n *   rows in a group instead of a raw `<Separator />`.\n *\n * USAGE\n * <Item>\n *   <ItemMedia variant=\"icon\"><FolderIcon /></ItemMedia>\n *   <ItemContent>\n *     <ItemTitle>Design tokens</ItemTitle>\n *     <ItemDescription>Colors, radius and typography.</ItemDescription>\n *   </ItemContent>\n *   <ItemActions>\n *     <Button variant=\"ghost\" size=\"sm\" iconOnly aria-label=\"Open\"><ChevronRightIcon /></Button>\n *   </ItemActions>\n * </Item>\n *\n * <ItemGroup className=\"rounded-xl border\">\n *   <Item>...</Item>\n *   <ItemSeparator />\n *   <Item>...</Item>\n * </ItemGroup>\n */\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,IAAM,mBAAmB,MAAM,cAAc,KAAK;AAElD,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO;EAChC,UAAA,oBAAC,OAAD;GACE,MAAK;GACL,aAAU;GACV,WAAW,GACT,mGACA,SACF;GACA,GAAI;EACL,CAAA;CACwB,CAAA;AAE/B;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACsC;CACzC,OACE,oBAAC,aAAD;EACE,aAAU;EACV,aAAY;EACZ,WAAW,GAAG,QAAQ,SAAS;EAC/B,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,eAAe,IACnB,8OACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACT,OAAO;EACT;EACA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAEA,SAAS,KAAK,EACZ,WACA,UAAU,WACV,OAAO,WACP,UAAU,OACV,GAAG,SAEwD;CAC3D,MAAM,YAAY,MAAM,WAAW,gBAAgB;CACnD,MAAM,OAAO,UAAU,KAAK,OAAO;CACnC,OACE,oBAAC,MAAD;EACE,aAAU;EACV,gBAAc;EACd,aAAW;EACX,MAAM,YAAY,aAAa,KAAA;EAC/B,WAAW,GAAG,aAAa;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,oBAAoB,IACxB,kMACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACN,OACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAEA,SAAS,UAAU,EACjB,WACA,UAAU,WACV,GAAG,SACoE;CACvE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,kBAAkB;GAAE;GAAS;EAAU,CAAC,CAAC;EACvD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAoC;CAC3E,OACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GACT,uLACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,41 @@
+/**
+ * Kbd — inline keycap for a single key or keyboard shortcut.
+ *
+ * Plain `kbd` element; `KbdGroup` is also a `kbd`, used purely to space a
+ * chord. Includes tooltip-aware styling
+ * (`in-data-[slot=tooltip-content]:...`) so a Kbd inside a TooltipContent
+ * automatically switches to a background-tinted look instead of needing
+ * a manual className override.
+ */
+declare function Kbd({ className, ...props }: React.ComponentProps<"kbd">): import("react").JSX.Element;
+declare function KbdGroup({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+export { Kbd, KbdGroup };
+/**
+ * WHEN TO USE
+ * - Documenting a keyboard shortcut inline, or showing the key hint on the
+ *   trailing edge of a menu item / command-palette row.
+ *
+ * NOT WHEN
+ * - Code snippets or general inline monospace text — Kbd is sized and
+ *   styled specifically as a keycap, not a `<code>` replacement.
+ *
+ * KEY RULES
+ * - `KbdGroup` spaces a chord (⌘K, Ctrl+Shift+P) so multiple keys read as
+ *   one shortcut — use it whenever showing more than one key together.
+ * - Automatically adapts contrast when nested inside TooltipContent (via
+ *   the `in-data-[slot=tooltip-content]` selector) — no manual color
+ *   override needed for a Kbd shown inside a Tooltip.
+ *
+ * USAGE
+ * <KbdGroup>
+ *   <Kbd>⌘</Kbd>
+ *   <Kbd>K</Kbd>
+ * </KbdGroup>
+ *
+ * <KbdGroup>
+ *   <Kbd>Ctrl</Kbd>
+ *   <span className="text-muted-foreground">then</span>
+ *   <Kbd>Esc</Kbd>
+ * </KbdGroup>
+ */
+//# sourceMappingURL=kbd.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.d.ts","sourceRoot":"","sources":["../../../src/components/ui/kbd.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,iBAAS,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAWhE;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQrE;AAED,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAA;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG"}

package/dist/components/ui/kbd.js

@@ -0,0 +1,58 @@
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/kbd.tsx
+/**
+* Kbd — inline keycap for a single key or keyboard shortcut.
+*
+* Plain `kbd` element; `KbdGroup` is also a `kbd`, used purely to space a
+* chord. Includes tooltip-aware styling
+* (`in-data-[slot=tooltip-content]:...`) so a Kbd inside a TooltipContent
+* automatically switches to a background-tinted look instead of needing
+* a manual className override.
+*/
+function Kbd({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd",
+		className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3", className),
+		...props
+	});
+}
+function KbdGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd-group",
+		className: cn("inline-flex items-center gap-1", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Documenting a keyboard shortcut inline, or showing the key hint on the
+*   trailing edge of a menu item / command-palette row.
+*
+* NOT WHEN
+* - Code snippets or general inline monospace text — Kbd is sized and
+*   styled specifically as a keycap, not a `<code>` replacement.
+*
+* KEY RULES
+* - `KbdGroup` spaces a chord (⌘K, Ctrl+Shift+P) so multiple keys read as
+*   one shortcut — use it whenever showing more than one key together.
+* - Automatically adapts contrast when nested inside TooltipContent (via
+*   the `in-data-[slot=tooltip-content]` selector) — no manual color
+*   override needed for a Kbd shown inside a Tooltip.
+*
+* USAGE
+* <KbdGroup>
+*   <Kbd>⌘</Kbd>
+*   <Kbd>K</Kbd>
+* </KbdGroup>
+*
+* <KbdGroup>
+*   <Kbd>Ctrl</Kbd>
+*   <span className="text-muted-foreground">then</span>
+*   <Kbd>Esc</Kbd>
+* </KbdGroup>
+*/
+//#endregion
+export { Kbd, KbdGroup };
+
+//# sourceMappingURL=kbd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.js","names":[],"sources":["../../../src/components/ui/kbd.tsx"],"sourcesContent":["/**\n * Kbd — inline keycap for a single key or keyboard shortcut.\n *\n * Plain `kbd` element; `KbdGroup` is also a `kbd`, used purely to space a\n * chord. Includes tooltip-aware styling\n * (`in-data-[slot=tooltip-content]:...`) so a Kbd inside a TooltipContent\n * automatically switches to a background-tinted look instead of needing\n * a manual className override.\n */\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n\n/**\n * WHEN TO USE\n * - Documenting a keyboard shortcut inline, or showing the key hint on the\n *   trailing edge of a menu item / command-palette row.\n *\n * NOT WHEN\n * - Code snippets or general inline monospace text — Kbd is sized and\n *   styled specifically as a keycap, not a `<code>` replacement.\n *\n * KEY RULES\n * - `KbdGroup` spaces a chord (⌘K, Ctrl+Shift+P) so multiple keys read as\n *   one shortcut — use it whenever showing more than one key together.\n * - Automatically adapts contrast when nested inside TooltipContent (via\n *   the `in-data-[slot=tooltip-content]` selector) — no manual color\n *   override needed for a Kbd shown inside a Tooltip.\n *\n * USAGE\n * <KbdGroup>\n *   <Kbd>⌘</Kbd>\n *   <Kbd>K</Kbd>\n * </KbdGroup>\n *\n * <KbdGroup>\n *   <Kbd>Ctrl</Kbd>\n *   <span className=\"text-muted-foreground\">then</span>\n *   <Kbd>Esc</Kbd>\n * </KbdGroup>\n */\n"],"mappings":";;;;;;;;;;;;AAYA,SAAS,IAAI,EAAE,WAAW,GAAG,SAAsC;CACjE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,yWACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAsC;CACtE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ui/key-value-pair.d.ts

@@ -0,0 +1,56 @@
+/**
+ * KeyValuePair — a labelled property (key) paired with its value.
+ *
+ * `KeyValuePairKey` and
+ * `KeyValuePairValue` are plain slots inside `KeyValuePair`; `orientation`
+ * and `size` on the parent reposition/resize both via the
+ * `in-data-[orientation=...]`/`in-data-[size=...]` variants, the same
+ * ancestor-matching technique ButtonGroup already uses for its children.
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const keyValuePairVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    size?: "sm" | "default" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function KeyValuePair({ className, orientation, size, ...props }: React.ComponentProps<"div"> & VariantProps<typeof keyValuePairVariants>): React.JSX.Element;
+declare function KeyValuePairKey({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function KeyValuePairValue({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function KeyValuePairGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { KeyValuePair, KeyValuePairKey, KeyValuePairValue, KeyValuePairGroup, keyValuePairVariants, };
+/**
+ * WHEN TO USE
+ * - Displaying structured properties — a record's fields, a summary panel,
+ *   a details drawer — where each entry has a short label and a value.
+ *
+ * NOT WHEN
+ * - A form field the user edits — use Field.
+ * - Tabular data needing column alignment across many rows — use Table.
+ *
+ * KEY RULES
+ * - orientation: vertical | horizontal (default "vertical") — vertical stacks key above value
+ *   (best for narrow containers or long keys); horizontal puts the key at ~40% width and the
+ *   value at ~60%, for wider containers where rows should compare against each other.
+ * - size: default | sm | xs (default "default") — same vocabulary as Item/Table/Button. default
+ *   and sm share text-sm, only tightening the gap between pairs; xs also drops to text-xs, for
+ *   a details panel or table cell with no room to spare.
+ * - KeyValuePairValue is a plain slot — text, an icon + text, an Avatar, a Badge, a link, or a
+ *   custom node all work unchanged, there's no value "type" prop to set.
+ * - Wrap multiple pairs in KeyValuePairGroup (not a plain div) for consistent row spacing.
+ *   KeyValuePair only sets `role="listitem"` on itself when actually rendered inside a
+ *   KeyValuePairGroup (detected via context) — standalone, it stays role-less, since a bare
+ *   `listitem` with no `list` ancestor is its own ARIA violation.
+ *
+ * USAGE
+ * <KeyValuePairGroup>
+ *   <KeyValuePair>
+ *     <KeyValuePairKey>Status</KeyValuePairKey>
+ *     <KeyValuePairValue><Badge>Active</Badge></KeyValuePairValue>
+ *   </KeyValuePair>
+ *   <KeyValuePair orientation="horizontal">
+ *     <KeyValuePairKey>Owner</KeyValuePairKey>
+ *     <KeyValuePairValue>James Wilson</KeyValuePairValue>
+ *   </KeyValuePair>
+ * </KeyValuePairGroup>
+ */
+//# sourceMappingURL=key-value-pair.d.ts.map

package/dist/components/ui/key-value-pair.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"key-value-pair.d.ts","sourceRoot":"","sources":["../../../src/components/ui/key-value-pair.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,oBAAoB;;;8EAmBxB,CAAA;AAIF,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,WAAwB,EACxB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,qBAYzE;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAW9B;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7B;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7B;AAED,OAAO,EACL,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,GACrB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG"}

package/dist/components/ui/key-value-pair.js

@@ -0,0 +1,110 @@
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/key-value-pair.tsx
+/**
+* KeyValuePair — a labelled property (key) paired with its value.
+*
+* `KeyValuePairKey` and
+* `KeyValuePairValue` are plain slots inside `KeyValuePair`; `orientation`
+* and `size` on the parent reposition/resize both via the
+* `in-data-[orientation=...]`/`in-data-[size=...]` variants, the same
+* ancestor-matching technique ButtonGroup already uses for its children.
+*/
+var keyValuePairVariants = cva("flex", {
+	variants: {
+		orientation: {
+			vertical: "flex-col gap-1 data-[size=xs]:gap-0.5",
+			horizontal: "flex-row items-baseline gap-4 data-[size=sm]:gap-3 data-[size=xs]:gap-2"
+		},
+		size: {
+			default: "",
+			sm: "",
+			xs: ""
+		}
+	},
+	defaultVariants: {
+		orientation: "vertical",
+		size: "default"
+	}
+});
+var KeyValuePairGroupContext = React.createContext(false);
+function KeyValuePair({ className, orientation = "vertical", size = "default", ...props }) {
+	const isGrouped = React.useContext(KeyValuePairGroupContext);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "key-value-pair",
+		"data-orientation": orientation,
+		"data-size": size,
+		role: isGrouped ? "listitem" : void 0,
+		className: cn(keyValuePairVariants({
+			orientation,
+			size
+		}), className),
+		...props
+	});
+}
+function KeyValuePairKey({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "key-value-pair-key",
+		className: cn("min-w-0 text-sm text-muted-foreground in-data-[orientation=horizontal]:shrink-0 in-data-[orientation=horizontal]:basis-2/5 in-data-[size=xs]:text-xs", className),
+		...props
+	});
+}
+function KeyValuePairValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "key-value-pair-value",
+		className: cn("min-w-0 text-sm text-foreground in-data-[orientation=horizontal]:flex-1 in-data-[orientation=horizontal]:basis-3/5 in-data-[size=xs]:text-xs", className),
+		...props
+	});
+}
+function KeyValuePairGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(KeyValuePairGroupContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx("div", {
+			role: "list",
+			"data-slot": "key-value-pair-group",
+			className: cn("flex w-full flex-col gap-4", className),
+			...props
+		})
+	});
+}
+/**
+* WHEN TO USE
+* - Displaying structured properties — a record's fields, a summary panel,
+*   a details drawer — where each entry has a short label and a value.
+*
+* NOT WHEN
+* - A form field the user edits — use Field.
+* - Tabular data needing column alignment across many rows — use Table.
+*
+* KEY RULES
+* - orientation: vertical | horizontal (default "vertical") — vertical stacks key above value
+*   (best for narrow containers or long keys); horizontal puts the key at ~40% width and the
+*   value at ~60%, for wider containers where rows should compare against each other.
+* - size: default | sm | xs (default "default") — same vocabulary as Item/Table/Button. default
+*   and sm share text-sm, only tightening the gap between pairs; xs also drops to text-xs, for
+*   a details panel or table cell with no room to spare.
+* - KeyValuePairValue is a plain slot — text, an icon + text, an Avatar, a Badge, a link, or a
+*   custom node all work unchanged, there's no value "type" prop to set.
+* - Wrap multiple pairs in KeyValuePairGroup (not a plain div) for consistent row spacing.
+*   KeyValuePair only sets `role="listitem"` on itself when actually rendered inside a
+*   KeyValuePairGroup (detected via context) — standalone, it stays role-less, since a bare
+*   `listitem` with no `list` ancestor is its own ARIA violation.
+*
+* USAGE
+* <KeyValuePairGroup>
+*   <KeyValuePair>
+*     <KeyValuePairKey>Status</KeyValuePairKey>
+*     <KeyValuePairValue><Badge>Active</Badge></KeyValuePairValue>
+*   </KeyValuePair>
+*   <KeyValuePair orientation="horizontal">
+*     <KeyValuePairKey>Owner</KeyValuePairKey>
+*     <KeyValuePairValue>James Wilson</KeyValuePairValue>
+*   </KeyValuePair>
+* </KeyValuePairGroup>
+*/
+//#endregion
+export { KeyValuePair, KeyValuePairGroup, KeyValuePairKey, KeyValuePairValue, keyValuePairVariants };
+
+//# sourceMappingURL=key-value-pair.js.map

package/dist/components/ui/key-value-pair.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"key-value-pair.js","names":[],"sources":["../../../src/components/ui/key-value-pair.tsx"],"sourcesContent":["/**\n * KeyValuePair — a labelled property (key) paired with its value.\n *\n * `KeyValuePairKey` and\n * `KeyValuePairValue` are plain slots inside `KeyValuePair`; `orientation`\n * and `size` on the parent reposition/resize both via the\n * `in-data-[orientation=...]`/`in-data-[size=...]` variants, the same\n * ancestor-matching technique ButtonGroup already uses for its children.\n */\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst keyValuePairVariants = cva(\"flex\", {\n  variants: {\n    orientation: {\n      // Same default/sm/xs vocabulary as Item/Table: default and sm share\n      // text-sm, only xs drops to text-xs — the gap step below tightens\n      // one notch earlier than the text does.\n      vertical: \"flex-col gap-1 data-[size=xs]:gap-0.5\",\n      horizontal: \"flex-row items-baseline gap-4 data-[size=sm]:gap-3 data-[size=xs]:gap-2\",\n    },\n    size: {\n      default: \"\",\n      sm: \"\",\n      xs: \"\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n    size: \"default\",\n  },\n})\n\nconst KeyValuePairGroupContext = React.createContext(false)\n\nfunction KeyValuePair({\n  className,\n  orientation = \"vertical\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof keyValuePairVariants>) {\n  const isGrouped = React.useContext(KeyValuePairGroupContext)\n  return (\n    <div\n      data-slot=\"key-value-pair\"\n      data-orientation={orientation}\n      data-size={size}\n      role={isGrouped ? \"listitem\" : undefined}\n      className={cn(keyValuePairVariants({ orientation, size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction KeyValuePairKey({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"key-value-pair-key\"\n      className={cn(\n        \"min-w-0 text-sm text-muted-foreground in-data-[orientation=horizontal]:shrink-0 in-data-[orientation=horizontal]:basis-2/5 in-data-[size=xs]:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KeyValuePairValue({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"key-value-pair-value\"\n      className={cn(\n        \"min-w-0 text-sm text-foreground in-data-[orientation=horizontal]:flex-1 in-data-[orientation=horizontal]:basis-3/5 in-data-[size=xs]:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KeyValuePairGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <KeyValuePairGroupContext.Provider value={true}>\n      <div\n        role=\"list\"\n        data-slot=\"key-value-pair-group\"\n        className={cn(\"flex w-full flex-col gap-4\", className)}\n        {...props}\n      />\n    </KeyValuePairGroupContext.Provider>\n  )\n}\n\nexport {\n  KeyValuePair,\n  KeyValuePairKey,\n  KeyValuePairValue,\n  KeyValuePairGroup,\n  keyValuePairVariants,\n}\n\n/**\n * WHEN TO USE\n * - Displaying structured properties — a record's fields, a summary panel,\n *   a details drawer — where each entry has a short label and a value.\n *\n * NOT WHEN\n * - A form field the user edits — use Field.\n * - Tabular data needing column alignment across many rows — use Table.\n *\n * KEY RULES\n * - orientation: vertical | horizontal (default \"vertical\") — vertical stacks key above value\n *   (best for narrow containers or long keys); horizontal puts the key at ~40% width and the\n *   value at ~60%, for wider containers where rows should compare against each other.\n * - size: default | sm | xs (default \"default\") — same vocabulary as Item/Table/Button. default\n *   and sm share text-sm, only tightening the gap between pairs; xs also drops to text-xs, for\n *   a details panel or table cell with no room to spare.\n * - KeyValuePairValue is a plain slot — text, an icon + text, an Avatar, a Badge, a link, or a\n *   custom node all work unchanged, there's no value \"type\" prop to set.\n * - Wrap multiple pairs in KeyValuePairGroup (not a plain div) for consistent row spacing.\n *   KeyValuePair only sets `role=\"listitem\"` on itself when actually rendered inside a\n *   KeyValuePairGroup (detected via context) — standalone, it stays role-less, since a bare\n *   `listitem` with no `list` ancestor is its own ARIA violation.\n *\n * USAGE\n * <KeyValuePairGroup>\n *   <KeyValuePair>\n *     <KeyValuePairKey>Status</KeyValuePairKey>\n *     <KeyValuePairValue><Badge>Active</Badge></KeyValuePairValue>\n *   </KeyValuePair>\n *   <KeyValuePair orientation=\"horizontal\">\n *     <KeyValuePairKey>Owner</KeyValuePairKey>\n *     <KeyValuePairValue>James Wilson</KeyValuePairValue>\n *   </KeyValuePair>\n * </KeyValuePairGroup>\n */\n"],"mappings":";;;;;;;;;;;;;;AAeA,IAAM,uBAAuB,IAAI,QAAQ;CACvC,UAAU;EACR,aAAa;GAIX,UAAU;GACV,YAAY;EACd;EACA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,aAAa;EACb,MAAM;CACR;AACF,CAAC;AAED,IAAM,2BAA2B,MAAM,cAAc,KAAK;AAE1D,SAAS,aAAa,EACpB,WACA,cAAc,YACd,OAAO,WACP,GAAG,SACuE;CAC1E,MAAM,YAAY,MAAM,WAAW,wBAAwB;CAC3D,OACE,oBAAC,OAAD;EACE,aAAU;EACV,oBAAkB;EAClB,aAAW;EACX,MAAM,YAAY,aAAa,KAAA;EAC/B,WAAW,GAAG,qBAAqB;GAAE;GAAa;EAAK,CAAC,GAAG,SAAS;EACpE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC4B;CAC/B,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,wJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,gJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,yBAAyB,UAA1B;EAAmC,OAAO;EACxC,UAAA,oBAAC,OAAD;GACE,MAAK;GACL,aAAU;GACV,WAAW,GAAG,8BAA8B,SAAS;GACrD,GAAI;EACL,CAAA;CACgC,CAAA;AAEvC"}

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

@@ -0,0 +1,83 @@
+/**
+ * Label — accessible form control label.
+ *
+ * Dims via `group-data-[disabled=true]` when a parent group (not just its
+ * own peer control) is disabled, and via `has-disabled` when WRAPPING a
+ * disabled control —
+ * `peer-disabled` only ever matches a disabled control that's a following
+ * sibling, never one nested inside the label, which is the more common of
+ * the two documented usages below.
+ *
+ * Dims to `text-disabled-foreground`, not `opacity-50` — an opacity
+ * approach blends the label's dark text down to ~3.3:1 against a
+ * light background, failing WCAG 1.4.3's 4.5:1 text minimum (a disabled
+ * *control* is exempt from contrast rules, but this label is a separate
+ * element describing it, not the control itself, so it still needs to pass).
+ * Not `text-muted-foreground` either — that step alone doesn't read as
+ * clearly faded next to normal (near-black) label text; disabled-foreground
+ * is a dedicated, deliberately lighter token for exactly this case (see
+ * theme-tokens.css).
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Label as LabelPrimitive } from "radix-ui";
+declare const labelVariants: (props?: ({
+    size?: "sm" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Label({ className, size, required, optional, children, ...props }: React.ComponentProps<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants> & {
+    /** Marks the field as mandatory with a red dot after the text. Visual only — also put `required`/`aria-required` on the control. */
+    required?: boolean;
+    /** Shows a muted "(optional)" hint after the text, for forms where most fields are required and the exceptions need calling out. Mutually exclusive with `required`. */
+    optional?: boolean;
+}): React.JSX.Element;
+/** The required mark — a 6px destructive dot. Decorative: the control's own `required`/`aria-required` is what assistive tech reads. */
+declare function RequiredDot({ className }: {
+    className?: string;
+}): React.JSX.Element;
+/** The optional mark — a muted "(optional)" after the label text. */
+declare function OptionalHint({ className }: {
+    className?: string;
+}): React.JSX.Element;
+export { Label, RequiredDot, OptionalHint };
+/**
+ * WHEN TO USE
+ * - Labelling any form control (Input, Checkbox, RadioGroupItem, Switch, ...)
+ * - Pair via `htmlFor`/`id`, or wrap the control so the whole row becomes a click target
+ *   (dims automatically either way when the control is disabled)
+ *
+ * NOT WHEN
+ * - The field also needs description or error text — use Field instead, which renders its own label internally
+ *
+ * KEY RULES
+ * - `select-none` — label text is not selectable, matching native label behavior
+ * - Dims when: its own peer control is disabled (`peer-disabled:*`, sibling usage), it wraps a disabled
+ *   control (`has-disabled:*`, wrapping usage), or a parent group is disabled (`group-data-[disabled=true]:*`)
+ * - `size`: "default" (text-sm) | "sm" (text-xs) — match it to the control it
+ *   labels, e.g. "sm" next to a `size="sm"` Select in a dense form row.
+ * - Three states, all marked on the Label itself (never on the control or elsewhere): plain
+ *   `<Label>` for an ordinary field; `<Label optional>` adds a muted "(optional)" hint, for forms
+ *   where most fields are required and the exceptions need calling out; `<Label required>` adds a
+ *   small red dot, for a mandatory field. Pick one convention per form — mark the required ones OR
+ *   the optional ones, not both. Both marks are decorative: the control must still carry
+ *   `required`/`aria-required`, which is what assistive tech announces.
+ *
+ * USAGE
+ * <Label htmlFor="email">Email</Label>
+ * <Input id="email" />
+ *
+ * <Label className="flex items-center gap-2">
+ *   <Checkbox /> Accept terms
+ * </Label>
+ *
+ * <Label size="sm" htmlFor="team">Team</Label>
+ * <Select size="sm">...</Select>
+ *
+ * // Mandatory field: red dot on the label, `required` on the control
+ * <Label htmlFor="email" required>Email</Label>
+ * <Input id="email" required />
+ *
+ * // Optional field called out explicitly
+ * <Label htmlFor="nickname" optional>Nickname</Label>
+ * <Input id="nickname" />
+ */
+//# sourceMappingURL=label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/components/ui/label.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,UAAU,CAAA;AAIlD,QAAA,MAAM,aAAa;;8EAalB,CAAA;AAOD,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,IAAgB,EAChB,QAAgB,EAChB,QAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,GACjD,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC,oIAAoI;IACpI,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wKAAwK;IACxK,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,qBAcF;AAED,wIAAwI;AACxI,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAazD;AAED,qEAAqE;AACrE,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAS1D;AAED,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,CAAA;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG"}