@channel.io/bezier-react 1.5.0 → 1.6.0

package/dist/cjs/components/Forms/RadioGroup/RadioGroup.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var React = require('react');
+var index_module = require('../../../node_modules/@radix-ui/react-radio-group/dist/index.module.js');
+var useFormFieldProps = require('../useFormFieldProps.js');
+var AlphaStack = require('../../AlphaStack/AlphaStack.js');
+
+function RadioGroupImpl({
+  children,
+  spacing = 0,
+  direction = 'vertical',
+  ...rest
+}, forwardedRef) {
+  const formFieldProps = useFormFieldProps.default(rest);
+  return /*#__PURE__*/React.createElement(index_module.Root, Object.assign({
+    asChild: true
+  }, formFieldProps), /*#__PURE__*/React.createElement(AlphaStack.AlphaStack, {
+    ref: forwardedRef,
+    justify: "start",
+    align: "stretch",
+    spacing: spacing,
+    direction: direction
+  }, children));
+}
+
+/**
+ * `RadioGroup` is a set of checkable buttons, known as radio buttons.
+ *
+ * `RadioGroup` is a context of the `Radio` components. also, it renders an element which has the 'radiogroup' role.
+ * It controls all the parts of a radio group.
+ *
+ * @example
+ *
+ * ```tsx
+ * // Anatomy of the RadioGroup
+ * <RadioGroup>
+ *  <Radio />
+ * </RadioGroup>
+ * ```
+ */
+const RadioGroup = /*#__PURE__*/React.forwardRef(RadioGroupImpl);
+
+exports.RadioGroup = RadioGroup;
+//# sourceMappingURL=RadioGroup.js.map

package/dist/cjs/components/Forms/RadioGroup/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../../../../src/components/Forms/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\n\nimport { AlphaStack } from '~/src/components/AlphaStack'\nimport useFormFieldProps from '~/src/components/Forms/useFormFieldProps'\n\nimport { type RadioGroupProps } from './RadioGroup.types'\n\nfunction RadioGroupImpl<Value extends string>({\n  children,\n  spacing = 0,\n  direction = 'vertical',\n  ...rest\n}: RadioGroupProps<Value>, forwardedRef: React.Ref<HTMLDivElement>) {\n  const formFieldProps = useFormFieldProps(rest)\n\n  return (\n    <RadioGroupPrimitive.Root\n      asChild\n      {...formFieldProps}\n    >\n      <AlphaStack\n        ref={forwardedRef}\n        justify=\"start\"\n        align=\"stretch\"\n        spacing={spacing}\n        direction={direction}\n      >\n        { children }\n      </AlphaStack>\n    </RadioGroupPrimitive.Root>\n  )\n}\n\n/**\n * `RadioGroup` is a set of checkable buttons, known as radio buttons.\n *\n * `RadioGroup` is a context of the `Radio` components. also, it renders an element which has the 'radiogroup' role.\n * It controls all the parts of a radio group.\n *\n * @example\n *\n * ```tsx\n * // Anatomy of the RadioGroup\n * <RadioGroup>\n *  <Radio />\n * </RadioGroup>\n * ```\n */\nexport const RadioGroup = forwardRef(RadioGroupImpl) as <Value extends string>(\n  props: RadioGroupProps<Value> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => ReturnType<typeof RadioGroupImpl<Value>>\n"],"names":["RadioGroupImpl","children","spacing","direction","rest","forwardedRef","formFieldProps","useFormFieldProps","React","createElement","RadioGroupPrimitive","Object","assign","asChild","AlphaStack","ref","justify","align","RadioGroup","forwardRef"],"mappings":";;;;;;;AASA,SAASA,cAAcA,CAAuB;EAC5CC,QAAQ;AACRC,EAAAA,OAAO,GAAG,CAAC;AACXC,EAAAA,SAAS,GAAG,UAAU;EACtB,GAAGC,IAAAA;AACmB,CAAC,EAAEC,YAAuC,EAAE;AAClE,EAAA,MAAMC,cAAc,GAAGC,yBAAiB,CAACH,IAAI,CAAC,CAAA;EAE9C,oBACEI,KAAA,CAAAC,aAAA,CAACC,iBAAwB,EAAAC,MAAA,CAAAC,MAAA,CAAA;IACvBC,OAAO,EAAA,IAAA;AAAA,GAAA,EACHP,cAAc,CAElBE,eAAAA,KAAA,CAAAC,aAAA,CAACK,qBAAU,EAAA;AACTC,IAAAA,GAAG,EAAEV,YAAa;AAClBW,IAAAA,OAAO,EAAC,OAAO;AACfC,IAAAA,KAAK,EAAC,SAAS;AACff,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,SAAS,EAAEA,SAAAA;GAETF,EAAAA,QACQ,CACY,CAAC,CAAA;AAE/B,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaiB,UAAU,gBAAGC,gBAAU,CAACnB,cAAc;;;;"}

package/dist/cjs/components/Forms/RadioGroup/RadioGroup.styled.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var index_module = require('../../../node_modules/@radix-ui/react-radio-group/dist/index.module.js');
+var DisabledOpacity = require('../../../constants/DisabledOpacity.js');
+var styleUtils = require('../../../utils/styleUtils.js');
+var FormFieldSize = require('../FormFieldSize.js');
+var mixins = require('../Inputs/mixins.js');
+var Text = require('../../Text/Text.js');
+var FoundationStyledComponent = require('../../../foundation/FoundationStyledComponent.js');
+var Typography = require('../../../foundation/Typography.js');
+
+const OUTER_INDICATOR_SIZE = 18;
+const OUTER_INDICATOR_MARGIN = 1;
+const INNER_INDICATOR_SIZE = 8;
+const outerIndicatorFocusStyle = FoundationStyledComponent.css`
+  &:not([data-disabled])[data-state='checked']::before {
+    background-color: var(--bgtxt-green-dark);
+  }
+`;
+const innerIndicatorFocusStyle = FoundationStyledComponent.css`
+  &:not([data-disabled]):not([data-state='checked'])::after {
+    background-color: var(--bg-black-dark);
+  }
+`;
+const focusStyle = FoundationStyledComponent.css`
+  ${outerIndicatorFocusStyle}
+  ${innerIndicatorFocusStyle}
+`;
+const RadioGroupPrimitiveItem = /*#__PURE__*/FoundationStyledComponent.styled(index_module.Item).withConfig({
+  displayName: "RadioGroupstyled__RadioGroupPrimitiveItem",
+  componentId: "sc-pnfggo-0"
+})(["all:unset;position:relative;display:flex;align-items:center;width:100%;height:", "px;cursor:pointer;&::before{position:relative;box-sizing:border-box;width:", "px;height:", "px;margin:", "px;content:'';background-color:var(--bg-white-normal);border-radius:50%;box-shadow:inset 0 0 0 2px var(--bdr-black-dark);}&::after{position:absolute;top:50%;left:", "px;width:", "px;height:", "px;content:'';border-radius:50%;transform:translate(-50%,-50%);}&[data-disabled]{cursor:not-allowed;opacity:", ";&::before{background-color:var(--bg-black-dark);box-shadow:none;}}&[data-state='checked']{&::before{background-color:var(--bgtxt-green-normal);box-shadow:none;}&::after{background-color:var(--bgtxt-absolute-white-dark);}}", " &:focus-visible{", " &::before{", "}}", ""], FormFieldSize.default.M, OUTER_INDICATOR_SIZE, OUTER_INDICATOR_SIZE, OUTER_INDICATOR_MARGIN, OUTER_INDICATOR_SIZE / 2 + OUTER_INDICATOR_MARGIN, INNER_INDICATOR_SIZE, INNER_INDICATOR_SIZE, DisabledOpacity.default, styleUtils.touchableHover(focusStyle), innerIndicatorFocusStyle, mixins.focusedInputWrapperStyle, ({
+  interpolation
+}) => interpolation);
+const Label = /*#__PURE__*/FoundationStyledComponent.styled(Text.default).attrs({
+  forwardedAs: 'label',
+  typo: Typography.Typography.Size14,
+  color: 'txt-black-darkest'
+}).withConfig({
+  displayName: "RadioGroupstyled__Label",
+  componentId: "sc-pnfggo-1"
+})(["padding-left:12px;pointer-events:none;"]);
+
+exports.Label = Label;
+exports.RadioGroupPrimitiveItem = RadioGroupPrimitiveItem;
+//# sourceMappingURL=RadioGroup.styled.js.map

