@techzyapp/ui-library 1.0.0

package/dist/ChoiceCardGroup-CvFzZlgI.js

@@ -0,0 +1,181 @@
+import { jsx as t, jsxs as S } from "react/jsx-runtime";
+import { useContext as P, createContext as R, forwardRef as j, useState as w, useId as H } from "react";
+import { clsx as k } from "clsx";
+import { u as J } from "./formContext-B7ln1Miy.js";
+import { T as K } from "./Typography-Cta6Rg4L.js";
+import { a as Q } from "./names-D8ABK2Wk.js";
+import { I as U } from "./Icon-CophpkHo.js";
+const F = R(null);
+function W() {
+  return P(F);
+}
+const X = "_group_3p33b_2", Y = "_groupLabel_3p33b_8", Z = "_required_3p33b_13", ee = "_grid_3p33b_17", re = "_card_3p33b_24", se = "_disabled_3p33b_42", te = "_selected_3p33b_42", oe = "_input_3p33b_51", le = "_error_3p33b_55", ae = "_left_3p33b_67", ce = "_text_3p33b_71", ie = "_sm_3p33b_77", ne = "_md_3p33b_85", de = "_lg_3p33b_93", _e = "_indicator_3p33b_117", pe = "_radioDot_3p33b_162", me = "_iconBox_3p33b_185", be = "_label_3p33b_212", ue = "_description_3p33b_219", r = {
+  group: X,
+  groupLabel: Y,
+  required: Z,
+  grid: ee,
+  card: re,
+  disabled: se,
+  selected: te,
+  input: oe,
+  error: le,
+  left: ae,
+  text: ce,
+  sm: ie,
+  md: ne,
+  lg: de,
+  indicator: _e,
+  radioDot: pe,
+  iconBox: me,
+  label: be,
+  description: ue
+}, fe = new Set(Q), he = j(function({
+  value: l,
+  label: n,
+  description: d,
+  icon: o,
+  align: a,
+  color: h,
+  size: x,
+  error: I,
+  checked: _,
+  onChange: p,
+  name: z,
+  disabled: A,
+  className: B,
+  style: D,
+  ...E
+}, q) {
+  const e = W(), v = h ?? (e == null ? void 0 : e.color) ?? "primary", N = x ?? (e == null ? void 0 : e.size) ?? "md", C = I ?? (e == null ? void 0 : e.error) ?? !1, m = A ?? (e == null ? void 0 : e.disabled) ?? !1, i = z ?? (e == null ? void 0 : e.name), y = a ?? (e == null ? void 0 : e.align) ?? (o == null ? "left" : "center"), [b, g] = w(!1), u = e ? e.isSelected(l) : _ !== void 0 ? _ : b, G = (c) => {
+    if (!m) {
+      if (e) {
+        e.toggle(l);
+        return;
+      }
+      _ === void 0 && g(c.target.checked), p == null || p(c.target.checked);
+    }
+  }, L = typeof o == "string" && fe.has(o) ? /* @__PURE__ */ t(U, { name: o, size: N }) : o;
+  return /* @__PURE__ */ S(
+    "label",
+    {
+      className: k(
+        r.card,
+        r[N],
+        y === "left" && r.left,
+        u && r.selected,
+        C && r.error,
+        m && r.disabled,
+        B
+      ),
+      style: {
+        "--tz-btn-rgb": `var(--tz-color-${v}-rgb)`,
+        "--tz-btn-on": `var(--tz-color-${v}-contrast, #fff)`,
+        ...D
+      },
+      children: [
+        /* @__PURE__ */ t(
+          "input",
+          {
+            ref: q,
+            type: e != null && e.exclusive ? "radio" : "checkbox",
+            className: r.input,
+            name: i,
+            value: l,
+            checked: u,
+            onChange: G,
+            disabled: m,
+            "aria-invalid": C || void 0,
+            ...E
+          }
+        ),
+        /* @__PURE__ */ t(
+          "span",
+          {
+            className: k(r.indicator, (e == null ? void 0 : e.exclusive) && r.radioDot),
+            "aria-hidden": "true"
+          }
+        ),
+        o != null && /* @__PURE__ */ t("span", { className: r.iconBox, "aria-hidden": "true", children: L }),
+        (n != null || d != null) && /* @__PURE__ */ S("span", { className: r.text, children: [
+          n != null && /* @__PURE__ */ t("span", { className: r.label, children: n }),
+          d != null && /* @__PURE__ */ t("span", { className: r.description, children: d })
+        ] })
+      ]
+    }
+  );
+}), Ae = j(
+  function({
+    exclusive: l = !1,
+    value: n,
+    defaultValue: d,
+    onChange: o,
+    name: a,
+    options: h,
+    label: x,
+    minCardWidth: I = 160,
+    align: _,
+    size: p = "md",
+    color: z = "primary",
+    error: A,
+    required: B = !1,
+    disabled: D = !1,
+    children: E,
+    className: q,
+    style: e,
+    ...v
+  }, N) {
+    const C = H(), m = a ?? `choice-${C}`, i = J(), y = !!(i && a), b = i && a ? i.field(a) : void 0, g = n !== void 0 ? n : y ? i.values[a] : void 0, u = g !== void 0, [G, L] = w(d), c = u ? g : G, T = A ?? (b == null ? void 0 : b.error) ?? !1, O = {
+      name: m,
+      exclusive: l,
+      isSelected: (s) => l ? c === s : Array.isArray(c) && c.includes(s),
+      toggle: (s) => {
+        let f;
+        if (l)
+          f = s;
+        else {
+          const $ = Array.isArray(c) ? c : [];
+          f = $.includes(s) ? $.filter((V) => V !== s) : [...$, s];
+        }
+        u || L(f), y && i.setValue(a, f), o == null || o(f);
+      },
+      size: p,
+      align: _,
+      color: z,
+      disabled: D,
+      error: T
+    };
+    return /* @__PURE__ */ S(
+      "div",
+      {
+        ref: N,
+        role: l ? "radiogroup" : "group",
+        "aria-invalid": T || void 0,
+        className: k(r.group, q),
+        style: e,
+        ...v,
+        children: [
+          x != null && /* @__PURE__ */ S("span", { className: r.groupLabel, children: [
+            /* @__PURE__ */ t(K, { as: "span", variant: "bodySmall", color: "muted", children: x }),
+            B && /* @__PURE__ */ t("span", { className: r.required, "aria-hidden": "true", children: "*" })
+          ] }),
+          /* @__PURE__ */ t("div", { className: r.grid, style: { "--cc-min": `${I}px` }, children: /* @__PURE__ */ t(F.Provider, { value: O, children: h ? h.map((s) => /* @__PURE__ */ t(
+            he,
+            {
+              value: s.value,
+              label: s.label,
+              description: s.description,
+              icon: s.icon,
+              disabled: s.disabled
+            },
+            s.value
+          )) : E }) })
+        ]
+      }
+    );
+  }
+);
+export {
+  he as C,
+  Ae as a
+};
+//# sourceMappingURL=ChoiceCardGroup-CvFzZlgI.js.map

