@razorpay/blade 12.98.1 → 12.111.0

package/build/lib/web/development/components/Radio/RadioGroup/useRadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRadioGroup.js","sources":["../../../../../../../src/components/Radio/RadioGroup/useRadioGroup.ts"],"sourcesContent":["import React from 'react';\nimport type { RadioGroupProps } from './RadioGroup';\nimport type { RadioGroupContextType } from './RadioContext';\nimport isUndefined from '~utils/lodashButBetter/isUndefined';\nimport { useControllableState } from '~utils/useControllable';\nimport { useTheme } from '~components/BladeProvider';\nimport { useId } from '~utils/useId';\n\ntype UseRadioGroupProps = Pick<\n  RadioGroupProps,\n  | 'isDisabled'\n  | 'isRequired'\n  | 'labelPosition'\n  | 'validationState'\n  | 'name'\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  | 'necessityIndicator'\n  | 'size'\n>;\n\nexport type State = {\n  value: string;\n  setValue(value: string, event: React.ChangeEvent<Element>): void;\n  removeValue(): void;\n  isChecked(value: string): boolean;\n};\n\ntype UseRadioGroupReturn = {\n  state: State;\n  contextValue: RadioGroupContextType;\n  ids: { labelId: string };\n};\n\nconst useRadioGroup = ({\n  value,\n  defaultValue,\n  isDisabled,\n  isRequired,\n  labelPosition,\n  onChange,\n  validationState,\n  necessityIndicator,\n  name,\n  size,\n}: UseRadioGroupProps): UseRadioGroupReturn => {\n  const { platform } = useTheme();\n  const idBase = useId('radio-group');\n  const labelId = `${idBase}-label`;\n  const fallbackName = name ?? idBase;\n  const [checkedValue, setValue] = useControllableState({\n    value,\n    defaultValue,\n    onChange: (v, event) => {\n      onChange?.({ value: v, name: fallbackName, event });\n    },\n  });\n\n  const state = React.useMemo<State>(() => {\n    return {\n      value: checkedValue,\n      setValue(v, event): void {\n        if (isDisabled) {\n          return;\n        }\n\n        setValue(() => v, false, event);\n      },\n      removeValue(): void {\n        if (isDisabled) {\n          return;\n        }\n\n        setValue(undefined!);\n      },\n      isChecked(v: string): boolean {\n        if (isUndefined(v) || isUndefined(checkedValue)) return false;\n        return checkedValue === v;\n      },\n    };\n  }, [checkedValue, isDisabled, setValue]);\n\n  const contextValue = React.useMemo<RadioGroupContextType>(() => {\n    return {\n      necessityIndicator,\n      validationState,\n      isDisabled,\n      isRequired,\n      labelPosition: platform === 'onMobile' ? 'top' : labelPosition,\n      name: fallbackName,\n      state,\n      size,\n    };\n  }, [\n    validationState,\n    isDisabled,\n    isRequired,\n    platform,\n    labelPosition,\n    state,\n    fallbackName,\n    necessityIndicator,\n    size,\n  ]);\n\n  return { state, contextValue, ids: { labelId } };\n};\n\nexport { useRadioGroup };\n"],"names":["useRadioGroup","_ref","value","defaultValue","isDisabled","isRequired","labelPosition","onChange","validationState","necessityIndicator","name","size","_useTheme","useTheme","platform","idBase","useId","labelId","concat","fallbackName","_useControllableState","useControllableState","v","event","_useControllableState2","_slicedToArray","checkedValue","setValue","state","React","useMemo","_setValue","_x","_x2","apply","arguments","toString","removeValue","undefined","isChecked","isUndefined","contextValue","ids"],"mappings":"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"}
+{"version":3,"file":"useRadioGroup.js","sources":["../../../../../../../src/components/Radio/RadioGroup/useRadioGroup.ts"],"sourcesContent":["import React from 'react';\nimport type { RadioGroupProps } from './RadioGroup';\nimport type { RadioGroupContextType } from './RadioContext';\nimport isUndefined from '~utils/lodashButBetter/isUndefined';\nimport { useControllableState } from '~utils/useControllable';\nimport { useTheme } from '~components/BladeProvider';\nimport { useId } from '~utils/useId';\n\ntype UseRadioGroupProps = Pick<\n  RadioGroupProps,\n  | 'isDisabled'\n  | 'isRequired'\n  | 'labelPosition'\n  | 'validationState'\n  | 'name'\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  | 'necessityIndicator'\n  | 'size'\n  | 'orientation'\n>;\n\nexport type State = {\n  value: string;\n  setValue(value: string, event: React.ChangeEvent<Element>): void;\n  removeValue(): void;\n  isChecked(value: string): boolean;\n};\n\ntype UseRadioGroupReturn = {\n  state: State;\n  contextValue: RadioGroupContextType;\n  ids: { labelId: string };\n};\n\nconst useRadioGroup = ({\n  value,\n  defaultValue,\n  isDisabled,\n  isRequired,\n  labelPosition,\n  onChange,\n  validationState,\n  necessityIndicator,\n  name,\n  size,\n  orientation,\n}: UseRadioGroupProps): UseRadioGroupReturn => {\n  const { platform } = useTheme();\n  const idBase = useId('radio-group');\n  const labelId = `${idBase}-label`;\n  const fallbackName = name ?? idBase;\n  const [checkedValue, setValue] = useControllableState({\n    value,\n    defaultValue,\n    onChange: (v, event) => {\n      onChange?.({ value: v, name: fallbackName, event });\n    },\n  });\n\n  const state = React.useMemo<State>(() => {\n    return {\n      value: checkedValue,\n      setValue(v, event): void {\n        if (isDisabled) {\n          return;\n        }\n\n        setValue(() => v, false, event);\n      },\n      removeValue(): void {\n        if (isDisabled) {\n          return;\n        }\n\n        setValue(undefined!);\n      },\n      isChecked(v: string): boolean {\n        if (isUndefined(v) || isUndefined(checkedValue)) return false;\n        return checkedValue === v;\n      },\n    };\n  }, [checkedValue, isDisabled, setValue]);\n\n  const contextValue = React.useMemo<RadioGroupContextType>(() => {\n    return {\n      necessityIndicator,\n      validationState,\n      isDisabled,\n      isRequired,\n      labelPosition: platform === 'onMobile' ? 'top' : labelPosition,\n      name: fallbackName,\n      state,\n      size,\n      orientation,\n    };\n  }, [\n    validationState,\n    isDisabled,\n    isRequired,\n    platform,\n    labelPosition,\n    state,\n    fallbackName,\n    necessityIndicator,\n    size,\n    orientation,\n  ]);\n\n  return { state, contextValue, ids: { labelId } };\n};\n\nexport { useRadioGroup };\n"],"names":["useRadioGroup","_ref","value","defaultValue","isDisabled","isRequired","labelPosition","onChange","validationState","necessityIndicator","name","size","orientation","_useTheme","useTheme","platform","idBase","useId","labelId","concat","fallbackName","_useControllableState","useControllableState","v","event","_useControllableState2","_slicedToArray","checkedValue","setValue","state","React","useMemo","_setValue","_x","_x2","apply","arguments","toString","removeValue","undefined","isChecked","isUndefined","contextValue","ids"],"mappings":"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"}

