@fracazo/design-system 0.1.0 → 0.2.0

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+declare const inputBaseClassName: string;
+/**
+ * Single-line text field, controlled-first (coerces value to empty string).
+ *
+ * Use for: react-hook-form fields via FormControl, and standalone controlled
+ * fields like the delivery email. inputBaseClassName lets lookalike inputs
+ * (PlaceAutocomplete) match without duplicating classes.
+ * Avoid when: capturing an enumerable choice; use OptionCard groups.
+ */
+declare function Input({ className, type, value, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+export { Input, inputBaseClassName };

package/dist/src/ui/input.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../cn.js";
+// Shared so other inputs (e.g. PlaceAutocomplete) can match the shadcn look
+// without duplicating the class string.
+const inputBaseClassName = cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input min-h-[48px] w-full min-w-0 rounded-md border bg-card px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive");
+/**
+ * Single-line text field, controlled-first (coerces value to empty string).
+ *
+ * Use for: react-hook-form fields via FormControl, and standalone controlled
+ * fields like the delivery email. inputBaseClassName lets lookalike inputs
+ * (PlaceAutocomplete) match without duplicating classes.
+ * Avoid when: capturing an enumerable choice; use OptionCard groups.
+ */
+function Input({ className, type, value, ...props }) {
+    return (_jsx("input", { type: type, "data-slot": "input", 
+        // Coerce undefined/null to '' to prevent React uncontrolled-to-controlled warnings
+        value: value ?? '', className: cn(inputBaseClassName, className), ...props }));
+}
+export { Input, inputBaseClassName };

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { Label as LabelPrimitive } from "radix-ui";
+/**
+ * Form field label with peer-disabled handling.
+ *
+ * Use for: labelling standalone controlled fields outside react-hook-form.
+ * Avoid when: inside a FormField; use FormLabel, which wires error state
+ * and htmlFor automatically.
+ */
+declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): React.JSX.Element;
+export { Label };

package/dist/src/ui/label.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Label as LabelPrimitive } from "radix-ui";
+import { cn } from "../cn.js";
+/**
+ * Form field label with peer-disabled handling.
+ *
+ * Use for: labelling standalone controlled fields outside react-hook-form.
+ * Avoid when: inside a FormField; use FormLabel, which wires error state
+ * and htmlFor automatically.
+ */
+function Label({ className, ...props }) {
+    return (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props }));
+}
+export { Label };

package/dist/src/ui/popover.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+/**
+ * Anchored floating panel (Radix), non-modal.
+ *
+ * Use for: attaching transient UI to a control, like the PlaceAutocomplete
+ * suggestion list (anchor on the input so focus never moves).
+ * Avoid when: the content is a task or announcement; use Dialog or Sheet.
+ */
+declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
+declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
+declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
+declare function PopoverDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverHeader, PopoverTitle, PopoverDescription, };

package/dist/src/ui/popover.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { cn } from "../cn.js";
+/**
+ * Anchored floating panel (Radix), non-modal.
+ *
+ * Use for: attaching transient UI to a control, like the PlaceAutocomplete
+ * suggestion list (anchor on the input so focus never moves).
+ * Avoid when: the content is a task or announcement; use Dialog or Sheet.
+ */
+function Popover({ ...props }) {
+    return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+    return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", className), ...props }) }));
+}
+function PopoverAnchor({ ...props }) {
+    return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function PopoverHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "popover-header", className: cn("flex flex-col gap-1 text-sm", className), ...props }));
+}
+function PopoverTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "popover-title", className: cn("font-medium", className), ...props }));
+}
+function PopoverDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "popover-description", className: cn("text-muted-foreground", className), ...props }));
+}
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverHeader, PopoverTitle, PopoverDescription, };

