@fracazo/design-system 0.1.0 → 0.2.0

package/README.md

@@ -1,7 +1,7 @@
 # @fracazo/design-system
 
-Roles, a brand contract and guardrails for a warm, evidence-led product
-design system. The package ships the half of the system that is the same
+Roles, a brand contract, guardrails and components for a warm, evidence-led
+product design system. The package ships the half of the system that is the same
 for every product; each product supplies one brand file with its values.
 Change the brand file and the whole product re-skins; the roles never move.
 
@@ -16,6 +16,7 @@ product from.
 | `css/roles.css` | The system: the dark variant, the Tailwind v4 `@theme` mapping, the radius ramp, fluid type roles, band rhythm, the eight aliasing semantics, and the **brand contract** at the top |
 | `ds-check-brand` | Holds a brand file to the contract: nothing missing, nothing extra |
 | `ds-build-brand-css` | Composes the plain-CSS token file a product serves publicly (e.g. `/brand.css`) |
+| `@fracazo/design-system` and `./ui/*` | `cn` and seventeen shadcn-based components (button, card, dialog, form, select, sortable-list and the rest), each with intent JSDoc: use for, avoid when, variants |
 | `@fracazo/design-system/eslint` | Two guardrails: no raw colours and no arbitrary fluid type sizes in a `className` |
 | `demo/index.html` | A showcase page that renders the roles in both modes off a served `/brand.css` |
 | `DESIGN.md` | The written authority: judgment, composition, the rejection list. Authored next |
@@ -25,7 +26,11 @@ them honest.
 
 ## Consume it
 
-Install (Tailwind v4 is a peer dependency):
+Install. Tailwind v4 is a peer dependency; so are the libraries the
+components sit on (react, radix-ui, lucide-react, react-hook-form,
+react-day-picker, the three `@dnd-kit` packages, clsx, tailwind-merge and
+class-variance-authority). A product that only wants the roles and
+guardrails can leave the component peers uninstalled.
 
 ```bash
 pnpm add @fracazo/design-system
@@ -40,6 +45,22 @@ stylesheet. Order matters: roles first.
 @import "./system/brands/my-product.css";
 ```
 
+Then tell Tailwind to scan the package, so it generates the utilities the
+components use. The package ships compiled JavaScript, and the class strings
+survive compilation verbatim:
+
+```css
+@source "../../node_modules/@fracazo/design-system/dist";
+```
+
+Import components from their subpath, which keeps each one's client
+boundary where it declares it, or `cn` and everything else from the root:
+
+```tsx
+import { Button } from '@fracazo/design-system/ui/button'
+import { cn } from '@fracazo/design-system'
+```
+
 Write the brand file to the contract printed at the top of `roles.css`: one
 `@theme inline` block for the typeface mapping, one `:root, .force-light`
 block with every light value, one `.dark` block with every theme-varying

package/dist/src/cn.d.ts

@@ -0,0 +1,8 @@
+import { type ClassValue } from "clsx";
+/**
+ * Merge class names with Tailwind-aware conflict resolution: later classes
+ * win over earlier ones for the same utility (twMerge), and falsy or nested
+ * inputs are flattened away (clsx). Every component in `./ui` composes its
+ * className through this, so a consumer's override always wins.
+ */
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/src/cn.js

@@ -0,0 +1,11 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+/**
+ * Merge class names with Tailwind-aware conflict resolution: later classes
+ * win over earlier ones for the same utility (twMerge), and falsy or nested
+ * inputs are flattened away (clsx). Every component in `./ui` composes its
+ * className through this, so a consumer's override always wins.
+ */
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/src/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Root entry: `cn` and every component, re-exported from `./ui/*`.
+ *
+ * Prefer the per-component subpaths (`@fracazo/design-system/ui/button`) in
+ * app code; they keep the client boundary at the component that declares it.
+ * This barrel exists for quick imports and for tooling that wants one map of
+ * everything the package ships.
+ */
+export { cn } from "./cn.js";
+export * from "./ui/accordion.js";
+export * from "./ui/button.js";
+export * from "./ui/calendar.js";
+export * from "./ui/card.js";
+export * from "./ui/checkbox.js";
+export * from "./ui/dialog.js";
+export * from "./ui/form.js";
+export * from "./ui/input.js";
+export * from "./ui/label.js";
+export * from "./ui/popover.js";
+export * from "./ui/progress.js";
+export * from "./ui/radio-group.js";
+export * from "./ui/select.js";
+export * from "./ui/sheet.js";
+export * from "./ui/sortable-list.js";
+export * from "./ui/tabs.js";
+export * from "./ui/textarea.js";

