@alfadocs/ui-kit 0.1.2 → 0.1.3

package/dist/_chunks/{icon-button-group-BnhkUWUg.js.map → icon-button-group-DeV3FpNY.js.map}

@@ -1 +1 @@
-{"version":3,"file":"icon-button-group-BnhkUWUg.js","sources":["../../src/components/icon-button-group/icon-button-group.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { IconButton, type IconButtonProps } from '../button/icon-button';\nimport type { ButtonProps } from '../button/button';\n\ntype ButtonIntent = NonNullable<ButtonProps['intent']>;\n\n// Intentionally does NOT compose `@radix-ui/react-toggle-group`. Radix\n// ToggleGroup's render shape makes it hard to layer shared-border chrome\n// across children (first-child / last-child / internal-divider CSS), and\n// the three-mode + three-role matrix (group / toolbar / radiogroup × momentary\n// / toggle-single / toggle-multi) is broader than Radix's single / multi\n// contract. The roving-tabindex implementation below mirrors Radix's pattern\n// so keyboard semantics stay consistent. See 05-accessibility.mdx for the\n// WAI-ARIA toolbar / radiogroup references.\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                 */\n/* ------------------------------------------------------------------ */\n\nconst iconButtonGroupVariants = cva(\n  [\n    'ds:inline-flex ds:isolate',\n    // Hairline border around the group unifies the children into one\n    // visual unit. Internal child dividers are drawn via the per-child\n    // class list below.\n    'ds:border ds:border-border',\n    'ds:rounded-[var(--radius-md)]',\n    // Ensure the focus ring of a pressed child sits above its siblings.\n    'ds:[&>*]:relative ds:[&>*:focus-visible]:z-10',\n  ].join(' '),\n  {\n    variants: {\n      orientation: {\n        horizontal: [\n          'ds:flex-row',\n          // Flatten internal corners on children so the outer radius owns\n          // the rounded edges.\n          'ds:[&>*:not(:first-child)]:rounded-s-none',\n          'ds:[&>*:not(:last-child)]:rounded-e-none',\n          // Internal divider — logical so it flips in RTL.\n          'ds:[&>*:not(:first-child)]:border-s',\n          'ds:[&>*:not(:first-child)]:border-border',\n          // The children already own an outer border (from IconButton's\n          // own border in secondary/outline variants). Collapse the doubled\n          // border so we don't get a 2px seam.\n          'ds:[&>*]:border-0',\n        ].join(' '),\n        vertical: [\n          'ds:flex-col',\n          // Vertical groups flow block-wise. Reading direction doesn't\n          // invert vertical stacks in any locale this DS targets, so the\n          // physical `rounded-t/b` is intentional.\n          'ds:[&>*:not(:first-child)]:rounded-t-none',\n          'ds:[&>*:not(:last-child)]:rounded-b-none',\n          'ds:[&>*:not(:first-child)]:border-t',\n          'ds:[&>*:not(:first-child)]:border-border',\n          'ds:[&>*]:border-0',\n        ].join(' '),\n      },\n    },\n    defaultVariants: {\n      orientation: 'horizontal',\n    },\n  },\n);\n\n/* ------------------------------------------------------------------ */\n/* Public types                                                         */\n/* ------------------------------------------------------------------ */\n\nexport type IconButtonGroupRole = 'group' | 'toolbar' | 'radiogroup';\nexport type IconButtonGroupMode =\n  | 'momentary'\n  | 'toggle-single'\n  | 'toggle-multi';\n\ntype SharedPropsBase = {\n  /** Forwarded to every child that does not set its own `size`. */\n  size?: 'sm' | 'md' | 'lg';\n  orientation?: 'horizontal' | 'vertical';\n  /** Disables every child. Uses `aria-disabled` on children (not the HTML\n   *  attribute) so each child still takes focus — matches WAI-ARIA toolbar\n   *  guidance. Visual disabled styling picks up the `aria-disabled:*`\n   *  variant declared on the Button base class. */\n  disabled?: boolean;\n  /** Intent applied to every child that does not set its own `intent`.\n   *  Defaults to `outline` — grouped icon buttons are peers, not a row\n   *  of solid-primary CTAs. */\n  intent?: ButtonIntent;\n  children: ReactNode;\n};\n\n// At least one of `aria-label` / `aria-labelledby` must be present. This\n// discriminated pair makes the TypeScript compiler reject a group with\n// neither — see the a11y acceptance criteria in the user story.\ntype AccessibleNameProps =\n  | { 'aria-label': string; 'aria-labelledby'?: never }\n  | { 'aria-label'?: never; 'aria-labelledby': string };\n\ntype SharedProps = SharedPropsBase & AccessibleNameProps;\n\n// Role + mode combinations are not all valid. Encoded via a discriminated\n// union so the compiler rejects nonsensical pairings (e.g. a multi-select\n// radiogroup).\ntype GroupRoleProps =\n  | { role?: 'group'; mode?: 'momentary' | 'toggle-single' | 'toggle-multi' }\n  | { role: 'toolbar'; mode?: 'momentary' | 'toggle-single' | 'toggle-multi' }\n  | { role: 'radiogroup'; mode: 'toggle-single' };\n\ntype MomentaryProps = SharedProps & {\n  mode?: 'momentary';\n  value?: never;\n  defaultValue?: never;\n  onValueChange?: never;\n};\n\ntype ToggleSingleProps = SharedProps & {\n  mode: 'toggle-single';\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (next: string) => void;\n};\n\ntype ToggleMultiProps = SharedProps & {\n  mode: 'toggle-multi';\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (next: string[]) => void;\n};\n\nexport type IconButtonGroupProps = (\n  | MomentaryProps\n  | ToggleSingleProps\n  | ToggleMultiProps\n) &\n  GroupRoleProps &\n  Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'onChange' | 'children'> &\n  VariantProps<typeof iconButtonGroupVariants>;\n\n/* ------------------------------------------------------------------ */\n/* IconButtonGroup                                                      */\n/* ------------------------------------------------------------------ */\n\nexport const IconButtonGroup = forwardRef<HTMLDivElement, IconButtonGroupProps>(\n  (props, ref) => {\n    const {\n      size,\n      orientation = 'horizontal',\n      role = 'group',\n      mode = 'momentary',\n      disabled = false,\n      intent = 'outline',\n      className,\n      children,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      ...rest\n    } = props as IconButtonGroupProps & { className?: string };\n\n    if (import.meta.env.DEV && !ariaLabel && !ariaLabelledBy) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'IconButtonGroup: `aria-label` or `aria-labelledby` is required for accessibility.',\n      );\n    }\n\n    /* ---- Controlled / uncontrolled value for toggle modes --------- */\n    const [internalValue, setInternalValue] = useState<string | string[]>(\n      () => {\n        if (mode === 'toggle-single') {\n          const p = props as ToggleSingleProps;\n          return p.defaultValue ?? '';\n        }\n        if (mode === 'toggle-multi') {\n          const p = props as ToggleMultiProps;\n          return p.defaultValue ?? [];\n        }\n        return '';\n      },\n    );\n\n    const resolvedValue: string | string[] = (() => {\n      if (mode === 'toggle-single') {\n        const p = props as ToggleSingleProps;\n        return p.value !== undefined ? p.value : internalValue;\n      }\n      if (mode === 'toggle-multi') {\n        const p = props as ToggleMultiProps;\n        return p.value !== undefined ? p.value : internalValue;\n      }\n      return '';\n    })();\n\n    const commitValue = useCallback(\n      (next: string | string[]) => {\n        if (mode === 'toggle-single') {\n          const p = props as ToggleSingleProps;\n          if (p.value === undefined) setInternalValue(next as string);\n          p.onValueChange?.(next as string);\n        } else if (mode === 'toggle-multi') {\n          const p = props as ToggleMultiProps;\n          if (p.value === undefined) setInternalValue(next as string[]);\n          p.onValueChange?.(next as string[]);\n        }\n      },\n      [mode, props],\n    );\n\n    /* ---- Roving tabindex state — only active in toolbar / radiogroup - */\n    const rovingTabindex = role === 'toolbar' || role === 'radiogroup';\n    const buttonsRef = useRef<Array<HTMLButtonElement | null>>([]);\n    const [focusIndex, setFocusIndex] = useState(0);\n\n    const registerIndex = useCallback(\n      (index: number, el: HTMLButtonElement | null) => {\n        buttonsRef.current[index] = el;\n      },\n      [],\n    );\n\n    const rootRef = useRef<HTMLDivElement | null>(null);\n    const [isRTL, setIsRTL] = useState(false);\n    // `useLayoutEffect` so the direction is correct BEFORE the first paint\n    // (otherwise a user pressing an arrow key on the first frame after mount\n    // would hit the default-LTR mapping even in an RTL document).\n    useLayoutEffect(() => {\n      if (typeof window === 'undefined') return;\n      const node = rootRef.current;\n      if (!node) return;\n      // Read the computed direction from the group's own wrapper so a\n      // scoped `dir='rtl'` on any ancestor (not just <html>) flips arrow\n      // navigation. `getComputedStyle` walks up automatically.\n      const dir = window.getComputedStyle(node).direction;\n      setIsRTL(dir === 'rtl');\n    }, []);\n\n    /* ---- Arrow-key navigation for roving tabindex ----------------- */\n    const handleRootKeyDown = useCallback(\n      (event: ReactKeyboardEvent<HTMLDivElement>) => {\n        if (!rovingTabindex) return;\n        const count = buttonsRef.current.filter(Boolean).length;\n        if (count === 0) return;\n\n        const forwardKey =\n          orientation === 'vertical'\n            ? 'ArrowDown'\n            : isRTL\n              ? 'ArrowLeft'\n              : 'ArrowRight';\n        const backwardKey =\n          orientation === 'vertical'\n            ? 'ArrowUp'\n            : isRTL\n              ? 'ArrowRight'\n              : 'ArrowLeft';\n\n        let next: number | null = null;\n        if (event.key === forwardKey) next = (focusIndex + 1) % count;\n        else if (event.key === backwardKey)\n          next = (focusIndex - 1 + count) % count;\n        else if (event.key === 'Home') next = 0;\n        else if (event.key === 'End') next = count - 1;\n\n        if (next === null) return;\n        // Skip over disabled children.\n        const maxAttempts = count;\n        let attempts = 0;\n        let candidate = next;\n        while (attempts < maxAttempts) {\n          const el = buttonsRef.current[candidate];\n          if (el && el.getAttribute('aria-disabled') !== 'true' && !el.disabled) {\n            break;\n          }\n          candidate =\n            event.key === backwardKey || event.key === 'End'\n              ? (candidate - 1 + count) % count\n              : (candidate + 1) % count;\n          attempts += 1;\n        }\n        event.preventDefault();\n        setFocusIndex(candidate);\n        buttonsRef.current[candidate]?.focus();\n        // WAI-ARIA radiogroup pattern: arrow keys MOVE focus AND CHANGE\n        // the selected radio in one action. toolbar pattern (and plain\n        // group) only moves focus.\n        if (role === 'radiogroup' && mode === 'toggle-single') {\n          const child = childArrayRef.current[candidate];\n          if (child && typeof child === 'object' && 'props' in child) {\n            const cValue = (\n              child as ReactElement<{ value?: string }>\n            ).props.value;\n            if (cValue) commitValue(cValue);\n          }\n        }\n      },\n      [rovingTabindex, orientation, isRTL, focusIndex, role, mode, commitValue],\n    );\n\n    /* ---- Build enhanced children ---------------------------------- */\n    const childArray = Children.toArray(children);\n    // Mirror into a ref so the keydown handler (referenced from Memo deps)\n    // can read the latest child list without inflating the dep array.\n    const childArrayRef = useRef<ReturnType<typeof Children.toArray>>([]);\n    childArrayRef.current = childArray;\n\n    const enhanced = childArray.map((child, index) => {\n      if (!isValidElement(child)) {\n        if (import.meta.env.DEV) {\n          // eslint-disable-next-line no-console\n          console.warn(\n            'IconButtonGroup: children should be <IconButton> elements.',\n          );\n        }\n        return child;\n      }\n\n      const childEl = child as ReactElement<\n        IconButtonProps & {\n          value?: string;\n          onClick?: React.MouseEventHandler<HTMLButtonElement>;\n        }\n      >;\n\n      // DEV-time sanity: warn if we got something that isn't an IconButton.\n      // `React.cloneElement` would still work, but IconButton-specific\n      // props (::before target size, forwarded tooltip) wouldn't apply.\n      if (import.meta.env.DEV && childEl.type !== IconButton) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          'IconButtonGroup: each child should be a DS <IconButton>. Other elements break target-size + focus-ring contracts.',\n        );\n      }\n\n      const childValue = childEl.props.value;\n\n      // Compute aria-pressed / aria-checked for toggle modes.\n      const { ariaPressed, ariaChecked } = computeToggleAria(\n        mode,\n        role,\n        childValue,\n        resolvedValue,\n      );\n\n      const groupDisabled = disabled === true;\n      const childDisabled = childEl.props.disabled === true;\n\n      // Click handling — wrap so aria-disabled (group-level) blocks\n      // activation, then forward to the child's own onClick.\n      const wrappedOnClick: React.MouseEventHandler<HTMLButtonElement> = (\n        event,\n      ) => {\n        // aria-disabled is advisory; the native click still fires. Block\n        // it explicitly when the GROUP (not the child) is disabled.\n        if (groupDisabled) {\n          event.preventDefault();\n          event.stopPropagation();\n          return;\n        }\n        // Forward to the child's own handler first so consumers can run\n        // analytics / preventDefault.\n        childEl.props.onClick?.(event);\n        if (event.defaultPrevented) return;\n        if (!childValue) return;\n        if (mode === 'toggle-single') {\n          // Contract: exactly one pressed. Clicking the pressed one is a\n          // no-op. This matches Radix ToggleGroup type='single' and the\n          // radiogroup pattern.\n          if (resolvedValue === childValue) return;\n          commitValue(childValue);\n        } else if (mode === 'toggle-multi') {\n          const list = resolvedValue as string[];\n          const next = list.includes(childValue)\n            ? list.filter((v) => v !== childValue)\n            : [...list, childValue];\n          commitValue(next);\n        }\n      };\n\n      // cloneElement's typed overload rejects `ref` as a prop, so we\n      // build the override bag as `unknown` and cast to the element's\n      // prop type. React at runtime routes `ref` via its usual channel.\n      const setMergedRef = (node: HTMLButtonElement | null) => {\n        registerIndex(index, node);\n        const originalRef = (\n          childEl as unknown as { ref?: React.Ref<HTMLButtonElement> }\n        ).ref;\n        if (typeof originalRef === 'function') originalRef(node);\n        else if (\n          originalRef !== null &&\n          originalRef !== undefined &&\n          typeof originalRef === 'object'\n        ) {\n          (originalRef as React.MutableRefObject<HTMLButtonElement | null>).current =\n            node;\n        }\n      };\n\n      // Per the user story: group-level disabled injects `aria-disabled`\n      // so the child stays focusable; child-level `disabled` still uses\n      // the HTML attribute (child's own contract). When both are true\n      // we leave the HTML disabled in place (strictest cue wins).\n      const ariaDisabled = groupDisabled && !childDisabled ? true : undefined;\n\n      // If the group is disabled OR we are in a toggle mode, we need the\n      // wrapped click handler. In pure momentary mode with no group\n      // disable, the child's own onClick is passed through unchanged.\n      const needsWrappedClick = mode !== 'momentary' || groupDisabled;\n\n      const overrides = {\n        intent: childEl.props.intent ?? intent,\n        size: childEl.props.size ?? size,\n        disabled: childDisabled,\n        'aria-disabled': ariaDisabled,\n        onClick: needsWrappedClick ? wrappedOnClick : childEl.props.onClick,\n        'aria-pressed': ariaPressed,\n        'aria-checked': ariaChecked,\n        // When the group is a radiogroup, children must be `role=\"radio\"`\n        // so screen readers announce them as radio buttons and so\n        // `getByRole('radio')` works in tests. The button element is\n        // re-purposed as a radio; `aria-checked` above carries the state.\n        role: role === 'radiogroup' ? 'radio' : undefined,\n        tabIndex: rovingTabindex ? (index === focusIndex ? 0 : -1) : undefined,\n        onFocus: (ev: React.FocusEvent<HTMLButtonElement>) => {\n          if (rovingTabindex) setFocusIndex(index);\n          childEl.props.onFocus?.(ev);\n        },\n        ref: setMergedRef,\n      } as unknown as Partial<IconButtonProps>;\n\n      return cloneElement(childEl, overrides);\n    });\n\n    const mergedRootRef = (node: HTMLDivElement | null) => {\n      rootRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref && typeof ref === 'object') {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      }\n    };\n\n    return (\n      <div\n        ref={mergedRootRef}\n        role={role}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-orientation={role === 'toolbar' ? orientation : undefined}\n        onKeyDown={handleRootKeyDown}\n        className={iconButtonGroupVariants({ orientation, className })}\n        {...rest}\n      >\n        {enhanced}\n      </div>\n    );\n  },\n);\n\nIconButtonGroup.displayName = 'IconButtonGroup';\n\n/* ------------------------------------------------------------------ */\n/* Helpers                                                              */\n/* ------------------------------------------------------------------ */\n\nfunction computeToggleAria(\n  mode: IconButtonGroupMode,\n  role: IconButtonGroupRole,\n  childValue: string | undefined,\n  resolvedValue: string | string[],\n): { ariaPressed?: boolean; ariaChecked?: boolean } {\n  if (mode === 'momentary' || !childValue) return {};\n\n  const isActive =\n    mode === 'toggle-multi'\n      ? (resolvedValue as string[]).includes(childValue)\n      : resolvedValue === childValue;\n\n  // radiogroup uses aria-checked; toolbar/group use aria-pressed.\n  if (role === 'radiogroup') {\n    return { ariaChecked: isActive };\n  }\n  return { ariaPressed: isActive };\n}\n\n"],"names":["iconButtonGroupVariants","cva","IconButtonGroup","forwardRef","props","ref","size","orientation","role","mode","disabled","intent","className","children","ariaLabel","ariaLabelledBy","rest","internalValue","setInternalValue","useState","resolvedValue","p","commitValue","useCallback","next","_a","_b","rovingTabindex","buttonsRef","useRef","focusIndex","setFocusIndex","registerIndex","index","el","rootRef","isRTL","setIsRTL","useLayoutEffect","node","dir","handleRootKeyDown","event","count","forwardKey","backwardKey","maxAttempts","attempts","candidate","child","childArrayRef","cValue","childArray","Children","enhanced","isValidElement","childEl","childValue","ariaPressed","ariaChecked","computeToggleAria","groupDisabled","childDisabled","wrappedOnClick","list","v","setMergedRef","originalRef","ariaDisabled","needsWrappedClick","overrides","ev","cloneElement","jsx","isActive"],"mappings":"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"}
+{"version":3,"file":"icon-button-group-DeV3FpNY.js","sources":["../../src/components/icon-button-group/icon-button-group.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { IconButton, type IconButtonProps } from '../button/icon-button';\nimport type { ButtonProps } from '../button/button';\n\ntype ButtonIntent = NonNullable<ButtonProps['intent']>;\n\n// Intentionally does NOT compose `@radix-ui/react-toggle-group`. Radix\n// ToggleGroup's render shape makes it hard to layer shared-border chrome\n// across children (first-child / last-child / internal-divider CSS), and\n// the three-mode + three-role matrix (group / toolbar / radiogroup × momentary\n// / toggle-single / toggle-multi) is broader than Radix's single / multi\n// contract. The roving-tabindex implementation below mirrors Radix's pattern\n// so keyboard semantics stay consistent. See 05-accessibility.mdx for the\n// WAI-ARIA toolbar / radiogroup references.\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                 */\n/* ------------------------------------------------------------------ */\n\nconst iconButtonGroupVariants = cva(\n  [\n    'ds:inline-flex ds:isolate',\n    // Hairline border around the group unifies the children into one\n    // visual unit. Internal child dividers are drawn via the per-child\n    // class list below.\n    'ds:border ds:border-border',\n    'ds:rounded-[var(--radius-md)]',\n    // Ensure the focus ring of a pressed child sits above its siblings.\n    'ds:[&>*]:relative ds:[&>*:focus-visible]:z-10',\n  ].join(' '),\n  {\n    variants: {\n      orientation: {\n        horizontal: [\n          'ds:flex-row',\n          // Flatten internal corners on children so the outer radius owns\n          // the rounded edges.\n          'ds:[&>*:not(:first-child)]:rounded-s-none',\n          'ds:[&>*:not(:last-child)]:rounded-e-none',\n          // Internal divider — logical so it flips in RTL.\n          'ds:[&>*:not(:first-child)]:border-s',\n          'ds:[&>*:not(:first-child)]:border-border',\n          // The children already own an outer border (from IconButton's\n          // own border in secondary/outline variants). Collapse the doubled\n          // border so we don't get a 2px seam.\n          'ds:[&>*]:border-0',\n        ].join(' '),\n        vertical: [\n          'ds:flex-col',\n          // Vertical groups flow block-wise. Reading direction doesn't\n          // invert vertical stacks in any locale this DS targets, so the\n          // physical `rounded-t/b` is intentional.\n          'ds:[&>*:not(:first-child)]:rounded-t-none',\n          'ds:[&>*:not(:last-child)]:rounded-b-none',\n          'ds:[&>*:not(:first-child)]:border-t',\n          'ds:[&>*:not(:first-child)]:border-border',\n          'ds:[&>*]:border-0',\n        ].join(' '),\n      },\n    },\n    defaultVariants: {\n      orientation: 'horizontal',\n    },\n  },\n);\n\n/* ------------------------------------------------------------------ */\n/* Public types                                                         */\n/* ------------------------------------------------------------------ */\n\nexport type IconButtonGroupRole = 'group' | 'toolbar' | 'radiogroup';\nexport type IconButtonGroupMode =\n  | 'momentary'\n  | 'toggle-single'\n  | 'toggle-multi';\n\ntype SharedPropsBase = {\n  /** Forwarded to every child that does not set its own `size`. */\n  size?: 'sm' | 'md' | 'lg';\n  orientation?: 'horizontal' | 'vertical';\n  /** Disables every child. Uses `aria-disabled` on children (not the HTML\n   *  attribute) so each child still takes focus — matches WAI-ARIA toolbar\n   *  guidance. Visual disabled styling picks up the `aria-disabled:*`\n   *  variant declared on the Button base class. */\n  disabled?: boolean;\n  /** Intent applied to every child that does not set its own `intent`.\n   *  Defaults to `outline` — grouped icon buttons are peers, not a row\n   *  of solid-primary CTAs. */\n  intent?: ButtonIntent;\n  children: ReactNode;\n};\n\n// At least one of `aria-label` / `aria-labelledby` must be present. This\n// discriminated pair makes the TypeScript compiler reject a group with\n// neither — see the a11y acceptance criteria in the user story.\ntype AccessibleNameProps =\n  | { 'aria-label': string; 'aria-labelledby'?: never }\n  | { 'aria-label'?: never; 'aria-labelledby': string };\n\ntype SharedProps = SharedPropsBase & AccessibleNameProps;\n\n// Role + mode combinations are not all valid. Encoded via a discriminated\n// union so the compiler rejects nonsensical pairings (e.g. a multi-select\n// radiogroup).\ntype GroupRoleProps =\n  | { role?: 'group'; mode?: 'momentary' | 'toggle-single' | 'toggle-multi' }\n  | { role: 'toolbar'; mode?: 'momentary' | 'toggle-single' | 'toggle-multi' }\n  | { role: 'radiogroup'; mode: 'toggle-single' };\n\ntype MomentaryProps = SharedProps & {\n  mode?: 'momentary';\n  value?: never;\n  defaultValue?: never;\n  onValueChange?: never;\n};\n\ntype ToggleSingleProps = SharedProps & {\n  mode: 'toggle-single';\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (next: string) => void;\n};\n\ntype ToggleMultiProps = SharedProps & {\n  mode: 'toggle-multi';\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (next: string[]) => void;\n};\n\nexport type IconButtonGroupProps = (\n  | MomentaryProps\n  | ToggleSingleProps\n  | ToggleMultiProps\n) &\n  GroupRoleProps &\n  Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'onChange' | 'children'> &\n  VariantProps<typeof iconButtonGroupVariants>;\n\n/* ------------------------------------------------------------------ */\n/* IconButtonGroup                                                      */\n/* ------------------------------------------------------------------ */\n\nexport const IconButtonGroup = forwardRef<HTMLDivElement, IconButtonGroupProps>(\n  (props, ref) => {\n    const {\n      size,\n      orientation = 'horizontal',\n      role = 'group',\n      mode = 'momentary',\n      disabled = false,\n      intent = 'outline',\n      className,\n      children,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      ...rest\n    } = props as IconButtonGroupProps & { className?: string };\n\n    if (import.meta.env.DEV && !ariaLabel && !ariaLabelledBy) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'IconButtonGroup: `aria-label` or `aria-labelledby` is required for accessibility.',\n      );\n    }\n\n    /* ---- Controlled / uncontrolled value for toggle modes --------- */\n    const [internalValue, setInternalValue] = useState<string | string[]>(\n      () => {\n        if (mode === 'toggle-single') {\n          const p = props as ToggleSingleProps;\n          return p.defaultValue ?? '';\n        }\n        if (mode === 'toggle-multi') {\n          const p = props as ToggleMultiProps;\n          return p.defaultValue ?? [];\n        }\n        return '';\n      },\n    );\n\n    const resolvedValue: string | string[] = (() => {\n      if (mode === 'toggle-single') {\n        const p = props as ToggleSingleProps;\n        return p.value !== undefined ? p.value : internalValue;\n      }\n      if (mode === 'toggle-multi') {\n        const p = props as ToggleMultiProps;\n        return p.value !== undefined ? p.value : internalValue;\n      }\n      return '';\n    })();\n\n    const commitValue = useCallback(\n      (next: string | string[]) => {\n        if (mode === 'toggle-single') {\n          const p = props as ToggleSingleProps;\n          if (p.value === undefined) setInternalValue(next as string);\n          p.onValueChange?.(next as string);\n        } else if (mode === 'toggle-multi') {\n          const p = props as ToggleMultiProps;\n          if (p.value === undefined) setInternalValue(next as string[]);\n          p.onValueChange?.(next as string[]);\n        }\n      },\n      [mode, props],\n    );\n\n    /* ---- Roving tabindex state — only active in toolbar / radiogroup - */\n    const rovingTabindex = role === 'toolbar' || role === 'radiogroup';\n    const buttonsRef = useRef<Array<HTMLButtonElement | null>>([]);\n    const [focusIndex, setFocusIndex] = useState(0);\n\n    const registerIndex = useCallback(\n      (index: number, el: HTMLButtonElement | null) => {\n        buttonsRef.current[index] = el;\n      },\n      [],\n    );\n\n    const rootRef = useRef<HTMLDivElement | null>(null);\n    const [isRTL, setIsRTL] = useState(false);\n    // `useLayoutEffect` so the direction is correct BEFORE the first paint\n    // (otherwise a user pressing an arrow key on the first frame after mount\n    // would hit the default-LTR mapping even in an RTL document).\n    useLayoutEffect(() => {\n      if (typeof window === 'undefined') return;\n      const node = rootRef.current;\n      if (!node) return;\n      // Read the computed direction from the group's own wrapper so a\n      // scoped `dir='rtl'` on any ancestor (not just <html>) flips arrow\n      // navigation. `getComputedStyle` walks up automatically.\n      const dir = window.getComputedStyle(node).direction;\n      setIsRTL(dir === 'rtl');\n    }, []);\n\n    /* ---- Arrow-key navigation for roving tabindex ----------------- */\n    const handleRootKeyDown = useCallback(\n      (event: ReactKeyboardEvent<HTMLDivElement>) => {\n        if (!rovingTabindex) return;\n        const count = buttonsRef.current.filter(Boolean).length;\n        if (count === 0) return;\n\n        const forwardKey =\n          orientation === 'vertical'\n            ? 'ArrowDown'\n            : isRTL\n              ? 'ArrowLeft'\n              : 'ArrowRight';\n        const backwardKey =\n          orientation === 'vertical'\n            ? 'ArrowUp'\n            : isRTL\n              ? 'ArrowRight'\n              : 'ArrowLeft';\n\n        let next: number | null = null;\n        if (event.key === forwardKey) next = (focusIndex + 1) % count;\n        else if (event.key === backwardKey)\n          next = (focusIndex - 1 + count) % count;\n        else if (event.key === 'Home') next = 0;\n        else if (event.key === 'End') next = count - 1;\n\n        if (next === null) return;\n        // Skip over disabled children.\n        const maxAttempts = count;\n        let attempts = 0;\n        let candidate = next;\n        while (attempts < maxAttempts) {\n          const el = buttonsRef.current[candidate];\n          if (el && el.getAttribute('aria-disabled') !== 'true' && !el.disabled) {\n            break;\n          }\n          candidate =\n            event.key === backwardKey || event.key === 'End'\n              ? (candidate - 1 + count) % count\n              : (candidate + 1) % count;\n          attempts += 1;\n        }\n        event.preventDefault();\n        setFocusIndex(candidate);\n        buttonsRef.current[candidate]?.focus();\n        // WAI-ARIA radiogroup pattern: arrow keys MOVE focus AND CHANGE\n        // the selected radio in one action. toolbar pattern (and plain\n        // group) only moves focus.\n        if (role === 'radiogroup' && mode === 'toggle-single') {\n          const child = childArrayRef.current[candidate];\n          if (child && typeof child === 'object' && 'props' in child) {\n            const cValue = (\n              child as ReactElement<{ value?: string }>\n            ).props.value;\n            if (cValue) commitValue(cValue);\n          }\n        }\n      },\n      [rovingTabindex, orientation, isRTL, focusIndex, role, mode, commitValue],\n    );\n\n    /* ---- Build enhanced children ---------------------------------- */\n    const childArray = Children.toArray(children);\n    // Mirror into a ref so the keydown handler (referenced from Memo deps)\n    // can read the latest child list without inflating the dep array.\n    const childArrayRef = useRef<ReturnType<typeof Children.toArray>>([]);\n    childArrayRef.current = childArray;\n\n    const enhanced = childArray.map((child, index) => {\n      if (!isValidElement(child)) {\n        if (import.meta.env.DEV) {\n          // eslint-disable-next-line no-console\n          console.warn(\n            'IconButtonGroup: children should be <IconButton> elements.',\n          );\n        }\n        return child;\n      }\n\n      const childEl = child as ReactElement<\n        IconButtonProps & {\n          value?: string;\n          onClick?: React.MouseEventHandler<HTMLButtonElement>;\n        }\n      >;\n\n      // DEV-time sanity: warn if we got something that isn't an IconButton.\n      // `React.cloneElement` would still work, but IconButton-specific\n      // props (::before target size, forwarded tooltip) wouldn't apply.\n      if (import.meta.env.DEV && childEl.type !== IconButton) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          'IconButtonGroup: each child should be a DS <IconButton>. Other elements break target-size + focus-ring contracts.',\n        );\n      }\n\n      const childValue = childEl.props.value;\n\n      // Compute aria-pressed / aria-checked for toggle modes.\n      const { ariaPressed, ariaChecked } = computeToggleAria(\n        mode,\n        role,\n        childValue,\n        resolvedValue,\n      );\n\n      const groupDisabled = disabled === true;\n      const childDisabled = childEl.props.disabled === true;\n\n      // Click handling — wrap so aria-disabled (group-level) blocks\n      // activation, then forward to the child's own onClick.\n      const wrappedOnClick: React.MouseEventHandler<HTMLButtonElement> = (\n        event,\n      ) => {\n        // aria-disabled is advisory; the native click still fires. Block\n        // it explicitly when the GROUP (not the child) is disabled.\n        if (groupDisabled) {\n          event.preventDefault();\n          event.stopPropagation();\n          return;\n        }\n        // Forward to the child's own handler first so consumers can run\n        // analytics / preventDefault.\n        childEl.props.onClick?.(event);\n        if (event.defaultPrevented) return;\n        if (!childValue) return;\n        if (mode === 'toggle-single') {\n          // Contract: exactly one pressed. Clicking the pressed one is a\n          // no-op. This matches Radix ToggleGroup type='single' and the\n          // radiogroup pattern.\n          if (resolvedValue === childValue) return;\n          commitValue(childValue);\n        } else if (mode === 'toggle-multi') {\n          const list = resolvedValue as string[];\n          const next = list.includes(childValue)\n            ? list.filter((v) => v !== childValue)\n            : [...list, childValue];\n          commitValue(next);\n        }\n      };\n\n      // cloneElement's typed overload rejects `ref` as a prop, so we\n      // build the override bag as `unknown` and cast to the element's\n      // prop type. React at runtime routes `ref` via its usual channel.\n      const setMergedRef = (node: HTMLButtonElement | null) => {\n        registerIndex(index, node);\n        const originalRef = (\n          childEl as unknown as { ref?: React.Ref<HTMLButtonElement> }\n        ).ref;\n        if (typeof originalRef === 'function') originalRef(node);\n        else if (\n          originalRef !== null &&\n          originalRef !== undefined &&\n          typeof originalRef === 'object'\n        ) {\n          (originalRef as React.MutableRefObject<HTMLButtonElement | null>).current =\n            node;\n        }\n      };\n\n      // Per the user story: group-level disabled injects `aria-disabled`\n      // so the child stays focusable; child-level `disabled` still uses\n      // the HTML attribute (child's own contract). When both are true\n      // we leave the HTML disabled in place (strictest cue wins).\n      const ariaDisabled = groupDisabled && !childDisabled ? true : undefined;\n\n      // If the group is disabled OR we are in a toggle mode, we need the\n      // wrapped click handler. In pure momentary mode with no group\n      // disable, the child's own onClick is passed through unchanged.\n      const needsWrappedClick = mode !== 'momentary' || groupDisabled;\n\n      const overrides = {\n        intent: childEl.props.intent ?? intent,\n        size: childEl.props.size ?? size,\n        disabled: childDisabled,\n        'aria-disabled': ariaDisabled,\n        onClick: needsWrappedClick ? wrappedOnClick : childEl.props.onClick,\n        'aria-pressed': ariaPressed,\n        'aria-checked': ariaChecked,\n        // When the group is a radiogroup, children must be `role=\"radio\"`\n        // so screen readers announce them as radio buttons and so\n        // `getByRole('radio')` works in tests. The button element is\n        // re-purposed as a radio; `aria-checked` above carries the state.\n        role: role === 'radiogroup' ? 'radio' : undefined,\n        tabIndex: rovingTabindex ? (index === focusIndex ? 0 : -1) : undefined,\n        onFocus: (ev: React.FocusEvent<HTMLButtonElement>) => {\n          if (rovingTabindex) setFocusIndex(index);\n          childEl.props.onFocus?.(ev);\n        },\n        ref: setMergedRef,\n      } as unknown as Partial<IconButtonProps>;\n\n      return cloneElement(childEl, overrides);\n    });\n\n    const mergedRootRef = (node: HTMLDivElement | null) => {\n      rootRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref && typeof ref === 'object') {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      }\n    };\n\n    return (\n      <div\n        ref={mergedRootRef}\n        role={role}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-orientation={role === 'toolbar' ? orientation : undefined}\n        onKeyDown={handleRootKeyDown}\n        className={iconButtonGroupVariants({ orientation, className })}\n        data-component=\"icon-button-group\"\n        {...rest}\n      >\n        {enhanced}\n      </div>\n    );\n  },\n);\n\nIconButtonGroup.displayName = 'IconButtonGroup';\n\n/* ------------------------------------------------------------------ */\n/* Helpers                                                              */\n/* ------------------------------------------------------------------ */\n\nfunction computeToggleAria(\n  mode: IconButtonGroupMode,\n  role: IconButtonGroupRole,\n  childValue: string | undefined,\n  resolvedValue: string | string[],\n): { ariaPressed?: boolean; ariaChecked?: boolean } {\n  if (mode === 'momentary' || !childValue) return {};\n\n  const isActive =\n    mode === 'toggle-multi'\n      ? (resolvedValue as string[]).includes(childValue)\n      : resolvedValue === childValue;\n\n  // radiogroup uses aria-checked; toolbar/group use aria-pressed.\n  if (role === 'radiogroup') {\n    return { ariaChecked: isActive };\n  }\n  return { ariaPressed: isActive };\n}\n\n"],"names":["iconButtonGroupVariants","cva","IconButtonGroup","forwardRef","props","ref","size","orientation","role","mode","disabled","intent","className","children","ariaLabel","ariaLabelledBy","rest","internalValue","setInternalValue","useState","resolvedValue","p","commitValue","useCallback","next","_a","_b","rovingTabindex","buttonsRef","useRef","focusIndex","setFocusIndex","registerIndex","index","el","rootRef","isRTL","setIsRTL","useLayoutEffect","node","dir","handleRootKeyDown","event","count","forwardKey","backwardKey","maxAttempts","attempts","candidate","child","childArrayRef","cValue","childArray","Children","enhanced","isValidElement","childEl","childValue","ariaPressed","ariaChecked","computeToggleAria","groupDisabled","childDisabled","wrappedOnClick","list","v","setMergedRef","originalRef","ariaDisabled","needsWrappedClick","overrides","ev","cloneElement","jsx","isActive"],"mappings":"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"}