package/build/lib/web/development/components/RollingText/RollingText.web.js

@@ -11,7 +11,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import useTheme from '../BladeProvider/useTheme.js';
 import { castWebType } from '../../utils/platform/castUtils.js';
 import { Box } from '../Box/Box.js';
-import { BaseMotionBox } from '../BaseMotion/BaseMotion.js';
+import { BaseMotionBox } from '../BaseMotion/BaseMotion.web.js';
 
 var ShimmerOverlay = function ShimmerOverlay() {
   var _useTheme = useTheme(),

package/build/lib/web/development/components/Scale/Scale.web.js

@@ -6,7 +6,7 @@ import '../../utils/index.js';
 import { jsx } from 'react/jsx-runtime';
 import useTheme from '../BladeProvider/useTheme.js';
 import { castWebType } from '../../utils/platform/castUtils.js';
-import { BaseMotionEnhancerBox } from '../BaseMotion/BaseMotion.js';
+import { BaseMotionEnhancerBox } from '../BaseMotion/BaseMotion.web.js';
 
 var Scale = function Scale(_ref) {
   var children = _ref.children,

package/build/lib/web/development/components/SegmentedControl/SegmentedControl.web.js

@@ -0,0 +1,196 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React__default from 'react';
+import styled from 'styled-components';
+import { SegmentedControlContext } from './SegmentedControlContext.js';
+import { SegmentedControlIndicator } from './SegmentedControlIndicator.web.js';
+import { containerHeight, gap, containerPadding, containerBorderRadius } from './segmentedControlTokens.js';
+import { useControllableState } from '../../utils/useControllable.js';
+import { useId } from '../../utils/useId.js';
+import { useMergeRefs } from '../../utils/useMergeRefs.js';
+import '../../utils/makeAccessible/index.js';
+import '../../utils/metaAttribute/index.js';
+import '../../utils/makeAnalyticsAttribute/index.js';
+import '../Box/styledProps/index.js';
+import '../../utils/index.js';
+import getIn from '../../utils/lodashButBetter/get.js';
+import '../Form/index.js';
+import '../Box/BaseBox/index.js';
+import '../BladeProvider/index.js';
+import { formHintLeftLabelMarginLeft } from '../Input/BaseInput/baseInputTokens.js';
+import '../../utils/makeSize/index.js';
+import { getHintType } from '../Input/BaseInput/BaseInput.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
+import useTheme from '../BladeProvider/useTheme.js';
+import { useBreakpoint } from '../../utils/useBreakpoint/useBreakpoint.js';
+import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
+import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
+import { FormLabel } from '../Form/FormLabel.js';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
+import { FormHint } from '../Form/FormHint.js';
+
+var _excluded = ["children", "defaultValue", "value", "onChange", "size", "isDisabled", "isRequired", "name", "label", "accessibilityLabel", "labelPosition", "helpText", "errorText", "validationState", "necessityIndicator", "testID"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var StyledSegmentedControlContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SegmentedControlweb__StyledSegmentedControlContainer",
+  componentId: "ngewlz-0"
+})(function (_ref) {
+  var theme = _ref.theme,
+    $size = _ref.$size;
+  return {
+    display: 'flex',
+    width: '100%',
+    height: makeSpace(containerHeight[$size]),
+    alignItems: 'center',
+    gap: makeSpace(getIn(theme, gap[$size])),
+    padding: makeSpace(getIn(theme, containerPadding[$size])),
+    backgroundColor: theme.colors.interactive.background.gray.faded,
+    borderRadius: makeSpace(theme.border.radius[containerBorderRadius[$size]]),
+    position: 'relative'
+  };
+});
+var _SegmentedControl = function _SegmentedControl(_ref2, ref) {
+  var children = _ref2.children,
+    defaultValue = _ref2.defaultValue,
+    value = _ref2.value,
+    _onChange = _ref2.onChange,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'medium' : _ref2$size,
+    _ref2$isDisabled = _ref2.isDisabled,
+    isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
+    _ref2$isRequired = _ref2.isRequired,
+    isRequired = _ref2$isRequired === void 0 ? false : _ref2$isRequired,
+    name = _ref2.name,
+    label = _ref2.label,
+    accessibilityLabel = _ref2.accessibilityLabel,
+    _ref2$labelPosition = _ref2.labelPosition,
+    labelPosition = _ref2$labelPosition === void 0 ? 'top' : _ref2$labelPosition,
+    helpText = _ref2.helpText,
+    errorText = _ref2.errorText,
+    _ref2$validationState = _ref2.validationState,
+    validationState = _ref2$validationState === void 0 ? 'none' : _ref2$validationState,
+    _ref2$necessityIndica = _ref2.necessityIndicator,
+    necessityIndicator = _ref2$necessityIndica === void 0 ? 'none' : _ref2$necessityIndica,
+    testID = _ref2.testID,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var _useControllableState = useControllableState({
+      defaultValue: defaultValue,
+      value: value,
+      onChange: function onChange(val) {
+        _onChange === null || _onChange === void 0 || _onChange({
+          name: name,
+          value: val
+        });
+      }
+    }),
+    _useControllableState2 = _slicedToArray(_useControllableState, 2),
+    selectedValue = _useControllableState2[0],
+    setSelectedValue = _useControllableState2[1];
+  var baseId = useId('segmented-control');
+  var containerRef = React__default.useRef(null);
+  var mergedRef = useMergeRefs(containerRef, ref);
+  var itemRefs = React__default.useRef(new Map());
+  var labelId = "".concat(baseId, "-label");
+  var totalItems = React__default.Children.count(children);
+  var firstEnabledValue = React__default.useMemo(function () {
+    var first;
+    React__default.Children.forEach(children, function (child) {
+      if (first !== undefined) return;
+      if (/*#__PURE__*/React__default.isValidElement(child) && !child.props.isDisabled) {
+        first = child.props.value;
+      }
+    });
+    return first;
+  }, [children]);
+  var contextValue = React__default.useMemo(function () {
+    return {
+      selectedValue: selectedValue,
+      setSelectedValue: setSelectedValue,
+      size: size,
+      isDisabled: isDisabled,
+      name: name,
+      baseId: baseId,
+      totalItems: totalItems,
+      firstEnabledValue: firstEnabledValue,
+      itemRefs: itemRefs
+    };
+  }, [selectedValue, setSelectedValue, size, isDisabled, name, baseId, totalItems, firstEnabledValue]);
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var _useBreakpoint = useBreakpoint({
+      breakpoints: theme.breakpoints
+    }),
+    matchedDeviceType = _useBreakpoint.matchedDeviceType;
+  var isLabelLeftPositioned = labelPosition === 'left' && matchedDeviceType === 'desktop';
+  var willRenderHintText = Boolean(helpText) || validationState === 'error' && Boolean(errorText);
+  var showError = validationState === 'error' && errorText;
+  var showHelpText = !showError && helpText;
+  var accessibilityText = "".concat(showError ? errorText : '', " ").concat(showHelpText ? helpText : '').trim();
+  var ariaLabel = label ? undefined : accessibilityLabel || name;
+  var segmentedControlElement = /*#__PURE__*/jsxs(StyledSegmentedControlContainer, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    ref: mergedRef,
+    $size: size
+  }, makeAccessible({
+    role: 'radiogroup',
+    labelledBy: label ? labelId : undefined,
+    label: ariaLabel,
+    required: isRequired
+  })), metaAttribute({
+    name: MetaConstants.SegmentedControl,
+    testID: testID
+  })), makeAnalyticsAttribute(rest)), {}, {
+    children: [children, /*#__PURE__*/jsx(SegmentedControlIndicator, {
+      containerRef: containerRef
+    })]
+  }));
+  return /*#__PURE__*/jsx(SegmentedControlContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({
+      display: "flex",
+      flexDirection: "column",
+      width: "100%"
+    }, getStyledProps(rest)), {}, {
+      children: [/*#__PURE__*/jsxs(BaseBox, {
+        display: "flex",
+        flexDirection: isLabelLeftPositioned ? 'row' : 'column',
+        alignItems: isLabelLeftPositioned ? 'center' : undefined,
+        children: [label ? /*#__PURE__*/jsx(FormLabel, {
+          as: "span",
+          necessityIndicator: necessityIndicator,
+          position: labelPosition,
+          id: labelId,
+          accessibilityText: accessibilityText && ",".concat(accessibilityText),
+          size: size,
+          children: label
+        }) : null, /*#__PURE__*/jsx(BaseBox, {
+          display: "flex",
+          flexDirection: "column",
+          flex: "1",
+          children: segmentedControlElement
+        })]
+      }), willRenderHintText && /*#__PURE__*/jsx(BaseBox, {
+        marginLeft: makeSize(label && isLabelLeftPositioned ? formHintLeftLabelMarginLeft[size] : 0),
+        children: /*#__PURE__*/jsx(FormHint, {
+          type: getHintType({
+            validationState: validationState,
+            hasHelpText: Boolean(helpText)
+          }),
+          helpText: helpText,
+          errorText: errorText,
+          size: size
+        })
+      })]
+    }))
+  });
+};
+var SegmentedControl = /*#__PURE__*/React__default.forwardRef(_SegmentedControl);
+
+export { SegmentedControl };
+//# sourceMappingURL=SegmentedControl.web.js.map

