@seekalfred/primitives 0.2.0 → 0.4.0

package/dist/index.d.ts

@@ -1,3 +1,32 @@
+import { Accordion, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, AccordionTrigger, AccordionTriggerProps } from "./accordion/accordion.js";
+import { Dialog, DialogFooter, DialogFooterProps, DialogProps, DialogTrigger, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants } from "./dialog/dialog.js";
+import { AlertDialog, AlertDialogProps } from "./alert-dialog/alert-dialog.js";
+import { Alert, AlertProps, alertVariants } from "./alert/alert.js";
+import { Avatar, AvatarProps, avatarVariants } from "./avatar/avatar.js";
+import { Badge, BadgeProps, badgeVariants } from "./badge/badge.js";
+import { BreadcrumbItem, BreadcrumbItemProps, Breadcrumbs, BreadcrumbsProps, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants } from "./breadcrumb/breadcrumb.js";
 import { Button, ButtonProps, buttonVariants } from "./button/button.js";
+import { Calendar, CalendarProps, CalendarRange, CalendarRangeProps, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants } from "./calendar/calendar.js";
+import { Card, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants } from "./card/card.js";
+import { Checkbox, CheckboxProps, checkboxBoxVariants, checkboxVariants } from "./checkbox/checkbox.js";
+import { Input, InputProps, inputVariants } from "./input/input.js";
+import { Label, LabelProps, labelVariants } from "./label/label.js";
 import { cn } from "./lib/cn.js";
-export { Button, type ButtonProps, buttonVariants, cn };
+import { Menu, MenuItem, MenuItemProps, MenuProps, MenuSeparator, MenuTrigger, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants } from "./menu/menu.js";
+import { Popover, PopoverProps, PopoverTrigger, popoverVariants } from "./popover/popover.js";
+import { Progress, ProgressProps, progressFillVariants, progressTrackVariants, progressVariants } from "./progress/progress.js";
+import { Radio, RadioGroup, RadioGroupProps, RadioProps, radioGroupVariants, radioVariants } from "./radio-group/radio-group.js";
+import { ScrollArea, ScrollAreaProps, scrollAreaVariants } from "./scroll-area/scroll-area.js";
+import { Select, SelectItem, SelectItemProps, SelectProps, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants } from "./select/select.js";
+import { Separator, SeparatorProps, separatorVariants } from "./separator/separator.js";
+import { Sheet, SheetProps, sheetOverlayVariants, sheetPanelVariants } from "./sheet/sheet.js";
+import { Skeleton, SkeletonProps, skeletonVariants } from "./skeleton/skeleton.js";
+import { Slider, SliderProps, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants } from "./slider/slider.js";
+import { Spinner, SpinnerProps, spinnerVariants } from "./spinner/spinner.js";
+import { Switch, SwitchProps, switchThumbVariants, switchTrackVariants } from "./switch/switch.js";
+import { Column, RowKey, Table, TableProps, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants } from "./table/table.js";
+import { Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, Tabs, TabsProps, tabListVariants, tabPanelVariants, tabVariants, tabsVariants } from "./tabs/tabs.js";
+import { Textarea, TextareaProps, textareaVariants } from "./textarea/textarea.js";
+import { ToastContent, ToastRegion, ToastRegionProps, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants } from "./toast/toast.js";
+import { Tooltip, TooltipProps, TooltipTrigger, TooltipTriggerProps, tooltipVariants } from "./tooltip/tooltip.js";
+export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDialog, type AlertDialogProps, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Calendar, type CalendarProps, CalendarRange, type CalendarRangeProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, type Column, Dialog, DialogFooter, type DialogFooterProps, type DialogProps, DialogTrigger, Input, type InputProps, Label, type LabelProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator, MenuTrigger, Popover, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RowKey, ScrollArea, type ScrollAreaProps, Select, SelectItem, type SelectItemProps, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type ToastContent, ToastRegion, type ToastRegionProps, Tooltip, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxVariants, cn, createColumns, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, inputVariants, labelVariants, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, popoverVariants, progressFillVariants, progressTrackVariants, progressVariants, radioGroupVariants, radioVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, sheetOverlayVariants, sheetPanelVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, spinnerVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants, tabsVariants, textareaVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, tooltipVariants };

package/dist/index.js

@@ -1,3 +1,32 @@
 import { cn } from "./lib/cn.js";
+import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "./accordion/accordion.js";
+import { Dialog, DialogFooter, DialogTrigger, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants } from "./dialog/dialog.js";
+import { AlertDialog } from "./alert-dialog/alert-dialog.js";
+import { Alert, alertVariants } from "./alert/alert.js";
+import { Avatar, avatarVariants } from "./avatar/avatar.js";
+import { Badge, badgeVariants } from "./badge/badge.js";
+import { BreadcrumbItem, Breadcrumbs, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants } from "./breadcrumb/breadcrumb.js";
 import { Button, buttonVariants } from "./button/button.js";