package/dist/ChoiceCardGroup-CvFzZlgI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceCardGroup-CvFzZlgI.js","sources":["../src/components/ChoiceCard/choiceCardContext.ts","../src/components/ChoiceCard/ChoiceCard.tsx","../src/components/ChoiceCard/ChoiceCardGroup.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { ThemeColor } from '../../theme'\nimport type { ChoiceCardAlign, ChoiceCardSize } from './ChoiceCard'\n\n/** Shared state a `<ChoiceCardGroup>` hands down to its `<ChoiceCard>` children via context. */\nexport interface ChoiceCardGroupContextValue {\n  /** Shared input `name` — in `exclusive` mode the cards are native radios and must share one. */\n  name?: string\n  /** Single-selection (radio semantics) vs multiple (checkbox semantics). */\n  exclusive: boolean\n  /** Whether a card's value is currently selected. */\n  isSelected: (value: string) => boolean\n  /** Select / toggle a value — called by a child `<ChoiceCard>` on change. */\n  toggle: (value: string) => void\n  size?: ChoiceCardSize\n  align?: ChoiceCardAlign\n  color?: ThemeColor\n  disabled?: boolean\n  error?: boolean\n}\n\nexport const ChoiceCardGroupContext = createContext<ChoiceCardGroupContextValue | null>(null)\n\n/** Read the surrounding `<ChoiceCardGroup>` so a `<ChoiceCard>` can wire itself in (or `null` when standalone). */\nexport function useChoiceCardGroupContext(): ChoiceCardGroupContextValue | null {\n  return useContext(ChoiceCardGroupContext)\n}\n","import {\n  forwardRef,\n  useState,\n  type ChangeEvent,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport { useChoiceCardGroupContext } from './choiceCardContext'\nimport styles from './ChoiceCard.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type ChoiceCardSize = 'sm' | 'md' | 'lg'\nexport type ChoiceCardAlign = 'left' | 'center'\n\nexport interface ChoiceCardProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'color' | 'type' | 'onChange' | 'value'\n> {\n  /** This card's value — selected when the surrounding `ChoiceCardGroup`'s value holds it. */\n  value: string\n  /** Card title. */\n  label?: ReactNode\n  /** Muted description line under the title. */\n  description?: ReactNode\n  /** Leading icon in a tinted circle — a known `IconName` or any node. Optional. */\n  icon?: IconName | ReactNode\n  /**\n   * Content alignment. `center` centers the icon + text stack; `left` anchors the same stack to the\n   * left edge (icon above left-aligned text). Defaults to the group's `align`, else `center` with an\n   * icon and `left` without one.\n   */\n  align?: ChoiceCardAlign\n  /** Theme palette token for the selected tint. Defaults to `primary` (inherits the group's `color`). */\n  color?: ThemeColor\n  /** Preset size — padding, icon circle and fonts. Inherits the group's `size` when omitted. */\n  size?: ChoiceCardSize\n  /** Marks the card invalid — reddens the border + indicator. Inherits the group's `error`. */\n  error?: boolean\n  /** Controlled selected state for standalone use (inside a `ChoiceCardGroup` the group drives this). */\n  checked?: boolean\n  /** Fires with the next selected state (standalone use). */\n  onChange?: (checked: boolean) => void\n}\n\n/**\n * A selectable card — a rich checkbox/radio with an icon, title and description. The native input is\n * visually hidden but fully accessible (Space toggles; in an `exclusive` group the cards are real\n * radios, so Arrow keys rove between them); the card shows the state with a accent border + soft halo,\n * a top-right tick indicator, and an icon circle that fills with the color while selected. Designed to\n * live inside a `<ChoiceCardGroup>` (which supplies the selection, `exclusive` mode and\n * `size`/`color`/`disabled`/`error` via context), but also works standalone as a single fancy checkbox\n * (`checked` + `onChange`). Styling uses `--tz-*` tokens via the shared `--tz-btn-rgb` pattern.\n */\nexport const ChoiceCard = forwardRef<HTMLInputElement, ChoiceCardProps>(function ChoiceCard(\n  {\n    value,\n    label,\n    description,\n    icon,\n    align,\n    color,\n    size,\n    error,\n    checked,\n    onChange,\n    name,\n    disabled,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const group = useChoiceCardGroupContext()\n\n  const resolvedColor = color ?? group?.color ?? 'primary'\n  const resolvedSize = size ?? group?.size ?? 'md'\n  const resolvedError = error ?? group?.error ?? false\n  const resolvedDisabled = disabled ?? group?.disabled ?? false\n  const resolvedName = name ?? group?.name\n  // explicit prop → group's align → smart default (an icon centers the card, no icon reads as a row)\n  const resolvedAlign = align ?? group?.align ?? (icon == null ? 'left' : 'center')\n\n  // In a group the selection comes from context; standalone it's controlled (`checked`) or local.\n  const [internal, setInternal] = useState(false)\n  const isChecked = group ? group.isSelected(value) : checked !== undefined ? checked : internal\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    if (resolvedDisabled) return\n    if (group) {\n      group.toggle(value)\n      return\n    }\n    if (checked === undefined) setInternal(event.target.checked)\n    onChange?.(event.target.checked)\n  }\n\n  const iconNode =\n    typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} size={resolvedSize} />\n    ) : (\n      icon\n    )\n\n  return (\n    <label\n      className={clsx(\n        styles.card,\n        styles[resolvedSize],\n        resolvedAlign === 'left' && styles.left,\n        isChecked && styles.selected,\n        resolvedError && styles.error,\n        resolvedDisabled && styles.disabled,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${resolvedColor}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${resolvedColor}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      <input\n        ref={ref}\n        type={group?.exclusive ? 'radio' : 'checkbox'}\n        className={styles.input}\n        name={resolvedName}\n        value={value}\n        checked={isChecked}\n        onChange={handleChange}\n        disabled={resolvedDisabled}\n        aria-invalid={resolvedError || undefined}\n        {...props}\n      />\n      {/* top-right selection indicator — radio-style ring + dot in exclusive groups (mirrors Radio),\n          else a circle that fills with the theme color + a CSS tick (checkbox semantics) */}\n      <span\n        className={clsx(styles.indicator, group?.exclusive && styles.radioDot)}\n        aria-hidden=\"true\"\n      />\n      {icon != null && (\n        <span className={styles.iconBox} aria-hidden=\"true\">\n          {iconNode}\n        </span>\n      )}\n      {(label != null || description != null) && (\n        <span className={styles.text}>\n          {label != null && <span className={styles.label}>{label}</span>}\n          {description != null && <span className={styles.description}>{description}</span>}\n        </span>\n      )}\n    </label>\n  )\n})\n","import {\n  forwardRef,\n  useId,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport type { ThemeColor } from '../../theme'\nimport type { IconName } from '../../icons/names'\nimport { Typography } from '../Typography'\nimport { ChoiceCard, type ChoiceCardAlign, type ChoiceCardSize } from './ChoiceCard'\nimport { ChoiceCardGroupContext, type ChoiceCardGroupContextValue } from './choiceCardContext'\nimport styles from './ChoiceCard.module.css'\n\n/** A single card for the data-driven `options` prop. */\nexport interface ChoiceCardOption {\n  value: string\n  /** Card title. */\n  label?: ReactNode\n  /** Muted description line under the title. */\n  description?: ReactNode\n  /** Leading icon in a tinted circle — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  disabled?: boolean\n}\n\nexport interface ChoiceCardGroupProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'color' | 'onChange' | 'defaultValue'\n> {\n  /**\n   * Single-selection (radio semantics — the cards are native radios, `value` is a `string | null`,\n   * clicking the selected card keeps it selected) vs multiple (checkbox semantics — `value` is a\n   * `string[]`). Defaults to `false` (multiple).\n   */\n  exclusive?: boolean\n  /** Controlled value — a `string | null` when `exclusive`, else a `string[]`. */\n  value?: string | string[] | null\n  /** Initial value for uncontrolled use (same shape as `value`). */\n  defaultValue?: string | string[] | null\n  /** Fires with the next value (matches the `exclusive` shape). */\n  onChange?: (value: string | string[] | null) => void\n  /**\n   * Input `name` — shared by the radios in `exclusive` mode, and the `<Form>` binding key (form value:\n   * `string` when `exclusive`, else `string[]`). Auto-generated when omitted.\n   */\n  name?: string\n  /** Data-driven cards — an alternative to passing `<ChoiceCard>` children. */\n  options?: ChoiceCardOption[]\n  /** Group label rendered above the cards. */\n  label?: ReactNode\n  /** Minimum card width in px — the grid fits as many per row as this allows. Defaults to `160`. */\n  minCardWidth?: number\n  /**\n   * Content alignment for every card. `center` centers the icon + text stack; `left` anchors the same\n   * stack to the left edge (icon above left-aligned text). Omit for the smart default — cards with an\n   * icon center, icon-less cards left-align. A card's own `align` wins.\n   */\n  align?: ChoiceCardAlign\n  /** Preset size for every card. Defaults to `md`. */\n  size?: ChoiceCardSize\n  /** Theme palette token for the selected tint. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Marks the group invalid — reddens the card borders (no message text, like `RadioGroup`). */\n  error?: boolean\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Disables every card in the group. */\n  disabled?: boolean\n  /** `<ChoiceCard>` children (used when `options` is not given). */\n  children?: ReactNode\n}\n\n/**\n * A group of selectable cards — rich checkboxes/radios with icons, titles and descriptions (role\n * pickers, plan choices, permission sets). **`exclusive`** picks single-selection (radio semantics —\n * `value` is a `string | null` and Arrow keys rove between the cards) vs multiple (checkbox semantics —\n * `value` is a `string[]`); defaults to `false` (multiple). Controlled (`value` + `onChange`) or\n * uncontrolled (`defaultValue`); supply the cards via the data-driven `options` prop (`{ value, label,\n * description?, icon?, disabled? }[]`) or as `<ChoiceCard>` children. The cards lay out on a\n * **responsive grid** (`minCardWidth`, default `160` — as many per row as fit, wrapping below). Binds\n * to a surrounding `<Form>` by **`name`** — the form value is a `string` when `exclusive` (validate\n * with e.g. `z.string().min(1)`), else a `string[]` (`z.array(z.string()).min(1)`); the form's `error`\n * reddens the card borders (no message text, like `RadioGroup`). `role=\"radiogroup\"` / `\"group\"`;\n * styling uses `--tz-*` tokens via the shared `--tz-btn-rgb` pattern.\n */\nexport const ChoiceCardGroup = forwardRef<HTMLDivElement, ChoiceCardGroupProps>(\n  function ChoiceCardGroup(\n    {\n      exclusive = false,\n      value,\n      defaultValue,\n      onChange,\n      name,\n      options,\n      label,\n      minCardWidth = 160,\n      align,\n      size = 'md',\n      color = 'primary',\n      error,\n      required = false,\n      disabled = false,\n      children,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) {\n    // exclusive cards are native radios — they need a shared input name even without a form\n    const reactId = useId()\n    const resolvedName = name ?? `choice-${reactId}`\n\n    // Auto-bind to a surrounding <Form> by `name` — the form value mirrors the `exclusive` shape.\n    const form = useFormContext()\n    const isFormBound = Boolean(form && name)\n    const bound = form && name ? form.field(name) : undefined\n\n    const externalValue: string | string[] | null | undefined =\n      value !== undefined\n        ? value\n        : isFormBound\n          ? (form!.values[name!] as string | string[] | null | undefined)\n          : undefined\n    const isControlled = externalValue !== undefined\n    const [internal, setInternal] = useState<string | string[] | null | undefined>(defaultValue)\n    const current = isControlled ? externalValue : internal\n\n    const resolvedError = error ?? bound?.error ?? false\n\n    const isSelected = (v: string) =>\n      exclusive ? current === v : Array.isArray(current) && current.includes(v)\n\n    const toggle = (v: string) => {\n      let next: string | string[] | null\n      if (exclusive) {\n        next = v // radio semantics — selecting again keeps it selected\n      } else {\n        const arr = Array.isArray(current) ? current : []\n        next = arr.includes(v) ? arr.filter((x) => x !== v) : [...arr, v]\n      }\n      if (!isControlled) setInternal(next)\n      if (isFormBound) form!.setValue(name!, next)\n      onChange?.(next)\n    }\n\n    const ctx: ChoiceCardGroupContextValue = {\n      name: resolvedName,\n      exclusive,\n      isSelected,\n      toggle,\n      size,\n      align,\n      color,\n      disabled,\n      error: resolvedError,\n    }\n\n    return (\n      <div\n        ref={ref}\n        role={exclusive ? 'radiogroup' : 'group'}\n        aria-invalid={resolvedError || undefined}\n        className={clsx(styles.group, className)}\n        style={style as CSSProperties}\n        {...props}\n      >\n        {label != null && (\n          <span className={styles.groupLabel}>\n            <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\">\n              {label}\n            </Typography>\n            {required && (\n              <span className={styles.required} aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </span>\n        )}\n\n        <div className={styles.grid} style={{ '--cc-min': `${minCardWidth}px` } as CSSProperties}>\n          <ChoiceCardGroupContext.Provider value={ctx}>\n            {options\n              ? options.map((option) => (\n                  <ChoiceCard\n                    key={option.value}\n                    value={option.value}\n                    label={option.label}\n                    description={option.description}\n                    icon={option.icon}\n                    disabled={option.disabled}\n                  />\n                ))\n              : children}\n          </ChoiceCardGroupContext.Provider>\n        </div>\n      </div>\n    )\n  },\n)\n"],"names":["ChoiceCardGroupContext","createContext","useChoiceCardGroupContext","useContext","ICON_NAME_SET","ICON_NAMES","ChoiceCard","forwardRef","value","label","description","icon","align","color","size","error","checked","onChange","name","disabled","className","style","props","ref","group","resolvedColor","resolvedSize","resolvedError","resolvedDisabled","resolvedName","resolvedAlign","internal","setInternal","useState","isChecked","handleChange","event","iconNode","jsx","Icon","jsxs","clsx","styles","ChoiceCardGroup","exclusive","defaultValue","options","minCardWidth","required","children","reactId","useId","form","useFormContext","isFormBound","bound","externalValue","isControlled","current","ctx","v","next","arr","x","Typography","option"],"mappings":"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"}

package/dist/CodeBlock-DOk5wekc.cjs

@@ -0,0 +1,2 @@
+"use strict";var T=Object.create;var f=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var E=(o,e,c,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of k(e))!S.call(o,l)&&l!==c&&f(o,l,{get:()=>e[l],enumerable:!(s=g(e,l))||s.enumerable});return o};var z=(o,e,c)=>(c=o!=null?T(I(o)):{},E(e||!o||!o.__esModule?f(c,"default",{value:o,enumerable:!0}):c,o));const n=require("react/jsx-runtime"),i=require("react"),C=require("clsx"),F=require("./IconButton-D6TenQZ_.cjs"),R=require("./Icon-CXTl_QAP.cjs"),M=require("./Tooltip-Ao7az09p.cjs"),P=require("./ConfigProvider-ByOFXVyP.cjs"),D="_root_3qnqi_4",H="_header_3qnqi_15",L="_title_3qnqi_24",O="_code_3qnqi_34",A="_plain_3qnqi_50",G="_padForCopy_3qnqi_56",J="_wrap_3qnqi_61",K="_lineNumbers_3qnqi_67",Q="_copy_3qnqi_82",U="_floatingCopy_3qnqi_88",t={root:D,header:H,title:L,code:O,plain:A,padForCopy:G,wrap:J,lineNumbers:K,copy:Q,floatingCopy:U},V=1600,W=i.forwardRef(function({code:e,language:c="tsx",title:s,copyable:l=!0,showLineNumbers:x=!1,maxHeight:q,wrap:j=!1,className:w,style:N,...b},v){const a=P.useT(),[h,m]=i.useState(null),[d,y]=i.useState(!1),p=i.useRef(void 0);i.useEffect(()=>{let r=!1;return import("shiki").then(({codeToHtml:_})=>_(e,{lang:c,theme:"dark-plus"})).then(_=>{r||m(_)}).catch(()=>{r||m(null)}),()=>{r=!0}},[e,c]),i.useEffect(()=>()=>window.clearTimeout(p.current),[]);const B=()=>{var r;(r=navigator.clipboard)==null||r.writeText(e).then(()=>{y(!0),window.clearTimeout(p.current),p.current=window.setTimeout(()=>y(!1),V)}).catch(()=>{})},u=l&&n.jsx(M.Tooltip,{content:a(d?"codeBlock.copied":"codeBlock.copy"),placement:"left",style:{"--tz-btn-rgb":"255, 255, 255","--tz-btn-on":"#1e1e1e"},children:n.jsx(F.IconButton,{variant:"text",size:"sm",className:t.copy,style:{"--tz-btn-rgb":"255, 255, 255"},"aria-label":a(d?"codeBlock.copied":"codeBlock.copy"),onClick:B,children:n.jsx(R.Icon,{name:d?"CopySuccess":"Copy"})})});return n.jsxs("div",{ref:v,className:C.clsx(t.root,w),style:N,...b,children:[s!=null&&n.jsxs("div",{className:t.header,children:[n.jsx("span",{className:t.title,children:s}),u]}),n.jsx("div",{className:C.clsx(t.code,j&&t.wrap,x&&t.lineNumbers,s==null&&t.padForCopy),style:q!=null?{maxHeight:q}:void 0,children:h!=null?n.jsx("div",{className:t.highlighted,dangerouslySetInnerHTML:{__html:h}}):n.jsx("pre",{className:t.plain,children:n.jsx("code",{children:e})})}),s==null&&u&&n.jsx("div",{className:t.floatingCopy,children:u})]})});exports.CodeBlock=W;
+//# sourceMappingURL=CodeBlock-DOk5wekc.cjs.map

package/dist/CodeBlock-DOk5wekc.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock-DOk5wekc.cjs","sources":["../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useT } from '../../theme'\nimport { IconButton } from '../IconButton'\nimport { Icon } from '../Icon'\nimport { Tooltip } from '../Tooltip'\nimport styles from './CodeBlock.module.css'\n\n// how long the copy button shows the \"copied\" tick before reverting\nconst COPIED_RESET_MS = 1600\n\nexport interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {\n  /** The source code to render. */\n  code: string\n  /** Shiki language id (`'tsx'`, `'json'`, `'bash'`, `'css'`, …). Defaults to `'tsx'`. */\n  language?: string\n  /** Header line (e.g. a filename) — adds a header bar above the code with the copy button in it. */\n  title?: ReactNode\n  /** Show a copy-to-clipboard button. Defaults to `true`. */\n  copyable?: boolean\n  /** Show line numbers. Defaults to `false`. */\n  showLineNumbers?: boolean\n  /** Cap the block height in px — taller code scrolls inside. */\n  maxHeight?: number\n  /** Soft-wrap long lines instead of scrolling horizontally. Defaults to `false`. */\n  wrap?: boolean\n}\n\n/**\n * A syntax-highlighted code block with **VS Code colors** — powered by **Shiki** (an optional peer,\n * `npm i shiki`), the actual VS Code highlighting engine, using its **`dark-plus`** theme. The block\n * is **always dark** (in both app modes) — code reads best on a dark surface, and the deep background\n * anchors it regardless of the surrounding light/dark theme. Highlighting is **async and lazy**\n * (`import('shiki')` on first render); until it lands — or if `shiki` isn't installed / the language\n * is unknown — the block shows the plain code (on the same dark surface), so nothing breaks. `title`\n * adds a header bar (e.g. a filename); `copyable` (default `true`) shows a copy button that flips to a\n * tick; `showLineNumbers`, `maxHeight` (scrolls inside) and `wrap` shape the body. The whole block\n * keeps VS Code's own dark colors (a deliberate literal-color exception, like the Modal scrim); only\n * the outer border/radius uses `--tz-*` tokens.\n */\nexport const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(function CodeBlock(\n  {\n    code,\n    language = 'tsx',\n    title,\n    copyable = true,\n    showLineNumbers = false,\n    maxHeight,\n    wrap = false,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const t = useT()\n  const [html, setHtml] = useState<string | null>(null)\n  const [copied, setCopied] = useState(false)\n  const copyTimer = useRef<number | undefined>(undefined)\n\n  // highlight asynchronously — shiki is an optional peer, loaded lazily on first use; a missing\n  // package or an unknown language just leaves the plain (unhighlighted) fallback in place\n  useEffect(() => {\n    let cancelled = false\n    import('shiki')\n      .then(({ codeToHtml }) =>\n        codeToHtml(code, {\n          lang: language,\n          // always VS Code's dark theme — the block stays dark in both app modes\n          theme: 'dark-plus',\n        }),\n      )\n      .then((out) => {\n        if (!cancelled) setHtml(out)\n      })\n      .catch(() => {\n        if (!cancelled) setHtml(null)\n      })\n    return () => {\n      cancelled = true\n    }\n  }, [code, language])\n\n  useEffect(() => () => window.clearTimeout(copyTimer.current), [])\n\n  const handleCopy = () => {\n    navigator.clipboard\n      ?.writeText(code)\n      .then(() => {\n        setCopied(true)\n        window.clearTimeout(copyTimer.current)\n        copyTimer.current = window.setTimeout(() => setCopied(false), COPIED_RESET_MS)\n      })\n      .catch(() => {})\n  }\n\n  const copyButton = copyable && (\n    // the tooltip is hover/focus-driven; clicking flips `copied`, so its content updates to \"Copied!\"\n    // while it's still open (the pointer is on the button). `left` keeps it inside the block's\n    // `overflow: hidden` bounds.\n    <Tooltip\n      content={copied ? t('codeBlock.copied') : t('codeBlock.copy')}\n      placement=\"left\"\n      // always a white pill with dark text over the (always-dark) block — set via `style` so it beats\n      // Tooltip's own color-derived --tz-btn-rgb (which is spread before the consumer `style`)\n      style={{ '--tz-btn-rgb': '255, 255, 255', '--tz-btn-on': '#1e1e1e' } as CSSProperties}\n    >\n      <IconButton\n        variant=\"text\"\n        size=\"sm\"\n        className={styles.copy}\n        // force the button light over the dark surface — passed via `style` so it beats IconButton's\n        // own inline `--tz-btn-rgb` (which is spread before the consumer `style`, so this wins)\n        style={{ '--tz-btn-rgb': '255, 255, 255' } as CSSProperties}\n        aria-label={copied ? t('codeBlock.copied') : t('codeBlock.copy')}\n        onClick={handleCopy}\n      >\n        <Icon name={copied ? 'CopySuccess' : 'Copy'} />\n      </IconButton>\n    </Tooltip>\n  )\n\n  return (\n    <div ref={ref} className={clsx(styles.root, className)} style={style} {...props}>\n      {title != null && (\n        <div className={styles.header}>\n          <span className={styles.title}>{title}</span>\n          {copyButton}\n        </div>\n      )}\n      <div\n        className={clsx(\n          styles.code,\n          wrap && styles.wrap,\n          showLineNumbers && styles.lineNumbers,\n          title == null && styles.padForCopy,\n        )}\n        style={maxHeight != null ? ({ maxHeight } as CSSProperties) : undefined}\n      >\n        {html != null ? (\n          // shiki output is trusted markup — it escapes the source code itself\n          <div className={styles.highlighted} dangerouslySetInnerHTML={{ __html: html }} />\n        ) : (\n          <pre className={styles.plain}>\n            <code>{code}</code>\n          </pre>\n        )}\n      </div>\n      {/* with no header the copy button floats over the code's top-right corner */}\n      {title == null && copyButton && <div className={styles.floatingCopy}>{copyButton}</div>}\n    </div>\n  )\n})\n"],"names":["COPIED_RESET_MS","CodeBlock","forwardRef","code","language","title","copyable","showLineNumbers","maxHeight","wrap","className","style","props","ref","t","useT","html","setHtml","useState","copied","setCopied","copyTimer","useRef","useEffect","cancelled","codeToHtml","out","handleCopy","_a","copyButton","jsx","Tooltip","IconButton","styles","Icon","jsxs","clsx"],"mappings":"k/BAiBMA,EAAkB,KA+BXC,EAAYC,EAAAA,WAA2C,SAClE,CACE,KAAAC,EACA,SAAAC,EAAW,MACX,MAAAC,EACA,SAAAC,EAAW,GACX,gBAAAC,EAAkB,GAClB,UAAAC,EACA,KAAAC,EAAO,GACP,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAIC,EAAAA,KAAA,EACJ,CAACC,EAAMC,CAAO,EAAIC,EAAAA,SAAwB,IAAI,EAC9C,CAACC,EAAQC,CAAS,EAAIF,EAAAA,SAAS,EAAK,EACpCG,EAAYC,EAAAA,OAA2B,MAAS,EAItDC,EAAAA,UAAU,IAAM,CACd,IAAIC,EAAY,GAChB,cAAO,OAAO,EACX,KAAK,CAAC,CAAE,WAAAC,CAAA,IACPA,EAAWtB,EAAM,CACf,KAAMC,EAEN,MAAO,WAAA,CACR,CAAA,EAEF,KAAMsB,GAAQ,CACRF,GAAWP,EAAQS,CAAG,CAC7B,CAAC,EACA,MAAM,IAAM,CACNF,GAAWP,EAAQ,IAAI,CAC9B,CAAC,EACI,IAAM,CACXO,EAAY,EACd,CACF,EAAG,CAACrB,EAAMC,CAAQ,CAAC,EAEnBmB,EAAAA,UAAU,IAAM,IAAM,OAAO,aAAaF,EAAU,OAAO,EAAG,EAAE,EAEhE,MAAMM,EAAa,IAAM,QACvBC,EAAA,UAAU,YAAV,MAAAA,EACI,UAAUzB,GACX,KAAK,IAAM,CACViB,EAAU,EAAI,EACd,OAAO,aAAaC,EAAU,OAAO,EACrCA,EAAU,QAAU,OAAO,WAAW,IAAMD,EAAU,EAAK,EAAGpB,CAAe,CAC/E,GACC,MAAM,IAAM,CAAC,EAClB,EAEM6B,EAAavB,GAIjBwB,EAAAA,IAACC,EAAAA,QAAA,CACC,QAAkBjB,EAATK,EAAW,mBAAwB,gBAAN,EACtC,UAAU,OAGV,MAAO,CAAE,eAAgB,gBAAiB,cAAe,SAAA,EAEzD,SAAAW,EAAAA,IAACE,EAAAA,WAAA,CACC,QAAQ,OACR,KAAK,KACL,UAAWC,EAAO,KAGlB,MAAO,CAAE,eAAgB,eAAA,EACzB,aAAqBnB,EAATK,EAAW,mBAAwB,gBAAN,EACzC,QAASQ,EAET,SAAAG,EAAAA,IAACI,OAAA,CAAK,KAAMf,EAAS,cAAgB,MAAA,CAAQ,CAAA,CAAA,CAC/C,CAAA,EAIJ,OACEgB,EAAAA,KAAC,MAAA,CAAI,IAAAtB,EAAU,UAAWuB,EAAAA,KAAKH,EAAO,KAAMvB,CAAS,EAAG,MAAAC,EAAe,GAAGC,EACvE,SAAA,CAAAP,GAAS,MACR8B,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAO,OACrB,SAAA,CAAAH,EAAAA,IAAC,OAAA,CAAK,UAAWG,EAAO,MAAQ,SAAA5B,EAAM,EACrCwB,CAAA,EACH,EAEFC,EAAAA,IAAC,MAAA,CACC,UAAWM,EAAAA,KACTH,EAAO,KACPxB,GAAQwB,EAAO,KACf1B,GAAmB0B,EAAO,YAC1B5B,GAAS,MAAQ4B,EAAO,UAAA,EAE1B,MAAOzB,GAAa,KAAQ,CAAE,UAAAA,GAAgC,OAE7D,SAAAQ,GAAQ,KAEPc,MAAC,OAAI,UAAWG,EAAO,YAAa,wBAAyB,CAAE,OAAQjB,EAAK,CAAG,EAE/Ec,EAAAA,IAAC,OAAI,UAAWG,EAAO,MACrB,SAAAH,EAAAA,IAAC,OAAA,CAAM,WAAK,CAAA,CACd,CAAA,CAAA,EAIHzB,GAAS,MAAQwB,GAAcC,EAAAA,IAAC,OAAI,UAAWG,EAAO,aAAe,SAAAJ,CAAA,CAAW,CAAA,EACnF,CAEJ,CAAC"}

package/dist/CodeBlock-n3KExtTO.js

@@ -0,0 +1,104 @@
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { forwardRef as B, useState as h, useRef as x, useEffect as y } from "react";
+import { clsx as q } from "clsx";
+import { I } from "./IconButton-CBusrDa9.js";
+import { I as S } from "./Icon-CophpkHo.js";
+import { T as z } from "./Tooltip-Cb_FKxT9.js";
+import { a as E } from "./ConfigProvider-2c94kUOk.js";
+const F = "_root_3qnqi_4", R = "_header_3qnqi_15", j = "_title_3qnqi_24", M = "_code_3qnqi_34", D = "_plain_3qnqi_50", H = "_padForCopy_3qnqi_56", L = "_wrap_3qnqi_61", O = "_lineNumbers_3qnqi_67", P = "_copy_3qnqi_82", A = "_floatingCopy_3qnqi_88", o = {
+  root: F,
+  header: R,
+  title: j,
+  code: M,
+  plain: D,
+  padForCopy: H,
+  wrap: L,
+  lineNumbers: O,
+  copy: P,
+  floatingCopy: A
+}, G = 1600, Z = B(function({
+  code: n,
+  language: p = "tsx",
+  title: c,
+  copyable: C = !0,
+  showLineNumbers: w = !1,
+  maxHeight: d,
+  wrap: N = !1,
+  className: b,
+  style: T,
+  ...v
+}, g) {
+  const l = E(), [m, _] = h(null), [r, u] = h(!1), s = x(void 0);
+  y(() => {
+    let t = !1;
+    return import("shiki").then(
+      ({ codeToHtml: a }) => a(n, {
+        lang: p,
+        // always VS Code's dark theme — the block stays dark in both app modes
+        theme: "dark-plus"
+      })
+    ).then((a) => {
+      t || _(a);
+    }).catch(() => {
+      t || _(null);
+    }), () => {
+      t = !0;
+    };
+  }, [n, p]), y(() => () => window.clearTimeout(s.current), []);
+  const k = () => {
+    var t;
+    (t = navigator.clipboard) == null || t.writeText(n).then(() => {
+      u(!0), window.clearTimeout(s.current), s.current = window.setTimeout(() => u(!1), G);
+    }).catch(() => {
+    });
+  }, i = C && // the tooltip is hover/focus-driven; clicking flips `copied`, so its content updates to "Copied!"
+  // while it's still open (the pointer is on the button). `left` keeps it inside the block's
+  // `overflow: hidden` bounds.
+  /* @__PURE__ */ e(
+    z,
+    {
+      content: l(r ? "codeBlock.copied" : "codeBlock.copy"),
+      placement: "left",
+      style: { "--tz-btn-rgb": "255, 255, 255", "--tz-btn-on": "#1e1e1e" },
+      children: /* @__PURE__ */ e(
+        I,
+        {
+          variant: "text",
+          size: "sm",
+          className: o.copy,
+          style: { "--tz-btn-rgb": "255, 255, 255" },
+          "aria-label": l(r ? "codeBlock.copied" : "codeBlock.copy"),
+          onClick: k,
+          children: /* @__PURE__ */ e(S, { name: r ? "CopySuccess" : "Copy" })
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ f("div", { ref: g, className: q(o.root, b), style: T, ...v, children: [
+    c != null && /* @__PURE__ */ f("div", { className: o.header, children: [
+      /* @__PURE__ */ e("span", { className: o.title, children: c }),
+      i
+    ] }),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: q(
+          o.code,
+          N && o.wrap,
+          w && o.lineNumbers,
+          c == null && o.padForCopy
+        ),
+        style: d != null ? { maxHeight: d } : void 0,
+        children: m != null ? (
+          // shiki output is trusted markup — it escapes the source code itself
+          /* @__PURE__ */ e("div", { className: o.highlighted, dangerouslySetInnerHTML: { __html: m } })
+        ) : /* @__PURE__ */ e("pre", { className: o.plain, children: /* @__PURE__ */ e("code", { children: n }) })
+      }
+    ),
+    c == null && i && /* @__PURE__ */ e("div", { className: o.floatingCopy, children: i })
+  ] });
+});
+export {
+  Z as C
+};
+//# sourceMappingURL=CodeBlock-n3KExtTO.js.map

package/dist/CodeBlock-n3KExtTO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock-n3KExtTO.js","sources":["../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useT } from '../../theme'\nimport { IconButton } from '../IconButton'\nimport { Icon } from '../Icon'\nimport { Tooltip } from '../Tooltip'\nimport styles from './CodeBlock.module.css'\n\n// how long the copy button shows the \"copied\" tick before reverting\nconst COPIED_RESET_MS = 1600\n\nexport interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {\n  /** The source code to render. */\n  code: string\n  /** Shiki language id (`'tsx'`, `'json'`, `'bash'`, `'css'`, …). Defaults to `'tsx'`. */\n  language?: string\n  /** Header line (e.g. a filename) — adds a header bar above the code with the copy button in it. */\n  title?: ReactNode\n  /** Show a copy-to-clipboard button. Defaults to `true`. */\n  copyable?: boolean\n  /** Show line numbers. Defaults to `false`. */\n  showLineNumbers?: boolean\n  /** Cap the block height in px — taller code scrolls inside. */\n  maxHeight?: number\n  /** Soft-wrap long lines instead of scrolling horizontally. Defaults to `false`. */\n  wrap?: boolean\n}\n\n/**\n * A syntax-highlighted code block with **VS Code colors** — powered by **Shiki** (an optional peer,\n * `npm i shiki`), the actual VS Code highlighting engine, using its **`dark-plus`** theme. The block\n * is **always dark** (in both app modes) — code reads best on a dark surface, and the deep background\n * anchors it regardless of the surrounding light/dark theme. Highlighting is **async and lazy**\n * (`import('shiki')` on first render); until it lands — or if `shiki` isn't installed / the language\n * is unknown — the block shows the plain code (on the same dark surface), so nothing breaks. `title`\n * adds a header bar (e.g. a filename); `copyable` (default `true`) shows a copy button that flips to a\n * tick; `showLineNumbers`, `maxHeight` (scrolls inside) and `wrap` shape the body. The whole block\n * keeps VS Code's own dark colors (a deliberate literal-color exception, like the Modal scrim); only\n * the outer border/radius uses `--tz-*` tokens.\n */\nexport const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(function CodeBlock(\n  {\n    code,\n    language = 'tsx',\n    title,\n    copyable = true,\n    showLineNumbers = false,\n    maxHeight,\n    wrap = false,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const t = useT()\n  const [html, setHtml] = useState<string | null>(null)\n  const [copied, setCopied] = useState(false)\n  const copyTimer = useRef<number | undefined>(undefined)\n\n  // highlight asynchronously — shiki is an optional peer, loaded lazily on first use; a missing\n  // package or an unknown language just leaves the plain (unhighlighted) fallback in place\n  useEffect(() => {\n    let cancelled = false\n    import('shiki')\n      .then(({ codeToHtml }) =>\n        codeToHtml(code, {\n          lang: language,\n          // always VS Code's dark theme — the block stays dark in both app modes\n          theme: 'dark-plus',\n        }),\n      )\n      .then((out) => {\n        if (!cancelled) setHtml(out)\n      })\n      .catch(() => {\n        if (!cancelled) setHtml(null)\n      })\n    return () => {\n      cancelled = true\n    }\n  }, [code, language])\n\n  useEffect(() => () => window.clearTimeout(copyTimer.current), [])\n\n  const handleCopy = () => {\n    navigator.clipboard\n      ?.writeText(code)\n      .then(() => {\n        setCopied(true)\n        window.clearTimeout(copyTimer.current)\n        copyTimer.current = window.setTimeout(() => setCopied(false), COPIED_RESET_MS)\n      })\n      .catch(() => {})\n  }\n\n  const copyButton = copyable && (\n    // the tooltip is hover/focus-driven; clicking flips `copied`, so its content updates to \"Copied!\"\n    // while it's still open (the pointer is on the button). `left` keeps it inside the block's\n    // `overflow: hidden` bounds.\n    <Tooltip\n      content={copied ? t('codeBlock.copied') : t('codeBlock.copy')}\n      placement=\"left\"\n      // always a white pill with dark text over the (always-dark) block — set via `style` so it beats\n      // Tooltip's own color-derived --tz-btn-rgb (which is spread before the consumer `style`)\n      style={{ '--tz-btn-rgb': '255, 255, 255', '--tz-btn-on': '#1e1e1e' } as CSSProperties}\n    >\n      <IconButton\n        variant=\"text\"\n        size=\"sm\"\n        className={styles.copy}\n        // force the button light over the dark surface — passed via `style` so it beats IconButton's\n        // own inline `--tz-btn-rgb` (which is spread before the consumer `style`, so this wins)\n        style={{ '--tz-btn-rgb': '255, 255, 255' } as CSSProperties}\n        aria-label={copied ? t('codeBlock.copied') : t('codeBlock.copy')}\n        onClick={handleCopy}\n      >\n        <Icon name={copied ? 'CopySuccess' : 'Copy'} />\n      </IconButton>\n    </Tooltip>\n  )\n\n  return (\n    <div ref={ref} className={clsx(styles.root, className)} style={style} {...props}>\n      {title != null && (\n        <div className={styles.header}>\n          <span className={styles.title}>{title}</span>\n          {copyButton}\n        </div>\n      )}\n      <div\n        className={clsx(\n          styles.code,\n          wrap && styles.wrap,\n          showLineNumbers && styles.lineNumbers,\n          title == null && styles.padForCopy,\n        )}\n        style={maxHeight != null ? ({ maxHeight } as CSSProperties) : undefined}\n      >\n        {html != null ? (\n          // shiki output is trusted markup — it escapes the source code itself\n          <div className={styles.highlighted} dangerouslySetInnerHTML={{ __html: html }} />\n        ) : (\n          <pre className={styles.plain}>\n            <code>{code}</code>\n          </pre>\n        )}\n      </div>\n      {/* with no header the copy button floats over the code's top-right corner */}\n      {title == null && copyButton && <div className={styles.floatingCopy}>{copyButton}</div>}\n    </div>\n  )\n})\n"],"names":["COPIED_RESET_MS","CodeBlock","forwardRef","code","language","title","copyable","showLineNumbers","maxHeight","wrap","className","style","props","ref","t","useT","html","setHtml","useState","copied","setCopied","copyTimer","useRef","useEffect","cancelled","codeToHtml","out","handleCopy","_a","copyButton","jsx","Tooltip","IconButton","styles","Icon","jsxs","clsx"],"mappings":"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"}

package/dist/Col-D2TfZKiM.js

@@ -0,0 +1,13 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { F as i } from "./Flex-Bj3mMF5A.js";
+const s = t(function(o, r) {
+  return /* @__PURE__ */ n(i, { ref: r, direction: "row", align: "center", ...o });
+}), a = t(function(o, r) {
+  return /* @__PURE__ */ n(i, { ref: r, direction: "column", ...o });
+});
+export {
+  a as C,
+  s as R
+};
+//# sourceMappingURL=Col-D2TfZKiM.js.map

package/dist/Col-D2TfZKiM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Col-D2TfZKiM.js","sources":["../src/components/Flex/Row.tsx","../src/components/Flex/Col.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Flex, type FlexProps } from './Flex'\n\nexport interface RowProps extends Omit<FlexProps, 'direction'> {}\n\n/**\n * A horizontal flex row. `Flex` with `direction=\"row\"` and `align=\"center\"` by default — override\n * `align`/`gap`/`justify`/`wrap`/`padding` via props.\n */\nexport const Row = forwardRef<HTMLDivElement, RowProps>(function Row(props, ref) {\n  return <Flex ref={ref} direction=\"row\" align=\"center\" {...props} />\n})\n","import { forwardRef } from 'react'\nimport { Flex, type FlexProps } from './Flex'\n\nexport interface ColProps extends Omit<FlexProps, 'direction'> {}\n\n/**\n * A vertical flex column. `Flex` with `direction=\"column\"` (children stretch to full width by\n * default) — set `gap`/`align`/`justify`/`padding` via props.\n */\nexport const Col = forwardRef<HTMLDivElement, ColProps>(function Col(props, ref) {\n  return <Flex ref={ref} direction=\"column\" {...props} />\n})\n"],"names":["Row","forwardRef","props","ref","jsx","Flex","Col"],"mappings":";;;AASO,MAAMA,IAAMC,EAAqC,SAAaC,GAAOC,GAAK;AAC/E,SAAO,gBAAAC,EAACC,KAAK,KAAAF,GAAU,WAAU,OAAM,OAAM,UAAU,GAAGD,GAAO;AACnE,CAAC,GCFYI,IAAML,EAAqC,SAAaC,GAAOC,GAAK;AAC/E,2BAAQE,GAAA,EAAK,KAAAF,GAAU,WAAU,UAAU,GAAGD,GAAO;AACvD,CAAC;"}

package/dist/Col-R5mAy8T9.cjs

@@ -0,0 +1,2 @@
+"use strict";const o=require("react/jsx-runtime"),n=require("react"),t=require("./Flex-CqL3Ghda.cjs"),i=n.forwardRef(function(e,r){return o.jsx(t.Flex,{ref:r,direction:"row",align:"center",...e})}),s=n.forwardRef(function(e,r){return o.jsx(t.Flex,{ref:r,direction:"column",...e})});exports.Col=s;exports.Row=i;
+//# sourceMappingURL=Col-R5mAy8T9.cjs.map

package/dist/Col-R5mAy8T9.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Col-R5mAy8T9.cjs","sources":["../src/components/Flex/Row.tsx","../src/components/Flex/Col.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Flex, type FlexProps } from './Flex'\n\nexport interface RowProps extends Omit<FlexProps, 'direction'> {}\n\n/**\n * A horizontal flex row. `Flex` with `direction=\"row\"` and `align=\"center\"` by default — override\n * `align`/`gap`/`justify`/`wrap`/`padding` via props.\n */\nexport const Row = forwardRef<HTMLDivElement, RowProps>(function Row(props, ref) {\n  return <Flex ref={ref} direction=\"row\" align=\"center\" {...props} />\n})\n","import { forwardRef } from 'react'\nimport { Flex, type FlexProps } from './Flex'\n\nexport interface ColProps extends Omit<FlexProps, 'direction'> {}\n\n/**\n * A vertical flex column. `Flex` with `direction=\"column\"` (children stretch to full width by\n * default) — set `gap`/`align`/`justify`/`padding` via props.\n */\nexport const Col = forwardRef<HTMLDivElement, ColProps>(function Col(props, ref) {\n  return <Flex ref={ref} direction=\"column\" {...props} />\n})\n"],"names":["Row","forwardRef","props","ref","jsx","Flex","Col"],"mappings":"sGASaA,EAAMC,EAAAA,WAAqC,SAAaC,EAAOC,EAAK,CAC/E,OAAOC,EAAAA,IAACC,QAAK,IAAAF,EAAU,UAAU,MAAM,MAAM,SAAU,GAAGD,EAAO,CACnE,CAAC,ECFYI,EAAML,EAAAA,WAAqC,SAAaC,EAAOC,EAAK,CAC/E,aAAQE,EAAAA,KAAA,CAAK,IAAAF,EAAU,UAAU,SAAU,GAAGD,EAAO,CACvD,CAAC"}

