@fracazo/design-system 0.1.0 → 0.2.1

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, };

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, };