@motir/design-system 0.1.0

package/dist/components/ui/Spinner.js

@@ -0,0 +1,39 @@
+import { forwardRef } from 'react';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/ui/Spinner.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var spinnerVariants = cva(
+  "inline-block animate-spin rounded-full border-current border-t-transparent",
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4 border-[1.5px]",
+        md: "h-5 w-5 border-2",
+        lg: "h-8 w-8 border-[3px]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var Spinner = forwardRef(function Spinner2({ className, size, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      role: "status",
+      "aria-label": rest["aria-label"] ?? "Loading",
+      className: cn(spinnerVariants({ size }), className),
+      ...rest
+    }
+  );
+});
+
+export { Spinner };
+//# sourceMappingURL=Spinner.js.map
+//# sourceMappingURL=Spinner.js.map

package/dist/components/ui/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/Spinner.tsx"],"names":["Spinner"],"mappings":";;;;;;;AAcO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACHA,IAAM,eAAA,GAAkB,GAAA;AAAA,EACtB,4EAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,wBAAA;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,IAAA;AAAK;AAElC,CAAA;AAKO,IAAM,OAAA,GAAU,UAAA,CAA0C,SAASA,QAAAA,CACxE,EAAE,WAAW,IAAA,EAAM,GAAG,IAAA,EAAK,EAC3B,GAAA,EACA;AACA,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MACL,YAAA,EAAY,IAAA,CAAK,YAAY,CAAA,IAAK,SAAA;AAAA,MAClC,WAAW,EAAA,CAAG,eAAA,CAAgB,EAAE,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MACjD,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC","file":"Spinner.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { forwardRef, type HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Spinner — pure CSS rotation indicator.\n *\n * Three sizes; works standalone or inside a Button's loading state.\n *\n * @example\n * <Spinner size=\"md\" />\n * <Spinner size=\"sm\" aria-label=\"Loading\" />\n */\nconst spinnerVariants = cva(\n  'inline-block animate-spin rounded-full border-current border-t-transparent',\n  {\n    variants: {\n      size: {\n        sm: 'h-4 w-4 border-[1.5px]',\n        md: 'h-5 w-5 border-2',\n        lg: 'h-8 w-8 border-[3px]',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n);\n\nexport interface SpinnerProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'role'>, VariantProps<typeof spinnerVariants> {}\n\nexport const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(function Spinner(\n  { className, size, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      role=\"status\"\n      aria-label={rest['aria-label'] ?? 'Loading'}\n      className={cn(spinnerVariants({ size }), className)}\n      {...rest}\n    />\n  );\n});\n"]}

package/dist/components/ui/Switch.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Switch — a sliding on/off toggle (`role="switch"`), keyboard-operable.
+ *
+ * The shared primitive the design system names (notifications preferences
+ * matrix, automation rule enable, …). Colour flows through `--el-*`; the knob +
+ * track are genuinely-circular (`rounded-full`), the shape-rule carve-out for a
+ * pill control. Always pass an `aria-label` (or wire an external `<label>` via
+ * `id`) so the toggle is screen-reader-legible — a bare switch announces no
+ * purpose.
+ *
+ * @example
+ * <Switch checked={on} onCheckedChange={setOn} aria-label="Email for Mentioned" />
+ */
+interface SwitchProps {
+    checked: boolean;
+    onCheckedChange: (next: boolean) => void;
+    disabled?: boolean;
+    /** Accessible name — required unless an external `<label htmlFor=id>` exists. */
+    'aria-label'?: string;
+    /**
+     * Accessible name by reference — the id of a visible label element. Use this
+     * instead of `aria-label` when the label already renders on screen (so the
+     * name stays in sync with the visible text). One of `aria-label` /
+     * `aria-labelledby` should be set, else the switch announces no purpose.
+     */
+    'aria-labelledby'?: string;
+    id?: string;
+    className?: string;
+}
+declare function Switch({ checked, onCheckedChange, disabled, id, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }: SwitchProps): react_jsx_runtime.JSX.Element;
+
+export { Switch, type SwitchProps };

package/dist/components/ui/Switch.js

@@ -0,0 +1,50 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Switch({
+  checked,
+  onCheckedChange,
+  disabled,
+  id,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      id,
+      "aria-checked": checked,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      disabled,
+      onClick: () => onCheckedChange(!checked),
+      className: cn(
+        "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border transition-colors focus-visible:ring-2 focus-visible:ring-(--focus-ring-color) focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        checked ? "border-(--el-switch-on) bg-(--el-switch-on)" : "border-(--el-border-strong) bg-(--el-muted)",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "inline-block size-3.5 rounded-full bg-(--el-switch-knob) shadow-(--shadow-subtle) transition-transform",
+            checked ? "translate-x-[18px]" : "translate-x-0.5"
+          )
+        }
+      )
+    }
+  );
+}
+
+export { Switch };
+//# sourceMappingURL=Switch.js.map
+//# sourceMappingURL=Switch.js.map

