@epilot/zenith-react 0.2.0-next.5 → 0.2.0-next.7

package/dist/components/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sources":["../../../src/components/switch/switch.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\nconst ThumbIconChecked = React.forwardRef<SVGSVGElement>(\n  function ThumbIconChecked(_props, ref) {\n    const styles = useThumbIconStyles()\n\n    return (\n      <svg\n        ref={ref}\n        data-slot=\"switch-thumb-icon-checked\"\n        {...{ [SLOT_ATTR]: \"switch-thumb-icon-checked\" }}\n        role=\"presentation\"\n        className={styles.checked}\n        viewBox=\"0 0 1 6\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <rect width=\"1\" height=\"6\" fill=\"currentColor\" />\n      </svg>\n    )\n  }\n)\n\nconst ThumbIconUnchecked = React.forwardRef<SVGSVGElement>(\n  function ThumbIconUnchecked(_props, ref) {\n    const styles = useThumbIconStyles()\n\n    return (\n      <svg\n        ref={ref}\n        data-slot=\"switch-thumb-icon-unchecked\"\n        {...{ [SLOT_ATTR]: \"switch-thumb-icon-unchecked\" }}\n        role=\"presentation\"\n        className={styles.unchecked}\n        viewBox=\"0 0 4 6\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <rect\n          x=\"0.5\"\n          y=\"0.5\"\n          width=\"3\"\n          height=\"5\"\n          rx=\"1.5\"\n          stroke=\"currentColor\"\n        />\n      </svg>\n    )\n  }\n)\n\nconst ThumbIconDisabled = React.forwardRef<SVGSVGElement>(\n  function ThumbIconDisabled(_props, ref) {\n    const styles = useThumbIconStyles()\n\n    return (\n      <svg\n        ref={ref}\n        data-slot=\"switch-thumb-icon-disabled\"\n        {...{ [SLOT_ATTR]: \"switch-thumb-icon-disabled\" }}\n        className={styles.disabled}\n        viewBox=\"0 0 4 5\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M0 5V1.875H0.666667V1.25C0.666667 0.90625 0.797223 0.611979 1.05833 0.367188C1.31944 0.122396 1.63333 0 2 0C2.36667 0 2.68056 0.122396 2.94167 0.367188C3.20278 0.611979 3.33333 0.90625 3.33333 1.25V1.875H4V5H0ZM1.33333 1.875H2.66667V1.25C2.66667 1.07292 2.60278 0.924479 2.475 0.804687C2.34722 0.684896 2.18889 0.625 2 0.625C1.81111 0.625 1.65278 0.684896 1.525 0.804687C1.39722 0.924479 1.33333 1.07292 1.33333 1.25V1.875Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    )\n  }\n)\n\nconst useThumbIconStyles = makeZenithStyles({\n  checked: {\n    display: \"none\",\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    ...shorthands.inset(0),\n    color: \"currentColor\",\n    ...shorthands.margin(\"auto\"),\n  },\n  unchecked: {\n    display: \"none\",\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    ...shorthands.inset(0),\n    color: \"currentColor\",\n    ...shorthands.margin(\"auto\"),\n  },\n  disabled: {\n    display: \"inline-block\",\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    ...shorthands.inset(0),\n    color: \"currentColor\",\n    ...shorthands.margin(\"auto\"),\n  },\n})\n\nconst useRootStyles = makeZenithStyles({\n  root: {\n    ...nativeControl,\n    boxSizing: \"border-box\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    flexShrink: 0,\n    cursor: \"pointer\",\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", \"transparent\"),\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"all\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.focusRing,\n    },\n    \":disabled, &[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n  },\n  default: {\n    color: tokens.grayA8,\n    \"&[data-checked]\": { backgroundColor: tokens.accentSolid },\n    \"&[data-unchecked]\": { backgroundColor: tokens.grayA3 },\n  },\n  destructive: {\n    color: tokens.errorA8,\n    \"&[data-checked]\": { backgroundColor: tokens.errorSolid },\n    \"&[data-unchecked]\": { backgroundColor: tokens.errorA3 },\n  },\n  sm: {\n    ...boxModel,\n    width: \"1.625rem\",\n    height: \"1rem\",\n    \"& svg\": { width: \"0.25rem\", height: \"0.375rem\" },\n  },\n  base: {\n    ...boxModel,\n    width: \"2.125rem\",\n    height: \"1.25rem\",\n    \"& svg\": { width: \"0.4375rem\", height: \"0.5rem\" },\n  },\n  lg: {\n    ...boxModel,\n    width: \"2.625rem\",\n    height: \"1.5rem\",\n    \"& svg\": { width: \"0.5rem\", height: \"0.625rem\" },\n  },\n})\n\nconst useThumbStyles = makeZenithStyles({\n  thumb: {\n    ...boxModel,\n    position: \"relative\",\n    display: \"block\",\n    pointerEvents: \"none\",\n    borderRadius: \"9999px\",\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"transform\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \"&[data-checked]\": {\n      transform: \"translateX(calc(100% - 1px))\",\n    },\n    \"&[data-unchecked]\": {\n      transform: \"translateX(1px)\",\n    },\n    \"&[data-checked] [data-zenith-slot='switch-thumb-icon-checked']\": {\n      display: \"inline-block\",\n    },\n    \"&[data-unchecked] [data-zenith-slot='switch-thumb-icon-unchecked']\": {\n      display: \"inline-block\",\n    },\n  },\n  default: {\n    backgroundColor: tokens.grayContrast,\n    color: tokens.grayA8,\n    \"&[data-checked]\": { color: tokens.accentA11 },\n    \"&[data-unchecked]\": { color: tokens.grayA8 },\n  },\n  destructive: {\n    backgroundColor: tokens.errorContrast,\n    color: tokens.errorA8,\n    \"&[data-checked]\": { color: tokens.errorA11 },\n    \"&[data-unchecked]\": { color: tokens.errorA8 },\n  },\n  sm: {\n    ...boxModel,\n    width: \"0.75rem\",\n    height: \"0.75rem\",\n    \"& svg[data-zenith-slot='switch-thumb-icon-disabled']\": {\n      width: \"0.25rem\",\n    },\n  },\n  base: {\n    ...boxModel,\n    width: \"1rem\",\n    height: \"1rem\",\n    \"& svg[data-zenith-slot='switch-thumb-icon-disabled']\": {\n      width: \"0.375rem\",\n    },\n  },\n  lg: {\n    ...boxModel,\n    width: \"1.25rem\",\n    height: \"1.25rem\",\n    \"& svg[data-zenith-slot='switch-thumb-icon-disabled']\": {\n      width: \"0.4375rem\",\n    },\n  },\n})\n\n/**\n * `primary` is a deprecated alias of `default`, carried because v1 has it and real consumers still\n * pass it — entity-sidepanel's SettingsControls does. v1's own comment marks it deprecated and its\n * styles are byte-identical to `default`, so it is mapped rather than duplicated.\n *\n * @remarks `primary` is deprecated; use `default`.\n */\nexport type SwitchVariant = \"default\" | \"destructive\" | \"primary\"\nexport type SwitchSize = \"sm\" | \"base\" | \"lg\"\n\n/**\n * What `onCheckedChange` receives as its second argument: Base UI's change details, declared in\n * Zenith so that none of Base UI's internals reach the published declarations, where TypeScript 4\n * cannot parse them.\n */\ntype SwitchCheckedChangeDetails = {\n  /** Why the switch changed. Base UI reports every switch change as `none`. */\n  reason: \"none\"\n  /** The native event behind the change. */\n  event: Event\n  /** Keeps the switch in its current state. */\n  cancel: () => void\n  /** Lets the event propagate where the switch would otherwise stop it. */\n  allowPropagation: () => void\n  isCanceled: boolean\n  isPropagationAllowed: boolean\n  /** The element that caused the change, if any. */\n  trigger: Element | undefined\n}\n\n/**\n * The switch props Base UI adds to a `<button>`'s, declared in Zenith with Base UI's types. The\n * root renders a native `<button>`, so the DOM attributes, handlers, `ref`, `key`, `className`,\n * `style` and `value` stay the button's, as they were on Radix; `render` and `nativeButton` are\n * fixed by the wrapper.\n */\ntype SwitchRootProps = {\n  /**\n   * Whether the switch is currently active.\n   *\n   * To render an uncontrolled switch, use the `defaultChecked` prop instead.\n   */\n  checked?: boolean | undefined\n  /** Whether the component should ignore user interaction. */\n  disabled?: boolean | undefined\n  /** A ref to access the hidden `<input>` element. */\n  inputRef?: React.Ref<HTMLInputElement> | undefined\n  /** Identifies the field when a form is submitted. */\n  name?: string | undefined\n  /**\n   * Identifies the form that owns the hidden input.\n   * Useful when the switch is rendered outside the form.\n   */\n  form?: string | undefined\n  /** Event handler called when the switch is activated or deactivated. */\n  onCheckedChange?:\n    | ((checked: boolean, eventDetails: SwitchCheckedChangeDetails) => void)\n    | undefined\n  /** Whether the user should be unable to activate or deactivate the switch. */\n  readOnly?: boolean | undefined\n  /** Whether the user must activate the switch before submitting a form. */\n  required?: boolean | undefined\n  /**\n   * The value submitted with the form when the switch is off.\n   * By default, unchecked switches do not submit any value, matching native checkbox behavior.\n   */\n  uncheckedValue?: string | undefined\n}\n\nexport type SwitchProps = Omit<\n  React.ComponentPropsWithRef<\"button\">,\n  keyof SwitchRootProps\n> &\n  SwitchRootProps & {\n    /**\n     * `default` or `destructive`. `primary` is a **deprecated alias of `default`** with byte-\n     * identical styles, kept because v1 had it and consumers still pass it. Choosing it changes\n     * nothing; use `default`.\n     */\n    variant?: SwitchVariant\n    /** @default \"base\" */\n    size?: SwitchSize\n    showThumbIcon?: boolean\n    /**\n     * @deprecated Has no effect. The thumb is the switch's only child, so on Radix this rendered\n     * the thumb as the switch rather than an element of yours. Remove it.\n     */\n    asChild?: boolean\n  }\n\n// Base UI renders a <span> by default and moves the caller's id onto its hidden input. A native\n// button keeps the id, the HTMLButtonElement ref, native disabled and <label for> as Radix had them.\nconst ROOT_ELEMENT = <button />\n\nexport const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n  function Switch(\n    {\n      variant = \"default\",\n      size = \"base\",\n      className,\n      showThumbIcon = false,\n      asChild: _asChild,\n      value,\n      ...props\n    },\n    ref\n  ) {\n    const rootStyles = useRootStyles()\n    const thumbStyles = useThumbStyles()\n    // See SwitchVariant: `primary` is v1's deprecated alias for `default`, same styles.\n    const variantKey = variant === \"primary\" ? \"default\" : variant\n\n    return (\n      <SwitchPrimitive.Root\n        ref={ref}\n        nativeButton\n        render={ROOT_ELEMENT}\n        // Radix took the button's value type; Base UI submits a string, so it is converted here\n        // the way the button's value attribute stringified it.\n        value={value === undefined ? undefined : String(value)}\n        data-slot=\"switch\"\n        {...{ [SLOT_ATTR]: \"switch\" }}\n        className={mergeClasses(\n          rootStyles.root,\n          rootStyles[variantKey],\n          rootStyles[size],\n          className\n        )}\n        // Base UI types the root's handlers for its default <span>; the element is the button\n        // above, so the caller's button-typed handlers receive exactly the events they declare.\n        {...(props as SwitchPrimitive.Root.Props)}\n      >\n        <SwitchPrimitive.Thumb\n          data-slot=\"switch-thumb\"\n          {...{ [SLOT_ATTR]: \"switch-thumb\" }}\n          className={mergeClasses(\n            thumbStyles.thumb,\n            thumbStyles[variantKey],\n            thumbStyles[size]\n          )}\n        >\n          {showThumbIcon && !props.disabled && <ThumbIconChecked />}\n          {showThumbIcon && !props.disabled && <ThumbIconUnchecked />}\n          {showThumbIcon && props.disabled && <ThumbIconDisabled />}\n        </SwitchPrimitive.Thumb>\n      </SwitchPrimitive.Root>\n    )\n  }\n)\n"],"names":["ThumbIconChecked","React","_props","ref","styles","useThumbIconStyles","jsx","SLOT_ATTR","ThumbIconUnchecked","ThumbIconDisabled","makeZenithStyles","shorthands","useRootStyles","nativeControl","tokens.focusRing","tokens.grayA8","tokens.accentSolid","tokens.grayA3","tokens.errorA8","tokens.errorSolid","tokens.errorA3","boxModel","useThumbStyles","tokens.grayContrast","tokens.accentA11","tokens.errorContrast","tokens.errorA11","ROOT_ELEMENT","Switch","variant","size","className","showThumbIcon","_asChild","value","props","rootStyles","thumbStyles","variantKey","SwitchPrimitive","mergeClasses","jsxs"],"mappings":"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"}
+{"version":3,"file":"switch.js","sources":["../../../src/components/switch/switch.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { useOptionalFieldContext } from \"../field/field\"\nimport { HiddenInputBox } from \"../../lib/hidden-input-box\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\nconst ThumbIconChecked = React.forwardRef<SVGSVGElement>(\n  function ThumbIconChecked(_props, ref) {\n    const styles = useThumbIconStyles()\n\n    return (\n      <svg\n        ref={ref}\n        data-slot=\"switch-thumb-icon-checked\"\n        {...{ [SLOT_ATTR]: \"switch-thumb-icon-checked\" }}\n        role=\"presentation\"\n        className={styles.checked}\n        viewBox=\"0 0 1 6\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <rect width=\"1\" height=\"6\" fill=\"currentColor\" />\n      </svg>\n    )\n  }\n)\n\nconst ThumbIconUnchecked = React.forwardRef<SVGSVGElement>(\n  function ThumbIconUnchecked(_props, ref) {\n    const styles = useThumbIconStyles()\n\n    return (\n      <svg\n        ref={ref}\n        data-slot=\"switch-thumb-icon-unchecked\"\n        {...{ [SLOT_ATTR]: \"switch-thumb-icon-unchecked\" }}\n        role=\"presentation\"\n        className={styles.unchecked}\n        viewBox=\"0 0 4 6\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <rect\n          x=\"0.5\"\n          y=\"0.5\"\n          width=\"3\"\n          height=\"5\"\n          rx=\"1.5\"\n          stroke=\"currentColor\"\n        />\n      </svg>\n    )\n  }\n)\n\nconst ThumbIconDisabled = React.forwardRef<SVGSVGElement>(\n  function ThumbIconDisabled(_props, ref) {\n    const styles = useThumbIconStyles()\n\n    return (\n      <svg\n        ref={ref}\n        data-slot=\"switch-thumb-icon-disabled\"\n        {...{ [SLOT_ATTR]: \"switch-thumb-icon-disabled\" }}\n        className={styles.disabled}\n        viewBox=\"0 0 4 5\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M0 5V1.875H0.666667V1.25C0.666667 0.90625 0.797223 0.611979 1.05833 0.367188C1.31944 0.122396 1.63333 0 2 0C2.36667 0 2.68056 0.122396 2.94167 0.367188C3.20278 0.611979 3.33333 0.90625 3.33333 1.25V1.875H4V5H0ZM1.33333 1.875H2.66667V1.25C2.66667 1.07292 2.60278 0.924479 2.475 0.804687C2.34722 0.684896 2.18889 0.625 2 0.625C1.81111 0.625 1.65278 0.684896 1.525 0.804687C1.39722 0.924479 1.33333 1.07292 1.33333 1.25V1.875Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    )\n  }\n)\n\nconst useThumbIconStyles = makeZenithStyles({\n  checked: {\n    display: \"none\",\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    ...shorthands.inset(0),\n    color: \"currentColor\",\n    ...shorthands.margin(\"auto\"),\n  },\n  unchecked: {\n    display: \"none\",\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    ...shorthands.inset(0),\n    color: \"currentColor\",\n    ...shorthands.margin(\"auto\"),\n  },\n  disabled: {\n    display: \"inline-block\",\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    ...shorthands.inset(0),\n    color: \"currentColor\",\n    ...shorthands.margin(\"auto\"),\n  },\n})\n\nconst useRootStyles = makeZenithStyles({\n  root: {\n    ...nativeControl,\n    boxSizing: \"border-box\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    flexShrink: 0,\n    cursor: \"pointer\",\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", \"transparent\"),\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"all\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.focusRing,\n    },\n    \":disabled, &[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n  },\n  default: {\n    color: tokens.grayA8,\n    \"&[data-checked]\": { backgroundColor: tokens.accentSolid },\n    \"&[data-unchecked]\": { backgroundColor: tokens.grayA3 },\n  },\n  destructive: {\n    color: tokens.errorA8,\n    \"&[data-checked]\": { backgroundColor: tokens.errorSolid },\n    \"&[data-unchecked]\": { backgroundColor: tokens.errorA3 },\n  },\n  sm: {\n    ...boxModel,\n    width: \"1.625rem\",\n    height: \"1rem\",\n    \"& svg\": { width: \"0.25rem\", height: \"0.375rem\" },\n  },\n  base: {\n    ...boxModel,\n    width: \"2.125rem\",\n    height: \"1.25rem\",\n    \"& svg\": { width: \"0.4375rem\", height: \"0.5rem\" },\n  },\n  lg: {\n    ...boxModel,\n    width: \"2.625rem\",\n    height: \"1.5rem\",\n    \"& svg\": { width: \"0.5rem\", height: \"0.625rem\" },\n  },\n})\n\nconst useThumbStyles = makeZenithStyles({\n  thumb: {\n    ...boxModel,\n    position: \"relative\",\n    display: \"block\",\n    pointerEvents: \"none\",\n    borderRadius: \"9999px\",\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"transform\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \"&[data-checked]\": {\n      transform: \"translateX(calc(100% - 1px))\",\n    },\n    \"&[data-unchecked]\": {\n      transform: \"translateX(1px)\",\n    },\n    \"&[data-checked] [data-zenith-slot='switch-thumb-icon-checked']\": {\n      display: \"inline-block\",\n    },\n    \"&[data-unchecked] [data-zenith-slot='switch-thumb-icon-unchecked']\": {\n      display: \"inline-block\",\n    },\n  },\n  default: {\n    backgroundColor: tokens.grayContrast,\n    color: tokens.grayA8,\n    \"&[data-checked]\": { color: tokens.accentA11 },\n    \"&[data-unchecked]\": { color: tokens.grayA8 },\n  },\n  destructive: {\n    backgroundColor: tokens.errorContrast,\n    color: tokens.errorA8,\n    \"&[data-checked]\": { color: tokens.errorA11 },\n    \"&[data-unchecked]\": { color: tokens.errorA8 },\n  },\n  sm: {\n    ...boxModel,\n    width: \"0.75rem\",\n    height: \"0.75rem\",\n    \"& svg[data-zenith-slot='switch-thumb-icon-disabled']\": {\n      width: \"0.25rem\",\n    },\n  },\n  base: {\n    ...boxModel,\n    width: \"1rem\",\n    height: \"1rem\",\n    \"& svg[data-zenith-slot='switch-thumb-icon-disabled']\": {\n      width: \"0.375rem\",\n    },\n  },\n  lg: {\n    ...boxModel,\n    width: \"1.25rem\",\n    height: \"1.25rem\",\n    \"& svg[data-zenith-slot='switch-thumb-icon-disabled']\": {\n      width: \"0.4375rem\",\n    },\n  },\n})\n\n/**\n * `primary` is a deprecated alias of `default`, carried because v1 has it and real consumers still\n * pass it — entity-sidepanel's SettingsControls does. v1's own comment marks it deprecated and its\n * styles are byte-identical to `default`, so it is mapped rather than duplicated.\n *\n * @remarks `primary` is deprecated; use `default`.\n */\nexport type SwitchVariant = \"default\" | \"destructive\" | \"primary\"\nexport type SwitchSize = \"sm\" | \"base\" | \"lg\"\n\n/**\n * What `onCheckedChange` receives as its second argument: Base UI's change details, declared in\n * Zenith so that none of Base UI's internals reach the published declarations, where TypeScript 4\n * cannot parse them.\n */\ntype SwitchCheckedChangeDetails = {\n  /** Why the switch changed. Base UI reports every switch change as `none`. */\n  reason: \"none\"\n  /** The native event behind the change. */\n  event: Event\n  /** Keeps the switch in its current state. */\n  cancel: () => void\n  /** Lets the event propagate where the switch would otherwise stop it. */\n  allowPropagation: () => void\n  isCanceled: boolean\n  isPropagationAllowed: boolean\n  /** The element that caused the change, if any. */\n  trigger: Element | undefined\n}\n\n/**\n * The switch props Base UI adds to a `<button>`'s, declared in Zenith with Base UI's types. The\n * root renders a native `<button>`, so the DOM attributes, handlers, `ref`, `key`, `className`,\n * `style` and `value` stay the button's, as they were on Radix; `render` and `nativeButton` are\n * fixed by the wrapper.\n */\ntype SwitchRootProps = {\n  /**\n   * Whether the switch is currently active.\n   *\n   * To render an uncontrolled switch, use the `defaultChecked` prop instead.\n   */\n  checked?: boolean | undefined\n  /** Whether the component should ignore user interaction. */\n  disabled?: boolean | undefined\n  /** A ref to access the hidden `<input>` element. */\n  inputRef?: React.Ref<HTMLInputElement> | undefined\n  /** Identifies the field when a form is submitted. */\n  name?: string | undefined\n  /**\n   * Identifies the form that owns the hidden input.\n   * Useful when the switch is rendered outside the form.\n   */\n  form?: string | undefined\n  /** Event handler called when the switch is activated or deactivated. */\n  onCheckedChange?:\n    | ((checked: boolean, eventDetails: SwitchCheckedChangeDetails) => void)\n    | undefined\n  /** Whether the user should be unable to activate or deactivate the switch. */\n  readOnly?: boolean | undefined\n  /** Whether the user must activate the switch before submitting a form. */\n  required?: boolean | undefined\n  /**\n   * The value submitted with the form when the switch is off.\n   * By default, unchecked switches do not submit any value, matching native checkbox behavior.\n   */\n  uncheckedValue?: string | undefined\n}\n\nexport type SwitchProps = Omit<\n  React.ComponentPropsWithRef<\"button\">,\n  keyof SwitchRootProps\n> &\n  SwitchRootProps & {\n    /**\n     * `default` or `destructive`. `primary` is a **deprecated alias of `default`** with byte-\n     * identical styles, kept because v1 had it and consumers still pass it. Choosing it changes\n     * nothing; use `default`.\n     */\n    variant?: SwitchVariant\n    /** @default \"base\" */\n    size?: SwitchSize\n    showThumbIcon?: boolean\n    /**\n     * @deprecated Has no effect. The thumb is the switch's only child, so on Radix this rendered\n     * the thumb as the switch rather than an element of yours. Remove it.\n     */\n    asChild?: boolean\n  }\n\n// Base UI renders a <span> by default and moves the caller's id onto its hidden input. A native\n// button keeps the id, the HTMLButtonElement ref, native disabled and <label for> as Radix had them.\nconst ROOT_ELEMENT = <button />\n\nexport const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n  function Switch(\n    {\n      variant = \"default\",\n      size = \"base\",\n      className,\n      showThumbIcon = false,\n      asChild: _asChild,\n      value,\n      ...props\n    },\n    ref\n  ) {\n    const rootStyles = useRootStyles()\n    const inField = useOptionalFieldContext() !== null\n    const thumbStyles = useThumbStyles()\n    // See SwitchVariant: `primary` is v1's deprecated alias for `default`, same styles.\n    const variantKey = variant === \"primary\" ? \"default\" : variant\n\n    const root = (\n      <SwitchPrimitive.Root\n        ref={ref}\n        nativeButton\n        render={ROOT_ELEMENT}\n        // Radix took the button's value type; Base UI submits a string, so it is converted here\n        // the way the button's value attribute stringified it.\n        value={value === undefined ? undefined : String(value)}\n        data-slot=\"switch\"\n        {...{ [SLOT_ATTR]: \"switch\" }}\n        className={mergeClasses(\n          rootStyles.root,\n          rootStyles[variantKey],\n          rootStyles[size],\n          className\n        )}\n        // Base UI types the root's handlers for its default <span>; the element is the button\n        // above, so the caller's button-typed handlers receive exactly the events they declare.\n        {...(props as SwitchPrimitive.Root.Props)}\n      >\n        <SwitchPrimitive.Thumb\n          data-slot=\"switch-thumb\"\n          {...{ [SLOT_ATTR]: \"switch-thumb\" }}\n          className={mergeClasses(\n            thumbStyles.thumb,\n            thumbStyles[variantKey],\n            thumbStyles[size]\n          )}\n        >\n          {showThumbIcon && !props.disabled && <ThumbIconChecked />}\n          {showThumbIcon && !props.disabled && <ThumbIconUnchecked />}\n          {showThumbIcon && props.disabled && <ThumbIconDisabled />}\n        </SwitchPrimitive.Thumb>\n      </SwitchPrimitive.Root>\n    )\n\n    // A named switch's hidden input sits beside the button; the box keeps it in (#132). A Field is\n    // positioned already, so inside one the switch stays the layout item itself.\n    return props.name === undefined || inField ? (\n      root\n    ) : (\n      <HiddenInputBox slot=\"switch-box\" layout=\"inline-flex\">\n        {root}\n      </HiddenInputBox>\n    )\n  }\n)\n"],"names":["ThumbIconChecked","React","_props","ref","styles","useThumbIconStyles","jsx","SLOT_ATTR","ThumbIconUnchecked","ThumbIconDisabled","makeZenithStyles","shorthands","useRootStyles","nativeControl","tokens.focusRing","tokens.grayA8","tokens.accentSolid","tokens.grayA3","tokens.errorA8","tokens.errorSolid","tokens.errorA3","boxModel","useThumbStyles","tokens.grayContrast","tokens.accentA11","tokens.errorContrast","tokens.errorA11","ROOT_ELEMENT","Switch","variant","size","className","showThumbIcon","_asChild","value","props","rootStyles","inField","useOptionalFieldContext","thumbStyles","variantKey","root","SwitchPrimitive","mergeClasses","jsxs","HiddenInputBox"],"mappings":";;;;;;;;;AAWA,MAAMA,IAAmBC,EAAM;AAAA,EAC7B,SAA0BC,GAAQC,GAAK;AACrC,UAAMC,IAASC,EAAA;AAEf,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,aAAU;AAAA,QACJ,CAACI,CAAS,GAAG;AAAA,QACnB,MAAK;AAAA,QACL,WAAWH,EAAO;AAAA,QAClB,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAM;AAAA,QAEN,4BAAC,QAAA,EAAK,OAAM,KAAI,QAAO,KAAI,MAAK,eAAA,CAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EAGrD;AACF,GAEMI,IAAqBP,EAAM;AAAA,EAC/B,SAA4BC,GAAQC,GAAK;AACvC,UAAMC,IAASC,EAAA;AAEf,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,aAAU;AAAA,QACJ,CAACI,CAAS,GAAG;AAAA,QACnB,MAAK;AAAA,QACL,WAAWH,EAAO;AAAA,QAClB,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAM;AAAA,QAEN,UAAA,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,GAAE;AAAA,YACF,OAAM;AAAA,YACN,QAAO;AAAA,YACP,IAAG;AAAA,YACH,QAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MACT;AAAA,IAAA;AAAA,EAGN;AACF,GAEMG,IAAoBR,EAAM;AAAA,EAC9B,SAA2BC,GAAQC,GAAK;AACtC,UAAMC,IAASC,EAAA;AAEf,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,aAAU;AAAA,QACJ,CAACI,CAAS,GAAG;AAAA,QACnB,WAAWH,EAAO;AAAA,QAClB,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAM;AAAA,QAEN,UAAA,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAAA,EAGN;AACF,GAEMD,IAAqBK,EAAiB;AAAA,EAC1C,SAAS;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA,IACV,eAAe;AAAA,IACf,GAAGC,EAAW,MAAM,CAAC;AAAA,IACrB,OAAO;AAAA,IACP,GAAGA,EAAW,OAAO,MAAM;AAAA,EAAA;AAAA,EAE7B,WAAW;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,eAAe;AAAA,IACf,GAAGA,EAAW,MAAM,CAAC;AAAA,IACrB,OAAO;AAAA,IACP,GAAGA,EAAW,OAAO,MAAM;AAAA,EAAA;AAAA,EAE7B,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,eAAe;AAAA,IACf,GAAGA,EAAW,MAAM,CAAC;AAAA,IACrB,OAAO;AAAA,IACP,GAAGA,EAAW,OAAO,MAAM;AAAA,EAAA;AAE/B,CAAC,GAEKC,IAAgBF,EAAiB;AAAA,EACrC,MAAM;AAAA,IACJ,GAAGG;AAAA,IACH,WAAW;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,GAAGF,EAAW,OAAO,OAAO,SAAS,aAAa;AAAA,IAClD,WAAW;AAAA,IACX,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,oBAAoB;AAAA,IACpB,2CAA2C;AAAA,MACzC,oBAAoB;AAAA,IAAA;AAAA,IAEtB,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAcG;AAAAA,IAAO;AAAA,IAEvB,+BAA+B;AAAA,MAC7B,eAAe;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,SAAS;AAAA,IACP,OAAOC;AAAAA,IACP,mBAAmB,EAAE,iBAAiBC,EAAO;AAAA,IAC7C,qBAAqB,EAAE,iBAAiBC,EAAO;AAAA,EAAO;AAAA,EAExD,aAAa;AAAA,IACX,OAAOC;AAAAA,IACP,mBAAmB,EAAE,iBAAiBC,EAAO;AAAA,IAC7C,qBAAqB,EAAE,iBAAiBC,EAAO;AAAA,EAAQ;AAAA,EAEzD,IAAI;AAAA,IACF,GAAGC;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,EAAE,OAAO,WAAW,QAAQ,WAAA;AAAA,EAAW;AAAA,EAElD,MAAM;AAAA,IACJ,GAAGA;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,EAAE,OAAO,aAAa,QAAQ,SAAA;AAAA,EAAS;AAAA,EAElD,IAAI;AAAA,IACF,GAAGA;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,EAAE,OAAO,UAAU,QAAQ,WAAA;AAAA,EAAW;AAEnD,CAAC,GAEKC,IAAiBZ,EAAiB;AAAA,EACtC,OAAO;AAAA,IACL,GAAGW;AAAA,IACH,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,cAAc;AAAA,IACd,WAAW;AAAA,IACX,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,oBAAoB;AAAA,IACpB,2CAA2C;AAAA,MACzC,oBAAoB;AAAA,IAAA;AAAA,IAEtB,mBAAmB;AAAA,MACjB,WAAW;AAAA,IAAA;AAAA,IAEb,qBAAqB;AAAA,MACnB,WAAW;AAAA,IAAA;AAAA,IAEb,kEAAkE;AAAA,MAChE,SAAS;AAAA,IAAA;AAAA,IAEX,sEAAsE;AAAA,MACpE,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,SAAS;AAAA,IACP,iBAAiBE;AAAAA,IACjB,OAAOR;AAAAA,IACP,mBAAmB,EAAE,OAAOS,EAAO;AAAA,IACnC,qBAAqB,EAAE,OAAOT,EAAO;AAAA,EAAO;AAAA,EAE9C,aAAa;AAAA,IACX,iBAAiBU;AAAAA,IACjB,OAAOP;AAAAA,IACP,mBAAmB,EAAE,OAAOQ,EAAO;AAAA,IACnC,qBAAqB,EAAE,OAAOR,EAAO;AAAA,EAAQ;AAAA,EAE/C,IAAI;AAAA,IACF,GAAGG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,wDAAwD;AAAA,MACtD,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,MAAM;AAAA,IACJ,GAAGA;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,wDAAwD;AAAA,MACtD,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,IAAI;AAAA,IACF,GAAGA;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,wDAAwD;AAAA,MACtD,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ,CAAC,GA8FKM,sBAAgB,UAAA,EAAO,GAEhBC,IAAS3B,EAAM;AAAA,EAC1B,SACE;AAAA,IACE,SAAA4B,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,SAASC;AAAA,IACT,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELhC,GACA;AACA,UAAMiC,IAAaxB,EAAA,GACbyB,IAAUC,QAA8B,MACxCC,IAAcjB,EAAA,GAEdkB,IAAaX,MAAY,YAAY,YAAYA,GAEjDY,IACJ,gBAAAnC;AAAA,MAACoC,EAAgB;AAAA,MAAhB;AAAA,QACC,KAAAvC;AAAA,QACA,cAAY;AAAA,QACZ,QAAQwB;AAAA,QAGR,OAAOO,MAAU,SAAY,SAAY,OAAOA,CAAK;AAAA,QACrD,aAAU;AAAA,QACJ,CAAC3B,CAAS,GAAG;AAAA,QACnB,WAAWoC;AAAA,UACTP,EAAW;AAAA,UACXA,EAAWI,CAAU;AAAA,UACrBJ,EAAWN,CAAI;AAAA,UACfC;AAAA,QAAA;AAAA,QAID,GAAII;AAAA,QAEL,UAAA,gBAAAS;AAAA,UAACF,EAAgB;AAAA,UAAhB;AAAA,YACC,aAAU;AAAA,YACJ,CAACnC,CAAS,GAAG;AAAA,YACnB,WAAWoC;AAAA,cACTJ,EAAY;AAAA,cACZA,EAAYC,CAAU;AAAA,cACtBD,EAAYT,CAAI;AAAA,YAAA;AAAA,YAGjB,UAAA;AAAA,cAAAE,KAAiB,CAACG,EAAM,YAAY,gBAAA7B,EAACN,GAAA,CAAA,CAAiB;AAAA,cACtDgC,KAAiB,CAACG,EAAM,8BAAa3B,GAAA,CAAA,CAAmB;AAAA,cACxDwB,KAAiBG,EAAM,YAAY,gBAAA7B,EAACG,GAAA,CAAA,CAAkB;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACzD;AAAA,IAAA;AAMJ,WAAO0B,EAAM,SAAS,UAAaE,IACjCI,IAEA,gBAAAnC,EAACuC,GAAA,EAAe,MAAK,cAAa,QAAO,eACtC,UAAAJ,EAAA,CACH;AAAA,EAEJ;AACF;"}