-export { Button, buttonVariants, cn };
+import { Calendar, CalendarRange, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants } from "./calendar/calendar.js";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants } from "./card/card.js";
+import { Checkbox, checkboxBoxVariants, checkboxVariants } from "./checkbox/checkbox.js";
+import { Input, inputVariants } from "./input/input.js";
+import { Label, labelVariants } from "./label/label.js";
+import { Menu, MenuItem, MenuSeparator, MenuTrigger, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants } from "./menu/menu.js";
+import { Popover, PopoverTrigger, popoverVariants } from "./popover/popover.js";
+import { Progress, progressFillVariants, progressTrackVariants, progressVariants } from "./progress/progress.js";
+import { Radio, RadioGroup, radioGroupVariants, radioVariants } from "./radio-group/radio-group.js";
+import { ScrollArea, scrollAreaVariants } from "./scroll-area/scroll-area.js";
+import { Select, SelectItem, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants } from "./select/select.js";
+import { Separator, separatorVariants } from "./separator/separator.js";
+import { Sheet, sheetOverlayVariants, sheetPanelVariants } from "./sheet/sheet.js";
+import { Skeleton, skeletonVariants } from "./skeleton/skeleton.js";
+import { Slider, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants } from "./slider/slider.js";
+import { Spinner, spinnerVariants } from "./spinner/spinner.js";
+import { Switch, switchThumbVariants, switchTrackVariants } from "./switch/switch.js";
+import { Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants } from "./table/table.js";
+import { Tab, TabList, TabPanel, Tabs, tabListVariants, tabPanelVariants, tabVariants, tabsVariants } from "./tabs/tabs.js";
+import { Textarea, textareaVariants } from "./textarea/textarea.js";
+import { ToastRegion, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants } from "./toast/toast.js";
+import { Tooltip, TooltipTrigger, tooltipVariants } from "./tooltip/tooltip.js";
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, Alert, AlertDialog, Avatar, Badge, BreadcrumbItem, Breadcrumbs, Button, Calendar, CalendarRange, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Dialog, DialogFooter, DialogTrigger, Input, Label, Menu, MenuItem, MenuSeparator, MenuTrigger, Popover, PopoverTrigger, Progress, Radio, RadioGroup, ScrollArea, Select, SelectItem, Separator, Sheet, Skeleton, Slider, Spinner, Switch, Tab, TabList, TabPanel, Table, Tabs, Textarea, ToastRegion, Tooltip, TooltipTrigger, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxVariants, cn, createColumns, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, inputVariants, labelVariants, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, popoverVariants, progressFillVariants, progressTrackVariants, progressVariants, radioGroupVariants, radioVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, sheetOverlayVariants, sheetPanelVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, spinnerVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants, tabsVariants, textareaVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, tooltipVariants };

package/dist/input/index.d.ts

@@ -0,0 +1,2 @@
+import { Input, InputProps, inputVariants } from "./input.js";
+export { Input, type InputProps, inputVariants };

package/dist/input/index.js

@@ -0,0 +1,2 @@
+import { Input, inputVariants } from "./input.js";
+export { Input, inputVariants };

package/dist/input/input.d.ts

@@ -0,0 +1,80 @@
+import { InputProps } from "react-aria-components";
+import { ReactNode } from "react";
+//#region src/input/input.d.ts
+/**
+ * Input, ported from the legacy shadcn component onto React Aria's Input.
+ *
+ * Census: 25 files, 51 uses -- the busiest control in the app after Button.
+ * Props are `onChange` 36, `value` 35, `placeholder` 33, `id` 23, `type` 21.
+ *
+ * EVERY ONE OF THOSE 51 CALL SITES MIGRATES UNCHANGED. React Aria's `Input`
+ * takes NATIVE props -- `disabled`, `aria-invalid`, `onChange` with a real
+ * event -- not the `isDisabled`/`onChange(value)` shape the rest of React
+ * Aria uses. It reads `InputContext` when one is present, so the same
+ * component is a bare styled input today and composes inside a `TextField`
+ * the moment one is wrapped around it. There is no rename to schedule.
+ *
+ * That is also why this is not `TextField`. Wrapping 51 call sites in a
+ * field they do not have, to get a `onChange(value: string)` they did not
+ * ask for, would be the migration doing work on the app's behalf.
+ *
+ * `border-input` becomes `border-border`: in the legacy theme `--input` is
+ * character-for-character `--border` on light (`oklch(0.922 0 0)`), and the
+ * dark values differ only in alpha. A fourth token role that turns out to
+ * be an existing one, after `popover`, `accent` and the scrim.
+ */
+export declare const inputVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+  hasStartIcon?: boolean | null | undefined;
+  hasEndIcon?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * A single-line text field.
+ *
+ * @example
+ * <Input type="email" placeholder="you@example.com" value={v} onChange={e => set(e.target.value)} />
+ * <Input aria-label="Search" startIcon={<SearchIcon aria-hidden />} />
+ */
+interface InputProps$1 extends Omit<InputProps, "className" | "style" | "size"> {
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+  /**
+   * Control scale. Height and inline padding come from the same
+   * `--density-control-*` tokens as Button, so a field and a button on one
+   * rung are the same height.
+   *
+   * Type does not scale with it: the field stays at 16px everywhere, because
+   * iOS Safari zooms the viewport when a focused input's text is smaller.
+   *
+   * This REPLACES the native `size` attribute, which React Aria inherits from
+   * `InputHTMLAttributes` as a character count. No call site in the census
+   * used it; set a width with `className` instead.
+   *
+   * @default "md"
+   */
+  size?: "sm" | "md" | "lg";
+  /**
+   * Decorative glyph at the leading edge of the field.
+   *
+   * Mark it `aria-hidden` -- the field's label carries the accessible name,
+   * and a second name source only makes it announce twice. It is sized at
+   * `--icon-sm` unless it carries a `size-*` class of its own, positioned
+   * from `--density-control-pad-md`, and the field's leading padding grows to
+   * match so the value cannot run underneath it.
+   *
+   * The slot is `pointer-events: none`, so a click on the glyph focuses the
+   * field. That makes it decorative by construction: an interactive
+   * adornment -- a password reveal, a clear button -- is NOT this prop.
+   *
+   * Two named slots rather than one `icon` plus a position prop, matching
+   * Button: a search field can legitimately carry a leading glyph AND a
+   * trailing unit, which one slot cannot express.
+   */
+  startIcon?: ReactNode;
+  /** Decorative glyph at the trailing edge. Same rules as {@link InputProps.startIcon}. */
+  endIcon?: ReactNode;
+}
+declare function Input$1({ className, size, startIcon, endIcon, ...props }: InputProps$1): import("react").JSX.Element;
+//#endregion
+export { Input$1 as Input, InputProps$1 as InputProps };
+//# sourceMappingURL=input.d.ts.map

package/dist/input/input.js