package/build/lib/web/development/components/SegmentedControl/SegmentedControl.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.web.js","sources":["../../../../../../src/components/SegmentedControl/SegmentedControl.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { SegmentedControlProps } from './types';\nimport { SegmentedControlContext } from './SegmentedControlContext';\nimport { SegmentedControlIndicator } from './SegmentedControlIndicator.web';\nimport {\n  containerPadding,\n  containerBorderRadius,\n  containerHeight,\n  gap,\n} from './segmentedControlTokens';\nimport { useControllableState } from '~utils/useControllable';\nimport { useId } from '~utils/useId';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { makeSpace, useBreakpoint } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { BladeElementRef } from '~utils/types';\nimport { FormLabel, FormHint } from '~components/Form';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { formHintLeftLabelMarginLeft } from '~components/Input/BaseInput/baseInputTokens';\nimport { makeSize } from '~utils/makeSize';\nimport { getHintType } from '~components/Input/BaseInput/BaseInput';\n\nconst StyledSegmentedControlContainer = styled.div<{\n  $size: NonNullable<SegmentedControlProps['size']>;\n}>(({ theme, $size }) => ({\n  display: 'flex',\n  width: '100%',\n  height: makeSpace(containerHeight[$size]),\n  alignItems: 'center',\n  gap: makeSpace(getIn(theme, gap[$size])),\n  padding: makeSpace(getIn(theme, containerPadding[$size])),\n  backgroundColor: theme.colors.interactive.background.gray.faded,\n  borderRadius: makeSpace(theme.border.radius[containerBorderRadius[$size]]),\n  position: 'relative',\n}));\n\nconst _SegmentedControl = (\n  {\n    children,\n    defaultValue,\n    value,\n    onChange,\n    size = 'medium',\n    isDisabled = false,\n    isRequired = false,\n    name,\n    label,\n    accessibilityLabel,\n    labelPosition = 'top',\n    helpText,\n    errorText,\n    validationState = 'none',\n    necessityIndicator = 'none',\n    testID,\n    ...rest\n  }: SegmentedControlProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const [selectedValue, setSelectedValue] = useControllableState({\n    defaultValue,\n    value,\n    onChange: (val) => {\n      onChange?.({ name, value: val });\n    },\n  });\n\n  const baseId = useId('segmented-control');\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(containerRef, ref as React.Ref<HTMLDivElement>);\n  const itemRefs = React.useRef<Map<string, HTMLElement>>(new Map());\n  const labelId = `${baseId}-label`;\n  const totalItems = React.Children.count(children);\n\n  const firstEnabledValue = React.useMemo(() => {\n    let first: string | undefined;\n    React.Children.forEach(children, (child) => {\n      if (first !== undefined) return;\n      if (React.isValidElement(child) && !child.props.isDisabled) {\n        first = child.props.value;\n      }\n    });\n    return first;\n  }, [children]);\n\n  const contextValue = React.useMemo(\n    () => ({\n      selectedValue,\n      setSelectedValue,\n      size,\n      isDisabled,\n      name,\n      baseId,\n      totalItems,\n      firstEnabledValue,\n      itemRefs,\n    }),\n    [\n      selectedValue,\n      setSelectedValue,\n      size,\n      isDisabled,\n      name,\n      baseId,\n      totalItems,\n      firstEnabledValue,\n    ],\n  );\n\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const isLabelLeftPositioned = labelPosition === 'left' && matchedDeviceType === 'desktop';\n\n  const willRenderHintText =\n    Boolean(helpText) || (validationState === 'error' && Boolean(errorText));\n\n  const showError = validationState === 'error' && errorText;\n  const showHelpText = !showError && helpText;\n  const accessibilityText = `${showError ? errorText : ''} ${showHelpText ? helpText : ''}`.trim();\n  const ariaLabel = label ? undefined : accessibilityLabel || name;\n\n  const segmentedControlElement = (\n    <StyledSegmentedControlContainer\n      ref={mergedRef}\n      $size={size}\n      {...makeAccessible({\n        role: 'radiogroup',\n        labelledBy: label ? labelId : undefined,\n        label: ariaLabel,\n        required: isRequired,\n      })}\n      {...metaAttribute({ name: MetaConstants.SegmentedControl, testID })}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      {children}\n      <SegmentedControlIndicator containerRef={containerRef} />\n    </StyledSegmentedControlContainer>\n  );\n\n  return (\n    <SegmentedControlContext.Provider value={contextValue}>\n      <BaseBox display=\"flex\" flexDirection=\"column\" width=\"100%\" {...getStyledProps(rest)}>\n        <BaseBox\n          display=\"flex\"\n          flexDirection={isLabelLeftPositioned ? 'row' : 'column'}\n          alignItems={isLabelLeftPositioned ? 'center' : undefined}\n        >\n          {label ? (\n            <FormLabel\n              as=\"span\"\n              necessityIndicator={necessityIndicator}\n              position={labelPosition}\n              id={labelId}\n              accessibilityText={accessibilityText && `,${accessibilityText}`}\n              size={size}\n            >\n              {label}\n            </FormLabel>\n          ) : null}\n\n          <BaseBox display=\"flex\" flexDirection=\"column\" flex=\"1\">\n            {segmentedControlElement}\n          </BaseBox>\n        </BaseBox>\n\n        {willRenderHintText && (\n          <BaseBox\n            marginLeft={makeSize(\n              label && isLabelLeftPositioned ? formHintLeftLabelMarginLeft[size] : 0,\n            )}\n          >\n            <FormHint\n              type={getHintType({ validationState, hasHelpText: Boolean(helpText) })}\n              helpText={helpText}\n              errorText={errorText}\n              size={size}\n            />\n          </BaseBox>\n        )}\n      </BaseBox>\n    </SegmentedControlContext.Provider>\n  );\n};\n\nconst SegmentedControl = React.forwardRef(_SegmentedControl);\n\nexport { SegmentedControl };\n"],"names":["StyledSegmentedControlContainer","styled","div","withConfig","displayName","componentId","_ref","theme","$size","display","width","height","makeSpace","containerHeight","alignItems","gap","getIn","padding","containerPadding","backgroundColor","colors","interactive","background","gray","faded","borderRadius","border","radius","containerBorderRadius","position","_SegmentedControl","_ref2","ref","children","defaultValue","value","onChange","_ref2$size","size","_ref2$isDisabled","isDisabled","_ref2$isRequired","isRequired","name","label","accessibilityLabel","_ref2$labelPosition","labelPosition","helpText","errorText","_ref2$validationState","validationState","_ref2$necessityIndica","necessityIndicator","testID","rest","_objectWithoutProperties","_excluded","_useControllableState","useControllableState","val","_useControllableState2","_slicedToArray","selectedValue","setSelectedValue","baseId","useId","containerRef","React","useRef","mergedRef","useMergeRefs","itemRefs","Map","labelId","concat","totalItems","Children","count","firstEnabledValue","useMemo","first","forEach","child","undefined","isValidElement","props","contextValue","_useTheme","useTheme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","isLabelLeftPositioned","willRenderHintText","Boolean","showError","showHelpText","accessibilityText","trim","ariaLabel","segmentedControlElement","_jsxs","_objectSpread","makeAccessible","role","labelledBy","required","metaAttribute","MetaConstants","SegmentedControl","makeAnalyticsAttribute","_jsx","SegmentedControlIndicator","SegmentedControlContext","Provider","BaseBox","flexDirection","getStyledProps","FormLabel","as","id","flex","marginLeft","makeSize","formHintLeftLabelMarginLeft","FormHint","type","getHintType","hasHelpText","forwardRef"],"mappings":"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"}

