@react-spectrum/s2 3.0.0-nightly-5ed06068e-241105 → 3.0.0-nightly-09ccc53e7-241107

package/dist/SegmentedControl.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/SegmentedControl.tsx"],"sourcesContent":["/*\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\nimport {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, Radio, RadioGroup, RadioGroupStateContext, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {focusRing, size, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /** The id of the currently selected item (controlled). */\n  selectedKey?: string | null,\n  /** The id of the initial selected item (uncontrolled). */\n  defaultSelectedKey?: string,\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: string) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n  /**\n   * The content to display in the segmented control item.\n   */\n  children: ReactNode,\n  /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n  id: string,\n  /** Whether the item is disabled or not. */\n  isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<SegmentedControlProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style<{size: string}>({\n  font: 'control',\n  display: 'flex',\n  backgroundColor: 'gray-100',\n  borderRadius: 'lg',\n  width: 'full'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]:only-child)': size(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexBasis: 0,\n  flexGrow: 1,\n  flexShrink: 0,\n  minWidth: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  ...focusRing(),\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: string, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: string | null,\n  value?: string | null,\n  children?: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\nfunction SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultSelectedKey,\n    selectedKey,\n    onSelectionChange\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (value: string) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (onSelectionChange) {\n      onSelectionChange(value);\n    }\n  };\n\n  return (\n    <RadioGroup \n      {...props}\n      value={selectedKey}\n      defaultValue={defaultSelectedKey}\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl({size: 'M'}, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </RadioGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(RadioGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: string) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.setSelectedValue(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\nfunction SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLLabelElement>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef} = useContext(InternalSegmentedControlContext);\n  let state = useContext(RadioGroupStateContext);\n  let isSelected = props.id === state?.selectedValue;\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let isReduced = false;\n  if (window?.matchMedia) {\n    isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  useLayoutEffect(() => {\n    register?.(props.id);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !isReduced) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected]);\n\n  return (\n    <Radio \n      {...props}\n      value={props.id}\n      ref={domRef} \n      inputRef={inputRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps}, props.styles)} >\n      {({isSelected, isFocusVisible, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isFocusVisible, isDisabled})} ref={currentSelectedRef} />}\n          <Provider \n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({zIndex: 1, display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </Radio>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nconst _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);\nexport {_SegmentedControlItem as SegmentedControlItem};\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nconst _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);\nexport {_SegmentedControl as SegmentedControl};\n"],"names":[],"version":3,"file":"SegmentedControl.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/SegmentedControl.tsx"],"sourcesContent":["/*\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\nimport {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleGroupStateContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {focusRing, size, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /** Whether the items should divide the container width equally. */\n  isJustified?: boolean,\n  /** The id of the currently selected item (controlled). */\n  selectedKey?: Key | null,\n  /** The id of the initial selected item (uncontrolled). */\n  defaultSelectedKey?: Key,\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: Key) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n  /**\n   * The content to display in the segmented control item.\n   */\n  children: ReactNode,\n  /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n  id: Key,\n  /** Whether the item is disabled or not. */\n  isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<SegmentedControlProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style({\n  display: 'flex',\n  gap: 4,\n  backgroundColor: 'gray-100',\n  borderRadius: 'default',\n  width: 'fit'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  ...focusRing(),\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  font: 'control',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]):not(:has([data-rsp-slot=text]))': size(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexGrow: {\n    isJustified: 1\n  },\n  flexBasis: {\n    isJustified: 0\n  },\n  flexShrink: 0,\n  minWidth: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  userSelect: 'none',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  borderRadius: 'default',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: Key, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>,\n  isJustified?: boolean\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: Key | null,\n  value?: Key | null,\n  children?: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>,\n  isJustified?: boolean\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\nfunction SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultSelectedKey,\n    selectedKey,\n    onSelectionChange\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (values: Set<Key>) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (onSelectionChange) {\n      onSelectionChange(values.values().next().value);\n    }\n  };\n\n  return (\n    <ToggleButtonGroup \n      {...props}\n      selectedKeys={selectedKey != null ? [selectedKey] : undefined}\n      defaultSelectedKeys={defaultSelectedKey != null ? [defaultSelectedKey] : undefined}\n      disallowEmptySelection\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onSelectionChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl(null, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef} isJustified={props.isJustified}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </ToggleButtonGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(ToggleGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: Key) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.toggleKey(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef, isJustified: props.isJustified}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\nfunction SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {\n  let domRef = useFocusableRef(ref);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef, isJustified} = useContext(InternalSegmentedControlContext);\n  let state = useContext(ToggleGroupStateContext);\n  let isSelected = state?.selectedKeys.has(props.id);\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let isReduced = false;\n  if (window?.matchMedia) {\n    isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  useLayoutEffect(() => {\n    register?.(props.id);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !isReduced) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected]);\n\n  return (\n    <ToggleButton \n      {...props}\n      ref={domRef} \n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps, isJustified}, props.styles)} >\n      {({isSelected, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isDisabled})} ref={currentSelectedRef} />}\n          <Provider \n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({zIndex: 1, display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </ToggleButton>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nconst _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);\nexport {_SegmentedControlItem as SegmentedControlItem};\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nconst _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);\nexport {_SegmentedControl as SegmentedControl};\n"],"names":[],"version":3,"file":"SegmentedControl.cjs.map"}