@@ -0,0 +1,195 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { fieldSurfaceVariants } from "../lib/field-surface.js";
+import { cva } from "class-variance-authority";
+import { Input } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/input/input.tsx
+/**
+* Input, ported from the legacy shadcn component onto React Aria's Input.
+*
+* Census: 25 files, 51 uses -- the busiest control in the app after Button.
+* Props are `onChange` 36, `value` 35, `placeholder` 33, `id` 23, `type` 21.
+*
+* EVERY ONE OF THOSE 51 CALL SITES MIGRATES UNCHANGED. React Aria's `Input`
+* takes NATIVE props -- `disabled`, `aria-invalid`, `onChange` with a real
+* event -- not the `isDisabled`/`onChange(value)` shape the rest of React
+* Aria uses. It reads `InputContext` when one is present, so the same
+* component is a bare styled input today and composes inside a `TextField`
+* the moment one is wrapped around it. There is no rename to schedule.
+*
+* That is also why this is not `TextField`. Wrapping 51 call sites in a
+* field they do not have, to get a `onChange(value: string)` they did not
+* ask for, would be the migration doing work on the app's behalf.
+*
+* `border-input` becomes `border-border`: in the legacy theme `--input` is
+* character-for-character `--border` on light (`oklch(0.922 0 0)`), and the
+* dark values differ only in alpha. A fourth token role that turns out to
+* be an existing one, after `popover`, `accent` and the scrim.
+*/
+const inputVariants = cva([
+	fieldSurfaceVariants(),
+	"text-base",
+	"file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium",
+	"file:text-foreground"
+], {
+	variants: {
+		/**
+		* Height and inline padding from the control scale, so `data-density`
+		* moves a whole form at once. Same three names and the same tokens as
+		* Button, because they sit in the same row: Button's `sm` is the app's
+		* second most common at 167 call sites, and while the field was locked
+		* to `md` the pair was 10px out of alignment with no supported fix.
+		*
+		* Type does NOT scale, which is the one place this axis deliberately
+		* departs from Button's. iOS Safari zooms the viewport when a focused
+		* field's text is under 16px, so `text-base` stays pinned in the base
+		* at every rung -- see the note there. Shrinking the box is a layout
+		* choice; shrinking the type is a bug on a phone.
+		*/
+		size: {
+			sm: "h-(--density-control-h-sm) px-(--density-control-pad-sm)",
+			md: "h-(--density-control-h-md) px-(--density-control-pad-md)",
+			lg: "h-(--density-control-h-lg) px-(--density-control-pad-lg)"
+		},
+		hasStartIcon: { true: "" },
+		hasEndIcon: { true: "" }
+	},
+	compoundVariants: [
+		{
+			size: "sm",
+			hasStartIcon: true,
+			class: "ps-[calc(var(--density-control-pad-sm)_+_var(--icon-sm)_+_var(--density-control-gap))]"
+		},
+		{
+			size: "md",
+			hasStartIcon: true,
+			class: "ps-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]"
+		},
+		{
+			size: "lg",
+			hasStartIcon: true,
+			class: "ps-[calc(var(--density-control-pad-lg)_+_var(--icon-sm)_+_var(--density-control-gap))]"
+		},
+		{
+			size: "sm",
+			hasEndIcon: true,
+			class: "pe-[calc(var(--density-control-pad-sm)_+_var(--icon-sm)_+_var(--density-control-gap))]"
+		},
+		{
+			size: "md",
+			hasEndIcon: true,
+			class: "pe-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]"
+		},
+		{
+			size: "lg",
+			hasEndIcon: true,
+			class: "pe-[calc(var(--density-control-pad-lg)_+_var(--icon-sm)_+_var(--density-control-gap))]"
+		}
+	],
+	defaultVariants: { size: "md" }
+});
+/**
+* An affix slot.
+*
+* `pointer-events-none` is load-bearing, not cosmetic: the slot is painted on
+* top of the field, so without it the glyph swallows the click that was meant
+* to focus the input. Which also fixes the slot's scope -- these are
+* DECORATIVE marks. An interactive trailing control (a password reveal, a
+* clear button) needs its own pointer events and its own accessible name, and
+* the census found no call site for one, so it is not built here.
+*
+* Logical properties throughout. The product app's eighteen hand-rolled
+* adornments are all `absolute left-*`, with `absolute start-*` at zero
+* occurrences, so every one of them puts the glyph on the wrong side under
+* RTL and lets the text run over it.
+*/
+const affixVariants = cva([
+	"pointer-events-none absolute inset-y-0 flex items-center",
+	"text-muted-foreground",
+	"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--icon-sm)"
+], {
+	variants: {
+		side: {
+			start: "",
+			end: ""
+		},
+		size: {
+			sm: "",
+			md: "",
+			lg: ""
+		}
+	},
+	compoundVariants: [
+		{
+			side: "start",
+			size: "sm",
+			class: "start-(--density-control-pad-sm)"
+		},
+		{
+			side: "start",
+			size: "md",
+			class: "start-(--density-control-pad-md)"
+		},
+		{
+			side: "start",
+			size: "lg",
+			class: "start-(--density-control-pad-lg)"
+		},
+		{
+			side: "end",
+			size: "sm",
+			class: "end-(--density-control-pad-sm)"
+		},
+		{
+			side: "end",
+			size: "md",
+			class: "end-(--density-control-pad-md)"
+		},
+		{
+			side: "end",
+			size: "lg",
+			class: "end-(--density-control-pad-lg)"
+		}
+	],
+	defaultVariants: { size: "md" }
+});
+function Input$1({ className, size = "md", startIcon, endIcon, ...props }) {
+	const input = /* @__PURE__ */ jsx(Input, {
+		...props,
+		"data-slot": "input",
+		className: cn(inputVariants({
+			size,
+			hasStartIcon: startIcon !== void 0,
+			hasEndIcon: endIcon !== void 0
+		}), className)
+	});
+	if (startIcon === void 0 && endIcon === void 0) return input;
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "input-wrapper",
+		className: "relative block w-full",
+		children: [
+			input,
+			startIcon === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				"data-slot": "input-start-icon",
+				className: affixVariants({
+					side: "start",
+					size
+				}),
+				children: startIcon
+			}),
+			endIcon === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				"data-slot": "input-end-icon",
+				className: affixVariants({
+					side: "end",
+					size
+				}),
+				children: endIcon
+			})
+		]
+	});
+}
+//#endregion
+export { Input$1 as Input, inputVariants };
+
+//# sourceMappingURL=input.js.map