package/dist/src/ui/progress.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { Progress as ProgressPrimitive } from "radix-ui";
+/**
+ * Determinate progress bar, flat primary fill.
+ *
+ * Use for: simple completion indicators in future utilitarian UI.
+ * Avoid when: the bar is a brand moment; the questionnaire's gradient
+ * progress bars are bespoke for that reason.
+ */
+declare function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>): React.JSX.Element;
+export { Progress };

package/dist/src/ui/progress.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Progress as ProgressPrimitive } from "radix-ui";
+import { cn } from "../cn.js";
+/**
+ * Determinate progress bar, flat primary fill.
+ *
+ * Use for: simple completion indicators in future utilitarian UI.
+ * Avoid when: the bar is a brand moment; the questionnaire's gradient
+ * progress bars are bespoke for that reason.
+ */
+function Progress({ className, value, ...props }) {
+    return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", className: cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className), ...props, children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: "bg-primary h-full w-full flex-1 transition-transform", style: { transform: `translateX(-${100 - (value || 0)}%)` } }) }));
+}
+export { Progress };

package/dist/src/ui/radio-group.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+/**
+ * Standard radio group (Radix) for compact single choice.
+ *
+ * Use for: short enumerations in dense or utilitarian UI.
+ * Avoid when: asking birth plan questions; the house pattern is
+ * SingleSelectCardGroup icon cards, not radios.
+ */
+declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): React.JSX.Element;
+declare function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>): React.JSX.Element;
+export { RadioGroup, RadioGroupItem };

package/dist/src/ui/radio-group.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CircleIcon } from "lucide-react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import { cn } from "../cn.js";
+/**
+ * Standard radio group (Radix) for compact single choice.
+ *
+ * Use for: short enumerations in dense or utilitarian UI.
+ * Avoid when: asking birth plan questions; the house pattern is
+ * SingleSelectCardGroup icon cards, not radios.
+ */
+function RadioGroup({ className, ...props }) {
+    return (_jsx(RadioGroupPrimitive.Root, { "data-slot": "radio-group", className: cn("grid gap-3", className), ...props }));
+}
+function RadioGroupItem({ className, ...props }) {
+    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: cn("border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: _jsx(CircleIcon, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" }) }) }));
+}
+export { RadioGroup, RadioGroupItem };