package/dist/SegmentedControl.css

@@ -1,4 +1,48 @@
 @layer _.a {
+  .ic {
+    row-gap: .25rem;
+  }
+
+  .jc {
+    column-gap: .25rem;
+  }
+
+  .bg {
+    background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
+  }
+
+  .lJ {
+    width: fit-content;
+  }
+
+  ._La {
+    outline-style: none;
+  }
+
+  ._Lb {
+    outline-style: solid;
+  }
+
+  .dx {
+    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
+  }
+
+  ._Nc {
+    outline-width: 2px;
+  }
+
+  ._M-3t1z {
+    outline-offset: 2px;
+  }
+
+  .Uc {
+    position: relative;
+  }
+
+  ._zb {
+    forced-color-adjust: none;
+  }
+
   ._ca {
     font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
@@ -33,18 +77,6 @@
     line-height: 1.3;
   }
 
-  .bg {
-    background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
-  }
-
-  .Uc {
-    position: relative;
-  }
-
-  ._zb {
-    forced-color-adjust: none;
-  }
-
   .am {
     color: var(--lightningcss-light, #505050) var(--lightningcss-dark, #afafaf);
   }
@@ -73,14 +105,14 @@
     height: var(--k);
   }
 
-  .ha {
-    flex-basis: 0;
-  }
-
   ._9-3t1y {
     flex-grow: 1;
   }
 
+  .ha {
+    flex-basis: 0;
+  }
+
   ._2d {
     justify-content: center;
   }
@@ -89,32 +121,41 @@
     -webkit-tap-highlight-color: #0000;
   }
 