package/dist/lib/hidden-input-box.js

@@ -0,0 +1,26 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as s from "react";
+import { mergeClasses as r, SLOT_ATTR as a } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as p } from "../styles/make-styles.js";
+const f = p({
+  box: { position: "relative" },
+  "inline-flex": { display: "inline-flex", flexShrink: 0 },
+  "inline-block": { display: "inline-block", flexShrink: 0, lineHeight: 0 },
+  block: { display: "block", width: "100%" }
+}), k = s.forwardRef(function({ slot: e, layout: n, children: o }, l) {
+  const i = f();
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      ref: l,
+      "data-slot": e,
+      [a]: e,
+      className: r(i.box, i[n]),
+      children: o
+    }
+  );
+});
+export {
+  k as HiddenInputBox
+};
+//# sourceMappingURL=hidden-input-box.js.map

package/dist/lib/hidden-input-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hidden-input-box.js","sources":["../../src/lib/hidden-input-box.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../renderer/contract\"\nimport { makeZenithStyles } from \"../styles/make-styles\"\n\n/**\n * The positioned box a named control's hidden input needs (#132). With a `name`, Base UI renders\n * the control's form input beside the control, not inside it, with `position: absolute` and no\n * offsets, so the input's containing block is the nearest positioned ancestor. Under static\n * ancestors that is the page: in an app mounted in an `overflow: auto` box the inputs escape it and\n * stretch the document, and the viewport grows a scrollbar. Base UI offers no way to render the\n * input inside the control, so this box holds both.\n *\n * Its display follows the control's, so it sizes and aligns like it: an inline-flex or inline-block\n * control gets the same (the box's baseline and size are the control's), a full-width control a\n * full-width block. The inline-block box sets `line-height: 0` so its own line adds nothing in a\n * flex row or grid, where it becomes a block; a control that holds no text (Checkbox) is the only\n * one to use it. The caller's classes, ref and props stay on the control, but the box is the flex\n * or grid item, so placement the control asks for (an auto margin, `align-self`/`justify-self`,\n * grid or flex placement) no longer reaches the parent: it goes on an element around the control.\n * A control renders the box only when it has a name and is outside a Field: without a name Base UI\n * pins the input to the viewport (`position: fixed`), where it adds no overflow, and a Field is\n * positioned already.\n */\nconst useStyles = makeZenithStyles({\n  box: { position: \"relative\" },\n  \"inline-flex\": { display: \"inline-flex\", flexShrink: 0 },\n  \"inline-block\": { display: \"inline-block\", flexShrink: 0, lineHeight: 0 },\n  block: { display: \"block\", width: \"100%\" },\n})\n\nexport type HiddenInputBoxProps = {\n  /** The box's slot name, `<control>-box`. */\n  slot: string\n  layout: \"inline-flex\" | \"inline-block\" | \"block\"\n  children: React.ReactNode\n}\n\nexport const HiddenInputBox = React.forwardRef<\n  HTMLSpanElement,\n  HiddenInputBoxProps\n>(function HiddenInputBox({ slot, layout, children }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot={slot}\n      {...{ [SLOT_ATTR]: slot }}\n      className={mergeClasses(styles.box, styles[layout])}\n    >\n      {children}\n    </span>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","HiddenInputBox","React","slot","layout","children","ref","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":";;;;AA0BA,MAAMA,IAAYC,EAAiB;AAAA,EACjC,KAAK,EAAE,UAAU,WAAA;AAAA,EACjB,eAAe,EAAE,SAAS,eAAe,YAAY,EAAA;AAAA,EACrD,gBAAgB,EAAE,SAAS,gBAAgB,YAAY,GAAG,YAAY,EAAA;AAAA,EACtE,OAAO,EAAE,SAAS,SAAS,OAAO,OAAA;AACpC,CAAC,GASYC,IAAiBC,EAAM,WAGlC,SAAwB,EAAE,MAAAC,GAAM,QAAAC,GAAQ,UAAAC,EAAA,GAAYC,GAAK;AACzD,QAAMC,IAASR,EAAA;AAEf,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAWH;AAAA,MACL,CAACM,CAAS,GAAGN;AAAA,MACnB,WAAWO,EAAaH,EAAO,KAAKA,EAAOH,CAAM,CAAC;AAAA,MAEjD,UAAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/tokens.json