package/dist/ColorPicker-2udt1ORM.js

@@ -0,0 +1,119 @@
+import { jsxs as C, jsx as l } from "react/jsx-runtime";
+import { forwardRef as rr, useId as er, useState as V, useRef as E, useCallback as O } from "react";
+import { clsx as p } from "clsx";
+import { u as or } from "./formContext-B7ln1Miy.js";
+import { F as lr } from "./FloatingPanel-BG9Uag__.js";
+import { T as S } from "./Typography-Cta6Rg4L.js";
+import { p as sr, f as tr, s as e, C as ar } from "./ColorPickerPanel-BM9OwDDE.js";
+import { a as ir } from "./ConfigProvider-2c94kUOk.js";
+const nr = 232, Cr = rr(function({
+  label: u,
+  size: j = "md",
+  error: H,
+  helperText: W,
+  required: q = !1,
+  fullWidth: D = !0,
+  disabled: x = !1,
+  value: T,
+  defaultValue: L,
+  onChange: f,
+  swatches: U,
+  name: s,
+  placeholder: P,
+  id: _,
+  className: $,
+  style: z
+}, i) {
+  const A = ir(), G = er(), m = _ ?? G, g = `${m}-helper`, n = or(), k = !!(n && s), o = n && s ? n.field(s) : void 0, N = T !== void 0 ? T : k ? n.values[s] ?? "" : void 0, R = N !== void 0, [J, K] = V(L ?? ""), B = R ? N : J, t = sr(B || ""), c = t ? tr(t) : null, M = c ? c[0] === "#" ? c.toUpperCase() : c : null, v = H ?? (o == null ? void 0 : o.error) ?? !1, h = W ?? (o == null ? void 0 : o.helperText), Q = (r) => {
+    R || K(r), k && n.setValue(s, r), f == null || f(r);
+  }, d = E(null), F = E(null), [y, I] = V(!1), X = O(
+    (r) => {
+      d.current = r, typeof i == "function" ? i(r) : i && (i.current = r);
+    },
+    [i]
+  ), Y = O((r) => {
+    var a;
+    I(!1), r && ((a = d.current) == null || a.focus());
+  }, []), Z = (r) => {
+    var b, w;
+    const a = r.relatedTarget;
+    a && ((b = F.current) != null && b.contains(a) || (w = d.current) != null && w.contains(a)) || o == null || o.onBlur(r);
+  };
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      className: p(
+        e.field,
+        e[j],
+        D && e.fullWidth,
+        v && e.error,
+        x && e.disabled,
+        $
+      ),
+      style: z,
+      children: [
+        u != null && /* @__PURE__ */ C("label", { htmlFor: m, className: e.label, children: [
+          /* @__PURE__ */ l(S, { as: "span", variant: "bodySmall", color: "muted", children: u }),
+          q && /* @__PURE__ */ l("span", { className: e.required, "aria-hidden": "true", children: "*" })
+        ] }),
+        /* @__PURE__ */ C(
+          "button",
+          {
+            ref: X,
+            id: m,
+            name: s,
+            type: "button",
+            className: p(e.control, y && e.open),
+            disabled: x,
+            "aria-haspopup": "dialog",
+            "aria-expanded": y,
+            "aria-invalid": v || void 0,
+            "aria-describedby": h != null ? g : void 0,
+            "aria-label": u || t || P ? void 0 : A("colorPicker.pick"),
+            onClick: () => I((r) => !r),
+            onBlur: Z,
+            children: [
+              /* @__PURE__ */ l("span", { className: p(e.value, !t && e.placeholder), children: M ?? P }),
+              /* @__PURE__ */ l(
+                "span",
+                {
+                  className: p(e.preview, !t && e.previewEmpty),
+                  style: t ? { "--cp-fill": c } : void 0,
+                  "aria-hidden": "true"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ l(
+          lr,
+          {
+            ref: F,
+            open: y,
+            triggerRef: d,
+            onClose: Y,
+            role: "dialog",
+            ariaLabel: "Color picker",
+            width: nr,
+            children: /* @__PURE__ */ l(ar, { value: B, onChange: Q, swatches: U })
+          }
+        ),
+        h != null && /* @__PURE__ */ l(
+          S,
+          {
+            as: "span",
+            id: g,
+            variant: "bodySmall",
+            color: v ? "error" : "muted",
+            className: e.helper,
+            children: h
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  Cr as C
+};
+//# sourceMappingURL=ColorPicker-2udt1ORM.js.map

package/dist/ColorPicker-2udt1ORM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker-2udt1ORM.js","sources":["../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type FocusEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport { useT } from '../../theme'\nimport { FloatingPanel } from '../FloatingPanel/FloatingPanel'\nimport { Typography } from '../Typography'\nimport { ColorPickerPanel } from './ColorPickerPanel'\nimport { formatColor, parseColor } from './colorUtils'\nimport styles from './ColorPicker.module.css'\n\nexport type ColorPickerSize = 'sm' | 'md' | 'lg'\n\n/** Popover width (px). */\nconst POPOVER_WIDTH = 232\n\nexport interface ColorPickerProps {\n  /** Label rendered above the field. */\n  label?: ReactNode\n  /** Preset size — control height, swatch and font. */\n  size?: ColorPickerSize\n  /** Marks the field invalid: red border/ring + the `helperText` in the error color. */\n  error?: boolean\n  /** Helper / validation text under the field. Adopts the error color while `error`. */\n  helperText?: ReactNode\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Stretches the field to fill its container width. Defaults to `true`. */\n  fullWidth?: boolean\n  /** Disables the field. */\n  disabled?: boolean\n  /** Controlled value — a CSS color string: `#rrggbb` hex, or `rgba(r, g, b, a)` when translucent. */\n  value?: string\n  /** Initial value for uncontrolled use (hex or `rgb()`/`rgba()`). */\n  defaultValue?: string\n  /** Fires with the next color: `#rrggbb` when opaque, `rgba(r, g, b, a)` when not (or `''` when cleared). */\n  onChange?: (color: string) => void\n  /** Quick-pick swatches shown in the popover. Defaults to a curated palette. */\n  swatches?: string[]\n  /** Form field name — auto-binds to a surrounding `<Form>` (value is the hex string). */\n  name?: string\n  /** Placeholder shown in the trigger when no color is set. Omit to show nothing. */\n  placeholder?: string\n  /** Id for the trigger (label association). */\n  id?: string\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * A color field with a beautiful popover picker: a saturation/value square, a hue slider, an alpha\n * (opacity) slider, a color input, quick-pick swatches and a clear button. The input accepts hex\n * (`#rgb`/`#rrggbb`/`#rrggbbaa`) or `rgb()`/`rgba()`, and the value comes back as `#rrggbb` when\n * fully opaque or `rgba(r, g, b, a)` when translucent. Clicking the trigger opens the popover, which\n * — like `Dropdown` — is portaled to `<body>`, opens below (flips above only when it would\n * overflow), locks page scroll and re-positions on scroll/resize. Controlled (`value` + `onChange`)\n * or uncontrolled (`defaultValue`), and binds to a surrounding `<Form>` by `name` (its form value is\n * the color string; validate with e.g. `z.string().regex(/^#[0-9a-f]{6}$/i, 'Pick a color')`, or a\n * looser pattern if you allow `rgba()`). Styling uses `--tz-*` tokens (the spectrum gradients and\n * the alpha checkerboard are the unavoidable exceptions).\n */\nexport const ColorPicker = forwardRef<HTMLButtonElement, ColorPickerProps>(function ColorPicker(\n  {\n    label,\n    size = 'md',\n    error,\n    helperText,\n    required = false,\n    fullWidth = true,\n    disabled = false,\n    value,\n    defaultValue,\n    onChange,\n    swatches,\n    name,\n    placeholder,\n    id: idProp,\n    className,\n    style,\n  },\n  ref,\n) {\n  const t = useT()\n  const reactId = useId()\n  const id = idProp ?? reactId\n  const helperId = `${id}-helper`\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is the hex string.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalValue: string | undefined =\n    value !== undefined\n      ? value\n      : isFormBound\n        ? ((form!.values[name!] as string | undefined) ?? '')\n        : undefined\n  const isControlled = externalValue !== undefined\n  const [internal, setInternal] = useState<string>(defaultValue ?? '')\n  const currentColor = isControlled ? externalValue! : internal\n  const parsed = parseColor(currentColor || '')\n  // canonical string for the value (`#rrggbb` when opaque, `rgba(...)` when not), null when unset\n  const displayValue = parsed ? formatColor(parsed) : null\n  // hex shows uppercase in the trigger; rgba() stays as-is\n  const displayText = displayValue\n    ? displayValue[0] === '#'\n      ? displayValue.toUpperCase()\n      : displayValue\n    : null\n\n  const resolvedError = error ?? bound?.error ?? false\n  const resolvedHelperText = helperText ?? bound?.helperText\n\n  const commit = (color: string) => {\n    if (!isControlled) setInternal(color)\n    if (isFormBound) form!.setValue(name!, color)\n    onChange?.(color)\n  }\n\n  // ── popover (positioning / scroll-lock / dismiss come from FloatingPanel) ──────────────────────\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const popoverRef = useRef<HTMLDivElement | null>(null)\n  const [open, setOpen] = useState(false)\n\n  const setTriggerRef = useCallback(\n    (node: HTMLButtonElement | null) => {\n      triggerRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as { current: HTMLButtonElement | null }).current = node\n    },\n    [ref],\n  )\n\n  const closePopover = useCallback((refocus: boolean) => {\n    setOpen(false)\n    if (refocus) triggerRef.current?.focus()\n  }, [])\n\n  // mark the form field touched when focus leaves the whole widget — but not when it moves into the\n  // (portaled) popover or stays on the trigger, so a form-bound picker shows its error like every\n  // other popover field (Select/DatePicker) instead of only after submit\n  const handleTriggerBlur = (event: FocusEvent<HTMLButtonElement>) => {\n    const next = event.relatedTarget as Node | null\n    if (next && (popoverRef.current?.contains(next) || triggerRef.current?.contains(next))) return\n    bound?.onBlur(event as unknown as FocusEvent<HTMLInputElement>)\n  }\n\n  return (\n    <div\n      className={clsx(\n        styles.field,\n        styles[size],\n        fullWidth && styles.fullWidth,\n        resolvedError && styles.error,\n        disabled && styles.disabled,\n        className,\n      )}\n      style={style}\n    >\n      {label != null && (\n        <label htmlFor={id} className={styles.label}>\n          <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\">\n            {label}\n          </Typography>\n          {required && (\n            <span className={styles.required} aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n\n      <button\n        ref={setTriggerRef}\n        id={id}\n        name={name}\n        type=\"button\"\n        className={clsx(styles.control, open && styles.open)}\n        disabled={disabled}\n        aria-haspopup=\"dialog\"\n        aria-expanded={open}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={resolvedHelperText != null ? helperId : undefined}\n        aria-label={label || parsed || placeholder ? undefined : t('colorPicker.pick')}\n        onClick={() => setOpen((o) => !o)}\n        onBlur={handleTriggerBlur}\n      >\n        <span className={clsx(styles.value, !parsed && styles.placeholder)}>\n          {displayText ?? placeholder}\n        </span>\n        <span\n          className={clsx(styles.preview, !parsed && styles.previewEmpty)}\n          style={parsed ? ({ '--cp-fill': displayValue } as CSSProperties) : undefined}\n          aria-hidden=\"true\"\n        />\n      </button>\n\n      <FloatingPanel\n        ref={popoverRef}\n        open={open}\n        triggerRef={triggerRef}\n        onClose={closePopover}\n        role=\"dialog\"\n        ariaLabel=\"Color picker\"\n        width={POPOVER_WIDTH}\n      >\n        <ColorPickerPanel value={currentColor} onChange={commit} swatches={swatches} />\n      </FloatingPanel>\n\n      {resolvedHelperText != null && (\n        <Typography\n          as=\"span\"\n          id={helperId}\n          variant=\"bodySmall\"\n          color={resolvedError ? 'error' : 'muted'}\n          className={styles.helper}\n        >\n          {resolvedHelperText}\n        </Typography>\n      )}\n    </div>\n  )\n})\n"],"names":["POPOVER_WIDTH","ColorPicker","forwardRef","label","size","error","helperText","required","fullWidth","disabled","value","defaultValue","onChange","swatches","name","placeholder","idProp","className","style","ref","t","useT","reactId","useId","id","helperId","form","useFormContext","isFormBound","bound","externalValue","isControlled","internal","setInternal","useState","currentColor","parsed","parseColor","displayValue","formatColor","displayText","resolvedError","resolvedHelperText","commit","color","triggerRef","useRef","popoverRef","open","setOpen","setTriggerRef","useCallback","node","closePopover","refocus","_a","handleTriggerBlur","event","next","_b","jsxs","clsx","styles","jsx","Typography","o","FloatingPanel","ColorPickerPanel"],"mappings":"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"}

package/dist/ColorPicker-BwmaXCOy.cjs

@@ -0,0 +1,2 @@
+"use strict";const r=require("react/jsx-runtime"),t=require("react"),p=require("clsx"),X=require("./formContext-bTWrqdEV.cjs"),Y=require("./FloatingPanel-U6sGYiSK.cjs"),I=require("./Typography-BFatE1_A.cjs"),e=require("./ColorPickerPanel-ByB1mLSi.cjs"),Z=require("./ConfigProvider-ByOFXVyP.cjs"),ee=232,se=t.forwardRef(function({label:y,size:w="md",error:S,helperText:V,required:E=!1,fullWidth:O=!0,disabled:C=!1,value:P,defaultValue:H,onChange:f,swatches:W,name:o,placeholder:g,id:D,className:L,style:U},a){const _=Z.useT(),$=t.useId(),x=D??$,j=`${x}-helper`,c=X.useFormContext(),k=!!(c&&o),l=c&&o?c.field(o):void 0,T=P!==void 0?P:k?c.values[o]??"":void 0,q=T!==void 0,[z,A]=t.useState(H??""),R=q?T:z,i=e.parseColor(R||""),u=i?e.formatColor(i):null,G=u?u[0]==="#"?u.toUpperCase():u:null,v=S??(l==null?void 0:l.error)??!1,h=V??(l==null?void 0:l.helperText),J=s=>{q||A(s),k&&c.setValue(o,s),f==null||f(s)},d=t.useRef(null),N=t.useRef(null),[m,b]=t.useState(!1),K=t.useCallback(s=>{d.current=s,typeof a=="function"?a(s):a&&(a.current=s)},[a]),M=t.useCallback(s=>{var n;b(!1),s&&((n=d.current)==null||n.focus())},[]),Q=s=>{var B,F;const n=s.relatedTarget;n&&((B=N.current)!=null&&B.contains(n)||(F=d.current)!=null&&F.contains(n))||l==null||l.onBlur(s)};return r.jsxs("div",{className:p.clsx(e.styles.field,e.styles[w],O&&e.styles.fullWidth,v&&e.styles.error,C&&e.styles.disabled,L),style:U,children:[y!=null&&r.jsxs("label",{htmlFor:x,className:e.styles.label,children:[r.jsx(I.Typography,{as:"span",variant:"bodySmall",color:"muted",children:y}),E&&r.jsx("span",{className:e.styles.required,"aria-hidden":"true",children:"*"})]}),r.jsxs("button",{ref:K,id:x,name:o,type:"button",className:p.clsx(e.styles.control,m&&e.styles.open),disabled:C,"aria-haspopup":"dialog","aria-expanded":m,"aria-invalid":v||void 0,"aria-describedby":h!=null?j:void 0,"aria-label":y||i||g?void 0:_("colorPicker.pick"),onClick:()=>b(s=>!s),onBlur:Q,children:[r.jsx("span",{className:p.clsx(e.styles.value,!i&&e.styles.placeholder),children:G??g}),r.jsx("span",{className:p.clsx(e.styles.preview,!i&&e.styles.previewEmpty),style:i?{"--cp-fill":u}:void 0,"aria-hidden":"true"})]}),r.jsx(Y.FloatingPanel,{ref:N,open:m,triggerRef:d,onClose:M,role:"dialog",ariaLabel:"Color picker",width:ee,children:r.jsx(e.ColorPickerPanel,{value:R,onChange:J,swatches:W})}),h!=null&&r.jsx(I.Typography,{as:"span",id:j,variant:"bodySmall",color:v?"error":"muted",className:e.styles.helper,children:h})]})});exports.ColorPicker=se;
+//# sourceMappingURL=ColorPicker-BwmaXCOy.cjs.map

package/dist/ColorPicker-BwmaXCOy.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker-BwmaXCOy.cjs","sources":["../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type FocusEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport { useT } from '../../theme'\nimport { FloatingPanel } from '../FloatingPanel/FloatingPanel'\nimport { Typography } from '../Typography'\nimport { ColorPickerPanel } from './ColorPickerPanel'\nimport { formatColor, parseColor } from './colorUtils'\nimport styles from './ColorPicker.module.css'\n\nexport type ColorPickerSize = 'sm' | 'md' | 'lg'\n\n/** Popover width (px). */\nconst POPOVER_WIDTH = 232\n\nexport interface ColorPickerProps {\n  /** Label rendered above the field. */\n  label?: ReactNode\n  /** Preset size — control height, swatch and font. */\n  size?: ColorPickerSize\n  /** Marks the field invalid: red border/ring + the `helperText` in the error color. */\n  error?: boolean\n  /** Helper / validation text under the field. Adopts the error color while `error`. */\n  helperText?: ReactNode\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Stretches the field to fill its container width. Defaults to `true`. */\n  fullWidth?: boolean\n  /** Disables the field. */\n  disabled?: boolean\n  /** Controlled value — a CSS color string: `#rrggbb` hex, or `rgba(r, g, b, a)` when translucent. */\n  value?: string\n  /** Initial value for uncontrolled use (hex or `rgb()`/`rgba()`). */\n  defaultValue?: string\n  /** Fires with the next color: `#rrggbb` when opaque, `rgba(r, g, b, a)` when not (or `''` when cleared). */\n  onChange?: (color: string) => void\n  /** Quick-pick swatches shown in the popover. Defaults to a curated palette. */\n  swatches?: string[]\n  /** Form field name — auto-binds to a surrounding `<Form>` (value is the hex string). */\n  name?: string\n  /** Placeholder shown in the trigger when no color is set. Omit to show nothing. */\n  placeholder?: string\n  /** Id for the trigger (label association). */\n  id?: string\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * A color field with a beautiful popover picker: a saturation/value square, a hue slider, an alpha\n * (opacity) slider, a color input, quick-pick swatches and a clear button. The input accepts hex\n * (`#rgb`/`#rrggbb`/`#rrggbbaa`) or `rgb()`/`rgba()`, and the value comes back as `#rrggbb` when\n * fully opaque or `rgba(r, g, b, a)` when translucent. Clicking the trigger opens the popover, which\n * — like `Dropdown` — is portaled to `<body>`, opens below (flips above only when it would\n * overflow), locks page scroll and re-positions on scroll/resize. Controlled (`value` + `onChange`)\n * or uncontrolled (`defaultValue`), and binds to a surrounding `<Form>` by `name` (its form value is\n * the color string; validate with e.g. `z.string().regex(/^#[0-9a-f]{6}$/i, 'Pick a color')`, or a\n * looser pattern if you allow `rgba()`). Styling uses `--tz-*` tokens (the spectrum gradients and\n * the alpha checkerboard are the unavoidable exceptions).\n */\nexport const ColorPicker = forwardRef<HTMLButtonElement, ColorPickerProps>(function ColorPicker(\n  {\n    label,\n    size = 'md',\n    error,\n    helperText,\n    required = false,\n    fullWidth = true,\n    disabled = false,\n    value,\n    defaultValue,\n    onChange,\n    swatches,\n    name,\n    placeholder,\n    id: idProp,\n    className,\n    style,\n  },\n  ref,\n) {\n  const t = useT()\n  const reactId = useId()\n  const id = idProp ?? reactId\n  const helperId = `${id}-helper`\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is the hex string.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalValue: string | undefined =\n    value !== undefined\n      ? value\n      : isFormBound\n        ? ((form!.values[name!] as string | undefined) ?? '')\n        : undefined\n  const isControlled = externalValue !== undefined\n  const [internal, setInternal] = useState<string>(defaultValue ?? '')\n  const currentColor = isControlled ? externalValue! : internal\n  const parsed = parseColor(currentColor || '')\n  // canonical string for the value (`#rrggbb` when opaque, `rgba(...)` when not), null when unset\n  const displayValue = parsed ? formatColor(parsed) : null\n  // hex shows uppercase in the trigger; rgba() stays as-is\n  const displayText = displayValue\n    ? displayValue[0] === '#'\n      ? displayValue.toUpperCase()\n      : displayValue\n    : null\n\n  const resolvedError = error ?? bound?.error ?? false\n  const resolvedHelperText = helperText ?? bound?.helperText\n\n  const commit = (color: string) => {\n    if (!isControlled) setInternal(color)\n    if (isFormBound) form!.setValue(name!, color)\n    onChange?.(color)\n  }\n\n  // ── popover (positioning / scroll-lock / dismiss come from FloatingPanel) ──────────────────────\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const popoverRef = useRef<HTMLDivElement | null>(null)\n  const [open, setOpen] = useState(false)\n\n  const setTriggerRef = useCallback(\n    (node: HTMLButtonElement | null) => {\n      triggerRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as { current: HTMLButtonElement | null }).current = node\n    },\n    [ref],\n  )\n\n  const closePopover = useCallback((refocus: boolean) => {\n    setOpen(false)\n    if (refocus) triggerRef.current?.focus()\n  }, [])\n\n  // mark the form field touched when focus leaves the whole widget — but not when it moves into the\n  // (portaled) popover or stays on the trigger, so a form-bound picker shows its error like every\n  // other popover field (Select/DatePicker) instead of only after submit\n  const handleTriggerBlur = (event: FocusEvent<HTMLButtonElement>) => {\n    const next = event.relatedTarget as Node | null\n    if (next && (popoverRef.current?.contains(next) || triggerRef.current?.contains(next))) return\n    bound?.onBlur(event as unknown as FocusEvent<HTMLInputElement>)\n  }\n\n  return (\n    <div\n      className={clsx(\n        styles.field,\n        styles[size],\n        fullWidth && styles.fullWidth,\n        resolvedError && styles.error,\n        disabled && styles.disabled,\n        className,\n      )}\n      style={style}\n    >\n      {label != null && (\n        <label htmlFor={id} className={styles.label}>\n          <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\">\n            {label}\n          </Typography>\n          {required && (\n            <span className={styles.required} aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n\n      <button\n        ref={setTriggerRef}\n        id={id}\n        name={name}\n        type=\"button\"\n        className={clsx(styles.control, open && styles.open)}\n        disabled={disabled}\n        aria-haspopup=\"dialog\"\n        aria-expanded={open}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={resolvedHelperText != null ? helperId : undefined}\n        aria-label={label || parsed || placeholder ? undefined : t('colorPicker.pick')}\n        onClick={() => setOpen((o) => !o)}\n        onBlur={handleTriggerBlur}\n      >\n        <span className={clsx(styles.value, !parsed && styles.placeholder)}>\n          {displayText ?? placeholder}\n        </span>\n        <span\n          className={clsx(styles.preview, !parsed && styles.previewEmpty)}\n          style={parsed ? ({ '--cp-fill': displayValue } as CSSProperties) : undefined}\n          aria-hidden=\"true\"\n        />\n      </button>\n\n      <FloatingPanel\n        ref={popoverRef}\n        open={open}\n        triggerRef={triggerRef}\n        onClose={closePopover}\n        role=\"dialog\"\n        ariaLabel=\"Color picker\"\n        width={POPOVER_WIDTH}\n      >\n        <ColorPickerPanel value={currentColor} onChange={commit} swatches={swatches} />\n      </FloatingPanel>\n\n      {resolvedHelperText != null && (\n        <Typography\n          as=\"span\"\n          id={helperId}\n          variant=\"bodySmall\"\n          color={resolvedError ? 'error' : 'muted'}\n          className={styles.helper}\n        >\n          {resolvedHelperText}\n        </Typography>\n      )}\n    </div>\n  )\n})\n"],"names":["POPOVER_WIDTH","ColorPicker","forwardRef","label","size","error","helperText","required","fullWidth","disabled","value","defaultValue","onChange","swatches","name","placeholder","idProp","className","style","ref","t","useT","reactId","useId","id","helperId","form","useFormContext","isFormBound","bound","externalValue","isControlled","internal","setInternal","useState","currentColor","parsed","parseColor","displayValue","formatColor","displayText","resolvedError","resolvedHelperText","commit","color","triggerRef","useRef","popoverRef","open","setOpen","setTriggerRef","useCallback","node","closePopover","refocus","_a","handleTriggerBlur","event","next","_b","jsxs","clsx","styles","jsx","Typography","o","FloatingPanel","ColorPickerPanel"],"mappings":"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"}