-  .-rwx0fg_e-b {
-    --iconPrimary: currentColor;
+  .__Da {
+    -webkit-user-select: none;
+    user-select: none;
   }
 
-  .-_375toq_k-j {
-    --k: calc(2rem * var(--s2-scale));
+  .ba {
+    background-color: #0000;
   }
 
-  ._La {
-    outline-style: none;
+  .wf {
+    border-style: none;
   }
 
-  ._Lb {
-    outline-style: solid;
+  ._vc {
+    border-start-start-radius: .5rem;
   }
 
-  .dx {
-    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
+  ._wc {
+    border-start-end-radius: .5rem;
   }
 
-  ._Nc {
-    outline-width: 2px;
+  ._xc {
+    border-end-start-radius: .5rem;
   }
 
-  ._M-3t1z {
-    outline-offset: 2px;
+  ._yc {
+    border-end-end-radius: .5rem;
+  }
+
+  .-rwx0fg_e-b {
+    --iconPrimary: currentColor;
+  }
+
+  .-_375toq_k-j {
+    --k: calc(2rem * var(--s2-scale));
   }
 
   .bd {
@@ -259,15 +300,17 @@
     line-height: 1.5;
   }
 
-  .C-1dz4pg9-ve8p9e:has([slot="icon"]:only-child) {
+  .C-soocic-ve8p9e:has([slot="icon"]):not(:has([data-rsp-slot="text"])) {
     padding-inline-start: calc(.375rem * var(--s2-scale));
   }
 
-  .D-1dz4pg9-ve8p9e:has([slot="icon"]:only-child) {
+  .D-soocic-ve8p9e:has([slot="icon"]):not(:has([data-rsp-slot="text"])) {
     padding-inline-end: calc(.375rem * var(--s2-scale));
   }
 }
 
+@layer UNSAFE_overrides;
+
 @layer _.c {
   ._c-enzwzjc:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
@@ -304,72 +347,70 @@
   }
 }
 
-@layer UNSAFE_overrides;
+@layer _.b.a {
+  @media (forced-colors: active) {
+    .da_____z {
+      outline-color: highlight;
+    }
 
-@layer _.b.b {
-  @media not ((hover: hover) and (pointer: fine)) {
-    ._dbf {
-      font-size: 1.0625rem;
+    .aa_____x {
+      color: buttontext;
     }
 
-    ._dbb {
-      font-size: .8125rem;
+    .aa_____B {
+      color: graytext;
     }
 
-    ._dbd {
-      font-size: .9375rem;
+    .aa_____A {
+      color: highlighttext;
     }
 
-    ._dbh {
-      font-size: 1.1875rem;
+    .ba_____z {
+      background-color: highlight;
     }
 
-    ._dbj {
-      font-size: 1.375rem;
+    .ba_____B {
+      background-color: graytext;
     }
 
-    .ibH {
-      row-gap: .470588em;
+    .ca_____z {
+      border-color: highlight;
     }
 
-    .jbH {
-      column-gap: .470588em;
+    .ca_____B {
+      border-color: graytext;
     }
   }
 }
 
-@layer _.b.a {
-  @media (forced-colors: active) {
-    .aa_____x {
-      color: buttontext;
-    }
-
-    .aa_____B {
-      color: graytext;
+@layer _.b.b {
+  @media not ((hover: hover) and (pointer: fine)) {
+    ._dbf {
+      font-size: 1.0625rem;
     }
 
-    .aa_____A {
-      color: highlighttext;
+    ._dbb {
+      font-size: .8125rem;
     }
 
-    .da_____z {
-      outline-color: highlight;
+    ._dbd {
+      font-size: .9375rem;
     }
 
-    .ba_____z {
-      background-color: highlight;
+    ._dbh {
+      font-size: 1.1875rem;
     }
 
-    .ba_____B {
-      background-color: graytext;
+    ._dbj {
+      font-size: 1.375rem;
     }
 
-    .ca_____z {
-      border-color: highlight;
+    .ibH {
+      row-gap: .470588em;
     }
 
-    .ca_____B {
-      border-color: graytext;
+    .jbH {
+      column-gap: .470588em;
     }
   }
 }

package/dist/SegmentedControl.css.map

@@ -1 +1 @@
-{"mappings":"ACsDyB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAQL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmCL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6J+C;;;;EAAA;;;;EAGzB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAE4C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7MxD;EAAA;;;;EAAA;;;;EAQL;;;;EAAA;;;;;AARK;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA6MwD;;;;IAAA;;;;;;AArM7D;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAmCL;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA","sources":["90909571be522c78","packages/@react-spectrum/s2/src/SegmentedControl.tsx"],"sourcesContent":["@import \"3076f581d900045a\";\n@import \"37c2fdb040131115\";\n@import \"d075b97bae773d34\";\n@import \"6903fca31535b056\";\n@import \"a6b79b4602e6c53c\";\n@import \"c3f3a2eb3541e76f\";\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\nimport {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, Radio, RadioGroup, RadioGroupStateContext, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {focusRing, size, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /** The id of the currently selected item (controlled). */\n  selectedKey?: string | null,\n  /** The id of the initial selected item (uncontrolled). */\n  defaultSelectedKey?: string,\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: string) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n  /**\n   * The content to display in the segmented control item.\n   */\n  children: ReactNode,\n  /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n  id: string,\n  /** Whether the item is disabled or not. */\n  isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<SegmentedControlProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style<{size: string}>({\n  font: 'control',\n  display: 'flex',\n  backgroundColor: 'gray-100',\n  borderRadius: 'lg',\n  width: 'full'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]:only-child)': size(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexBasis: 0,\n  flexGrow: 1,\n  flexShrink: 0,\n  minWidth: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  ...focusRing(),\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: string, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: string | null,\n  value?: string | null,\n  children?: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\nfunction SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultSelectedKey,\n    selectedKey,\n    onSelectionChange\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (value: string) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (onSelectionChange) {\n      onSelectionChange(value);\n    }\n  };\n\n  return (\n    <RadioGroup \n      {...props}\n      value={selectedKey}\n      defaultValue={defaultSelectedKey}\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl({size: 'M'}, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </RadioGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(RadioGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: string) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.setSelectedValue(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\nfunction SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLLabelElement>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef} = useContext(InternalSegmentedControlContext);\n  let state = useContext(RadioGroupStateContext);\n  let isSelected = props.id === state?.selectedValue;\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let isReduced = false;\n  if (window?.matchMedia) {\n    isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  useLayoutEffect(() => {\n    register?.(props.id);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !isReduced) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected]);\n\n  return (\n    <Radio \n      {...props}\n      value={props.id}\n      ref={domRef} \n      inputRef={inputRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps}, props.styles)} >\n      {({isSelected, isFocusVisible, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isFocusVisible, isDisabled})} ref={currentSelectedRef} />}\n          <Provider \n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({zIndex: 1, display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </Radio>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nconst _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);\nexport {_SegmentedControlItem as SegmentedControlItem};\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nconst _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);\nexport {_SegmentedControl as SegmentedControl};\n"],"names":[],"version":3,"file":"SegmentedControl.css.map"}
+{"mappings":"ACwDyB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6CL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4J+C;;;;EAAA;;;;EAGzB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAE4C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtNxD;EAQL;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AARK;;AAQL;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA6CL;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA7CK;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA8M6D;;;;IAAA;;;;;;AAjKlE","sources":["90909571be522c78","packages/@react-spectrum/s2/src/SegmentedControl.tsx"],"sourcesContent":["@import \"3076f581d900045a\";\n@import \"37c2fdb040131115\";\n@import \"d075b97bae773d34\";\n@import \"6903fca31535b056\";\n@import \"a6b79b4602e6c53c\";\n@import \"c3f3a2eb3541e76f\";\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\nimport {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleGroupStateContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {focusRing, size, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /** Whether the items should divide the container width equally. */\n  isJustified?: boolean,\n  /** The id of the currently selected item (controlled). */\n  selectedKey?: Key | null,\n  /** The id of the initial selected item (uncontrolled). */\n  defaultSelectedKey?: Key,\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: Key) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n  /**\n   * The content to display in the segmented control item.\n   */\n  children: ReactNode,\n  /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n  id: Key,\n  /** Whether the item is disabled or not. */\n  isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<SegmentedControlProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style({\n  display: 'flex',\n  gap: 4,\n  backgroundColor: 'gray-100',\n  borderRadius: 'default',\n  width: 'fit'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  ...focusRing(),\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  font: 'control',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]):not(:has([data-rsp-slot=text]))': size(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexGrow: {\n    isJustified: 1\n  },\n  flexBasis: {\n    isJustified: 0\n  },\n  flexShrink: 0,\n  minWidth: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  userSelect: 'none',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  borderRadius: 'default',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: Key, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>,\n  isJustified?: boolean\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: Key | null,\n  value?: Key | null,\n  children?: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>,\n  isJustified?: boolean\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\nfunction SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultSelectedKey,\n    selectedKey,\n    onSelectionChange\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (values: Set<Key>) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (onSelectionChange) {\n      onSelectionChange(values.values().next().value);\n    }\n  };\n\n  return (\n    <ToggleButtonGroup \n      {...props}\n      selectedKeys={selectedKey != null ? [selectedKey] : undefined}\n      defaultSelectedKeys={defaultSelectedKey != null ? [defaultSelectedKey] : undefined}\n      disallowEmptySelection\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onSelectionChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl(null, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef} isJustified={props.isJustified}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </ToggleButtonGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(ToggleGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: Key) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.toggleKey(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef, isJustified: props.isJustified}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\nfunction SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {\n  let domRef = useFocusableRef(ref);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef, isJustified} = useContext(InternalSegmentedControlContext);\n  let state = useContext(ToggleGroupStateContext);\n  let isSelected = state?.selectedKeys.has(props.id);\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let isReduced = false;\n  if (window?.matchMedia) {\n    isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  useLayoutEffect(() => {\n    register?.(props.id);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !isReduced) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected]);\n\n  return (\n    <ToggleButton \n      {...props}\n      ref={domRef} \n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps, isJustified}, props.styles)} >\n      {({isSelected, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isDisabled})} ref={currentSelectedRef} />}\n          <Provider \n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({zIndex: 1, display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </ToggleButton>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nconst _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);\nexport {_SegmentedControlItem as SegmentedControlItem};\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nconst _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);\nexport {_SegmentedControl as SegmentedControl};\n"],"names":[],"version":3,"file":"SegmentedControl.css.map"}

package/dist/SegmentedControl.mjs

@@ -5,7 +5,7 @@ import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressSc
 import {Text as $8e847109a6ab556d$export$5f1af8db9871e1d6, TextContext as $8e847109a6ab556d$export$9afb8bc826b033ea} from "./Content.mjs";
 import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
 import {jsx as $ae3Tm$jsx, jsxs as $ae3Tm$jsxs, Fragment as $ae3Tm$Fragment} from "react/jsx-runtime";
-import {RadioGroup as $ae3Tm$RadioGroup, RadioGroupStateContext as $ae3Tm$RadioGroupStateContext, Provider as $ae3Tm$Provider, Radio as $ae3Tm$Radio, TextContext as $ae3Tm$TextContext, DEFAULT_SLOT as $ae3Tm$DEFAULT_SLOT} from "react-aria-components";
+import {ToggleButtonGroup as $ae3Tm$ToggleButtonGroup, ToggleGroupStateContext as $ae3Tm$ToggleGroupStateContext, Provider as $ae3Tm$Provider, ToggleButton as $ae3Tm$ToggleButton, TextContext as $ae3Tm$TextContext, DEFAULT_SLOT as $ae3Tm$DEFAULT_SLOT} from "react-aria-components";
 import {createContext as $ae3Tm$createContext, useRef as $ae3Tm$useRef, useContext as $ae3Tm$useContext, useCallback as $ae3Tm$useCallback, forwardRef as $ae3Tm$forwardRef} from "react";
 import {useDOMRef as $ae3Tm$useDOMRef, useFocusableRef as $ae3Tm$useFocusableRef} from "@react-spectrum/utils";
 import {useLayoutEffect as $ae3Tm$useLayoutEffect} from "@react-aria/utils";
@@ -37,6 +37,42 @@ const $c679c2152e03f8bf$var$segmentedControl = function anonymous(props, overrid
     rules += matches.join('');
     let $l = false;
     for (let p of matches)if (/^\s*l/.test(p)) $l = true;
+    rules += ' _Zd';
+    rules += ' ic';
+    rules += ' jc';
+    rules += ' bg';
+    rules += ' _vc';
+    rules += ' _wc';
+    rules += ' _xc';
+    rules += ' _yc';
+    if (!$l) rules += ' lJ';
+    return rules;
+};
+const $c679c2152e03f8bf$var$controlItem = function anonymous(props, overrides) {
+    let rules = " .";
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
+    rules += matches.join('');
+    let $U = false;
+    let $_9 = false;
+    let $h = false;
+    let $_8 = false;
+    let $q = false;
+    for (let p of matches){
+        if (/^\s*U/.test(p)) $U = true;
+        if (/^\s*_9/.test(p)) $_9 = true;
+        if (/^\s*h/.test(p)) $h = true;
+        if (/^\s*_8/.test(p)) $_8 = true;
+        if (/^\s*q/.test(p)) $q = true;
+    }
+    if (props.isFocusVisible) rules += ' _Lb';
+    else rules += ' _La';
+    rules += ' da_____z';
+    rules += ' dx';
+    rules += ' _Nc';
+    rules += ' _M-3t1z';
+    if (!$U) rules += ' Uc';
+    rules += ' _Zd';
+    rules += ' _zb';
     rules += ' _c-bc1l9oh';
     rules += ' _c-1uotwbwg';
     rules += ' _c-eo0c6sf';
@@ -64,35 +100,6 @@ const $c679c2152e03f8bf$var$segmentedControl = function anonymous(props, overrid
     rules += ' _eb';
     rules += ' _f-1x99dlob';
     rules += ' _fa';
-    rules += ' an';
-    rules += ' _Zd';
-    rules += ' bg';
-    rules += ' _vd';
-    rules += ' _wd';
-    rules += ' _xd';
-    rules += ' _yd';
-    if (!$l) rules += ' lG';
-    return rules;
-};
-const $c679c2152e03f8bf$var$controlItem = function anonymous(props, overrides) {
-    let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
-    rules += matches.join('');
-    let $U = false;
-    let $h = false;
-    let $_9 = false;
-    let $_8 = false;
-    let $q = false;
-    for (let p of matches){
-        if (/^\s*U/.test(p)) $U = true;
-        if (/^\s*h/.test(p)) $h = true;
-        if (/^\s*_9/.test(p)) $_9 = true;
-        if (/^\s*_8/.test(p)) $_8 = true;
-        if (/^\s*q/.test(p)) $q = true;
-    }
-    if (!$U) rules += ' Uc';
-    rules += ' _Zd';
-    rules += ' _zb';
     if (props.isSelected) rules += ' aa_____A';
     else if (props.isDisabled) rules += ' aa_____B';
     else rules += ' aa_____x';
@@ -108,31 +115,36 @@ const $c679c2152e03f8bf$var$controlItem = function anonymous(props, overrides) {
         else if (props.isHovered) rules += ' an';
         else rules += ' am';
     } else rules += ' am';
-    rules += ' C-1dz4pg9-ve8p9e';
+    rules += ' C-soocic-ve8p9e';
     rules += ' CI';
-    rules += ' D-1dz4pg9-ve8p9e';
+    rules += ' D-soocic-ve8p9e';
     rules += ' DI';
     rules += ' k-375toq';
     rules += ' _1c';
-    if (!$h) rules += ' ha';
-    if (!$_9) rules += ' _9-3t1y';
+    if (!$_9) {
+        if (props.isJustified) rules += ' _9-3t1y';
+    }
+    if (!$h) {
+        if (props.isJustified) rules += ' ha';
+    }
     if (!$_8) rules += ' _8-3t1x';
     if (!$q) rules += ' qa';
     rules += ' _2d';
     rules += ' _pb';
     rules += ' __R-yksgrp';
+    rules += ' __Da';
+    rules += ' ba';
+    rules += ' wf';
+    rules += ' _vc';
+    rules += ' _wc';
+    rules += ' _xc';
+    rules += ' _yc';
     rules += ' -rwx0fg_e-b';
     rules += ' -_375toq_k-j';
     return rules;
 };
 const $c679c2152e03f8bf$var$slider = function anonymous(props) {
     let rules = " .";
-    if (props.isFocusVisible) rules += ' _Lb';
-    else rules += ' _La';
-    rules += ' da_____z';
-    rules += ' dx';
-    rules += ' _Nc';
-    rules += ' _M-3t1z';
     if (props.isDisabled) rules += ' ba_____B';
     else rules += ' ba_____z';
     rules += ' bd';
@@ -163,39 +175,43 @@ function $c679c2152e03f8bf$var$SegmentedControl(props, ref) {
     let domRef = (0, $ae3Tm$useDOMRef)(ref);
     let prevRef = (0, $ae3Tm$useRef)(null);
     let currentSelectedRef = (0, $ae3Tm$useRef)(null);
-    let onChange = (value)=>{
+    let onChange = (values)=>{
         if (currentSelectedRef.current) prevRef.current = currentSelectedRef?.current.getBoundingClientRect();
-        if (onSelectionChange) onSelectionChange(value);
+        if (onSelectionChange) onSelectionChange(values.values().next().value);
     };
-    return /*#__PURE__*/ (0, $ae3Tm$jsx)((0, $ae3Tm$RadioGroup), {
+    return /*#__PURE__*/ (0, $ae3Tm$jsx)((0, $ae3Tm$ToggleButtonGroup), {
         ...props,
-        value: selectedKey,
-        defaultValue: defaultSelectedKey,
+        selectedKeys: selectedKey != null ? [
+            selectedKey
+        ] : undefined,
+        defaultSelectedKeys: defaultSelectedKey != null ? [
+            defaultSelectedKey
+        ] : undefined,
+        disallowEmptySelection: true,
         ref: domRef,
         orientation: "horizontal",
         style: props.UNSAFE_style,
-        onChange: onChange,
-        className: (props.UNSAFE_className || '') + $c679c2152e03f8bf$var$segmentedControl({
-            size: 'M'
-        }, props.styles),
+        onSelectionChange: onChange,
+        className: (props.UNSAFE_className || '') + $c679c2152e03f8bf$var$segmentedControl(null, props.styles),
         "aria-label": props['aria-label'],
         children: /*#__PURE__*/ (0, $ae3Tm$jsx)($c679c2152e03f8bf$var$DefaultSelectionTracker, {
             defaultValue: defaultSelectedKey,
             value: selectedKey,
             prevRef: prevRef,
             currentSelectedRef: currentSelectedRef,
+            isJustified: props.isJustified,
             children: props.children
         })
     });
 }
 function $c679c2152e03f8bf$var$DefaultSelectionTracker(props) {
-    let state = (0, $ae3Tm$useContext)((0, $ae3Tm$RadioGroupStateContext));
+    let state = (0, $ae3Tm$useContext)((0, $ae3Tm$ToggleGroupStateContext));
     let isRegistered = (0, $ae3Tm$useRef)(!(props.defaultValue == null && props.value == null));
     // default select the first available item
     let register = (0, $ae3Tm$useCallback)((value)=>{
         if (state && !isRegistered.current) {
             isRegistered.current = true;
-            state.setSelectedValue(value);
+            state.toggleKey(value);
         }
     }, []);
     return /*#__PURE__*/ (0, $ae3Tm$jsx)((0, $ae3Tm$Provider), {
@@ -205,7 +221,8 @@ function $c679c2152e03f8bf$var$DefaultSelectionTracker(props) {
                 {
                     register: register,
                     prevRef: props.prevRef,
-                    currentSelectedRef: props.currentSelectedRef
+                    currentSelectedRef: props.currentSelectedRef,
+                    isJustified: props.isJustified
                 }
             ]
         ],
@@ -213,12 +230,11 @@ function $c679c2152e03f8bf$var$DefaultSelectionTracker(props) {
     });
 }
 function $c679c2152e03f8bf$var$SegmentedControlItem(props, ref) {
-    let inputRef = (0, $ae3Tm$useRef)(null);
-    let domRef = (0, $ae3Tm$useFocusableRef)(ref, inputRef);
+    let domRef = (0, $ae3Tm$useFocusableRef)(ref);
     let divRef = (0, $ae3Tm$useRef)(null);
-    let { register: register, prevRef: prevRef, currentSelectedRef: currentSelectedRef } = (0, $ae3Tm$useContext)($c679c2152e03f8bf$var$InternalSegmentedControlContext);
-    let state = (0, $ae3Tm$useContext)((0, $ae3Tm$RadioGroupStateContext));
-    let isSelected = props.id === state?.selectedValue;
+    let { register: register, prevRef: prevRef, currentSelectedRef: currentSelectedRef, isJustified: isJustified } = (0, $ae3Tm$useContext)($c679c2152e03f8bf$var$InternalSegmentedControlContext);
+    let state = (0, $ae3Tm$useContext)((0, $ae3Tm$ToggleGroupStateContext));
+    let isSelected = state?.selectedKeys.has(props.id);
     // do not apply animation if a user has the prefers-reduced-motion setting
     let isReduced = false;
     if (window?.matchMedia) isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -247,20 +263,18 @@ function $c679c2152e03f8bf$var$SegmentedControlItem(props, ref) {
     }, [
         isSelected
     ]);
-    return /*#__PURE__*/ (0, $ae3Tm$jsx)((0, $ae3Tm$Radio), {
+    return /*#__PURE__*/ (0, $ae3Tm$jsx)((0, $ae3Tm$ToggleButton), {
         ...props,
-        value: props.id,
         ref: domRef,
-        inputRef: inputRef,
         style: props.UNSAFE_style,
         className: (renderProps)=>(props.UNSAFE_className || '') + $c679c2152e03f8bf$var$controlItem({
-                ...renderProps
+                ...renderProps,
+                isJustified: isJustified
             }, props.styles),
-        children: ({ isSelected: isSelected, isFocusVisible: isFocusVisible, isPressed: isPressed, isDisabled: isDisabled })=>/*#__PURE__*/ (0, $ae3Tm$jsxs)((0, $ae3Tm$Fragment), {
+        children: ({ isSelected: isSelected, isPressed: isPressed, isDisabled: isDisabled })=>/*#__PURE__*/ (0, $ae3Tm$jsxs)((0, $ae3Tm$Fragment), {
                 children: [
                     isSelected && /*#__PURE__*/ (0, $ae3Tm$jsx)("div", {
                         className: $c679c2152e03f8bf$var$slider({
-                            isFocusVisible: isFocusVisible,
                             isDisabled: isDisabled
                         }),
                         ref: currentSelectedRef