@orangecheck/app-design 0.6.1 → 1.1.0

package/dist/primitives.js

@@ -19,6 +19,9 @@ var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var TabsPrimitive = require('@radix-ui/react-tabs');
+var QRCode = require('qrcode');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -49,6 +52,7 @@ var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMe
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
+var QRCode__default = /*#__PURE__*/_interopDefault(QRCode);
 
 var merge = tailwindMerge.extendTailwindMerge({
   extend: {
@@ -237,13 +241,13 @@ var badgeVariants = classVarianceAuthority.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",
@@ -281,6 +285,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__ */ jsxRuntime.jsx(Badge, { tone: TONE[status], "data-status": status, className: cn(className), ...props, children: WORD[status] });
+}
 var cardVariants = classVarianceAuthority.cva("relative rounded-[1.25rem] border", {
   variants: {
     tone: {
@@ -323,6 +351,20 @@ function CardContent({ className, ...props }) {
 function CardFooter({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.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] = react.createContext(initial));
+}
+
+// src/lib/density.ts
+var DensityContext = sharedContext("density", "comfortable");
+function DensityProvider({ density, children }) {
+  return react.createElement(DensityContext.Provider, { value: density }, children);
+}
+function useDensity() {
+  return react.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]",
@@ -330,8 +372,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 = react.forwardRef(function Input2({ className, type = "text", ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.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 = react.forwardRef(function Input2({ className, type = "text", size, ...props }, ref) {
+  const density = useDensity();
+  const s = size ?? (density === "compact" ? "sm" : "md");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref,
+      type,
+      "data-ui": "input",
+      "data-size": s,
+      className: cn(fieldBase, FIELD_SIZE[s], className),
+      ...props
+    }
+  );
 });
 var Textarea = react.forwardRef(
   function Textarea2({ className, ...props }, ref) {
@@ -388,15 +446,29 @@ function Field({ label, hint, optional, error, children, className, hideLabel, a
     error ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, role: "alert", className: "text-[0.8125rem] leading-snug text-destructive", children: error }) : null
   ] });
 }
-var Select = SelectPrimitive__namespace.Root;
+var SelectFieldContext = sharedContext("select-field", null);
+function Select({
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": invalid,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectFieldContext.Provider, { value: { id, "aria-describedby": describedBy, "aria-invalid": invalid }, children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Root, { ...props }) });
+}
 var SelectGroup = SelectPrimitive__namespace.Group;
 var SelectValue = SelectPrimitive__namespace.Value;
-var SelectTrigger = react.forwardRef(function SelectTrigger2({ className, children, ...props }, ref) {
+var SelectTrigger = react.forwardRef(function SelectTrigger2({ className, children, size, ...props }, ref) {
+  const density = useDensity();
+  const field = react.useContext(SelectFieldContext);
+  const s = size ?? (density === "compact" ? "sm" : "md");
   return /* @__PURE__ */ jsxRuntime.jsxs(
     SelectPrimitive__namespace.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__ */ jsxRuntime.jsx("span", { className: "truncate", children }),
@@ -464,7 +536,8 @@ var Switch = react.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,
@@ -756,11 +829,252 @@ var TabsTrigger = react.forwardRef(function TabsTrigger2({ className, ...props }
 var TabsContent = react.forwardRef(function TabsContent2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Content, { ref, className: cn("mt-6 outline-none", className), ...props });
 });
+var GroupName = react.createContext(void 0);
+function Accordion({
+  single = false,
+  children,
+  className
+}) {
+  const name = react.useId();
+  return /* @__PURE__ */ jsxRuntime.jsx(GroupName.Provider, { value: single ? name : void 0, children: /* @__PURE__ */ jsxRuntime.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 = react.useContext(GroupName);
+  return /* @__PURE__ */ jsxRuntime.jsxs("details", { id, name, open: defaultOpen || void 0, className: cn("group scroll-mt-24", className), children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            lucideReact.ChevronDown,
+            {
+              "aria-hidden": true,
+              className: "size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-open:rotate-180"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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] = react.useState(o.defaultValue ?? "");
+  const [error, setError] = react.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__ */ jsxRuntime.jsxs("form", { onSubmit: submit, noValidate: true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Field, { label: o.label ?? "Your answer", hint: o.hint, error, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "secondary",
+          onClick: () => {
+            a.settle(null);
+            done();
+          },
+          children: o.cancelLabel ?? "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", variant: o.destructive ? "danger" : "primary", children: o.confirmLabel ?? "Continue" })
+    ] })
+  ] });
+}
+function DialogHost() {
+  const a = react.useSyncExternalStore(subscribe, current, none);
+  const cancel = () => {
+    if (!a) return;
+    if (a.kind === "confirm") a.settle(false);
+    else a.settle(null);
+    done();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: a !== null, onOpenChange: (open) => open ? void 0 : cancel(), children: a ? /* @__PURE__ */ jsxRuntime.jsxs(
+    DialogContent,
+    {
+      role: "alertdialog",
+      ...a.options.message ? {} : { "aria-describedby": void 0 },
+      className: "w-[min(92vw,28rem)]",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: a.options.title }),
+          a.options.message ? /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: a.options.message }) : null
+        ] }),
+        a.kind === "prompt" ? (
+          // Keyed by the ask, so a second prompt starts empty.
+          /* @__PURE__ */ jsxRuntime.jsx(PromptBody, { ask: a }, a.id)
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", onClick: cancel, children: a.options.cancelLabel ?? "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("nav", { "aria-label": label, className: cn("flex items-center justify-between gap-4", className), children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "secondary", size: "sm", disabled: index === 0, onClick: () => onPage(index - 1), className: "pl-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { "aria-hidden": true }),
+        "Previous"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "secondary", size: "sm", disabled: index >= pages - 1, onClick: () => onPage(index + 1), className: "pr-3", children: [
+        "Next",
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": true })
+      ] })
+    ] })
+  ] });
+}
+function QrCode({
+  value,
+  size = 200,
+  label,
+  className
+}) {
+  const matrix = react.useMemo(() => {
+    try {
+      return QRCode__default.default.create(value, { errorCorrectionLevel: "M" }).modules;
+    } catch {
+      return null;
+    }
+  }, [value]);
+  const path = react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { viewBox: `0 0 ${matrix.size} ${matrix.size}`, shapeRendering: "crispEdges", "aria-hidden": true, className: "block size-full", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: path, fill: "#0a0a0a" }) }) : /* @__PURE__ */ jsxRuntime.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" })
+    }
+  );
+}
 
 Object.defineProperty(exports, "toast", {
   enumerable: true,
   get: function () { return sonner.toast; }
 });