package/dist/_chunks/{kbd-DTcIjYA7.js → kbd-8baVw3KU.js}

@@ -34,7 +34,7 @@ const S = {
   // ←
   ArrowRight: "→"
   // →
-}, E = {
+}, k = {
   Meta: "Ctrl",
   // Windows/Linux consumers usually care about the Control equivalent
   Control: "Ctrl",
@@ -50,7 +50,7 @@ const S = {
   ArrowDown: "↓",
   ArrowLeft: "←",
   ArrowRight: "→"
-}, N = {
+}, E = {
   Meta: "Command",
   Control: "Control",
   Alt: "Option",
@@ -66,14 +66,14 @@ const S = {
   ArrowLeft: "Left arrow",
   ArrowRight: "Right arrow"
 };
-function j(n) {
+function N(n) {
   return n === "Meta" || n === "Control" || n === "Alt" || n === "Shift" || n === "Enter" || n === "Escape" || n === "Space" || n === "Tab" || n === "Delete" || n === "Backspace" || n === "ArrowUp" || n === "ArrowDown" || n === "ArrowLeft" || n === "ArrowRight";
 }
 function w(n, r) {
-  return j(n) ? (r ? S : E)[n] : n;
+  return N(n) ? (r ? S : k)[n] : n;
 }
 function A(n) {
-  return j(n) ? N[n] : n;
+  return N(n) ? E[n] : n;
 }
 const h = x(
   [
@@ -115,33 +115,35 @@ const h = x(
   ].join(" ")
 ), $ = z((n, r) => {
   const {
-    size: l = "md",
-    intensity: d = "outline",
-    separator: g = "none",
-    glyphMap: t,
+    size: d = "md",
+    intensity: l = "outline",
+    separator: b = "none",
+    glyphMap: s,
     className: m,
     ...p
-  } = n, { t: f } = R(), [b, k] = C(!1);
+  } = n, { t: f } = R(), [g, j] = C(!1);
   if (T(() => {
-    k(K());
+    j(K());
   }, []), "children" in n && n.children !== void 0)
     return /* @__PURE__ */ a(
       "kbd",
       {
         ref: r,
-        className: [h({ size: l, intensity: d }), m].filter(Boolean).join(" "),
+        className: [h({ size: d, intensity: l }), m].filter(Boolean).join(" "),
+        "data-component": "kbd",
         ...p,
         children: n.children
       }
     );
   const o = n.keys;
   if (o.length === 1) {
-    const e = o[0], s = t == null ? void 0 : t[e], c = (s == null ? void 0 : s.glyph) ?? w(e, b), i = (s == null ? void 0 : s.spoken) ?? A(e);
+    const e = o[0], t = s == null ? void 0 : s[e], c = (t == null ? void 0 : t.glyph) ?? w(e, g), i = (t == null ? void 0 : t.spoken) ?? A(e);
     return /* @__PURE__ */ u(
       "kbd",
       {
         ref: r,
-        className: [h({ size: l, intensity: d }), m].filter(Boolean).join(" "),
+        className: [h({ size: d, intensity: l }), m].filter(Boolean).join(" "),
+        "data-component": "kbd",
         ...p,
         children: [
           /* @__PURE__ */ a("span", { "aria-hidden": "true", children: c }),
@@ -151,30 +153,31 @@ const h = x(
     );
   }
   const v = o.map((e) => {
-    var s;
-    return ((s = t == null ? void 0 : t[e]) == null ? void 0 : s.spoken) ?? A(e);
+    var t;
+    return ((t = s == null ? void 0 : s[e]) == null ? void 0 : t.spoken) ?? A(e);
   }).join(" ");
-  if (g === "none")
+  if (b === "none")
     return /* @__PURE__ */ u(
       "kbd",
       {
         ref: r,
-        className: [h({ size: l, intensity: d }), m].filter(Boolean).join(" "),
+        className: [h({ size: d, intensity: l }), m].filter(Boolean).join(" "),
+        "data-component": "kbd",
         ...p,
         children: [
-          o.map((e, s) => {
+          o.map((e, t) => {
             var i;
-            const c = ((i = t == null ? void 0 : t[e]) == null ? void 0 : i.glyph) ?? w(e, b);
-            return /* @__PURE__ */ a("span", { "aria-hidden": "true", children: c }, `${e}-${s}`);
+            const c = ((i = s == null ? void 0 : s[e]) == null ? void 0 : i.glyph) ?? w(e, g);
+            return /* @__PURE__ */ a("span", { "aria-hidden": "true", children: c }, `${e}-${t}`);
           }),
           /* @__PURE__ */ a("span", { className: "ds:sr-only", children: v })
         ]
       }
     );
-  const D = g === "plus" ? f("kbd.plus", "+") : f("kbd.then", "then"), B = g === "then" ? f("kbd.pressThen", "Press {{keys}}", {
+  const D = b === "plus" ? f("kbd.plus", "+") : f("kbd.then", "then"), B = b === "then" ? f("kbd.pressThen", "Press {{keys}}", {
     keys: o.map((e) => {
-      var s;
-      return ((s = t == null ? void 0 : t[e]) == null ? void 0 : s.spoken) ?? A(e);
+      var t;
+      return ((t = s == null ? void 0 : s[e]) == null ? void 0 : t.spoken) ?? A(e);
     }).join(` ${f("kbd.thenSpoken", "then")} `)
   }) : v;
   return /* @__PURE__ */ u(
@@ -182,22 +185,23 @@ const h = x(
     {
       ref: r,
       className: [U(), m].filter(Boolean).join(" "),
+      "data-component": "kbd",
       ...p,
       children: [
         /* @__PURE__ */ a("span", { className: "ds:sr-only", children: B }),
-        o.map((e, s) => {
+        o.map((e, t) => {
           var i;
-          const c = ((i = t == null ? void 0 : t[e]) == null ? void 0 : i.glyph) ?? w(e, b);
+          const c = ((i = s == null ? void 0 : s[e]) == null ? void 0 : i.glyph) ?? w(e, g);
           return /* @__PURE__ */ u(L, { children: [
             /* @__PURE__ */ a(
               "kbd",
               {
                 "aria-hidden": "true",
-                className: h({ size: l, intensity: d }),
+                className: h({ size: d, intensity: l }),
                 children: c
               }
             ),
-            s < o.length - 1 ? /* @__PURE__ */ a(
+            t < o.length - 1 ? /* @__PURE__ */ a(
               "span",
               {
                 "aria-hidden": "true",
@@ -205,16 +209,16 @@ const h = x(
                 children: D
               }
             ) : null
-          ] }, `${e}-${s}`);
+          ] }, `${e}-${t}`);
         })
       ]
     }
   );
 });
 $.displayName = "Kbd";
-const _ = { mac: S, win: E, spoken: N };
+const _ = { mac: S, win: k, spoken: E };
 export {
   $ as K,
   _ as k
 };
-//# sourceMappingURL=kbd-DTcIjYA7.js.map
+//# sourceMappingURL=kbd-8baVw3KU.js.map

package/dist/_chunks/kbd-8baVw3KU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd-8baVw3KU.js","sources":["../../src/components/kbd/kbd.tsx"],"sourcesContent":["import {\n  forwardRef,\n  Fragment,\n  useEffect,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\n\n/* ------------------------------------------------------------------ */\n/* Platform detection                                                   */\n/* ------------------------------------------------------------------ */\n\nfunction detectMacLike(): boolean {\n  if (typeof navigator === 'undefined') return false;\n  const uaData = (navigator as unknown as {\n    userAgentData?: { platform?: string };\n  }).userAgentData;\n  const platformString = uaData?.platform ?? navigator.platform ?? '';\n  return /mac/i.test(platformString);\n}\n\n/* ------------------------------------------------------------------ */\n/* Glyph + accessible-name maps                                        */\n/* ------------------------------------------------------------------ */\n\nexport type KbdNamedKey =\n  | 'Meta'\n  | 'Control'\n  | 'Alt'\n  | 'Shift'\n  | 'Enter'\n  | 'Escape'\n  | 'Space'\n  | 'Tab'\n  | 'Delete'\n  | 'Backspace'\n  | 'ArrowUp'\n  | 'ArrowDown'\n  | 'ArrowLeft'\n  | 'ArrowRight';\n\n/**\n * Named keys we understand — anything else is passed through verbatim.\n * Glyph rendering is platform-aware; accessible names spell the key out\n * so screen readers say \"Command K\" instead of \"black apple K\".\n */\nconst MAC_GLYPHS: Record<KbdNamedKey, string> = {\n  Meta: '\\u2318',       // ⌘\n  Control: '\\u2303',    // ⌃\n  Alt: '\\u2325',        // ⌥\n  Shift: '\\u21E7',      // ⇧\n  Enter: '\\u23CE',      // ⏎\n  Escape: 'Esc',\n  Space: 'Space',\n  Tab: '\\u21E5',        // ⇥\n  Delete: '\\u2326',     // ⌦\n  Backspace: '\\u232B',  // ⌫\n  ArrowUp: '\\u2191',    // ↑\n  ArrowDown: '\\u2193',  // ↓\n  ArrowLeft: '\\u2190',  // ←\n  ArrowRight: '\\u2192', // →\n};\n\nconst WIN_GLYPHS: Record<KbdNamedKey, string> = {\n  Meta: 'Ctrl', // Windows/Linux consumers usually care about the Control equivalent\n  Control: 'Ctrl',\n  Alt: 'Alt',\n  Shift: 'Shift',\n  Enter: 'Enter',\n  Escape: 'Esc',\n  Space: 'Space',\n  Tab: 'Tab',\n  Delete: 'Del',\n  Backspace: 'Backspace',\n  ArrowUp: '\\u2191',\n  ArrowDown: '\\u2193',\n  ArrowLeft: '\\u2190',\n  ArrowRight: '\\u2192',\n};\n\n/** Spelled-out names used for the aria-label — never platform-swapped. */\nconst SPOKEN_NAMES: Record<KbdNamedKey, string> = {\n  Meta: 'Command',\n  Control: 'Control',\n  Alt: 'Option',\n  Shift: 'Shift',\n  Enter: 'Enter',\n  Escape: 'Escape',\n  Space: 'Space',\n  Tab: 'Tab',\n  Delete: 'Delete',\n  Backspace: 'Backspace',\n  ArrowUp: 'Up arrow',\n  ArrowDown: 'Down arrow',\n  ArrowLeft: 'Left arrow',\n  ArrowRight: 'Right arrow',\n};\n\nfunction isNamedKey(key: string): key is KbdNamedKey {\n  return (\n    key === 'Meta' ||\n    key === 'Control' ||\n    key === 'Alt' ||\n    key === 'Shift' ||\n    key === 'Enter' ||\n    key === 'Escape' ||\n    key === 'Space' ||\n    key === 'Tab' ||\n    key === 'Delete' ||\n    key === 'Backspace' ||\n    key === 'ArrowUp' ||\n    key === 'ArrowDown' ||\n    key === 'ArrowLeft' ||\n    key === 'ArrowRight'\n  );\n}\n\nfunction glyphFor(key: string, isMac: boolean): string {\n  if (isNamedKey(key)) {\n    return (isMac ? MAC_GLYPHS : WIN_GLYPHS)[key];\n  }\n  return key;\n}\n\nfunction spokenFor(key: string): string {\n  if (isNamedKey(key)) return SPOKEN_NAMES[key];\n  return key;\n}\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                 */\n/* ------------------------------------------------------------------ */\n\nconst kbdVariants = cva(\n  [\n    'ds:inline-flex ds:items-center ds:justify-center',\n    'ds:font-[family-name:var(--font-mono)]',\n    'ds:tabular-nums',\n    'ds:rounded-[var(--radius-sm)]',\n    'ds:select-none',\n    // Tight minimum size so single-key pills never collapse.\n    'ds:min-inline-size-[1.5em] ds:min-block-size-[1.5em]',\n  ].join(' '),\n  {\n    variants: {\n      size: {\n        sm: 'ds:text-[length:var(--font-size-xs)] ds:ps-[calc(var(--spacing-xs)/1.5)] ds:pe-[calc(var(--spacing-xs)/1.5)]',\n        md: 'ds:text-[length:var(--font-size-xs)] ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)]',\n        lg: 'ds:text-[length:var(--font-size-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]',\n      },\n      intensity: {\n        outline: [\n          'ds:bg-[var(--background)]',\n          'ds:border ds:border-[color:var(--border)]',\n          'ds:text-[color:var(--foreground)]',\n        ].join(' '),\n        solid: [\n          'ds:bg-[var(--muted)]',\n          'ds:text-[color:var(--foreground)]',\n        ].join(' '),\n      },\n    },\n    defaultVariants: { size: 'md', intensity: 'outline' },\n  },\n);\n\nconst groupVariants = cva(\n  [\n    'ds:inline-flex ds:items-center',\n    'ds:gap-[calc(var(--spacing-xs)/2)]',\n    // Group shouldn't visually render as a pill itself — just holds pills.\n    'ds:font-[family-name:var(--font-mono)]',\n  ].join(' '),\n);\n\n/* ------------------------------------------------------------------ */\n/* Public types                                                        */\n/* ------------------------------------------------------------------ */\n\nexport type KbdSeparator = 'none' | 'plus' | 'then';\n\n/**\n * Optional override map for keys. Consumers can rewrite the visible\n * glyph or the spoken name for product-specific shortcuts (e.g. mapping\n * a \"Brand\" modifier to a special icon).\n */\nexport interface KbdGlyphOverride {\n  glyph?: string;\n  spoken?: string;\n}\n\ninterface KbdBaseProps\n  extends Omit<HTMLAttributes<HTMLElement>, 'children'>,\n    VariantProps<typeof kbdVariants> {\n  separator?: KbdSeparator;\n  glyphMap?: Partial<Record<KbdNamedKey | string, KbdGlyphOverride>>;\n}\n\ninterface KbdWithKeysProps extends KbdBaseProps {\n  keys: Array<KbdNamedKey | string>;\n  children?: never;\n}\n\ninterface KbdWithChildrenProps extends KbdBaseProps {\n  keys?: never;\n  children: ReactNode;\n}\n\nexport type KbdProps = KbdWithKeysProps | KbdWithChildrenProps;\n\n/* ------------------------------------------------------------------ */\n/* Component                                                            */\n/* ------------------------------------------------------------------ */\n\nexport const Kbd = forwardRef<HTMLElement, KbdProps>((props, ref) => {\n  const {\n    size = 'md',\n    intensity = 'outline',\n    separator = 'none',\n    glyphMap,\n    className,\n    ...rest\n  } = props as KbdBaseProps & { className?: string };\n\n  const { t } = useTranslation();\n\n  const [isMac, setIsMac] = useState(false);\n  useEffect(() => {\n    setIsMac(detectMacLike());\n  }, []);\n\n  // Children path: pass-through rendering. Still a semantic <kbd> so\n  // AT + search engines classify it correctly.\n  if ('children' in props && props.children !== undefined) {\n    return (\n      <kbd\n        ref={ref}\n        className={[kbdVariants({ size, intensity }), className]\n          .filter(Boolean)\n          .join(' ')}\n        data-component=\"kbd\"\n        {...rest}\n      >\n        {(props as KbdWithChildrenProps).children}\n      </kbd>\n    );\n  }\n\n  const keys = (props as KbdWithKeysProps).keys;\n\n  // Single-key shortcut with no separator — render as one pill.\n  // axe's `aria-prohibited-attr` rule forbids `aria-label` on <kbd>\n  // elements (no valid implicit role), so the spoken name is delivered\n  // via a visually-hidden sr-only span instead.\n  if (keys.length === 1) {\n    const k = keys[0];\n    const override = glyphMap?.[k];\n    const glyph = override?.glyph ?? glyphFor(k, isMac);\n    const spoken = override?.spoken ?? spokenFor(k);\n    return (\n      <kbd\n        ref={ref}\n        className={[kbdVariants({ size, intensity }), className]\n          .filter(Boolean)\n          .join(' ')}\n        data-component=\"kbd\"\n        {...rest}\n      >\n        <span aria-hidden=\"true\">{glyph}</span>\n        <span className=\"ds:sr-only\">{spoken}</span>\n      </kbd>\n    );\n  }\n\n  // Multi-key shortcut.\n  const spokenAll = keys\n    .map((k) => glyphMap?.[k]?.spoken ?? spokenFor(k))\n    .join(' ');\n\n  // `none`: single combined pill (e.g. \"⌘K\" rendered together).\n  if (separator === 'none') {\n    return (\n      <kbd\n        ref={ref}\n        className={[kbdVariants({ size, intensity }), className]\n          .filter(Boolean)\n          .join(' ')}\n        data-component=\"kbd\"\n        {...rest}\n      >\n        {keys.map((k, i) => {\n          const glyph = glyphMap?.[k]?.glyph ?? glyphFor(k, isMac);\n          return (\n            <span key={`${k}-${i}`} aria-hidden=\"true\">\n              {glyph}\n            </span>\n          );\n        })}\n        <span className=\"ds:sr-only\">{spokenAll}</span>\n      </kbd>\n    );\n  }\n\n  // `plus` / `then`: multiple sibling <kbd> pills inside a wrapping <kbd>.\n  const separatorText =\n    separator === 'plus' ? t('kbd.plus', '+') : t('kbd.then', 'then');\n\n  const spokenAnnouncement =\n    separator === 'then'\n      ? t('kbd.pressThen', 'Press {{keys}}', {\n          keys: keys\n            .map((k) => glyphMap?.[k]?.spoken ?? spokenFor(k))\n            .join(` ${t('kbd.thenSpoken', 'then')} `),\n        })\n      : spokenAll;\n\n  return (\n    <kbd\n      ref={ref}\n      className={[groupVariants(), className].filter(Boolean).join(' ')}\n      data-component=\"kbd\"\n      {...rest}\n    >\n      <span className=\"ds:sr-only\">{spokenAnnouncement}</span>\n      {keys.map((k, i) => {\n        const glyph = glyphMap?.[k]?.glyph ?? glyphFor(k, isMac);\n        return (\n          <Fragment key={`${k}-${i}`}>\n            <kbd\n              aria-hidden=\"true\"\n              className={kbdVariants({ size, intensity })}\n            >\n              {glyph}\n            </kbd>\n            {i < keys.length - 1 ? (\n              <span\n                aria-hidden=\"true\"\n                className=\"ds:text-[color:var(--muted-foreground)] ds:text-[length:var(--font-size-xs)]\"\n              >\n                {separatorText}\n              </span>\n            ) : null}\n          </Fragment>\n        );\n      })}\n    </kbd>\n  );\n});\n\nKbd.displayName = 'Kbd';\n\n/* ------------------------------------------------------------------ */\n/* Named helpers                                                        */\n/* ------------------------------------------------------------------ */\n\nexport const kbdGlyphs = { mac: MAC_GLYPHS, win: WIN_GLYPHS, spoken: SPOKEN_NAMES };\n"],"names":["detectMacLike","uaData","platformString","MAC_GLYPHS","WIN_GLYPHS","SPOKEN_NAMES","isNamedKey","key","glyphFor","isMac","spokenFor","kbdVariants","cva","groupVariants","Kbd","forwardRef","props","ref","size","intensity","separator","glyphMap","className","rest","t","useTranslation","setIsMac","useState","useEffect","jsx","keys","k","override","glyph","spoken","jsxs","spokenAll","_a","i","separatorText","spokenAnnouncement","Fragment","kbdGlyphs"],"mappings":"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"}

package/dist/_chunks/{key-value-pair-Cm-pSE6k.js → key-value-pair-C9hpjC_B.js}

@@ -2,7 +2,7 @@ import { jsxs as l, jsx as a } from "react/jsx-runtime";
 import { forwardRef as C, useState as c, useCallback as g } from "react";
 import { c as V } from "./index-D2ZczOXr.js";
 import { useTranslation as N } from "react-i18next";
-import { I as b } from "./icon-button-SWpSs9S6.js";
+import { I as b } from "./icon-button-CNjWCD1X.js";
 import { C as P } from "./check-DPdL_Sm7.js";
 import { C as w } from "./copy-B00HK7tj.js";
 const z = V("ds:flex", {
@@ -19,23 +19,23 @@ const z = V("ds:flex", {
   ({
     label: i,
     value: o,
-    layout: r = "horizontal",
+    layout: n = "horizontal",
     mono: d = !1,
     copyable: m = !1,
     copyText: p,
     className: u,
     ...f
   }, y) => {
-    const { t: e } = N(), [h, n] = c(!1), [x, s] = c(""), t = p ?? (typeof o == "string" ? o : void 0), k = g(async () => {
+    const { t: e } = N(), [h, r] = c(!1), [k, s] = c(""), t = p ?? (typeof o == "string" ? o : void 0), v = g(async () => {
       if (t)
         try {
-          await navigator.clipboard.writeText(t), n(!0), s(e("ui.keyValuePair.copied")), setTimeout(() => {
-            n(!1), s("");
+          await navigator.clipboard.writeText(t), r(!0), s(e("ui.keyValuePair.copied")), setTimeout(() => {
+            r(!1), s("");
           }, 2e3);
         } catch {
           s(e("ui.keyValuePair.notAvailable")), setTimeout(() => s(""), 3e3);
         }
-    }, [t, e]), v = [
+    }, [t, e]), x = [
       "type-body text-foreground min-w-0 shrink [unicode-bidi:isolate]",
       d ? "font-[family-name:var(--font-mono)]" : ""
     ].filter(Boolean).join(" ");
@@ -43,26 +43,27 @@ const z = V("ds:flex", {
       "div",
       {
         ref: y,
-        className: z({ layout: r, className: u }),
+        className: z({ layout: n, className: u }),
+        "data-component": "key-value-pair",
         ...f,
         children: [
           /* @__PURE__ */ l("span", { className: "type-label ds:text-muted-foreground ds:shrink-0", children: [
             i,
             /* @__PURE__ */ a("span", { className: "ds:sr-only", children: ": " })
           ] }),
-          /* @__PURE__ */ a("span", { className: v, children: o }),
+          /* @__PURE__ */ a("span", { className: x, children: o }),
           m && /* @__PURE__ */ a(
             b,
             {
               icon: h ? /* @__PURE__ */ a(P, {}) : /* @__PURE__ */ a(w, {}),
               size: "sm",
               "aria-label": e("ui.keyValuePair.copy", { label: i }),
-              onClick: k,
+              onClick: v,
               intent: "ghost",
-              className: r === "horizontal" ? "ds:ms-auto ds:shrink-0" : "ds:self-start"
+              className: n === "horizontal" ? "ds:ms-auto ds:shrink-0" : "ds:self-start"
             }
           ),
-          /* @__PURE__ */ a("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: x })
+          /* @__PURE__ */ a("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: k })
         ]
       }
     );
@@ -72,4 +73,4 @@ T.displayName = "KeyValuePair";
 export {
   T as K
 };
-//# sourceMappingURL=key-value-pair-Cm-pSE6k.js.map
+//# sourceMappingURL=key-value-pair-C9hpjC_B.js.map

package/dist/_chunks/{key-value-pair-Cm-pSE6k.js.map → key-value-pair-C9hpjC_B.js.map}

@@ -1 +1 @@
-{"version":3,"file":"key-value-pair-Cm-pSE6k.js","sources":["../../src/components/key-value-pair/key-value-pair.tsx"],"sourcesContent":["import { forwardRef, useState, useCallback } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { Copy, Check } from 'lucide-react';\nimport { IconButton } from '../button/icon-button';\n\n/* ------------------------------------------------------------------ */\n/* CVA — root wrapper                                                   */\n/* ------------------------------------------------------------------ */\n\nconst keyValuePairVariants = cva('ds:flex', {\n  variants: {\n    layout: {\n      horizontal: 'ds:flex-row ds:items-center ds:gap-[var(--spacing-sm)]',\n      vertical: 'ds:flex-col ds:gap-[var(--spacing-xs)]',\n    },\n  },\n  defaultVariants: {\n    layout: 'horizontal',\n  },\n});\n\n/* ------------------------------------------------------------------ */\n/* KeyValuePairProps                                                    */\n/* ------------------------------------------------------------------ */\n\nexport interface KeyValuePairProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof keyValuePairVariants> {\n  /** The label (term) */\n  label: string;\n  /** The value — accepts plain text, Badge, Tag, monospace code, any ReactNode */\n  value: React.ReactNode;\n  /** Layout direction */\n  layout?: 'horizontal' | 'vertical';\n  /** Render value in monospace font */\n  mono?: boolean;\n  /** Show a copy-to-clipboard IconButton beside the value */\n  copyable?: boolean;\n  /** The text to copy — defaults to `value` if value is a string */\n  copyText?: string;\n}\n\n/* ------------------------------------------------------------------ */\n/* KeyValuePair                                                         */\n/* ------------------------------------------------------------------ */\n\nexport const KeyValuePair = forwardRef<HTMLDivElement, KeyValuePairProps>(\n  (\n    {\n      label,\n      value,\n      layout = 'horizontal',\n      mono = false,\n      copyable = false,\n      copyText,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n    const [copied, setCopied] = useState(false);\n    const [announcement, setAnnouncement] = useState('');\n\n    const textToCopy = copyText ?? (typeof value === 'string' ? value : undefined);\n\n    const handleCopy = useCallback(async () => {\n      if (!textToCopy) {\n        if (import.meta.env.DEV) {\n          console.warn(\n            'KeyValuePair: copyable is true but no copyText was provided and value is not a string. Copy no-op.',\n          );\n        }\n        return;\n      }\n\n      try {\n        await navigator.clipboard.writeText(textToCopy);\n        setCopied(true);\n        setAnnouncement(t('ui.keyValuePair.copied'));\n        setTimeout(() => {\n          setCopied(false);\n          setAnnouncement('');\n        }, 2000);\n      } catch {\n        setAnnouncement(t('ui.keyValuePair.notAvailable'));\n        setTimeout(() => setAnnouncement(''), 3000);\n      }\n    }, [textToCopy, t]);\n\n    const valueClasses = [\n      'type-body text-foreground min-w-0 shrink [unicode-bidi:isolate]',\n      mono ? 'font-[family-name:var(--font-mono)]' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div\n        ref={ref}\n        className={keyValuePairVariants({ layout, className })}\n        {...props}\n      >\n        <span className=\"type-label ds:text-muted-foreground ds:shrink-0\">\n          {label}\n          <span className=\"ds:sr-only\">: </span>\n        </span>\n        <span className={valueClasses}>{value}</span>\n        {copyable && (\n          <IconButton\n            icon={copied ? <Check /> : <Copy />}\n            size=\"sm\"\n            aria-label={t('ui.keyValuePair.copy', { label })}\n            onClick={handleCopy}\n            intent=\"ghost\"\n            className={layout === 'horizontal' ? 'ds:ms-auto ds:shrink-0' : 'ds:self-start'}\n          />\n        )}\n        <span role=\"status\" aria-live=\"polite\" className=\"ds:sr-only\">\n          {announcement}\n        </span>\n      </div>\n    );\n  },\n);\n\nKeyValuePair.displayName = 'KeyValuePair';\n"],"names":["keyValuePairVariants","cva","KeyValuePair","forwardRef","label","value","layout","mono","copyable","copyText","className","props","ref","t","useTranslation","copied","setCopied","useState","announcement","setAnnouncement","textToCopy","handleCopy","useCallback","valueClasses","jsxs","jsx","IconButton","Check","Copy"],"mappings":";;;;;;;AAUA,MAAMA,IAAuBC,EAAI,WAAW;AAAA,EAC1C,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA,IAAA;AAAA,EACZ;AAAA,EAEF,iBAAiB;AAAA,IACf,QAAQ;AAAA,EAAA;AAEZ,CAAC,GA2BYC,IAAeC;AAAA,EAC1B,CACE;AAAA,IACE,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACR,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAAcC,CAAe,IAAIF,EAAS,EAAE,GAE7CG,IAAaX,MAAa,OAAOJ,KAAU,WAAWA,IAAQ,SAE9DgB,IAAaC,EAAY,YAAY;AACzC,UAAKF;AASL,YAAI;AACF,gBAAM,UAAU,UAAU,UAAUA,CAAU,GAC9CJ,EAAU,EAAI,GACdG,EAAgBN,EAAE,wBAAwB,CAAC,GAC3C,WAAW,MAAM;AACf,YAAAG,EAAU,EAAK,GACfG,EAAgB,EAAE;AAAA,UACpB,GAAG,GAAI;AAAA,QACT,QAAQ;AACN,UAAAA,EAAgBN,EAAE,8BAA8B,CAAC,GACjD,WAAW,MAAMM,EAAgB,EAAE,GAAG,GAAI;AAAA,QAC5C;AAAA,IACF,GAAG,CAACC,GAAYP,CAAC,CAAC,GAEZU,IAAe;AAAA,MACnB;AAAA,MACAhB,IAAO,wCAAwC;AAAA,IAAA,EAE9C,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,gBAAAiB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAZ;AAAA,QACA,WAAWZ,EAAqB,EAAE,QAAAM,GAAQ,WAAAI,GAAW;AAAA,QACpD,GAAGC;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAa,EAAC,QAAA,EAAK,WAAU,mDACb,UAAA;AAAA,YAAApB;AAAA,8BACA,QAAA,EAAK,WAAU,cAAa,UAAA,MAAE;AAAA,UAAA,GACjC;AAAA,4BACC,QAAA,EAAK,WAAWmB,GAAe,UAAAlB,GAAM;AAAA,UACrCG,KACC,gBAAAiB;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAMX,IAAS,gBAAAU,EAACE,GAAA,CAAA,CAAM,sBAAMC,GAAA,EAAK;AAAA,cACjC,MAAK;AAAA,cACL,cAAYf,EAAE,wBAAwB,EAAE,OAAAT,GAAO;AAAA,cAC/C,SAASiB;AAAA,cACT,QAAO;AAAA,cACP,WAAWf,MAAW,eAAe,2BAA2B;AAAA,YAAA;AAAA,UAAA;AAAA,UAGpE,gBAAAmB,EAAC,UAAK,MAAK,UAAS,aAAU,UAAS,WAAU,cAC9C,UAAAP,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEAhB,EAAa,cAAc;"}
+{"version":3,"file":"key-value-pair-C9hpjC_B.js","sources":["../../src/components/key-value-pair/key-value-pair.tsx"],"sourcesContent":["import { forwardRef, useState, useCallback } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { Copy, Check } from 'lucide-react';\nimport { IconButton } from '../button/icon-button';\n\n/* ------------------------------------------------------------------ */\n/* CVA — root wrapper                                                   */\n/* ------------------------------------------------------------------ */\n\nconst keyValuePairVariants = cva('ds:flex', {\n  variants: {\n    layout: {\n      horizontal: 'ds:flex-row ds:items-center ds:gap-[var(--spacing-sm)]',\n      vertical: 'ds:flex-col ds:gap-[var(--spacing-xs)]',\n    },\n  },\n  defaultVariants: {\n    layout: 'horizontal',\n  },\n});\n\n/* ------------------------------------------------------------------ */\n/* KeyValuePairProps                                                    */\n/* ------------------------------------------------------------------ */\n\nexport interface KeyValuePairProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof keyValuePairVariants> {\n  /** The label (term) */\n  label: string;\n  /** The value — accepts plain text, Badge, Tag, monospace code, any ReactNode */\n  value: React.ReactNode;\n  /** Layout direction */\n  layout?: 'horizontal' | 'vertical';\n  /** Render value in monospace font */\n  mono?: boolean;\n  /** Show a copy-to-clipboard IconButton beside the value */\n  copyable?: boolean;\n  /** The text to copy — defaults to `value` if value is a string */\n  copyText?: string;\n}\n\n/* ------------------------------------------------------------------ */\n/* KeyValuePair                                                         */\n/* ------------------------------------------------------------------ */\n\nexport const KeyValuePair = forwardRef<HTMLDivElement, KeyValuePairProps>(\n  (\n    {\n      label,\n      value,\n      layout = 'horizontal',\n      mono = false,\n      copyable = false,\n      copyText,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n    const [copied, setCopied] = useState(false);\n    const [announcement, setAnnouncement] = useState('');\n\n    const textToCopy = copyText ?? (typeof value === 'string' ? value : undefined);\n\n    const handleCopy = useCallback(async () => {\n      if (!textToCopy) {\n        if (import.meta.env.DEV) {\n          console.warn(\n            'KeyValuePair: copyable is true but no copyText was provided and value is not a string. Copy no-op.',\n          );\n        }\n        return;\n      }\n\n      try {\n        await navigator.clipboard.writeText(textToCopy);\n        setCopied(true);\n        setAnnouncement(t('ui.keyValuePair.copied'));\n        setTimeout(() => {\n          setCopied(false);\n          setAnnouncement('');\n        }, 2000);\n      } catch {\n        setAnnouncement(t('ui.keyValuePair.notAvailable'));\n        setTimeout(() => setAnnouncement(''), 3000);\n      }\n    }, [textToCopy, t]);\n\n    const valueClasses = [\n      'type-body text-foreground min-w-0 shrink [unicode-bidi:isolate]',\n      mono ? 'font-[family-name:var(--font-mono)]' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div\n        ref={ref}\n        className={keyValuePairVariants({ layout, className })}\n        data-component=\"key-value-pair\"\n        {...props}\n      >\n        <span className=\"type-label ds:text-muted-foreground ds:shrink-0\">\n          {label}\n          <span className=\"ds:sr-only\">: </span>\n        </span>\n        <span className={valueClasses}>{value}</span>\n        {copyable && (\n          <IconButton\n            icon={copied ? <Check /> : <Copy />}\n            size=\"sm\"\n            aria-label={t('ui.keyValuePair.copy', { label })}\n            onClick={handleCopy}\n            intent=\"ghost\"\n            className={layout === 'horizontal' ? 'ds:ms-auto ds:shrink-0' : 'ds:self-start'}\n          />\n        )}\n        <span role=\"status\" aria-live=\"polite\" className=\"ds:sr-only\">\n          {announcement}\n        </span>\n      </div>\n    );\n  },\n);\n\nKeyValuePair.displayName = 'KeyValuePair';\n"],"names":["keyValuePairVariants","cva","KeyValuePair","forwardRef","label","value","layout","mono","copyable","copyText","className","props","ref","t","useTranslation","copied","setCopied","useState","announcement","setAnnouncement","textToCopy","handleCopy","useCallback","valueClasses","jsxs","jsx","IconButton","Check","Copy"],"mappings":";;;;;;;AAUA,MAAMA,IAAuBC,EAAI,WAAW;AAAA,EAC1C,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA,IAAA;AAAA,EACZ;AAAA,EAEF,iBAAiB;AAAA,IACf,QAAQ;AAAA,EAAA;AAEZ,CAAC,GA2BYC,IAAeC;AAAA,EAC1B,CACE;AAAA,IACE,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACR,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAAcC,CAAe,IAAIF,EAAS,EAAE,GAE7CG,IAAaX,MAAa,OAAOJ,KAAU,WAAWA,IAAQ,SAE9DgB,IAAaC,EAAY,YAAY;AACzC,UAAKF;AASL,YAAI;AACF,gBAAM,UAAU,UAAU,UAAUA,CAAU,GAC9CJ,EAAU,EAAI,GACdG,EAAgBN,EAAE,wBAAwB,CAAC,GAC3C,WAAW,MAAM;AACf,YAAAG,EAAU,EAAK,GACfG,EAAgB,EAAE;AAAA,UACpB,GAAG,GAAI;AAAA,QACT,QAAQ;AACN,UAAAA,EAAgBN,EAAE,8BAA8B,CAAC,GACjD,WAAW,MAAMM,EAAgB,EAAE,GAAG,GAAI;AAAA,QAC5C;AAAA,IACF,GAAG,CAACC,GAAYP,CAAC,CAAC,GAEZU,IAAe;AAAA,MACnB;AAAA,MACAhB,IAAO,wCAAwC;AAAA,IAAA,EAE9C,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,gBAAAiB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAZ;AAAA,QACA,WAAWZ,EAAqB,EAAE,QAAAM,GAAQ,WAAAI,GAAW;AAAA,QACrD,kBAAe;AAAA,QACd,GAAGC;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAa,EAAC,QAAA,EAAK,WAAU,mDACb,UAAA;AAAA,YAAApB;AAAA,8BACA,QAAA,EAAK,WAAU,cAAa,UAAA,MAAE;AAAA,UAAA,GACjC;AAAA,4BACC,QAAA,EAAK,WAAWmB,GAAe,UAAAlB,GAAM;AAAA,UACrCG,KACC,gBAAAiB;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAMX,IAAS,gBAAAU,EAACE,GAAA,CAAA,CAAM,sBAAMC,GAAA,EAAK;AAAA,cACjC,MAAK;AAAA,cACL,cAAYf,EAAE,wBAAwB,EAAE,OAAAT,GAAO;AAAA,cAC/C,SAASiB;AAAA,cACT,QAAO;AAAA,cACP,WAAWf,MAAW,eAAe,2BAA2B;AAAA,YAAA;AAAA,UAAA;AAAA,UAGpE,gBAAAmB,EAAC,UAAK,MAAK,UAAS,aAAU,UAAS,WAAU,cAC9C,UAAAP,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEAhB,EAAa,cAAc;"}

package/dist/_chunks/{leo-sidebar-SqGAp1vx.js → leo-sidebar-CNjZqljo.js}

@@ -2,18 +2,18 @@ import { jsx as e, jsxs as c, Fragment as A } from "react/jsx-runtime";
 import { forwardRef as L, useMemo as U } from "react";
 import * as ee from "@radix-ui/react-dialog";
 import { useTranslation as y } from "react-i18next";
-import { F as se } from "./floating-action-button-DjRhFQdd.js";
-import { I as B } from "./icon-button-SWpSs9S6.js";
-import { S as E } from "./sheet-CKsuHuHB.js";
+import { F as se } from "./floating-action-button-Cnw-f6AG.js";
+import { I as B } from "./icon-button-CNjWCD1X.js";
+import { S as E } from "./sheet-D7GRhnWw.js";
 import { X as de } from "./x-CCcI3eJp.js";
-import { A as C } from "./avatar-DTQY5qIZ.js";
+import { A as C } from "./avatar-Biffh-_H.js";
 import { B as D } from "./button-7dTew-IV.js";
-import { C as re } from "./chat-container-ChdJTH0J.js";
-import { C as ae } from "./chat-message-cFNbQYRH.js";
-import { C as le } from "./chat-input-C-B4snVJ.js";
-import { S as oe } from "./streaming-text-D0cW8pwq.js";
-import { a as q, S as O } from "./suggestion-chip-BgNFpPEE.js";
-import { T as ie } from "./typing-indicator-BRg22Rqr.js";
+import { C as re } from "./chat-container-BZvQ3_yT.js";
+import { C as ae } from "./chat-message-BtxUyugB.js";
+import { C as le } from "./chat-input-xiBIujMv.js";
+import { S as oe } from "./streaming-text-BgjCTVOw.js";
+import { a as q, S as O } from "./suggestion-chip-6AB40rxz.js";
+import { T as ie } from "./typing-indicator-CbUBf-Dx.js";
 import { P as te } from "./progress-D4ELgHG3.js";
 import { S as ne } from "./square-CZoGU14v.js";
 import { c as ce } from "./createLucideIcon-CrFbzy84.js";
@@ -752,4 +752,4 @@ export {
   je as b,
   we as c
 };
-//# sourceMappingURL=leo-sidebar-SqGAp1vx.js.map
+//# sourceMappingURL=leo-sidebar-CNjZqljo.js.map