{"version":3,"file":"Chip.mjs","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { useId, useUncontrolled } from '@raikou/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getFontSize,\n  getRadius,\n  getSize,\n  RaikouColor,\n  RaikouRadius,\n  RaikouSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { CheckIcon } from '../Checkbox';\nimport { useChipGroupContext } from './ChipGroup.context';\nimport { ChipGroup } from './ChipGroup/ChipGroup';\nimport {\n  ChipCheckIconStyles,\n  ChipIconWrapperStyles,\n  ChipInputStyles,\n  ChipLabelStyles,\n  ChipRootStyles,\n} from './Chip.css';\n\nexport type ChipStylesNames = 'root' | 'input' | 'iconWrapper' | 'checkIcon' | 'label';\nexport type ChipVariant = 'outline' | 'filled' | 'light';\nexport type ChipCssVariables = {\n  root:\n    | '--chip-fz'\n    | '--chip-size'\n    | '--chip-icon-size'\n    | '--chip-padding'\n    | '--chip-checked-padding'\n    | '--chip-radius'\n    | '--chip-bg'\n    | '--chip-hover'\n    | '--chip-color'\n    | '--chip-bd'\n    | '--chip-spacing';\n};\n\nexport interface ChipProps\n  extends BoxProps,\n    StylesApiProps<ChipFactory>,\n    ElementProps<'input', 'size' | 'onChange'> {\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `'xl'` by default */\n  radius?: RaikouRadius;\n\n  /** Controls various properties related to component size, `'sm'` by default */\n  size?: RaikouSize;\n\n  /** Chip input type, `'checkbox'` by default */\n  type?: 'radio' | 'checkbox';\n\n  /** `label` element associated with the input */\n  children: React.ReactNode;\n\n  /** Checked state for controlled component */\n  checked?: boolean;\n\n  /** Default checked state for uncontrolled component */\n  defaultChecked?: boolean;\n\n  /** Calls when checked state changes */\n  onChange?: (checked: boolean) => void;\n\n  /** Controls components colors based on `variant` prop. Key of `theme.colors` or any valid CSS color. `theme.primaryColor` by default */\n  color?: RaikouColor;\n\n  /** Static id to connect input with the label, by default `id` is randomly generated */\n  id?: string;\n\n  /** Props passed down to the root element */\n  wrapperProps?: Record<string, any>;\n\n  /** Any element or component to replace default icon */\n  icon?: React.ReactNode;\n\n  /** Assigns ref of the root element */\n  rootRef?: React.ForwardedRef<HTMLDivElement>;\n\n  /** Determines whether button text color with filled variant should depend on `background-color`. 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\nexport type ChipFactory = Factory<{\n  props: ChipProps;\n  ref: HTMLInputElement;\n  stylesNames: ChipStylesNames;\n  vars: ChipCssVariables;\n  variant: ChipVariant;\n  staticComponents: {\n    Group: typeof ChipGroup;\n  };\n}>;\n\nconst defaultProps: Partial<ChipProps> = {\n  type: 'checkbox',\n  variant: 'filled', // present otherwise is undefined\n};\n\nconst varsResolver = createVarsResolver<ChipFactory>(\n  (theme, { size, radius, variant, color, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--chip-fz': getFontSize(size),\n        '--chip-size': getSize(size, 'chip-size'),\n        '--chip-radius': radius === undefined ? undefined : getRadius(radius),\n        '--chip-checked-padding': getSize(size, 'chip-checked-padding'),\n        '--chip-padding': getSize(size, 'chip-padding'),\n        '--chip-icon-size': getSize(size, 'chip-icon-size'),\n        '--chip-bg': color || variant ? colors.background : undefined,\n        '--chip-hover': color || variant ? colors.hover : undefined,\n        '--chip-color': color || variant ? colors.color : undefined,\n        '--chip-bd': color || variant ? colors.border : undefined,\n        '--chip-spacing': getSize(size, 'chip-spacing'),\n      },\n    };\n  }\n);\n\nexport const Chip = factory<ChipFactory>((_props, ref) => {\n  const props = useProps('Chip', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    id,\n    checked,\n    defaultChecked,\n    onChange,\n    value,\n    wrapperProps,\n    type,\n    disabled,\n    children,\n    size,\n    variant,\n    icon,\n    rootRef,\n    autoContrast,\n    mod,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ChipFactory>({\n    name: 'Chip',\n    classes: {\n      root: ChipRootStyles,\n      input: ChipInputStyles,\n      iconWrapper: ChipIconWrapperStyles,\n      checkIcon: ChipCheckIconStyles,\n      label: ChipLabelStyles,\n    },\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n  });\n\n  const ctx = useChipGroupContext();\n  const uuid = useId(id);\n  const { styleProps, rest } = extractStyleProps(others);\n\n  const [_value, setValue] = useUncontrolled({\n    value: checked,\n    defaultValue: defaultChecked,\n    finalValue: false,\n    onChange,\n  });\n\n  const contextProps = ctx\n    ? {\n        checked: ctx.isChipSelected(value as string),\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          ctx.onChange(event);\n          onChange?.(event.currentTarget.checked);\n        },\n        type: ctx.multiple ? 'checkbox' : 'radio',\n      }\n    : {};\n\n  const _checked = contextProps.checked || _value;\n\n  return (\n    <Box\n      size={size}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      {...getStyles('root')}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <input\n        type={type}\n        {...getStyles('input')}\n        checked={_checked}\n        onChange={(event) => setValue(event.currentTarget.checked)}\n        id={uuid}\n        disabled={disabled}\n        ref={ref}\n        value={value}\n        {...contextProps}\n        {...rest}\n      />\n\n      <label\n        htmlFor={uuid}\n        data-checked={_checked || undefined}\n        data-disabled={disabled || undefined}\n        {...getStyles('label', { variant: variant || 'filled' })}\n      >\n        {_checked && (\n          <span {...getStyles('iconWrapper')}>\n            {icon || <CheckIcon {...getStyles('checkIcon')} />}\n          </span>\n        )}\n        <span>{children}</span>\n      </label>\n    </Box>\n  );\n});\n\nChip.displayName = '@raikou/core/Chip';\nChip.Group = ChipGroup;\n"],"names":[],"mappings":"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"}