package/dist/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":["Input","AriaInput"],"sources":["../../src/input/input.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport { Input as AriaInput, type InputProps as AriaInputProps } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/**\n * Input, ported from the legacy shadcn component onto React Aria's Input.\n *\n * Census: 25 files, 51 uses -- the busiest control in the app after Button.\n * Props are `onChange` 36, `value` 35, `placeholder` 33, `id` 23, `type` 21.\n *\n * EVERY ONE OF THOSE 51 CALL SITES MIGRATES UNCHANGED. React Aria's `Input`\n * takes NATIVE props -- `disabled`, `aria-invalid`, `onChange` with a real\n * event -- not the `isDisabled`/`onChange(value)` shape the rest of React\n * Aria uses. It reads `InputContext` when one is present, so the same\n * component is a bare styled input today and composes inside a `TextField`\n * the moment one is wrapped around it. There is no rename to schedule.\n *\n * That is also why this is not `TextField`. Wrapping 51 call sites in a\n * field they do not have, to get a `onChange(value: string)` they did not\n * ask for, would be the migration doing work on the app's behalf.\n *\n * `border-input` becomes `border-border`: in the legacy theme `--input` is\n * character-for-character `--border` on light (`oklch(0.922 0 0)`), and the\n * dark values differ only in alpha. A fourth token role that turns out to\n * be an existing one, after `popover`, `accent` and the scrim.\n */\nexport const inputVariants = cva(\n  [\n    fieldSurfaceVariants(),\n\n    // text-base always, not the legacy `text-base md:text-sm`. 16px is the\n    // threshold below which iOS Safari zooms the viewport on focus, and the\n    // legacy dropped to 14px at exactly the widths where that stops being a\n    // phone -- which reads as a deliberate fix but leaves the field a\n    // different size on either side of a breakpoint for no visual reason.\n    \"text-base\",\n\n    // type=\"file\" has one call site, which is not zero. Enough to keep it\n    // from rendering as an unstyled user-agent button.\n    \"file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n    \"file:text-foreground\",\n  ],\n  {\n    variants: {\n      /**\n       * Height and inline padding from the control scale, so `data-density`\n       * moves a whole form at once. Same three names and the same tokens as\n       * Button, because they sit in the same row: Button's `sm` is the app's\n       * second most common at 167 call sites, and while the field was locked\n       * to `md` the pair was 10px out of alignment with no supported fix.\n       *\n       * Type does NOT scale, which is the one place this axis deliberately\n       * departs from Button's. iOS Safari zooms the viewport when a focused\n       * field's text is under 16px, so `text-base` stays pinned in the base\n       * at every rung -- see the note there. Shrinking the box is a layout\n       * choice; shrinking the type is a bug on a phone.\n       */\n      size: {\n        sm: \"h-(--density-control-h-sm) px-(--density-control-pad-sm)\",\n        md: \"h-(--density-control-h-md) px-(--density-control-pad-md)\",\n        lg: \"h-(--density-control-h-lg) px-(--density-control-pad-lg)\",\n      },\n      // Declared empty and filled by the compound variants below: the affix\n      // inset depends on BOTH whether a slot is used and which rung it is on.\n      hasStartIcon: { true: \"\" },\n      hasEndIcon: { true: \"\" },\n    },\n    compoundVariants: [\n      // The affix slots float ABOVE the field rather than sitting beside it\n      // in a flex row, so the only thing keeping the value from running\n      // underneath a glyph is this padding. It is the same three tokens that\n      // place the glyph -- inline padding, icon box, control gap -- so the\n      // text and the glyph move together across density AND size. A\n      // hand-tuned `pl-9` at the call site can do neither, and the product\n      // app has eighteen of those.\n      {\n        size: \"sm\",\n        hasStartIcon: true,\n        class:\n          \"ps-[calc(var(--density-control-pad-sm)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"md\",\n        hasStartIcon: true,\n        class:\n          \"ps-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"lg\",\n        hasStartIcon: true,\n        class:\n          \"ps-[calc(var(--density-control-pad-lg)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"sm\",\n        hasEndIcon: true,\n        class:\n          \"pe-[calc(var(--density-control-pad-sm)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"md\",\n        hasEndIcon: true,\n        class:\n          \"pe-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"lg\",\n        hasEndIcon: true,\n        class:\n          \"pe-[calc(var(--density-control-pad-lg)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n    ],\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/**\n * An affix slot.\n *\n * `pointer-events-none` is load-bearing, not cosmetic: the slot is painted on\n * top of the field, so without it the glyph swallows the click that was meant\n * to focus the input. Which also fixes the slot's scope -- these are\n * DECORATIVE marks. An interactive trailing control (a password reveal, a\n * clear button) needs its own pointer events and its own accessible name, and\n * the census found no call site for one, so it is not built here.\n *\n * Logical properties throughout. The product app's eighteen hand-rolled\n * adornments are all `absolute left-*`, with `absolute start-*` at zero\n * occurrences, so every one of them puts the glyph on the wrong side under\n * RTL and lets the text run over it.\n */\nconst affixVariants = cva(\n  [\n    \"pointer-events-none absolute inset-y-0 flex items-center\",\n    \"text-muted-foreground\",\n    // Sized like Button's icon slots, and skipped when the caller sized the\n    // glyph themselves. An svg with neither a width attribute nor a resolved\n    // class renders at 0x0 and every position assertion still passes.\n    \"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  ],\n  {\n    variants: {\n      side: { start: \"\", end: \"\" },\n      size: { sm: \"\", md: \"\", lg: \"\" },\n    },\n    // The glyph's inset is the field's own inline padding, so it lines up with\n    // where the value would have started. That makes it a pair of axes, not\n    // one: a small field at the medium inset puts the glyph under the text.\n    compoundVariants: [\n      { side: \"start\", size: \"sm\", class: \"start-(--density-control-pad-sm)\" },\n      { side: \"start\", size: \"md\", class: \"start-(--density-control-pad-md)\" },\n      { side: \"start\", size: \"lg\", class: \"start-(--density-control-pad-lg)\" },\n      { side: \"end\", size: \"sm\", class: \"end-(--density-control-pad-sm)\" },\n      { side: \"end\", size: \"md\", class: \"end-(--density-control-pad-md)\" },\n      { side: \"end\", size: \"lg\", class: \"end-(--density-control-pad-lg)\" },\n    ],\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/**\n * A single-line text field.\n *\n * @example\n * <Input type=\"email\" placeholder=\"you@example.com\" value={v} onChange={e => set(e.target.value)} />\n * <Input aria-label=\"Search\" startIcon={<SearchIcon aria-hidden />} />\n */\nexport interface InputProps extends Omit<AriaInputProps, \"className\" | \"style\" | \"size\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Control scale. Height and inline padding come from the same\n   * `--density-control-*` tokens as Button, so a field and a button on one\n   * rung are the same height.\n   *\n   * Type does not scale with it: the field stays at 16px everywhere, because\n   * iOS Safari zooms the viewport when a focused input's text is smaller.\n   *\n   * This REPLACES the native `size` attribute, which React Aria inherits from\n   * `InputHTMLAttributes` as a character count. No call site in the census\n   * used it; set a width with `className` instead.\n   *\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Decorative glyph at the leading edge of the field.\n   *\n   * Mark it `aria-hidden` -- the field's label carries the accessible name,\n   * and a second name source only makes it announce twice. It is sized at\n   * `--icon-sm` unless it carries a `size-*` class of its own, positioned\n   * from `--density-control-pad-md`, and the field's leading padding grows to\n   * match so the value cannot run underneath it.\n   *\n   * The slot is `pointer-events: none`, so a click on the glyph focuses the\n   * field. That makes it decorative by construction: an interactive\n   * adornment -- a password reveal, a clear button -- is NOT this prop.\n   *\n   * Two named slots rather than one `icon` plus a position prop, matching\n   * Button: a search field can legitimately carry a leading glyph AND a\n   * trailing unit, which one slot cannot express.\n   */\n  startIcon?: ReactNode;\n  /** Decorative glyph at the trailing edge. Same rules as {@link InputProps.startIcon}. */\n  endIcon?: ReactNode;\n}\n\nexport function Input({ className, size = \"md\", startIcon, endIcon, ...props }: InputProps) {\n  const input = (\n    <AriaInput\n      {...props}\n      data-slot=\"input\"\n      className={cn(\n        inputVariants({\n          size,\n          hasStartIcon: startIcon !== undefined,\n          hasEndIcon: endIcon !== undefined,\n        }),\n        className,\n      )}\n    />\n  );\n\n  // With neither slot used there is no wrapper AT ALL, so the DOM is\n  // byte-identical to what shipped before this prop existed. That is what\n  // keeps this additive for the 97 call sites that pass no glyph, and\n  // NoIconsLeaveDomUnchanged is the assertion holding it true.\n  if (startIcon === undefined && endIcon === undefined) return input;\n\n  // An overlay, not a flex row. Moving the border onto this wrapper would\n  // take the painted surface off [data-slot=\"input\"] -- the selector the\n  // escape hatch is built on -- and would force the focus ring onto\n  // :focus-within and the invalid border onto :has(), when React Aria\n  // already puts data-focus-visible and data-invalid on the input itself.\n  return (\n    <span data-slot=\"input-wrapper\" className=\"relative block w-full\">\n      {input}\n      {startIcon === undefined ? null : (\n        <span data-slot=\"input-start-icon\" className={affixVariants({ side: \"start\", size })}>\n          {startIcon}\n        </span>\n      )}\n      {endIcon === undefined ? null : (\n        <span data-slot=\"input-end-icon\" className={affixVariants({ side: \"end\", size })}>\n          {endIcon}\n        </span>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,gBAAgB,IAC3B;CACE,qBAAqB;CAOrB;CAIA;CACA;AACF,GACA;CACE,UAAU;;;;;;;;;;;;;;EAcR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EAGA,cAAc,EAAE,MAAM,GAAG;EACzB,YAAY,EAAE,MAAM,GAAG;CACzB;CACA,kBAAkB;EAQhB;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;CACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;;;;;;;;;;;;;;;AAiBA,MAAM,gBAAgB,IACpB;CACE;CACA;CAIA;AACF,GACA;CACE,UAAU;EACR,MAAM;GAAE,OAAO;GAAI,KAAK;EAAG;EAC3B,MAAM;GAAE,IAAI;GAAI,IAAI;GAAI,IAAI;EAAG;CACjC;CAIA,kBAAkB;EAChB;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;EACnE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;EACnE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;CACrE;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;AAiDA,SAAgBA,QAAM,EAAE,WAAW,OAAO,MAAM,WAAW,SAAS,GAAG,SAAqB;CAC1F,MAAM,QACJ,oBAACC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GACT,cAAc;GACZ;GACA,cAAc,cAAc,KAAA;GAC5B,YAAY,YAAY,KAAA;EAC1B,CAAC,GACD,SACF;CACD,CAAA;CAOH,IAAI,cAAc,KAAA,KAAa,YAAY,KAAA,GAAW,OAAO;CAO7D,OACE,qBAAC,QAAD;EAAM,aAAU;EAAgB,WAAU;EAA1C,UAAA;GACG;GACA,cAAc,KAAA,IAAY,OACzB,oBAAC,QAAD;IAAM,aAAU;IAAmB,WAAW,cAAc;KAAE,MAAM;KAAS;IAAK,CAAC;IAChF,UAAA;GACG,CAAA;GAEP,YAAY,KAAA,IAAY,OACvB,oBAAC,QAAD;IAAM,aAAU;IAAiB,WAAW,cAAc;KAAE,MAAM;KAAO;IAAK,CAAC;IAC5E,UAAA;GACG,CAAA;EAEJ;;AAEV"}

package/dist/label/index.d.ts

@@ -0,0 +1,2 @@
+import { Label, LabelProps, labelVariants } from "./label.js";
+export { Label, type LabelProps, labelVariants };

package/dist/label/index.js

@@ -0,0 +1,2 @@
+import { Label, labelVariants } from "./label.js";
+export { Label, labelVariants };

package/dist/label/label.d.ts

@@ -0,0 +1,41 @@
+import { LabelProps } from "react-aria-components";
+//#region src/label/label.d.ts
+/**
+ * Label, ported from the legacy Radix Label onto React Aria's.
+ *
+ * Census: 11 files, 39 uses. 26 pass `htmlFor`, 19 pass `className`, and
+ * nothing else recurs -- so the surface really is "a styled <label>".
+ *
+ * Two legacy rules are NOT ported, and both for the same reason: they
+ * depend on markup this component cannot see.
+ *
+ * - `peer-disabled:cursor-not-allowed peer-disabled:opacity-50` requires the
+ *   consumer to have put `peer` on a sibling input. Nothing in this library
+ *   does, and a rule that silently does nothing unless the caller happens to
+ *   add a class is worse than no rule.
+ * - `group-data-[disabled=true]:*` requires an ancestor marked `group` with
+ *   `data-disabled="true"`. React Aria fields set `data-disabled` on their
+ *   own wrapper and supply it through LabelContext, so when TextField lands
+ *   the disabled treatment comes from the field rather than from a class
+ *   the caller remembered.
+ *
+ * Every string in the cva block below is a STATIC literal.
+ */
+export declare const labelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * A form label.
+ *
+ * Inside a React Aria field (`TextField`, `Checkbox`, ...) the association
+ * is automatic through context. Standalone, pass `htmlFor`.
+ *
+ * @example
+ * <Label htmlFor="email">Email</Label>
+ */
+interface LabelProps$1 extends Omit<LabelProps, "className" | "style"> {
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+declare function Label$1({ className, ...props }: LabelProps$1): import("react").JSX.Element;
+//#endregion
+export { Label$1 as Label, LabelProps$1 as LabelProps };
+//# sourceMappingURL=label.d.ts.map

package/dist/label/label.js

@@ -0,0 +1,44 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "class-variance-authority";
+import { Label } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+//#region src/label/label.tsx
+/**
+* Label, ported from the legacy Radix Label onto React Aria's.
+*
+* Census: 11 files, 39 uses. 26 pass `htmlFor`, 19 pass `className`, and
+* nothing else recurs -- so the surface really is "a styled <label>".
+*
+* Two legacy rules are NOT ported, and both for the same reason: they
+* depend on markup this component cannot see.
+*
+* - `peer-disabled:cursor-not-allowed peer-disabled:opacity-50` requires the
+*   consumer to have put `peer` on a sibling input. Nothing in this library
+*   does, and a rule that silently does nothing unless the caller happens to
+*   add a class is worse than no rule.
+* - `group-data-[disabled=true]:*` requires an ancestor marked `group` with
+*   `data-disabled="true"`. React Aria fields set `data-disabled` on their
+*   own wrapper and supply it through LabelContext, so when TextField lands
+*   the disabled treatment comes from the field rather than from a class
+*   the caller remembered.
+*
+* Every string in the cva block below is a STATIC literal.
+*/
+const labelVariants = cva([
+	"inline-flex items-center gap-2",
+	"font-sans text-sm leading-(--leading-none) font-medium text-foreground",
+	"select-none",
+	"box-border"
+]);
+function Label$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Label, {
+		...props,
+		"data-slot": "label",
+		className: cn(labelVariants(), className)
+	});
+}
+//#endregion
+export { Label$1 as Label, labelVariants };
+
+//# sourceMappingURL=label.js.map

package/dist/label/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","names":["Label","AriaLabel"],"sources":["../../src/label/label.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { Label as AriaLabel, type LabelProps as AriaLabelProps } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Label, ported from the legacy Radix Label onto React Aria's.\n *\n * Census: 11 files, 39 uses. 26 pass `htmlFor`, 19 pass `className`, and\n * nothing else recurs -- so the surface really is \"a styled <label>\".\n *\n * Two legacy rules are NOT ported, and both for the same reason: they\n * depend on markup this component cannot see.\n *\n * - `peer-disabled:cursor-not-allowed peer-disabled:opacity-50` requires the\n *   consumer to have put `peer` on a sibling input. Nothing in this library\n *   does, and a rule that silently does nothing unless the caller happens to\n *   add a class is worse than no rule.\n * - `group-data-[disabled=true]:*` requires an ancestor marked `group` with\n *   `data-disabled=\"true\"`. React Aria fields set `data-disabled` on their\n *   own wrapper and supply it through LabelContext, so when TextField lands\n *   the disabled treatment comes from the field rather than from a class\n *   the caller remembered.\n *\n * Every string in the cva block below is a STATIC literal.\n */\nexport const labelVariants = cva([\n  \"inline-flex items-center gap-2\",\n  // leading-* AFTER text-*: tailwind-merge treats a later text-* as owning\n  // line-height and silently strips a leading-* that precedes it.\n  \"font-sans text-sm leading-(--leading-none) font-medium text-foreground\",\n  \"select-none\",\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load none.\n  // A bare <label> inherits the host page's serif; the Accordion shipped its\n  // panel exactly that way.\n  \"box-border\",\n]);\n\n/**\n * A form label.\n *\n * Inside a React Aria field (`TextField`, `Checkbox`, ...) the association\n * is automatic through context. Standalone, pass `htmlFor`.\n *\n * @example\n * <Label htmlFor=\"email\">Email</Label>\n */\nexport interface LabelProps extends Omit<AriaLabelProps, \"className\" | \"style\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport function Label({ className, ...props }: LabelProps) {\n  return <AriaLabel {...props} data-slot=\"label\" className={cn(labelVariants(), className)} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAa,gBAAgB,IAAI;CAC/B;CAGA;CACA;CAIA;AACF,CAAC;AAgBD,SAAgBA,QAAM,EAAE,WAAW,GAAG,SAAqB;CACzD,OAAO,oBAACC,OAAD;EAAW,GAAI;EAAO,aAAU;EAAQ,WAAW,GAAG,cAAc,GAAG,SAAS;CAAI,CAAA;AAC7F"}

package/dist/lib/field-surface.js

@@ -0,0 +1,40 @@
+import { cva } from "class-variance-authority";
+//#region src/lib/field-surface.ts
+/**
+* The shared surface of a text entry control.
+*
+* Extracted at the Rule of Two, and for a reason the legacy demonstrates:
+* its `input.tsx` and `textarea.tsx` styled the same surface twice and had
+* already drifted. The input is `bg-transparent`, the textarea is
+* `bg-background`. The input focuses with `focus-visible:border-ring` plus a
+* 3px ring; the textarea uses a 2px ring with an offset. The input has
+* `aria-invalid` treatment, the textarea has none. None of those differences
+* is a decision anyone made -- they are two files edited at different times.
+*
+* Everything that must look identical between an Input and a Textarea lives
+* here. Only the box geometry differs, and that is the caller's variant.
+*
+* Every string is a STATIC literal. Tailwind scans source text, so a class
+* assembled at runtime is invisible to it and would never be emitted.
+*/
+const fieldSurfaceVariants = cva([
+	"w-full min-w-0",
+	"box-border font-sans",
+	"rounded-md border-(length:--border-width) border-border",
+	"bg-background text-foreground",
+	"shadow-surface",
+	"placeholder:text-muted-foreground",
+	"selection:bg-primary selection:text-primary-foreground",
+	"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
+	"outline-none",
+	"data-[focus-visible]:outline-solid",
+	"data-[focus-visible]:outline-(length:--focus-ring-width)",
+	"data-[focus-visible]:outline-offset-(--focus-ring-offset)",
+	"data-[focus-visible]:outline-(--color-ring)",
+	"data-[invalid]:border-destructive-strong",
+	"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)"
+]);
+//#endregion
+export { fieldSurfaceVariants };
+
+//# sourceMappingURL=field-surface.js.map

package/dist/lib/field-surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-surface.js","names":[],"sources":["../../src/lib/field-surface.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\n/**\n * The shared surface of a text entry control.\n *\n * Extracted at the Rule of Two, and for a reason the legacy demonstrates:\n * its `input.tsx` and `textarea.tsx` styled the same surface twice and had\n * already drifted. The input is `bg-transparent`, the textarea is\n * `bg-background`. The input focuses with `focus-visible:border-ring` plus a\n * 3px ring; the textarea uses a 2px ring with an offset. The input has\n * `aria-invalid` treatment, the textarea has none. None of those differences\n * is a decision anyone made -- they are two files edited at different times.\n *\n * Everything that must look identical between an Input and a Textarea lives\n * here. Only the box geometry differs, and that is the caller's variant.\n *\n * Every string is a STATIC literal. Tailwind scans source text, so a class\n * assembled at runtime is invisible to it and would never be emitted.\n */\nexport const fieldSurfaceVariants = cva([\n  \"w-full min-w-0\",\n\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load none.\n  // A bare <input> keeps the user-agent border, background and Arial face,\n  // and content-box would add the padding on top of the width.\n  \"box-border font-sans\",\n\n  \"rounded-md border-(length:--border-width) border-border\",\n  \"bg-background text-foreground\",\n  \"shadow-surface\",\n\n  // --color-muted-foreground is 5.25:1 on the page, so the placeholder is\n  // legible rather than the usual near-invisible grey. It is still text and\n  // the contrast contract holds it to the 4.5 floor.\n  \"placeholder:text-muted-foreground\",\n  \"selection:bg-primary selection:text-primary-foreground\",\n\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n\n  // outline-solid is load-bearing. `outline-none` sets BOTH\n  // outline-style:none and --tw-outline-style:none, and the width utility\n  // resolves its style from that same variable -- so a focus rule can apply\n  // a width and a colour while faithfully re-applying none, and paint\n  // nothing. Button shipped exactly that.\n  //\n  // An outline, not the legacy `ring-[3px]` box-shadow: box-shadows are\n  // discarded under forced-colors, taking the only focus indication with\n  // them, and axe has no focus-indicator rule to notice.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n\n  // React Aria sets data-invalid from the native `aria-invalid` attribute,\n  // so this costs no API surface and works both bare and inside a\n  // TextField. destructive-strong rather than destructive: the fill token\n  // is 2.44:1-class and cannot describe a boundary (WCAG 1.4.11).\n  //\n  // The border CHANGES COLOUR only. Colour alone is not a state cue\n  // (WCAG 1.4.1), which is why an invalid field must also carry a message --\n  // that is the consumer's job, and the migration table says so.\n  \"data-[invalid]:border-destructive-strong\",\n\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,MAAa,uBAAuB,IAAI;CACtC;CAKA;CAEA;CACA;CACA;CAKA;CACA;CAEA;CAWA;CACA;CACA;CACA;CACA;CAUA;CAEA;AACF,CAAC"}

package/dist/lib/selection-control.js

@@ -0,0 +1,57 @@
+import { cva } from "class-variance-authority";
+//#region src/lib/selection-control.ts
+/**
+* The parts every selection control shares: Checkbox, Radio and Switch.
+*
+* Extracted at the Rule of Three, and for the reason this migration keeps
+* running into -- the legacy shipped `input.tsx` and `textarea.tsx` styling
+* one surface twice, and `dialog.tsx` and `alert-dialog.tsx` doing the same,
+* and both pairs had already drifted in ways nobody decided. Three controls
+* with the same label geometry and the same focus ring is where that starts.
+*
+* React Aria renders all three as a `<label>` wrapping a visually-hidden
+* real input, and puts the state on the LABEL -- so the visible box or track
+* has to reach its own state through `group-*`.
+*
+* Every string is a STATIC literal. Tailwind scans source text, so a class
+* assembled at runtime is invisible to it and would never be emitted.
+*/
+/**
+* The label that wraps the control and its text.
+*
+* `group` is load-bearing: React Aria puts `data-selected`,
+* `data-focus-visible` and the rest on this element, and CSS cannot look
+* upward from the box to them.
+*/
+const selectionLabelVariants = cva([
+	"group inline-flex items-center gap-2",
+	"min-h-6 min-w-6 justify-center",
+	"box-border font-sans text-sm leading-(--leading-normal) text-foreground",
+	"cursor-pointer select-none",
+	"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)"
+]);
+/**
+* The focus ring, drawn on the VISIBLE control rather than the input.
+*
+* React Aria's input is visually hidden, and an outline on a clipped 1px
+* element is invisible.
+*
+* `outline-solid` is load-bearing, not decoration. `outline-none` sets both
+* `outline-style: none` and `--tw-outline-style: none`, and the width
+* utility resolves its style from that same variable -- so a focus rule can
+* apply a width and a colour while faithfully re-applying none, and paint
+* nothing at all. Button shipped exactly that: keyboard-focusable with no
+* visible ring, and every automated gate stayed green because axe has no
+* focus-indicator rule.
+*/
+const selectionRingVariants = cva([
+	"outline-none",
+	"group-data-[focus-visible]:outline-solid",
+	"group-data-[focus-visible]:outline-(length:--focus-ring-width)",
+	"group-data-[focus-visible]:outline-offset-(--focus-ring-offset)",
+	"group-data-[focus-visible]:outline-(--color-ring)"
+]);
+//#endregion
+export { selectionLabelVariants, selectionRingVariants };
+
+//# sourceMappingURL=selection-control.js.map

package/dist/lib/selection-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-control.js","names":[],"sources":["../../src/lib/selection-control.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\n/**\n * The parts every selection control shares: Checkbox, Radio and Switch.\n *\n * Extracted at the Rule of Three, and for the reason this migration keeps\n * running into -- the legacy shipped `input.tsx` and `textarea.tsx` styling\n * one surface twice, and `dialog.tsx` and `alert-dialog.tsx` doing the same,\n * and both pairs had already drifted in ways nobody decided. Three controls\n * with the same label geometry and the same focus ring is where that starts.\n *\n * React Aria renders all three as a `<label>` wrapping a visually-hidden\n * real input, and puts the state on the LABEL -- so the visible box or track\n * has to reach its own state through `group-*`.\n *\n * Every string is a STATIC literal. Tailwind scans source text, so a class\n * assembled at runtime is invisible to it and would never be emitted.\n */\n\n/**\n * The label that wraps the control and its text.\n *\n * `group` is load-bearing: React Aria puts `data-selected`,\n * `data-focus-visible` and the rest on this element, and CSS cannot look\n * upward from the box to them.\n */\nexport const selectionLabelVariants = cva([\n  \"group inline-flex items-center gap-2\",\n\n  // WCAG 2.2 target-size (2.5.8) wants 24x24 CSS pixels. The controls are\n  // 16-20px, which is conventional, so the LABEL carries the target: with\n  // text it is large anyway, and without -- a table row selector -- this\n  // minimum is the only thing keeping it hittable.\n  //\n  // Measured, not assumed: axe's target-size rule did NOT fire on a 16px\n  // control during the Checkbox sabotage run. Only the explicit assertion\n  // caught it.\n  \"min-h-6 min-w-6 justify-center\",\n\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load none.\n  // An unstyled <label> inherits the host page's serif; the Accordion\n  // shipped its panel exactly that way.\n  \"box-border font-sans text-sm leading-(--leading-normal) text-foreground\",\n\n  \"cursor-pointer select-none\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n\n/**\n * The focus ring, drawn on the VISIBLE control rather than the input.\n *\n * React Aria's input is visually hidden, and an outline on a clipped 1px\n * element is invisible.\n *\n * `outline-solid` is load-bearing, not decoration. `outline-none` sets both\n * `outline-style: none` and `--tw-outline-style: none`, and the width\n * utility resolves its style from that same variable -- so a focus rule can\n * apply a width and a colour while faithfully re-applying none, and paint\n * nothing at all. Button shipped exactly that: keyboard-focusable with no\n * visible ring, and every automated gate stayed green because axe has no\n * focus-indicator rule.\n */\nexport const selectionRingVariants = cva([\n  \"outline-none\",\n  \"group-data-[focus-visible]:outline-solid\",\n  \"group-data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"group-data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"group-data-[focus-visible]:outline-(--color-ring)\",\n]);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,yBAAyB,IAAI;CACxC;CAUA;CAKA;CAEA;CACA;AACF,CAAC;;;;;;;;;;;;;;;AAgBD,MAAa,wBAAwB,IAAI;CACvC;CACA;CACA;CACA;CACA;AACF,CAAC"}

package/dist/menu/index.d.ts

@@ -0,0 +1,2 @@
+import { Menu, MenuItem, MenuItemProps, MenuProps, MenuSeparator, MenuTrigger, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants } from "./menu.js";
+export { Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator, MenuTrigger, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants };

package/dist/menu/index.js

@@ -0,0 +1,2 @@
+import { Menu, MenuItem, MenuSeparator, MenuTrigger, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants } from "./menu.js";
+export { Menu, MenuItem, MenuSeparator, MenuTrigger, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants };