{"version":3,"file":"SegmentedControl.cjs","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useId, useMergedRef, useMounted, useUncontrolled } from '@raikou/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  Factory,\n  factory,\n  getContrastColor,\n  getFontSize,\n  getRadius,\n  getSize,\n  getThemeColor,\n  RaikouColor,\n  RaikouRadius,\n  RaikouSize,\n  StylesApiProps,\n  useProps,\n  useRaikouTheme,\n  useStyles,\n} from '../../core';\nimport { FloatingIndicator } from '../FloatingIndicator';\nimport {\n  SegmentedControlControlStyle,\n  SegmentedControlIndicatorStyle,\n  SegmentedControlInnerLabelStyle,\n  SegmentedControlInputStyle,\n  SegmentedControlLabelStyle,\n  SegmentedControlRootStyle,\n} from './SegmentedControl.css';\n\nexport type SegmentedControlStylesNames =\n  | 'root'\n  | 'input'\n  | 'label'\n  | 'control'\n  | 'indicator'\n  | 'innerLabel';\nexport type SegmentedControlCssVariables = {\n  root:\n    | '--sc-radius'\n    | '--sc-color'\n    | '--sc-font-size'\n    | '--sc-padding'\n    | '--sc-shadow'\n    | '--sc-transition-duration'\n    | '--sc-transition-timing-function';\n};\n\nexport interface SegmentedControlItem {\n  value: string;\n  label: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface SegmentedControlProps\n  extends BoxProps,\n    StylesApiProps<SegmentedControlFactory>,\n    ElementProps<'div', 'onChange'> {\n  /** Data based on which controls are rendered */\n  data: (string | SegmentedControlItem)[];\n\n  /** Controlled component value */\n  value?: string;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string;\n\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n\n  /** Determines whether the component is disabled */\n  disabled?: boolean;\n\n  /** Name of the radio group, by default random name is generated */\n  name?: string;\n\n  /** Determines whether the component should take 100% width of its parent, `false` by default */\n  fullWidth?: boolean;\n\n  /** Key of `theme.colors` or any valid CSS color, changes color of indicator, by default color is based on current color scheme */\n  color?: RaikouColor;\n\n  /** Controls `font-size`, `padding` and `height` properties, `'sm'` by default */\n  size?: RaikouSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `theme.defaultRadius` by default */\n  radius?: RaikouRadius;\n\n  /** Indicator `transition-duration` in ms, set `0` to turn off transitions, `200` by default */\n  transitionDuration?: number;\n\n  /** Indicator `transition-timing-function` property, `ease` by default */\n  transitionTimingFunction?: string;\n\n  /** Determines in which orientation component id displayed, `'horizontal'` by default */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Determines whether the value can be changed */\n  readOnly?: boolean;\n\n  /** Determines whether text color should depend on `background-color` of the indicator. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. */\n  autoContrast?: boolean;\n\n  /** Determines whether there should be borders between items, `true` by default */\n  withItemsBorders?: boolean;\n}\n\nexport type SegmentedControlFactory = Factory<{\n  props: SegmentedControlProps;\n  ref: HTMLDivElement;\n  stylesNames: SegmentedControlStylesNames;\n  vars: SegmentedControlCssVariables;\n}>;\n\nconst defaultProps: Partial<SegmentedControlProps> = {\n  withItemsBorders: true,\n};\n\nconst varsResolver = createVarsResolver<SegmentedControlFactory>(\n  (theme, { radius, color, transitionDuration, size, transitionTimingFunction }) => ({\n    root: {\n      '--sc-radius': radius === undefined ? undefined : getRadius(radius),\n      '--sc-color': color ? getThemeColor(color, theme) : undefined,\n      '--sc-shadow': color ? undefined : 'var(--raikou-shadow-xs)',\n      '--sc-transition-duration':\n        transitionDuration === undefined ? undefined : `${transitionDuration}ms`,\n      '--sc-transition-timing-function': transitionTimingFunction,\n      '--sc-padding': getSize(size, 'sc-padding'),\n      '--sc-font-size': getFontSize(size),\n    },\n  })\n);\n\nexport const SegmentedControl = factory<SegmentedControlFactory>((_props, ref) => {\n  const props = useProps('SegmentedControl', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    value,\n    defaultValue,\n    onChange,\n    size,\n    name,\n    disabled,\n    readOnly,\n    fullWidth,\n    orientation,\n    radius,\n    color,\n    transitionDuration,\n    transitionTimingFunction,\n    variant,\n    autoContrast,\n    withItemsBorders,\n    mod,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<SegmentedControlFactory>({\n    name: 'SegmentedControl',\n    props,\n    classes: {\n      root: SegmentedControlRootStyle,\n      control: SegmentedControlControlStyle,\n      input: SegmentedControlInputStyle,\n      label: SegmentedControlLabelStyle,\n      indicator: SegmentedControlIndicatorStyle,\n      innerLabel: SegmentedControlInnerLabelStyle,\n    },\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n  });\n\n  const theme = useRaikouTheme();\n\n  const _data = data.map((item) =>\n    typeof item === 'string' ? { label: item, value: item } : item\n  );\n\n  const initialized = useMounted();\n  const [parent, setParent] = useState<HTMLElement | null>(null);\n  const [refs, setRefs] = useState<Record<string, HTMLElement | null>>({});\n  const setElementRef = (element: HTMLElement | null, val: string) => {\n    refs[val] = element;\n    setRefs(refs);\n  };\n\n  const [_value, handleValueChange] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: Array.isArray(data)\n      ? (_data.find((item) => !item.disabled)?.value ?? (data[0] as any)?.value ?? null)\n      : null,\n    onChange,\n  });\n\n  const uuid = useId(name);\n\n  const controls = _data.map((item) => (\n    <Box\n      {...getStyles('control')}\n      mod={{ active: _value === item.value, orientation }}\n      key={item.value}\n    >\n      <input\n        {...getStyles('input')}\n        disabled={disabled || item.disabled}\n        type=\"radio\"\n        name={uuid}\n        value={item.value}\n        id={`${uuid}-${item.value}`}\n        checked={_value === item.value}\n        onChange={() => !readOnly && handleValueChange(item.value)}\n        data-focus-ring={theme.focusRing}\n        key={`${item.value}-input`}\n      />\n\n      <Box\n        component=\"label\"\n        {...getStyles('label')}\n        mod={{\n          active: _value === item.value && !(disabled || item.disabled),\n          disabled: disabled || item.disabled,\n          'read-only': readOnly,\n        }}\n        htmlFor={`${uuid}-${item.value}`}\n        ref={(node) => setElementRef(node, item.value)}\n        __vars={{\n          '--sc-label-color':\n            color !== undefined ? getContrastColor({ color, theme, autoContrast }) : undefined,\n        }}\n        key={`${item.value}-label`}\n      >\n        <span {...getStyles('innerLabel')}>{item.label}</span>\n      </Box>\n    </Box>\n  ));\n\n  const mergedRef = useMergedRef(ref, (node: any) => setParent(node));\n\n  if (data.length === 0) {\n    return null;\n  }\n\n  return (\n    <Box\n      {...getStyles('root')}\n      variant={variant}\n      size={size}\n      ref={mergedRef}\n      mod={[\n        {\n          'full-width': fullWidth,\n          orientation,\n          initialized,\n          'with-items-borders': withItemsBorders,\n        },\n        mod,\n      ]}\n      {...others}\n      role=\"radiogroup\"\n      data-disabled={disabled}\n    >\n      {typeof _value === 'string' && (\n        <FloatingIndicator\n          target={refs[_value]}\n          parent={parent}\n          component=\"span\"\n          transitionDuration=\"var(--sc-transition-duration)\"\n          {...getStyles('indicator')}\n        />\n      )}\n\n      {controls}\n    </Box>\n  );\n});\n\nSegmentedControl.displayName = '@raikou/core/SegmentedControl';\n"],"names":["createVarsResolver","getRadius","getThemeColor","getSize","getFontSize","factory","useProps","useStyles","SegmentedControlRootStyle","SegmentedControlControlStyle","SegmentedControlInputStyle","SegmentedControlLabelStyle","SegmentedControlIndicatorStyle","SegmentedControlInnerLabelStyle","useRaikouTheme","useMounted","useState","useUncontrolled","useId","createElement","Box","getContrastColor","useMergedRef","jsxs","jsx","FloatingIndicator"],"mappings":"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"}