package/dist/src/index.js

@@ -0,0 +1,26 @@
+/**
+ * Root entry: `cn` and every component, re-exported from `./ui/*`.
+ *
+ * Prefer the per-component subpaths (`@fracazo/design-system/ui/button`) in
+ * app code; they keep the client boundary at the component that declares it.
+ * This barrel exists for quick imports and for tooling that wants one map of
+ * everything the package ships.
+ */
+export { cn } from "./cn.js";
+export * from "./ui/accordion.js";
+export * from "./ui/button.js";
+export * from "./ui/calendar.js";
+export * from "./ui/card.js";
+export * from "./ui/checkbox.js";
+export * from "./ui/dialog.js";
+export * from "./ui/form.js";
+export * from "./ui/input.js";
+export * from "./ui/label.js";
+export * from "./ui/popover.js";
+export * from "./ui/progress.js";
+export * from "./ui/radio-group.js";
+export * from "./ui/select.js";
+export * from "./ui/sheet.js";
+export * from "./ui/sortable-list.js";
+export * from "./ui/tabs.js";
+export * from "./ui/textarea.js";

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { Accordion as AccordionPrimitive } from "radix-ui";
+/**
+ * Expand-collapse list (Radix) with single or multiple open items.
+ *
+ * Use for: progressive disclosure inside app surfaces.
+ * Avoid when: SEO matters on public content; the landing FAQ deliberately
+ * uses native details and summary so answers exist without JS.
+ */
+declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): React.JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): React.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): React.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): React.JSX.Element;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/src/ui/accordion.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+import { Accordion as AccordionPrimitive } from "radix-ui";
+import { cn } from "../cn.js";
+/**
+ * Expand-collapse list (Radix) with single or multiple open items.
+ *
+ * Use for: progressive disclosure inside app surfaces.
+ * Avoid when: SEO matters on public content; the landing FAQ deliberately
+ * uses native details and summary so answers exist without JS.
+ */
+function Accordion({ ...props }) {
+    return _jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({ className, ...props }) {
+    return (_jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn("border-b last:border-b-0", className), ...props }));
+}
+function AccordionTrigger({ className, children, ...props }) {
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn("cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-colors outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180", className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })] }) }));
+}
+function AccordionContent({ className, children, ...props }) {
+    return (_jsx(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm", ...props, children: _jsx("div", { className: cn("pt-0 pb-4", className), children: children }) }));
+}
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * The tappable action primitive for everything except landing page pills.
+ *
+ * Use for: any action in the questionnaire, plan, checkout and download flows.
+ * Avoid when: styling a navigation link as text; use a plain anchor. On landing
+ * sections, follow the local pill pattern for now.
+ * Variants: default carries the step's one primary action; outline is the
+ * standard secondary (copy, save, discard, dismiss); ghost is back, cancel and
+ * edit-in-place; destructive is reserved for irreversible acts (unused today).
+ * Sizes: default (48px) almost always; sm in compact rows; lg only for
+ * money-adjacent hero actions like checkout.
+ * Radius: text buttons are rounded rectangles on a size-scaled corner ladder
+ * (xs rounded-sm, sm rounded-md, default rounded-lg, lg rounded-xl), so a
+ * flush full-bleed button can go concentric with its container (outer = inner
+ * radius + padding, e.g. default in a p-4 card resolves to rounded-4xl).
+ * Icon-only sizes (icon, icon-sm, icon-lg, icon-xs) stay circular.
+ */
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Button, buttonVariants };

package/dist/src/ui/button.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { cn } from "../cn.js";
+const buttonVariants = cva("cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-[color,background-color,border-color,box-shadow,translate,scale] active:scale-[0.96] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none 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", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 hover:-translate-y-0.5 active:translate-y-0",
+            destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            // Optical alignment (SPEC_021): only the icon side tightens, so
+            // icon-plus-text buttons read centred. Works because Button wraps
+            // bare text children in a span (CSS cannot see text nodes, so
+            // without the wrap an only-icon-element is both :first-child and
+            // :last-child). Spinner-only buttons tighten both sides, which is
+            // the old symmetric behaviour.
+            default: "min-h-[48px] px-5 py-2 has-[>svg:first-child]:pl-4 has-[>svg:last-child]:pr-4",
+            xs: "h-6 gap-1 rounded-sm px-2 text-xs has-[>svg:first-child]:pl-1.5 has-[>svg:last-child]:pr-1.5 [&_svg:not([class*='size-'])]:size-3",
+            sm: "min-h-[44px] rounded-md gap-1.5 px-4 has-[>svg:first-child]:pl-3 has-[>svg:last-child]:pr-3",
+            lg: "min-h-[52px] rounded-xl px-8 text-[15px] has-[>svg:first-child]:pl-6 has-[>svg:last-child]:pr-6",
+            icon: "size-9 rounded-full",
+            "icon-xs": "size-6 rounded-full [&_svg:not([class*='size-'])]:size-3",
+            "icon-sm": "size-8 rounded-full",
+            "icon-lg": "size-10 rounded-full",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+/**
+ * The tappable action primitive for everything except landing page pills.
+ *
+ * Use for: any action in the questionnaire, plan, checkout and download flows.
+ * Avoid when: styling a navigation link as text; use a plain anchor. On landing
+ * sections, follow the local pill pattern for now.
+ * Variants: default carries the step's one primary action; outline is the
+ * standard secondary (copy, save, discard, dismiss); ghost is back, cancel and
+ * edit-in-place; destructive is reserved for irreversible acts (unused today).
+ * Sizes: default (48px) almost always; sm in compact rows; lg only for
+ * money-adjacent hero actions like checkout.
+ * Radius: text buttons are rounded rectangles on a size-scaled corner ladder
+ * (xs rounded-sm, sm rounded-md, default rounded-lg, lg rounded-xl), so a
+ * flush full-bleed button can go concentric with its container (outer = inner
+ * radius + padding, e.g. default in a p-4 card resolves to rounded-4xl).
+ * Icon-only sizes (icon, icon-sm, icon-lg, icon-xs) stay circular.
+ */
+function Button({ className, variant = "default", size = "default", asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : "button";
+    // SPEC_021: wrap bare text children in a span so the directional
+    // has-[>svg:first-child] padding above can tell icon-leading from
+    // icon-trailing (text nodes are invisible to CSS child selectors).
+    // Skipped for asChild, where the single child element owns its content.
+    const { children, ...rest } = props;
+    const content = asChild
+        ? children
+        : React.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? (_jsx("span", { children: child })) : (child));
+    return (_jsx(Comp, { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...rest, children: content }));
+}
+export { Button, buttonVariants };

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { DayPicker, type DayButton } from "react-day-picker";
+import { Button } from "./button.js";
+/**
+ * Date picker surface over react-day-picker.
+ *
+ * Use for: range selection or constrained date choice, if a surface ever
+ * needs more than a plain date.
+ * Avoid when: capturing a single date like the due date; the product uses
+ * native date inputs for the OS picker on mobile.
+ */
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}): React.JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): React.JSX.Element;
+export { Calendar, CalendarDayButton };