@@ -1,7 +1,7 @@
 {
   "$comment": "GENERATED. Design token values for consumers that do not render this package's React components. Compile these into your own CSS under your own names at your own build time; do not reference this package's runtime custom properties, whose names are content-hashed and change with their values. `themes.light`/`themes.dark` are mode-resolved; `densities.compact`/`densities.normal`/`densities.comfortable` resolve the component layer's geometry tokens (WP9A-ACCEPTANCE-WP9B1) and carry no mode of their own — do not read a value out of `themes` for a key that only exists under `densities`, or the reverse. This file is copied verbatim to this package's public `tokens.json` export (`package.json`'s `build` script, `cp src/generated/values.generated.json dist/tokens.json`).",
   "package": "@epilot/zenith-react",
-  "version": "0.2.0-next.5",
+  "version": "0.2.0-next.7",
   "themes": {
     "light": {
       "accent-1": "#fcfdfe",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epilot/zenith-react",
-  "version": "0.2.0-next.5",
+  "version": "0.2.0-next.7",
   "description": "Zenith React components, styled with Griffel and designed for isolated micro-frontend delivery",
   "type": "module",
   "repository": {
@@ -93,7 +93,7 @@
     "verify:consumer": "bun ../../scripts/verify-packed-consumer.ts"
   },
   "dependencies": {
-    "@epilot/zenith-runtime": "0.2.0-next.3"
+    "@epilot/zenith-runtime": "0.2.0-next.5"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -104,7 +104,7 @@
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@epilot/zenith-tokens": "0.2.0-next.5",
+    "@epilot/zenith-tokens": "0.2.0-next.7",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.11.2",
     "@testing-library/react": "^16.3.2",