{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "dependencies": [],
  "description": "Base-UI-shaped checkbox: a focusable role=checkbox span plus an aria-hidden native checkbox for labeling, FormData, required validation, reset, and external form ownership. Space toggles; Enter submits the associated form without toggling. Checkedness and indeterminate presentation are independent. Supports controlled/uncontrolled state, cancellation, disabled, readOnly, native-button composition, and an optionally mounted Indicator.",
  "files": [
    {
      "content": "\"use client\";\n\n/**\n * heidi-ui Checkbox — Base-UI-shaped checkbox with native form semantics.\n *\n * The visible control is a focusable role=checkbox span by default so a\n * wrapping <label> remains valid. An aria-hidden native checkbox sits beside\n * it for label activation, FormData, constraint validation, reset, and\n * external `form` ownership. Space toggles; Enter mirrors native implicit form\n * submission without toggling the checkbox.\n *\n * RSC rule: named exports from Server Components; Checkbox.X is client sugar.\n */\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref\n} from \"react\";\nimport {\n  createNativeChangeEventDetails,\n  useFormResetSync,\n  VISUALLY_HIDDEN_INPUT_STYLE\n} from \"../_internal/form-bridge\";\nimport { ariaDisabledAttrs, nativeDisabledAttrs } from \"../_internal/disabled\";\nimport {\n  composeHeidiEventHandlers,\n  mergeHeidiRefs,\n  renderHeidiElement,\n  type HeidiHostProps,\n  type HeidiIntrinsicHostProps\n} from \"../_internal/render-element\";\nimport { safeId } from \"../_internal/safe-id\";\nimport { useHeidiLayoutEffect } from \"../_internal/use-layout-effect\";\nimport { CHECKBOX_CLASSES } from \"./checkbox.classes.generated\";\n\n/** @deprecated Use `checked: boolean` with the separate `indeterminate` prop. */\nexport type CheckboxChecked = boolean;\n\nexport type CheckboxRootChangeEventDetails = {\n  /** Prevents this interaction from changing uncontrolled state. */\n  cancel: () => void;\n  /** Native event produced by the form-associated checkbox input. */\n  event: Event;\n  /** Whether `cancel()` has been called. */\n  readonly isCanceled: boolean;\n  reason: \"none\";\n  /** Visible control that initiated the change, when mounted. */\n  trigger: HTMLElement | undefined;\n};\n\nexport type CheckboxRootState = {\n  checked: boolean;\n  disabled: boolean;\n  indeterminate: boolean;\n  readOnly: boolean;\n  required: boolean;\n};\n\ntype CheckboxContextValue = CheckboxRootState;\n\nconst CheckboxContext = createContext<CheckboxContextValue | null>(null);\n\nfunction useCheckboxContext(part: string): CheckboxContextValue {\n  const context = useContext(CheckboxContext);\n  if (!context) {\n    throw new Error(`Checkbox.${part} must be rendered inside Checkbox.Root.`);\n  }\n  return context;\n}\n\nfunction toAriaChecked(checked: boolean, indeterminate: boolean): boolean | \"mixed\" {\n  return indeterminate ? \"mixed\" : checked;\n}\n\nfunction toDataState(\n  checked: boolean,\n  indeterminate: boolean\n): \"checked\" | \"unchecked\" | \"indeterminate\" {\n  if (indeterminate) {\n    return \"indeterminate\";\n  }\n  return checked ? \"checked\" : \"unchecked\";\n}\n\nfunction getDefaultFormSubmitter(\n  form: HTMLFormElement | null\n): HTMLButtonElement | HTMLInputElement | null {\n  if (!form) {\n    return null;\n  }\n  for (const candidate of form.elements) {\n    if (\n      (candidate instanceof HTMLButtonElement || candidate instanceof HTMLInputElement) &&\n      candidate.type === \"submit\"\n    ) {\n      // A disabled first submitter intentionally remains the default. Its\n      // click is a no-op; browsers do not fall through to a later submitter.\n      return candidate;\n    }\n  }\n  return null;\n}\n\nfunction findAssociatedLabels(input: HTMLInputElement | null): HTMLLabelElement[] {\n  return Array.from(input?.labels ?? []);\n}\n\nfunction useCheckboxLabelledBy(\n  explicit: string | undefined,\n  ariaLabel: string | undefined,\n  inputRef: { current: HTMLInputElement | null }\n): string | undefined {\n  const generatedLabelId = `hui-checkbox-label-${safeId(useId())}`;\n  const generatedLabelSequenceRef = useRef(0);\n  const [fallback, setFallback] = useState<string | undefined>();\n\n  // Native label associations can change without a prop change (conditional\n  // label mount or a changed `htmlFor`), so re-check after every commit.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useHeidiLayoutEffect(() => {\n    const labels = explicit || ariaLabel ? [] : findAssociatedLabels(inputRef.current);\n    for (const label of labels) {\n      if (!label.id) {\n        generatedLabelSequenceRef.current += 1;\n        label.id = `${generatedLabelId}-${generatedLabelSequenceRef.current}`;\n      }\n    }\n    const next = labels.map((label) => label.id).filter(Boolean).join(\" \") || undefined;\n    if (next !== fallback) {\n      setFallback(next);\n    }\n  });\n\n  return explicit ?? fallback;\n}\n\ntype RootRenderProps = ComponentPropsWithoutRef<\"span\"> & { ref?: Ref<HTMLElement> };\ntype NativeRootProps = Omit<\n  ComponentPropsWithoutRef<\"span\">,\n  | \"aria-checked\"\n  | \"aria-disabled\"\n  | \"aria-readonly\"\n  | \"aria-required\"\n  | \"children\"\n  | \"className\"\n  | \"id\"\n  | \"onClick\"\n  | \"onKeyDown\"\n  | \"ref\"\n  | \"role\"\n  | \"style\"\n  | \"tabIndex\"\n>;\n\nexport type CheckboxRootProps = HeidiHostProps<CheckboxRootState, RootRenderProps> &\n  NativeRootProps & {\n    checked?: boolean;\n    children?: ReactNode;\n    defaultChecked?: boolean;\n    disabled?: boolean;\n    form?: string;\n    id?: string;\n    indeterminate?: boolean;\n    inputRef?: Ref<HTMLInputElement>;\n    name?: string;\n    nativeButton?: boolean;\n    onCheckedChange?: (\n      checked: boolean,\n      details: CheckboxRootChangeEventDetails\n    ) => void;\n    onClick?: (event: MouseEvent<HTMLElement>) => void;\n    onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;\n    readOnly?: boolean;\n    ref?: Ref<HTMLElement>;\n    required?: boolean;\n    uncheckedValue?: string;\n    value?: string;\n  };\n\nexport function CheckboxRoot({\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledByProp,\n  checked: checkedProp,\n  children,\n  className,\n  defaultChecked = false,\n  disabled = false,\n  form,\n  id: inputId,\n  indeterminate = false,\n  inputRef: inputRefProp,\n  name,\n  nativeButton = false,\n  onCheckedChange,\n  onClick,\n  onKeyDown,\n  readOnly = false,\n  ref,\n  render,\n  required = false,\n  style,\n  uncheckedValue,\n  value,\n  ...nativeProps\n}: CheckboxRootProps) {\n  const controlled = checkedProp !== undefined;\n  const initialCheckedRef = useRef(defaultChecked);\n  const [internalChecked, setInternalChecked] = useState(defaultChecked);\n  const checked = checkedProp ?? internalChecked;\n  const rootRef = useRef<HTMLElement | null>(null);\n  const nativeInputRef = useRef<HTMLInputElement | null>(null);\n  const mergedInputRef = mergeHeidiRefs(nativeInputRef, inputRefProp);\n  const generatedRootId = `hui-checkbox-${safeId(useId())}`;\n  const ariaLabelledBy = useCheckboxLabelledBy(\n    ariaLabelledByProp,\n    ariaLabel,\n    nativeInputRef\n  );\n  const dataState = toDataState(checked, indeterminate);\n  const state = useMemo<CheckboxRootState>(\n    () => ({ checked, disabled, indeterminate, readOnly, required }),\n    [checked, disabled, indeterminate, readOnly, required]\n  );\n  const stateRef = useRef(state);\n  stateRef.current = state;\n\n  const syncNativeInput = useCallback(() => {\n    const input = nativeInputRef.current;\n    if (!input) {\n      return;\n    }\n    input.checked = stateRef.current.checked;\n    input.defaultChecked = initialCheckedRef.current;\n    input.indeterminate = stateRef.current.indeterminate;\n  }, []);\n\n  useHeidiLayoutEffect(syncNativeInput, [checked, indeterminate, syncNativeInput]);\n\n  useFormResetSync({\n    controlled,\n    form,\n    nativeInputRef,\n    resetToInitial: () => {\n      stateRef.current = {\n        ...stateRef.current,\n        checked: initialCheckedRef.current\n      };\n      setInternalChecked(initialCheckedRef.current);\n    },\n    syncNativeInput\n  });\n\n  const handleInputChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      if (disabled || readOnly) {\n        event.preventDefault();\n        queueMicrotask(syncNativeInput);\n        return;\n      }\n\n      const next = event.currentTarget.checked;\n      const details: CheckboxRootChangeEventDetails = createNativeChangeEventDetails(\n        event.nativeEvent,\n        rootRef.current ?? undefined\n      );\n      onCheckedChange?.(next, details);\n      if (!details.isCanceled && !controlled) {\n        stateRef.current = { ...stateRef.current, checked: next };\n        setInternalChecked(next);\n      }\n      queueMicrotask(syncNativeInput);\n    },\n    [controlled, disabled, onCheckedChange, readOnly, syncNativeInput]\n  );\n\n  const activate = useCallback(() => {\n    if (!disabled && !readOnly) {\n      nativeInputRef.current?.click();\n    }\n  }, [disabled, readOnly]);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      if (disabled) {\n        return;\n      }\n      if (event.key === \" \") {\n        event.preventDefault();\n        if (!event.repeat) {\n          activate();\n        }\n        return;\n      }\n      if (event.key !== \"Enter\") {\n        return;\n      }\n\n      const nativeEvent = event.nativeEvent;\n      const originalPreventDefault = event.preventDefault;\n      const originalNativePreventDefault = nativeEvent.preventDefault;\n      let preventedDuringPropagation = false;\n\n      event.preventDefault = () => {\n        preventedDuringPropagation = true;\n        originalPreventDefault.call(event);\n      };\n      nativeEvent.preventDefault = () => {\n        preventedDuringPropagation = true;\n        originalNativePreventDefault.call(nativeEvent);\n      };\n\n      // Suppress native-button activation without marking the consumer-facing\n      // synthetic handler as canceled. Ancestors may still veto submission.\n      originalNativePreventDefault.call(nativeEvent);\n      queueMicrotask(() => {\n        event.preventDefault = originalPreventDefault;\n        nativeEvent.preventDefault = originalNativePreventDefault;\n        if (!preventedDuringPropagation) {\n          getDefaultFormSubmitter(nativeInputRef.current?.form ?? null)?.click();\n        }\n      });\n    },\n    [activate, disabled]\n  );\n\n  const root = renderHeidiElement({\n    className: CHECKBOX_CLASSES.root,\n    dataPart: \"checkbox-root\",\n    element: \"span\",\n    props: {\n      ...nativeProps,\n      \"aria-checked\": toAriaChecked(checked, indeterminate),\n      // ponytail: `aria-disabled` is NOT set here. The nativeButton/aria\n      // branch below owns it — an unconditional copy here also landed on the\n      // native-button host, which already carries the real `disabled`\n      // attribute, double-exposing the state to assistive tech.\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-readonly\": readOnly || undefined,\n      \"aria-required\": required || undefined,\n      children,\n      \"data-checked\": checked ? \"\" : undefined,\n      \"data-disabled\": disabled ? true : undefined,\n      \"data-indeterminate\": indeterminate ? \"\" : undefined,\n      \"data-readonly\": readOnly ? true : undefined,\n      \"data-required\": required ? true : undefined,\n      \"data-state\": dataState,\n      // ponytail: `data-unchecked` tracks `data-state`, not `!checked`. With\n      // independent `checked`/`indeterminate` props the mixed state is also\n      // `checked === false`, so the old negation emitted `data-unchecked` and\n      // `data-indeterminate` together — a contradiction every consumer\n      // selector inherits (it is what blanked the mixed mark). Rejected\n      // collapsing to a Radix-style `checked: boolean | \"indeterminate\"`\n      // union: that is a breaking public API change, and Base UI's\n      // two-prop model is what this component is shaped after.\n      \"data-unchecked\": dataState === \"unchecked\" ? \"\" : undefined,\n      ...(nativeButton\n        ? {\n            ...nativeDisabledAttrs(disabled),\n            id: inputId ?? generatedRootId,\n            type: \"button\"\n          }\n        : {\n            ...ariaDisabledAttrs(disabled),\n            id: generatedRootId,\n            tabIndex: disabled ? -1 : 0\n          }),\n      onClick: composeHeidiEventHandlers(onClick, (event) => {\n        event.preventDefault();\n        activate();\n      }),\n      onKeyDown: composeHeidiEventHandlers(onKeyDown, handleKeyDown),\n      ref: mergeHeidiRefs(rootRef, ref) as Ref<HTMLSpanElement>,\n      role: \"checkbox\"\n    },\n    renderProps: { className, render, style },\n    state\n  });\n\n  return (\n    <CheckboxContext value={state}>\n      {root}\n      {!checked && name && uncheckedValue !== undefined ? (\n        <input\n          aria-hidden=\"true\"\n          disabled={disabled}\n          form={form}\n          name={name}\n          type=\"hidden\"\n          value={uncheckedValue}\n        />\n      ) : null}\n      <input\n        {...nativeDisabledAttrs(disabled)}\n        aria-hidden=\"true\"\n        checked={checked}\n        data-hui-checkbox-input=\"\"\n        form={form}\n        id={nativeButton ? undefined : inputId}\n        name={name}\n        onChange={handleInputChange}\n        onFocus={() => rootRef.current?.focus({ preventScroll: true })}\n        readOnly={readOnly}\n        ref={mergedInputRef}\n        required={required}\n        style={VISUALLY_HIDDEN_INPUT_STYLE}\n        suppressHydrationWarning\n        tabIndex={-1}\n        type=\"checkbox\"\n        value={value}\n      />\n    </CheckboxContext>\n  );\n}\n\nexport type CheckboxIndicatorState = CheckboxRootState;\n\ntype NativeIndicatorProps = Omit<\n  ComponentPropsWithoutRef<\"span\">,\n  \"aria-hidden\" | \"children\" | \"className\" | \"ref\" | \"style\"\n>;\n\nexport type CheckboxIndicatorProps = HeidiIntrinsicHostProps<\n  CheckboxIndicatorState,\n  \"span\"\n> &\n  NativeIndicatorProps & {\n    children?: ReactNode;\n    keepMounted?: boolean;\n    ref?: Ref<HTMLSpanElement>;\n  };\n\n/** Presentational mark; omitted while unchecked unless `keepMounted` is set. */\nexport function CheckboxIndicator({\n  children,\n  className,\n  keepMounted = false,\n  ref,\n  render,\n  style,\n  ...nativeProps\n}: CheckboxIndicatorProps) {\n  const state = useCheckboxContext(\"Indicator\");\n  const visible = state.checked || state.indeterminate;\n  if (!visible && !keepMounted) {\n    return null;\n  }\n  return renderHeidiElement({\n    className: CHECKBOX_CLASSES.indicator,\n    dataPart: \"checkbox-indicator\",\n    element: \"span\",\n    props: {\n      ...nativeProps,\n      \"aria-hidden\": true,\n      children,\n      \"data-checked\": state.checked ? \"\" : undefined,\n      \"data-default-indicator\": children == null ? \"\" : undefined,\n      \"data-disabled\": state.disabled ? true : undefined,\n      \"data-indeterminate\": state.indeterminate ? \"\" : undefined,\n      \"data-readonly\": state.readOnly ? true : undefined,\n      \"data-required\": state.required ? true : undefined,\n      \"data-state\": toDataState(state.checked, state.indeterminate),\n      // ponytail: mirrors Root — `data-unchecked` means genuinely unchecked,\n      // never \"not checked but mixed\". See the Root comment above.\n      \"data-unchecked\": !state.checked && !state.indeterminate ? \"\" : undefined,\n      ref\n    },\n    renderProps: { className, render, style },\n    state\n  });\n}\n\nexport const Checkbox = {\n  Indicator: CheckboxIndicator,\n  Root: CheckboxRoot\n} as const;\n",
      "path": "packages/heidi-ui/src/checkbox/checkbox.tsx",
      "target": "components/ui/heidi/checkbox/checkbox.tsx",
      "type": "registry:ui"
    },
    {
      "content": "/*\n * heidi-ui checkbox — STRUCTURAL CSS only. No --hui-*.\n */\n\n@layer heidi-ui-base {\n  .hui-checkbox-root {\n    align-items: center;\n    block-size: 1rem;\n    box-sizing: border-box;\n    display: inline-flex;\n    flex: 0 0 auto;\n    inline-size: 1rem;\n    justify-content: center;\n    margin: 0;\n    min-block-size: 0;\n    min-inline-size: 0;\n    padding: 0;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  /* WCAG 2.2 target-size floor without turning the 16px visual indicator into\n     a 24px box. Generated content participates in hit testing as its originating\n     control, while the control's measured/painted geometry remains unchanged. */\n  .hui-checkbox-root::after {\n    content: \"\";\n    inset: -0.25rem;\n    position: absolute;\n  }\n\n  .hui-checkbox-indicator {\n    align-items: center;\n    block-size: 100%;\n    display: inline-flex;\n    inline-size: 100%;\n    justify-content: center;\n    line-height: 0;\n    pointer-events: none;\n  }\n\n  /*\n   * ponytail: the hide rule is scoped away from the mixed state. `checked` and\n   * `indeterminate` are independent props here (Base UI's model, not Radix's\n   * single tri-state value), so an indeterminate checkbox is also\n   * `checked === false` and used to match a bare `[data-unchecked]` — which\n   * `display: none`d the very mark that paints the mixed dash, leaving\n   * aria-checked=\"mixed\" announced but nothing drawn (APG Checkbox tri-state /\n   * WCAG 1.3.1: state must not be AT-only). Rejected deleting the rule outright:\n   * `keepMounted` Indicators must still stay invisible while genuinely\n   * unchecked. The attribute emission was corrected too (checkbox.tsx); this\n   * selector stays defensive because a `render` host can forward stale attrs.\n   */\n  .hui-checkbox-indicator[data-unchecked]:not([data-indeterminate]) {\n    display: none;\n  }\n}\n",
      "path": "packages/heidi-ui/src/checkbox/checkbox.base.css",
      "target": "components/ui/heidi/checkbox/checkbox.base.css",
      "type": "registry:ui"
    },
    {
      "content": "/*\n * heidi-ui checkbox — VISUAL theme (opt-in). Consumes --hui-*.\n */\n\n@layer heidi-ui {\n  .hui-checkbox-root {\n    background: var(--hui-color-bg-elevated);\n    border: var(--hui-border-width) var(--hui-border-style) var(--hui-color-border-default);\n    border-radius: var(--hui-radius-sm);\n    color: var(--hui-color-fg-default);\n    cursor: pointer;\n    font: inherit;\n    padding: 0;\n  }\n\n  .hui-checkbox-root:focus-visible {\n    outline: var(--hui-focus-ring-width) solid var(--hui-color-focus-ring);\n    outline-offset: var(--hui-focus-ring-offset);\n  }\n\n  .hui-checkbox-root[data-state=\"unchecked\"] {\n    background: var(--hui-color-bg-elevated);\n  }\n\n  .hui-checkbox-root[data-state=\"checked\"],\n  .hui-checkbox-root[data-state=\"indeterminate\"] {\n    background: var(--hui-color-brand-primary);\n    border-color: var(--hui-color-brand-primary);\n    color: var(--hui-color-on-brand, #fff);\n  }\n\n  .hui-checkbox-indicator[data-default-indicator][data-state=\"checked\"]::before {\n    background: currentColor;\n    block-size: var(--hui-space-4);\n    content: \"\";\n    display: block;\n    inline-size: var(--hui-space-4);\n    /* Exact direction-independent path used by Base UI's current demo. */\n    mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white'%3E%3Cpath d='m2.5 8.5 4 4 7-9'/%3E%3C/svg%3E\") center / 1rem 1rem no-repeat;\n    -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white'%3E%3Cpath d='m2.5 8.5 4 4 7-9'/%3E%3C/svg%3E\") center / 1rem 1rem no-repeat;\n  }\n\n  .hui-checkbox-indicator[data-default-indicator][data-state=\"indeterminate\"]::before {\n    content: \"\";\n    display: block;\n    background: currentColor;\n    /* Glyph geometry (dash proportions), not a spacing value — stays literal. */\n    block-size: 2px;\n    inline-size: 0.55rem;\n  }\n\n  .hui-checkbox-root:disabled,\n  .hui-checkbox-root[data-disabled=\"true\"] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .hui-checkbox-root[data-readonly=\"true\"] {\n    cursor: default;\n  }\n\n  @media (forced-colors: active) {\n    .hui-checkbox-root {\n      background: Canvas;\n      border-color: CanvasText;\n      color: CanvasText;\n      forced-color-adjust: none;\n    }\n\n    .hui-checkbox-root[data-state=\"checked\"],\n    .hui-checkbox-root[data-state=\"indeterminate\"] {\n      background: Highlight;\n      border-color: Highlight;\n      color: HighlightText;\n    }\n\n    .hui-checkbox-root:focus-visible {\n      outline-color: Highlight;\n    }\n\n    .hui-checkbox-root[data-disabled=\"true\"] {\n      border-color: GrayText;\n      color: GrayText;\n    }\n  }\n}\n",
      "path": "packages/heidi-ui/src/checkbox/checkbox.theme.css",
      "target": "components/ui/heidi/checkbox/checkbox.theme.css",
      "type": "registry:ui"
    },
    {
      "content": "/*\n * heidi-ui checkbox — aggregator (base + Heidi adapter + theme).\n */\n\n@import \"./checkbox.base.css\";\n@import \"../../../../styles/heidi-ui-adapter.css\";\n@import \"./checkbox.theme.css\";\n",
      "path": "packages/heidi-ui/src/checkbox/checkbox.css",
      "target": "components/ui/heidi/checkbox/checkbox.css",
      "type": "registry:ui"
    },
    {
      "content": "/** GENERATED from packages/heidi-ui/src/checkbox/checkbox.base.css + packages/heidi-ui/src/checkbox/checkbox.theme.css — do not edit by hand.\n * Rebuild: `bun run hui:build`. Freshness: `bun run contracts:check`. */\nexport const CHECKBOX_CLASSES = {\n  indicator: \"hui-checkbox-indicator\",\n  root: \"hui-checkbox-root\",\n} as const;\n",
      "path": "packages/heidi-ui/src/checkbox/checkbox.classes.generated.ts",
      "target": "components/ui/heidi/checkbox/checkbox.classes.generated.ts",
      "type": "registry:ui"
    },
    {
      "content": "/** GENERATED from checkbox.anatomy.json + checkbox.base.css + checkbox.theme.css — do not edit by hand.\n * Rebuild: `bun run hui:build`. Freshness: `bun run contracts:check`. */\n\nexport type CheckboxDisabled = \"true\";\nexport type CheckboxReadonly = \"true\";\nexport type CheckboxState = \"checked\" | \"indeterminate\" | \"unchecked\";\n\nexport const CHECKBOX_ANATOMY = {\n  \"component\": \"checkbox\",\n  \"description\": \"Base-UI-shaped checkbox: a focusable role=checkbox span plus an aria-hidden native checkbox for labeling, FormData, required validation, reset, and external form ownership. Space toggles; Enter submits the associated form without toggling. Checkedness and indeterminate presentation are independent. Supports controlled/uncontrolled state, cancellation, disabled, readOnly, native-button composition, and an optionally mounted Indicator.\",\n  \"schemaVersion\": 2,\n  \"parts\": {\n    \"indicator\": {\n      \"aria\": {\n        \"owns\": [\n          \"aria-hidden\"\n        ],\n        \"role\": null\n      },\n      \"class\": \"hui-checkbox-indicator\",\n      \"css\": {\n        \"structural\": [\n          \"align-items\",\n          \"block-size\",\n          \"display\",\n          \"inline-size\",\n          \"justify-content\",\n          \"line-height\",\n          \"pointer-events\"\n        ]\n      },\n      \"dataPart\": \"checkbox-indicator\",\n      \"description\": \"Decorative checked/mixed mark. It is absent while unchecked unless keepMounted is true, inherits Root state hooks, and paints the theme fallback mark only when custom children are absent.\",\n      \"element\": \"span\",\n      \"nativeProps\": true,\n      \"props\": [\n        \"className\",\n        \"keepMounted\",\n        \"ref\",\n        \"render\",\n        \"style\"\n      ],\n      \"pseudoStates\": [],\n      \"states\": {\n        \"data-state\": [\n          \"checked\",\n          \"indeterminate\",\n          \"unchecked\"\n        ]\n      }\n    },\n    \"root\": {\n      \"aria\": {\n        \"owns\": [\n          \"aria-checked\",\n          \"aria-disabled\",\n          \"aria-readonly\",\n          \"aria-required\"\n        ],\n        \"role\": \"checkbox\"\n      },\n      \"class\": \"hui-checkbox-root\",\n      \"css\": {\n        \"structural\": [\n          \"align-items\",\n          \"block-size\",\n          \"box-sizing\",\n          \"display\",\n          \"flex\",\n          \"inline-size\",\n          \"justify-content\",\n          \"margin\",\n          \"min-block-size\",\n          \"min-inline-size\",\n          \"padding\",\n          \"vertical-align\"\n        ]\n      },\n      \"dataPart\": \"checkbox-root\",\n      \"description\": \"Focusable role=checkbox visual control. A sibling visually-hidden native input owns label and form behavior; Root owns aria-checked and state synchronization.\",\n      \"element\": \"span\",\n      \"nativeProps\": true,\n      \"props\": [\n        \"checked\",\n        \"className\",\n        \"defaultChecked\",\n        \"disabled\",\n        \"form\",\n        \"id\",\n        \"indeterminate\",\n        \"inputRef\",\n        \"name\",\n        \"nativeButton\",\n        \"onCheckedChange\",\n        \"readOnly\",\n        \"ref\",\n        \"render\",\n        \"required\",\n        \"style\",\n        \"uncheckedValue\",\n        \"value\"\n      ],\n      \"pseudoStates\": [\n        \":disabled\",\n        \":focus-visible\"\n      ],\n      \"states\": {\n        \"data-disabled\": [\n          \"true\"\n        ],\n        \"data-readonly\": [\n          \"true\"\n        ],\n        \"data-state\": [\n          \"checked\",\n          \"indeterminate\",\n          \"unchecked\"\n        ]\n      }\n    }\n  },\n  \"rootProps\": [\n    \"checked\",\n    \"defaultChecked\",\n    \"disabled\",\n    \"form\",\n    \"id\",\n    \"indeterminate\",\n    \"inputRef\",\n    \"name\",\n    \"nativeButton\",\n    \"onCheckedChange\",\n    \"readOnly\",\n    \"required\",\n    \"uncheckedValue\",\n    \"value\"\n  ],\n  \"tokens\": [\n    \"--hui-border-style\",\n    \"--hui-border-width\",\n    \"--hui-color-bg-elevated\",\n    \"--hui-color-border-default\",\n    \"--hui-color-brand-primary\",\n    \"--hui-color-fg-default\",\n    \"--hui-color-focus-ring\",\n    \"--hui-color-on-brand\",\n    \"--hui-focus-ring-offset\",\n    \"--hui-focus-ring-width\",\n    \"--hui-radius-sm\",\n    \"--hui-space-4\"\n  ]\n} as const;\n",
      "path": "packages/heidi-ui/src/checkbox/checkbox.anatomy.generated.ts",
      "target": "components/ui/heidi/checkbox/checkbox.anatomy.generated.ts",
      "type": "registry:ui"
    },
    {
      "content": "{\n  \"component\": \"checkbox\",\n  \"description\": \"Base-UI-shaped checkbox: a focusable role=checkbox span plus an aria-hidden native checkbox for labeling, FormData, required validation, reset, and external form ownership. Space toggles; Enter submits the associated form without toggling. Checkedness and indeterminate presentation are independent. Supports controlled/uncontrolled state, cancellation, disabled, readOnly, native-button composition, and an optionally mounted Indicator.\",\n  \"schemaVersion\": 2,\n  \"parts\": {\n    \"indicator\": {\n      \"aria\": {\n        \"owns\": [\n          \"aria-hidden\"\n        ],\n        \"role\": null\n      },\n      \"class\": \"hui-checkbox-indicator\",\n      \"css\": {\n        \"structural\": [\n          \"align-items\",\n          \"block-size\",\n          \"display\",\n          \"inline-size\",\n          \"justify-content\",\n          \"line-height\",\n          \"pointer-events\"\n        ]\n      },\n      \"dataPart\": \"checkbox-indicator\",\n      \"description\": \"Decorative checked/mixed mark. It is absent while unchecked unless keepMounted is true, inherits Root state hooks, and paints the theme fallback mark only when custom children are absent.\",\n      \"element\": \"span\",\n      \"nativeProps\": true,\n      \"props\": [\n        \"className\",\n        \"keepMounted\",\n        \"ref\",\n        \"render\",\n        \"style\"\n      ],\n      \"pseudoStates\": [],\n      \"states\": {\n        \"data-state\": [\n          \"checked\",\n          \"indeterminate\",\n          \"unchecked\"\n        ]\n      }\n    },\n    \"root\": {\n      \"aria\": {\n        \"owns\": [\n          \"aria-checked\",\n          \"aria-disabled\",\n          \"aria-readonly\",\n          \"aria-required\"\n        ],\n        \"role\": \"checkbox\"\n      },\n      \"class\": \"hui-checkbox-root\",\n      \"css\": {\n        \"structural\": [\n          \"align-items\",\n          \"block-size\",\n          \"box-sizing\",\n          \"display\",\n          \"flex\",\n          \"inline-size\",\n          \"justify-content\",\n          \"margin\",\n          \"min-block-size\",\n          \"min-inline-size\",\n          \"padding\",\n          \"vertical-align\"\n        ]\n      },\n      \"dataPart\": \"checkbox-root\",\n      \"description\": \"Focusable role=checkbox visual control. A sibling visually-hidden native input owns label and form behavior; Root owns aria-checked and state synchronization.\",\n      \"element\": \"span\",\n      \"nativeProps\": true,\n      \"props\": [\n        \"checked\",\n        \"className\",\n        \"defaultChecked\",\n        \"disabled\",\n        \"form\",\n        \"id\",\n        \"indeterminate\",\n        \"inputRef\",\n        \"name\",\n        \"nativeButton\",\n        \"onCheckedChange\",\n        \"readOnly\",\n        \"ref\",\n        \"render\",\n        \"required\",\n        \"style\",\n        \"uncheckedValue\",\n        \"value\"\n      ],\n      \"pseudoStates\": [\n        \":disabled\",\n        \":focus-visible\"\n      ],\n      \"states\": {\n        \"data-disabled\": [\n          \"true\"\n        ],\n        \"data-readonly\": [\n          \"true\"\n        ],\n        \"data-state\": [\n          \"checked\",\n          \"indeterminate\",\n          \"unchecked\"\n        ]\n      }\n    }\n  },\n  \"rootProps\": [\n    \"checked\",\n    \"defaultChecked\",\n    \"disabled\",\n    \"form\",\n    \"id\",\n    \"indeterminate\",\n    \"inputRef\",\n    \"name\",\n    \"nativeButton\",\n    \"onCheckedChange\",\n    \"readOnly\",\n    \"required\",\n    \"uncheckedValue\",\n    \"value\"\n  ]\n}\n",
      "path": "packages/heidi-ui/src/checkbox/checkbox.anatomy.json",
      "target": "components/ui/heidi/checkbox/checkbox.anatomy.json",
      "type": "registry:ui"
    },
    {
      "content": "/**\n * Cross-cutting disabled attrs for heidi-ui interactive hosts.\n *\n * House convention (Phase 23):\n * - Button widgets → native `disabled` + `data-disabled=\"true\"` (CSS + a11y).\n * - Non-button options (Select.Item) → `aria-disabled` + `data-disabled=\"true\"`\n *   (native disabled is invalid on role=option divs).\n * - Group roots may cascade `disabled` to children and mirror `data-disabled`.\n * - Keyboard nav / activation always skip disabled hosts.\n */\n\nexport type NativeDisabledAttrs = {\n  \"data-disabled\"?: true;\n  disabled?: true;\n};\n\nexport type AriaDisabledAttrs = {\n  \"aria-disabled\"?: true;\n  \"data-disabled\"?: true;\n};\n\nexport type DataDisabledAttrs = {\n  \"data-disabled\"?: true;\n};\n\n/** Native button/input disabled + styling hook. */\nexport function nativeDisabledAttrs(disabled: boolean | undefined): NativeDisabledAttrs {\n  if (!disabled) {\n    return {};\n  }\n  return {\n    \"data-disabled\": true,\n    disabled: true\n  };\n}\n\n/** ARIA-disabled for non-native hosts (e.g. role=option). */\nexport function ariaDisabledAttrs(disabled: boolean | undefined): AriaDisabledAttrs {\n  if (!disabled) {\n    return {};\n  }\n  return {\n    \"aria-disabled\": true,\n    \"data-disabled\": true\n  };\n}\n\n/** Styling hook only (group roots that cascade disabled). */\nexport function dataDisabledAttrs(disabled: boolean | undefined): DataDisabledAttrs {\n  if (!disabled) {\n    return {};\n  }\n  return {\n    \"data-disabled\": true\n  };\n}\n\nexport function isDisabledElement(el: Element | null | undefined): boolean {\n  if (!el || !(el instanceof HTMLElement)) {\n    return false;\n  }\n  if (el.matches(\":disabled\")) {\n    return true;\n  }\n  return el.getAttribute(\"aria-disabled\") === \"true\" || el.getAttribute(\"data-disabled\") === \"true\";\n}\n",
      "path": "packages/heidi-ui/src/_internal/disabled.ts",
      "target": "components/ui/heidi/_internal/disabled.ts",
      "type": "registry:ui"
    },
    {
      "content": "/**\n * Shared form-association plumbing for the native-input primitives (P9).\n *\n * Checkbox, Switch and Radio each render a visually hidden, form-associated\n * `<input>` behind a styled control. Three pieces of that were copy-pasted.\n *\n * ponytail: as with P6, diffing first changed the slice. The style constant is\n * byte-identical in all three. The form-reset effect and the change-details\n * construction are byte-identical in TWO — Checkbox and Switch — and Radio has\n * neither: it is a GROUP, so N items share one form, and it refcounts\n * registrations per form instead of running one effect per control. Wrapping\n * that in a per-control hook would not be a thin wrapper, it would be a\n * rewrite of working group-registration logic. Radio therefore takes the style\n * constant only. The same is true of the labelled-by hooks the audit listed as\n * optional: Radio's takes an extra `initialFallback` parameter because a group\n * item inherits a name its sibling may supply, so they are not one hook with a\n * different prefix, and they stay where they are.\n */\n\nimport { useEffect, useRef, type CSSProperties } from \"react\";\n\n/**\n * Off-screen but focusable and form-associated. `position: fixed` (not\n * absolute) so an ancestor's transform cannot drag the input into view, and\n * `clip-path` rather than the legacy `clip`.\n */\nexport const VISUALLY_HIDDEN_INPUT_STYLE: CSSProperties = {\n  blockSize: 1,\n  border: 0,\n  clipPath: \"inset(50%)\",\n  inlineSize: 1,\n  insetBlockStart: 0,\n  insetInlineStart: 0,\n  margin: -1,\n  overflow: \"hidden\",\n  padding: 0,\n  position: \"fixed\",\n  whiteSpace: \"nowrap\"\n};\n\n/**\n * The details object a cancelable change callback receives. Structurally\n * identical to `CheckboxRootChangeEventDetails` and\n * `SwitchRootChangeEventDetails`, which stay declared in their own files so\n * the public type names — and their doc comments — remain per-component.\n */\n// Generic in the trigger element: Checkbox's is an `HTMLElement` (its root can\n// be re-rendered as any host) while Switch narrows to `HTMLButtonElement`. The\n// two constructions looked byte-identical because the difference lives in the\n// TYPE annotation above each one, not in the object literal.\nexport type NativeChangeEventDetails<TTrigger extends HTMLElement = HTMLElement> = {\n  cancel: () => void;\n  event: Event;\n  readonly isCanceled: boolean;\n  reason: \"none\";\n  trigger: TTrigger | undefined;\n};\n\nexport function createNativeChangeEventDetails<TTrigger extends HTMLElement>(\n  event: Event,\n  trigger: TTrigger | undefined\n): NativeChangeEventDetails<TTrigger> {\n  let canceled = false;\n  return {\n    cancel: () => {\n      canceled = true;\n    },\n    event,\n    get isCanceled() {\n      return canceled;\n    },\n    reason: \"none\",\n    trigger\n  };\n}\n\nexport type FormResetSyncOptions = {\n  /** Controlled inputs keep owner state; only the DOM input is re-synced. */\n  controlled: boolean;\n  /** The `form` prop. Present so re-parenting re-runs the subscription. */\n  form: string | undefined;\n  nativeInputRef: { current: HTMLInputElement | null };\n  /** Restore uncontrolled state to its initial value. */\n  resetToInitial: () => void;\n  /** Push current state back onto the DOM input. */\n  syncNativeInput: () => void;\n};\n\n/**\n * Re-sync a form-associated input when its owning form resets.\n *\n * The native reset lands on the input BEFORE any React state update, so the\n * push back onto the DOM is deferred a frame — and the pending frame is\n * cancelled on both re-reset and unmount, so a rapid double reset cannot leave\n * a stale frame writing over newer state.\n */\nexport function useFormResetSync({\n  controlled,\n  form,\n  nativeInputRef,\n  resetToInitial,\n  syncNativeInput\n}: FormResetSyncOptions): void {\n  // ponytail: `resetToInitial` is read through a ref rather than listed as a\n  // dependency. Both call sites' effects re-subscribed on exactly\n  // [controlled, form, syncNativeInput]; adding a fourth dependency would make\n  // them re-subscribe whenever the caller's closure changed identity, which is\n  // a behaviour change in a slice whose premise is changing none.\n  const resetToInitialRef = useRef(resetToInitial);\n  resetToInitialRef.current = resetToInitial;\n\n  useEffect(() => {\n    const input = nativeInputRef.current;\n    const ownerForm = input?.form;\n    if (!input || !ownerForm) {\n      return;\n    }\n    let resetFrame = 0;\n    const handleReset = () => {\n      if (!controlled) {\n        resetToInitialRef.current();\n      }\n      cancelAnimationFrame(resetFrame);\n      resetFrame = requestAnimationFrame(syncNativeInput);\n    };\n    ownerForm.addEventListener(\"reset\", handleReset);\n    return () => {\n      cancelAnimationFrame(resetFrame);\n      ownerForm.removeEventListener(\"reset\", handleReset);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- see ponytail above\n  }, [controlled, form, syncNativeInput]);\n}\n",
      "path": "packages/heidi-ui/src/_internal/form-bridge.ts",
      "target": "components/ui/heidi/_internal/form-bridge.ts",
      "type": "registry:ui"
    },
    {
      "content": "/**\n * Shared host rendering for heidi-ui parts — Base-UI-shaped composition\n * (docs/HEIDI-UI-HEADLESS.md § 4 / HEIDI-UI.md § 4.5):\n *   - className / style as value or (state) => value\n *   - render as ReactElement or (props, state) => ReactElement\n *   - ref forwarding\n *   - data-hui-part always set (stable unstyled hook)\n *\n * Structural inline styles (e.g. anchorName) are merged last so a consumer\n * style override cannot drop platform wiring.\n */\n\nimport {\n  cloneElement,\n  createElement,\n  isValidElement,\n  type CSSProperties,\n  type ComponentPropsWithRef,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefCallback\n} from \"react\";\n\nexport type HeidiClassName<State> = string | ((state: State) => string | undefined) | undefined;\n\nexport type HeidiStyle<State> =\n  | CSSProperties\n  | ((state: State) => CSSProperties | undefined)\n  | undefined;\n\nexport type HeidiRenderFn<State, Props> = (\n  props: Props,\n  state: State\n) => ReactElement;\n\nexport type HeidiRender<State, Props> =\n  | ReactElement\n  | HeidiRenderFn<State, Props>\n  | undefined;\n\ntype DefaultRenderProps = HTMLAttributes<HTMLElement> & { ref?: Ref<HTMLElement> };\n\nexport type HeidiHostProps<\n  State,\n  RenderProps extends object = DefaultRenderProps\n> = {\n  className?: HeidiClassName<State>;\n  render?: HeidiRender<State, RenderProps>;\n  style?: HeidiStyle<State>;\n};\n\nexport type HeidiIntrinsicHostProps<\n  State,\n  Tag extends keyof HTMLElementTagNameMap\n> = HeidiHostProps<State, ComponentPropsWithRef<Tag>>;\n\nfunction resolveClassName<State>(\n  className: HeidiClassName<State>,\n  state: State\n): string | undefined {\n  return typeof className === \"function\" ? className(state) : className;\n}\n\nfunction resolveStyle<State>(style: HeidiStyle<State>, state: State): CSSProperties | undefined {\n  return typeof style === \"function\" ? style(state) : style;\n}\n\nfunction mergeClassNames(...parts: Array<string | undefined>): string | undefined {\n  const merged = parts.filter(Boolean).join(\" \");\n  return merged.length > 0 ? merged : undefined;\n}\n\n/**\n * Compose a consumer event with library behavior. Consumers run first and may\n * cancel the component behavior with `event.preventDefault()`. Heidi keeps\n * this native-event convention intentionally: it avoids a second branded event\n * API while still making async/controlled actions vetoable.\n */\nexport function composeHeidiEventHandlers<Event extends { defaultPrevented: boolean }>(\n  consumer: ((event: Event) => void) | undefined,\n  library: (event: Event) => void\n): (event: Event) => void {\n  return (event) => {\n    consumer?.(event);\n    if (!event.defaultPrevented) {\n      library(event);\n    }\n  };\n}\n\n/** React 19-safe ref fan-out, including callback-ref cleanup functions. */\nexport function mergeHeidiRefs<Element>(\n  ...inputRefs: Array<Ref<Element> | undefined>\n): Ref<Element> | undefined {\n  const refs = Array.from(\n    new Set(\n      inputRefs.filter(\n        (ref): ref is Exclude<Ref<Element>, null> => ref != null\n      )\n    )\n  );\n  if (refs.length === 0) {\n    return undefined;\n  }\n  if (refs.length === 1) {\n    return refs[0];\n  }\n\n  let cache = mergedRefCache;\n  for (const ref of refs) {\n    const key = ref as object;\n    let child = cache.children.get(key);\n    if (!child) {\n      child = { children: new WeakMap() };\n      cache.children.set(key, child);\n    }\n    cache = child;\n  }\n  if (cache.callback) {\n    return cache.callback as RefCallback<Element>;\n  }\n\n  const callback: RefCallback<Element> = (node) => {\n    const cleanups: Array<() => void> = [];\n    for (const ref of refs) {\n      if (typeof ref === \"function\") {\n        const cleanup = ref(node);\n        if (node !== null) {\n          cleanups.push(typeof cleanup === \"function\" ? cleanup : () => ref(null));\n        }\n      } else if (ref) {\n        ref.current = node;\n        if (node !== null) {\n          cleanups.push(() => {\n            ref.current = null;\n          });\n        }\n      }\n    }\n    return cleanups.length > 0\n      ? () => {\n          for (const cleanup of cleanups) {\n            cleanup();\n          }\n        }\n      : undefined;\n  };\n  cache.callback = callback as RefCallback<unknown>;\n  return callback;\n}\n\ntype MergedRefCache = {\n  callback?: RefCallback<unknown>;\n  children: WeakMap<object, MergedRefCache>;\n};\n\nconst mergedRefCache: MergedRefCache = { children: new WeakMap() };\n\ntype UnknownHandler = (...args: never[]) => unknown;\n\nfunction isEventHandler(key: string, value: unknown): value is UnknownHandler {\n  return /^on[A-Z]/.test(key) && typeof value === \"function\";\n}\n\nfunction defaultPrevented(args: unknown[]): boolean {\n  const event = args[0];\n  return (\n    typeof event === \"object\" &&\n    event !== null &&\n    \"defaultPrevented\" in event &&\n    event.defaultPrevented === true\n  );\n}\n\nfunction composeUnknownHandlers(\n  consumer: UnknownHandler,\n  library: UnknownHandler\n): UnknownHandler {\n  if (consumer === library) {\n    return library;\n  }\n  return ((...args: unknown[]) => {\n    (consumer as (...handlerArgs: unknown[]) => unknown)(...args);\n    if (!defaultPrevented(args)) {\n      (library as (...handlerArgs: unknown[]) => unknown)(...args);\n    }\n  }) as UnknownHandler;\n}\n\n/** Library-owned host props — permissive so button `type`, `data-*`, `popover`, etc. type-check. */\nexport type HeidiElementProps<Tag extends keyof HTMLElementTagNameMap> = Record<\n  string,\n  unknown\n> & {\n  children?: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLElementTagNameMap[Tag]>;\n  style?: CSSProperties;\n};\n\ntype RenderElementParams<\n  State,\n  Tag extends keyof HTMLElementTagNameMap,\n  RenderProps extends object = DefaultRenderProps\n> = {\n  /** Default class from the generated hui-* map (theme/base target). */\n  className?: string;\n  /** Stable machine hook — always emitted. */\n  dataPart: string;\n  /** Intrinsic tag when `render` is omitted. */\n  element: Tag;\n  /** Props the library owns (aria, ids, handlers, popover, …). */\n  props: HeidiElementProps<Tag>;\n  /** Optional consumer composition props. */\n  renderProps?: HeidiHostProps<State, RenderProps>;\n  /** Typed state passed to functional className/style/render. */\n  state: State;\n  /** Structural inline styles that must survive consumer style merges. */\n  structuralStyle?: CSSProperties;\n  /**\n   * Render-element handlers to remove instead of composing. This is reserved\n   * for states such as a focusable disabled composite item where the public\n   * contract requires press handlers to be completely inert.\n   */\n  suppressRenderedHandlers?: readonly string[];\n};\n\n/**\n * Render a heidi-ui host element with optional Base-shaped composition.\n */\nexport function renderHeidiElement<\n  State,\n  Tag extends keyof HTMLElementTagNameMap,\n  RenderProps extends object = DefaultRenderProps\n>(\n  params: RenderElementParams<State, Tag, RenderProps>\n): ReactElement {\n  const {\n    className,\n    dataPart,\n    element,\n    props,\n    renderProps,\n    state,\n    structuralStyle,\n    suppressRenderedHandlers\n  } = params;\n  const consumerClass = resolveClassName(renderProps?.className, state);\n  const consumerStyle = resolveStyle(renderProps?.style, state);\n  const mergedStyle: CSSProperties | undefined =\n    props.style || consumerStyle || structuralStyle\n      ? { ...props.style, ...consumerStyle, ...structuralStyle }\n      : undefined;\n\n  const outProps: HTMLAttributes<HTMLElement> & {\n    \"data-hui-part\": string;\n    ref?: Ref<HTMLElement>;\n  } = {\n    ...(props as HTMLAttributes<HTMLElement> & { ref?: Ref<HTMLElement> }),\n    className: mergeClassNames(consumerClass, className),\n    \"data-hui-part\": dataPart,\n    style: mergedStyle\n  };\n\n  const render = renderProps?.render;\n  if (typeof render === \"function\") {\n    // Post-merge the returned element as well. This deliberately makes the\n    // stable data hook, owned semantics, refs, and internal handlers survive\n    // even when a render function forgets to spread one of the supplied props.\n    return mergeRenderedElement(\n      render(outProps as unknown as RenderProps, state),\n      outProps,\n      dataPart,\n      structuralStyle,\n      suppressRenderedHandlers\n    );\n  }\n  if (isValidElement(render)) {\n    return mergeRenderedElement(\n      render,\n      outProps,\n      dataPart,\n      structuralStyle,\n      suppressRenderedHandlers\n    );\n  }\n\n  return createElement(element, outProps as never, props.children);\n}\n\ntype RenderedProps = Record<string, unknown> & {\n  children?: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLElement>;\n  style?: CSSProperties;\n};\n\nfunction mergeRenderedElement(\n  element: ReactElement,\n  libraryProps: HTMLAttributes<HTMLElement> & {\n    \"data-hui-part\": string;\n    ref?: Ref<HTMLElement>;\n  },\n  dataPart: string,\n  structuralStyle: CSSProperties | undefined,\n  suppressRenderedHandlers: readonly string[] | undefined\n): ReactElement {\n  const rendered = element as ReactElement<RenderedProps>;\n  const renderedProps = rendered.props;\n  const renderedClass =\n    renderedProps.className === libraryProps.className\n      ? undefined\n      : renderedProps.className;\n  const merged: RenderedProps = {\n    ...renderedProps,\n    ...libraryProps,\n    className: mergeClassNames(renderedClass, libraryProps.className),\n    \"data-hui-part\": dataPart,\n    ref: mergeHeidiRefs(libraryProps.ref, renderedProps.ref),\n    style: {\n      ...libraryProps.style,\n      ...renderedProps.style,\n      ...structuralStyle\n    }\n  };\n\n  if (Object.prototype.hasOwnProperty.call(renderedProps, \"children\")) {\n    merged.children = renderedProps.children;\n  }\n\n  const suppressedHandlers = suppressRenderedHandlers\n    ? new Set(suppressRenderedHandlers)\n    : null;\n  for (const key of new Set([...Object.keys(renderedProps), ...Object.keys(libraryProps)])) {\n    const consumer = renderedProps[key];\n    const library = (libraryProps as unknown as Record<string, unknown>)[key];\n    if (suppressedHandlers?.has(key)) {\n      merged[key] = library;\n      continue;\n    }\n    if (isEventHandler(key, consumer) && isEventHandler(key, library)) {\n      merged[key] = composeUnknownHandlers(consumer, library);\n    }\n  }\n\n  return cloneElement(rendered, merged as never);\n}\n",
      "path": "packages/heidi-ui/src/_internal/render-element.ts",
      "target": "components/ui/heidi/_internal/render-element.ts",
      "type": "registry:ui"
    },
    {
      "content": "/**\n * Shared id sanitizer for heidi-ui hosts.\n *\n * React's useId() emits characters that are invalid in HTML id / attribute\n * selectors and in CSS identifiers (`«r0»` in React 19, `:r0:` earlier).\n * heidi-ui interpolates these ids into element ids, aria relationships, and\n * dashed-ident anchor names (`--hui-*-anchor-…`), so everything outside\n * [a-zA-Z0-9_-] is stripped.\n */\n\nexport function safeId(id: string): string {\n  return id.replace(/[^a-zA-Z0-9_-]/g, \"\");\n}\n",
      "path": "packages/heidi-ui/src/_internal/safe-id.ts",
      "target": "components/ui/heidi/_internal/safe-id.ts",
      "type": "registry:ui"
    },
    {
      "content": "import { useEffect, useLayoutEffect } from \"react\";\n\n/**\n * `useLayoutEffect` that does not warn on the server.\n *\n * ponytail: fifteen primitives imported `useLayoutEffect` straight from React.\n * Every one of them carries `\"use client\"`, which is easy to misread as\n * \"client-only\" — in the App Router it means \"hydrated on the client\", and the\n * component is still rendered to HTML on the server first. React logs\n * \"useLayoutEffect does nothing on the server\" for each one, so a consumer\n * doing SSR saw a wall of warnings the app that ships this library never saw,\n * because it renders these routes on the client path.\n *\n * The branch is evaluated ONCE at module scope, not per render, and it is\n * therefore stable across a component's lifetime — swapping which hook is\n * called between renders would violate the rules of hooks. `typeof document`\n * rather than `typeof window`: both work, but `document` is the thing the\n * effect actually needs, and it keeps the check honest in exotic runtimes that\n * define a partial `window`.\n *\n * Rejected: `useInsertionEffect`, which runs earlier but is specified for\n * style injection and is not a general layout hook; and per-file guards, which\n * is what the 15 copies would have become.\n */\nexport const useHeidiLayoutEffect =\n  typeof document === \"undefined\" ? useEffect : useLayoutEffect;\n",
      "path": "packages/heidi-ui/src/_internal/use-layout-effect.ts",
      "target": "components/ui/heidi/_internal/use-layout-effect.ts",
      "type": "registry:ui"
    }
  ],
  "name": "checkbox",
  "registryDependencies": [
    "@heidi-ui/heidi-tokens"
  ],
  "title": "Checkbox",
  "type": "registry:ui"
}