@channel.io/bezier-react 1.5.0 → 1.6.0

package/dist/esm/components/Forms/SegmentedControl/SegmentedControlIndicator.mjs

@@ -0,0 +1,87 @@
+import React__default, { useState, useCallback, useLayoutEffect } from 'react';
+import { useResizeDetector } from '../../../node_modules/react-resize-detector/build/index.esm.mjs';
+import useMergeRefs from '../../../hooks/useMergeRefs.mjs';
+import { indicatorTransitionMeta, Indicator } from './SegmentedControl.styled.mjs';
+
+const SEGMENTED_CONTROL_INDICATOR_TEST_ID = 'bezier-react-segmented-control-indicator';
+const SegmentedControlIndicator = function SegmentedControlIndicator({
+  target,
+  container,
+  updateKey
+}) {
+  const [indicatorNode, setIndicatorNode] = useState(null);
+  const [indicatorStyle, setIndicatorStyle] = useState({});
+  useLayoutEffect(function pauseTransitionOnMount() {
+    let timer;
+    if (indicatorNode) {
+      setIndicatorStyle(prev => ({
+        ...prev,
+        transition: 'none'
+      }));
+      timer = setTimeout(() => {
+        setIndicatorStyle(prev => ({
+          ...prev,
+          transition: undefined
+        }));
+      }, indicatorTransitionMeta.duration);
+    }
+    return function cleanUp() {
+      clearTimeout(timer);
+    };
+  }, [indicatorNode]);
+  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__default.createElement(Indicator, {
+    ref: setIndicatorNode,
+    style: indicatorStyle,
+    "data-testid": SEGMENTED_CONTROL_INDICATOR_TEST_ID
+  });
+};
+function useSegmentedControlIndicator({
+  target,
+  refs
+}) {
+  const [container, setContainer] = useState(null);
+  const {
+    width: containerWidth,
+    height: containerHeight,
+    ref: resizeDetectorRef
+  } = useResizeDetector();
+  const containerSizeKey = `${containerWidth}-${containerHeight}`;
+  const containerRef = useMergeRefs(...refs, resizeDetectorRef, setContainer);
+  const render = useCallback(() => /*#__PURE__*/React__default.createElement(SegmentedControlIndicator, {
+    target: target,
+    container: container,
+    updateKey: containerSizeKey
+  }), [target, container, containerSizeKey]);
+  return {
+    containerRef,
+    render
+  };
+}
+
+export { SEGMENTED_CONTROL_INDICATOR_TEST_ID, useSegmentedControlIndicator };
+//# sourceMappingURL=SegmentedControlIndicator.mjs.map

package/dist/esm/components/Forms/SegmentedControl/SegmentedControlIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlIndicator.mjs","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/esm/components/Forms/SegmentedControl/SegmentedControlItem.mjs

