@ttt-productions/ui-core 0.11.17 → 0.11.19

package/dist/react/components/consequence-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"consequence-dialog.d.ts","sourceRoot":"","sources":["../../../src/react/components/consequence-dialog.tsx"],"names":[],"mappings":"AAkBA;;;;;GAKG;AACH,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,kCAAkC;IACjD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,sBAAsB;IACrC,uFAAuF;IACvF,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0DAA0D;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC,6EAA6E;IAC7E,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,oFAAoF;IACpF,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,wFAAwF;IACxF,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,6DAA6D;IAC7D,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEhC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,sDAAsD;IACtD,iBAAiB,CAAC,EAAE,kCAAkC,CAAC;IAEvD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;;OAMG;IACH,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACvC;AA0BD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,eAAe,EACf,aAAa,EACb,aAAa,EACb,MAAM,EACN,iBAAiB,EACjB,YAAY,EACZ,WAAsB,EACtB,WAAmB,EACnB,SAAS,GACV,EAAE,sBAAsB,+BA+IxB"}
+{"version":3,"file":"consequence-dialog.d.ts","sourceRoot":"","sources":["../../../src/react/components/consequence-dialog.tsx"],"names":[],"mappings":"AAkBA;;;;;GAKG;AACH,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,kCAAkC;IACjD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,sBAAsB;IACrC,uFAAuF;IACvF,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0DAA0D;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC,6EAA6E;IAC7E,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,oFAAoF;IACpF,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,wFAAwF;IACxF,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,6DAA6D;IAC7D,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEhC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,sDAAsD;IACtD,iBAAiB,CAAC,EAAE,kCAAkC,CAAC;IAEvD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;;OAMG;IACH,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACvC;AA+BD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,eAAe,EACf,aAAa,EACb,aAAa,EACb,MAAM,EACN,iBAAiB,EACjB,YAAY,EACZ,WAAsB,EACtB,WAAmB,EACnB,SAAS,GACV,EAAE,sBAAsB,+BAkJxB"}

package/dist/react/components/consequence-dialog.js

@@ -8,8 +8,13 @@ import { Input } from './input.js';
 import { Label } from './label.js';
 import { Zap, Clock, RotateCcw } from 'lucide-react';
 const SLOT_ICON_CLASS = 'icon-xs mt-0.5 shrink-0 text-muted-foreground';