package/build/lib/web/development/components/SegmentedControl/SegmentedControlContext.js

@@ -0,0 +1,18 @@
+import React__default from 'react';
+import '../../utils/logger/index.js';
+import { throwBladeError } from '../../utils/logger/logger.js';
+
+var SegmentedControlContext = /*#__PURE__*/React__default.createContext(null);
+var useSegmentedControlContext = function useSegmentedControlContext() {
+  var context = React__default.useContext(SegmentedControlContext);
+  if (!context) {
+    throwBladeError({
+      moduleName: 'SegmentedControl',
+      message: 'useSegmentedControlContext must be used within SegmentedControl'
+    });
+  }
+  return context;
+};
+
+export { SegmentedControlContext, useSegmentedControlContext };
+//# sourceMappingURL=SegmentedControlContext.js.map

package/build/lib/web/development/components/SegmentedControl/SegmentedControlContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlContext.js","sources":["../../../../../../src/components/SegmentedControl/SegmentedControlContext.ts"],"sourcesContent":["import React from 'react';\nimport type { SegmentedControlSize } from './types';\nimport { throwBladeError } from '~utils/logger';\nimport type { ControllableStateSetter } from '~utils/useControllable';\n\ntype SegmentedControlContextProps = {\n  selectedValue: string | undefined;\n  setSelectedValue: ControllableStateSetter<string>;\n  size: SegmentedControlSize;\n  isDisabled: boolean;\n  name?: string;\n  baseId: string;\n  totalItems: number;\n  firstEnabledValue?: string;\n  itemRefs?: React.MutableRefObject<Map<string, HTMLElement>>;\n} | null;\n\nconst SegmentedControlContext = React.createContext<SegmentedControlContextProps>(null);\n\nconst useSegmentedControlContext = (): NonNullable<SegmentedControlContextProps> => {\n  const context = React.useContext(SegmentedControlContext);\n\n  if (!context) {\n    throwBladeError({\n      moduleName: 'SegmentedControl',\n      message: 'useSegmentedControlContext must be used within SegmentedControl',\n    });\n  }\n\n  return context!;\n};\n\nexport { SegmentedControlContext, useSegmentedControlContext };\n"],"names":["SegmentedControlContext","React","createContext","useSegmentedControlContext","context","useContext","throwBladeError","moduleName","message"],"mappings":";;;;AAiBA,IAAMA,uBAAuB,gBAAGC,cAAK,CAACC,aAAa,CAA+B,IAAI,EAAC;AAEvF,IAAMC,0BAA0B,GAAG,SAA7BA,0BAA0BA,GAAoD;AAClF,EAAA,IAAMC,OAAO,GAAGH,cAAK,CAACI,UAAU,CAACL,uBAAuB,CAAC,CAAA;EAEzD,IAAI,CAACI,OAAO,EAAE;AACZE,IAAAA,eAAe,CAAC;AACdC,MAAAA,UAAU,EAAE,kBAAkB;AAC9BC,MAAAA,OAAO,EAAE,iEAAA;AACX,KAAC,CAAC,CAAA;AACJ,GAAA;AAEA,EAAA,OAAOJ,OAAO,CAAA;AAChB;;;;"}