package/dist/src/ui/select.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+/**
+ * Dropdown select (Radix) for choosing one value from a longer list.
+ *
+ * Use for: long enumerations where cards or radios would sprawl,
+ * such as future admin or filter surfaces.
+ * Avoid when: the list is short and tappable; icon cards or chip toggles
+ * fit the product better. Date entry uses native date inputs, not Select.
+ */
+declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): React.JSX.Element;
+declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): React.JSX.Element;
+declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: "sm" | "default";
+}): React.JSX.Element;
+declare function SelectContent({ className, children, position, align, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): React.JSX.Element;
+declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): React.JSX.Element;
+declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): React.JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): React.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): React.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): React.JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/src/ui/select.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
+import { cn } from "../cn.js";
+/**
+ * Dropdown select (Radix) for choosing one value from a longer list.
+ *
+ * Use for: long enumerations where cards or radios would sprawl,
+ * such as future admin or filter surfaces.
+ * Avoid when: the list is short and tappable; icon cards or chip toggles
+ * fit the product better. Date entry uses native date inputs, not Select.
+ */
+function Select({ ...props }) {
+    return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup({ ...props }) {
+    return _jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue({ ...props }) {
+    return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({ className, size = "default", children, ...props }) {
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("cursor-pointer border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-card px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })] }));
+}
+function SelectContent({ className, children, position = "item-aligned", align = "center", ...props }) {
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", position === "popper" &&
+                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, align: align, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
+                        "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
+}
+function SelectLabel({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("text-muted-foreground px-2 py-1.5 text-xs", className), ...props }));
+}
+function SelectItem({ className, children, ...props }) {
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx("span", { "data-slot": "select-item-indicator", className: "absolute right-2 flex size-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
+}
+function SelectSeparator({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("bg-border pointer-events-none -mx-1 my-1 h-px", className), ...props }));
+}
+function SelectScrollUpButton({ className, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronUpIcon, { className: "size-4" }) }));
+}
+function SelectScrollDownButton({ className, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronDownIcon, { className: "size-4" }) }));
+}
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/src/ui/sheet.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { Dialog as SheetPrimitive } from "radix-ui";
+/**
+ * Sliding panel (Radix). In this product it is used exclusively as a
+ * mobile bottom sheet.
+ *
+ * Use for: supplementary mobile content: plan preview, question info,
+ * did-you-know detail. Callers add rounded-t-xl and a max height.
+ * Avoid when: content must persist beside the page on desktop; render an
+ * aside instead (see DidYouKnowBar's breakpoint split).
+ */
+declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): React.JSX.Element;
+declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): React.JSX.Element;
+declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): React.JSX.Element;
+declare function SheetContent({ className, children, side, showCloseButton, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
+    side?: "top" | "right" | "bottom" | "left";
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): React.JSX.Element;
+declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>): React.JSX.Element;
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/dist/src/ui/sheet.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import { Dialog as SheetPrimitive } from "radix-ui";
+import { cn } from "../cn.js";
+/**
+ * Sliding panel (Radix). In this product it is used exclusively as a
+ * mobile bottom sheet.
+ *
+ * Use for: supplementary mobile content: plan preview, question info,
+ * did-you-know detail. Callers add rounded-t-xl and a max height.
+ * Avoid when: content must persist beside the page on desktop; render an
+ * aside instead (see DidYouKnowBar's breakpoint split).
+ */
+function Sheet({ ...props }) {
+    return _jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({ ...props }) {
+    return _jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({ ...props }) {
+    return _jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
+}
+function SheetPortal({ ...props }) {
+    return _jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({ className, ...props }) {
+    return (_jsx(SheetPrimitive.Overlay, { "data-slot": "sheet-overlay", className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className), ...props }));
+}
+function SheetContent({ className, children, side = "right", showCloseButton = true, ...props }) {
+    return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { "data-slot": "sheet-content", className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", side === "right" &&
+                    "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm", side === "left" &&
+                    "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", side === "top" &&
+                    "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b", side === "bottom" &&
+                    "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t", className), ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+}
+function SheetHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sheet-header", className: cn("flex flex-col gap-1.5 p-4", className), ...props }));
+}
+function SheetFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sheet-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props }));
+}
+function SheetTitle({ className, ...props }) {
+    return (_jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", className: cn("text-foreground font-semibold", className), ...props }));
+}
+function SheetDescription({ className, ...props }) {
+    return (_jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn("text-muted-foreground text-sm", className), ...props }));
+}
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/dist/src/ui/sortable-list.d.ts

@@ -0,0 +1,26 @@
+export interface SortableItem {
+    id: string;
+    label: string;
+}
+export interface SortableListProps {
+    /** All available items (unranked pool) */
+    available: SortableItem[];
+    /** Currently ranked items (in order) */
+    ranked: SortableItem[];
+    /** Maximum items in the ranked list */
+    maxRanked: number;
+    /** Called when ranked list changes */
+    onRankedChange: (ranked: SortableItem[]) => void;
+    /** Label for the ranked zone */
+    rankedLabel?: string;
+    /** Label for the available zone */
+    availableLabel?: string;
+}
+/**
+ * Drag-to-rank with two zones: a capped ranked list and a tap-to-add pool.
+ * Touch, mouse and keyboard support; drag is scoped to the grip handle.
+ *
+ * Use for: ranking a small capped set, like the Top 5 priorities editor.
+ * Avoid when: order does not matter; use MultiSelectCardGroup.
+ */
+export declare function SortableList({ available, ranked, maxRanked, onRankedChange, rankedLabel, availableLabel, }: SortableListProps): import("react").JSX.Element;

