@techzyapp/ui-library 1.0.48 → 1.0.50

package/dist/{ChoiceCardGroup-D37XREKV.js → ChoiceCardGroup-BBqUbFLS.js}

@@ -3,7 +3,7 @@ import { useContext as P, createContext as R, forwardRef as j, useState as w, us
 import { clsx as k } from "clsx";
 import { u as J } from "./formContext-B7ln1Miy.js";
 import { T as K } from "./Typography-ChSuxgkc.js";
-import { b as Q, a as U } from "./Icon-B7DJn8Tw.js";
+import { b as Q, a as U } from "./Icon-DMMO32p6.js";
 const F = R(null);
 function W() {
   return P(F);
@@ -177,4 +177,4 @@ export {
   he as C,
   Ae as a
 };
-//# sourceMappingURL=ChoiceCardGroup-D37XREKV.js.map
+//# sourceMappingURL=ChoiceCardGroup-BBqUbFLS.js.map

package/dist/{ChoiceCardGroup-D37XREKV.js.map → ChoiceCardGroup-BBqUbFLS.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ChoiceCardGroup-D37XREKV.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 `color` 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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"}
+{"version":3,"file":"ChoiceCardGroup-BBqUbFLS.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 `color` 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/{ChoiceCardGroup-Cj_YFj6C.cjs → ChoiceCardGroup-bnKFPDYz.cjs}

@@ -1,2 +1,2 @@
-"use strict";const t=require("react/jsx-runtime"),i=require("react"),$=require("clsx"),V=require("./formContext-bTWrqdEV.cjs"),P=require("./Typography-d97DdbNd.cjs"),w=require("./Icon-CBg21lKA.cjs"),R=i.createContext(null);function H(){return i.useContext(R)}const J="_group_7s2td_2",K="_groupLabel_7s2td_8",Q="_required_7s2td_13",U="_grid_7s2td_17",W="_card_7s2td_24",X="_disabled_7s2td_43",Y="_selected_7s2td_43",Z="_input_7s2td_53",ee="_error_7s2td_57",se="_left_7s2td_69",te="_text_7s2td_73",re="_sm_7s2td_79",oe="_md_7s2td_87",ce="_lg_7s2td_95",de="_indicator_7s2td_119",le="_radioDot_7s2td_164",ne="_iconBox_7s2td_187",ie="_label_7s2td_214",ae="_description_7s2td_221",s={group:J,groupLabel:K,required:Q,grid:U,card:W,disabled:X,selected:Y,input:Z,error:ee,left:se,text:te,sm:re,md:oe,lg:ce,indicator:de,radioDot:le,iconBox:ne,label:ie,description:ae},_e=new Set(w.ICON_NAMES),T=i.forwardRef(function({value:c,label:a,description:_,icon:o,align:d,color:p,size:C,error:q,checked:u,onChange:x,name:S,disabled:I,className:z,style:A,...B},D){const e=H(),v=p??(e==null?void 0:e.color)??"primary",N=C??(e==null?void 0:e.size)??"md",j=q??(e==null?void 0:e.error)??!1,f=I??(e==null?void 0:e.disabled)??!1,n=S??(e==null?void 0:e.name),y=d??(e==null?void 0:e.align)??(o==null?"left":"center"),[m,g]=i.useState(!1),h=e?e.isSelected(c):u!==void 0?u:m,E=l=>{if(!f){if(e){e.toggle(c);return}u===void 0&&g(l.target.checked),x==null||x(l.target.checked)}},G=typeof o=="string"&&_e.has(o)?t.jsx(w.Icon,{name:o,size:N}):o;return t.jsxs("label",{className:$.clsx(s.card,s[N],y==="left"&&s.left,h&&s.selected,j&&s.error,f&&s.disabled,z),style:{"--tz-btn-rgb":`var(--tz-color-${v}-rgb)`,"--tz-btn-on":`var(--tz-color-${v}-contrast, #fff)`,...A},children:[t.jsx("input",{ref:D,type:e!=null&&e.exclusive?"radio":"checkbox",className:s.input,name:n,value:c,checked:h,onChange:E,disabled:f,"aria-invalid":j||void 0,...B}),t.jsx("span",{className:$.clsx(s.indicator,(e==null?void 0:e.exclusive)&&s.radioDot),"aria-hidden":"true"}),o!=null&&t.jsx("span",{className:s.iconBox,"aria-hidden":"true",children:G}),(a!=null||_!=null)&&t.jsxs("span",{className:s.text,children:[a!=null&&t.jsx("span",{className:s.label,children:a}),_!=null&&t.jsx("span",{className:s.description,children:_})]})]})}),ue=i.forwardRef(function({exclusive:c=!1,value:a,defaultValue:_,onChange:o,name:d,options:p,label:C,minCardWidth:q=160,align:u,size:x="md",color:S="primary",error:I,required:z=!1,disabled:A=!1,children:B,className:D,style:e,...v},N){const j=i.useId(),f=d??`choice-${j}`,n=V.useFormContext(),y=!!(n&&d),m=n&&d?n.field(d):void 0,g=a!==void 0?a:y?n.values[d]:void 0,h=g!==void 0,[E,G]=i.useState(_),l=h?g:E,k=I??(m==null?void 0:m.error)??!1,M={name:f,exclusive:c,isSelected:r=>c?l===r:Array.isArray(l)&&l.includes(r),toggle:r=>{let b;if(c)b=r;else{const L=Array.isArray(l)?l:[];b=L.includes(r)?L.filter(O=>O!==r):[...L,r]}h||G(b),y&&n.setValue(d,b),o==null||o(b)},size:x,align:u,color:S,disabled:A,error:k};return t.jsxs("div",{ref:N,role:c?"radiogroup":"group","aria-invalid":k||void 0,className:$.clsx(s.group,D),style:e,...v,children:[C!=null&&t.jsxs("span",{className:s.groupLabel,children:[t.jsx(P.Typography,{as:"span",variant:"bodySmall",color:"muted",children:C}),z&&t.jsx("span",{className:s.required,"aria-hidden":"true",children:"*"})]}),t.jsx("div",{className:s.grid,style:{"--cc-min":`${q}px`},children:t.jsx(R.Provider,{value:M,children:p?p.map(r=>t.jsx(T,{value:r.value,label:r.label,description:r.description,icon:r.icon,disabled:r.disabled},r.value)):B})})]})});exports.ChoiceCard=T;exports.ChoiceCardGroup=ue;
-//# sourceMappingURL=ChoiceCardGroup-Cj_YFj6C.cjs.map
+"use strict";const t=require("react/jsx-runtime"),i=require("react"),$=require("clsx"),V=require("./formContext-bTWrqdEV.cjs"),P=require("./Typography-d97DdbNd.cjs"),w=require("./Icon-BoQmbW7j.cjs"),R=i.createContext(null);function H(){return i.useContext(R)}const J="_group_7s2td_2",K="_groupLabel_7s2td_8",Q="_required_7s2td_13",U="_grid_7s2td_17",W="_card_7s2td_24",X="_disabled_7s2td_43",Y="_selected_7s2td_43",Z="_input_7s2td_53",ee="_error_7s2td_57",se="_left_7s2td_69",te="_text_7s2td_73",re="_sm_7s2td_79",oe="_md_7s2td_87",ce="_lg_7s2td_95",de="_indicator_7s2td_119",le="_radioDot_7s2td_164",ne="_iconBox_7s2td_187",ie="_label_7s2td_214",ae="_description_7s2td_221",s={group:J,groupLabel:K,required:Q,grid:U,card:W,disabled:X,selected:Y,input:Z,error:ee,left:se,text:te,sm:re,md:oe,lg:ce,indicator:de,radioDot:le,iconBox:ne,label:ie,description:ae},_e=new Set(w.ICON_NAMES),T=i.forwardRef(function({value:c,label:a,description:_,icon:o,align:d,color:p,size:C,error:q,checked:u,onChange:x,name:S,disabled:I,className:z,style:A,...B},D){const e=H(),v=p??(e==null?void 0:e.color)??"primary",N=C??(e==null?void 0:e.size)??"md",j=q??(e==null?void 0:e.error)??!1,f=I??(e==null?void 0:e.disabled)??!1,n=S??(e==null?void 0:e.name),y=d??(e==null?void 0:e.align)??(o==null?"left":"center"),[m,g]=i.useState(!1),h=e?e.isSelected(c):u!==void 0?u:m,E=l=>{if(!f){if(e){e.toggle(c);return}u===void 0&&g(l.target.checked),x==null||x(l.target.checked)}},G=typeof o=="string"&&_e.has(o)?t.jsx(w.Icon,{name:o,size:N}):o;return t.jsxs("label",{className:$.clsx(s.card,s[N],y==="left"&&s.left,h&&s.selected,j&&s.error,f&&s.disabled,z),style:{"--tz-btn-rgb":`var(--tz-color-${v}-rgb)`,"--tz-btn-on":`var(--tz-color-${v}-contrast, #fff)`,...A},children:[t.jsx("input",{ref:D,type:e!=null&&e.exclusive?"radio":"checkbox",className:s.input,name:n,value:c,checked:h,onChange:E,disabled:f,"aria-invalid":j||void 0,...B}),t.jsx("span",{className:$.clsx(s.indicator,(e==null?void 0:e.exclusive)&&s.radioDot),"aria-hidden":"true"}),o!=null&&t.jsx("span",{className:s.iconBox,"aria-hidden":"true",children:G}),(a!=null||_!=null)&&t.jsxs("span",{className:s.text,children:[a!=null&&t.jsx("span",{className:s.label,children:a}),_!=null&&t.jsx("span",{className:s.description,children:_})]})]})}),ue=i.forwardRef(function({exclusive:c=!1,value:a,defaultValue:_,onChange:o,name:d,options:p,label:C,minCardWidth:q=160,align:u,size:x="md",color:S="primary",error:I,required:z=!1,disabled:A=!1,children:B,className:D,style:e,...v},N){const j=i.useId(),f=d??`choice-${j}`,n=V.useFormContext(),y=!!(n&&d),m=n&&d?n.field(d):void 0,g=a!==void 0?a:y?n.values[d]:void 0,h=g!==void 0,[E,G]=i.useState(_),l=h?g:E,k=I??(m==null?void 0:m.error)??!1,M={name:f,exclusive:c,isSelected:r=>c?l===r:Array.isArray(l)&&l.includes(r),toggle:r=>{let b;if(c)b=r;else{const L=Array.isArray(l)?l:[];b=L.includes(r)?L.filter(O=>O!==r):[...L,r]}h||G(b),y&&n.setValue(d,b),o==null||o(b)},size:x,align:u,color:S,disabled:A,error:k};return t.jsxs("div",{ref:N,role:c?"radiogroup":"group","aria-invalid":k||void 0,className:$.clsx(s.group,D),style:e,...v,children:[C!=null&&t.jsxs("span",{className:s.groupLabel,children:[t.jsx(P.Typography,{as:"span",variant:"bodySmall",color:"muted",children:C}),z&&t.jsx("span",{className:s.required,"aria-hidden":"true",children:"*"})]}),t.jsx("div",{className:s.grid,style:{"--cc-min":`${q}px`},children:t.jsx(R.Provider,{value:M,children:p?p.map(r=>t.jsx(T,{value:r.value,label:r.label,description:r.description,icon:r.icon,disabled:r.disabled},r.value)):B})})]})});exports.ChoiceCard=T;exports.ChoiceCardGroup=ue;
+//# sourceMappingURL=ChoiceCardGroup-bnKFPDYz.cjs.map

package/dist/{ChoiceCardGroup-Cj_YFj6C.cjs.map → ChoiceCardGroup-bnKFPDYz.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ChoiceCardGroup-Cj_YFj6C.cjs","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 `color` 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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"}
+{"version":3,"file":"ChoiceCardGroup-bnKFPDYz.cjs","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 `color` 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-rnGAu2DQ.cjs → CodeBlock-B404V_cc.cjs}

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

package/dist/{CodeBlock-rnGAu2DQ.cjs.map → CodeBlock-B404V_cc.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock-rnGAu2DQ.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  /**\n   * Optional label shown on the left of the header bar (e.g. a filename). The header bar itself always\n   * renders (whenever `copyable`), so the copy button lives in it with or without a `title`.\n   */\n  title?: ReactNode\n  /** Show a copy-to-clipboard button (in the header bar). Defaults to `true`. */\n  copyable?: boolean\n  /** Show line numbers. Defaults to `true`. */\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. A header\n * bar always renders (whenever `copyable`, default `true`) and holds the copy button — which flips to a\n * tick on click — with an optional `title` (e.g. a filename) on its left; `showLineNumbers` (default\n * `true`), `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 radius uses a `--tz-*` token (the border is a literal white-alpha hairline).\n */\nexport const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(function CodeBlock(\n  {\n    code,\n    language = 'tsx',\n    title,\n    copyable = true,\n    showLineNumbers = true,\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      {/* the header bar always renders whenever there's a title or a copy button — so the copy icon\n          lives in the bar (top-right), never floating over the code */}\n      {(title != null || copyButton) && (\n        <div className={styles.header}>\n          <span className={styles.title}>{title}</span>\n          {copyButton}\n        </div>\n      )}\n      <div\n        className={clsx(styles.code, wrap && styles.wrap, showLineNumbers && styles.lineNumbers)}\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    </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":"k6BAiBMA,EAAkB,KAmCXC,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,EAGtE,SAAA,EAAAP,GAAS,MAAQwB,IACjBM,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,KAAKH,EAAO,KAAMxB,GAAQwB,EAAO,KAAM1B,GAAmB0B,EAAO,WAAW,EACvF,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,CAEJ,EACF,CAEJ,CAAC"}
+{"version":3,"file":"CodeBlock-B404V_cc.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  /**\n   * Optional label shown on the left of the header bar (e.g. a filename). The header bar itself always\n   * renders (whenever `copyable`), so the copy button lives in it with or without a `title`.\n   */\n  title?: ReactNode\n  /** Show a copy-to-clipboard button (in the header bar). Defaults to `true`. */\n  copyable?: boolean\n  /** Show line numbers. Defaults to `true`. */\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. A header\n * bar always renders (whenever `copyable`, default `true`) and holds the copy button — which flips to a\n * tick on click — with an optional `title` (e.g. a filename) on its left; `showLineNumbers` (default\n * `true`), `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 radius uses a `--tz-*` token (the border is a literal white-alpha hairline).\n */\nexport const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(function CodeBlock(\n  {\n    code,\n    language = 'tsx',\n    title,\n    copyable = true,\n    showLineNumbers = true,\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      {/* the header bar always renders whenever there's a title or a copy button — so the copy icon\n          lives in the bar (top-right), never floating over the code */}\n      {(title != null || copyButton) && (\n        <div className={styles.header}>\n          <span className={styles.title}>{title}</span>\n          {copyButton}\n        </div>\n      )}\n      <div\n        className={clsx(styles.code, wrap && styles.wrap, showLineNumbers && styles.lineNumbers)}\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    </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":"k6BAiBMA,EAAkB,KAmCXC,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,EAGtE,SAAA,EAAAP,GAAS,MAAQwB,IACjBM,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,KAAKH,EAAO,KAAMxB,GAAQwB,EAAO,KAAM1B,GAAmB0B,EAAO,WAAW,EACvF,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,CAEJ,EACF,CAEJ,CAAC"}

package/dist/{CodeBlock-CX8_dMPD.js → CodeBlock-DvJ45qEp.js}

@@ -1,10 +1,10 @@
 import { jsx as t, jsxs as _ } from "react/jsx-runtime";
 import { forwardRef as x, useState as h, useRef as I, useEffect as b } from "react";
 import { clsx as w } from "clsx";
-import { I as S } from "./IconButton-iWbUJAz7.js";
-import { b as g } from "./Icon-B7DJn8Tw.js";
+import { I as S } from "./IconButton-s5hohjxu.js";
+import { b as g } from "./Icon-DMMO32p6.js";
 import { T as z } from "./Tooltip-BbT0uNzy.js";
-import { a as E } from "./ConfigProvider-DtyUlWk6.js";
+import { a as E } from "./ConfigProvider-bXX8dnhY.js";
 const R = "_root_wvbjf_4", M = "_header_wvbjf_15", D = "_title_wvbjf_24", H = "_code_wvbjf_34", L = "_plain_wvbjf_50", O = "_wrap_wvbjf_56", P = "_lineNumbers_wvbjf_62", q = "_copy_wvbjf_77", e = {
   root: R,
   header: M,
@@ -93,4 +93,4 @@ const R = "_root_wvbjf_4", M = "_header_wvbjf_15", D = "_title_wvbjf_24", H = "_
 export {
   X as C
 };
-//# sourceMappingURL=CodeBlock-CX8_dMPD.js.map
+//# sourceMappingURL=CodeBlock-DvJ45qEp.js.map

package/dist/{CodeBlock-CX8_dMPD.js.map → CodeBlock-DvJ45qEp.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock-CX8_dMPD.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  /**\n   * Optional label shown on the left of the header bar (e.g. a filename). The header bar itself always\n   * renders (whenever `copyable`), so the copy button lives in it with or without a `title`.\n   */\n  title?: ReactNode\n  /** Show a copy-to-clipboard button (in the header bar). Defaults to `true`. */\n  copyable?: boolean\n  /** Show line numbers. Defaults to `true`. */\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. A header\n * bar always renders (whenever `copyable`, default `true`) and holds the copy button — which flips to a\n * tick on click — with an optional `title` (e.g. a filename) on its left; `showLineNumbers` (default\n * `true`), `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 radius uses a `--tz-*` token (the border is a literal white-alpha hairline).\n */\nexport const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(function CodeBlock(\n  {\n    code,\n    language = 'tsx',\n    title,\n    copyable = true,\n    showLineNumbers = true,\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      {/* the header bar always renders whenever there's a title or a copy button — so the copy icon\n          lives in the bar (top-right), never floating over the code */}\n      {(title != null || copyButton) && (\n        <div className={styles.header}>\n          <span className={styles.title}>{title}</span>\n          {copyButton}\n        </div>\n      )}\n      <div\n        className={clsx(styles.code, wrap && styles.wrap, showLineNumbers && styles.lineNumbers)}\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    </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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"}
+{"version":3,"file":"CodeBlock-DvJ45qEp.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  /**\n   * Optional label shown on the left of the header bar (e.g. a filename). The header bar itself always\n   * renders (whenever `copyable`), so the copy button lives in it with or without a `title`.\n   */\n  title?: ReactNode\n  /** Show a copy-to-clipboard button (in the header bar). Defaults to `true`. */\n  copyable?: boolean\n  /** Show line numbers. Defaults to `true`. */\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. A header\n * bar always renders (whenever `copyable`, default `true`) and holds the copy button — which flips to a\n * tick on click — with an optional `title` (e.g. a filename) on its left; `showLineNumbers` (default\n * `true`), `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 radius uses a `--tz-*` token (the border is a literal white-alpha hairline).\n */\nexport const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(function CodeBlock(\n  {\n    code,\n    language = 'tsx',\n    title,\n    copyable = true,\n    showLineNumbers = true,\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      {/* the header bar always renders whenever there's a title or a copy button — so the copy icon\n          lives in the bar (top-right), never floating over the code */}\n      {(title != null || copyButton) && (\n        <div className={styles.header}>\n          <span className={styles.title}>{title}</span>\n          {copyButton}\n        </div>\n      )}\n      <div\n        className={clsx(styles.code, wrap && styles.wrap, showLineNumbers && styles.lineNumbers)}\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    </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/{ColorPicker-CwLivdAt.js → ColorPicker-C4slmEZC.js}

@@ -4,8 +4,8 @@ import { clsx as p } from "clsx";
 import { u as lr } from "./formContext-B7ln1Miy.js";
 import { F as sr } from "./FloatingPanel-C5c_eMQ0.js";
 import { T as j } from "./Typography-ChSuxgkc.js";
-import { p as tr, f as ar, s as e, C as ir } from "./ColorPickerPanel-CkrSIf35.js";
-import { a as nr } from "./ConfigProvider-DtyUlWk6.js";
+import { p as tr, f as ar, s as e, C as ir } from "./ColorPickerPanel-CQNfIbgc.js";
+import { a as nr } from "./ConfigProvider-bXX8dnhY.js";
 const cr = 232, Cr = er(function({
   label: u,
   size: H = "md",
@@ -125,4 +125,4 @@ const cr = 232, Cr = er(function({
 export {
   Cr as C
 };
-//# sourceMappingURL=ColorPicker-CwLivdAt.js.map
+//# sourceMappingURL=ColorPicker-C4slmEZC.js.map

package/dist/{ColorPicker-CwLivdAt.js.map → ColorPicker-C4slmEZC.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker-CwLivdAt.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  /**\n   * Offer opacity. Defaults to `true`. `false` hides the alpha slider and the field only ever emits\n   * `#rrggbb` (never `rgba()`) — for colors that must be opaque, e.g. brand colors.\n   */\n  alpha?: boolean\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    alpha = true,\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={t('colorPicker.dialog')}\n        width={POPOVER_WIDTH}\n      >\n        <ColorPickerPanel\n          value={currentColor}\n          onChange={commit}\n          swatches={swatches}\n          alpha={alpha}\n        />\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","alpha","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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"}
+{"version":3,"file":"ColorPicker-C4slmEZC.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  /**\n   * Offer opacity. Defaults to `true`. `false` hides the alpha slider and the field only ever emits\n   * `#rrggbb` (never `rgba()`) — for colors that must be opaque, e.g. brand colors.\n   */\n  alpha?: boolean\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    alpha = true,\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={t('colorPicker.dialog')}\n        width={POPOVER_WIDTH}\n      >\n        <ColorPickerPanel\n          value={currentColor}\n          onChange={commit}\n          swatches={swatches}\n          alpha={alpha}\n        />\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","alpha","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-BaAdcqR9.cjs → ColorPicker-_RBW51XB.cjs}

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

package/dist/{ColorPicker-BaAdcqR9.cjs.map → ColorPicker-_RBW51XB.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker-BaAdcqR9.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  /**\n   * Offer opacity. Defaults to `true`. `false` hides the alpha slider and the field only ever emits\n   * `#rrggbb` (never `rgba()`) — for colors that must be opaque, e.g. brand colors.\n   */\n  alpha?: boolean\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    alpha = true,\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={t('colorPicker.dialog')}\n        width={POPOVER_WIDTH}\n      >\n        <ColorPickerPanel\n          value={currentColor}\n          onChange={commit}\n          swatches={swatches}\n          alpha={alpha}\n        />\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","alpha","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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"}
+{"version":3,"file":"ColorPicker-_RBW51XB.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  /**\n   * Offer opacity. Defaults to `true`. `false` hides the alpha slider and the field only ever emits\n   * `#rrggbb` (never `rgba()`) — for colors that must be opaque, e.g. brand colors.\n   */\n  alpha?: boolean\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    alpha = true,\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={t('colorPicker.dialog')}\n        width={POPOVER_WIDTH}\n      >\n        <ColorPickerPanel\n          value={currentColor}\n          onChange={commit}\n          swatches={swatches}\n          alpha={alpha}\n        />\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","alpha","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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"}