package/build/lib/web/development/components/SegmentedControl/SegmentedControlIndicator.web.js

@@ -0,0 +1,109 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React__default from 'react';
+import { useSegmentedControlContext } from './SegmentedControlContext.js';
+import { itemBorderRadius } from './segmentedControlTokens.js';
+import '../../utils/index.js';
+import '../BladeProvider/index.js';
+import { useIsomorphicLayoutEffect } from '../../utils/useIsomorphicLayoutEffect.js';
+import { useResize } from '../../utils/useResize.js';
+import '../Box/BaseBox/index.js';
+import { jsx } from 'react/jsx-runtime';
+import useTheme from '../BladeProvider/useTheme.js';
+import { castWebType } from '../../utils/platform/castUtils.js';
+import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
+import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SegmentedControlIndicator = function SegmentedControlIndicator(_ref) {
+  var containerRef = _ref.containerRef;
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var _useSegmentedControlC = useSegmentedControlContext(),
+    selectedValue = _useSegmentedControlC.selectedValue,
+    size = _useSegmentedControlC.size,
+    itemRefs = _useSegmentedControlC.itemRefs;
+  var _React$useState = React__default.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    shouldAnimate = _React$useState2[0],
+    setShouldAnimate = _React$useState2[1];
+  var _React$useState3 = React__default.useState({
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0
+    }),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    dimensions = _React$useState4[0],
+    setDimensions = _React$useState4[1];
+  var updateDimensions = React__default.useCallback(function () {
+    if (!selectedValue || !itemRefs) return;
+    var activeItem = itemRefs.current.get(selectedValue);
+    var container = containerRef.current;
+    if (!activeItem || !container || activeItem.offsetWidth === 0) return;
+    var containerRect = container.getBoundingClientRect();
+    var itemRect = activeItem.getBoundingClientRect();
+    setDimensions({
+      width: activeItem.offsetWidth,
+      height: activeItem.offsetHeight,
+      x: itemRect.left - containerRect.left,
+      y: itemRect.top - containerRect.top
+    });
+  }, [selectedValue, itemRefs, containerRef]);
+  useIsomorphicLayoutEffect(function () {
+    if (!selectedValue) return;
+    updateDimensions();
+  }, [selectedValue, updateDimensions]);
+  var updateDimensionsRef = React__default.useRef(updateDimensions);
+  updateDimensionsRef.current = updateDimensions;
+  React__default.useEffect(function () {
+    if ('fonts' in document) {
+      try {
+        void document.fonts.ready.then(function () {
+          updateDimensionsRef.current();
+        });
+      } catch (_unused) {
+        /* empty */
+      }
+    }
+    // Runs once on mount — document.fonts.ready only needs to be awaited a single time.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useResize(containerRef, updateDimensions);
+
+  // Enable animation only after the first paint with real dimensions.
+  // useEffect fires after the browser paints, guaranteeing the initial
+  // position is committed before transitions are turned on.
+  React__default.useEffect(function () {
+    if (dimensions.width > 0) {
+      setShouldAnimate(true);
+    }
+  }, [dimensions.width]);
+
+  // Nothing to show until dimensions are measured — avoids a 0×0 flash.
+  if (!dimensions.width) return null;
+  var transitionProps = {
+    transitionProperty: 'transform',
+    transitionDuration: shouldAnimate ? castWebType(makeMotionTime(theme.motion.duration.moderate)) : '0ms',
+    transitionTimingFunction: castWebType(theme.motion.easing.standard)
+  };
+  var borderRadiusValue = makeSpace(theme.border.radius[itemBorderRadius[size]]);
+  return /*#__PURE__*/jsx(BaseBox, {
+    pointerEvents: "none",
+    position: "absolute",
+    left: "0px",
+    top: "0px",
+    backgroundColor: "surface.background.gray.intense",
+    style: _objectSpread(_objectSpread({}, transitionProps), {}, {
+      borderRadius: borderRadiusValue,
+      width: "".concat(dimensions.width, "px"),
+      height: "".concat(dimensions.height, "px"),
+      transform: "translate(".concat(dimensions.x, "px, ").concat(dimensions.y, "px)")
+    })
+  });
+};
+
+export { SegmentedControlIndicator };
+//# sourceMappingURL=SegmentedControlIndicator.web.js.map

package/build/lib/web/development/components/SegmentedControl/SegmentedControlIndicator.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlIndicator.web.js","sources":["../../../../../../src/components/SegmentedControl/SegmentedControlIndicator.web.tsx"],"sourcesContent":["import React from 'react';\nimport { useSegmentedControlContext } from './SegmentedControlContext';\nimport { itemBorderRadius } from './segmentedControlTokens';\nimport { castWebType, makeMotionTime, makeSpace } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\nimport { useResize } from '~utils/useResize';\nimport BaseBox from '~components/Box/BaseBox';\n\nconst SegmentedControlIndicator = ({\n  containerRef,\n}: {\n  containerRef: React.RefObject<HTMLElement | null>;\n}): React.ReactElement | null => {\n  const { theme } = useTheme();\n  const { selectedValue, size, itemRefs } = useSegmentedControlContext();\n  const [shouldAnimate, setShouldAnimate] = React.useState(false);\n  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0, x: 0, y: 0 });\n\n  const updateDimensions = React.useCallback(() => {\n    if (!selectedValue || !itemRefs) return;\n    const activeItem = itemRefs.current.get(selectedValue);\n    const container = containerRef.current;\n    if (!activeItem || !container || activeItem.offsetWidth === 0) return;\n\n    const containerRect = container.getBoundingClientRect();\n    const itemRect = activeItem.getBoundingClientRect();\n\n    setDimensions({\n      width: activeItem.offsetWidth,\n      height: activeItem.offsetHeight,\n      x: itemRect.left - containerRect.left,\n      y: itemRect.top - containerRect.top,\n    });\n  }, [selectedValue, itemRefs, containerRef]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!selectedValue) return;\n    updateDimensions();\n  }, [selectedValue, updateDimensions]);\n\n  const updateDimensionsRef = React.useRef(updateDimensions);\n  updateDimensionsRef.current = updateDimensions;\n\n  React.useEffect(() => {\n    if ('fonts' in document) {\n      try {\n        void document.fonts.ready.then(() => {\n          updateDimensionsRef.current();\n        });\n      } catch {\n        /* empty */\n      }\n    }\n    // Runs once on mount — document.fonts.ready only needs to be awaited a single time.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useResize(containerRef, updateDimensions);\n\n  // Enable animation only after the first paint with real dimensions.\n  // useEffect fires after the browser paints, guaranteeing the initial\n  // position is committed before transitions are turned on.\n  React.useEffect(() => {\n    if (dimensions.width > 0) {\n      setShouldAnimate(true);\n    }\n  }, [dimensions.width]);\n\n  // Nothing to show until dimensions are measured — avoids a 0×0 flash.\n  if (!dimensions.width) return null;\n\n  const transitionProps = {\n    transitionProperty: 'transform',\n    transitionDuration: shouldAnimate\n      ? castWebType(makeMotionTime(theme.motion.duration.moderate))\n      : '0ms',\n    transitionTimingFunction: castWebType(theme.motion.easing.standard),\n  };\n\n  const borderRadiusValue = makeSpace(theme.border.radius[itemBorderRadius[size]]);\n\n  return (\n    <BaseBox\n      pointerEvents=\"none\"\n      position=\"absolute\"\n      left=\"0px\"\n      top=\"0px\"\n      backgroundColor=\"surface.background.gray.intense\"\n      style={{\n        ...transitionProps,\n        borderRadius: borderRadiusValue,\n        width: `${dimensions.width}px`,\n        height: `${dimensions.height}px`,\n        transform: `translate(${dimensions.x}px, ${dimensions.y}px)`,\n      }}\n    />\n  );\n};\n\nexport { SegmentedControlIndicator };\n"],"names":["SegmentedControlIndicator","_ref","containerRef","_useTheme","useTheme","theme","_useSegmentedControlC","useSegmentedControlContext","selectedValue","size","itemRefs","_React$useState","React","useState","_React$useState2","_slicedToArray","shouldAnimate","setShouldAnimate","_React$useState3","width","height","x","y","_React$useState4","dimensions","setDimensions","updateDimensions","useCallback","activeItem","current","get","container","offsetWidth","containerRect","getBoundingClientRect","itemRect","offsetHeight","left","top","useIsomorphicLayoutEffect","updateDimensionsRef","useRef","useEffect","document","fonts","ready","then","_unused","useResize","transitionProps","transitionProperty","transitionDuration","castWebType","makeMotionTime","motion","duration","moderate","transitionTimingFunction","easing","standard","borderRadiusValue","makeSpace","border","radius","itemBorderRadius","_jsx","BaseBox","pointerEvents","position","backgroundColor","style","_objectSpread","borderRadius","concat","transform"],"mappings":";;;;;;;;;;;;;;;;;;;AASA,IAAMA,yBAAyB,GAAG,SAA5BA,yBAAyBA,CAAAC,IAAA,EAIE;AAAA,EAAA,IAH/BC,YAAY,GAAAD,IAAA,CAAZC,YAAY,CAAA;AAIZ,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;AACb,EAAA,IAAAC,qBAAA,GAA0CC,0BAA0B,EAAE;IAA9DC,aAAa,GAAAF,qBAAA,CAAbE,aAAa;IAAEC,IAAI,GAAAH,qBAAA,CAAJG,IAAI;IAAEC,QAAQ,GAAAJ,qBAAA,CAARI,QAAQ,CAAA;AACrC,EAAA,IAAAC,eAAA,GAA0CC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAAxDK,IAAAA,aAAa,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,gBAAgB,GAAAH,gBAAA,CAAA,CAAA,CAAA,CAAA;AACtC,EAAA,IAAAI,gBAAA,GAAoCN,cAAK,CAACC,QAAQ,CAAC;AAAEM,MAAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,MAAM,EAAE,CAAC;AAAEC,MAAAA,CAAC,EAAE,CAAC;AAAEC,MAAAA,CAAC,EAAE,CAAA;AAAE,KAAC,CAAC;IAAAC,gBAAA,GAAAR,cAAA,CAAAG,gBAAA,EAAA,CAAA,CAAA;AAAhFM,IAAAA,UAAU,GAAAD,gBAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,aAAa,GAAAF,gBAAA,CAAA,CAAA,CAAA,CAAA;AAEhC,EAAA,IAAMG,gBAAgB,GAAGd,cAAK,CAACe,WAAW,CAAC,YAAM;AAC/C,IAAA,IAAI,CAACnB,aAAa,IAAI,CAACE,QAAQ,EAAE,OAAA;IACjC,IAAMkB,UAAU,GAAGlB,QAAQ,CAACmB,OAAO,CAACC,GAAG,CAACtB,aAAa,CAAC,CAAA;AACtD,IAAA,IAAMuB,SAAS,GAAG7B,YAAY,CAAC2B,OAAO,CAAA;IACtC,IAAI,CAACD,UAAU,IAAI,CAACG,SAAS,IAAIH,UAAU,CAACI,WAAW,KAAK,CAAC,EAAE,OAAA;AAE/D,IAAA,IAAMC,aAAa,GAAGF,SAAS,CAACG,qBAAqB,EAAE,CAAA;AACvD,IAAA,IAAMC,QAAQ,GAAGP,UAAU,CAACM,qBAAqB,EAAE,CAAA;AAEnDT,IAAAA,aAAa,CAAC;MACZN,KAAK,EAAES,UAAU,CAACI,WAAW;MAC7BZ,MAAM,EAAEQ,UAAU,CAACQ,YAAY;AAC/Bf,MAAAA,CAAC,EAAEc,QAAQ,CAACE,IAAI,GAAGJ,aAAa,CAACI,IAAI;AACrCf,MAAAA,CAAC,EAAEa,QAAQ,CAACG,GAAG,GAAGL,aAAa,CAACK,GAAAA;AAClC,KAAC,CAAC,CAAA;GACH,EAAE,CAAC9B,aAAa,EAAEE,QAAQ,EAAER,YAAY,CAAC,CAAC,CAAA;AAE3CqC,EAAAA,yBAAyB,CAAC,YAAM;IAC9B,IAAI,CAAC/B,aAAa,EAAE,OAAA;AACpBkB,IAAAA,gBAAgB,EAAE,CAAA;AACpB,GAAC,EAAE,CAAClB,aAAa,EAAEkB,gBAAgB,CAAC,CAAC,CAAA;AAErC,EAAA,IAAMc,mBAAmB,GAAG5B,cAAK,CAAC6B,MAAM,CAACf,gBAAgB,CAAC,CAAA;EAC1Dc,mBAAmB,CAACX,OAAO,GAAGH,gBAAgB,CAAA;EAE9Cd,cAAK,CAAC8B,SAAS,CAAC,YAAM;IACpB,IAAI,OAAO,IAAIC,QAAQ,EAAE;MACvB,IAAI;QACF,KAAKA,QAAQ,CAACC,KAAK,CAACC,KAAK,CAACC,IAAI,CAAC,YAAM;UACnCN,mBAAmB,CAACX,OAAO,EAAE,CAAA;AAC/B,SAAC,CAAC,CAAA;OACH,CAAC,OAAAkB,OAAA,EAAM;AACN;AAAA,OAAA;AAEJ,KAAA;AACA;AACA;GACD,EAAE,EAAE,CAAC,CAAA;AAENC,EAAAA,SAAS,CAAC9C,YAAY,EAAEwB,gBAAgB,CAAC,CAAA;;AAEzC;AACA;AACA;EACAd,cAAK,CAAC8B,SAAS,CAAC,YAAM;AACpB,IAAA,IAAIlB,UAAU,CAACL,KAAK,GAAG,CAAC,EAAE;MACxBF,gBAAgB,CAAC,IAAI,CAAC,CAAA;AACxB,KAAA;AACF,GAAC,EAAE,CAACO,UAAU,CAACL,KAAK,CAAC,CAAC,CAAA;;AAEtB;AACA,EAAA,IAAI,CAACK,UAAU,CAACL,KAAK,EAAE,OAAO,IAAI,CAAA;AAElC,EAAA,IAAM8B,eAAe,GAAG;AACtBC,IAAAA,kBAAkB,EAAE,WAAW;AAC/BC,IAAAA,kBAAkB,EAAEnC,aAAa,GAC7BoC,WAAW,CAACC,cAAc,CAAChD,KAAK,CAACiD,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC,CAAC,GAC3D,KAAK;IACTC,wBAAwB,EAAEL,WAAW,CAAC/C,KAAK,CAACiD,MAAM,CAACI,MAAM,CAACC,QAAQ,CAAA;GACnE,CAAA;AAED,EAAA,IAAMC,iBAAiB,GAAGC,SAAS,CAACxD,KAAK,CAACyD,MAAM,CAACC,MAAM,CAACC,gBAAgB,CAACvD,IAAI,CAAC,CAAC,CAAC,CAAA;EAEhF,oBACEwD,GAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,aAAa,EAAC,MAAM;AACpBC,IAAAA,QAAQ,EAAC,UAAU;AACnB/B,IAAAA,IAAI,EAAC,KAAK;AACVC,IAAAA,GAAG,EAAC,KAAK;AACT+B,IAAAA,eAAe,EAAC,iCAAiC;AACjDC,IAAAA,KAAK,EAAAC,aAAA,CAAAA,aAAA,KACAtB,eAAe,CAAA,EAAA,EAAA,EAAA;AAClBuB,MAAAA,YAAY,EAAEZ,iBAAiB;AAC/BzC,MAAAA,KAAK,KAAAsD,MAAA,CAAKjD,UAAU,CAACL,KAAK,EAAI,IAAA,CAAA;AAC9BC,MAAAA,MAAM,KAAAqD,MAAA,CAAKjD,UAAU,CAACJ,MAAM,EAAI,IAAA,CAAA;MAChCsD,SAAS,EAAA,YAAA,CAAAD,MAAA,CAAejD,UAAU,CAACH,CAAC,EAAA,MAAA,CAAA,CAAAoD,MAAA,CAAOjD,UAAU,CAACF,CAAC,EAAA,KAAA,CAAA;AAAK,KAAA,CAAA;AAC5D,GACH,CAAC,CAAA;AAEN;;;;"}

package/build/lib/web/development/components/SegmentedControl/SegmentedControlItem.web.js

@@ -0,0 +1,170 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React__default from 'react';
+import styled from 'styled-components';
+import { useSegmentedControlContext } from './SegmentedControlContext.js';
+import { itemHeight, paddingY, paddingX, itemBorderRadius, iconSizeMap, textSizeMap } from './segmentedControlTokens.js';
+import '../Typography/index.js';
+import '../../utils/index.js';
+import '../../utils/makeAccessible/index.js';
+import '../../utils/metaAttribute/index.js';
+import '../../utils/makeAnalyticsAttribute/index.js';
+import getIn from '../../utils/lodashButBetter/get.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
+import { castWebType } from '../../utils/platform/castUtils.js';
+import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
+import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
+import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
+import { Text } from '../Typography/Text/Text.js';
+
+var _excluded = ["children", "value", "leading", "isDisabled", "accessibilityLabel", "testID"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var StyledSegmentedControlButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "SegmentedControlItemweb__StyledSegmentedControlButton",
+  componentId: "i0wihp-0"
+})(function (_ref) {
+  var theme = _ref.theme,
+    $size = _ref.$size,
+    $isSelected = _ref.$isSelected;
+  return {
+    appearance: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: makeSpace(theme.spacing[3]),
+    flex: 1,
+    height: makeSpace(itemHeight[$size]),
+    paddingTop: makeSpace(getIn(theme, paddingY[$size])),
+    paddingBottom: makeSpace(getIn(theme, paddingY[$size])),
+    paddingLeft: makeSpace(getIn(theme, paddingX[$size])),
+    paddingRight: makeSpace(getIn(theme, paddingX[$size])),
+    backgroundColor: 'transparent',
+    borderRadius: makeSpace(theme.border.radius[itemBorderRadius[$size]]),
+    position: 'relative',
+    zIndex: 1,
+    transitionProperty: 'background-color',
+    transitionTimingFunction: castWebType(theme.motion.easing.standard),
+    transitionDuration: castWebType(makeMotionTime(theme.motion.duration.gentle)),
+    '&:hover:not(:disabled)': {
+      backgroundColor: $isSelected ? 'transparent' : theme.colors.interactive.background.gray["default"]
+    },
+    '&:focus:not(:focus-visible)': {
+      outline: 'none'
+    },
+    '&:focus-visible': {
+      outline: 'none',
+      boxShadow: "inset 0px 0px 0px 4px ".concat(theme.colors.surface.border.primary.muted)
+    },
+    '&:disabled': {
+      cursor: 'not-allowed',
+      backgroundColor: 'transparent'
+    },
+    '&:disabled:hover': {
+      backgroundColor: 'transparent'
+    }
+  };
+});
+var SegmentedControlItem = function SegmentedControlItem(_ref2) {
+  var children = _ref2.children,
+    value = _ref2.value,
+    Leading = _ref2.leading,
+    _ref2$isDisabled = _ref2.isDisabled,
+    isItemDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
+    accessibilityLabel = _ref2.accessibilityLabel,
+    testID = _ref2.testID,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var _useSegmentedControlC = useSegmentedControlContext(),
+    selectedValue = _useSegmentedControlC.selectedValue,
+    setSelectedValue = _useSegmentedControlC.setSelectedValue,
+    size = _useSegmentedControlC.size,
+    isGroupDisabled = _useSegmentedControlC.isDisabled,
+    baseId = _useSegmentedControlC.baseId,
+    totalItems = _useSegmentedControlC.totalItems,
+    firstEnabledValue = _useSegmentedControlC.firstEnabledValue,
+    itemRefs = _useSegmentedControlC.itemRefs;
+  var buttonRef = React__default.useRef(null);
+  var isSelected = selectedValue === value;
+  var isDisabled = isGroupDisabled || isItemDisabled;
+  var shouldReceiveFocus = !isDisabled && isSelected || selectedValue === undefined && !isDisabled && value === firstEnabledValue;
+  React__default.useEffect(function () {
+    if (!itemRefs) return undefined;
+    var map = itemRefs.current;
+    var node = buttonRef.current;
+    if (node) map.set(value, node);
+    return function () {
+      map["delete"](value);
+    };
+  }, [value, itemRefs]);
+  var handleKeyDown = React__default.useCallback(function (e) {
+    var _buttonRef$current;
+    var container = (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.closest('[role="radiogroup"]');
+    if (!container) return;
+    var buttons = Array.from(container.querySelectorAll('[role="radio"]:not(:disabled)'));
+    var currentIndex = buttons.indexOf(buttonRef.current);
+    var nextIndex = -1;
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+      nextIndex = (currentIndex + 1) % buttons.length;
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+      nextIndex = (currentIndex - 1 + buttons.length) % buttons.length;
+    } else if (e.key === 'Home') {
+      nextIndex = 0;
+    } else if (e.key === 'End') {
+      nextIndex = buttons.length - 1;
+    }
+    if (nextIndex >= 0) {
+      e.preventDefault();
+      var nextEl = buttons[nextIndex];
+      nextEl.focus();
+      setSelectedValue(function () {
+        var _nextEl$dataset$value;
+        return (_nextEl$dataset$value = nextEl.dataset.value) !== null && _nextEl$dataset$value !== void 0 ? _nextEl$dataset$value : '';
+      });
+    }
+  }, [setSelectedValue]);
+  var textColor = isDisabled ? 'interactive.text.gray.disabled' : isSelected ? 'interactive.text.gray.normal' : 'interactive.text.gray.muted';
+  var iconColor = isDisabled ? 'interactive.icon.gray.disabled' : isSelected ? 'interactive.icon.gray.normal' : 'interactive.icon.gray.muted';
+  return /*#__PURE__*/jsxs(StyledSegmentedControlButton, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    ref: buttonRef,
+    type: "button",
+    id: "".concat(baseId, "-").concat(value, "-item"),
+    "data-value": value,
+    tabIndex: shouldReceiveFocus ? 0 : -1,
+    $size: size,
+    $isSelected: isSelected,
+    disabled: isDisabled,
+    onClick: function onClick() {
+      setSelectedValue(function () {
+        return value;
+      });
+    },
+    onKeyDown: handleKeyDown
+  }, makeAccessible({
+    role: 'radio',
+    checked: isSelected,
+    label: accessibilityLabel,
+    setSize: totalItems
+  })), metaAttribute({
+    name: MetaConstants.SegmentedControlItem,
+    testID: testID
+  })), makeAnalyticsAttribute(rest)), {}, {
+    children: [Leading ? /*#__PURE__*/jsx(Leading, {
+      size: iconSizeMap[size],
+      color: iconColor
+    }) : null, children ? /*#__PURE__*/jsx(Text, {
+      as: "span",
+      color: textColor,
+      size: textSizeMap[size],
+      weight: "medium",
+      children: children
+    }) : null]
+  }));
+};
+
+export { SegmentedControlItem };
+//# sourceMappingURL=SegmentedControlItem.web.js.map