package/dist/components/ui/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/Switch.tsx"],"names":[],"mappings":";;;;;AAcO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACgBO,SAAS,MAAA,CAAO;AAAA,EACrB,OAAA;AAAA,EACA,eAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,EAAc,SAAA;AAAA,EACd,iBAAA,EAAmB;AACrB,CAAA,EAAgB;AACd,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,IAAA,EAAK,QAAA;AAAA,MACL,EAAA;AAAA,MACA,cAAA,EAAc,OAAA;AAAA,MACd,YAAA,EAAY,SAAA;AAAA,MACZ,iBAAA,EAAiB,cAAA;AAAA,MACjB,QAAA;AAAA,MACA,OAAA,EAAS,MAAM,eAAA,CAAgB,CAAC,OAAO,CAAA;AAAA,MACvC,SAAA,EAAW,EAAA;AAAA,QACT,kOAAA;AAAA,QACA,UACI,6CAAA,GACA,6CAAA;AAAA,QACJ;AAAA,OACF;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAW,IAAA;AAAA,UACX,SAAA,EAAW,EAAA;AAAA,YACT,wGAAA;AAAA,YACA,UAAU,oBAAA,GAAuB;AAAA;AACnC;AAAA;AACF;AAAA,GACF;AAEJ","file":"Switch.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { cn } from '../../utils/cn';\n\n/**\n * Switch — a sliding on/off toggle (`role=\"switch\"`), keyboard-operable.\n *\n * The shared primitive the design system names (notifications preferences\n * matrix, automation rule enable, …). Colour flows through `--el-*`; the knob +\n * track are genuinely-circular (`rounded-full`), the shape-rule carve-out for a\n * pill control. Always pass an `aria-label` (or wire an external `<label>` via\n * `id`) so the toggle is screen-reader-legible — a bare switch announces no\n * purpose.\n *\n * @example\n * <Switch checked={on} onCheckedChange={setOn} aria-label=\"Email for Mentioned\" />\n */\nexport interface SwitchProps {\n  checked: boolean;\n  onCheckedChange: (next: boolean) => void;\n  disabled?: boolean;\n  /** Accessible name — required unless an external `<label htmlFor=id>` exists. */\n  'aria-label'?: string;\n  /**\n   * Accessible name by reference — the id of a visible label element. Use this\n   * instead of `aria-label` when the label already renders on screen (so the\n   * name stays in sync with the visible text). One of `aria-label` /\n   * `aria-labelledby` should be set, else the switch announces no purpose.\n   */\n  'aria-labelledby'?: string;\n  id?: string;\n  className?: string;\n}\n\nexport function Switch({\n  checked,\n  onCheckedChange,\n  disabled,\n  id,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n}: SwitchProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      id={id}\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      disabled={disabled}\n      onClick={() => onCheckedChange(!checked)}\n      className={cn(\n        'relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border transition-colors focus-visible:ring-2 focus-visible:ring-(--focus-ring-color) focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n        checked\n          ? 'border-(--el-switch-on) bg-(--el-switch-on)'\n          : 'border-(--el-border-strong) bg-(--el-muted)',\n        className,\n      )}\n    >\n      <span\n        aria-hidden\n        className={cn(\n          'inline-block size-3.5 rounded-full bg-(--el-switch-knob) shadow-(--shadow-subtle) transition-transform',\n          checked ? 'translate-x-[18px]' : 'translate-x-0.5',\n        )}\n      />\n    </button>\n  );\n}\n"]}

package/dist/components/ui/Textarea.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { TextareaHTMLAttributes } from 'react';
+
+/**
+ * Textarea — multi-line text field. Mirrors Input's props (label, error,
+ * helperText) but no prefix/suffix slots (uncommon shape for textareas).
+ * Auto-resize is intentionally NOT supported in v1 — pass `rows` to size.
+ *
+ * @example
+ * <Textarea label="Description" rows={4} helperText="Max 500 chars" />
+ */
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+export { Textarea, type TextareaProps };

package/dist/components/ui/Textarea.js

@@ -0,0 +1,72 @@
+import { forwardRef, useId } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/ui/Textarea.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function FormField({
+  label,
+  error,
+  errorVariant = "text",
+  helperText,
+  htmlFor,
+  className,
+  children
+}) {
+  const describedById2 = error ? `${htmlFor}-error` : helperText ? `${htmlFor}-helper` : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    label ? /* @__PURE__ */ jsx("label", { htmlFor, className: "font-sans text-sm font-medium text-(--el-text)", children: label }) : null,
+    children,
+    error ? /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: describedById2,
+        role: "alert",
+        className: cn(
+          "font-sans text-xs",
+          errorVariant === "box" && "bg-(--el-danger-surface) text-(--el-danger-surface-text) rounded-(--radius-control) px-(--spacing-tooltip-x) py-(--spacing-tooltip-y)"
+        ),
+        style: errorVariant === "box" ? void 0 : { color: "var(--el-danger)" },
+        children: error
+      }
+    ) : helperText ? /* @__PURE__ */ jsx("p", { id: describedById2, className: "text-(--el-text-helper) font-sans text-xs", children: helperText }) : null
+  ] });
+}
+function describedById(htmlFor, error, helperText) {
+  return error ? `${htmlFor}-error` : helperText ? `${htmlFor}-helper` : void 0;
+}
+var Textarea = forwardRef(function Textarea2({ label, error, helperText, id, className, disabled, rows = 3, ...rest }, ref) {
+  const autoId = useId();
+  const textareaId = id ?? autoId;
+  const describedBy = describedById(textareaId, error, helperText);
+  const hasError = Boolean(error);
+  return /* @__PURE__ */ jsx(FormField, { label, error, helperText, htmlFor: textareaId, children: /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref,
+      id: textareaId,
+      rows,
+      "aria-invalid": hasError || void 0,
+      "aria-describedby": describedBy,
+      disabled,
+      className: cn(
+        "w-full resize-y rounded-(--radius-input) border bg-(--el-page-bg)",
+        "px-(--spacing-input-x) py-(--spacing-input-y)",
+        "font-sans text-sm text-(--el-text) placeholder:text-(--el-text-muted)",
+        "transition-colors",
+        "focus:outline-none focus:ring-2 focus:ring-(--focus-ring-color) focus:ring-offset-2 focus:ring-offset-background",
+        hasError ? "border-(--el-danger)" : "border-(--el-border-strong)",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...rest
+    }
+  ) });
+});
+
+export { Textarea };
+//# sourceMappingURL=Textarea.js.map
+//# sourceMappingURL=Textarea.js.map