package/dist/cjs/components/Forms/RadioGroup/RadioGroup.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.styled.js","sources":["../../../../../src/components/Forms/RadioGroup/RadioGroup.styled.ts"],"sourcesContent":["import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\n\nimport {\n  Typography,\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport DisabledOpacity from '~/src/constants/DisabledOpacity'\nimport { touchableHover } from '~/src/utils/styleUtils'\n\nimport { FormFieldSize } from '~/src/components/Forms'\nimport { focusedInputWrapperStyle } from '~/src/components/Forms/Inputs/mixins'\nimport { Text } from '~/src/components/Text'\n\nimport { type RadioProps } from './RadioGroup.types'\n\nconst OUTER_INDICATOR_SIZE = 18\nconst OUTER_INDICATOR_MARGIN = 1\nconst INNER_INDICATOR_SIZE = 8\n\nconst outerIndicatorFocusStyle = css`\n  &:not([data-disabled])[data-state='checked']::before {\n    background-color: var(--bgtxt-green-dark);\n  }\n`\n\nconst innerIndicatorFocusStyle = css`\n  &:not([data-disabled]):not([data-state='checked'])::after {\n    background-color: var(--bg-black-dark);\n  }\n`\n\nconst focusStyle = css`\n  ${outerIndicatorFocusStyle}\n  ${innerIndicatorFocusStyle}\n`\n\nexport const RadioGroupPrimitiveItem = styled(RadioGroupPrimitive.Item)<RadioProps<string>>`\n  all: unset;\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: ${FormFieldSize.M}px;\n  cursor: pointer;\n\n  /* Outer Indicator */\n  &::before {\n    position: relative;\n    box-sizing: border-box;\n    width: ${OUTER_INDICATOR_SIZE}px;\n    height: ${OUTER_INDICATOR_SIZE}px;\n    margin: ${OUTER_INDICATOR_MARGIN}px;\n    content: '';\n    background-color: var(--bg-white-normal);\n    border-radius: 50%;\n    box-shadow: inset 0 0 0 2px var(--bdr-black-dark);\n  }\n\n  /* Inner Indicator */\n  &::after {\n    position: absolute;\n    top: 50%;\n    left: ${(OUTER_INDICATOR_SIZE / 2) + OUTER_INDICATOR_MARGIN}px;\n    width: ${INNER_INDICATOR_SIZE}px;\n    height: ${INNER_INDICATOR_SIZE}px;\n    content: '';\n    border-radius: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: ${DisabledOpacity};\n\n    &::before {\n      background-color: var(--bg-black-dark);\n      box-shadow: none;\n    }\n  }\n\n  &[data-state='checked'] {\n    &::before {\n      background-color: var(--bgtxt-green-normal);\n      box-shadow: none;\n    }\n\n    &::after {\n      background-color: var(--bgtxt-absolute-white-dark);\n    }\n  }\n\n  ${touchableHover(focusStyle)}\n\n  &:focus-visible {\n    ${innerIndicatorFocusStyle}\n\n    &::before {\n      ${focusedInputWrapperStyle}\n    }\n  }\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const Label = styled(Text).attrs({\n  forwardedAs: 'label',\n  typo: Typography.Size14,\n  color: 'txt-black-darkest',\n})`\n  padding-left: 12px;\n  pointer-events: none;\n`\n"],"names":["OUTER_INDICATOR_SIZE","OUTER_INDICATOR_MARGIN","INNER_INDICATOR_SIZE","outerIndicatorFocusStyle","css","innerIndicatorFocusStyle","focusStyle","RadioGroupPrimitiveItem","styled","RadioGroupPrimitive","withConfig","displayName","componentId","FormFieldSize","M","DisabledOpacity","touchableHover","focusedInputWrapperStyle","interpolation","Label","Text","attrs","forwardedAs","typo","Typography","Size14","color"],"mappings":";;;;;;;;;;;AAiBA,MAAMA,oBAAoB,GAAG,EAAE,CAAA;AAC/B,MAAMC,sBAAsB,GAAG,CAAC,CAAA;AAChC,MAAMC,oBAAoB,GAAG,CAAC,CAAA;AAE9B,MAAMC,wBAAwB,GAAGC,6BAAI,CAAA;AACrC;AACA;AACA;AACA,CAAC,CAAA;AAED,MAAMC,wBAAwB,GAAGD,6BAAI,CAAA;AACrC;AACA;AACA;AACA,CAAC,CAAA;AAED,MAAME,UAAU,GAAGF,6BAAI,CAAA;AACvB,EAAA,EAAID,wBAAyB,CAAA;AAC7B,EAAA,EAAIE,wBAAyB,CAAA;AAC7B,CAAC,CAAA;AAEM,MAAME,uBAAuB,gBAAGC,gCAAM,CAACC,iBAAwB,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,2CAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,gFAAA,EAAA,4EAAA,EAAA,YAAA,EAAA,YAAA,EAAA,oKAAA,EAAA,WAAA,EAAA,YAAA,EAAA,8GAAA,EAAA,gOAAA,EAAA,mBAAA,EAAA,aAAA,EAAA,IAAA,EAAA,EAAA,CAAA,EAM3DC,qBAAa,CAACC,CAAC,EAOdd,oBAAoB,EACnBA,oBAAoB,EACpBC,sBAAsB,EAWvBD,oBAAoB,GAAG,CAAC,GAAIC,sBAAsB,EAClDC,oBAAoB,EACnBA,oBAAoB,EAQnBa,uBAAe,EAmB1BC,yBAAc,CAACV,UAAU,CAAC,EAGxBD,wBAAwB,EAGtBY,+BAAwB,EAI5B,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;AAEM,MAAMC,KAAK,gBAAGX,gCAAM,CAACY,YAAI,CAAC,CAACC,KAAK,CAAC;AACtCC,EAAAA,WAAW,EAAE,OAAO;EACpBC,IAAI,EAAEC,qBAAU,CAACC,MAAM;AACvBC,EAAAA,KAAK,EAAE,mBAAA;AACT,CAAC,CAAC,CAAAhB,UAAA,CAAA;EAAAC,WAAA,EAAA,yBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAGD,CAAA,CAAA,CAAA,wCAAA,CAAA;;;;;"}

package/dist/cjs/components/Forms/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,139 @@
+'use strict';
+
+var React = require('react');
+var index_module$1 = require('../../../node_modules/@radix-ui/react-radio-group/dist/index.module.js');
+var index_module = require('../../../node_modules/@radix-ui/react-tabs/dist/index.module.js');
+var index = require('../../../node_modules/classnames/index.js');
+var typeUtils = require('../../../utils/typeUtils.js');
+var useFormFieldProps = require('../useFormFieldProps.js');
+var SegmentedControl_types = require('./SegmentedControl.types.js');
+var SegmentedControlContext = require('./SegmentedControlContext.js');
+var SegmentedControlIndicator = require('./SegmentedControlIndicator.js');
+var SegmentedControl_styled = require('./SegmentedControl.styled.js');
+var Divider = require('../../Divider/Divider.js');
+
+function SegmentedControlItemListImpl({
+  children,
+  style: styleProp,
+  className: classNameProp,
+  ...rest
+}, forwardedRef) {
+  const [selectedElement, setSelectedElement] = React.useState(null);
+  const {
+    type,
+    size,
+    width
+  } = SegmentedControlContext.useSegmentedControlContext('SegmentedControlItemList');
+  const {
+    containerRef: ref,
+    render: renderIndicator
+  } = SegmentedControlIndicator.useSegmentedControlIndicator({
+    target: selectedElement,
+    refs: [forwardedRef]
+  });
+  const contextValue = React.useMemo(() => ({
+    setSelectedElement
+  }), []);
+  const style = React.useMemo(() => ({
+    ...styleProp,
+    '--bezier-react-segmented-control-width': typeUtils.isNumber(width) ? `${width}px` : width
+  }), [styleProp, width]);
+  const className = index.default(classNameProp, size);
+  const SegmentedControlItemList = type === 'radiogroup' ? index_module$1.Root : index_module.List;
+  return /*#__PURE__*/React.createElement(SegmentedControlItemList, Object.assign({
+    asChild: true,
+    ref: ref,
+    style: style,
+    className: className
+  }, rest), /*#__PURE__*/React.createElement(SegmentedControl_styled.Container, null, /*#__PURE__*/React.createElement(SegmentedControlContext.SegmentedControlItemListContextProvider, {
+    value: contextValue
+  }, renderIndicator(), React.Children.map(children, (child, index) => {
+    if (index === 0) {
+      return child;
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider.default, {
+      withoutParallelIndent: true,
+      orientation: "vertical"
+    }), child);
+  }))));
+}
+const SegmentedControlItemList = /*#__PURE__*/React.forwardRef(SegmentedControlItemListImpl);
+function SegmentedControlRadioGroupImpl({
+  children,
+  ...rest
+}, forwardedRef) {
+  return /*#__PURE__*/React.createElement(SegmentedControlItemList, Object.assign({
+    ref: forwardedRef
+  }, useFormFieldProps.default(rest)), children);
+}
+const SegmentedControlRadioGroup = /*#__PURE__*/React.forwardRef(SegmentedControlRadioGroupImpl);
+
+/**
+ * `SegmentedControlTabList` is the component that wraps `SegmentedControlItem`.
+ * It can be used only when `SegmentedControl` component is used as the `tabs` type.
+ *
+ * It must be used as a child of `SegmentedControl`.
+ */
+const SegmentedControlTabList = SegmentedControlItemList;
+
+/**
+ * `SegmentedControlTabContent` is the component that wraps the content that corresponds to a specific value of `SegmentedControlItem`.
+ * It can be used only when `SegmentedControl` component is used as the `tabs` type.
+ *
+ * It must be used as a child of `SegmentedControl`.
+ */
+const SegmentedControlTabContent = index_module.Content;
+const SegmentedControlTabs = index_module.Root;
+function SegmentedControlImpl({
+  type = 'radiogroup',
+  size = SegmentedControl_types.SegmentedControlSize.M,
+  width = '100%',
+  onValueChange,
+  children,
+  ...rest
+}, forwardedRef) {
+  const SegmentedControlRoot = type === 'radiogroup' ? SegmentedControlRadioGroup : SegmentedControlTabs;
+  const contextValue = React.useMemo(() => ({
+    type,
+    size,
+    width
+  }), [type, size, width]);
+  return /*#__PURE__*/React.createElement(SegmentedControlContext.SegmentedControlContextProvider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(SegmentedControlRoot, Object.assign({
+    ref: forwardedRef,
+    onValueChange: onValueChange
+  }, rest), children));
+}
+
+/**
+ * `SegmentedControl` is component that looks like a combination of a radio and a button.
+ * They can be used in place of tabs and as input elements in modals.
+ * If you have more than five items, use a different element, such as a dropdown.
+ *
+ * `SegmentedControl` can be used as a radio group, tabs element depending on its `type`.
+ *
+ * @example
+ *
+ * ```tsx
+ * // Anatomy of the SegmentedControl type="radiogroup"
+ * <SegmentedControl type="radiogroup">
+ *  <SegmentedControlItem />
+ * </SegmentedControl>
+ *
+ * // Anatomy of the SegmentedControl type="tabs"
+ * <SegmentedControl type="tabs">
+ *  <SegmentedControlTabList>
+ *   <SegmentedControlItem />
+ *  </SegmentedControlTabList>
+ *
+ *  <SegmentedControlTabContent />
+ * </SegmentedControl>
+ * ```
+ */
+const SegmentedControl = /*#__PURE__*/React.forwardRef(SegmentedControlImpl);
+
+exports.SegmentedControl = SegmentedControl;
+exports.SegmentedControlTabContent = SegmentedControlTabContent;
+exports.SegmentedControlTabList = SegmentedControlTabList;
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/cjs/components/Forms/SegmentedControl/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sources":["../../../../../src/components/Forms/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useMemo,\n  useState,\n} from 'react'\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport classNames from 'classnames'\n\nimport { isNumber } from '~/src/utils/typeUtils'\n\nimport { Divider } from '~/src/components/Divider'\nimport useFormFieldProps from '~/src/components/Forms/useFormFieldProps'\n\nimport {\n  type SegmentedControlItemListProps,\n  type SegmentedControlProps,\n  type SegmentedControlRadioGroupProps,\n  SegmentedControlSize,\n  type SegmentedControlTabContentProps,\n  type SegmentedControlTabListProps,\n  type SegmentedControlTabsProps,\n  type SegmentedControlType,\n} from './SegmentedControl.types'\nimport {\n  SegmentedControlContextProvider,\n  SegmentedControlItemListContextProvider,\n  useSegmentedControlContext,\n} from './SegmentedControlContext'\nimport { useSegmentedControlIndicator } from './SegmentedControlIndicator'\n\nimport * as Styled from './SegmentedControl.styled'\n\nfunction SegmentedControlItemListImpl<\n  Type extends SegmentedControlType,\n  Value extends string,\n>({\n  children,\n  style: styleProp,\n  className: classNameProp,\n  ...rest\n}: SegmentedControlItemListProps<Type, Value>, forwardedRef: React.Ref<HTMLDivElement>) {\n  const [selectedElement, setSelectedElement] = useState<HTMLButtonElement | null>(null)\n\n  const {\n    type,\n    size,\n    width,\n  } = useSegmentedControlContext('SegmentedControlItemList')\n\n  const {\n    containerRef: ref,\n    render: renderIndicator,\n  } = useSegmentedControlIndicator({\n    target: selectedElement,\n    refs: [forwardedRef],\n  })\n\n  const contextValue = useMemo(() => ({\n    setSelectedElement,\n  }), [])\n\n  const style = useMemo(() => ({\n    ...styleProp,\n    '--bezier-react-segmented-control-width': isNumber(width) ? `${width}px` : width,\n  } as React.CSSProperties), [\n    styleProp,\n    width,\n  ])\n\n  const className = classNames(\n    classNameProp,\n    size,\n  )\n\n  const SegmentedControlItemList = type === 'radiogroup'\n    ? RadioGroupPrimitive.Root\n    : TabsPrimitive.List\n\n  return (\n    <SegmentedControlItemList\n      asChild\n      ref={ref}\n      style={style}\n      className={className}\n      {...rest}\n    >\n      <Styled.Container>\n        <SegmentedControlItemListContextProvider value={contextValue}>\n          { renderIndicator() }\n\n          { React.Children.map(children, (child, index) => {\n            if (index === 0) {\n              return child\n            }\n\n            return (\n              <>\n                <Divider\n                  withoutParallelIndent\n                  orientation=\"vertical\"\n                />\n                { child }\n              </>\n            )\n          }) }\n        </SegmentedControlItemListContextProvider>\n      </Styled.Container>\n    </SegmentedControlItemList>\n  )\n}\n\nconst SegmentedControlItemList = forwardRef(SegmentedControlItemListImpl) as <\n  Type extends SegmentedControlType,\n  Value extends string,\n>(\n  props: SegmentedControlItemListProps<Type, Value> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => JSX.Element\n\nfunction SegmentedControlRadioGroupImpl<Value extends string>({\n  children,\n  ...rest\n}: SegmentedControlRadioGroupProps<Value>, forwardedRef: React.Ref<HTMLDivElement>) {\n  return (\n    <SegmentedControlItemList\n      ref={forwardedRef}\n      {...useFormFieldProps(rest)}\n    >\n      { children }\n    </SegmentedControlItemList>\n  )\n}\n\nconst SegmentedControlRadioGroup = forwardRef(SegmentedControlRadioGroupImpl) as <Value extends string>(\n  props: SegmentedControlRadioGroupProps<Value> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => JSX.Element\n\n/**\n * `SegmentedControlTabList` is the component that wraps `SegmentedControlItem`.\n * It can be used only when `SegmentedControl` component is used as the `tabs` type.\n *\n * It must be used as a child of `SegmentedControl`.\n */\nexport const SegmentedControlTabList = SegmentedControlItemList as (\n  props: SegmentedControlTabListProps & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => JSX.Element\n\n/**\n * `SegmentedControlTabContent` is the component that wraps the content that corresponds to a specific value of `SegmentedControlItem`.\n * It can be used only when `SegmentedControl` component is used as the `tabs` type.\n *\n * It must be used as a child of `SegmentedControl`.\n */\nexport const SegmentedControlTabContent = TabsPrimitive.Content as <Value extends string>(\n  props: SegmentedControlTabContentProps<Value> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => JSX.Element\n\nconst SegmentedControlTabs = TabsPrimitive.Root as <Value extends string>(\n  props: SegmentedControlTabsProps<Value> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => JSX.Element\n\nfunction SegmentedControlImpl<\n  Type extends SegmentedControlType,\n  Value extends string,\n>({\n  type = 'radiogroup' as Type,\n  size = SegmentedControlSize.M,\n  width = '100%',\n  onValueChange,\n  children,\n  ...rest\n}: SegmentedControlProps<Type, Value>, forwardedRef: React.Ref<HTMLDivElement>) {\n  const SegmentedControlRoot = type === 'radiogroup'\n    ? SegmentedControlRadioGroup\n    : SegmentedControlTabs\n\n  const contextValue = useMemo(() => ({\n    type,\n    size,\n    width,\n  }), [\n    type,\n    size,\n    width,\n  ])\n\n  return (\n    <SegmentedControlContextProvider value={contextValue}>\n      <SegmentedControlRoot\n        ref={forwardedRef}\n        onValueChange={onValueChange}\n        {...rest}\n      >\n        { children }\n      </SegmentedControlRoot>\n    </SegmentedControlContextProvider>\n  )\n}\n\n/**\n * `SegmentedControl` is component that looks like a combination of a radio and a button.\n * They can be used in place of tabs and as input elements in modals.\n * If you have more than five items, use a different element, such as a dropdown.\n *\n * `SegmentedControl` can be used as a radio group, tabs element depending on its `type`.\n *\n * @example\n *\n * ```tsx\n * // Anatomy of the SegmentedControl type=\"radiogroup\"\n * <SegmentedControl type=\"radiogroup\">\n *  <SegmentedControlItem />\n * </SegmentedControl>\n *\n * // Anatomy of the SegmentedControl type=\"tabs\"\n * <SegmentedControl type=\"tabs\">\n *  <SegmentedControlTabList>\n *   <SegmentedControlItem />\n *  </SegmentedControlTabList>\n *\n *  <SegmentedControlTabContent />\n * </SegmentedControl>\n * ```\n */\nexport const SegmentedControl = forwardRef(SegmentedControlImpl) as <\n  Type extends SegmentedControlType,\n  Value extends string,\n>(\n  props: SegmentedControlProps<Type, Value> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => JSX.Element\n"],"names":["SegmentedControlItemListImpl","children","style","styleProp","className","classNameProp","rest","forwardedRef","selectedElement","setSelectedElement","useState","type","size","width","useSegmentedControlContext","containerRef","ref","render","renderIndicator","useSegmentedControlIndicator","target","refs","contextValue","useMemo","isNumber","classNames","SegmentedControlItemList","RadioGroupPrimitive","TabsPrimitive","React","createElement","Object","assign","asChild","Styled","SegmentedControlItemListContextProvider","value","Children","map","child","index","Fragment","Divider","withoutParallelIndent","orientation","forwardRef","SegmentedControlRadioGroupImpl","useFormFieldProps","SegmentedControlRadioGroup","SegmentedControlTabList","SegmentedControlTabContent","SegmentedControlTabs","SegmentedControlImpl","SegmentedControlSize","M","onValueChange","SegmentedControlRoot","SegmentedControlContextProvider","SegmentedControl"],"mappings":"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"}

package/dist/cjs/components/Forms/SegmentedControl/SegmentedControl.styled.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var DisabledOpacity = require('../../../constants/DisabledOpacity.js');
+var ZIndex = require('../../../constants/ZIndex.js');
+var mixins = require('../Inputs/mixins.js');
+var Text = require('../../Text/Text.js');
+var SegmentedControl_types = require('./SegmentedControl.types.js');
+var AlphaStack = require('../../AlphaStack/AlphaStack.js');
+var index = require('../../../foundation/Transition/index.js');
+var FoundationStyledComponent = require('../../../foundation/FoundationStyledComponent.js');
+var Typography = require('../../../foundation/Typography.js');
+
+/* stylelint-disable declaration-block-semicolon-newline-after, rule-empty-line-before */
+const ItemContainer = /*#__PURE__*/FoundationStyledComponent.styled(AlphaStack.AlphaStack).attrs({
+  direction: 'horizontal',
+  align: 'center',
+  spacing: 2
+}).withConfig({
+  displayName: "SegmentedControlstyled__ItemContainer",
+  componentId: "sc-15mhli4-0"
+})(["z-index:", ";"], ZIndex.ZIndex.Float);
+const ItemLabel = /*#__PURE__*/FoundationStyledComponent.styled(Text.default).attrs({
+  bold: true
+}).withConfig({
+  displayName: "SegmentedControlstyled__ItemLabel",
+  componentId: "sc-15mhli4-1"
+})(["padding:1px 4px;"]);
+const Item = /*#__PURE__*/FoundationStyledComponent.styled.button.withConfig({
+  displayName: "SegmentedControlstyled__Item",
+  componentId: "sc-15mhli4-2"
+})(["all:unset;position:relative;display:flex;flex:1;align-items:center;justify-content:center;", " &[data-checked]{color:var(--txt-black-darkest);cursor:default;}&:not([data-checked]){color:var(--txt-black-dark);cursor:pointer;}&:disabled{cursor:not-allowed;}&::after{position:absolute;top:0;left:0;z-index:", ";display:block;width:100%;height:100%;content:'';border-radius:inherit;", "}&:focus-visible{&::after{", "}}&:not([data-checked]):not(&:disabled):hover{background-color:var(--bg-black-light);}"], ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS('background-color'), ZIndex.ZIndex.Float, ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS(['box-shadow']), mixins.focusedInputWrapperStyle);
+const indicatorTransitionMeta = {
+  duration: index.Transition.TransitionDuration.M
+};
+const Indicator = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "SegmentedControlstyled__Indicator",
+  componentId: "sc-15mhli4-3"
+})(["--bezier-react-segmented-control-indicator-transform:none;--bezier-react-segmented-control-indicator-width:auto;--bezier-react-segmented-control-indicator-height:auto;position:absolute;top:0;left:0;z-index:", ";width:var(--bezier-react-segmented-control-indicator-width);height:var(--bezier-react-segmented-control-indicator-height);", " background-color:var(--bg-white-high);transform:var(--bezier-react-segmented-control-indicator-transform);", ""], ZIndex.ZIndex.Float, ({
+  foundation
+}) => foundation?.elevation.ev1(), ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS('transform', indicatorTransitionMeta.duration));
+const Container = /*#__PURE__*/FoundationStyledComponent.styled(AlphaStack.AlphaStack).attrs({
+  direction: 'horizontal'
+}).withConfig({
+  displayName: "SegmentedControlstyled__Container",
+  componentId: "sc-15mhli4-4"
+})(["--bezier-react-segmented-control-width:auto;position:relative;z-index:", ";box-sizing:border-box;width:var(--bezier-react-segmented-control-width);background-color:var(--bg-black-lighter);&.", "{height:24px;padding:1px;border-radius:6px;", " ", ",", "{border-radius:5px;}", "{padding:1px 0;}}&.", "{height:28px;padding:2px;border-radius:8px;", " ", ",", "{border-radius:6px;}", "{padding:2px 0;}}&.", "{height:36px;padding:2px;border-radius:8px;", " ", ",", "{border-radius:6px;}", "{padding:6px 0;}}&.", "{height:44px;padding:4px;border-radius:12px;", " ", ",", "{border-radius:8px;}", "{padding:8px 0;}}&[data-disabled]{opacity:", ";", ",", "{cursor:not-allowed;}}"], ZIndex.ZIndex.Base, SegmentedControl_types.SegmentedControlSize.XS, Typography.Typography.Size13, Item, Indicator, Item, SegmentedControl_types.SegmentedControlSize.S, Typography.Typography.Size14, Item, Indicator, Item, SegmentedControl_types.SegmentedControlSize.M, Typography.Typography.Size14, Item, Indicator, Item, SegmentedControl_types.SegmentedControlSize.L, Typography.Typography.Size14, Item, Indicator, Item, DisabledOpacity.default, Item, Indicator);
+
+exports.Container = Container;
+exports.Indicator = Indicator;
+exports.Item = Item;
+exports.ItemContainer = ItemContainer;
+exports.ItemLabel = ItemLabel;
+exports.indicatorTransitionMeta = indicatorTransitionMeta;
+//# sourceMappingURL=SegmentedControl.styled.js.map