package/dist/src/ui/calendar.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, } from "lucide-react";
+import { DayPicker, getDefaultClassNames, } from "react-day-picker";
+import { cn } from "../cn.js";
+import { Button, buttonVariants } from "./button.js";
+/**
+ * Date picker surface over react-day-picker.
+ *
+ * Use for: range selection or constrained date choice, if a surface ever
+ * needs more than a plain date.
+ * Avoid when: capturing a single date like the due date; the product uses
+ * native date inputs for the OS picker on mobile.
+ */
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn("bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, formatters: {
+            formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+            ...formatters,
+        }, classNames: {
+            root: cn("w-fit", defaultClassNames.root),
+            months: cn("flex gap-4 flex-col md:flex-row relative", defaultClassNames.months),
+            month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+            nav: cn("flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", defaultClassNames.nav),
+            button_previous: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_previous),
+            button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_next),
+            month_caption: cn("flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)", defaultClassNames.month_caption),
+            dropdowns: cn("w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5", defaultClassNames.dropdowns),
+            dropdown_root: cn("relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md", defaultClassNames.dropdown_root),
+            dropdown: cn("absolute bg-popover inset-0 opacity-0", defaultClassNames.dropdown),
+            caption_label: cn("select-none font-medium", captionLayout === "label"
+                ? "text-sm"
+                : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5", defaultClassNames.caption_label),
+            table: "w-full border-collapse",
+            weekdays: cn("flex", defaultClassNames.weekdays),
+            weekday: cn("text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none", defaultClassNames.weekday),
+            week: cn("flex w-full mt-2", defaultClassNames.week),
+            week_number_header: cn("select-none w-(--cell-size)", defaultClassNames.week_number_header),
+            week_number: cn("text-[0.8rem] select-none text-muted-foreground", defaultClassNames.week_number),
+            day: cn("relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none", props.showWeekNumber
+                ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+                : "[&:first-child[data-selected=true]_button]:rounded-l-md", defaultClassNames.day),
+            range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start),
+            range_middle: cn("rounded-none", defaultClassNames.range_middle),
+            range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+            today: cn("bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none", defaultClassNames.today),
+            outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+            disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+            hidden: cn("invisible", defaultClassNames.hidden),
+            ...classNames,
+        }, components: {
+            Root: ({ className, rootRef, ...props }) => {
+                return (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className), ...props }));
+            },
+            Chevron: ({ className, orientation, ...props }) => {
+                if (orientation === "left") {
+                    return (_jsx(ChevronLeftIcon, { className: cn("size-4", className), ...props }));
+                }
+                if (orientation === "right") {
+                    return (_jsx(ChevronRightIcon, { className: cn("size-4", className), ...props }));
+                }
+                return (_jsx(ChevronDownIcon, { className: cn("size-4", className), ...props }));
+            },
+            DayButton: CalendarDayButton,
+            WeekNumber: ({ children, ...props }) => {
+                return (_jsx("td", { ...props, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) }));
+            },
+            ...components,
+        }, ...props }));
+}
+function CalendarDayButton({ className, day, modifiers, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (modifiers.focused)
+            ref.current?.focus();
+    }, [modifiers.focused]);
+    return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
+            !modifiers.range_start &&
+            !modifiers.range_end &&
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className), ...props }));
+}
+export { Calendar, CalendarDayButton };

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+/**
+ * Surface family: Card with Header, Title, Description, Content, Footer.
+ *
+ * Use for: quickly composed standard surfaces where the stock look is fine.
+ * Avoid when: the surface must match the house card look (rounded-20 with
+ * warm shadows); today the app composes those from semantic utilities
+ * directly.
+ */
+declare function Card({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/src/ui/card.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../cn.js";
+/**
+ * Surface family: Card with Header, Title, Description, Content, Footer.
+ *
+ * Use for: quickly composed standard surfaces where the stock look is fine.
+ * Avoid when: the surface must match the house card look (rounded-20 with
+ * warm shadows); today the app composes those from semantic utilities
+ * directly.
+ */
+function Card({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card", className: cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className), ...props }));
+}
+function CardHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-header", className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className), ...props }));
+}
+function CardTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-title", className: cn("leading-none font-semibold", className), ...props }));
+}
+function CardDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-description", className: cn("text-muted-foreground text-sm", className), ...props }));
+}
+function CardAction({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-action", className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className), ...props }));
+}
+function CardContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-content", className: cn("px-6", className), ...props }));
+}
+function CardFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center px-6 [.border-t]:pt-6", className), ...props }));
+}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+/**
+ * Standard checkbox (Radix) with the brand focus ring.
+ *
+ * Use for: dense forms and settings where a full tappable card is overkill,
+ * such as future account or admin surfaces.
+ * Avoid when: capturing questionnaire answers; the house pattern is
+ * MultiSelectCardGroup icon cards with 44px targets.
+ */
+declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): React.JSX.Element;
+export { Checkbox };

