@fracazo/design-system 0.1.0 → 0.2.1

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.1",
+  "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"