package/dist/src/ui/sortable-list.js

@@ -0,0 +1,92 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// =============================================================================
+// SortableList
+//
+// Reusable drag-to-rank component for ranking a small capped set.
+// Two zones: "Ranked" (sortable via @dnd-kit, max N items) and
+// "Available" (tap to add). Touch + mouse + keyboard support.
+//
+// Drag listeners are scoped to the grip handle only so that taps on
+// the remove button and item body work normally on touch devices.
+// =============================================================================
+import { useCallback, useId } from 'react';
+import { DndContext, closestCenter, KeyboardSensor, PointerSensor, TouchSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, arrayMove, } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { cn } from '../cn.js';
+// -----------------------------------------------------------------------------
+// Drag Handle (visual grip icon; only this element receives drag listeners)
+// -----------------------------------------------------------------------------
+function DragHandle({ listeners, attributes, }) {
+    return (_jsx("button", { type: "button", className: "flex h-8 w-8 shrink-0 cursor-grab items-center justify-center rounded text-muted-foreground touch-none hover:text-foreground active:cursor-grabbing", "aria-label": "Drag to reorder", ...attributes, ...listeners, children: _jsxs("svg", { className: "h-4 w-4", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: [_jsx("circle", { cx: "5", cy: "3", r: "1.5" }), _jsx("circle", { cx: "11", cy: "3", r: "1.5" }), _jsx("circle", { cx: "5", cy: "8", r: "1.5" }), _jsx("circle", { cx: "11", cy: "8", r: "1.5" }), _jsx("circle", { cx: "5", cy: "13", r: "1.5" }), _jsx("circle", { cx: "11", cy: "13", r: "1.5" })] }) }));
+}
+// -----------------------------------------------------------------------------
+// Sortable Item (ranked zone)
+// -----------------------------------------------------------------------------
+function SortableRankedItem({ item, rank, onRemove, }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id: item.id });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+    return (_jsxs("div", { ref: setNodeRef, style: style, className: cn('flex items-center gap-2 rounded-lg border bg-card p-3 select-none', isDragging
+            ? 'z-50 shadow-lg border-primary ring-2 ring-primary/20'
+            : 'border-border'), children: [_jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-semibold", "aria-hidden": "true", children: rank }), _jsx(DragHandle, { listeners: listeners, attributes: attributes }), _jsx("span", { className: "flex-1 text-sm font-medium", children: item.label }), _jsx("button", { type: "button", onClick: onRemove, className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-destructive/10 hover:text-destructive transition-colors", "aria-label": `Remove ${item.label} from ranked list`, children: _jsx("svg", { className: "h-4 w-4", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) }) })] }));
+}
+// -----------------------------------------------------------------------------
+// Available Item (unranked pool)
+// -----------------------------------------------------------------------------
+function AvailableItem({ item, onAdd, disabled, }) {
+    return (_jsxs("button", { type: "button", onClick: onAdd, disabled: disabled, className: cn('flex w-full items-center gap-3 rounded-lg border border-dashed p-3 text-left transition-colors', disabled
+            ? 'border-border/50 text-muted-foreground/50 cursor-not-allowed'
+            : 'border-border text-foreground hover:border-primary hover:bg-primary/5 cursor-pointer'), "aria-label": `Add ${item.label} to ranked list`, children: [_jsx("span", { className: cn('flex h-7 w-7 shrink-0 items-center justify-center rounded-full border text-sm', disabled
+                    ? 'border-border/50 text-muted-foreground/50'
+                    : 'border-primary/30 text-primary'), "aria-hidden": "true", children: "+" }), _jsx("span", { className: "flex-1 text-sm", children: item.label })] }));
+}
+// -----------------------------------------------------------------------------
+// Main Component
+// -----------------------------------------------------------------------------
+/**
+ * Drag-to-rank with two zones: a capped ranked list and a tap-to-add pool.
+ * Touch, mouse and keyboard support; drag is scoped to the grip handle.
+ *
+ * Use for: ranking a small capped set, like the Top 5 priorities editor.
+ * Avoid when: order does not matter; use MultiSelectCardGroup.
+ */
+export function SortableList({ available, ranked, maxRanked, onRankedChange, rankedLabel = 'Your top priorities', availableLabel = 'Available priorities', }) {
+    const dndId = useId();
+    const isFull = ranked.length >= maxRanked;
+    // Sensors: pointer (mouse), touch, keyboard
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: { distance: 5 },
+    }), useSensor(TouchSensor, {
+        activationConstraint: { delay: 150, tolerance: 5 },
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    // Unranked items = available items not already in ranked
+    const rankedIds = new Set(ranked.map((r) => r.id));
+    const unranked = available.filter((a) => !rankedIds.has(a.id));
+    const handleDragEnd = useCallback((event) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id)
+            return;
+        const oldIndex = ranked.findIndex((r) => r.id === active.id);
+        const newIndex = ranked.findIndex((r) => r.id === over.id);
+        if (oldIndex === -1 || newIndex === -1)
+            return;
+        onRankedChange(arrayMove(ranked, oldIndex, newIndex));
+    }, [ranked, onRankedChange]);
+    const handleAdd = useCallback((item) => {
+        if (isFull)
+            return;
+        onRankedChange([...ranked, item]);
+    }, [ranked, isFull, onRankedChange]);
+    const handleRemove = useCallback((id) => {
+        onRankedChange(ranked.filter((r) => r.id !== id));
+    }, [ranked, onRankedChange]);
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("h3", { className: "text-sm font-medium text-foreground", children: rankedLabel }), _jsxs("span", { className: "text-xs text-muted-foreground tabular-nums", children: [ranked.length, "/", maxRanked] })] }), ranked.length === 0 ? (_jsx("div", { className: "rounded-lg border-2 border-dashed border-border/60 p-6 text-center", children: _jsxs("p", { className: "text-sm text-muted-foreground", children: ["Tap items below to add your top ", maxRanked] }) })) : (_jsx(DndContext, { id: dndId, sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: ranked.map((r) => r.id), strategy: verticalListSortingStrategy, children: _jsx("div", { className: "space-y-2", role: "list", "aria-label": "Ranked priorities", children: ranked.map((item, index) => (_jsx(SortableRankedItem, { item: item, rank: index + 1, onRemove: () => handleRemove(item.id) }, item.id))) }) }) }))] }), unranked.length > 0 && (_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium text-muted-foreground mb-1", children: availableLabel }), _jsx("p", { className: "text-xs text-muted-foreground mb-2", children: isFull
+                            ? `You\u2019ve chosen ${maxRanked}. Remove one above to swap in another.`
+                            : `Choose up to ${maxRanked}. ${maxRanked - ranked.length} remaining.` }), _jsx("div", { className: "space-y-2", role: "list", "aria-label": "Available priorities", children: unranked.map((item) => (_jsx(AvailableItem, { item: item, onAdd: () => handleAdd(item), disabled: isFull }, item.id))) })] }))] }));
+}