package/dist/cjs/components/Forms/SegmentedControl/SegmentedControl.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.styled.js","sources":["../../../../../src/components/Forms/SegmentedControl/SegmentedControl.styled.ts"],"sourcesContent":["/* stylelint-disable declaration-block-semicolon-newline-after, rule-empty-line-before */\nimport {\n  Transition,\n  Typography,\n  styled,\n} from '~/src/foundation'\n\nimport DisabledOpacity from '~/src/constants/DisabledOpacity'\nimport { ZIndex } from '~/src/constants/ZIndex'\n\nimport { AlphaStack } from '~/src/components/AlphaStack'\nimport { focusedInputWrapperStyle } from '~/src/components/Forms/Inputs/mixins'\nimport { Text } from '~/src/components/Text'\n\nimport { SegmentedControlSize } from './SegmentedControl.types'\n\nexport const ItemContainer = styled(AlphaStack).attrs({\n  direction: 'horizontal',\n  align: 'center',\n  spacing: 2,\n})`\n  z-index: ${ZIndex.Float};\n`\n\nexport const ItemLabel = styled(Text).attrs({ bold: true })`\n  padding: 1px 4px;\n`\n\nexport const Item = styled.button`\n  all: unset;\n\n  position: relative;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS('background-color')}\n\n  &[data-checked] {\n    color: var(--txt-black-darkest);\n    cursor: default;\n  }\n\n  &:not([data-checked]) {\n    color: var(--txt-black-dark);\n    cursor: pointer;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  /* NOTE: (@ed) focus indicator */\n  &::after {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: ${ZIndex.Float};\n    display: block;\n    width: 100%;\n    height: 100%;\n    content: '';\n    border-radius: inherit;\n    ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['box-shadow'])}\n  }\n\n  &:focus-visible {\n    &::after {\n      ${focusedInputWrapperStyle}\n    }\n  }\n\n  &:not([data-checked]):not(&:disabled):hover {\n    background-color: var(--bg-black-light);\n  }\n`\n\nexport const indicatorTransitionMeta = {\n  duration: Transition.TransitionDuration.M,\n}\n\nexport const Indicator = styled.div`\n  --bezier-react-segmented-control-indicator-transform: none;\n  --bezier-react-segmented-control-indicator-width: auto;\n  --bezier-react-segmented-control-indicator-height: auto;\n\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: ${ZIndex.Float};\n\n  width: var(--bezier-react-segmented-control-indicator-width);\n  height: var(--bezier-react-segmented-control-indicator-height);\n\n  ${({ foundation }) => foundation?.elevation.ev1()}\n  /* NOTE: (@ed) Overrides the elevation mixin. Do not change the order! */\n  background-color: var(--bg-white-high);\n\n  transform: var(--bezier-react-segmented-control-indicator-transform);\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS('transform', indicatorTransitionMeta.duration)}\n`\n\nexport const Container = styled(AlphaStack).attrs({ direction: 'horizontal' })`\n  --bezier-react-segmented-control-width: auto;\n\n  position: relative;\n  z-index: ${ZIndex.Base};\n  box-sizing: border-box;\n  width: var(--bezier-react-segmented-control-width);\n  background-color: var(--bg-black-lighter);\n\n  &.${SegmentedControlSize.XS} {\n    height: 24px;\n    padding: 1px;\n    border-radius: 6px;\n    ${Typography.Size13}\n\n    ${Item},\n    ${Indicator} {\n      border-radius: 5px;\n    }\n\n    ${Item} {\n      padding: 1px 0;\n    }\n  }\n\n  &.${SegmentedControlSize.S} {\n    height: 28px;\n    padding: 2px;\n    border-radius: 8px;\n    ${Typography.Size14}\n\n    ${Item},\n    ${Indicator} {\n      border-radius: 6px;\n    }\n\n    ${Item} {\n      padding: 2px 0;\n    }\n  }\n\n  &.${SegmentedControlSize.M} {\n    height: 36px;\n    padding: 2px;\n    border-radius: 8px;\n    ${Typography.Size14}\n\n    ${Item},\n    ${Indicator} {\n      border-radius: 6px;\n    }\n\n    ${Item} {\n      padding: 6px 0;\n    }\n  }\n\n  &.${SegmentedControlSize.L} {\n    height: 44px;\n    padding: 4px;\n    border-radius: 12px;\n    ${Typography.Size14}\n\n    ${Item},\n    ${Indicator} {\n      border-radius: 8px;\n    }\n\n    ${Item} {\n      padding: 8px 0;\n    }\n  }\n\n  &[data-disabled] {\n    opacity: ${DisabledOpacity};\n\n    ${Item},\n    ${Indicator} {\n      cursor: not-allowed;\n    }\n  }\n`\n"],"names":["ItemContainer","styled","AlphaStack","attrs","direction","align","spacing","withConfig","displayName","componentId","ZIndex","Float","ItemLabel","Text","bold","Item","button","foundation","transition","getTransitionsCSS","focusedInputWrapperStyle","indicatorTransitionMeta","duration","Transition","TransitionDuration","M","Indicator","div","elevation","ev1","Container","Base","SegmentedControlSize","XS","Typography","Size13","S","Size14","L","DisabledOpacity"],"mappings":"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"}