@@ -0,0 +1,63 @@
+import React__default, { forwardRef, useCallback } from 'react';
+import { Item as $f99a8c78507165f7$export$6d08773d2e66f8f2 } from '../../../node_modules/@radix-ui/react-radio-group/dist/index.module.mjs';
+import { Trigger as $69cb30bb0017df05$export$41fb9f06171c75f4 } from '../../../node_modules/@radix-ui/react-tabs/dist/index.module.mjs';
+import useMergeRefs from '../../../hooks/useMergeRefs.mjs';
+import { ariaAttr } from '../../../utils/domUtils.mjs';
+import { useSegmentedControlContext, useSegmentedControlItemListContext } from './SegmentedControlContext.mjs';
+import { Item as Item$1, ItemContainer, ItemLabel } from './SegmentedControl.styled.mjs';
+
+/**
+ * NOTE: (@ed) A property injected at runtime by the radix-ui lib.
+ */
+
+const Item = /*#__PURE__*/forwardRef(function Item({
+  children,
+  type,
+  leftContent,
+  rightContent,
+  ...rest
+}, forwardedRef) {
+  const {
+    setSelectedElement
+  } = useSegmentedControlItemListContext('SegmentedControlItem');
+  const checked = type === 'radiogroup' ? rest?.['data-state'] === 'checked' : rest?.['data-state'] === 'active';
+  const ref = useMergeRefs(forwardedRef, useCallback(node => {
+    if (checked) {
+      setSelectedElement(node);
+    }
+  }, [checked, setSelectedElement]));
+  return /*#__PURE__*/React__default.createElement(Item$1, Object.assign({}, rest, {
+    ref: ref,
+    type: "button",
+    "data-checked": ariaAttr(checked)
+  }), /*#__PURE__*/React__default.createElement(ItemContainer, null, leftContent, /*#__PURE__*/React__default.createElement(ItemLabel, null, children), rightContent));
+});
+function SegmentedControlItemImpl({
+  children,
+  ...rest
+}, forwardedRef) {
+  const {
+    type
+  } = useSegmentedControlContext('SegmentedControlItem');
+  const SegmentedControlItem = type === 'radiogroup' ? $f99a8c78507165f7$export$6d08773d2e66f8f2 : $69cb30bb0017df05$export$41fb9f06171c75f4;
+  return /*#__PURE__*/React__default.createElement(SegmentedControlItem, Object.assign({
+    asChild: true,
+    ref: forwardedRef
+  }, rest), /*#__PURE__*/React__default.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__*/forwardRef(SegmentedControlItemImpl);
+
+export { SegmentedControlItem };
+//# sourceMappingURL=SegmentedControlItem.mjs.map

package/dist/esm/components/Forms/SegmentedControl/SegmentedControlItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlItem.mjs","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,UAAU,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,kCAAkC,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,YAAY,CACtBL,YAAY,EACZM,WAAW,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,cAAA,CAAAC,aAAA,CAACC,MAAW,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACNb,IAAI,EAAA;AACRK,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,IAAI,EAAC,QAAQ;IACb,cAAciB,EAAAA,QAAQ,CAACV,OAAO,CAAA;GAE9BK,CAAAA,eAAAA,cAAA,CAAAC,aAAA,CAACC,aAAoB,EACjBb,IAAAA,EAAAA,WAAW,eACbW,cAAA,CAAAC,aAAA,CAACC,SAAgB,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,0BAA0B,CAAC,sBAAsB,CAAC,CAAA;AAEnE,EAAA,MAAMC,oBAAoB,GAAGpB,IAAI,KAAK,YAAY,GAC9CqB,yCAAwB,GACxBC,yCAAqB,CAAA;EAEzB,oBACEV,cAAA,CAAAC,aAAA,CAACO,oBAAoB,EAAAL,MAAA,CAAAC,MAAA,CAAA;IACnBO,OAAO,EAAA,IAAA;AACPf,IAAAA,GAAG,EAAEJ,YAAAA;AAAa,GAAA,EACdD,IAAI,CAERS,eAAAA,cAAA,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,UAAU,CAACoB,wBAAwB;;;;"}

package/dist/esm/components/Forms/Slider/Slider.mjs

@@ -0,0 +1,81 @@
+import React__default, { forwardRef, useState, useEffect, useCallback } from 'react';
+import { Root as $faa2e61a3361514f$export$be92b6f5f03c0fe9, Track as $faa2e61a3361514f$export$13921ac0cc260818, Range as $faa2e61a3361514f$export$9a58ef0d7ad3278c, Thumb as $faa2e61a3361514f$export$6521433ed15a34db } from '../../../node_modules/@radix-ui/react-slider/dist/index.module.mjs';
+import { noop } from '../../../utils/functionUtils.mjs';
+import { SliderRoot, SliderTrack, SliderRange, SliderGuide, SliderThumb } from './Slider.styled.mjs';
+
+const SLIDER_TEST_ID = 'bezier-react-slider';
+const SLIDER_THUMB_TEST_ID = 'bezier-react-slider-thumb';
+const Slider = /*#__PURE__*/forwardRef(function Slider({
+  width = 36,
+  guide,
+  onThumbPointerDown = noop,
+  onThumbPointerUp = noop,
+  defaultValue = [5],
+  value,
+  disabled = false,
+  min = 0,
+  max = 10,
+  step = 1,
+  onValueChange = noop,
+  minStepsBetweenThumbs = 0,
+  ...rest
+}, forwardedRef) {
+  const [currentValue, setCurrentValue] = useState(value ?? defaultValue);
+  useEffect(function updateCurrentValue() {
+    if (value) {
+      setCurrentValue(value);
+      onValueChange(value);
+    }
+  }, [value, onValueChange]);
+  const handleValueChange = useCallback(_value => {
+    setCurrentValue(_value);
+    onValueChange(_value);
+  }, [onValueChange]);
+  const handlePointerDown = useCallback(() => {
+    if (!disabled) {
+      onThumbPointerDown(currentValue);
+    }
+  }, [disabled, onThumbPointerDown, currentValue]);
+  const handlePointerUp = useCallback(() => {
+    if (!disabled) {
+      onThumbPointerUp(currentValue);
+    }
+  }, [disabled, onThumbPointerUp, currentValue]);
+  return /*#__PURE__*/React__default.createElement($faa2e61a3361514f$export$be92b6f5f03c0fe9, {
+    asChild: true,
+    defaultValue: defaultValue,
+    value: currentValue,
+    disabled: disabled,
+    min: min,
+    max: max,
+    step: step,
+    onValueChange: handleValueChange,
+    minStepsBetweenThumbs: minStepsBetweenThumbs
+  }, /*#__PURE__*/React__default.createElement(SliderRoot, Object.assign({
+    width: width,
+    disabled: disabled,
+    ref: forwardedRef,
+    "data-testid": SLIDER_TEST_ID
+  }, rest), /*#__PURE__*/React__default.createElement($faa2e61a3361514f$export$13921ac0cc260818, {
+    asChild: true
+  }, /*#__PURE__*/React__default.createElement(SliderTrack, null, /*#__PURE__*/React__default.createElement($faa2e61a3361514f$export$9a58ef0d7ad3278c, {
+    asChild: true
+  }, /*#__PURE__*/React__default.createElement(SliderRange, null)))), guide?.map(guideValue => /*#__PURE__*/React__default.createElement(SliderGuide, {
+    key: `slider-guide-${guideValue}`,
+    min: min,
+    max: max,
+    guideValue: guideValue
+  })), currentValue.map((v, i) => /*#__PURE__*/React__default.createElement($faa2e61a3361514f$export$6521433ed15a34db, {
+    asChild: true
+    // eslint-disable-next-line react/no-array-index-key
+    ,
+    key: `slider-thumb-${i}`,
+    onPointerDown: handlePointerDown,
+    onPointerUp: handlePointerUp
+  }, /*#__PURE__*/React__default.createElement(SliderThumb, {
+    "data-testid": SLIDER_THUMB_TEST_ID
+  })))));
+});
+
+export { SLIDER_TEST_ID, SLIDER_THUMB_TEST_ID, Slider };
+//# sourceMappingURL=Slider.mjs.map

package/dist/esm/components/Forms/Slider/Slider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.mjs","sources":["../../../../../src/components/Forms/Slider/Slider.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useState,\n} from 'react'\n\nimport * as SliderPrimitive from '@radix-ui/react-slider'\n\nimport { noop } from '~/src/utils/functionUtils'\n\nimport type SliderProps from './Slider.types'\n\nimport * as Styled from './Slider.styled'\n\nexport const SLIDER_TEST_ID = 'bezier-react-slider'\nexport const SLIDER_THUMB_TEST_ID = 'bezier-react-slider-thumb'\n\nexport const Slider = forwardRef(function Slider(\n  {\n    width = 36,\n    guide,\n    onThumbPointerDown = noop,\n    onThumbPointerUp = noop,\n    defaultValue = [5],\n    value,\n    disabled = false,\n    min = 0,\n    max = 10,\n    step = 1,\n    onValueChange = noop,\n    minStepsBetweenThumbs = 0,\n    ...rest\n  }: SliderProps,\n  forwardedRef: React.Ref<HTMLDivElement>,\n) {\n  const [currentValue, setCurrentValue] = useState<number[]>(value ?? defaultValue)\n\n  useEffect(function updateCurrentValue() {\n    if (value) {\n      setCurrentValue(value)\n      onValueChange(value)\n    }\n  }, [\n    value,\n    onValueChange,\n  ])\n\n  const handleValueChange: (value: number[]) => void = useCallback((_value) => {\n    setCurrentValue(_value)\n    onValueChange(_value)\n  }, [onValueChange])\n\n  const handlePointerDown: React.PointerEventHandler<HTMLElement> = useCallback(() => {\n    if (!disabled) {\n      onThumbPointerDown(currentValue)\n    }\n  }, [\n    disabled,\n    onThumbPointerDown,\n    currentValue,\n  ])\n\n  const handlePointerUp: React.PointerEventHandler<HTMLElement> = useCallback(() => {\n    if (!disabled) {\n      onThumbPointerUp(currentValue)\n    }\n  }, [\n    disabled,\n    onThumbPointerUp,\n    currentValue,\n  ])\n\n  return (\n    <SliderPrimitive.Root\n      asChild\n      defaultValue={defaultValue}\n      value={currentValue}\n      disabled={disabled}\n      min={min}\n      max={max}\n      step={step}\n      onValueChange={handleValueChange}\n      minStepsBetweenThumbs={minStepsBetweenThumbs}\n    >\n      <Styled.SliderRoot\n        width={width}\n        disabled={disabled}\n        ref={forwardedRef}\n        data-testid={SLIDER_TEST_ID}\n        {...rest}\n      >\n        <SliderPrimitive.Track asChild>\n          <Styled.SliderTrack>\n            <SliderPrimitive.Range asChild>\n              <Styled.SliderRange />\n            </SliderPrimitive.Range>\n          </Styled.SliderTrack>\n        </SliderPrimitive.Track>\n        { guide?.map((guideValue) => (\n          <Styled.SliderGuide\n            key={`slider-guide-${guideValue}`}\n            min={min}\n            max={max}\n            guideValue={guideValue}\n          />\n        )) }\n        { currentValue.map((v, i) => (\n          <SliderPrimitive.Thumb\n            asChild\n            // eslint-disable-next-line react/no-array-index-key\n            key={`slider-thumb-${i}`}\n            onPointerDown={handlePointerDown}\n            onPointerUp={handlePointerUp}\n          >\n            <Styled.SliderThumb\n              data-testid={SLIDER_THUMB_TEST_ID}\n            />\n          </SliderPrimitive.Thumb>\n        )) }\n      </Styled.SliderRoot>\n    </SliderPrimitive.Root>\n  )\n})\n"],"names":["SLIDER_TEST_ID","SLIDER_THUMB_TEST_ID","Slider","forwardRef","width","guide","onThumbPointerDown","noop","onThumbPointerUp","defaultValue","value","disabled","min","max","step","onValueChange","minStepsBetweenThumbs","rest","forwardedRef","currentValue","setCurrentValue","useState","useEffect","updateCurrentValue","handleValueChange","useCallback","_value","handlePointerDown","handlePointerUp","React","createElement","SliderPrimitive","asChild","Styled","Object","assign","ref","map","guideValue","key","v","i","onPointerDown","onPointerUp"],"mappings":"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"}

package/dist/esm/components/Forms/Slider/Slider.styled.mjs

@@ -0,0 +1,102 @@
+import disabledOpacity from '../../../constants/DisabledOpacity.mjs';
+import { toLength } from '../../../utils/styleUtils.mjs';
+import { focusedInputWrapperStyle } from '../Inputs/mixins.mjs';
+import { styled as FoundationStyled, css as FoundationCSS } from '../../../foundation/FoundationStyledComponent.mjs';
+
+const SLIDER_TRACK_RANGE_HEIGHT = 6;
+const SLIDER_THUMB_SIZE = 20;
+const SLIDER_GUIDE_WIDTH = 2;
+const SLIDER_GUIDE_HEIGHT = 8;
+function calculateGuideBottomPosition({
+  gap
+}) {
+  return FoundationCSS`
+    bottom: calc(${SLIDER_GUIDE_HEIGHT}px + ${SLIDER_GUIDE_HEIGHT / 2}px + ${gap}px);
+  `;
+}
+function calculateGuideLeftPosition({
+  min,
+  max,
+  guideValue
+}) {
+  const relativePositionPercentage = guideValue / (max - min) * 100;
+  const thumbOffsetPx = ((max + min) / 2 - guideValue) * (SLIDER_THUMB_SIZE / (max - min));
+  return FoundationCSS`
+    left: calc(${relativePositionPercentage}% - ${SLIDER_GUIDE_WIDTH / 2}px + ${thumbOffsetPx}px);
+  `;
+}
+const SliderRoot = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "Sliderstyled__SliderRoot",
+  componentId: "sc-k2r47n-0"
+})(["position:relative;display:flex;align-items:center;width:", ";height:", "px;touch-action:none;cursor:", ";user-select:none;opacity:", ";", ";", ""], ({
+  width
+}) => toLength(width, '36px'), SLIDER_THUMB_SIZE, ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer', ({
+  disabled
+}) => disabled ? disabledOpacity : 'initial', ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS(['opacity']), ({
+  interpolation
+}) => interpolation);
+const SliderTrack = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "Sliderstyled__SliderTrack",
+  componentId: "sc-k2r47n-1"
+})(["position:relative;flex:1;height:", "px;", " background-color:", ";", ""], SLIDER_TRACK_RANGE_HEIGHT, ({
+  foundation
+}) => foundation?.rounding?.round3, ({
+  foundation
+}) => foundation?.theme?.['bg-black-dark'], ({
+  interpolation
+}) => interpolation);
+const SliderRange = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "Sliderstyled__SliderRange",
+  componentId: "sc-k2r47n-2"
+})(["position:absolute;height:100%;", " background-color:", ";", ""], ({
+  foundation
+}) => foundation?.rounding?.round3, ({
+  foundation
+}) => foundation?.theme?.['bgtxt-green-normal'], ({
+  interpolation
+}) => interpolation);
+const SliderGuide = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "Sliderstyled__SliderGuide",
+  componentId: "sc-k2r47n-3"
+})(["position:absolute;", " ", " width:", "px;height:", "px;", " background-color:", ";", ""], calculateGuideBottomPosition({
+  gap: 3
+}), ({
+  min,
+  max,
+  guideValue
+}) => calculateGuideLeftPosition({
+  min,
+  max,
+  guideValue
+}), SLIDER_GUIDE_WIDTH, SLIDER_GUIDE_HEIGHT, ({
+  foundation
+}) => foundation?.rounding?.round1, ({
+  foundation
+}) => foundation?.theme?.['bg-black-light'], ({
+  interpolation
+}) => interpolation);
+const SliderThumb = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "Sliderstyled__SliderThumb",
+  componentId: "sc-k2r47n-4"
+})(["all:unset;display:block;width:", "px;height:", "px;", " ", " background-color:", ";&:hover{", " background-color:", ";}&:focus-visible{", "}", " ", ""], SLIDER_THUMB_SIZE, SLIDER_THUMB_SIZE, ({
+  foundation
+}) => foundation?.rounding?.round12, ({
+  foundation
+}) => foundation?.elevation?.ev2(), ({
+  foundation
+}) => foundation?.theme?.['bgtxt-absolute-white-dark'], ({
+  foundation
+}) => foundation?.elevation?.ev3(), ({
+  foundation
+}) => foundation?.theme?.['bgtxt-absolute-white-dark'], focusedInputWrapperStyle, ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS(['box-shadow']), ({
+  interpolation
+}) => interpolation);
+
+export { SliderGuide, SliderRange, SliderRoot, SliderThumb, SliderTrack };
+//# sourceMappingURL=Slider.styled.mjs.map