package/dist/src/ui/tabs.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Tabs as TabsPrimitive } from "radix-ui";
+/**
+ * Segmented tab switcher (Radix) for swapping between views of the same thing.
+ *
+ * Use for: two or three peer views a reader flips between (overview against a
+ * detailed comparison), where every view is worth the same weight.
+ * Avoid when: the second view is secondary detail (use Accordion), or the
+ * content must exist for search engines; inactive panels are unmounted.
+ * Variants: none. The list renders as a pill-track segmented control; the
+ * active trigger lifts onto the card surface.
+ */
+declare function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
+declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): React.JSX.Element;
+declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
+declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/src/ui/tabs.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import { cn } from "../cn.js";
+/**
+ * Segmented tab switcher (Radix) for swapping between views of the same thing.
+ *
+ * Use for: two or three peer views a reader flips between (overview against a
+ * detailed comparison), where every view is worth the same weight.
+ * Avoid when: the second view is secondary detail (use Accordion), or the
+ * content must exist for search engines; inactive panels are unmounted.
+ * Variants: none. The list renders as a pill-track segmented control; the
+ * active trigger lifts onto the card surface.
+ */
+function Tabs({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", className: cn("flex flex-col gap-6", className), ...props }));
+}
+function TabsList({ className, ...props }) {
+    return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", className: cn(
+        // p-1 on a rounded-20 track puts the triggers on rounded-2xl, per the
+        // concentric rule (md + p-2.5 is the documented neighbour; this pairing
+        // holds the same relationship one step in).
+        "inline-flex w-fit items-center gap-1 rounded-20 bg-secondary p-1", className), ...props }));
+}
+function TabsTrigger({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn("cursor-pointer inline-flex items-center justify-center rounded-2xl px-4 py-2 text-[14.5px] font-medium whitespace-nowrap", "text-muted-foreground transition-[background-color,color,box-shadow]", "hover:text-foreground", "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", "disabled:pointer-events-none disabled:opacity-50", "data-[state=active]:bg-card data-[state=active]:text-foreground data-[state=active]:shadow-warm-sm", className), ...props }));
+}
+function TabsContent({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("outline-none", className), ...props }));
+}
+export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+/**
+ * Multi-line free text with content-based auto-grow.
+ *
+ * Use for: long-form answers ("anything else your team should know").
+ * Avoid when: the answer is one line; use Input, which keeps mobile
+ * keyboards and validation simpler.
+ */
+declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+export { Textarea };