package/dist/cjs/components/Forms/SegmentedControl/SegmentedControl.types.js

@@ -0,0 +1,12 @@
+'use strict';
+
+let SegmentedControlSize = /*#__PURE__*/function (SegmentedControlSize) {
+  SegmentedControlSize["XS"] = "xs";
+  SegmentedControlSize["S"] = "s";
+  SegmentedControlSize["M"] = "m";
+  SegmentedControlSize["L"] = "l";
+  return SegmentedControlSize;
+}({});
+
+exports.SegmentedControlSize = SegmentedControlSize;
+//# sourceMappingURL=SegmentedControl.types.js.map

package/dist/cjs/components/Forms/SegmentedControl/SegmentedControl.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.types.js","sources":["../../../../../src/components/Forms/SegmentedControl/SegmentedControl.types.ts"],"sourcesContent":["import type React from 'react'\n\nimport type * as TabsPrimitive from '@radix-ui/react-tabs'\n\nimport {\n  type BezierComponentProps,\n  type ChildrenProps,\n  type DisableProps,\n  type SideContentProps,\n  type SizeProps,\n} from '~/src/types/ComponentProps'\n\nimport { type FormComponentProps } from '~/src/components/Forms'\n\nexport enum SegmentedControlSize {\n  XS = 'xs',\n  S = 's',\n  M = 'm',\n  L = 'l',\n}\n\nexport type SegmentedControlType = 'radiogroup' | 'tabs'\n\ntype SegmentedControlNonValueOptions<Type extends SegmentedControlType> = {\n  /**\n   * The element type of segmented control.\n   * It can be either `radiogroup` or `tabs`\n   * @default 'radiogroup'\n   */\n  type?: Type\n  /*\n   * The width of the segmented control.\n   * @default '100%'\n   */\n  width?: React.CSSProperties['width']\n}\n\ntype SegmentedControlValueOptions<Value extends string> = {\n  /**\n   * The controlled value of the item to check.\n   * It should be used in conjunction with `onValueChange`.\n   */\n  value?: Value\n  /**\n   * The value of the segmented control that should be checked when initially rendered.\n   * Use when you do not need to control the state of the items.\n   */\n  defaultValue?: Value\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: Value) => void\n}\n\ntype SegmentedControlRadioGroupSpecificOptions = FormComponentProps & {\n  /**\n   * The name of the group.\n   * Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n}\n\ninterface SegmentedControlItemOptions<Value extends string> {\n  /**\n   * The value of the item.\n   *\n   * If the type of `SegmentedControl` is `radiogroup`, It is the value given as data when submitted with a `SegmentedControlProps.name`.\n   *\n   * If the type of `SegmentedControl` is `tabs`, It is the value that associates the item with a content.\n   */\n  value: Value\n}\n\ninterface SegmentedControlTabContentOptions<Value extends string> {\n  /**\n   * A unique value that associates the item with a content.\n   */\n  value: Value\n}\n\ntype SegmentedControlOptions<Type extends SegmentedControlType, Value extends string> =\n  (Type extends 'radiogroup'\n    ? SegmentedControlRadioGroupSpecificOptions\n    : {})\n  & SegmentedControlNonValueOptions<Type>\n  & SegmentedControlValueOptions<Value>\n\ntype RadixTabsPredefinedPropKeys = 'dir'\n\nexport type SegmentedControlProps<Type extends SegmentedControlType, Value extends string> =\n  & BezierComponentProps\n  & ChildrenProps\n  & SizeProps<SegmentedControlSize>\n  & Omit<React.HTMLAttributes<HTMLDivElement>, RadixTabsPredefinedPropKeys>\n  & SegmentedControlOptions<Type, Value>\n\nexport interface SegmentedControlRadioGroupProps<Value extends string> extends\n  Omit<SegmentedControlProps<'radiogroup', Value>, keyof SegmentedControlNonValueOptions<'radiogroup'>> {}\n\nexport interface SegmentedControlTabsProps<Value extends string> extends\n  Omit<SegmentedControlProps<'tabs', Value>, keyof SegmentedControlNonValueOptions<'tabs'>> {}\n\ntype RadixTabListPredefinedPropKeys = 'defaultValue'\n\nexport interface SegmentedControlTabListProps extends\n  BezierComponentProps,\n  Omit<React.HTMLAttributes<HTMLDivElement>, RadixTabListPredefinedPropKeys>,\n  ChildrenProps {}\n\nexport type SegmentedControlItemListProps<Type extends SegmentedControlType, Value extends string> =\n  Type extends 'radiogroup'\n    ? SegmentedControlRadioGroupProps<Value>\n    : SegmentedControlTabListProps\n\nexport interface SegmentedControlItemProps<Value extends string> extends\n  BezierComponentProps,\n  ChildrenProps,\n  DisableProps,\n  React.HTMLAttributes<HTMLButtonElement>,\n  SideContentProps,\n  SegmentedControlItemOptions<Value> {}\n\nexport interface SegmentedControlTabContentProps<Value extends string> extends\n  BezierComponentProps,\n  ChildrenProps,\n  React.HTMLAttributes<HTMLDivElement>,\n  Pick<TabsPrimitive.TabsContentProps, 'forceMount'>,\n  SegmentedControlTabContentOptions<Value> {}\n"],"names":["SegmentedControlSize"],"mappings":";;AAcYA,IAAAA,oBAAoB,0BAApBA,oBAAoB,EAAA;EAApBA,oBAAoB,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA;EAApBA,oBAAoB,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAApBA,oBAAoB,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAApBA,oBAAoB,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;AAAA,EAAA,OAApBA,oBAAoB,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/cjs/components/Forms/SegmentedControl/SegmentedControlContext.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+
+// TODO: (@ed) Evolve it into a commonly reusable function
+function createContext(providerName, defaultValue) {
+  const Context = /*#__PURE__*/React.createContext(defaultValue);
+  function useContext(consumerName) {
+    const contextValue = React.useContext(Context);
+    if (!contextValue) {
+      throw new Error(`'${consumerName}' must be used within '${providerName}'`);
+    }
+    return contextValue;
+  }
+  return [Context.Provider, useContext];
+}
+const [SegmentedControlContextProvider, useSegmentedControlContext] = createContext('SegmentedControl', null);
+const [SegmentedControlItemListContextProvider, useSegmentedControlItemListContext] = createContext('SegmentedControlItemList', null);
+
+exports.SegmentedControlContextProvider = SegmentedControlContextProvider;
+exports.SegmentedControlItemListContextProvider = SegmentedControlItemListContextProvider;
+exports.useSegmentedControlContext = useSegmentedControlContext;
+exports.useSegmentedControlItemListContext = useSegmentedControlItemListContext;
+//# sourceMappingURL=SegmentedControlContext.js.map