package/dist/esm/components/Forms/Slider/Slider.styled.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.styled.mjs","sources":["../../../../../src/components/Forms/Slider/Slider.styled.ts"],"sourcesContent":["import {\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport DisabledOpacity from '~/src/constants/DisabledOpacity'\nimport { toLength } from '~/src/utils/styleUtils'\n\nimport { focusedInputWrapperStyle } from '~/src/components/Forms/Inputs/mixins'\n\nimport type SliderProps from './Slider.types'\n\nconst SLIDER_TRACK_RANGE_HEIGHT = 6\nconst SLIDER_THUMB_SIZE = 20\nconst SLIDER_GUIDE_WIDTH = 2\nconst SLIDER_GUIDE_HEIGHT = 8\n\ninterface CalculateGuideBottomPosition {\n  gap: number\n}\n\nfunction calculateGuideBottomPosition({\n  gap,\n}: CalculateGuideBottomPosition) {\n  return css`\n    bottom: calc(${SLIDER_GUIDE_HEIGHT}px + ${SLIDER_GUIDE_HEIGHT / 2}px + ${gap}px);\n  `\n}\n\ninterface CalculateGuideLeftPosition {\n  min: number\n  max: number\n  guideValue: number\n}\n\nfunction calculateGuideLeftPosition({\n  min,\n  max,\n  guideValue,\n}: CalculateGuideLeftPosition) {\n  const relativePositionPercentage = (guideValue / (max - min)) * 100\n  const thumbOffsetPx = (((max + min) / 2) - guideValue) * (SLIDER_THUMB_SIZE / ((max - min)))\n\n  return css`\n    left: calc(${relativePositionPercentage}% - ${SLIDER_GUIDE_WIDTH / 2}px + ${thumbOffsetPx}px);\n  `\n}\n\ninterface SliderRootProps extends SliderProps {\n  width: NonNullable<SliderProps['width']>\n}\n\nexport const SliderRoot = styled.div<SliderRootProps>`\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  width: ${({ width }) => toLength(width, '36px')};\n  height: ${SLIDER_THUMB_SIZE}px;\n\n  touch-action: none;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n  user-select: none;\n\n  opacity: ${({ disabled }) => (disabled ? DisabledOpacity : 'initial')};\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['opacity'])};\n  ${({ interpolation }) => interpolation}\n`\n\ninterface SliderTrackProps extends SliderProps {}\n\nexport const SliderTrack = styled.div<SliderTrackProps>`\n  position: relative;\n  flex: 1;\n  height: ${SLIDER_TRACK_RANGE_HEIGHT}px;\n\n  ${({ foundation }) => foundation?.rounding?.round3}\n  background-color: ${({ foundation }) => foundation?.theme?.['bg-black-dark']};\n\n  ${({ interpolation }) => interpolation}\n`\n\ninterface SliderRangeProps extends SliderProps {}\n\nexport const SliderRange = styled.div<SliderRangeProps>`\n  position: absolute;\n  height: 100%;\n\n  ${({ foundation }) => foundation?.rounding?.round3}\n  background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-green-normal']};\n\n  ${({ interpolation }) => interpolation}\n`\n\ninterface SliderGuideProps extends SliderProps {\n  min: NonNullable<SliderProps['min']>\n  max: NonNullable<SliderProps['max']>\n  guideValue: number\n}\n\nexport const SliderGuide = styled.div<SliderGuideProps>`\n  position: absolute;\n  ${calculateGuideBottomPosition({ gap: 3 })}\n  ${({ min, max, guideValue }) => calculateGuideLeftPosition({ min, max, guideValue })}\n\n  width: ${SLIDER_GUIDE_WIDTH}px;\n  height: ${SLIDER_GUIDE_HEIGHT}px;\n\n  ${({ foundation }) => foundation?.rounding?.round1}\n  background-color: ${({ foundation }) => foundation?.theme?.['bg-black-light']};\n\n  ${({ interpolation }) => interpolation}\n`\n\ninterface SliderThumbProps extends SliderProps {}\n\nexport const SliderThumb = styled.div<SliderThumbProps>`\n  all: unset;\n  display: block;\n\n  width: ${SLIDER_THUMB_SIZE}px;\n  height: ${SLIDER_THUMB_SIZE}px;\n\n  ${({ foundation }) => foundation?.rounding?.round12}\n  ${({ foundation }) => foundation?.elevation?.ev2()}\n  background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-absolute-white-dark']};\n\n  &:hover {\n    ${({ foundation }) => foundation?.elevation?.ev3()}\n    background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-absolute-white-dark']};\n  }\n\n  &:focus-visible {\n    ${focusedInputWrapperStyle}\n  }\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['box-shadow'])}\n  ${({ interpolation }) => interpolation}\n`\n"],"names":["SLIDER_TRACK_RANGE_HEIGHT","SLIDER_THUMB_SIZE","SLIDER_GUIDE_WIDTH","SLIDER_GUIDE_HEIGHT","calculateGuideBottomPosition","gap","css","calculateGuideLeftPosition","min","max","guideValue","relativePositionPercentage","thumbOffsetPx","SliderRoot","styled","div","withConfig","displayName","componentId","width","toLength","disabled","DisabledOpacity","foundation","transition","getTransitionsCSS","interpolation","SliderTrack","rounding","round3","theme","SliderRange","SliderGuide","round1","SliderThumb","round12","elevation","ev2","ev3","focusedInputWrapperStyle"],"mappings":";;;;;AAYA,MAAMA,yBAAyB,GAAG,CAAC,CAAA;AACnC,MAAMC,iBAAiB,GAAG,EAAE,CAAA;AAC5B,MAAMC,kBAAkB,GAAG,CAAC,CAAA;AAC5B,MAAMC,mBAAmB,GAAG,CAAC,CAAA;AAM7B,SAASC,4BAA4BA,CAAC;AACpCC,EAAAA,GAAAA;AAC4B,CAAC,EAAE;AAC/B,EAAA,OAAOC,aAAI,CAAA;AACb,iBAAA,EAAmBH,mBAAoB,CAAOA,KAAAA,EAAAA,mBAAmB,GAAG,CAAE,QAAOE,GAAI,CAAA;AACjF,EAAG,CAAA,CAAA;AACH,CAAA;AAQA,SAASE,0BAA0BA,CAAC;EAClCC,GAAG;EACHC,GAAG;AACHC,EAAAA,UAAAA;AAC0B,CAAC,EAAE;EAC7B,MAAMC,0BAA0B,GAAID,UAAU,IAAID,GAAG,GAAGD,GAAG,CAAC,GAAI,GAAG,CAAA;AACnE,EAAA,MAAMI,aAAa,GAAG,CAAE,CAACH,GAAG,GAAGD,GAAG,IAAI,CAAC,GAAIE,UAAU,KAAKT,iBAAiB,IAAKQ,GAAG,GAAGD,GAAG,CAAE,CAAC,CAAA;AAE5F,EAAA,OAAOF,aAAI,CAAA;AACb,eAAA,EAAiBK,0BAA2B,CAAMT,IAAAA,EAAAA,kBAAkB,GAAG,CAAE,QAAOU,aAAc,CAAA;AAC9F,EAAG,CAAA,CAAA;AACH,CAAA;MAMaC,UAAU,gBAAGC,gBAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,0BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,0DAAA,EAAA,UAAA,EAAA,8BAAA,EAAA,4BAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAKzB,CAAC;AAAEC,EAAAA,KAAAA;AAAM,CAAC,KAAKC,QAAQ,CAACD,KAAK,EAAE,MAAM,CAAC,EACrClB,iBAAiB,EAGjB,CAAC;AAAEoB,EAAAA,QAAAA;AAAS,CAAC,KAAMA,QAAQ,GAAG,aAAa,GAAG,SAAU,EAGvD,CAAC;AAAEA,EAAAA,QAAAA;AAAS,CAAC,KAAMA,QAAQ,GAAGC,eAAe,GAAG,SAAU,EAEnE,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,UAAU,EAAEC,iBAAiB,CAAC,CAAC,SAAS,CAAC,CAAC,EAC1E,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;MAIYC,WAAW,gBAAGb,gBAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,2BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAGzBlB,CAAAA,CAAAA,CAAAA,kCAAAA,EAAAA,KAAAA,EAAAA,oBAAAA,EAAAA,GAAAA,EAAAA,EAAAA,CAAAA,EAAAA,yBAAyB,EAEjC,CAAC;AAAEuB,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEK,QAAQ,EAAEC,MAAM,EAC9B,CAAC;AAAEN,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEO,KAAK,GAAG,eAAe,CAAC,EAE1E,CAAC;AAAEJ,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;MAIYK,WAAW,gBAAGjB,gBAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,2BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,gCAAA,EAAA,oBAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAIjC,CAAC;AAAEK,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEK,QAAQ,EAAEC,MAAM,EAC9B,CAAC;AAAEN,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEO,KAAK,GAAG,oBAAoB,CAAC,EAE/E,CAAC;AAAEJ,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;MAQYM,WAAW,gBAAGlB,gBAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,2BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oBAAA,EAAA,GAAA,EAAA,SAAA,EAAA,YAAA,EAAA,KAAA,EAAA,oBAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAEjCd,4BAA4B,CAAC;AAAEC,EAAAA,GAAG,EAAE,CAAA;AAAE,CAAC,CAAC,EACxC,CAAC;EAAEG,GAAG;EAAEC,GAAG;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKH,0BAA0B,CAAC;EAAEC,GAAG;EAAEC,GAAG;AAAEC,EAAAA,UAAAA;AAAW,CAAC,CAAC,EAE3ER,kBAAkB,EACjBC,mBAAmB,EAE3B,CAAC;AAAEoB,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEK,QAAQ,EAAEK,MAAM,EAC9B,CAAC;AAAEV,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEO,KAAK,GAAG,gBAAgB,CAAC,EAE3E,CAAC;AAAEJ,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;MAIYQ,WAAW,gBAAGpB,gBAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,2BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,gCAAA,EAAA,YAAA,EAAA,KAAA,EAAA,GAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAI1BjB,iBAAiB,EAChBA,iBAAiB,EAEzB,CAAC;AAAEsB,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEK,QAAQ,EAAEO,OAAO,EACjD,CAAC;AAAEZ,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEa,SAAS,EAAEC,GAAG,EAAE,EAC9B,CAAC;AAAEd,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEO,KAAK,GAAG,2BAA2B,CAAC,EAGpF,CAAC;AAAEP,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEa,SAAS,EAAEE,GAAG,EAAE,EAC9B,CAAC;AAAEf,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEO,KAAK,GAAG,2BAA2B,CAAC,EAItFS,wBAAwB,EAG1B,CAAC;AAAEhB,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,UAAU,EAAEC,iBAAiB,CAAC,CAAC,YAAY,CAAC,CAAC,EAC7E,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa;;;;"}

package/dist/esm/components/Forms/Switch/Switch.mjs

@@ -0,0 +1,43 @@
+import React__default, { forwardRef } from 'react';
+import { Root as $6be4966fd9bbc698$export$be92b6f5f03c0fe9, Thumb as $6be4966fd9bbc698$export$6521433ed15a34db } from '../../../node_modules/@radix-ui/react-switch/dist/index.module.mjs';
+import useFormFieldProps from '../useFormFieldProps.mjs';
+import { SwitchSize } from './Switch.types.mjs';
+import { SwitchRoot, SwitchThumb } from './Switch.styled.mjs';
+
+const SWITCH_TEST_ID = 'bezier-react-switch';
+const SWITCH_HANDLE_TEST_ID = 'bezier-react-switch-handle';
+const Switch = /*#__PURE__*/forwardRef(function Switch({
+  testId = SWITCH_TEST_ID,
+  handleTestId = SWITCH_HANDLE_TEST_ID,
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  size = SwitchSize.M,
+  ...rest
+}, forwardedRef) {
+  const {
+    disabled,
+    required,
+    ...ownProps
+  } = useFormFieldProps(rest);
+  return /*#__PURE__*/React__default.createElement($6be4966fd9bbc698$export$be92b6f5f03c0fe9, Object.assign({
+    asChild: true,
+    checked: checked,
+    defaultChecked: defaultChecked,
+    onCheckedChange: onCheckedChange,
+    required: required,
+    disabled: disabled
+  }, ownProps), /*#__PURE__*/React__default.createElement(SwitchRoot, {
+    ref: forwardedRef,
+    size: size,
+    "data-testid": testId
+  }, /*#__PURE__*/React__default.createElement($6be4966fd9bbc698$export$6521433ed15a34db, {
+    asChild: true
+  }, /*#__PURE__*/React__default.createElement(SwitchThumb, {
+    size: size,
+    "data-testid": handleTestId
+  }))));
+});
+
+export { SWITCH_HANDLE_TEST_ID, SWITCH_TEST_ID, Switch };
+//# sourceMappingURL=Switch.mjs.map

package/dist/esm/components/Forms/Switch/Switch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.mjs","sources":["../../../../../src/components/Forms/Switch/Switch.tsx"],"sourcesContent":["import React, {\n  type ReactElement,\n  type Ref,\n  forwardRef,\n} from 'react'\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\n\nimport useFormFieldProps from '~/src/components/Forms/useFormFieldProps'\n\nimport type SwitchProps from './Switch.types'\nimport { SwitchSize } from './Switch.types'\n\nimport * as Styled from './Switch.styled'\n\nexport const SWITCH_TEST_ID = 'bezier-react-switch'\nexport const SWITCH_HANDLE_TEST_ID = 'bezier-react-switch-handle'\n\nexport const Switch = forwardRef(function Switch(\n  {\n    testId = SWITCH_TEST_ID,\n    handleTestId = SWITCH_HANDLE_TEST_ID,\n    checked,\n    defaultChecked = false,\n    onCheckedChange,\n    size = SwitchSize.M,\n    ...rest\n  }: SwitchProps,\n  forwardedRef: Ref<HTMLButtonElement>,\n): ReactElement {\n  const {\n    disabled,\n    required,\n    ...ownProps\n  } = useFormFieldProps(rest)\n\n  return (\n    <SwitchPrimitive.Root\n      asChild\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={onCheckedChange}\n      required={required}\n      disabled={disabled}\n      {...ownProps}\n    >\n      <Styled.SwitchRoot\n        ref={forwardedRef}\n        size={size}\n        data-testid={testId}\n      >\n        <SwitchPrimitive.Thumb asChild>\n          <Styled.SwitchThumb\n            size={size}\n            data-testid={handleTestId}\n          />\n        </SwitchPrimitive.Thumb>\n      </Styled.SwitchRoot>\n    </SwitchPrimitive.Root>\n  )\n})\n"],"names":["SWITCH_TEST_ID","SWITCH_HANDLE_TEST_ID","Switch","forwardRef","testId","handleTestId","checked","defaultChecked","onCheckedChange","size","SwitchSize","M","rest","forwardedRef","disabled","required","ownProps","useFormFieldProps","React","createElement","SwitchPrimitive","Object","assign","asChild","Styled","ref"],"mappings":";;;;;;AAeO,MAAMA,cAAc,GAAG,sBAAqB;AAC5C,MAAMC,qBAAqB,GAAG,6BAA4B;MAEpDC,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CAC9C;AACEE,EAAAA,MAAM,GAAGJ,cAAc;AACvBK,EAAAA,YAAY,GAAGJ,qBAAqB;EACpCK,OAAO;AACPC,EAAAA,cAAc,GAAG,KAAK;EACtBC,eAAe;EACfC,IAAI,GAAGC,UAAU,CAACC,CAAC;EACnB,GAAGC,IAAAA;AACQ,CAAC,EACdC,YAAoC,EACtB;EACd,MAAM;IACJC,QAAQ;IACRC,QAAQ;IACR,GAAGC,QAAAA;AACL,GAAC,GAAGC,iBAAiB,CAACL,IAAI,CAAC,CAAA;EAE3B,oBACEM,cAAA,CAAAC,aAAA,CAACC,yCAAoB,EAAAC,MAAA,CAAAC,MAAA,CAAA;IACnBC,OAAO,EAAA,IAAA;AACPjB,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,cAAc,EAAEA,cAAe;AAC/BC,IAAAA,eAAe,EAAEA,eAAgB;AACjCO,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,QAAQ,EAAEA,QAAAA;GACNE,EAAAA,QAAQ,gBAEZE,cAAA,CAAAC,aAAA,CAACK,UAAiB,EAAA;AAChBC,IAAAA,GAAG,EAAEZ,YAAa;AAClBJ,IAAAA,IAAI,EAAEA,IAAK;IACX,aAAaL,EAAAA,MAAAA;AAAO,GAAA,eAEpBc,cAAA,CAAAC,aAAA,CAACC,yCAAqB,EAAA;IAACG,OAAO,EAAA,IAAA;AAAA,GAAA,eAC5BL,cAAA,CAAAC,aAAA,CAACK,WAAkB,EAAA;AACjBf,IAAAA,IAAI,EAAEA,IAAK;IACX,aAAaJ,EAAAA,YAAAA;GACd,CACoB,CACN,CACC,CAAC,CAAA;AAE3B,CAAC;;;;"}

package/dist/esm/components/Forms/Switch/Switch.styled.mjs

@@ -0,0 +1,57 @@
+import disabledOpacity from '../../../constants/DisabledOpacity.mjs';
+import { focusedInputWrapperStyle } from '../Inputs/mixins.mjs';
+import { SwitchSize } from './Switch.types.mjs';
+import { styled as FoundationStyled } from '../../../foundation/FoundationStyledComponent.mjs';
+
+const PADDING = 3;
+const SWITCH_WIDTH = {
+  [SwitchSize.M]: 36,
+  [SwitchSize.S]: 30
+};
+const SWITCH_HEIGHT = {
+  [SwitchSize.M]: 24,
+  [SwitchSize.S]: 20
+};
+const SWITCH_HANDLE_WIDTH_HEIGHT = {
+  [SwitchSize.M]: 18,
+  [SwitchSize.S]: 14
+};
+const SwitchRoot = /*#__PURE__*/FoundationStyled.button.withConfig({
+  displayName: "Switchstyled__SwitchRoot",
+  componentId: "sc-1vz8ffk-0"
+})(["all:unset;position:relative;width:", "px;height:", "px;cursor:pointer;", " background-color:", ";&[data-state='checked']{background-color:", ";&:hover{background-color:", ";}}opacity:initial;&:disabled{cursor:not-allowed;opacity:", ";}&:focus-visible{", "}", ";"], ({
+  size
+}) => SWITCH_WIDTH[size], ({
+  size
+}) => SWITCH_HEIGHT[size], ({
+  foundation
+}) => foundation?.rounding?.round12, ({
+  foundation
+}) => foundation?.theme?.['bg-black-dark'], ({
+  foundation
+}) => foundation?.theme?.['bgtxt-green-normal'], ({
+  foundation
+}) => foundation?.theme?.['bgtxt-green-dark'], disabledOpacity, focusedInputWrapperStyle, ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS(['background-color', 'opacity']));
+const SwitchThumb = /*#__PURE__*/FoundationStyled.span.withConfig({
+  displayName: "Switchstyled__SwitchThumb",
+  componentId: "sc-1vz8ffk-1"
+})(["all:unset;position:absolute;top:", "px;left:", "px;width:", "px;height:", "px;", " ", ";background-color:", ";transform:initial;&[data-state='checked']{transform:", ";}", ";"], PADDING, PADDING, ({
+  size
+}) => SWITCH_HANDLE_WIDTH_HEIGHT[size], ({
+  size
+}) => SWITCH_HANDLE_WIDTH_HEIGHT[size], ({
+  foundation
+}) => foundation?.rounding?.round12, ({
+  foundation
+}) => foundation?.elevation?.ev2(), ({
+  foundation
+}) => foundation?.theme?.['bgtxt-absolute-white-dark'], ({
+  size
+}) => `translateX(${SWITCH_WIDTH[size] - SWITCH_HANDLE_WIDTH_HEIGHT[size] - PADDING * 2}px)`, ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS(['transform']));
+
+export { SwitchRoot, SwitchThumb };
+//# sourceMappingURL=Switch.styled.mjs.map

package/dist/esm/components/Forms/Switch/Switch.styled.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.styled.mjs","sources":["../../../../../src/components/Forms/Switch/Switch.styled.ts"],"sourcesContent":["import { styled } from '~/src/foundation'\n\nimport DisabledOpacity from '~/src/constants/DisabledOpacity'\n\nimport { focusedInputWrapperStyle } from '~/src/components/Forms/Inputs/mixins'\n\nimport type SwitchProps from './Switch.types'\nimport { SwitchSize } from './Switch.types'\n\nconst PADDING = 3\n\nconst SWITCH_WIDTH: Record<SwitchSize, number> = {\n  [SwitchSize.M]: 36,\n  [SwitchSize.S]: 30,\n}\n\nconst SWITCH_HEIGHT: Record<SwitchSize, number> = {\n  [SwitchSize.M]: 24,\n  [SwitchSize.S]: 20,\n}\n\nconst SWITCH_HANDLE_WIDTH_HEIGHT: Record<SwitchSize, number> = {\n  [SwitchSize.M]: 18,\n  [SwitchSize.S]: 14,\n}\n\ninterface SwitchRootProps extends SwitchProps {\n  size: NonNullable<SwitchProps['size']>\n}\n\nexport const SwitchRoot = styled.button<SwitchRootProps>`\n  all: unset;\n\n  position: relative;\n\n  width: ${({ size }) => SWITCH_WIDTH[size]}px;\n  height: ${({ size }) => SWITCH_HEIGHT[size]}px;\n\n  cursor: pointer;\n\n  ${({ foundation }) => foundation?.rounding?.round12}\n\n  background-color: ${({ foundation }) => foundation?.theme?.['bg-black-dark']};\n\n  &[data-state='checked'] {\n    background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-green-normal']};\n\n    &:hover {\n      background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-green-dark']};\n    }\n  }\n\n  opacity: initial;\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: ${DisabledOpacity};\n  }\n\n  &:focus-visible {\n    ${focusedInputWrapperStyle}\n  }\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['background-color', 'opacity'])};\n`\n\ninterface SwitchThumbProps extends SwitchProps {\n  size: NonNullable<SwitchProps['size']>\n}\n\nexport const SwitchThumb = styled.span<SwitchThumbProps>`\n  all: unset;\n\n  position: absolute;\n  top: ${PADDING}px;\n  left: ${PADDING}px;\n\n  width: ${({ size }) => SWITCH_HANDLE_WIDTH_HEIGHT[size]}px;\n  height: ${({ size }) => SWITCH_HANDLE_WIDTH_HEIGHT[size]}px;\n  ${({ foundation }) => foundation?.rounding?.round12}\n  ${({ foundation }) => foundation?.elevation?.ev2()};\n  background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-absolute-white-dark']};\n\n  transform: initial;\n\n  &[data-state='checked'] {\n    transform: ${({ size }) => `translateX(${SWITCH_WIDTH[size] - SWITCH_HANDLE_WIDTH_HEIGHT[size] - (PADDING * 2)}px)`};\n  }\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['transform'])};\n`\n"],"names":["PADDING","SWITCH_WIDTH","SwitchSize","M","S","SWITCH_HEIGHT","SWITCH_HANDLE_WIDTH_HEIGHT","SwitchRoot","styled","button","withConfig","displayName","componentId","size","foundation","rounding","round12","theme","DisabledOpacity","focusedInputWrapperStyle","transition","getTransitionsCSS","SwitchThumb","span","elevation","ev2"],"mappings":";;;;;AASA,MAAMA,OAAO,GAAG,CAAC,CAAA;AAEjB,MAAMC,YAAwC,GAAG;AAC/C,EAAA,CAACC,UAAU,CAACC,CAAC,GAAG,EAAE;EAClB,CAACD,UAAU,CAACE,CAAC,GAAG,EAAA;AAClB,CAAC,CAAA;AAED,MAAMC,aAAyC,GAAG;AAChD,EAAA,CAACH,UAAU,CAACC,CAAC,GAAG,EAAE;EAClB,CAACD,UAAU,CAACE,CAAC,GAAG,EAAA;AAClB,CAAC,CAAA;AAED,MAAME,0BAAsD,GAAG;AAC7D,EAAA,CAACJ,UAAU,CAACC,CAAC,GAAG,EAAE;EAClB,CAACD,UAAU,CAACE,CAAC,GAAG,EAAA;AAClB,CAAC,CAAA;MAMYG,UAAU,gBAAGC,gBAAM,CAACC,MAAM,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,0BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oCAAA,EAAA,YAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,4CAAA,EAAA,4BAAA,EAAA,2DAAA,EAAA,oBAAA,EAAA,GAAA,EAAA,GAAA,CAAA,EAK5B,CAAC;AAAEC,EAAAA,IAAAA;AAAK,CAAC,KAAKZ,YAAY,CAACY,IAAI,CAAC,EAC/B,CAAC;AAAEA,EAAAA,IAAAA;AAAK,CAAC,KAAKR,aAAa,CAACQ,IAAI,CAAC,EAIzC,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,QAAQ,EAAEC,OAAO,EAE/B,CAAC;AAAEF,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEG,KAAK,GAAG,eAAe,CAAC,EAGtD,CAAC;AAAEH,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEG,KAAK,GAAG,oBAAoB,CAAC,EAG3D,CAAC;AAAEH,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEG,KAAK,GAAG,kBAAkB,CAAC,EAQtEC,eAAe,EAIxBC,wBAAwB,EAG1B,CAAC;AAAEL,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEM,UAAU,EAAEC,iBAAiB,CAAC,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC,EACjG;MAMYC,WAAW,gBAAGd,gBAAM,CAACe,IAAI,CAAAb,UAAA,CAAA;EAAAC,WAAA,EAAA,2BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,kCAAA,EAAA,UAAA,EAAA,WAAA,EAAA,YAAA,EAAA,KAAA,EAAA,GAAA,EAAA,oBAAA,EAAA,uDAAA,EAAA,IAAA,EAAA,GAAA,CAAA,EAI7BZ,OAAO,EACNA,OAAO,EAEN,CAAC;AAAEa,EAAAA,IAAAA;AAAK,CAAC,KAAKP,0BAA0B,CAACO,IAAI,CAAC,EAC7C,CAAC;AAAEA,EAAAA,IAAAA;AAAK,CAAC,KAAKP,0BAA0B,CAACO,IAAI,CAAC,EACtD,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,QAAQ,EAAEC,OAAO,EACjD,CAAC;AAAEF,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEU,SAAS,EAAEC,GAAG,EAAE,EAC9B,CAAC;AAAEX,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEG,KAAK,GAAG,2BAA2B,CAAC,EAKzE,CAAC;AAAEJ,EAAAA,IAAAA;AAAK,CAAC,KAAM,CAAaZ,WAAAA,EAAAA,YAAY,CAACY,IAAI,CAAC,GAAGP,0BAA0B,CAACO,IAAI,CAAC,GAAIb,OAAO,GAAG,CAAG,CAAA,GAAA,CAAI,EAGnH,CAAC;AAAEc,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEM,UAAU,EAAEC,iBAAiB,CAAC,CAAC,WAAW,CAAC,CAAC;;;;"}

package/dist/esm/components/Forms/Switch/Switch.types.mjs

@@ -0,0 +1,8 @@
+let SwitchSize = /*#__PURE__*/function (SwitchSize) {
+  SwitchSize["M"] = "m";
+  SwitchSize["S"] = "s";
+  return SwitchSize;
+}({});
+
+export { SwitchSize };
+//# sourceMappingURL=Switch.types.mjs.map

package/dist/esm/components/Forms/Switch/Switch.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.types.mjs","sources":["../../../../../src/components/Forms/Switch/Switch.types.ts"],"sourcesContent":["import type { SwitchProps as SwitchPrimitiveProps } from '@radix-ui/react-switch'\n\nimport type {\n  AdditionalTestIdProps,\n  BezierComponentProps,\n  SizeProps,\n} from '~/src/types/ComponentProps'\n\nimport type { FormComponentProps } from '~/src/components/Forms/Form.types'\n\nexport enum SwitchSize {\n  M = 'm',\n  S = 's',\n}\n\ninterface SwitchOptions extends Omit<SwitchPrimitiveProps, 'asChild'> {\n  /**\n   * The state of the switch when it is initially rendered.\n   * Use when you do not need to control its state.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n\n  /**\n   * The controlled state of the switch.\n   * Must be used in conjunction with `onCheckedChange`.\n   */\n  checked?: boolean\n\n  /**\n   * Event handler called when the state of the switch changes.\n   */\n  onCheckedChange?: (checked: boolean) => void\n\n  /**\n   * When `true`, prevents the user from interacting with the switch.\n   */\n  disabled?: boolean\n\n  /**\n   * When `true`, indicates that the user must check the switch before the owning form can be submitted.\n   */\n  required?: boolean\n\n  /**\n   * The name of the switch.\n   * Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n\n  /**\n   * The value given as data when submitted with a `name`.\n   */\n  value?: string\n}\n\nexport default interface SwitchProps extends\n  BezierComponentProps,\n  SizeProps<SwitchSize>,\n  FormComponentProps,\n  AdditionalTestIdProps<'handle'>,\n  SwitchOptions {}\n"],"names":["SwitchSize"],"mappings":"AAUYA,IAAAA,UAAU,0BAAVA,UAAU,EAAA;EAAVA,UAAU,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAAVA,UAAU,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;AAAA,EAAA,OAAVA,UAAU,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/esm/components/Forms/useFormControlContext.mjs

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { FormControlContext } from './FormControl/FormControlContext.mjs';
+
+function useFormControlContext() {
+  return useContext(FormControlContext);
+}
+
+export { useFormControlContext as default };
+//# sourceMappingURL=useFormControlContext.mjs.map

package/dist/esm/components/Forms/useFormControlContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormControlContext.mjs","sources":["../../../../src/components/Forms/useFormControlContext.ts"],"sourcesContent":["import { useContext } from 'react'\n\nimport { FormControlContext } from '~/src/components/Forms/FormControl'\n\nfunction useFormControlContext() {\n  return useContext(FormControlContext)\n}\n\nexport default useFormControlContext\n"],"names":["useFormControlContext","useContext","FormControlContext"],"mappings":";;;AAIA,SAASA,qBAAqBA,GAAG;EAC/B,OAAOC,UAAU,CAACC,kBAAkB,CAAC,CAAA;AACvC;;;;"}

package/dist/esm/components/Forms/useFormFieldProps.mjs

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import { ariaAttr } from '../../utils/domUtils.mjs';
+import useFormControlContext from './useFormControlContext.mjs';
+
+// TODO: 테스트 추가
+function useFormFieldProps(props) {
+  const contextValue = useFormControlContext();
+  const formFieldProps = useMemo(() => {
+    const mergedProps = contextValue?.getFieldProps(props) ?? {
+      ...props
+    };
+    const {
+      disabled = false,
+      readOnly = false,
+      required = false,
+      hasError = false,
+      ...rest
+    } = mergedProps;
+    return {
+      ...rest,
+      'aria-disabled': ariaAttr(disabled),
+      'aria-invalid': ariaAttr(hasError),
+      'aria-required': ariaAttr(required),
+      'aria-readonly': ariaAttr(readOnly),
+      disabled,
+      hasError,
+      required,
+      readOnly
+    };
+  }, [props, contextValue]);
+  return formFieldProps;
+}
+
+export { useFormFieldProps as default };
+//# sourceMappingURL=useFormFieldProps.mjs.map

package/dist/esm/components/Forms/useFormFieldProps.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormFieldProps.mjs","sources":["../../../../src/components/Forms/useFormFieldProps.ts"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { ariaAttr } from '~/src/utils/domUtils'\n\nimport type { FormComponentProps } from '~/src/components/Forms/Form.types'\n\nimport useFormControlContext from './useFormControlContext'\n\n// TODO: 테스트 추가\nfunction useFormFieldProps<Props extends FormComponentProps>(props?: Props) {\n  const contextValue = useFormControlContext()\n\n  const formFieldProps = useMemo(() => {\n    const mergedProps = contextValue?.getFieldProps(props) ?? { ...props }\n\n    const {\n      disabled = false,\n      readOnly = false,\n      required = false,\n      hasError = false,\n      ...rest\n    } = mergedProps\n\n    return {\n      ...rest,\n      'aria-disabled': ariaAttr(disabled),\n      'aria-invalid': ariaAttr(hasError),\n      'aria-required': ariaAttr(required),\n      'aria-readonly': ariaAttr(readOnly),\n      disabled,\n      hasError,\n      required,\n      readOnly,\n    }\n  }, [\n    props,\n    contextValue,\n  ])\n\n  return formFieldProps as typeof formFieldProps & Props\n}\n\nexport default useFormFieldProps\n"],"names":["useFormFieldProps","props","contextValue","useFormControlContext","formFieldProps","useMemo","mergedProps","getFieldProps","disabled","readOnly","required","hasError","rest","ariaAttr"],"mappings":";;;;AAQA;AACA,SAASA,iBAAiBA,CAAmCC,KAAa,EAAE;AAC1E,EAAA,MAAMC,YAAY,GAAGC,qBAAqB,EAAE,CAAA;AAE5C,EAAA,MAAMC,cAAc,GAAGC,OAAO,CAAC,MAAM;IACnC,MAAMC,WAAW,GAAGJ,YAAY,EAAEK,aAAa,CAACN,KAAK,CAAC,IAAI;MAAE,GAAGA,KAAAA;KAAO,CAAA;IAEtE,MAAM;AACJO,MAAAA,QAAQ,GAAG,KAAK;AAChBC,MAAAA,QAAQ,GAAG,KAAK;AAChBC,MAAAA,QAAQ,GAAG,KAAK;AAChBC,MAAAA,QAAQ,GAAG,KAAK;MAChB,GAAGC,IAAAA;AACL,KAAC,GAAGN,WAAW,CAAA;IAEf,OAAO;AACL,MAAA,GAAGM,IAAI;AACP,MAAA,eAAe,EAAEC,QAAQ,CAACL,QAAQ,CAAC;AACnC,MAAA,cAAc,EAAEK,QAAQ,CAACF,QAAQ,CAAC;AAClC,MAAA,eAAe,EAAEE,QAAQ,CAACH,QAAQ,CAAC;AACnC,MAAA,eAAe,EAAEG,QAAQ,CAACJ,QAAQ,CAAC;MACnCD,QAAQ;MACRG,QAAQ;MACRD,QAAQ;AACRD,MAAAA,QAAAA;KACD,CAAA;AACH,GAAC,EAAE,CACDR,KAAK,EACLC,YAAY,CACb,CAAC,CAAA;AAEF,EAAA,OAAOE,cAAc,CAAA;AACvB;;;;"}