package/dist/components/ui/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/FormField.tsx","../../../src/components/ui/Textarea.tsx"],"names":["describedById","Textarea","jsx"],"mappings":";;;;;;AAcO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACWO,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,UAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAmB;AACjB,EAAA,MAAMA,cAAAA,GAAgB,QAAQ,CAAA,EAAG,OAAO,WAAW,UAAA,GAAa,CAAA,EAAG,OAAO,CAAA,OAAA,CAAA,GAAY,MAAA;AACtF,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,uBAAA,EAAyB,SAAS,CAAA,EAClD,QAAA,EAAA;AAAA,IAAA,KAAA,uBACE,OAAA,EAAA,EAAM,OAAA,EAAkB,SAAA,EAAU,gDAAA,EAChC,iBACH,CAAA,GACE,IAAA;AAAA,IACH,QAAA;AAAA,IACA,KAAA,mBACC,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAIA,cAAAA;AAAA,QACJ,IAAA,EAAK,OAAA;AAAA,QACL,SAAA,EAAW,EAAA;AAAA,UACT,mBAAA;AAAA,UACA,iBAAiB,KAAA,IACf;AAAA,SACJ;AAAA,QACA,OAAO,YAAA,KAAiB,KAAA,GAAQ,MAAA,GAAY,EAAE,OAAO,kBAAA,EAAmB;AAAA,QAEvE,QAAA,EAAA;AAAA;AAAA,KACH,GACE,6BACF,GAAA,CAAC,GAAA,EAAA,EAAE,IAAIA,cAAAA,EAAe,SAAA,EAAU,2CAAA,EAC7B,QAAA,EAAA,UAAA,EACH,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ;AAGO,SAAS,aAAA,CACd,OAAA,EACA,KAAA,EACA,UAAA,EACoB;AACpB,EAAA,OAAO,QAAQ,CAAA,EAAG,OAAO,WAAW,UAAA,GAAa,CAAA,EAAG,OAAO,CAAA,OAAA,CAAA,GAAY,MAAA;AACzE;ACxDO,IAAM,WAAW,UAAA,CAA+C,SAASC,SAAAA,CAC9E,EAAE,OAAO,KAAA,EAAO,UAAA,EAAY,EAAA,EAAI,SAAA,EAAW,UAAU,IAAA,GAAO,CAAA,EAAG,GAAG,IAAA,IAClE,GAAA,EACA;AACA,EAAA,MAAM,SAAS,KAAA,EAAM;AACrB,EAAA,MAAM,aAAa,EAAA,IAAM,MAAA;AACzB,EAAA,MAAM,WAAA,GAAc,aAAA,CAAc,UAAA,EAAY,KAAA,EAAO,UAAU,CAAA;AAC/D,EAAA,MAAM,QAAA,GAAW,QAAQ,KAAK,CAAA;AAC9B,EAAA,uBACEC,IAAC,SAAA,EAAA,EAAU,KAAA,EAAc,OAAc,UAAA,EAAwB,OAAA,EAAS,YACtE,QAAA,kBAAAA,GAAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,EAAA,EAAI,UAAA;AAAA,MACJ,IAAA;AAAA,MACA,gBAAc,QAAA,IAAY,MAAA;AAAA,MAC1B,kBAAA,EAAkB,WAAA;AAAA,MAClB,QAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,mEAAA;AAAA,QACA,+CAAA;AAAA,QACA,uEAAA;AAAA,QACA,mBAAA;AAAA,QACA,kHAAA;AAAA,QACA,WAAW,sBAAA,GAAyB,6BAAA;AAAA,QACpC,iDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ,CAAC","file":"Textarea.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { type ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Internal layout wrapper shared by Input and Textarea — handles the\n * label / control / helper-or-error stack pattern. Not exported from\n * the design system; consumers compose <Input> and <Textarea> directly.\n */\nexport interface FormFieldProps {\n  /** Visible label rendered above the control. */\n  label?: string;\n  /** Error message — overrides helperText when present. Sets aria-invalid. */\n  error?: string;\n  /**\n   * How the error message renders: the default `text` is the quiet danger\n   * line; `box` is the rose-tint inline-error box (hue in the background,\n   * strong text — finding #35), the 2.4.9 grammar inline editors use.\n   */\n  errorVariant?: 'text' | 'box';\n  /** Helper text rendered below the control. */\n  helperText?: string;\n  /** id of the control element — used to associate label + describedby. */\n  htmlFor: string;\n  className?: string;\n  children: ReactNode;\n}\n\nexport function FormField({\n  label,\n  error,\n  errorVariant = 'text',\n  helperText,\n  htmlFor,\n  className,\n  children,\n}: FormFieldProps) {\n  const describedById = error ? `${htmlFor}-error` : helperText ? `${htmlFor}-helper` : undefined;\n  return (\n    <div className={cn('flex flex-col gap-1.5', className)}>\n      {label ? (\n        <label htmlFor={htmlFor} className=\"font-sans text-sm font-medium text-(--el-text)\">\n          {label}\n        </label>\n      ) : null}\n      {children}\n      {error ? (\n        <p\n          id={describedById}\n          role=\"alert\"\n          className={cn(\n            'font-sans text-xs',\n            errorVariant === 'box' &&\n              'bg-(--el-danger-surface) text-(--el-danger-surface-text) rounded-(--radius-control) px-(--spacing-tooltip-x) py-(--spacing-tooltip-y)',\n          )}\n          style={errorVariant === 'box' ? undefined : { color: 'var(--el-danger)' }}\n        >\n          {error}\n        </p>\n      ) : helperText ? (\n        <p id={describedById} className=\"text-(--el-text-helper) font-sans text-xs\">\n          {helperText}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\n/** Returns the aria-describedby id that consumers should pass to the control. */\nexport function describedById(\n  htmlFor: string,\n  error: string | undefined,\n  helperText: string | undefined,\n): string | undefined {\n  return error ? `${htmlFor}-error` : helperText ? `${htmlFor}-helper` : undefined;\n}\n","import { forwardRef, useId, type TextareaHTMLAttributes } from 'react';\nimport { FormField, describedById } from './FormField';\nimport { cn } from '../../utils/cn';\n\n/**\n * Textarea — multi-line text field. Mirrors Input's props (label, error,\n * helperText) but no prefix/suffix slots (uncommon shape for textareas).\n * Auto-resize is intentionally NOT supported in v1 — pass `rows` to size.\n *\n * @example\n * <Textarea label=\"Description\" rows={4} helperText=\"Max 500 chars\" />\n */\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  label?: string;\n  error?: string;\n  helperText?: string;\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  { label, error, helperText, id, className, disabled, rows = 3, ...rest },\n  ref,\n) {\n  const autoId = useId();\n  const textareaId = id ?? autoId;\n  const describedBy = describedById(textareaId, error, helperText);\n  const hasError = Boolean(error);\n  return (\n    <FormField label={label} error={error} helperText={helperText} htmlFor={textareaId}>\n      <textarea\n        ref={ref}\n        id={textareaId}\n        rows={rows}\n        aria-invalid={hasError || undefined}\n        aria-describedby={describedBy}\n        disabled={disabled}\n        className={cn(\n          'w-full resize-y rounded-(--radius-input) border bg-(--el-page-bg)',\n          'px-(--spacing-input-x) py-(--spacing-input-y)',\n          'font-sans text-sm text-(--el-text) placeholder:text-(--el-text-muted)',\n          'transition-colors',\n          'focus:outline-none focus:ring-2 focus:ring-(--focus-ring-color) focus:ring-offset-2 focus:ring-offset-background',\n          hasError ? 'border-(--el-danger)' : 'border-(--el-border-strong)',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...rest}\n      />\n    </FormField>\n  );\n});\n"]}

package/dist/components/ui/Toast.d.ts

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Toast — transient notification with stacking, auto-dismiss, hover-to-pause.
+ *
+ * Wrap the app in `<ToastProvider>` once. Use `useToast()` from any client
+ * component to dispatch:
+ *
+ * @example
+ * const { toast } = useToast();
+ * toast({ variant: 'success', title: 'Saved', description: 'Changes synced.' });
+ */
+declare const toastVariants: (props?: ({
+    variant?: "error" | "info" | "success" | "warning" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;
+/** An optional inline action button (e.g. "Undo" after an archive). */
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+interface ToastContextValue {
+    toast: (opts: {
+        variant?: ToastVariant;
+        title: string;
+        description?: string;
+        action?: ToastAction;
+    }) => void;
+}
+declare function ToastProvider({ children, closeLabel, }: {
+    children: ReactNode;
+    /**
+     * Accessible label for each toast's close (×) button. Defaults to `'Close'`.
+     * i18n is the consuming app's concern (the package carries no `next-intl`
+     * dependency), so a localized app passes the translated string — motir-core
+     * wires it from its `common.close`.
+     */
+    closeLabel?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function useToast(): ToastContextValue;
+
+export { ToastProvider, useToast };

package/dist/components/ui/Toast.js

@@ -0,0 +1,116 @@
+'use client';
+import { createContext, useState, useCallback, useMemo, useContext } from 'react';
+import * as RadixToast from '@radix-ui/react-toast';
+import { XCircle, AlertCircle, CheckCircle2, Info, X } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var toastVariants = cva(
+  cn(
+    "pointer-events-auto flex items-start gap-3",
+    "rounded-(--radius-card) border bg-(--el-page-bg)",
+    "px-(--spacing-md) py-(--spacing-sm)",
+    "shadow-(--shadow-elevated)",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out",
+    "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-80",
+    "data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x)",
+    "data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x)",
+    "data-[swipe=cancel]:transition-transform data-[swipe=end]:transition-transform"
+  ),
+  {
+    variants: {
+      variant: {
+        info: "border-(--el-info)",
+        success: "border-(--el-success)",
+        warning: "border-(--el-warning)",
+        error: "border-(--el-danger)"
+      }
+    },
+    defaultVariants: { variant: "info" }
+  }
+);
+var ToastContext = createContext(null);
+var ICONS = {
+  info: Info,
+  success: CheckCircle2,
+  warning: AlertCircle,
+  error: XCircle
+};
+var ICON_COLOR_VAR = {
+  info: "var(--el-info)",
+  success: "var(--el-success)",
+  warning: "var(--el-warning)",
+  error: "var(--el-danger)"
+};
+function ToastProvider({
+  children,
+  closeLabel = "Close"
+}) {
+  const [toasts, setToasts] = useState([]);
+  const toast = useCallback(
+    ({ variant = "info", title, description, action }) => {
+      const id = crypto.randomUUID();
+      setToasts((prev) => [...prev, { id, variant, title, description, action }]);
+    },
+    []
+  );
+  const remove = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const value = useMemo(() => ({ toast }), [toast]);
+  return /* @__PURE__ */ jsx(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs(RadixToast.Provider, { swipeDirection: "right", duration: 5e3, children: [
+    children,
+    toasts.map((t) => {
+      const Icon = ICONS[t.variant];
+      return /* @__PURE__ */ jsxs(
+        RadixToast.Root,
+        {
+          className: toastVariants({ variant: t.variant }),
+          onOpenChange: (open) => {
+            if (!open) remove(t.id);
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mt-0.5 inline-flex", children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4", style: { color: ICON_COLOR_VAR[t.variant] } }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsx(RadixToast.Title, { className: "font-sans text-sm font-medium text-(--el-text)", children: t.title }),
+              t.description ? /* @__PURE__ */ jsx(RadixToast.Description, { className: "text-(--el-text-muted) mt-0.5 font-sans text-xs", children: t.description }) : null
+            ] }),
+            t.action ? /* @__PURE__ */ jsx(
+              RadixToast.Action,
+              {
+                altText: t.action.label,
+                onClick: t.action.onClick,
+                className: "shrink-0 self-center rounded-(--radius-control) px-(--spacing-control-x) py-(--spacing-control-y) font-sans text-xs font-semibold text-(--el-link) hover:bg-(--el-surface) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color)",
+                children: t.action.label
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              RadixToast.Close,
+              {
+                "aria-label": closeLabel,
+                className: "text-(--el-text-muted) hover:text-(--el-text) rounded-(--radius-control) p-(--spacing-icon-btn) transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color)",
+                children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+              }
+            )
+          ]
+        },
+        t.id
+      );
+    }),
+    /* @__PURE__ */ jsx(RadixToast.Viewport, { className: "fixed bottom-0 right-0 z-50 m-4 flex w-96 max-w-[100vw] flex-col gap-2 outline-none" })
+  ] }) });
+}
+var NO_OP_TOAST = { toast: () => {
+} };
+function useToast() {
+  return useContext(ToastContext) ?? NO_OP_TOAST;
+}
+
+export { ToastProvider, useToast };
+//# sourceMappingURL=Toast.js.map
+//# sourceMappingURL=Toast.js.map

package/dist/components/ui/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/Toast.tsx"],"names":[],"mappings":"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","file":"Toast.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react';\nimport * as RadixToast from '@radix-ui/react-toast';\nimport { AlertCircle, CheckCircle2, Info, X, XCircle } from 'lucide-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Toast — transient notification with stacking, auto-dismiss, hover-to-pause.\n *\n * Wrap the app in `<ToastProvider>` once. Use `useToast()` from any client\n * component to dispatch:\n *\n * @example\n * const { toast } = useToast();\n * toast({ variant: 'success', title: 'Saved', description: 'Changes synced.' });\n */\nconst toastVariants = cva(\n  cn(\n    'pointer-events-auto flex items-start gap-3',\n    'rounded-(--radius-card) border bg-(--el-page-bg)',\n    'px-(--spacing-md) py-(--spacing-sm)',\n    'shadow-(--shadow-elevated)',\n    'data-[state=open]:animate-in data-[state=closed]:animate-out',\n    'data-[state=open]:fade-in-0 data-[state=closed]:fade-out-80',\n    'data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x)',\n    'data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x)',\n    'data-[swipe=cancel]:transition-transform data-[swipe=end]:transition-transform',\n  ),\n  {\n    variants: {\n      variant: {\n        info: 'border-(--el-info)',\n        success: 'border-(--el-success)',\n        warning: 'border-(--el-warning)',\n        error: 'border-(--el-danger)',\n      },\n    },\n    defaultVariants: { variant: 'info' },\n  },\n);\n\ntype ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;\n\n/** An optional inline action button (e.g. \"Undo\" after an archive). */\ninterface ToastAction {\n  label: string;\n  onClick: () => void;\n}\n\ninterface ToastItem {\n  id: string;\n  variant: ToastVariant;\n  title: string;\n  description?: string;\n  action?: ToastAction;\n}\n\ninterface ToastContextValue {\n  toast: (opts: {\n    variant?: ToastVariant;\n    title: string;\n    description?: string;\n    action?: ToastAction;\n  }) => void;\n}\n\nconst ToastContext = createContext<ToastContextValue | null>(null);\n\nconst ICONS: Record<ToastVariant, typeof Info> = {\n  info: Info,\n  success: CheckCircle2,\n  warning: AlertCircle,\n  error: XCircle,\n};\n\nconst ICON_COLOR_VAR: Record<ToastVariant, string> = {\n  info: 'var(--el-info)',\n  success: 'var(--el-success)',\n  warning: 'var(--el-warning)',\n  error: 'var(--el-danger)',\n};\n\nexport function ToastProvider({\n  children,\n  closeLabel = 'Close',\n}: {\n  children: ReactNode;\n  /**\n   * Accessible label for each toast's close (×) button. Defaults to `'Close'`.\n   * i18n is the consuming app's concern (the package carries no `next-intl`\n   * dependency), so a localized app passes the translated string — motir-core\n   * wires it from its `common.close`.\n   */\n  closeLabel?: string;\n}) {\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n\n  const toast = useCallback<ToastContextValue['toast']>(\n    ({ variant = 'info', title, description, action }) => {\n      const id = crypto.randomUUID();\n      setToasts((prev) => [...prev, { id, variant, title, description, action }]);\n    },\n    [],\n  );\n\n  const remove = useCallback((id: string) => {\n    setToasts((prev) => prev.filter((t) => t.id !== id));\n  }, []);\n\n  const value = useMemo(() => ({ toast }), [toast]);\n\n  return (\n    <ToastContext.Provider value={value}>\n      <RadixToast.Provider swipeDirection=\"right\" duration={5000}>\n        {children}\n        {toasts.map((t) => {\n          const Icon = ICONS[t.variant];\n          return (\n            <RadixToast.Root\n              key={t.id}\n              className={toastVariants({ variant: t.variant })}\n              onOpenChange={(open) => {\n                if (!open) remove(t.id);\n              }}\n            >\n              <span aria-hidden className=\"mt-0.5 inline-flex\">\n                <Icon className=\"h-4 w-4\" style={{ color: ICON_COLOR_VAR[t.variant] }} />\n              </span>\n              <div className=\"flex-1\">\n                <RadixToast.Title className=\"font-sans text-sm font-medium text-(--el-text)\">\n                  {t.title}\n                </RadixToast.Title>\n                {t.description ? (\n                  <RadixToast.Description className=\"text-(--el-text-muted) mt-0.5 font-sans text-xs\">\n                    {t.description}\n                  </RadixToast.Description>\n                ) : null}\n              </div>\n              {t.action ? (\n                <RadixToast.Action\n                  altText={t.action.label}\n                  onClick={t.action.onClick}\n                  className=\"shrink-0 self-center rounded-(--radius-control) px-(--spacing-control-x) py-(--spacing-control-y) font-sans text-xs font-semibold text-(--el-link) hover:bg-(--el-surface) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color)\"\n                >\n                  {t.action.label}\n                </RadixToast.Action>\n              ) : null}\n              <RadixToast.Close\n                aria-label={closeLabel}\n                className=\"text-(--el-text-muted) hover:text-(--el-text) rounded-(--radius-control) p-(--spacing-icon-btn) transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color)\"\n              >\n                <X className=\"h-3.5 w-3.5\" />\n              </RadixToast.Close>\n            </RadixToast.Root>\n          );\n        })}\n        <RadixToast.Viewport className=\"fixed bottom-0 right-0 z-50 m-4 flex w-96 max-w-[100vw] flex-col gap-2 outline-none\" />\n      </RadixToast.Provider>\n    </ToastContext.Provider>\n  );\n}\n\n// A no-op fallback for components rendered outside a ToastProvider — a unit test\n// or a surface mounted without the shell. The production root layout always\n// mounts the provider, so this only ever spares a deeply-embedded control (the\n// 2.8.4 ⋯ menu inside a board card / list row) from a hard provider dependency;\n// a stray toast outside the shell silently no-ops rather than crashing render.\nconst NO_OP_TOAST: ToastContextValue = { toast: () => {} };\n\nexport function useToast(): ToastContextValue {\n  return useContext(ToastContext) ?? NO_OP_TOAST;\n}\n"]}

package/dist/components/ui/Tooltip.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+/**
+ * Tooltip — Radix-wrapped popover that appears on hover + focus.
+ *
+ * Requires a single TooltipProvider near the app root for delay coordination.
+ * For simple use, the default delay (700ms) is fine.
+ *
+ * @example
+ * <Tooltip content="Send message">
+ *   <Button variant="ghost"><Send /></Button>
+ * </Tooltip>
+ */
+interface TooltipProps {
+    content: ReactNode;
+    children: ReactNode;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Delay before opening, in ms. Default 700 (Radix default). */
+    delayMs?: number;
+    className?: string;
+}
+declare function Tooltip({ content, children, side, delayMs, className, }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+export { Tooltip, type TooltipProps };

package/dist/components/ui/Tooltip.js

@@ -0,0 +1,43 @@
+'use client';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Tooltip({
+  content,
+  children,
+  side = "top",
+  delayMs = 700,
+  className
+}) {
+  return /* @__PURE__ */ jsx(RadixTooltip.Provider, { delayDuration: delayMs, children: /* @__PURE__ */ jsxs(RadixTooltip.Root, { children: [
+    /* @__PURE__ */ jsx(RadixTooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs(
+      RadixTooltip.Content,
+      {
+        side,
+        sideOffset: 6,
+        className: cn(
+          "z-50 select-none rounded-(--radius-control)",
+          "bg-(--el-tooltip-bg) text-(--el-tooltip-text)",
+          "px-(--spacing-tooltip-x) py-(--spacing-tooltip-y) font-sans text-xs",
+          "shadow-(--shadow-elevated)",
+          "data-[state=delayed-open]:animate-in data-[state=closed]:animate-out fade-in-0 fade-out-0",
+          className
+        ),
+        children: [
+          content,
+          /* @__PURE__ */ jsx(RadixTooltip.Arrow, { className: "fill-(--el-tooltip-bg)" })
+        ]
+      }
+    ) })
+  ] }) });
+}
+
+export { Tooltip };
+//# sourceMappingURL=Tooltip.js.map
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/ui/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/Tooltip.tsx"],"names":[],"mappings":";;;;;AAcO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACUO,SAAS,OAAA,CAAQ;AAAA,EACtB,OAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,OAAA,GAAU,GAAA;AAAA,EACV;AACF,CAAA,EAAiB;AACf,EAAA,2BACgB,YAAA,CAAA,QAAA,EAAb,EAAsB,eAAe,OAAA,EACpC,QAAA,kBAAA,IAAA,CAAc,mBAAb,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAc,YAAA,CAAA,OAAA,EAAb,EAAqB,OAAA,EAAO,IAAA,EAAE,QAAA,EAAS,CAAA;AAAA,oBACxC,GAAA,CAAc,qBAAb,EACC,QAAA,kBAAA,IAAA;AAAA,MAAc,YAAA,CAAA,OAAA;AAAA,MAAb;AAAA,QACC,IAAA;AAAA,QACA,UAAA,EAAY,CAAA;AAAA,QACZ,SAAA,EAAW,EAAA;AAAA,UACT,6CAAA;AAAA,UACA,+CAAA;AAAA,UACA,qEAAA;AAAA,UACA,4BAAA;AAAA,UACA,2FAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,OAAA;AAAA,0BACD,GAAA,CAAc,YAAA,CAAA,KAAA,EAAb,EAAmB,SAAA,EAAU,wBAAA,EAAyB;AAAA;AAAA;AAAA,KACzD,EACF;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ","file":"Tooltip.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { type ReactNode } from 'react';\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { cn } from '../../utils/cn';\n\n/**\n * Tooltip — Radix-wrapped popover that appears on hover + focus.\n *\n * Requires a single TooltipProvider near the app root for delay coordination.\n * For simple use, the default delay (700ms) is fine.\n *\n * @example\n * <Tooltip content=\"Send message\">\n *   <Button variant=\"ghost\"><Send /></Button>\n * </Tooltip>\n */\nexport interface TooltipProps {\n  content: ReactNode;\n  children: ReactNode;\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  /** Delay before opening, in ms. Default 700 (Radix default). */\n  delayMs?: number;\n  className?: string;\n}\n\nexport function Tooltip({\n  content,\n  children,\n  side = 'top',\n  delayMs = 700,\n  className,\n}: TooltipProps) {\n  return (\n    <RadixTooltip.Provider delayDuration={delayMs}>\n      <RadixTooltip.Root>\n        <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>\n        <RadixTooltip.Portal>\n          <RadixTooltip.Content\n            side={side}\n            sideOffset={6}\n            className={cn(\n              'z-50 select-none rounded-(--radius-control)',\n              'bg-(--el-tooltip-bg) text-(--el-tooltip-text)',\n              'px-(--spacing-tooltip-x) py-(--spacing-tooltip-y) font-sans text-xs',\n              'shadow-(--shadow-elevated)',\n              'data-[state=delayed-open]:animate-in data-[state=closed]:animate-out fade-in-0 fade-out-0',\n              className,\n            )}\n          >\n            {content}\n            <RadixTooltip.Arrow className=\"fill-(--el-tooltip-bg)\" />\n          </RadixTooltip.Content>\n        </RadixTooltip.Portal>\n      </RadixTooltip.Root>\n    </RadixTooltip.Provider>\n  );\n}\n"]}

package/dist/contexts/theme-context.d.ts

@@ -0,0 +1,95 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { ThemePattern, ResolvedThemePattern } from '../theme/types.js';
+import { StyleId } from '../theme/styles.js';
+import { PaletteId } from '../theme/palettes.js';
+import { TypeId } from '../theme/typography.js';
+import { AppliedAppearanceDto } from '../appearance.js';
+
+/**
+ * Theme context for Motir's three-axis design system (style · palette · type),
+ * plus the light/dark pattern.
+ *
+ * `pattern` is what the user picked (system | light | dark).
+ * `resolvedPattern` is what's currently applied (light | dark) — these
+ * differ when pattern='system' and the OS preference resolves to one or
+ * the other.
+ *
+ * State is persisted to localStorage and re-applied to <html>'s
+ * data-attributes on every change. The init script in app/layout.tsx
+ * does the same work BEFORE React hydrates to avoid FOUC; this provider
+ * keeps the attributes in sync after hydration.
+ *
+ * Implementation note: this uses lazy `useState` initializers and
+ * `useSyncExternalStore` rather than `useEffect`+`setState`, per the
+ * React 19 / react-hooks/set-state-in-effect rule. Setting state inside
+ * effects causes cascading renders; subscribing to external systems
+ * (localStorage, matchMedia) via the right primitives avoids that.
+ */
+interface ThemeContextValue {
+    pattern: ThemePattern;
+    resolvedPattern: ResolvedThemePattern;
+    /** The active named style (`data-style`) — Axis 2, independent of palette. */
+    styleId: StyleId;
+    /** The active named palette (`data-palette`) — Axis 1 (colour), independent of style. */
+    palette: PaletteId;
+    /**
+     * The EFFECTIVE type pairing (`data-type`) — Axis 3. Either the user's pinned
+     * choice, or (when unpinned) the active style's `defaultTypeId`. Independent
+     * of palette + style.
+     */
+    type: TypeId;
+    setPattern: (pattern: ThemePattern) => void;
+    setStyleId: (styleId: StyleId) => void;
+    setPalette: (palette: PaletteId) => void;
+    /** Pin an explicit type pairing (overrides the style's default until cleared). */
+    setType: (type: TypeId) => void;
+    /**
+     * Cross-device sync status (Subtask 7.3.62). `'idle'` while nothing has
+     * failed; `'error'` when the LAST attempt to persist a change to the account
+     * failed (a 401 / write failure) — the local switch still applied (it's in
+     * localStorage), so this only drives a quiet "couldn't sync" affordance. Always
+     * `'idle'` for an anonymous visitor, who never syncs. Clears back to `'idle'`
+     * on the next successful sync.
+     */
+    syncState: AppearanceSyncState;
+}
+/** The cross-device sync status surfaced to the Appearance pane (7.3.62). */
+type AppearanceSyncState = 'idle' | 'error';
+declare function ThemeProvider({ children, initialPreference, signedIn, }: {
+    children: ReactNode;
+    /**
+     * The signed-in user's APPLIED appearance, resolved server-side (Subtask
+     * 7.3.61). When present it SEEDS this island's state — the page-state
+     * contract: a client island must be GIVEN the server value, not left to
+     * re-read localStorage (which `useState` would do only at mount, ignoring the
+     * authoritative server pref and risking a flash from a stale value synced on
+     * another device). `null` (anonymous) keeps the original localStorage path.
+     */
+    initialPreference?: AppliedAppearanceDto | null;
+    /**
+     * Whether a user is signed in (Subtask 7.3.62). Only then does an axis change
+     * also PERSIST to the account via `/api/appearance-preference` (cross-device
+     * sync). Anonymous visitors keep the localStorage-only path and never fire a
+     * write — so they never hit a 401 or see a "couldn't sync" affordance. This is
+     * a SEPARATE signal from `initialPreference`: a signed-in user who has pinned
+     * nothing yet has `initialPreference === null` but must still sync their first
+     * pick (a row is created on the first PATCH).
+     */
+    signedIn?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+/**
+ * Non-throwing variant of {@link useTheme}. Returns `null` when no
+ * `<ThemeProvider>` is mounted instead of throwing.
+ *
+ * Use this in low-level primitives that must also render outside the authed
+ * shell — e.g. the `MarkdownEditor` (Subtask 2.3.5) reads `resolvedPattern`
+ * to drive the underlying editor's `data-color-mode`, but it's also exercised
+ * on the public `/tokens` specimen and in component tests where wrapping every
+ * render in a provider would be noise. Callers fall back to a sensible default
+ * (`'light'`).
+ */
+declare function useOptionalTheme(): ThemeContextValue | null;
+
+export { type AppearanceSyncState, ThemeProvider, useOptionalTheme, useTheme };