package/dist/cjs/components/Forms/SegmentedControl/SegmentedControlContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlContext.js","sources":["../../../../../src/components/Forms/SegmentedControl/SegmentedControlContext.ts"],"sourcesContent":["import React from 'react'\n\nimport {\n  type SegmentedControlProps,\n  type SegmentedControlType,\n} from './SegmentedControl.types'\n\n// TODO: (@ed) Evolve it into a commonly reusable function\nfunction createContext<ContextValue>(\n  providerName: string,\n  defaultValue: ContextValue,\n) {\n  const Context = React.createContext<ContextValue>(defaultValue)\n\n  function useContext(consumerName: string) {\n    const contextValue = React.useContext(Context)\n\n    if (!contextValue) {\n      throw new Error(`'${consumerName}' must be used within '${providerName}'`)\n    }\n\n    return contextValue\n  }\n\n  return [\n    Context.Provider,\n    useContext,\n  ] as const\n}\n\ntype SegmentedControlContextValue = Required<Pick<SegmentedControlProps<SegmentedControlType, string>, 'type' | 'size' | 'width'>>\n\nexport const [\n  SegmentedControlContextProvider,\n  useSegmentedControlContext,\n] = createContext<SegmentedControlContextValue | null>('SegmentedControl', null)\n\ninterface SegmentedControlItemListContextValue {\n  setSelectedElement: (node: HTMLButtonElement | null) => void\n}\n\nexport const [\n  SegmentedControlItemListContextProvider,\n  useSegmentedControlItemListContext,\n] = createContext<SegmentedControlItemListContextValue | null>('SegmentedControlItemList', null)\n"],"names":["createContext","providerName","defaultValue","Context","React","useContext","consumerName","contextValue","Error","Provider","SegmentedControlContextProvider","useSegmentedControlContext","SegmentedControlItemListContextProvider","useSegmentedControlItemListContext"],"mappings":";;;;AAOA;AACA,SAASA,aAAaA,CACpBC,YAAoB,EACpBC,YAA0B,EAC1B;AACA,EAAA,MAAMC,OAAO,gBAAGC,KAAK,CAACJ,aAAa,CAAeE,YAAY,CAAC,CAAA;EAE/D,SAASG,UAAUA,CAACC,YAAoB,EAAE;AACxC,IAAA,MAAMC,YAAY,GAAGH,KAAK,CAACC,UAAU,CAACF,OAAO,CAAC,CAAA;IAE9C,IAAI,CAACI,YAAY,EAAE;MACjB,MAAM,IAAIC,KAAK,CAAE,CAAA,CAAA,EAAGF,YAAa,CAAyBL,uBAAAA,EAAAA,YAAa,GAAE,CAAC,CAAA;AAC5E,KAAA;AAEA,IAAA,OAAOM,YAAY,CAAA;AACrB,GAAA;AAEA,EAAA,OAAO,CACLJ,OAAO,CAACM,QAAQ,EAChBJ,UAAU,CACX,CAAA;AACH,CAAA;AAIa,MAAA,CACXK,+BAA+B,EAC/BC,0BAA0B,CAC3B,GAAGX,aAAa,CAAsC,kBAAkB,EAAE,IAAI,EAAC;AAMnE,MAAA,CACXY,uCAAuC,EACvCC,kCAAkC,CACnC,GAAGb,aAAa,CAA8C,0BAA0B,EAAE,IAAI;;;;;;;"}

