@orangecheck/app-design 0.6.1 → 1.1.0

package/dist/primitives.mjs

@@ -1,6 +1,6 @@
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
-import { forwardRef, createContext, useContext, useRef, useState, useCallback, useEffect, useId, isValidElement, cloneElement } from 'react';
+import { forwardRef, useContext, createContext, useRef, useState, useCallback, useEffect, createElement, useId, isValidElement, cloneElement, useSyncExternalStore, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
@@ -12,12 +12,13 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
-import { ChevronDown, Check, X } from 'lucide-react';
+import { ChevronDown, Check, X, ChevronLeft, ChevronRight } from 'lucide-react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+import QRCode from 'qrcode';
 
 var merge = extendTailwindMerge({
   extend: {
@@ -206,13 +207,13 @@ var badgeVariants = cva(
       tone: {
         neutral: "border-border bg-card text-foreground",
         muted: "border-transparent bg-muted text-muted-foreground",
-        brand: "border-transparent bg-[color-mix(in_oklab,var(--oca-orange)_12%,var(--card))] text-oca-accent-ink",
+        brand: "border-transparent bg-[color-mix(in_oklab,var(--oca-orange)_9%,var(--card))] text-oca-accent-ink",
         danger: "border-transparent bg-[color-mix(in_oklab,var(--destructive)_12%,var(--card))] text-destructive",
         // A good state is a neutral pill with a green dot, not a green pill.
         success: GOOD_DOT,
         // Aliases kept so older call sites keep compiling: attention is
         // the brand accent, information is neutral.
-        warning: "border-transparent bg-[color-mix(in_oklab,var(--oca-orange)_12%,var(--card))] text-oca-accent-ink",
+        warning: "border-transparent bg-[color-mix(in_oklab,var(--oca-orange)_9%,var(--card))] text-oca-accent-ink",
         info: "border-border bg-card text-foreground",
         // Inverted in dark mode, where ink would sit on a card of nearly its own colour.
         ink: "border-transparent bg-oca-ink text-oca-ink-foreground dark:bg-foreground dark:text-background",
@@ -250,6 +251,30 @@ function StatusPill({
     }
   );
 }
+var WORD = {
+  live: "Live",
+  testing: "In testing",
+  "not-yet": "Not yet",
+  paused: "Paused",
+  good: "Good",
+  caution: "Caution",
+  refused: "Refused"
+};
+var TONE = {
+  live: "success",
+  testing: "brand",
+  "not-yet": "muted",
+  paused: "muted",
+  good: "success",
+  caution: "brand",
+  refused: "danger"
+};
+function statusWord(status) {
+  return WORD[status];
+}
+function StatusBadge({ status, className, ...props }) {
+  return /* @__PURE__ */ jsx(Badge, { tone: TONE[status], "data-status": status, className: cn(className), ...props, children: WORD[status] });
+}
 var cardVariants = cva("relative rounded-[1.25rem] border", {
   variants: {
     tone: {
@@ -292,6 +317,20 @@ function CardContent({ className, ...props }) {
 function CardFooter({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("mt-6 flex flex-wrap items-center gap-3", className), ...props });
 }
+function sharedContext(name, initial) {
+  const key = /* @__PURE__ */ Symbol.for(`@orangecheck/app-design/${name}`);
+  const store = globalThis;
+  return store[key] ?? (store[key] = createContext(initial));
+}
+
+// src/lib/density.ts
+var DensityContext = sharedContext("density", "comfortable");
+function DensityProvider({ density, children }) {
+  return createElement(DensityContext.Provider, { value: density }, children);
+}
+function useDensity() {
+  return useContext(DensityContext);
+}
 var fieldBase = [
   "w-full rounded-xl border border-input bg-card text-foreground placeholder:text-oca-subtle",
   "text-base md:text-[0.9375rem] outline-none transition-[border-color,box-shadow]",
@@ -299,8 +338,24 @@ var fieldBase = [
   "disabled:cursor-not-allowed disabled:opacity-55",
   "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:ring-[color-mix(in_oklab,var(--destructive)_14%,transparent)]"
 ];
-var Input = forwardRef(function Input2({ className, type = "text", ...props }, ref) {
-  return /* @__PURE__ */ jsx("input", { ref, type, "data-ui": "input", className: cn(fieldBase, "h-11 px-3.5", className), ...props });
+var FIELD_SIZE = {
+  md: "h-11 px-3.5",
+  sm: "h-9 rounded-[0.625rem] px-3 md:text-[0.875rem]"
+};
+var Input = forwardRef(function Input2({ className, type = "text", size, ...props }, ref) {
+  const density = useDensity();
+  const s = size ?? (density === "compact" ? "sm" : "md");
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      type,
+      "data-ui": "input",
+      "data-size": s,
+      className: cn(fieldBase, FIELD_SIZE[s], className),
+      ...props
+    }
+  );
 });
 var Textarea = forwardRef(
   function Textarea2({ className, ...props }, ref) {
@@ -357,15 +412,29 @@ function Field({ label, hint, optional, error, children, className, hideLabel, a
     error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-[0.8125rem] leading-snug text-destructive", children: error }) : null
   ] });
 }
-var Select = SelectPrimitive.Root;
+var SelectFieldContext = sharedContext("select-field", null);
+function Select({
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": invalid,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectFieldContext.Provider, { value: { id, "aria-describedby": describedBy, "aria-invalid": invalid }, children: /* @__PURE__ */ jsx(SelectPrimitive.Root, { ...props }) });
+}
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = forwardRef(function SelectTrigger2({ className, children, ...props }, ref) {
+var SelectTrigger = forwardRef(function SelectTrigger2({ className, children, size, ...props }, ref) {
+  const density = useDensity();
+  const field = useContext(SelectFieldContext);
+  const s = size ?? (density === "compact" ? "sm" : "md");
   return /* @__PURE__ */ jsxs(
     SelectPrimitive.Trigger,
     {
       ref,
-      className: cn(fieldBase, "flex h-11 items-center justify-between gap-2 px-3.5 text-left", className),
+      id: field?.id,
+      "aria-describedby": field?.["aria-describedby"],
+      "aria-invalid": field?.["aria-invalid"],
+      className: cn(fieldBase, FIELD_SIZE[s], "flex items-center justify-between gap-2 text-left", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx("span", { className: "truncate", children }),
@@ -433,7 +502,8 @@ var Switch = forwardRef(function Switch2({ className, ...props }, ref) {
       className: cn(
         "peer inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent bg-input p-0.5",
         "outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        "data-[state=checked]:bg-brand disabled:cursor-not-allowed disabled:opacity-50",
+        // The deep orange: the track is the state, so it must clear 3:1 on a card.
+        "data-[state=checked]:bg-oca-orange-deep disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props,
@@ -725,7 +795,246 @@ var TabsTrigger = forwardRef(function TabsTrigger2({ className, ...props }, ref)
 var TabsContent = forwardRef(function TabsContent2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(TabsPrimitive.Content, { ref, className: cn("mt-6 outline-none", className), ...props });
 });
+var GroupName = createContext(void 0);
+function Accordion({
+  single = false,
+  children,
+  className
+}) {
+  const name = useId();
+  return /* @__PURE__ */ jsx(GroupName.Provider, { value: single ? name : void 0, children: /* @__PURE__ */ jsx("div", { className: cn("divide-y divide-border overflow-hidden rounded-[1.25rem] border border-border bg-card", className), children }) });
+}
+function AccordionItem({
+  title,
+  children,
+  defaultOpen = false,
+  id,
+  className
+}) {
+  const name = useContext(GroupName);
+  return /* @__PURE__ */ jsxs("details", { id, name, open: defaultOpen || void 0, className: cn("group scroll-mt-24", className), children: [
+    /* @__PURE__ */ jsxs(
+      "summary",
+      {
+        className: cn(
+          "flex min-h-14 cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 text-[1rem] font-medium leading-snug md:px-6",
+          // Inside the card's clip, so the ring is drawn within the row.
+          "transition-colors hover:bg-accent/60 focus-visible:outline-offset-[-2px] [&::-webkit-details-marker]:hidden"
+        ),
+        children: [
+          title,
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              "aria-hidden": true,
+              className: "size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-open:rotate-180"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "oca-body px-5 pb-5 text-[0.9375rem] md:px-6 md:pb-6", children })
+  ] });
+}
+var queue = [];
+var asked = 0;
+var hosts = 0;
+var listeners = /* @__PURE__ */ new Set();
+var emit = () => listeners.forEach((l) => l());
+function ask(item) {
+  queue = [...queue, { ...item, id: ++asked }];
+  emit();
+}
+function done() {
+  queue = queue.slice(1);
+  emit();
+}
+function confirm(options) {
+  if (hosts === 0) {
+    console.error("confirm(): no <DialogHost /> is mounted, so nothing was asked; treating it as no.");
+    return Promise.resolve(false);
+  }
+  return new Promise((resolve) => ask({ id: 0, kind: "confirm", options, settle: resolve }));
+}
+function prompt(options) {
+  if (hosts === 0) {
+    console.error("prompt(): no <DialogHost /> is mounted, so nothing was asked; treating it as cancelled.");
+    return Promise.resolve(null);
+  }
+  return new Promise((resolve) => ask({ id: 0, kind: "prompt", options, settle: resolve }));
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  hosts++;
+  return () => {
+    listeners.delete(listener);
+    hosts--;
+  };
+}
+var current = () => queue[0] ?? null;
+var none = () => null;
+function PromptBody({ ask: a }) {
+  const o = a.options;
+  const [value, setValue] = useState(o.defaultValue ?? "");
+  const [error, setError] = useState(null);
+  const submit = (e) => {
+    e.preventDefault();
+    if (o.minLength && value.length < o.minLength) {
+      setError(`At least ${o.minLength} characters.`);
+      return;
+    }
+    const refused = o.validate?.(value);
+    if (refused) {
+      setError(refused);
+      return;
+    }
+    a.settle(value);
+    done();
+  };
+  return /* @__PURE__ */ jsxs("form", { onSubmit: submit, noValidate: true, children: [
+    /* @__PURE__ */ jsx(Field, { label: o.label ?? "Your answer", hint: o.hint, error, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        autoFocus: true,
+        type: o.secret ? "password" : "text",
+        autoComplete: o.secret ? "new-password" : "off",
+        placeholder: o.placeholder,
+        value,
+        onChange: (e) => {
+          setValue(e.target.value);
+          setError(null);
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          onClick: () => {
+            a.settle(null);
+            done();
+          },
+          children: o.cancelLabel ?? "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { type: "submit", variant: o.destructive ? "danger" : "primary", children: o.confirmLabel ?? "Continue" })
+    ] })
+  ] });
+}
+function DialogHost() {
+  const a = useSyncExternalStore(subscribe, current, none);
+  const cancel = () => {
+    if (!a) return;
+    if (a.kind === "confirm") a.settle(false);
+    else a.settle(null);
+    done();
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open: a !== null, onOpenChange: (open) => open ? void 0 : cancel(), children: a ? /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      role: "alertdialog",
+      ...a.options.message ? {} : { "aria-describedby": void 0 },
+      className: "w-[min(92vw,28rem)]",
+      children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: a.options.title }),
+          a.options.message ? /* @__PURE__ */ jsx(DialogDescription, { children: a.options.message }) : null
+        ] }),
+        a.kind === "prompt" ? (
+          // Keyed by the ask, so a second prompt starts empty.
+          /* @__PURE__ */ jsx(PromptBody, { ask: a }, a.id)
+        ) : /* @__PURE__ */ jsxs(DialogFooter, { children: [
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: cancel, children: a.options.cancelLabel ?? "Cancel" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: a.options.destructive ? "danger" : "primary",
+              onClick: () => {
+                a.settle(true);
+                done();
+              },
+              children: a.options.confirmLabel ?? "Continue"
+            }
+          )
+        ] })
+      ]
+    }
+  ) : null });
+}
+var N = new Intl.NumberFormat("en-US");
+function Pagination({
+  pageIndex,
+  pageSize,
+  total,
+  onPage,
+  label = "Pages",
+  className
+}) {
+  const pages = Math.max(1, Math.ceil(total / pageSize));
+  const index = Math.min(Math.max(0, pageIndex), pages - 1);
+  if (index !== pageIndex && typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+    console.warn(`Pagination: pageIndex ${pageIndex} is outside 0\u2013${pages - 1}; it counts from 0.`);
+  }
+  if (total <= pageSize) return null;
+  const from = index * pageSize + 1;
+  const to = Math.min(total, (index + 1) * pageSize);
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": label, className: cn("flex items-center justify-between gap-4", className), children: [
+    /* @__PURE__ */ jsxs("p", { "aria-live": "polite", className: "oca-tabular text-[0.875rem] text-muted-foreground", children: [
+      N.format(from),
+      "\u2013",
+      N.format(to),
+      " of ",
+      N.format(total)
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "sm", disabled: index === 0, onClick: () => onPage(index - 1), className: "pl-3", children: [
+        /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": true }),
+        "Previous"
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "sm", disabled: index >= pages - 1, onClick: () => onPage(index + 1), className: "pr-3", children: [
+        "Next",
+        /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true })
+      ] })
+    ] })
+  ] });
+}
+function QrCode({
+  value,
+  size = 200,
+  label,
+  className
+}) {
+  const matrix = useMemo(() => {
+    try {
+      return QRCode.create(value, { errorCorrectionLevel: "M" }).modules;
+    } catch {
+      return null;
+    }
+  }, [value]);
+  const path = useMemo(() => {
+    if (!matrix) return "";
+    let d = "";
+    for (let y = 0; y < matrix.size; y++) {
+      for (let x = 0; x < matrix.size; x++) {
+        if (matrix.get(y, x)) d += `M${x} ${y}h1v1h-1z`;
+      }
+    }
+    return d;
+  }, [matrix]);
+  const short = value.length > 28 ? `${value.slice(0, 28)}\u2026` : value;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "img",
+      "aria-label": matrix ? label ?? `QR code for ${short}` : "Too long for a QR code",
+      className: cn("inline-block shrink-0 rounded-2xl bg-white p-3 ring-1 ring-border", className),
+      style: { width: size, height: size },
+      children: matrix ? /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${matrix.size} ${matrix.size}`, shapeRendering: "crispEdges", "aria-hidden": true, className: "block size-full", children: /* @__PURE__ */ jsx("path", { d: path, fill: "#0a0a0a" }) }) : /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "flex size-full items-center justify-center text-center text-[0.8125rem] text-[#54585e]", children: "Too long for a QR code" })
+    }
+  );
+}
 
-export { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNumeral, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Field, Input, Kbd, Label, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, ScrollFade, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, Skeleton, Spinner, StatusDot, StatusPill, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cardVariants, cn, useTimedOut };
+export { Accordion, AccordionItem, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNumeral, CardTitle, Checkbox, DensityProvider, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogHost, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Field, Input, Kbd, Label, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, QrCode, RadioGroup, RadioGroupItem, ScrollFade, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, Skeleton, Spinner, StatusBadge, StatusDot, StatusPill, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cardVariants, cn, confirm, prompt, statusWord, useDensity, useTimedOut };
 //# sourceMappingURL=primitives.mjs.map
 //# sourceMappingURL=primitives.mjs.map