package/dist/src/ui/checkbox.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { cn } from "../cn.js";
+/**
+ * Standard checkbox (Radix) with the brand focus ring.
+ *
+ * Use for: dense forms and settings where a full tappable card is overkill,
+ * such as future account or admin surfaces.
+ * Avoid when: capturing questionnaire answers; the house pattern is
+ * MultiSelectCardGroup icon cards with 44px targets.
+ */
+function Checkbox({ className, ...props }) {
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("cursor-pointer peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-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 size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none", children: _jsx(CheckIcon, { className: "size-3.5" }) }) }));
+}
+export { Checkbox };

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+/**
+ * Centred modal (Radix) for a focused task over dimmed content.
+ *
+ * Use for: previews and confirmations that need full attention, like the
+ * landing example-output preview.
+ * Avoid when: the surface is a mobile flow aid; use Sheet side bottom. The
+ * QR share overlay and paywall keep their custom overlays.
+ */
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/src/ui/dialog.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { cn } from "../cn.js";
+/**
+ * Centred modal (Radix) for a focused task over dimmed content.
+ *
+ * Use for: previews and confirmations that need full attention, like the
+ * landing example-output preview.
+ * Avoid when: the surface is a mobile flow aid; use Sheet side bottom. The
+ * QR share overlay and paywall keep their custom overlays.
+ */
+function Dialog({ ...props }) {
+    return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+    return _jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+    return _jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+    return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-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 DialogContent({ className, children, showCloseButton = true, ...props }) {
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn("bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl border p-6 shadow-lg duration-200 sm:max-w-lg", className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "ring-offset-background focus-visible:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 grid size-8 place-items-center rounded-full opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none", children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+}
+function DialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-1.5 text-center sm:text-left", className), ...props }));
+}
+function DialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props }));
+}
+function DialogTitle({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("text-lg leading-none font-semibold", className), ...props }));
+}
+function DialogDescription({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("text-muted-foreground text-sm", className), ...props }));
+}
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

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