package/dist/cjs/components/Forms/SegmentedControl/SegmentedControlIndicator.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var React = require('react');
+var index_esm = require('../../../node_modules/react-resize-detector/build/index.esm.js');
+var useMergeRefs = require('../../../hooks/useMergeRefs.js');
+var SegmentedControl_styled = require('./SegmentedControl.styled.js');
+
+const SEGMENTED_CONTROL_INDICATOR_TEST_ID = 'bezier-react-segmented-control-indicator';
+const SegmentedControlIndicator = function SegmentedControlIndicator({
+  target,
+  container,
+  updateKey
+}) {
+  const [indicatorNode, setIndicatorNode] = React.useState(null);
+  const [indicatorStyle, setIndicatorStyle] = React.useState({});
+  React.useLayoutEffect(function pauseTransitionOnMount() {
+    let timer;
+    if (indicatorNode) {
+      setIndicatorStyle(prev => ({
+        ...prev,
+        transition: 'none'
+      }));
+      timer = setTimeout(() => {
+        setIndicatorStyle(prev => ({
+          ...prev,
+          transition: undefined
+        }));
+      }, SegmentedControl_styled.indicatorTransitionMeta.duration);
+    }
+    return function cleanUp() {
+      clearTimeout(timer);
+    };
+  }, [indicatorNode]);
+  React.useLayoutEffect(function updatePosition() {
+    if (indicatorNode && container && target) {
+      const {
+        top,
+        left,
+        width: selectedElementWidth,
+        height: selectedElementHeight
+      } = target.getBoundingClientRect();
+      const {
+        top: containerTop,
+        left: containerLeft
+      } = container.getBoundingClientRect();
+      setIndicatorStyle(prev => ({
+        ...prev,
+        '--bezier-react-segmented-control-indicator-transform': `translate(${left - containerLeft}px, ${top - containerTop}px)`,
+        '--bezier-react-segmented-control-indicator-width': `${selectedElementWidth}px`,
+        '--bezier-react-segmented-control-indicator-height': `${selectedElementHeight}px`
+      }));
+    }
+  }, [
+  // NOTE: (@ed) to force update indicator position on container size change
+  updateKey, indicatorNode, container, target]);
+  if (!target) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(SegmentedControl_styled.Indicator, {
+    ref: setIndicatorNode,
+    style: indicatorStyle,
+    "data-testid": SEGMENTED_CONTROL_INDICATOR_TEST_ID
+  });
+};
+function useSegmentedControlIndicator({
+  target,
+  refs
+}) {
+  const [container, setContainer] = React.useState(null);
+  const {
+    width: containerWidth,
+    height: containerHeight,
+    ref: resizeDetectorRef
+  } = index_esm.useResizeDetector();
+  const containerSizeKey = `${containerWidth}-${containerHeight}`;
+  const containerRef = useMergeRefs.default(...refs, resizeDetectorRef, setContainer);
+  const render = React.useCallback(() => /*#__PURE__*/React.createElement(SegmentedControlIndicator, {
+    target: target,
+    container: container,
+    updateKey: containerSizeKey
+  }), [target, container, containerSizeKey]);
+  return {
+    containerRef,
+    render
+  };
+}
+
+exports.SEGMENTED_CONTROL_INDICATOR_TEST_ID = SEGMENTED_CONTROL_INDICATOR_TEST_ID;
+exports.useSegmentedControlIndicator = useSegmentedControlIndicator;
+//# sourceMappingURL=SegmentedControlIndicator.js.map