+/**
+ * One consequence slot: the icon beside a block column whose label sits on its own line above
+ * the slot text. Every element is a block: the `stack-*` spacing is a vertical margin, which an
+ * inline element ignores.
+ */
 function ConsequenceRow({ icon: Icon, label, children, }) {
-    return (_jsxs("span", { className: "flex items-start gap-2", children: [_jsx(Icon, { className: SLOT_ICON_CLASS, "aria-hidden": "true" }), _jsxs("span", { className: "stack-1 min-w-0", children: [_jsx("span", { className: "text-caption font-medium uppercase tracking-wide text-muted-foreground", children: label }), _jsx("span", { className: "text-small text-foreground", children: children })] })] }));
+    return (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Icon, { className: SLOT_ICON_CLASS, "aria-hidden": "true" }), _jsxs("div", { className: "stack-1 min-w-0", children: [_jsx("div", { className: "text-caption font-medium uppercase tracking-wide text-muted-foreground", children: label }), _jsx("div", { className: "text-small text-foreground", children: children })] })] }));
 }
 /**
  * A reusable confirm-before-a-consequential-action dialog. Three optional, consistently-styled
@@ -74,6 +79,6 @@ export function ConsequenceDialog({ trigger, open, onOpenChange, title, immediat
     return (_jsxs(AlertDialog, { open: actualOpen, onOpenChange: handleOpenChange, children: [trigger ? _jsx(AlertDialogTrigger, { asChild: true, children: trigger }) : null, _jsxs(AlertDialogContent, { onEscapeKeyDown: (e) => {
                     if (pending)
                         e.preventDefault();
-                }, children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { asChild: true, children: _jsxs("span", { className: "stack-3", children: [immediateEffect ? (_jsx(ConsequenceRow, { icon: Zap, label: "Immediately", children: immediateEffect })) : null, delayedEffect ? (_jsx(ConsequenceRow, { icon: Clock, label: "Afterward", children: delayedEffect })) : null, reversibility ? (_jsx(ConsequenceRow, { icon: RotateCcw, label: "Reversibility", children: reversibility })) : null] }) })] }), reason ? (_jsxs("div", { className: "stack-2", children: [_jsx(Label, { htmlFor: reasonId, children: reason.label ?? 'Reason' }), _jsx(Textarea, { id: reasonId, value: reason.value, onChange: (e) => reason.onChange(e.target.value), placeholder: reason.placeholder, maxLength: reason.maxLength, rows: reason.rows ?? 3, disabled: pending })] })) : null, typedConfirmation ? (_jsxs("div", { className: "stack-2", children: [_jsx(Label, { htmlFor: typedId, children: typedConfirmation.label ?? (_jsxs(_Fragment, { children: ["Type ", _jsx("span", { className: "font-mono", children: typedConfirmation.phrase }), " to confirm"] })) }), _jsx(Input, { id: typedId, value: typedValue, onChange: (e) => setTypedValue(e.target.value), placeholder: typedConfirmation.phrase, disabled: pending, autoComplete: "off" })] })) : null, _jsxs(AlertDialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => handleOpenChange(false), disabled: pending, children: cancelLabel }), _jsx(Button, { variant: destructive ? 'destructive' : 'default', onClick: handleConfirm, disabled: !reasonOk || !typedOk, pending: pending, children: confirmLabel })] })] })] }));
+                }, children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { asChild: true, children: _jsxs("div", { className: "stack-3 text-left", children: [immediateEffect ? (_jsx(ConsequenceRow, { icon: Zap, label: "Immediately", children: immediateEffect })) : null, delayedEffect ? (_jsx(ConsequenceRow, { icon: Clock, label: "Afterward", children: delayedEffect })) : null, reversibility ? (_jsx(ConsequenceRow, { icon: RotateCcw, label: "Reversibility", children: reversibility })) : null] }) })] }), reason ? (_jsxs("div", { className: "stack-2", children: [_jsx(Label, { htmlFor: reasonId, children: reason.label ?? 'Reason' }), _jsx(Textarea, { id: reasonId, value: reason.value, onChange: (e) => reason.onChange(e.target.value), placeholder: reason.placeholder, maxLength: reason.maxLength, rows: reason.rows ?? 3, disabled: pending })] })) : null, typedConfirmation ? (_jsxs("div", { className: "stack-2", children: [_jsx(Label, { htmlFor: typedId, children: typedConfirmation.label ?? (_jsxs(_Fragment, { children: ["Type ", _jsx("span", { className: "font-mono", children: typedConfirmation.phrase }), " to confirm"] })) }), _jsx(Input, { id: typedId, value: typedValue, onChange: (e) => setTypedValue(e.target.value), placeholder: typedConfirmation.phrase, disabled: pending, autoComplete: "off" })] })) : null, _jsxs(AlertDialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => handleOpenChange(false), disabled: pending, children: cancelLabel }), _jsx(Button, { variant: destructive ? 'destructive' : 'default', onClick: handleConfirm, disabled: !reasonOk || !typedOk, pending: pending, children: confirmLabel })] })] })] }));
 }
 //# sourceMappingURL=consequence-dialog.js.map

package/dist/react/components/consequence-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"consequence-dialog.js","sourceRoot":"","sources":["../../../src/react/components/consequence-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\nimport {\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n} from './alert-dialog.js';\nimport { Button } from './button.js';\nimport { Textarea } from './textarea.js';\nimport { Input } from './input.js';\nimport { Label } from './label.js';\nimport { Zap, Clock, RotateCcw } from 'lucide-react';\n\n/**\n * The inline required-reason config. The caller OWNS the reason value/onChange (draft state lives at\n * the call site). Any `minLength`/`maxLength` the caller supplies MUST come from a caller-owned\n * constant — this component declares no business numbers and no copy; it only derives the gate + the\n * Textarea `maxLength` from the values it is handed.\n */\nexport interface ConsequenceDialogReason {\n  required?: boolean;\n  minLength?: number;\n  maxLength?: number;\n  placeholder?: string;\n  label?: React.ReactNode;\n  value: string;\n  onChange: (value: string) => void;\n  rows?: number;\n}\n\n/**\n * The exact-match typed-confirmation gate. `phrase` is business copy owned by the CALLER; the\n * component only compares the typed value against it.\n */\nexport interface ConsequenceDialogTypedConfirmation {\n  phrase: string;\n  label?: React.ReactNode;\n}\n\nexport interface ConsequenceDialogProps {\n  /** Uncontrolled open model: the element that opens the dialog (rendered `asChild`). */\n  trigger?: React.ReactNode;\n  /** Controlled open model. Provide with `onOpenChange`. */\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n\n  /** Heading — a string or node so callers can interpolate amounts / names. */\n  title: React.ReactNode;\n\n  /** SLOT 1 — what happens right now (e.g. \"initiates a Stripe refund of $X now\"). */\n  immediateEffect?: React.ReactNode;\n  /** SLOT 2 — what settles later, out of band (webhook / worker / async confirmation). */\n  delayedEffect?: React.ReactNode;\n  /** SLOT 3 — whether/how this can be undone or superseded. */\n  reversibility?: React.ReactNode;\n\n  /** Inline required-reason field. Optional. */\n  reason?: ConsequenceDialogReason;\n  /** Exact-phrase typed-confirmation gate. Optional. */\n  typedConfirmation?: ConsequenceDialogTypedConfirmation;\n\n  confirmLabel: React.ReactNode;\n  cancelLabel?: React.ReactNode;\n  /** `true` styles the confirm button with `bg-destructive`. */\n  destructive?: boolean;\n\n  /**\n   * Runs on confirm. May be async — while it is pending the dialog STAYS OPEN, both buttons disable,\n   * and the confirm button shows its pending spinner. Closes on resolve. If it rejects the dialog\n   * stays open so the caller's own surface (error toast, TOTP step-up) can show and the operator can\n   * retry or cancel. This component takes no Sentry/monitoring dependency — every error path\n   * belongs to the caller's `onConfirm`.\n   */\n  onConfirm: () => void | Promise<void>;\n}\n\nconst SLOT_ICON_CLASS = 'icon-xs mt-0.5 shrink-0 text-muted-foreground';\n\nfunction ConsequenceRow({\n  icon: Icon,\n  label,\n  children,\n}: {\n  icon: typeof Zap;\n  label: string;\n  children: React.ReactNode;\n}) {\n  return (\n    <span className=\"flex items-start gap-2\">\n      <Icon className={SLOT_ICON_CLASS} aria-hidden=\"true\" />\n      <span className=\"stack-1 min-w-0\">\n        <span className=\"text-caption font-medium uppercase tracking-wide text-muted-foreground\">\n          {label}\n        </span>\n        <span className=\"text-small text-foreground\">{children}</span>\n      </span>\n    </span>\n  );\n}\n\n/**\n * A reusable confirm-before-a-consequential-action dialog. Three optional, consistently-styled\n * consequence slots (immediate / afterward / reversibility), an optional inline required-reason field,\n * and an optional exact-phrase typed-confirmation gate. Composes the ui-core AlertDialog primitives\n * (Radix) — it never re-implements them. Supports BOTH a `trigger` (uncontrolled) and `open` /\n * `onOpenChange` (controlled).\n *\n * Pending model: the confirm button is a plain `Button` (NOT `AlertDialogAction`), so Radix does not\n * auto-close on click; open state is managed here so the dialog stays open with a visible spinner\n * until `onConfirm` resolves.\n */\nexport function ConsequenceDialog({\n  trigger,\n  open,\n  onOpenChange,\n  title,\n  immediateEffect,\n  delayedEffect,\n  reversibility,\n  reason,\n  typedConfirmation,\n  confirmLabel,\n  cancelLabel = 'Cancel',\n  destructive = false,\n  onConfirm,\n}: ConsequenceDialogProps) {\n  const isControlled = open !== undefined;\n  const [internalOpen, setInternalOpen] = useState(false);\n  const [typedValue, setTypedValue] = useState('');\n  const [pending, setPending] = useState(false);\n\n  const actualOpen = isControlled ? open : internalOpen;\n\n  const reasonId = useId();\n  const typedId = useId();\n\n  const setOpenState = useCallback(\n    (next: boolean) => {\n      if (isControlled) onOpenChange?.(next);\n      else setInternalOpen(next);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  // Never allow an open-state change (Escape, cancel, controlled parent) to fight the pending action.\n  const handleOpenChange = useCallback(\n    (next: boolean) => {\n      if (pending) return;\n      setTypedValue(''); // reset the typed gate on every open/close\n      setOpenState(next);\n    },\n    [pending, setOpenState],\n  );\n\n  const handleConfirm = useCallback(async () => {\n    if (pending) return;\n    setPending(true);\n    try {\n      await onConfirm();\n      setTypedValue('');\n      setOpenState(false);\n    } catch {\n      // Keep the dialog open — the caller's onConfirm surfaced the error (toast / step-up). The\n      // operator can retry or cancel. Never rethrow, never monitor here.\n    } finally {\n      setPending(false);\n    }\n  }, [pending, onConfirm, setOpenState]);\n\n  const reasonTrimmedLength = reason ? reason.value.trim().length : 0;\n  const reasonProvided = reasonTrimmedLength > 0;\n  const reasonOk = !reason\n    ? true\n    : reason.required && !reasonProvided\n      ? false\n      : !reasonProvided\n        ? true // optional + empty is fine\n        : (reason.minLength === undefined || reasonTrimmedLength >= reason.minLength) &&\n          (reason.maxLength === undefined || reason.value.length <= reason.maxLength);\n\n  const typedOk = !typedConfirmation ? true : typedValue === typedConfirmation.phrase;\n\n  return (\n    <AlertDialog open={actualOpen} onOpenChange={handleOpenChange}>\n      {trigger ? <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger> : null}\n      <AlertDialogContent\n        onEscapeKeyDown={(e) => {\n          if (pending) e.preventDefault();\n        }}\n      >\n        <AlertDialogHeader>\n          <AlertDialogTitle>{title}</AlertDialogTitle>\n          <AlertDialogDescription asChild>\n            <span className=\"stack-3\">\n              {immediateEffect ? (\n                <ConsequenceRow icon={Zap} label=\"Immediately\">\n                  {immediateEffect}\n                </ConsequenceRow>\n              ) : null}\n              {delayedEffect ? (\n                <ConsequenceRow icon={Clock} label=\"Afterward\">\n                  {delayedEffect}\n                </ConsequenceRow>\n              ) : null}\n              {reversibility ? (\n                <ConsequenceRow icon={RotateCcw} label=\"Reversibility\">\n                  {reversibility}\n                </ConsequenceRow>\n              ) : null}\n            </span>\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n\n        {reason ? (\n          <div className=\"stack-2\">\n            <Label htmlFor={reasonId}>{reason.label ?? 'Reason'}</Label>\n            <Textarea\n              id={reasonId}\n              value={reason.value}\n              onChange={(e) => reason.onChange(e.target.value)}\n              placeholder={reason.placeholder}\n              maxLength={reason.maxLength}\n              rows={reason.rows ?? 3}\n              disabled={pending}\n            />\n          </div>\n        ) : null}\n\n        {typedConfirmation ? (\n          <div className=\"stack-2\">\n            <Label htmlFor={typedId}>\n              {typedConfirmation.label ?? (\n                <>\n                  Type <span className=\"font-mono\">{typedConfirmation.phrase}</span> to confirm\n                </>\n              )}\n            </Label>\n            <Input\n              id={typedId}\n              value={typedValue}\n              onChange={(e) => setTypedValue(e.target.value)}\n              placeholder={typedConfirmation.phrase}\n              disabled={pending}\n              autoComplete=\"off\"\n            />\n          </div>\n        ) : null}\n\n        <AlertDialogFooter>\n          <Button\n            variant=\"outline\"\n            onClick={() => handleOpenChange(false)}\n            disabled={pending}\n          >\n            {cancelLabel}\n          </Button>\n          <Button\n            variant={destructive ? 'destructive' : 'default'}\n            onClick={handleConfirm}\n            disabled={!reasonOk || !typedOk}\n            pending={pending}\n          >\n            {confirmLabel}\n          </Button>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n"]}
+{"version":3,"file":"consequence-dialog.js","sourceRoot":"","sources":["../../../src/react/components/consequence-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\nimport {\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n} from './alert-dialog.js';\nimport { Button } from './button.js';\nimport { Textarea } from './textarea.js';\nimport { Input } from './input.js';\nimport { Label } from './label.js';\nimport { Zap, Clock, RotateCcw } from 'lucide-react';\n\n/**\n * The inline required-reason config. The caller OWNS the reason value/onChange (draft state lives at\n * the call site). Any `minLength`/`maxLength` the caller supplies MUST come from a caller-owned\n * constant — this component declares no business numbers and no copy; it only derives the gate + the\n * Textarea `maxLength` from the values it is handed.\n */\nexport interface ConsequenceDialogReason {\n  required?: boolean;\n  minLength?: number;\n  maxLength?: number;\n  placeholder?: string;\n  label?: React.ReactNode;\n  value: string;\n  onChange: (value: string) => void;\n  rows?: number;\n}\n\n/**\n * The exact-match typed-confirmation gate. `phrase` is business copy owned by the CALLER; the\n * component only compares the typed value against it.\n */\nexport interface ConsequenceDialogTypedConfirmation {\n  phrase: string;\n  label?: React.ReactNode;\n}\n\nexport interface ConsequenceDialogProps {\n  /** Uncontrolled open model: the element that opens the dialog (rendered `asChild`). */\n  trigger?: React.ReactNode;\n  /** Controlled open model. Provide with `onOpenChange`. */\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n\n  /** Heading — a string or node so callers can interpolate amounts / names. */\n  title: React.ReactNode;\n\n  /** SLOT 1 — what happens right now (e.g. \"initiates a Stripe refund of $X now\"). */\n  immediateEffect?: React.ReactNode;\n  /** SLOT 2 — what settles later, out of band (webhook / worker / async confirmation). */\n  delayedEffect?: React.ReactNode;\n  /** SLOT 3 — whether/how this can be undone or superseded. */\n  reversibility?: React.ReactNode;\n\n  /** Inline required-reason field. Optional. */\n  reason?: ConsequenceDialogReason;\n  /** Exact-phrase typed-confirmation gate. Optional. */\n  typedConfirmation?: ConsequenceDialogTypedConfirmation;\n\n  confirmLabel: React.ReactNode;\n  cancelLabel?: React.ReactNode;\n  /** `true` styles the confirm button with `bg-destructive`. */\n  destructive?: boolean;\n\n  /**\n   * Runs on confirm. May be async — while it is pending the dialog STAYS OPEN, both buttons disable,\n   * and the confirm button shows its pending spinner. Closes on resolve. If it rejects the dialog\n   * stays open so the caller's own surface (error toast, TOTP step-up) can show and the operator can\n   * retry or cancel. This component takes no Sentry/monitoring dependency — every error path\n   * belongs to the caller's `onConfirm`.\n   */\n  onConfirm: () => void | Promise<void>;\n}\n\nconst SLOT_ICON_CLASS = 'icon-xs mt-0.5 shrink-0 text-muted-foreground';\n\n/**\n * One consequence slot: the icon beside a block column whose label sits on its own line above\n * the slot text. Every element is a block: the `stack-*` spacing is a vertical margin, which an\n * inline element ignores.\n */\nfunction ConsequenceRow({\n  icon: Icon,\n  label,\n  children,\n}: {\n  icon: typeof Zap;\n  label: string;\n  children: React.ReactNode;\n}) {\n  return (\n    <div className=\"flex items-start gap-2\">\n      <Icon className={SLOT_ICON_CLASS} aria-hidden=\"true\" />\n      <div className=\"stack-1 min-w-0\">\n        <div className=\"text-caption font-medium uppercase tracking-wide text-muted-foreground\">\n          {label}\n        </div>\n        <div className=\"text-small text-foreground\">{children}</div>\n      </div>\n    </div>\n  );\n}\n\n/**\n * A reusable confirm-before-a-consequential-action dialog. Three optional, consistently-styled\n * consequence slots (immediate / afterward / reversibility), an optional inline required-reason field,\n * and an optional exact-phrase typed-confirmation gate. Composes the ui-core AlertDialog primitives\n * (Radix) — it never re-implements them. Supports BOTH a `trigger` (uncontrolled) and `open` /\n * `onOpenChange` (controlled).\n *\n * Pending model: the confirm button is a plain `Button` (NOT `AlertDialogAction`), so Radix does not\n * auto-close on click; open state is managed here so the dialog stays open with a visible spinner\n * until `onConfirm` resolves.\n */\nexport function ConsequenceDialog({\n  trigger,\n  open,\n  onOpenChange,\n  title,\n  immediateEffect,\n  delayedEffect,\n  reversibility,\n  reason,\n  typedConfirmation,\n  confirmLabel,\n  cancelLabel = 'Cancel',\n  destructive = false,\n  onConfirm,\n}: ConsequenceDialogProps) {\n  const isControlled = open !== undefined;\n  const [internalOpen, setInternalOpen] = useState(false);\n  const [typedValue, setTypedValue] = useState('');\n  const [pending, setPending] = useState(false);\n\n  const actualOpen = isControlled ? open : internalOpen;\n\n  const reasonId = useId();\n  const typedId = useId();\n\n  const setOpenState = useCallback(\n    (next: boolean) => {\n      if (isControlled) onOpenChange?.(next);\n      else setInternalOpen(next);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  // Never allow an open-state change (Escape, cancel, controlled parent) to fight the pending action.\n  const handleOpenChange = useCallback(\n    (next: boolean) => {\n      if (pending) return;\n      setTypedValue(''); // reset the typed gate on every open/close\n      setOpenState(next);\n    },\n    [pending, setOpenState],\n  );\n\n  const handleConfirm = useCallback(async () => {\n    if (pending) return;\n    setPending(true);\n    try {\n      await onConfirm();\n      setTypedValue('');\n      setOpenState(false);\n    } catch {\n      // Keep the dialog open — the caller's onConfirm surfaced the error (toast / step-up). The\n      // operator can retry or cancel. Never rethrow, never monitor here.\n    } finally {\n      setPending(false);\n    }\n  }, [pending, onConfirm, setOpenState]);\n\n  const reasonTrimmedLength = reason ? reason.value.trim().length : 0;\n  const reasonProvided = reasonTrimmedLength > 0;\n  const reasonOk = !reason\n    ? true\n    : reason.required && !reasonProvided\n      ? false\n      : !reasonProvided\n        ? true // optional + empty is fine\n        : (reason.minLength === undefined || reasonTrimmedLength >= reason.minLength) &&\n          (reason.maxLength === undefined || reason.value.length <= reason.maxLength);\n\n  const typedOk = !typedConfirmation ? true : typedValue === typedConfirmation.phrase;\n\n  return (\n    <AlertDialog open={actualOpen} onOpenChange={handleOpenChange}>\n      {trigger ? <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger> : null}\n      <AlertDialogContent\n        onEscapeKeyDown={(e) => {\n          if (pending) e.preventDefault();\n        }}\n      >\n        <AlertDialogHeader>\n          <AlertDialogTitle>{title}</AlertDialogTitle>\n          {/* A div, not the primitive's default <p>: the rows are blocks, which a <p> cannot hold.\n              Left-aligned at every width — the header centres its text on narrow screens, and a\n              wrapped consequence line reads as a list, not a caption. */}\n          <AlertDialogDescription asChild>\n            <div className=\"stack-3 text-left\">\n              {immediateEffect ? (\n                <ConsequenceRow icon={Zap} label=\"Immediately\">\n                  {immediateEffect}\n                </ConsequenceRow>\n              ) : null}\n              {delayedEffect ? (\n                <ConsequenceRow icon={Clock} label=\"Afterward\">\n                  {delayedEffect}\n                </ConsequenceRow>\n              ) : null}\n              {reversibility ? (\n                <ConsequenceRow icon={RotateCcw} label=\"Reversibility\">\n                  {reversibility}\n                </ConsequenceRow>\n              ) : null}\n            </div>\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n\n        {reason ? (\n          <div className=\"stack-2\">\n            <Label htmlFor={reasonId}>{reason.label ?? 'Reason'}</Label>\n            <Textarea\n              id={reasonId}\n              value={reason.value}\n              onChange={(e) => reason.onChange(e.target.value)}\n              placeholder={reason.placeholder}\n              maxLength={reason.maxLength}\n              rows={reason.rows ?? 3}\n              disabled={pending}\n            />\n          </div>\n        ) : null}\n\n        {typedConfirmation ? (\n          <div className=\"stack-2\">\n            <Label htmlFor={typedId}>\n              {typedConfirmation.label ?? (\n                <>\n                  Type <span className=\"font-mono\">{typedConfirmation.phrase}</span> to confirm\n                </>\n              )}\n            </Label>\n            <Input\n              id={typedId}\n              value={typedValue}\n              onChange={(e) => setTypedValue(e.target.value)}\n              placeholder={typedConfirmation.phrase}\n              disabled={pending}\n              autoComplete=\"off\"\n            />\n          </div>\n        ) : null}\n\n        <AlertDialogFooter>\n          <Button\n            variant=\"outline\"\n            onClick={() => handleOpenChange(false)}\n            disabled={pending}\n          >\n            {cancelLabel}\n          </Button>\n          <Button\n            variant={destructive ? 'destructive' : 'default'}\n            onClick={handleConfirm}\n            disabled={!reasonOk || !typedOk}\n            pending={pending}\n          >\n            {confirmLabel}\n          </Button>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttt-productions/ui-core",
-  "version": "0.11.17",
+  "version": "0.11.19",
   "description": "Shared UI components for TTT Productions projects",
   "repository": {
     "type": "git",
@@ -16,8 +16,7 @@
     "**/*.css"
   ],
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "exports": {
     ".": {
@@ -99,7 +98,6 @@
     "@types/react-dom": "^19.0.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "typescript": "^5.8.3",
     "react-hook-form": "^7.69.0",
     "@hookform/resolvers": "^5.2.2",
     "@ttt-productions/firebase-helpers": "^0.12.9",

package/src/index.ts

@@ -1,3 +0,0 @@
-// Server-safe utilities only. React components and hooks live behind ./react.
-export * from "./lib/utils.js";
-export * from "./lib/format-numbers.js";

package/src/lib/format-numbers.ts

@@ -1,17 +0,0 @@
-/**
- * Compact number formatter:
- *   < 10,000 → "1234"
- *   10,000 ≤ n < 1,000,000 → "12.3k" (trailing ".0" stripped)
- *   ≥ 1,000,000 → "1.2M" (trailing ".0" stripped)
- */
-export function formatLargeNumber(num: number): string {
-  if (num >= 1_000_000) {
-    const formatted = (num / 1_000_000).toFixed(1);
-    return (formatted.endsWith(".0") ? formatted.slice(0, -2) : formatted) + "M";
-  }
-  if (num >= 10_000) {
-    const formatted = (num / 1000).toFixed(1);
-    return (formatted.endsWith(".0") ? formatted.slice(0, -2) : formatted) + "k";
-  }
-  return num.toString();
-}

package/src/lib/utils.ts

@@ -1,9 +0,0 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-/**
- * Merge Tailwind CSS classes with proper precedence
- */
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}

package/src/react/components/accordion.tsx

@@ -1,53 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
-
-import { cn } from "../../lib/utils.js"
-
-const Accordion = AccordionPrimitive.Root
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={cn(className)} {...props} />
-))
-AccordionItem.displayName = "AccordionItem"
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
-  </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/react/components/alert-dialog.tsx

@@ -1,131 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-
-import { cn } from "../../lib/utils.js"
-import { buttonVariants } from "./button.js"
-
-const AlertDialog = AlertDialogPrimitive.Root
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
-const AlertDialogPortal = AlertDialogPrimitive.Portal
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-[color:var(--scrim)]  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 elevation-raised duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg [&>*]:min-w-0",
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
-    {...props}
-  />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold break-words", className)}
-    {...props}
-  />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground break-words", className)}
-    {...props}
-  />
-))
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
-    {...props}
-  />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}