+exports.Accordion = Accordion;
+exports.AccordionItem = AccordionItem;
 exports.Badge = Badge;
 exports.Button = Button;
 exports.Card = Card;
@@ -771,12 +1085,14 @@ exports.CardHeader = CardHeader;
 exports.CardNumeral = CardNumeral;
 exports.CardTitle = CardTitle;
 exports.Checkbox = Checkbox;
+exports.DensityProvider = DensityProvider;
 exports.Dialog = Dialog;
 exports.DialogClose = DialogClose;
 exports.DialogContent = DialogContent;
 exports.DialogDescription = DialogDescription;
 exports.DialogFooter = DialogFooter;
 exports.DialogHeader = DialogHeader;
+exports.DialogHost = DialogHost;
 exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
 exports.DropdownMenu = DropdownMenu;
@@ -790,10 +1106,12 @@ exports.Field = Field;
 exports.Input = Input;
 exports.Kbd = Kbd;
 exports.Label = Label;
+exports.Pagination = Pagination;
 exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
+exports.QrCode = QrCode;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
 exports.ScrollFade = ScrollFade;
@@ -812,6 +1130,7 @@ exports.SheetTitle = SheetTitle;
 exports.SheetTrigger = SheetTrigger;
 exports.Skeleton = Skeleton;
 exports.Spinner = Spinner;
+exports.StatusBadge = StatusBadge;
 exports.StatusDot = StatusDot;
 exports.StatusPill = StatusPill;
 exports.Switch = Switch;
@@ -829,6 +1148,10 @@ exports.badgeVariants = badgeVariants;
 exports.buttonVariants = buttonVariants;
 exports.cardVariants = cardVariants;
 exports.cn = cn;
+exports.confirm = confirm;
+exports.prompt = prompt;
+exports.statusWord = statusWord;
+exports.useDensity = useDensity;
 exports.useTimedOut = useTimedOut;
 //# sourceMappingURL=primitives.js.map
 //# sourceMappingURL=primitives.js.map