package/dist/cjs/components/Forms/SegmentedControl/SegmentedControlIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlIndicator.js","sources":["../../../../../src/components/Forms/SegmentedControl/SegmentedControlIndicator.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useLayoutEffect,\n  useState,\n} from 'react'\n\nimport { useResizeDetector } from 'react-resize-detector'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\n\nimport * as Styled from './SegmentedControl.styled'\n\nexport const SEGMENTED_CONTROL_INDICATOR_TEST_ID = 'bezier-react-segmented-control-indicator'\n\nconst SegmentedControlIndicator = function SegmentedControlIndicator({\n  target,\n  container,\n  updateKey,\n}: {\n  target: HTMLElement | null\n  container: HTMLElement | null\n  updateKey?: string\n}) {\n  const [indicatorNode, setIndicatorNode] = useState<HTMLDivElement | null>(null)\n  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({})\n\n  useLayoutEffect(function pauseTransitionOnMount() {\n    let timer: NodeJS.Timeout | undefined\n\n    if (indicatorNode) {\n      setIndicatorStyle(prev => ({\n        ...prev,\n        transition: 'none',\n      }))\n\n      timer = setTimeout(() => {\n        setIndicatorStyle(prev => ({\n          ...prev,\n          transition: undefined,\n        }))\n      }, Styled.indicatorTransitionMeta.duration)\n    }\n\n    return function cleanUp() {\n      clearTimeout(timer)\n    }\n  }, [indicatorNode])\n\n  useLayoutEffect(function updatePosition() {\n    if (indicatorNode && container && target) {\n      const {\n        top,\n        left,\n        width: selectedElementWidth,\n        height: selectedElementHeight,\n      } = target.getBoundingClientRect()\n\n      const {\n        top: containerTop,\n        left: containerLeft,\n      } = container.getBoundingClientRect()\n\n      setIndicatorStyle(prev => ({\n        ...prev,\n        '--bezier-react-segmented-control-indicator-transform': `translate(${left - containerLeft}px, ${top - containerTop}px)`,\n        '--bezier-react-segmented-control-indicator-width': `${selectedElementWidth}px`,\n        '--bezier-react-segmented-control-indicator-height': `${selectedElementHeight}px`,\n      }))\n    }\n  }, [\n    // NOTE: (@ed) to force update indicator position on container size change\n    updateKey,\n    indicatorNode,\n    container,\n    target,\n  ])\n\n  if (!target) { return null }\n\n  return (\n    <Styled.Indicator\n      ref={setIndicatorNode}\n      style={indicatorStyle}\n      data-testid={SEGMENTED_CONTROL_INDICATOR_TEST_ID}\n    />\n  )\n}\n\nexport function useSegmentedControlIndicator<Element extends HTMLElement>({\n  target,\n  refs,\n}: {\n  target: HTMLElement | null\n  refs: React.Ref<Element>[]\n}) {\n  const [container, setContainer] = useState<Element | null>(null)\n\n  const {\n    width: containerWidth,\n    height: containerHeight,\n    ref: resizeDetectorRef,\n  } = useResizeDetector<Element>()\n\n  const containerSizeKey = `${containerWidth}-${containerHeight}`\n\n  const containerRef = useMergeRefs(\n    ...refs,\n    resizeDetectorRef,\n    setContainer,\n  )\n\n  const render = useCallback(() => (\n    <SegmentedControlIndicator\n      target={target}\n      container={container}\n      updateKey={containerSizeKey}\n    />\n  ), [\n    target,\n    container,\n    containerSizeKey,\n  ])\n\n  return {\n    containerRef,\n    render,\n  } as const\n}\n"],"names":["SEGMENTED_CONTROL_INDICATOR_TEST_ID","SegmentedControlIndicator","target","container","updateKey","indicatorNode","setIndicatorNode","useState","indicatorStyle","setIndicatorStyle","useLayoutEffect","pauseTransitionOnMount","timer","prev","transition","setTimeout","undefined","Styled","duration","cleanUp","clearTimeout","updatePosition","top","left","width","selectedElementWidth","height","selectedElementHeight","getBoundingClientRect","containerTop","containerLeft","React","createElement","ref","style","useSegmentedControlIndicator","refs","setContainer","containerWidth","containerHeight","resizeDetectorRef","useResizeDetector","containerSizeKey","containerRef","useMergeRefs","render","useCallback"],"mappings":"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"}

package/dist/cjs/components/Forms/SegmentedControl/SegmentedControlItem.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var React = require('react');
+var index_module = require('../../../node_modules/@radix-ui/react-radio-group/dist/index.module.js');
+var index_module$1 = require('../../../node_modules/@radix-ui/react-tabs/dist/index.module.js');
+var useMergeRefs = require('../../../hooks/useMergeRefs.js');
+var domUtils = require('../../../utils/domUtils.js');
+var SegmentedControlContext = require('./SegmentedControlContext.js');
+var SegmentedControl_styled = require('./SegmentedControl.styled.js');
+
+/**
+ * NOTE: (@ed) A property injected at runtime by the radix-ui lib.
+ */
+
+const Item = /*#__PURE__*/React.forwardRef(function Item({
+  children,
+  type,
+  leftContent,
+  rightContent,
+  ...rest
+}, forwardedRef) {
+  const {
+    setSelectedElement
+  } = SegmentedControlContext.useSegmentedControlItemListContext('SegmentedControlItem');
+  const checked = type === 'radiogroup' ? rest?.['data-state'] === 'checked' : rest?.['data-state'] === 'active';
+  const ref = useMergeRefs.default(forwardedRef, React.useCallback(node => {
+    if (checked) {
+      setSelectedElement(node);
+    }
+  }, [checked, setSelectedElement]));
+  return /*#__PURE__*/React.createElement(SegmentedControl_styled.Item, Object.assign({}, rest, {
+    ref: ref,
+    type: "button",
+    "data-checked": domUtils.ariaAttr(checked)
+  }), /*#__PURE__*/React.createElement(SegmentedControl_styled.ItemContainer, null, leftContent, /*#__PURE__*/React.createElement(SegmentedControl_styled.ItemLabel, null, children), rightContent));
+});
+function SegmentedControlItemImpl({
+  children,
+  ...rest
+}, forwardedRef) {
+  const {
+    type
+  } = SegmentedControlContext.useSegmentedControlContext('SegmentedControlItem');
+  const SegmentedControlItem = type === 'radiogroup' ? index_module.Item : index_module$1.Trigger;
+  return /*#__PURE__*/React.createElement(SegmentedControlItem, Object.assign({
+    asChild: true,
+    ref: forwardedRef
+  }, rest), /*#__PURE__*/React.createElement(Item, {
+    type: type
+  }, children));
+}
+
+/**
+ * `SegmentedControlItem` component is each item in `SegmentedControl`.
+ *
+ * If the type of `SegmentedControl` is `radiogroup`, this component acts as a radio item.
+ * In this case, it must be used as a child of `SegmentedControl`.
+ *
+ * If the type of `SegmentedControl` is `tabs`, this component acts as a tab item.
+ * In this case, it must be used as a child of `SegmentedControlTabList`.
+ */
+const SegmentedControlItem = /*#__PURE__*/React.forwardRef(SegmentedControlItemImpl);
+
+exports.SegmentedControlItem = SegmentedControlItem;
+//# sourceMappingURL=SegmentedControlItem.js.map

package/dist/cjs/components/Forms/SegmentedControl/SegmentedControlItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlItem.js","sources":["../../../../../src/components/Forms/SegmentedControl/SegmentedControlItem.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n} from 'react'\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { ariaAttr } from '~/src/utils/domUtils'\n\nimport {\n  type SegmentedControlItemProps,\n  type SegmentedControlProps,\n  type SegmentedControlType,\n} from './SegmentedControl.types'\nimport {\n  useSegmentedControlContext,\n  useSegmentedControlItemListContext,\n} from './SegmentedControlContext'\n\nimport * as Styled from './SegmentedControl.styled'\n\n/**\n * NOTE: (@ed) A property injected at runtime by the radix-ui lib.\n */\ntype ItemProps<Type extends SegmentedControlType> = (\n  Type extends 'radiogroup'\n    ? { 'data-state'?: 'unchecked' | 'checked' }\n    : { 'data-state'?: 'inactive' | 'active' }\n)\n& React.HTMLAttributes<HTMLButtonElement>\n& Partial<SegmentedControlItemProps<Type>>\n& Required<Pick<SegmentedControlProps<Type, string>, 'type'>>\n\nconst Item = forwardRef<HTMLButtonElement, ItemProps<SegmentedControlType>>(function Item({\n  children,\n  type,\n  leftContent,\n  rightContent,\n  ...rest\n}, forwardedRef) {\n  const { setSelectedElement } = useSegmentedControlItemListContext('SegmentedControlItem')\n\n  const checked = type === 'radiogroup'\n    ? (rest as ItemProps<typeof type>)?.['data-state'] === 'checked'\n    : (rest as ItemProps<typeof type>)?.['data-state'] === 'active'\n\n  const ref = useMergeRefs(\n    forwardedRef,\n    useCallback((node: HTMLButtonElement | null) => {\n      if (checked) {\n        setSelectedElement(node)\n      }\n    }, [\n      checked,\n      setSelectedElement,\n    ]),\n  )\n\n  return (\n    <Styled.Item\n      {...rest}\n      ref={ref}\n      type=\"button\"\n      data-checked={ariaAttr(checked)}\n    >\n      <Styled.ItemContainer>\n        { leftContent }\n        <Styled.ItemLabel>\n          { children }\n        </Styled.ItemLabel>\n        { rightContent }\n      </Styled.ItemContainer>\n    </Styled.Item>\n  )\n})\n\nfunction SegmentedControlItemImpl<Value extends string>({\n  children,\n  ...rest\n}: SegmentedControlItemProps<Value>, forwardedRef: React.Ref<HTMLButtonElement>) {\n  const { type } = useSegmentedControlContext('SegmentedControlItem')\n\n  const SegmentedControlItem = type === 'radiogroup'\n    ? RadioGroupPrimitive.Item\n    : TabsPrimitive.Trigger\n\n  return (\n    <SegmentedControlItem\n      asChild\n      ref={forwardedRef}\n      {...rest}\n    >\n      <Item type={type}>\n        { children }\n      </Item>\n    </SegmentedControlItem>\n  )\n}\n\n/**\n * `SegmentedControlItem` component is each item in `SegmentedControl`.\n *\n * If the type of `SegmentedControl` is `radiogroup`, this component acts as a radio item.\n * In this case, it must be used as a child of `SegmentedControl`.\n *\n * If the type of `SegmentedControl` is `tabs`, this component acts as a tab item.\n * In this case, it must be used as a child of `SegmentedControlTabList`.\n */\nexport const SegmentedControlItem = forwardRef(SegmentedControlItemImpl) as <Value extends string>(\n  props: SegmentedControlItemProps<Value> & { ref?: React.ForwardedRef<HTMLButtonElement> }\n) => JSX.Element\n"],"names":["Item","forwardRef","children","type","leftContent","rightContent","rest","forwardedRef","setSelectedElement","useSegmentedControlItemListContext","checked","ref","useMergeRefs","useCallback","node","React","createElement","Styled","Object","assign","ariaAttr","SegmentedControlItemImpl","useSegmentedControlContext","SegmentedControlItem","RadioGroupPrimitive","TabsPrimitive","asChild"],"mappings":";;;;;;;;;;AAuBA;AACA;AACA;;AAUA,MAAMA,IAAI,gBAAGC,gBAAU,CAAqD,SAASD,IAAIA,CAAC;EACxFE,QAAQ;EACRC,IAAI;EACJC,WAAW;EACXC,YAAY;EACZ,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;EACf,MAAM;AAAEC,IAAAA,kBAAAA;AAAmB,GAAC,GAAGC,0DAAkC,CAAC,sBAAsB,CAAC,CAAA;AAEzF,EAAA,MAAMC,OAAO,GAAGP,IAAI,KAAK,YAAY,GAChCG,IAAI,GAA8B,YAAY,CAAC,KAAK,SAAS,GAC7DA,IAAI,GAA8B,YAAY,CAAC,KAAK,QAAQ,CAAA;EAEjE,MAAMK,GAAG,GAAGC,oBAAY,CACtBL,YAAY,EACZM,iBAAW,CAAEC,IAA8B,IAAK;AAC9C,IAAA,IAAIJ,OAAO,EAAE;MACXF,kBAAkB,CAACM,IAAI,CAAC,CAAA;AAC1B,KAAA;AACF,GAAC,EAAE,CACDJ,OAAO,EACPF,kBAAkB,CACnB,CACH,CAAC,CAAA;AAED,EAAA,oBACEO,KAAA,CAAAC,aAAA,CAACC,4BAAW,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACNb,IAAI,EAAA;AACRK,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,IAAI,EAAC,QAAQ;IACb,cAAciB,EAAAA,iBAAQ,CAACV,OAAO,CAAA;GAE9BK,CAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACC,qCAAoB,EACjBb,IAAAA,EAAAA,WAAW,eACbW,KAAA,CAAAC,aAAA,CAACC,iCAAgB,EAAA,IAAA,EACbf,QACc,CAAC,EACjBG,YACkB,CACX,CAAC,CAAA;AAElB,CAAC,CAAC,CAAA;AAEF,SAASgB,wBAAwBA,CAAuB;EACtDnB,QAAQ;EACR,GAAGI,IAAAA;AAC6B,CAAC,EAAEC,YAA0C,EAAE;EAC/E,MAAM;AAAEJ,IAAAA,IAAAA;AAAK,GAAC,GAAGmB,kDAA0B,CAAC,sBAAsB,CAAC,CAAA;AAEnE,EAAA,MAAMC,oBAAoB,GAAGpB,IAAI,KAAK,YAAY,GAC9CqB,iBAAwB,GACxBC,sBAAqB,CAAA;EAEzB,oBACEV,KAAA,CAAAC,aAAA,CAACO,oBAAoB,EAAAL,MAAA,CAAAC,MAAA,CAAA;IACnBO,OAAO,EAAA,IAAA;AACPf,IAAAA,GAAG,EAAEJ,YAAAA;AAAa,GAAA,EACdD,IAAI,CAERS,eAAAA,KAAA,CAAAC,aAAA,CAAChB,IAAI,EAAA;AAACG,IAAAA,IAAI,EAAEA,IAAAA;GACRD,EAAAA,QACE,CACc,CAAC,CAAA;AAE3B,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaqB,oBAAoB,gBAAGtB,gBAAU,CAACoB,wBAAwB;;;;"}