package/dist/src/ui/textarea.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../cn.js";
+/**
+ * Multi-line free text with content-based auto-grow.
+ *
+ * Use for: long-form answers ("anything else your team should know").
+ * Avoid when: the answer is one line; use Input, which keeps mobile
+ * keyboards and validation simpler.
+ */
+function Textarea({ className, ...props }) {
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn("border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-card px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className), ...props }));
+}
+export { Textarea };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fracazo/design-system",
-  "version": "0.1.0",
-  "description": "Roles, brand contract and guardrails for a warm, evidence-led product design system. Each product supplies a brand file; the system stays the same.",
+  "version": "0.2.0",
+  "description": "Roles, brand contract, guardrails and shadcn-based components for a warm, evidence-led product design system. Each product supplies a brand file; the system stays the same.",
   "license": "MIT",
   "author": "Alex Fracazo",
   "repository": {
@@ -20,6 +20,14 @@
     "DESIGN.md"
   ],
   "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/src/index.js"
+    },
+    "./ui/*": {
+      "types": "./dist/src/ui/*.d.ts",
+      "default": "./dist/src/ui/*.js"
+    },
     "./roles.css": "./css/roles.css",
     "./eslint": {
       "types": "./dist/guardrails/eslint.d.ts",
@@ -32,12 +40,38 @@
     "ds-build-brand-css": "dist/guardrails/build-brand-css.js"
   },
   "peerDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.564.0",
+    "radix-ui": "^1.4.3",
+    "react": "^19",
+    "react-day-picker": "^9.13.2",
+    "react-hook-form": "^7.71.1",
+    "tailwind-merge": "^3.4.1",
     "tailwindcss": "^4"
   },
   "devDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@types/node": "^22",
+    "@types/react": "^19",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.564.0",
+    "radix-ui": "^1.4.3",
+    "react": "^19",
+    "react-day-picker": "^9.13.2",
+    "react-hook-form": "^7.71.1",
+    "tailwind-merge": "^3.4.1",
     "typescript": "^5"
   },
+  "sideEffects": [
+    "*.css"
+  ],
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "check": "tsc -p tsconfig.json --noEmit"