package/src/react/components/alert.tsx

@@ -1,59 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../lib/utils.js"
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-))
-Alert.displayName = "Alert"
-
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight break-words", className)}
-    {...props}
-  />
-))
-AlertTitle.displayName = "AlertTitle"
-
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed break-words", className)}
-    {...props}
-  />
-))
-AlertDescription.displayName = "AlertDescription"
-
-export { Alert, AlertTitle, AlertDescription }

package/src/react/components/avatar.tsx

@@ -1,51 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-
-import { cn } from "../../lib/utils.js"
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
-    {...props}
-  />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, src, ...props }, ref) => {
-  if (!src) return null
-  return (
-    <AvatarPrimitive.Image
-      ref={ref}
-      src={src}
-      className={cn("aspect-square h-full w-full", className)}
-      {...props}
-    />
-  )
-})
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
-
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-[color:var(--avatar-fallback)] text-primary font-semibold",
-      className
-    )}
-    {...props}
-  />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
-
-export { Avatar, AvatarImage, AvatarFallback }

package/src/react/components/badge.tsx

@@ -1,31 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "../../lib/utils.js";
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: { variant: "default" },
-  }
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };

package/src/react/components/button.tsx

@@ -1,102 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Slot, Slottable } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../lib/utils.js"
-import { Spinner } from "./spinner.js"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-bold ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default:
-          "button-default bg-primary text-primary-foreground hover:bg-primary/90 border-2 border-[hsl(var(--brand-primary-deep))]",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90 border-2 border-[hsl(var(--destructive-border))]",
-        success:
-          "bg-[color:var(--button-success)] text-[hsl(var(--success-foreground))] hover:bg-[color:var(--button-success)]/90 border-2 border-[hsl(var(--status-success-border))]",
-        outline:
-          "border-2 border-border bg-background hover:bg-accent hover:text-accent-foreground text-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-2 border-border",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-        inverted:
-          "bg-[hsl(var(--inverted-background))] text-[hsl(var(--inverted-foreground))] hover:bg-[hsl(var(--inverted-background))]/90 border-2 border-[hsl(var(--inverted-border))]",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-  /**
-   * Async work this button started is in flight. The button disables itself — so
-   * neither a repeat click nor an implicit form resubmit can fire — sets
-   * `aria-busy`, and shows the canonical spinner: an icon button (`size="icon"`)
-   * swaps its icon for it; any other button shows it in place of its `icon`.
-   */
-  pending?: boolean
-  /** Leading icon, rendered before the label. While `pending`, the spinner takes its place. */
-  icon?: React.ReactNode
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, pending = false, icon, disabled, children, ...props }, ref) => {
-    const shared = {
-      ...props,
-      ...(pending ? { "aria-busy": true, "data-pending": "" } : {}),
-      disabled: disabled || pending || undefined,
-      className: cn(buttonVariants({ variant, size, className })),
-    }
-    const spinner = <Spinner size={size === "lg" ? "sm" : "xs"} />
-    const leading = pending ? spinner : icon
-
-    if (asChild) {
-      // Slot finds the Slottable among its DIRECT children, so the leading slot and the
-      // Slottable must be siblings here — never wrapped in a fragment.
-      return leading ? (
-        <Slot ref={ref} {...shared}>
-          {leading}
-          <Slottable>{children}</Slottable>
-        </Slot>
-      ) : (
-        <Slot ref={ref} {...shared}>
-          {children}
-        </Slot>
-      )
-    }
-
-    return (
-      <button ref={ref} {...shared}>
-        {size === "icon" ? (
-          pending ? spinner : children
-        ) : (
-          <>
-            {leading}
-            {children}
-          </>
-        )}
-      </button>
-    )
-  }
-)
-
-Button.displayName = "Button"
-
-export { Button, buttonVariants }

package/src/react/components/card.tsx

@@ -1,54 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "../../lib/utils.js"
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn("rounded-lg border-2 card-border bg-card text-card-foreground", className)}
-      {...props}
-    />
-  )
-)
-Card.displayName = "Card"
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
-  )
-)
-CardHeader.displayName = "CardHeader"
-
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h3
-      ref={ref}
-      className={cn("text-2xl font-semibold leading-none tracking-tight break-words card-title", className)}
-      {...props}
-    />
-  )
-)
-CardTitle.displayName = "CardTitle"
-
-const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn("break-words card-description", className)} {...props} />
-  )
-)
-CardDescription.displayName = "CardDescription"
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-)
-CardContent.displayName = "CardContent"
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
-  )
-)
-CardFooter.displayName = "CardFooter"
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }