@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/_chunk/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../../src/switch/ToggleSwitch.tsx","../../src/switch/index.tsx"],"sourcesContent":["// @ts-nocheck\nimport { type JSX, splitProps, mergeProps, Show, useContext } from \"solid-js\";\nimport {\n  getSlottedContextProps,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n} from \"../button/spectrum-context\";\nimport { SwitchContext } from \".\";\nimport { type AriaSwitchProps, type Direction, useLocale } from \"@proyecto-viviana/solidaria\";\nimport {\n  SwitchField as HeadlessSwitchField,\n  SwitchButton as HeadlessSwitchButton,\n  type SwitchFieldRenderProps,\n  type SwitchButtonRenderProps,\n  type ToggleSwitchRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { Text } from \"../text\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, focusRing, fontRelative, style } from \"../style\" with { type: \"macro\" };\nimport {\n  controlFont,\n  controlSize,\n  getAllowedOverrides,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { CenterBaseline } from \"../icon/center-baseline\";\nimport AlertTriangleIcon from \"../icon/s2wf-icons/AlertTriangleIcon\";\nimport { useProviderProps } from \"../provider\";\nimport { useFormProps, useIsInForm } from \"../form\";\n\nexport type SwitchSize = \"S\" | \"M\" | \"L\" | \"XL\" | \"sm\" | \"md\" | \"lg\";\ntype S2SwitchSize = \"S\" | \"M\" | \"L\" | \"XL\";\n\nexport interface ToggleSwitchProps extends Omit<AriaSwitchProps, \"children\"> {\n  /**\n   * A slot name, used to inject props from a parent slotted context (mirrors\n   * upstream's `SlotProps`; our headless `ToggleSwitchProps` already extends it).\n   */\n  slot?: string | null;\n  /** The size of the Switch. */\n  size?: SwitchSize;\n  /** Whether the Switch should be displayed with an emphasized style. */\n  isEmphasized?: boolean;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Additional CSS class name. */\n  class?: string;\n  /** A description for the Switch. */\n  description?: JSX.Element;\n  /** An error message for the Switch (rendered when invalid). */\n  errorMessage?: JSX.Element;\n  /** Label text for the Switch. */\n  children?: JSX.Element;\n}\n\ninterface SwitchStyleProps {\n  size?: S2SwitchSize;\n  isEmphasized?: boolean;\n}\n\ntype SwitchStyleState = ToggleSwitchRenderProps & SwitchStyleProps;\n\n// The field grid — byte-faithful to upstream S2 `Switch.tsx` local `field`.\n// Unlike the Checkbox field, upstream Switch passes `isInForm` to the field, so\n// the `gridColumnStart:{isInForm:'field'}` branch is live here (dormant for the\n// demo, which is never in a Form).\nconst switchFieldStyle = style<\n  SwitchStyleState & { isInForm?: boolean; isNoVisibleLabel?: boolean }\n>(\n  {\n    display: \"grid\",\n    gridTemplateColumns: {\n      default: [\"max-content\", \"1fr\"],\n      isNoVisibleLabel: [\"max-content\"],\n    },\n    columnGap: \"text-to-control\",\n    width: \"fit\",\n    font: controlFont(),\n    \"--field-height\": {\n      type: \"height\",\n      value: controlSize(),\n    },\n    rowGap: \"calc(var(--field-height) - 1lh)\",\n    gridColumnStart: {\n      isInForm: \"field\",\n    },\n  },\n  getAllowedOverrides(),\n);\n\n// The subgrid wrapper (SwitchButton `<label>`) — byte-faithful to upstream\n// `wrapper`. Plain style() (no getAllowedOverrides). Note: unlike the Checkbox\n// wrapper, the Switch wrapper has no `position:relative` and no isInForm branch;\n// upstream still calls it with `{...renderProps, isInForm, size}` (both ignored).\nconst wrapper = style<SwitchStyleState & { isInForm?: boolean }>({\n  display: \"grid\",\n  gridTemplateColumns: \"subgrid\",\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  alignItems: \"baseline\",\n  transition: \"colors\",\n  color: {\n    default: baseColor(\"neutral\"),\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  disableTapHighlight: true,\n});\n\n// The track — structurally upstream's `track`, with one deliberate Glasselated\n// divergence in the `backgroundColor.isSelected` VALUES (see the note there).\n// The prior port carried a separate, self-inflicted divergence in that same\n// block: a custom `disabledSelectedTrackBackground` light-dark value AND an\n// `isDisabled`-first condition order (which, under last-match-wins, let disabled\n// beat emphasized). Upstream's exact\n// `{default, isEmphasized, forcedColors, isDisabled}` key order and `gray-400`\n// disabled-selected value are kept — the order is load-bearing, so `isDisabled`\n// must stay last to win over the selected fills.\nconst track = style<SwitchStyleState>({\n  ...focusRing(),\n  borderRadius: \"full\",\n  \"--trackWidth\": {\n    type: \"width\",\n    value: fontRelative(26),\n  },\n  \"--trackHeight\": {\n    type: \"height\",\n    value: controlSize(\"sm\"),\n  },\n  width: \"--trackWidth\",\n  height: \"--trackHeight\",\n  boxSizing: \"border-box\",\n  borderWidth: 1,\n  borderStyle: \"solid\",\n  transition: \"default\",\n  forcedColorAdjust: \"none\",\n  borderColor: {\n    default: baseColor(\"gray-800\"),\n    forcedColors: \"ButtonBorder\",\n    isDisabled: {\n      default: \"gray-400\",\n      forcedColors: \"GrayText\",\n    },\n    isSelected: \"transparent\",\n  },\n  backgroundColor: {\n    default: \"gray-25\",\n    isSelected: {\n      // Accent-on-selection is the register's selection idiom, not an emphasis\n      // variant, so the accent fill moves to `default` — previously a\n      // non-emphasized selected switch filled with the text ramp and rendered no\n      // accent at all. `isEmphasized` is preserved as a real, visible step rather\n      // than deleted: it goes one stop deeper in the same accent channel\n      // (accent-1000), matching checkbox/index.tsx:407-408, so the public prop\n      // keeps changing what it renders. Both stops are held flat rather than\n      // moved to the lightDark(\"accent-900\",\"accent-700\") idiom used by\n      // Button/Tag, because the handle riding this track is `gray-25` (below),\n      // which flips to near-black in dark (style/glasselated-ramps.ts) — near-black\n      // on dark accent-700 would not clear AA.\n      default: baseColor(\"accent-900\"),\n      isEmphasized: baseColor(\"accent-1000\"),\n      forcedColors: \"Highlight\",\n      isDisabled: {\n        default: \"gray-400\",\n        forcedColors: \"GrayText\",\n      },\n    },\n  },\n});\n\nconst handle = style<SwitchStyleState>({\n  height: \"full\",\n  aspectRatio: \"square\",\n  borderRadius: \"full\",\n  backgroundColor: {\n    default: baseColor(\"neutral\"),\n    isDisabled: {\n      default: \"gray-400\",\n      forcedColors: \"GrayText\",\n    },\n    isSelected: \"gray-25\",\n  },\n  transition: \"default\",\n});\n\n// Individual help text. Byte-faithful to upstream Field.tsx `helpTextStyles`,\n// folding in the Switch's inline override (`gridColumnStart:1, paddingTop:0`).\n// Rendered through the field's `Text` description/errorMessage slot contract.\n// NOTE: the switch demo never sets description/errorMessage and is never invalid,\n// so upstream's `HelpText` is `null` in every cert case — this path is faithful\n// but dormant here (matches the Checkbox rebuild).\nconst switchHelpText = style<SwitchStyleState & { isInvalid?: boolean; isDisabled?: boolean }>({\n  gridArea: \"helptext\",\n  display: \"flex\",\n  alignItems: \"baseline\",\n  gap: \"text-to-visual\",\n  font: controlFont(),\n  color: {\n    default: \"neutral-subdued\",\n    isInvalid: {\n      default: \"negative\",\n      forcedColors: \"Mark\",\n    },\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n  contain: \"inline-size\",\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n  gridColumnStart: 1,\n  paddingTop: 0,\n});\n\nfunction normalizeSwitchSize(size: SwitchSize | undefined): S2SwitchSize {\n  switch (size) {\n    case \"sm\":\n      return \"S\";\n    case \"md\":\n      return \"M\";\n    case \"lg\":\n      return \"L\";\n    case \"S\":\n    case \"M\":\n    case \"L\":\n    case \"XL\":\n      return size;\n    default:\n      return \"M\";\n  }\n}\n\n// Mirrors upstream's inline `transformStyle`. In the default state the handle is\n// 8px smaller than the track; when selected it grows to 6px smaller. CSS cannot\n// divide by a unit, so the scale is emulated with a 3d perspective transform\n// (scale = perspective / (perspective - translateZ), translateZ hard-coded -4px).\nfunction switchHandleTransform(isSelected: boolean, direction: Direction): JSX.CSSProperties {\n  const placement =\n    direction === \"ltr\"\n      ? \"translateX(calc(var(--trackWidth) - 100% - 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)\"\n      : \"translateX(calc(100% - var(--trackWidth) + 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)\";\n\n  return {\n    transform: isSelected\n      ? placement\n      : \"perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)\",\n  };\n}\n\n// Faithful reimplementation of upstream `pressScale(handleRef, transformStyle)`:\n// combines the base transform with a press-time perspective scale.\nfunction switchHandlePressStyle(\n  element: HTMLDivElement | undefined,\n  renderProps: ToggleSwitchRenderProps,\n  direction: Direction,\n): JSX.CSSProperties {\n  const pressStyle = {\n    ...switchHandleTransform(renderProps.isSelected, direction),\n  } as JSX.CSSProperties;\n  const styleRecord = pressStyle as Record<string, string | number | undefined>;\n  const willChange = styleRecord[\"will-change\"] ?? \"\";\n  styleRecord[\"will-change\"] = `${willChange} transform`.trim();\n\n  if (renderProps.isPressed && element) {\n    const { width, height } = element.getBoundingClientRect();\n    const perspective = Math.max(height, width / 3, 24);\n    pressStyle.transform =\n      `${pressStyle.transform ?? \"\"} perspective(${perspective}px) translate3d(0, 0, -2px)`.trim();\n  }\n\n  return pressStyle;\n}\n\n/**\n * A switch allows users to turn an individual option on or off.\n * It is usually used to activate or deactivate a specific setting.\n *\n * Named \"ToggleSwitch\" to avoid conflict with SolidJS's built-in Switch component.\n *\n * Composes the RAC-1.19 form-field split faithfully to upstream S2 `Switch`:\n * a `SwitchField` grid wrapper (owns state/validation/help text) containing a\n * `SwitchButton` subgrid control (label + track/handle indicator) + `HelpText`.\n */\nexport function ToggleSwitch(props: ToggleSwitchProps): JSX.Element {\n  const isInForm = useIsInForm();\n  const providerProps = useProviderProps(useFormProps(props));\n  const contextProps = getSlottedContextProps(useContext(SwitchContext), props.slot);\n  const merged = mergeProps(providerProps, contextProps ?? {}, props);\n\n  const [local, headlessProps] = splitProps(merged, [\n    \"size\",\n    \"isEmphasized\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"children\",\n    \"description\",\n    \"errorMessage\",\n    \"slot\",\n  ]);\n\n  const locale = useLocale();\n  const size = () => normalizeSwitchSize(local.size);\n  const isEmphasized = () => local.isEmphasized;\n  const direction = () => locale().direction;\n  // Reading `local.children` never invokes a component thunk (a function is\n  // truthy as-is), so this is safe alongside the `{local.children}` render.\n  const hasLabel = () => !!local.children;\n  let handleElement: HTMLDivElement | undefined;\n\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n  // The field grid className. Mirrors upstream `field({...renderProps, isInForm,\n  // size, isNoVisibleLabel}, styles)`.\n  const getFieldClassName = (renderProps: SwitchFieldRenderProps): string =>\n    [\n      contextProps?.UNSAFE_className,\n      props.UNSAFE_className,\n      props.class,\n      switchFieldStyle(\n        {\n          ...renderProps,\n          isInForm,\n          size: size(),\n          isNoVisibleLabel: !hasLabel(),\n        },\n        mergedStyles(),\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const renderHelpText = (fieldRenderProps: SwitchFieldRenderProps): JSX.Element => (\n    <>\n      <Show when={local.description && !fieldRenderProps.isInvalid}>\n        <Text\n          slot=\"description\"\n          styles={switchHelpText({ size: size(), isDisabled: fieldRenderProps.isDisabled })}\n        >\n          {local.description}\n        </Text>\n      </Show>\n      <Show when={fieldRenderProps.isInvalid && local.errorMessage}>\n        <Text\n          slot=\"errorMessage\"\n          styles={switchHelpText({\n            size: size(),\n            isInvalid: true,\n            isDisabled: fieldRenderProps.isDisabled,\n          })}\n        >\n          <CenterBaseline>\n            <AlertTriangleIcon aria-hidden=\"true\" />\n          </CenterBaseline>\n          <span>{local.errorMessage}</span>\n        </Text>\n      </Show>\n    </>\n  );\n\n  return (\n    <HeadlessSwitchField\n      {...headlessProps}\n      slot={local.slot ?? undefined}\n      class={getFieldClassName}\n      style={mergedUnsafeStyle()}\n    >\n      {(fieldRenderProps: SwitchFieldRenderProps) => (\n        <>\n          <HeadlessSwitchButton\n            class={(renderProps: SwitchButtonRenderProps) =>\n              wrapper({ ...renderProps, isInForm, size: size() })\n            }\n          >\n            {(renderProps: SwitchButtonRenderProps) => (\n              <>\n                <CenterBaseline>\n                  <div\n                    class={track({ ...renderProps, size: size(), isEmphasized: isEmphasized() })}\n                  >\n                    <div\n                      ref={handleElement}\n                      class={handle({ ...renderProps, size: size(), isEmphasized: isEmphasized() })}\n                      style={switchHandlePressStyle(handleElement, renderProps, direction())}\n                    />\n                  </div>\n                </CenterBaseline>\n                {local.children}\n              </>\n            )}\n          </HeadlessSwitchButton>\n          {renderHelpText(fieldRenderProps)}\n        </>\n      )}\n    </HeadlessSwitchField>\n  );\n}\n","import { type JSX, createContext, createMemo } from \"solid-js\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport {\n  ToggleButtonGroup as HeadlessToggleButtonGroup,\n  ToggleButton as HeadlessToggleButton,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { type SpectrumContextValue } from \"../button/spectrum-context\";\nimport { type ToggleSwitchProps } from \"./ToggleSwitch\";\nimport { style } from \"../style\" with { type: \"macro\" };\n\nexport {\n  ToggleSwitch,\n  ToggleSwitch as Switch,\n  type ToggleSwitchProps,\n  type ToggleSwitchProps as SwitchProps,\n  type SwitchSize,\n} from \"./ToggleSwitch\";\n\nexport const SwitchContext = createContext<SpectrumContextValue<ToggleSwitchProps>>(null);\n\ninterface SwitchOption {\n  label: string;\n  value: string;\n}\n\nexport interface TabSwitchProps {\n  options: SwitchOption[];\n  value?: string;\n  onChange?: (value: string) => void;\n  class?: string;\n}\n\n// Static styling flows through the build-time S2 style() macro so the atomic CSS\n// ships in the package bundle. Only the sliding indicator's transform/width and\n// the button grid's column template are runtime-computed, so those stay inline.\n// TabSwitch has no S2 upstream. Its register twin is the island's segmented pill\n// (`.glx-pop-kind`, glasselated.css:2503-2528): an inset glass track with a subtle\n// border, and a RAISED pill under the active label — surface + primary ink + the\n// edge-glass rim. Not an accent fill: the island never paints white text over\n// `--accent-primary`, and in light that pairing lands well under 4.5:1 (the ramp\n// pins blue-900 to the brand #2e90fa in both columns, see glasselated-ramps.ts).\n\nconst trackStyles = style({\n  position: \"relative\",\n  backgroundColor: \"pasteboard\",\n  borderStyle: \"solid\",\n  borderWidth: 1,\n  borderColor: \"border-subtle\",\n  boxSizing: \"border-box\",\n  borderRadius: \"full\",\n  width: \"[250px]\",\n});\n\nconst indicatorStyles = style({\n  position: \"absolute\",\n  top: 0,\n  height: 32,\n  zIndex: 0,\n  backgroundColor: \"raised\",\n  boxShadow: \"edge-glass\",\n  borderRadius: \"full\",\n  transition: \"default\",\n});\n\nconst groupStyles = style({\n  position: \"relative\",\n  zIndex: 10,\n  display: \"grid\",\n  height: 32,\n});\n\nconst buttonStyles = style<{ isSelected?: boolean }>({\n  position: \"relative\",\n  zIndex: 10,\n  display: \"flex\",\n  justifyContent: \"center\",\n  alignItems: \"center\",\n  /* Native <button> chrome must be reset here: the UA's opaque ButtonFace fill and\n     2px outset border otherwise paint OVER the z-0 indicator, hiding the sliding\n     pill entirely — the label appears to sit on a bare grey lozenge instead. */\n  backgroundColor: \"transparent\",\n  borderStyle: \"none\",\n  padding: 0,\n  cursor: \"pointer\",\n  borderRadius: \"full\",\n  transition: \"default\",\n  font: \"ui-lg\",\n  fontWeight: { default: \"medium\", isSelected: \"extra-bold\" },\n  /* Island ink pair: resting labels are `--text-secondary`, the active one steps up\n     to `--text-primary` on the raised pill (glasselated.css:2512-2528). The old\n     `white` ink only read on the accent fill this pill no longer has. */\n  color: { default: \"neutral-subdued\", isSelected: \"neutral\" },\n});\n\n/**\n * A tab-style switch that allows users to select between two options.\n * Behavior is delegated to headless ToggleButtonGroup/ToggleButton primitives.\n */\nexport function TabSwitch(props: TabSwitchProps): JSX.Element {\n  const options = createMemo(() => props.options.slice(0, 2));\n  const selectedValue = createMemo(() => {\n    const match = options().find((option) => option.value === props.value);\n    return match?.value ?? options()[0]?.value;\n  });\n  const selectedIndex = createMemo(() => {\n    const index = options().findIndex((option) => option.value === selectedValue());\n    return index >= 0 ? index : 0;\n  });\n  const selectedKeys = createMemo<Set<Key>>(() => {\n    const value = selectedValue();\n    return value ? new Set<Key>([value]) : new Set<Key>();\n  });\n\n  const optionCount = createMemo(() => Math.max(options().length, 1));\n  const indicatorStyle = createMemo(() => ({\n    left: \"0\",\n    width: `calc(100% / ${optionCount()})`,\n    transform: `translateX(${selectedIndex() * 100}%)`,\n  }));\n  const layoutStyle = createMemo(() => ({\n    \"grid-template-columns\": `repeat(${optionCount()}, minmax(0, 1fr))`,\n  }));\n\n  return (\n    <div class={[trackStyles, props.class].filter(Boolean).join(\" \")}>\n      <div class={indicatorStyles} style={indicatorStyle()} />\n      <HeadlessToggleButtonGroup\n        selectionMode=\"single\"\n        selectedKeys={selectedKeys()}\n        class={groupStyles}\n        style={layoutStyle()}\n        aria-label=\"View mode\"\n      >\n        {options().map((option) => (\n          <HeadlessToggleButton\n            toggleKey={option.value}\n            onClick={() => props.onChange?.(option.value)}\n            class={() => buttonStyles({ isSelected: selectedValue() === option.value })}\n          >\n            <span>{option.label}</span>\n          </HeadlessToggleButton>\n        ))}\n      </HeadlessToggleButtonGroup>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"switch.js","names":["<SegmentedControl\n      aria-label={props[\"aria-label\"]}\n      class={props.class}\n      {...(props.value !== undefined ? { selectedKey: props.value } : {})}\n      onSelectionChange={(id) => {\n        props.onChange?.(String(id));\n      }}\n    >\n      {props.options.map((option) => (\n        <SegmentedControlItem id={option.value}>{option.label}</SegmentedControlItem>\n      ))}\n    </SegmentedControl>","onSelectionChange={(id) => {\n        props.onChange?.(String(id));\n      }}","<SegmentedControlItem id={option.value}>{option.label}</SegmentedControlItem>"],"sources":["../../src/switch/ToggleSwitch.tsx","../../src/switch/index.tsx"],"sourcesContent":["// @ts-nocheck\n\n/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Switch.tsx\n\n// Port of packages/@react-spectrum/s2/src/Switch.tsx.\n\nimport { Show, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  getSlottedContextProps,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n} from \"../button/spectrum-context\";\nimport { SwitchContext } from \".\";\nimport {\n  mergeProps,\n  type AriaSwitchProps,\n  type Direction,\n  useLocale,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n  SwitchField as HeadlessSwitchField,\n  SwitchButton as HeadlessSwitchButton,\n  type SwitchFieldRenderProps,\n  type SwitchButtonRenderProps,\n  type ToggleSwitchRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { Text } from \"../text\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, focusRing, fontRelative, style } from \"../style\" with { type: \"macro\" };\nimport {\n  controlFont,\n  controlSize,\n  getAllowedOverrides,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { CenterBaseline } from \"../icon/center-baseline\";\nimport AlertTriangleIcon from \"../icon/s2wf-icons/AlertTriangleIcon\";\nimport { useProviderProps } from \"../provider\";\nimport { useFormProps, useIsInForm } from \"../form\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport type SwitchSize = \"S\" | \"M\" | \"L\" | \"XL\" | \"sm\" | \"md\" | \"lg\";\ntype S2SwitchSize = \"S\" | \"M\" | \"L\" | \"XL\";\n\nexport interface ToggleSwitchProps extends Omit<AriaSwitchProps, \"children\"> {\n  /**\n   * A slot name, used to inject props from a parent slotted context (mirrors\n   * upstream's `SlotProps`; our headless `ToggleSwitchProps` already extends it).\n   */\n  slot?: string | null;\n  /** The size of the Switch. */\n  size?: SwitchSize;\n  /** Whether the Switch should be displayed with an emphasized style. */\n  isEmphasized?: boolean;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Additional CSS class name. */\n  class?: string;\n  /** A description for the Switch. */\n  description?: JSX.Element;\n  /** An error message for the Switch (rendered when invalid). */\n  errorMessage?: JSX.Element;\n  /** Label text for the Switch. */\n  children?: JSX.Element;\n}\n\ninterface SwitchStyleProps {\n  size?: S2SwitchSize;\n  isEmphasized?: boolean;\n}\n\ntype SwitchStyleState = ToggleSwitchRenderProps & SwitchStyleProps;\n\n// The field grid — byte-faithful to upstream S2 `Switch.tsx` local `field`.\n// Unlike the Checkbox field, upstream Switch passes `isInForm` to the field, so\n// the `gridColumnStart:{isInForm:'field'}` branch is live here (dormant for the\n// demo, which is never in a Form).\nconst switchFieldStyle = style<\n  SwitchStyleState & { isInForm?: boolean; isNoVisibleLabel?: boolean }\n>(\n  {\n    display: \"grid\",\n    gridTemplateColumns: {\n      default: [\"max-content\", \"1fr\"],\n      isNoVisibleLabel: [\"max-content\"],\n    },\n    columnGap: \"text-to-control\",\n    width: \"fit\",\n    font: controlFont(),\n    \"--field-height\": {\n      type: \"height\",\n      value: controlSize(),\n    },\n    rowGap: \"calc(var(--field-height) - 1lh)\",\n    gridColumnStart: {\n      isInForm: \"field\",\n    },\n  },\n  getAllowedOverrides(),\n);\n\n// The subgrid wrapper (SwitchButton `<label>`) — byte-faithful to upstream\n// `wrapper`. Plain style() (no getAllowedOverrides). Note: unlike the Checkbox\n// wrapper, the Switch wrapper has no `position:relative` and no isInForm branch;\n// upstream still calls it with `{...renderProps, isInForm, size}` (both ignored).\nconst wrapper = style<SwitchStyleState & { isInForm?: boolean }>({\n  display: \"grid\",\n  gridTemplateColumns: \"subgrid\",\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  alignItems: \"baseline\",\n  transition: \"colors\",\n  color: {\n    default: baseColor(\"neutral\"),\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  disableTapHighlight: true,\n});\n\n// The track — structurally upstream's `track`, with one deliberate Glasselated\n// divergence in the `backgroundColor.isSelected` VALUES (see the note there).\n// The prior port carried a separate, self-inflicted divergence in that same\n// block: a custom `disabledSelectedTrackBackground` light-dark value AND an\n// `isDisabled`-first condition order (which, under last-match-wins, let disabled\n// beat emphasized). Upstream's exact\n// `{default, isEmphasized, forcedColors, isDisabled}` key order and `gray-400`\n// disabled-selected value are kept — the order is load-bearing, so `isDisabled`\n// must stay last to win over the selected fills.\nconst track = style<SwitchStyleState>({\n  ...focusRing(),\n  /* Size S is the register's PIXEL toggle: a 34x18 rectangle with square corners\n   * and a 12x12 square knob inset 2px, sliding 2px<->18px\n   * (\"Terminal Glass App.dc.html\":250,521). Every other size keeps Spectrum's\n   * font-relative pill untouched, so the register geometry is an S-only branch on\n   * four coupled declarations: width, height, radius and the inset padding that\n   * positions the knob.\n   *\n   * The track is measured in ABSOLUTE px at S rather than `fontRelative`, because\n   * the handoff's toggle is a fixed chrome element that must line up with the\n   * neighbouring 14px checkbox and 12px radio regardless of the row's type size —\n   * a font-relative track drifts out of that column the moment a caller sets a\n   * larger font. */\n  borderRadius: {\n    default: \"full\",\n    size: {\n      S: \"none\",\n    },\n  },\n  \"--trackWidth\": {\n    type: \"width\",\n    value: {\n      default: fontRelative(26),\n      size: {\n        S: 34,\n      },\n    },\n  },\n  \"--trackHeight\": {\n    type: \"height\",\n    // `controlSize(\"sm\")` spelled flat: its S entry (14) is the one being\n    // replaced, and the macro cannot spread-and-override inside a value map.\n    value: {\n      default: 16,\n      size: {\n        S: 18,\n        L: 18,\n        XL: 20,\n      },\n    },\n  },\n  width: \"--trackWidth\",\n  height: \"--trackHeight\",\n  // The knob is a flow child, so its 2px inset is the track's padding: with the\n  // 1px border that puts the 12px square 3px inside the outer edge and leaves it\n  // exactly 16px of travel (34 - 2*1 - 2*2 - 12), which is the handoff's 2px->18px\n  // measured from the border box. Sizes other than S keep the transform-only\n  // placement they have always used.\n  padding: {\n    default: 0,\n    size: {\n      S: 2,\n    },\n  },\n  boxSizing: \"border-box\",\n  borderWidth: 1,\n  borderStyle: \"solid\",\n  transition: \"default\",\n  forcedColorAdjust: \"none\",\n  borderColor: {\n    default: baseColor(\"gray-800\"),\n    forcedColors: \"ButtonBorder\",\n    isDisabled: {\n      default: \"gray-400\",\n      forcedColors: \"GrayText\",\n    },\n    isSelected: \"transparent\",\n  },\n  backgroundColor: {\n    default: \"gray-25\",\n    isSelected: {\n      // Accent-on-selection is the register's selection idiom, not an emphasis\n      // variant, so the accent fill moves to `default` — previously a\n      // non-emphasized selected switch filled with the text ramp and rendered no\n      // accent at all. `isEmphasized` is preserved as a real, visible step rather\n      // than deleted: it goes one stop deeper in the same accent channel\n      // (accent-1000), matching checkbox/index.tsx:407-408, so the public prop\n      // keeps changing what it renders. Both stops are held flat rather than\n      // moved to the lightDark(\"accent-900\",\"accent-700\") idiom used by\n      // Button/Tag, because the handle riding this track is `gray-25` (below),\n      // which flips to near-black in dark (style/glasselated-ramps.ts) — near-black\n      // on dark accent-700 would not clear AA.\n      default: baseColor(\"accent-900\"),\n      isEmphasized: baseColor(\"accent-1000\"),\n      forcedColors: \"Highlight\",\n      isDisabled: {\n        default: \"gray-400\",\n        forcedColors: \"GrayText\",\n      },\n    },\n  },\n});\n\nconst handle = style<SwitchStyleState>({\n  // `full` is 100% of the track's CONTENT box, which the S padding above has\n  // already reduced to 12px — but it is pinned explicitly at S so the knob's size\n  // survives someone changing that padding, and so the contract is assertable.\n  height: {\n    default: \"full\",\n    size: {\n      S: 12,\n    },\n  },\n  aspectRatio: \"square\",\n  borderRadius: {\n    default: \"full\",\n    size: {\n      S: \"none\",\n    },\n  },\n  backgroundColor: {\n    default: baseColor(\"neutral\"),\n    isDisabled: {\n      default: \"gray-400\",\n      forcedColors: \"GrayText\",\n    },\n    isSelected: \"gray-25\",\n  },\n  transition: \"default\",\n  /* The register's knob SNAPS: three discrete frames over 0.12s, never a glide\n   * (`motionTiming.toggleKnob`, style/motion.ts:185 — the constant is a runtime\n   * export the macro cannot read, so the value is spelled here and cited there).\n   * Reduced motion collapses the duration to 0 rather than dropping the\n   * transition, because the knob's END position is the state readout: it must\n   * arrive, just without the travel. Gated on the CSS media condition, never a\n   * runtime matchMedia — an SSR'd inline transition is never removed on hydration\n   * (style/motion.ts header). */\n  transitionDuration: {\n    default: 120,\n    \"@media (prefers-reduced-motion: reduce)\": 0,\n  },\n  transitionTimingFunction: \"[steps(3)]\",\n});\n\n// Individual help text. Byte-faithful to upstream Field.tsx `helpTextStyles`,\n// folding in the Switch's inline override (`gridColumnStart:1, paddingTop:0`).\n// Rendered through the field's `Text` description/errorMessage slot contract.\n// NOTE: the switch demo never sets description/errorMessage and is never invalid,\n// so upstream's `HelpText` is `null` in every cert case — this path is faithful\n// but dormant here (matches the Checkbox rebuild).\nconst switchHelpText = style<SwitchStyleState & { isInvalid?: boolean; isDisabled?: boolean }>({\n  gridArea: \"helptext\",\n  display: \"flex\",\n  alignItems: \"baseline\",\n  gap: \"text-to-visual\",\n  font: controlFont(),\n  color: {\n    default: \"neutral-subdued\",\n    isInvalid: {\n      default: \"negative-1000\",\n      forcedColors: \"Mark\",\n    },\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n  contain: \"inline-size\",\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n  gridColumnStart: 1,\n  paddingTop: 0,\n});\n\nfunction normalizeSwitchSize(size: SwitchSize | undefined): S2SwitchSize {\n  switch (size) {\n    case \"sm\":\n      return \"S\";\n    case \"md\":\n      return \"M\";\n    case \"lg\":\n      return \"L\";\n    case \"S\":\n    case \"M\":\n    case \"L\":\n    case \"XL\":\n      return size;\n    default:\n      return \"M\";\n  }\n}\n\n// Mirrors upstream's inline `transformStyle`. In the default state the handle is\n// 8px smaller than the track; when selected it grows to 6px smaller. CSS cannot\n// divide by a unit, so the scale is emulated with a 3d perspective transform\n// (scale = perspective / (perspective - translateZ), translateZ hard-coded -4px).\nfunction switchHandleTransform(\n  isSelected: boolean,\n  direction: Direction,\n  size: S2SwitchSize,\n): JSX.CSSProperties {\n  /* The pixel toggle has NO grow-on-select: the knob is one fixed 12px square that\n   * slides, so S skips the perspective trick entirely. Leaving it in place would\n   * shrink the 12px square to ~10.7px at rest and snap it back on selection —\n   * exactly the soft, non-pixel motion the register is written against. Travel is\n   * the same border-box arithmetic as the track's padding: 34 - 12 - 6 = 16px. */\n  if (size === \"S\") {\n    const placement =\n      direction === \"ltr\"\n        ? \"translateX(calc(var(--trackWidth) - 100% - 6px))\"\n        : \"translateX(calc(100% - var(--trackWidth) + 6px))\";\n    return { transform: isSelected ? placement : \"none\" };\n  }\n\n  const placement =\n    direction === \"ltr\"\n      ? \"translateX(calc(var(--trackWidth) - 100% - 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)\"\n      : \"translateX(calc(100% - var(--trackWidth) + 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)\";\n\n  return {\n    transform: isSelected\n      ? placement\n      : \"perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)\",\n  };\n}\n\n// Faithful reimplementation of upstream `pressScale(handleRef, transformStyle)`:\n// combines the base transform with a press-time perspective scale.\nfunction switchHandlePressStyle(\n  element: HTMLDivElement | undefined,\n  renderProps: ToggleSwitchRenderProps,\n  direction: Direction,\n  size: S2SwitchSize,\n): JSX.CSSProperties {\n  const pressStyle = {\n    ...switchHandleTransform(renderProps.isSelected, direction, size),\n  } as JSX.CSSProperties;\n  const styleRecord = pressStyle as Record<string, string | number | undefined>;\n  const willChange = styleRecord[\"will-change\"] ?? \"\";\n  styleRecord[\"will-change\"] = `${willChange} transform`.trim();\n\n  if (renderProps.isPressed && element) {\n    const { width, height } = element.getBoundingClientRect();\n    const perspective = Math.max(height, width / 3, 24);\n    pressStyle.transform =\n      `${pressStyle.transform ?? \"\"} perspective(${perspective}px) translate3d(0, 0, -2px)`.trim();\n  }\n\n  return pressStyle;\n}\n\n/**\n * A switch allows users to turn an individual option on or off.\n * It is usually used to activate or deactivate a specific setting.\n *\n * Named \"ToggleSwitch\" to avoid conflict with SolidJS's built-in Switch component.\n *\n * Composes the RAC-1.19 form-field split faithfully to upstream S2 `Switch`:\n * a `SwitchField` grid wrapper (owns state/validation/help text) containing a\n * `SwitchButton` subgrid control (label + track/handle indicator) + `HelpText`.\n */\nexport function ToggleSwitch(props: ToggleSwitchProps): JSX.Element {\n  const isInForm = useIsInForm();\n  const providerProps = useProviderProps(useFormProps(props));\n  const [flags] = splitProps(providerProps, [\n    \"isQuiet\",\n    \"isEmphasized\",\n    \"isDisabled\",\n    \"isRequired\",\n    \"isReadOnly\",\n    \"validationState\",\n  ]);\n  const contextProps = getSlottedContextProps(useContext(SwitchContext), props.slot);\n  const merged = mergeProps(flags, contextProps ?? {}, props);\n\n  const [local, headlessProps] = splitProps(merged, [\n    \"size\",\n    \"isEmphasized\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"children\",\n    \"description\",\n    \"errorMessage\",\n    \"slot\",\n  ]);\n\n  const locale = useLocale();\n  const size = () => normalizeSwitchSize(local.size);\n  const isEmphasized = () => local.isEmphasized;\n  const direction = () => locale().direction;\n  // Reading `local.children` never invokes a component thunk (a function is\n  // truthy as-is), so this is safe alongside the `{local.children}` render.\n  const hasLabel = () => !!local.children;\n  let handleElement: HTMLDivElement | undefined;\n\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n  // The field grid className. Mirrors upstream `field({...renderProps, isInForm,\n  // size, isNoVisibleLabel}, styles)`.\n  const getFieldClassName = (renderProps: SwitchFieldRenderProps): string =>\n    [\n      contextProps?.UNSAFE_className,\n      props.UNSAFE_className,\n      props.class,\n      switchFieldStyle(\n        {\n          ...renderProps,\n          isInForm,\n          size: size(),\n          isNoVisibleLabel: !hasLabel(),\n        },\n        mergedStyles(),\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const renderHelpText = (fieldRenderProps: SwitchFieldRenderProps): JSX.Element => (\n    <>\n      <Show when={local.description && !fieldRenderProps.isInvalid}>\n        <Text\n          slot=\"description\"\n          styles={switchHelpText({ size: size(), isDisabled: fieldRenderProps.isDisabled })}\n        >\n          {local.description}\n        </Text>\n      </Show>\n      <Show when={fieldRenderProps.isInvalid && local.errorMessage}>\n        <Text\n          slot=\"errorMessage\"\n          styles={switchHelpText({\n            size: size(),\n            isInvalid: true,\n            isDisabled: fieldRenderProps.isDisabled,\n          })}\n        >\n          <CenterBaseline>\n            <AlertTriangleIcon aria-hidden=\"true\" />\n          </CenterBaseline>\n          <span>{local.errorMessage}</span>\n        </Text>\n      </Show>\n    </>\n  );\n\n  return (\n    <HeadlessSwitchField\n      {...headlessProps}\n      slot={local.slot ?? undefined}\n      class={getFieldClassName}\n      style={mergedUnsafeStyle()}\n    >\n      {(fieldRenderProps: SwitchFieldRenderProps) => (\n        <>\n          <HeadlessSwitchButton\n            class={(renderProps: SwitchButtonRenderProps) =>\n              wrapper({ ...renderProps, isInForm, size: size() })\n            }\n          >\n            {(renderProps: SwitchButtonRenderProps) => (\n              <>\n                <CenterBaseline>\n                  <div\n                    class={track({ ...renderProps, size: size(), isEmphasized: isEmphasized() })}\n                  >\n                    <div\n                      ref={handleElement}\n                      class={handle({ ...renderProps, size: size(), isEmphasized: isEmphasized() })}\n                      style={switchHandlePressStyle(\n                        handleElement,\n                        renderProps,\n                        direction(),\n                        size(),\n                      )}\n                    />\n                  </div>\n                </CenterBaseline>\n                {local.children}\n              </>\n            )}\n          </HeadlessSwitchButton>\n          {renderHelpText(fieldRenderProps)}\n        </>\n      )}\n    </HeadlessSwitchField>\n  );\n}\n","import { createContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { type SpectrumContextValue } from \"../button/spectrum-context\";\nimport { type ToggleSwitchProps } from \"./ToggleSwitch\";\nimport { SegmentedControl, SegmentedControlItem } from \"../segmentedcontrol\";\n\nexport {\n  ToggleSwitch,\n  ToggleSwitch as Switch,\n  type ToggleSwitchProps,\n  type ToggleSwitchProps as SwitchProps,\n  type SwitchSize,\n} from \"./ToggleSwitch\";\n\nexport const SwitchContext = createContext<SpectrumContextValue<ToggleSwitchProps>>(null);\n\ninterface SwitchOption {\n  label: string;\n  value: string;\n}\n\n/**\n * Props for the deprecated {@link TabSwitch} mapping wrapper. Prefer {@link SegmentedControl}.\n *\n * @deprecated Use {@link SegmentedControl}\n */\nexport interface TabSwitchProps {\n  /**\n   * Options rendered as {@link SegmentedControlItem} children (`value` → `id`, `label` → children).\n   */\n  options: SwitchOption[];\n  /**\n   * Selected option `value`, mapped to SegmentedControl `selectedKey`. Omit when unset so first-item register runs.\n   */\n  value?: string;\n  /**\n   * Called with the selected option `value` string. Maps to SegmentedControl `onSelectionChange`.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Class name applied to the SegmentedControl radiogroup (`class`).\n   */\n  class?: string;\n  /**\n   * Accessible name for the radiogroup. Passed through to SegmentedControl `aria-label`. Required; not defaulted.\n   */\n  \"aria-label\": string;\n}\n\n/**\n * Deprecated mapping wrapper onto {@link SegmentedControl}. Prefer SegmentedControl for new call sites.\n *\n * @deprecated Use {@link SegmentedControl}\n */\nexport function TabSwitch(props: TabSwitchProps): JSX.Element {\n  return (\n    <SegmentedControl\n      aria-label={props[\"aria-label\"]}\n      class={props.class}\n      {...(props.value !== undefined ? { selectedKey: props.value } : {})}\n      onSelectionChange={(id) => {\n        props.onChange?.(String(id));\n      }}\n    >\n      {props.options.map((option) => (\n        <SegmentedControlItem id={option.value}>{option.label}</SegmentedControlItem>\n      ))}\n    </SegmentedControl>\n  );\n}\n"],"mappings":"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"}