@alfadocs/ui-kit 0.1.8 → 0.1.10

package/dist/_chunks/text-input-BX39e6T6.js

@@ -0,0 +1,272 @@
+import { jsxs as ee, jsx as d } from "react/jsx-runtime";
+import { forwardRef as te, useState as P, useRef as O, useCallback as R, useMemo as se } from "react";
+import { c as j } from "./index-D2ZczOXr.js";
+import { useTranslation as ae } from "react-i18next";
+import { u as ne } from "./form-field-context-94LwgYTQ.js";
+import { I as re, a as w, b as E } from "./input-surface-u4QB0lxe.js";
+import { u as ie } from "./registry-C9nwlNyL.js";
+import { X as oe } from "./x-CCcI3eJp.js";
+const de = {
+  id: "text-input",
+  capabilities: ["edit_inline"],
+  state: {
+    value: {
+      type: "string",
+      descriptionKey: "ui.agent.textInput.state.value",
+      description: "Current value of the text input.",
+      read: (s) => s.getValue()
+    },
+    isEmpty: {
+      type: "boolean",
+      descriptionKey: "ui.agent.textInput.state.isEmpty",
+      description: "Whether the input has no value.",
+      read: (s) => s.getValue() === ""
+    }
+  },
+  actions: {
+    set_value: {
+      safety: "write",
+      argsType: "{ value: string }",
+      descriptionKey: "ui.agent.textInput.actions.setValue",
+      description: "Replace the input value.",
+      invoke: (s, c) => {
+        s.setValue(c.value);
+      }
+    },
+    clear: {
+      safety: "destructive",
+      descriptionKey: "ui.agent.textInput.actions.clear",
+      description: "Empty the input. Loses any typed value.",
+      invoke: (s) => {
+        s.clear();
+      }
+    },
+    focus: {
+      safety: "read",
+      descriptionKey: "ui.agent.textInput.actions.focus",
+      description: "Move keyboard focus to the input.",
+      invoke: (s) => {
+        s.focus();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "text-input",
+      description: "Marks the TextInput wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, ue = j(
+  [
+    "ds:relative ds:flex ds:items-center ds:w-full",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:focus-within:outline-[length:var(--focus-ring-width)] ds:focus-within:outline-solid",
+    "ds:focus-within:outline-ring ds:focus-within:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-within:outline-[CanvasText]",
+    "ds:has-[:disabled]:cursor-not-allowed"
+  ].join(" ")
+), ce = j(
+  [
+    "ds:w-full ds:rounded-[var(--radius-sm)] ds:border ds:bg-background ds:text-foreground",
+    "ds:placeholder:text-muted-foreground",
+    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:focus:outline-none ds:focus-visible:outline-none",
+    "ds:disabled:cursor-not-allowed ds:disabled:opacity-50",
+    "ds:read-only:bg-muted ds:read-only:cursor-default"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: `${w.sm} ${E.sm}`,
+        md: `${w.md} ${E.md}`,
+        lg: `${w.lg} ${E.lg}`
+      },
+      tone: re,
+      hasStart: {
+        true: "ds:ps-10",
+        false: ""
+      },
+      hasEnd: {
+        true: "ds:pe-10",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      { size: "sm", hasStart: !1, class: "ds:ps-3" },
+      { size: "md", hasStart: !1, class: "ds:ps-3" },
+      { size: "lg", hasStart: !1, class: "ds:ps-4" },
+      { size: "sm", hasEnd: !1, class: "ds:pe-3" },
+      { size: "md", hasEnd: !1, class: "ds:pe-3" },
+      { size: "lg", hasEnd: !1, class: "ds:pe-4" }
+    ],
+    defaultVariants: {
+      size: "md",
+      tone: "default",
+      hasStart: !1,
+      hasEnd: !1
+    }
+  }
+), _ = "ds:absolute ds:inset-y-0 ds:flex ds:items-center ds:pointer-events-none ds:text-muted-foreground", le = te(
+  ({
+    size: s = "md",
+    tone: c = "default",
+    startAdornment: l,
+    endAdornment: p,
+    clearable: $ = !1,
+    onClear: f,
+    className: U,
+    id: m,
+    disabled: D,
+    value: T,
+    defaultValue: F,
+    onChange: a,
+    onCompositionStart: v,
+    onCompositionEnd: g,
+    ...I
+  }, o) => {
+    const { t: K } = ae(), i = ne(), B = m ?? i.id, V = i.disabled || D, H = i.invalid ? "error" : c, u = T !== void 0, [M, h] = P(
+      String(F ?? "")
+    ), S = u ? String(T) : M, q = S.length > 0, b = O(!1), [W, k] = P(!1), n = O(null), X = R(
+      (e) => {
+        n.current = e, typeof o == "function" ? o(e) : o && (o.current = e);
+      },
+      [o]
+    ), A = !!l, z = $ && q && !V && !I.readOnly, G = !!p || z, L = (e) => {
+      u || h(e.target.value), !b.current && (a == null || a(e));
+    }, J = (e) => {
+      b.current = !0, k(!0), v == null || v(e);
+    }, Q = (e) => {
+      b.current = !1, k(!1), g == null || g(e);
+      const t = e.currentTarget;
+      u || h(t.value), a == null || a({
+        ...e,
+        target: t,
+        currentTarget: t
+      });
+    }, Y = () => {
+      var t;
+      u || h("");
+      const e = n.current;
+      if (e && a) {
+        const x = Object.getPrototypeOf(e), r = (t = Object.getOwnPropertyDescriptor(x, "value")) == null ? void 0 : t.set;
+        r == null || r.call(e, ""), a({
+          target: e,
+          currentTarget: e,
+          bubbles: !0,
+          type: "change",
+          nativeEvent: new Event("change", { bubbles: !0 }),
+          preventDefault: () => {
+          },
+          stopPropagation: () => {
+          },
+          isDefaultPrevented: () => !1,
+          isPropagationStopped: () => !1,
+          persist: () => {
+          }
+        });
+      }
+      f == null || f(), e == null || e.focus();
+    }, y = R((e) => {
+      var N;
+      const t = n.current;
+      if (!t) return;
+      const x = Object.getPrototypeOf(t), r = (N = Object.getOwnPropertyDescriptor(x, "value")) == null ? void 0 : N.set;
+      r == null || r.call(t, e), t.dispatchEvent(new Event("input", { bubbles: !0 })), t.dispatchEvent(new Event("change", { bubbles: !0 }));
+    }, []), Z = se(
+      () => ({
+        getValue: () => {
+          var e;
+          return ((e = n.current) == null ? void 0 : e.value) ?? "";
+        },
+        setValue: (e) => {
+          y(e);
+        },
+        clear: () => {
+          y("");
+        },
+        focus: () => {
+          var e;
+          (e = n.current) == null || e.focus();
+        }
+      }),
+      [y]
+    );
+    ie(de, Z, m);
+    const C = (e) => {
+      var t;
+      e.target !== n.current && (e.target.closest("button") || (t = n.current) == null || t.focus());
+    };
+    return /* @__PURE__ */ ee(
+      "div",
+      {
+        className: ue(),
+        onClick: C,
+        "data-component": "text-input",
+        "data-component-id": m,
+        "data-composing": W ? "true" : void 0,
+        children: [
+          l ? /* @__PURE__ */ d(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: `${_} ds:start-0 ds:ps-3 ds:[&_svg]:size-4`,
+              children: l
+            }
+          ) : null,
+          /* @__PURE__ */ d(
+            "input",
+            {
+              ref: X,
+              id: B,
+              type: "text",
+              value: S,
+              disabled: V,
+              "aria-describedby": i.describedBy || void 0,
+              "aria-invalid": i.invalid || void 0,
+              "aria-required": i.required || void 0,
+              onChange: L,
+              onCompositionStart: J,
+              onCompositionEnd: Q,
+              className: ce({
+                size: s,
+                tone: H,
+                hasStart: A,
+                hasEnd: G,
+                className: U
+              }),
+              ...I
+            }
+          ),
+          z ? /* @__PURE__ */ d(
+            "button",
+            {
+              type: "button",
+              "aria-label": K("ui.inputs.text.clear", "Clear input"),
+              onClick: Y,
+              className: "ds:absolute ds:inset-y-0 ds:end-0 ds:pe-3 ds:flex ds:items-center ds:pointer-events-auto ds:text-muted-foreground ds:hover:text-foreground ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+              children: /* @__PURE__ */ d(oe, { "aria-hidden": "true", className: "ds:size-4" })
+            }
+          ) : p ? /* @__PURE__ */ d(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: `${_} ds:end-0 ds:pe-3 ds:[&_svg]:size-4`,
+              children: p
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+le.displayName = "TextInput";
+export {
+  le as T
+};
+//# sourceMappingURL=text-input-BX39e6T6.js.map

package/dist/_chunks/text-input-BX39e6T6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input-BX39e6T6.js","sources":["../../src/components/text-input/text-input.agent.ts","../../src/components/text-input/text-input.tsx"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* Agent adapter — TextInput.                                             */\n/*                                                                        */\n/* See `src/docs/26-agent-readiness.mdx` for the contract.                */\n/* -------------------------------------------------------------------- */\n\nimport type { AgentAdapter } from '../../agent/types';\nimport type { TextInputHandle } from './text-input';\n\nexport const textInputAgent: AgentAdapter<TextInputHandle> = {\n  id: 'text-input',\n  capabilities: ['edit_inline'],\n  state: {\n    value: {\n      type: 'string',\n      descriptionKey: 'ui.agent.textInput.state.value',\n      description: 'Current value of the text input.',\n      read: (handle) => handle.getValue(),\n    },\n    isEmpty: {\n      type: 'boolean',\n      descriptionKey: 'ui.agent.textInput.state.isEmpty',\n      description: 'Whether the input has no value.',\n      read: (handle) => handle.getValue() === '',\n    },\n  },\n  actions: {\n    set_value: {\n      safety: 'write',\n      argsType: '{ value: string }',\n      descriptionKey: 'ui.agent.textInput.actions.setValue',\n      description: 'Replace the input value.',\n      invoke: (handle, args: { value: string }) => {\n        handle.setValue(args.value);\n      },\n    },\n    clear: {\n      safety: 'destructive',\n      descriptionKey: 'ui.agent.textInput.actions.clear',\n      description: 'Empty the input. Loses any typed value.',\n      invoke: (handle) => {\n        handle.clear();\n      },\n    },\n    focus: {\n      safety: 'read',\n      descriptionKey: 'ui.agent.textInput.actions.focus',\n      description: 'Move keyboard focus to the input.',\n      invoke: (handle) => {\n        handle.focus();\n      },\n    },\n  },\n  domHooks: {\n    root: {\n      attr: 'data-component',\n      value: 'text-input',\n      description: 'Marks the TextInput wrapper.',\n    },\n    instanceId: {\n      attr: 'data-component-id',\n      sourceProp: 'id',\n      description: 'Sourced from the id prop.',\n    },\n  },\n};\n","import {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type CompositionEvent,\n  type InputHTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { X } from 'lucide-react';\nimport { useFormField } from '../form-field/form-field-context';\nimport {\n  INPUT_SURFACE_HEIGHT,\n  INPUT_SURFACE_TEXT,\n  INPUT_SURFACE_TONE,\n} from '../_shared/input-surface';\nimport { useAgentRegistration } from '../../agent';\nimport { textInputAgent } from './text-input.agent';\n\n/**\n * Agent-readiness curated handle. The internal value setter drives the DOM\n * input via the native value setter so React picks up the change.\n */\nexport interface TextInputHandle {\n  getValue: () => string;\n  setValue: (value: string) => void;\n  clear: () => void;\n  focus: () => void;\n}\n\nconst wrapperVariants = cva(\n  [\n    'ds:relative ds:flex ds:items-center ds:w-full',\n    'ds:rounded-[var(--radius-sm)]',\n    'ds:focus-within:outline-[length:var(--focus-ring-width)] ds:focus-within:outline-solid',\n    'ds:focus-within:outline-ring ds:focus-within:outline-offset-[length:var(--focus-ring-offset)]',\n    'ds:forced-colors:focus-within:outline-[CanvasText]',\n    'ds:has-[:disabled]:cursor-not-allowed',\n  ].join(' '),\n);\n\nconst inputVariants = cva(\n  [\n    'ds:w-full ds:rounded-[var(--radius-sm)] ds:border ds:bg-background ds:text-foreground',\n    'ds:placeholder:text-muted-foreground',\n    'ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none',\n    'ds:focus:outline-none ds:focus-visible:outline-none',\n    'ds:disabled:cursor-not-allowed ds:disabled:opacity-50',\n    'ds:read-only:bg-muted ds:read-only:cursor-default',\n  ].join(' '),\n  {\n    variants: {\n      size: {\n        sm: `${INPUT_SURFACE_HEIGHT.sm} ${INPUT_SURFACE_TEXT.sm}`,\n        md: `${INPUT_SURFACE_HEIGHT.md} ${INPUT_SURFACE_TEXT.md}`,\n        lg: `${INPUT_SURFACE_HEIGHT.lg} ${INPUT_SURFACE_TEXT.lg}`,\n      },\n      tone: INPUT_SURFACE_TONE,\n      hasStart: {\n        true: 'ds:ps-10',\n        false: '',\n      },\n      hasEnd: {\n        true: 'ds:pe-10',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      { size: 'sm', hasStart: false, class: 'ds:ps-3' },\n      { size: 'md', hasStart: false, class: 'ds:ps-3' },\n      { size: 'lg', hasStart: false, class: 'ds:ps-4' },\n      { size: 'sm', hasEnd: false, class: 'ds:pe-3' },\n      { size: 'md', hasEnd: false, class: 'ds:pe-3' },\n      { size: 'lg', hasEnd: false, class: 'ds:pe-4' },\n    ],\n    defaultVariants: {\n      size: 'md',\n      tone: 'default',\n      hasStart: false,\n      hasEnd: false,\n    },\n  },\n);\n\nconst adornmentBase =\n  'ds:absolute ds:inset-y-0 ds:flex ds:items-center ds:pointer-events-none ds:text-muted-foreground';\n\nexport interface TextInputProps\n  extends Omit<\n      InputHTMLAttributes<HTMLInputElement>,\n      'size' | 'onChange' | 'onCompositionStart' | 'onCompositionEnd'\n    >,\n    Pick<VariantProps<typeof inputVariants>, 'size' | 'tone'> {\n  size?: 'sm' | 'md' | 'lg';\n  tone?: 'default' | 'error';\n  startAdornment?: ReactNode;\n  endAdornment?: ReactNode;\n  clearable?: boolean;\n  onClear?: () => void;\n  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n  onCompositionStart?: (event: CompositionEvent<HTMLInputElement>) => void;\n  onCompositionEnd?: (event: CompositionEvent<HTMLInputElement>) => void;\n}\n\nexport const TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n  (\n    {\n      size = 'md',\n      tone = 'default',\n      startAdornment,\n      endAdornment,\n      clearable = false,\n      onClear,\n      className,\n      id,\n      disabled,\n      value,\n      defaultValue,\n      onChange,\n      onCompositionStart,\n      onCompositionEnd,\n      ...props\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n    const ctx = useFormField();\n    const inputId = id ?? ctx.id;\n    const effectiveDisabled = ctx.disabled || disabled;\n    const effectiveTone = ctx.invalid ? 'error' : tone;\n\n    const isControlled = value !== undefined;\n    const [internalValue, setInternalValue] = useState<string>(\n      String(defaultValue ?? ''),\n    );\n    const currentValue = isControlled ? String(value) : internalValue;\n    const hasValue = currentValue.length > 0;\n\n    const composingRef = useRef(false);\n    const [composingState, setComposingState] = useState(false);\n\n    const innerRef = useRef<HTMLInputElement | null>(null);\n    const setRefs = useCallback(\n      (node: HTMLInputElement | null) => {\n        innerRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    const hasStart = Boolean(startAdornment);\n    const showClear = clearable && hasValue && !effectiveDisabled && !props.readOnly;\n    const hasEnd = Boolean(endAdornment) || showClear;\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      if (!isControlled) {\n        setInternalValue(event.target.value);\n      }\n      if (composingRef.current) return;\n      onChange?.(event);\n    };\n\n    const handleCompositionStart = (event: CompositionEvent<HTMLInputElement>) => {\n      composingRef.current = true;\n      setComposingState(true);\n      onCompositionStart?.(event);\n    };\n\n    const handleCompositionEnd = (event: CompositionEvent<HTMLInputElement>) => {\n      composingRef.current = false;\n      setComposingState(false);\n      onCompositionEnd?.(event);\n      const target = event.currentTarget;\n      if (!isControlled) {\n        setInternalValue(target.value);\n      }\n      // Synthesise a ChangeEvent from the CompositionEvent so consumers receive\n      // a single post-IME change. nativeEvent is still the CompositionEvent, so\n      // consumers inspecting `nativeEvent.inputType` will not find the usual\n      // \"insertCompositionText\" value — documented as a known limitation.\n      onChange?.({\n        ...event,\n        target,\n        currentTarget: target,\n      } as unknown as ChangeEvent<HTMLInputElement>);\n    };\n\n    const handleClear = () => {\n      if (!isControlled) {\n        setInternalValue('');\n      }\n      const node = innerRef.current;\n      if (node && onChange) {\n        // Drive the DOM value to '' via the prototype setter so downstream\n        // reads of event.target.value see the cleared value, then forward a\n        // synthesised ChangeEvent to consumers (form libraries drive state\n        // from onChange, not onClear).\n        const prototype = Object.getPrototypeOf(node) as HTMLInputElement;\n        const setter = Object.getOwnPropertyDescriptor(prototype, 'value')?.set;\n        setter?.call(node, '');\n        onChange({\n          target: node,\n          currentTarget: node,\n          bubbles: true,\n          type: 'change',\n          nativeEvent: new Event('change', { bubbles: true }),\n          preventDefault: () => {},\n          stopPropagation: () => {},\n          isDefaultPrevented: () => false,\n          isPropagationStopped: () => false,\n          persist: () => {},\n        } as unknown as ChangeEvent<HTMLInputElement>);\n      }\n      onClear?.();\n      node?.focus();\n    };\n\n    const writeValueToInput = useCallback((next: string) => {\n      const node = innerRef.current;\n      if (!node) return;\n      const prototype = Object.getPrototypeOf(node) as HTMLInputElement;\n      const setter = Object.getOwnPropertyDescriptor(prototype, 'value')?.set;\n      setter?.call(node, next);\n      node.dispatchEvent(new Event('input', { bubbles: true }));\n      node.dispatchEvent(new Event('change', { bubbles: true }));\n    }, []);\n\n    const agentHandle = useMemo<TextInputHandle>(\n      () => ({\n        getValue: () => innerRef.current?.value ?? '',\n        setValue: (next) => {\n          writeValueToInput(next);\n        },\n        clear: () => {\n          writeValueToInput('');\n        },\n        focus: () => {\n          innerRef.current?.focus();\n        },\n      }),\n      [writeValueToInput],\n    );\n    useAgentRegistration(textInputAgent, agentHandle, id);\n\n    const handleWrapperClick = (event: MouseEvent<HTMLDivElement>) => {\n      if (event.target === innerRef.current) return;\n      if ((event.target as HTMLElement).closest('button')) return;\n      innerRef.current?.focus();\n    };\n\n    return (\n      <div\n        className={wrapperVariants()}\n        onClick={handleWrapperClick}\n        data-component=\"text-input\"\n        data-component-id={id}\n        data-composing={composingState ? 'true' : undefined}\n      >\n        {startAdornment ? (\n          <span\n            aria-hidden=\"true\"\n            className={`${adornmentBase} ds:start-0 ds:ps-3 ds:[&_svg]:size-4`}\n          >\n            {startAdornment}\n          </span>\n        ) : null}\n        <input\n          ref={setRefs}\n          id={inputId}\n          type=\"text\"\n          value={currentValue}\n          disabled={effectiveDisabled}\n          aria-describedby={ctx.describedBy || undefined}\n          aria-invalid={ctx.invalid || undefined}\n          aria-required={ctx.required || undefined}\n          onChange={handleChange}\n          onCompositionStart={handleCompositionStart}\n          onCompositionEnd={handleCompositionEnd}\n          className={inputVariants({\n            size,\n            tone: effectiveTone,\n            hasStart,\n            hasEnd,\n            className,\n          })}\n          {...props}\n        />\n        {showClear ? (\n          <button\n            type=\"button\"\n            aria-label={t('ui.inputs.text.clear', 'Clear input')}\n            onClick={handleClear}\n            className=\"ds:absolute ds:inset-y-0 ds:end-0 ds:pe-3 ds:flex ds:items-center ds:pointer-events-auto ds:text-muted-foreground ds:hover:text-foreground ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none\"\n          >\n            <X aria-hidden=\"true\" className=\"ds:size-4\" />\n          </button>\n        ) : endAdornment ? (\n          <span\n            aria-hidden=\"true\"\n            className={`${adornmentBase} ds:end-0 ds:pe-3 ds:[&_svg]:size-4`}\n          >\n            {endAdornment}\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nTextInput.displayName = 'TextInput';\n"],"names":["textInputAgent","handle","args","wrapperVariants","cva","inputVariants","INPUT_SURFACE_HEIGHT","INPUT_SURFACE_TEXT","INPUT_SURFACE_TONE","adornmentBase","TextInput","forwardRef","size","tone","startAdornment","endAdornment","clearable","onClear","className","id","disabled","value","defaultValue","onChange","onCompositionStart","onCompositionEnd","props","ref","t","useTranslation","ctx","useFormField","inputId","effectiveDisabled","effectiveTone","isControlled","internalValue","setInternalValue","useState","currentValue","hasValue","composingRef","useRef","composingState","setComposingState","innerRef","setRefs","useCallback","node","hasStart","showClear","hasEnd","handleChange","event","handleCompositionStart","handleCompositionEnd","target","handleClear","prototype","setter","_a","writeValueToInput","next","agentHandle","useMemo","useAgentRegistration","handleWrapperClick","jsxs","jsx","X"],"mappings":"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"}

package/dist/_chunks/theme-root-DDb0TJjd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-root-DDb0TJjd.js","sources":["../../src/components/theme-root/theme-root.tsx"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* ThemeRoot — declarative wrapper that activates a DS theme.            */\n/*                                                                       */\n/* DS themes are composed from two orthogonal axes (see 04-theming.mdx): */\n/*   base:     `theme-light` | `theme-dark`                              */\n/*   modifier: `theme-accessible` (AAA contrast, larger target size,     */\n/*              0ms animations, 18px base font)                          */\n/*                                                                       */\n/* `<ThemeRoot>` owns the class combination so consuming apps don't      */\n/* hand-assemble it (and get it wrong under `accessible + dark`, where   */\n/* the selector is `.theme-dark.theme-accessible`, not a separate class).*/\n/*                                                                       */\n/* Rendered as a `<div>` by default. Pass `asChild` to merge the theme   */\n/* classes onto a caller-supplied element via Radix `<Slot>` — preserves */\n/* the child's props and correctly forwards refs. Used when the theme    */\n/* root is <html> or <body> in a server-rendered layout.                 */\n/* -------------------------------------------------------------------- */\n\nimport { forwardRef, type HTMLAttributes } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nexport type ThemeBase = 'light' | 'dark';\n\nexport interface ThemeRootProps extends HTMLAttributes<HTMLDivElement> {\n  /** Which colour-scheme base to activate. Default: `light`. */\n  theme?: ThemeBase;\n  /** Layer the AAA `theme-accessible` modifier on top of the base. */\n  accessible?: boolean;\n  /**\n   * When true, merges the theme classes onto the single child element\n   * instead of rendering a wrapping `<div>`. Useful when the theme root\n   * is `<html>` or `<body>` in an app shell. Refs forward to the child.\n   */\n  asChild?: boolean;\n}\n\nfunction composeClassName(\n  theme: ThemeBase,\n  accessible: boolean,\n  extra?: string,\n): string {\n  const parts = [theme === 'dark' ? 'theme-dark' : 'theme-light'];\n  if (accessible) parts.push('theme-accessible');\n  if (extra) parts.push(extra);\n  return parts.join(' ');\n}\n\nexport const ThemeRoot = forwardRef<HTMLDivElement, ThemeRootProps>(\n  (\n    { theme = 'light', accessible = false, asChild = false, className, children, ...rest },\n    ref,\n  ) => {\n    const merged = composeClassName(theme, accessible, className);\n    const Comp = asChild ? Slot : 'div';\n    return (\n      <Comp ref={ref} className={merged} data-component=\"theme-root\" {...rest}>\n        {children}\n      </Comp>\n    );\n  },\n);\nThemeRoot.displayName = 'ThemeRoot';\n"],"names":["composeClassName","theme","accessible","extra","parts","ThemeRoot","forwardRef","asChild","className","children","rest","ref","merged","jsx","Slot"],"mappings":";;;AAoCA,SAASA,EACPC,GACAC,GACAC,GACQ;AACR,QAAMC,IAAQ,CAACH,MAAU,SAAS,eAAe,aAAa;AAC9D,SAAIC,KAAYE,EAAM,KAAK,kBAAkB,GACzCD,KAAOC,EAAM,KAAKD,CAAK,GACpBC,EAAM,KAAK,GAAG;AACvB;AAEO,MAAMC,IAAYC;AAAA,EACvB,CACE,EAAE,OAAAL,IAAQ,SAAS,YAAAC,IAAa,IAAO,SAAAK,IAAU,IAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAChFC,MACG;AACH,UAAMC,IAASZ,EAAiBC,GAAOC,GAAYM,CAAS;AAE5D,WACE,gBAAAK,EAFWN,IAAUO,IAAO,SAEtB,KAAAH,GAAU,WAAWC,GAAQ,kBAAe,cAAc,GAAGF,GAChE,UAAAD,EAAA,CACH;AAAA,EAEJ;AACF;AACAJ,EAAU,cAAc;"}