@@ -0,0 +1,33 @@
+import * as React from "react";
+import type { Label as LabelPrimitive } from "radix-ui";
+import { Slot } from "radix-ui";
+import { type ControllerProps, type FieldPath, type FieldValues } from "react-hook-form";
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import("react-hook-form").FieldError | undefined;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+/**
+ * react-hook-form glue: FormField, FormItem, FormLabel, FormControl,
+ * FormMessage, FormDescription.
+ *
+ * Use for: every RHF-driven field; one FormField per question or input.
+ * Avoid when: a field lives outside RHF; use Label plus Input directly.
+ * Note: wrap forms in FormProvider from react-hook-form itself; the Form
+ * alias export is unused in this app.
+ */
+declare function FormItem({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): React.JSX.Element;
+declare function FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>): React.JSX.Element;
+declare function FormDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function FormMessage({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element | null;
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };

package/dist/src/ui/form.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { Controller, FormProvider, useFormContext, useFormState, } from "react-hook-form";
+import { cn } from "../cn.js";
+import { Label } from "./label.js";
+const Form = FormProvider;
+const FormFieldContext = React.createContext({});
+const FormField = ({ ...props }) => {
+    return (_jsx(FormFieldContext.Provider, { value: { name: props.name }, children: _jsx(Controller, { ...props }) }));
+};
+const useFormField = () => {
+    const fieldContext = React.useContext(FormFieldContext);
+    const itemContext = React.useContext(FormItemContext);
+    const { getFieldState } = useFormContext();
+    const formState = useFormState({ name: fieldContext.name });
+    const fieldState = getFieldState(fieldContext.name, formState);
+    if (!fieldContext) {
+        throw new Error("useFormField should be used within <FormField>");
+    }
+    const { id } = itemContext;
+    return {
+        id,
+        name: fieldContext.name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${id}-form-item-message`,
+        ...fieldState,
+    };
+};
+const FormItemContext = React.createContext({});
+/**
+ * react-hook-form glue: FormField, FormItem, FormLabel, FormControl,
+ * FormMessage, FormDescription.
+ *
+ * Use for: every RHF-driven field; one FormField per question or input.
+ * Avoid when: a field lives outside RHF; use Label plus Input directly.
+ * Note: wrap forms in FormProvider from react-hook-form itself; the Form
+ * alias export is unused in this app.
+ */
+function FormItem({ className, ...props }) {
+    const id = React.useId();
+    return (_jsx(FormItemContext.Provider, { value: { id }, children: _jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) }));
+}
+function FormLabel({ className, ...props }) {
+    const { error, formItemId } = useFormField();
+    return (_jsx(Label, { "data-slot": "form-label", "data-error": !!error, className: cn("data-[error=true]:text-destructive", className), htmlFor: formItemId, ...props }));
+}
+function FormControl({ ...props }) {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+    return (_jsx(Slot.Root, { "data-slot": "form-control", id: formItemId, "aria-describedby": !error
+            ? `${formDescriptionId}`
+            : `${formDescriptionId} ${formMessageId}`, "aria-invalid": !!error, ...props }));
+}
+function FormDescription({ className, ...props }) {
+    const { formDescriptionId } = useFormField();
+    return (_jsx("p", { "data-slot": "form-description", id: formDescriptionId, className: cn("text-muted-foreground text-sm", className), ...props }));
+}
+function FormMessage({ className, ...props }) {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message ?? "") : props.children;
+    if (!body) {
+        return null;
+    }
+    return (_jsx("p", { "data-slot": "form-message", id: formMessageId, role: "alert", className: cn("text-destructive text-sm", className), ...props, children: body }));
+}
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };