{"version":3,"sources":["../src/color-selector.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { FC, ForwardedRef, ReactNode } from \"react\"\nimport type { ColorSelectorBodyProps } from \"./color-selector-body\"\nimport type { ColorSelectorChannelsProps } from \"./color-selector-channels\"\nimport type { ColorSelectorSwatchesProps } from \"./color-selector-swatches\"\nimport type { SaturationSliderProps } from \"./saturation-slider\"\nimport type { UseColorSelectorProps } from \"./use-color-selector\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { cx, runIfFunc } from \"@yamada-ui/utils\"\nimport { ColorSelectorBody } from \"./color-selector-body\"\nimport { ColorSelectorChannels } from \"./color-selector-channels\"\nimport { ColorSelectorSwatches } from \"./color-selector-swatches\"\nimport { SaturationSlider } from \"./saturation-slider\"\nimport { ColorSelectorProvider, useColorSelector } from \"./use-color-selector\"\n\ninterface ColorSelectorOptions {\n  children?: FC<{ value: string }> | ReactNode\n  /**\n   * Ref for the saturation slider component.\n   */\n  saturationSliderRef?: ForwardedRef<HTMLInputElement>\n  /**\n   * If `true`, display the channels component.\n   *\n   * @default true\n   */\n  withChannel?: boolean\n  /**\n   * If `true`, display the saturation, hue, alpha, channels and eye dropper component.\n   *\n   * @default true\n   */\n  withPicker?: boolean\n  /**\n   * Props for the channels component.\n   */\n  channelsProps?: ColorSelectorChannelsProps\n  /**\n   * Props for the color selector input element.\n   */\n  inputProps?: HTMLUIProps<\"input\">\n  /**\n   * Props for the saturation slider component.\n   */\n  saturationSliderProps?: Omit<SaturationSliderProps, \"defaultValue\" | \"value\">\n  /**\n   * Props for the swatches component.\n   */\n  swatchesProps?: ColorSelectorSwatchesProps\n}\n\nexport interface ColorSelectorProps\n  extends ThemeProps<\"ColorSelector\">,\n    UseColorSelectorProps,\n    ColorSelectorOptions,\n    Pick<\n      ColorSelectorBodyProps,\n      | \"alphaSliderProps\"\n      | \"alphaSliderRef\"\n      | \"eyeDropperProps\"\n      | \"eyeDropperRef\"\n      | \"hueSliderProps\"\n      | \"hueSliderRef\"\n      | \"withEyeDropper\"\n      | \"withResult\"\n    >,\n    Pick<\n      ColorSelectorSwatchesProps,\n      \"swatches\" | \"swatchesColumns\" | \"swatchesLabel\" | \"swatchProps\"\n    >,\n    Pick<ColorSelectorChannelsProps, \"channelProps\"> {}\n\n/**\n * `ColorSelector` is a component used by the user to select a color.\n *\n * @see Docs https://yamada-ui.com/components/forms/color-selector\n */\nexport const ColorSelector = forwardRef<ColorSelectorProps, \"input\">(\n  ({ size, ...props }, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\"ColorSelector\", {\n      size,\n      ...props,\n    })\n    const {\n      className,\n      alphaSliderRef,\n      children,\n      eyeDropperRef,\n      hueSliderRef,\n      saturationSliderRef,\n      swatches,\n      swatchesColumns = 7,\n      swatchesLabel,\n      withChannel = true,\n      withEyeDropper,\n      withPicker = true,\n      withResult = true,\n      alphaSliderProps,\n      channelProps,\n      channelsProps,\n      eyeDropperProps,\n      hueSliderProps,\n      inputProps,\n      saturationSliderProps,\n      swatchesProps,\n      swatchProps,\n      ...computedProps\n    } = omitThemeProps(mergedProps)\n    const {\n      value,\n      getContainerProps,\n      getInputProps,\n      getSaturationSliderProps,\n      ...rest\n    } = useColorSelector(computedProps)\n\n    const css: CSSUIObject = {\n      display: \"flex\",\n      flexDirection: \"column\",\n      ...styles.container,\n    }\n\n    return (\n      <ColorSelectorProvider value={{ size, styles, value, ...rest }}>\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-color-selector\", className)}\n          __css={css}\n          {...getContainerProps()}\n        >\n          <ui.input {...getInputProps(inputProps, ref)} />\n\n          {withPicker ? (\n            <SaturationSlider\n              className=\"ui-color-selector__saturation-slider\"\n              size={size}\n              __css={{ ...styles.saturationSlider }}\n              {...getSaturationSliderProps(\n                saturationSliderProps,\n                saturationSliderRef,\n              )}\n            />\n          ) : null}\n\n          {withPicker ? (\n            <ColorSelectorBody\n              {...{\n                alphaSliderRef,\n                eyeDropperRef,\n                hueSliderRef,\n                withEyeDropper,\n                withResult,\n                alphaSliderProps,\n                eyeDropperProps,\n                hueSliderProps,\n              }}\n            />\n          ) : null}\n\n          {withPicker && withChannel ? (\n            <ColorSelectorChannels {...{ channelProps, ...channelsProps }} />\n          ) : null}\n\n          <ColorSelectorSwatches\n            {...{\n              swatches,\n              swatchesColumns,\n              swatchesLabel,\n              swatchProps,\n              ...swatchesProps,\n            }}\n          />\n\n          {runIfFunc(children, { value })}\n        </ui.div>\n      </ColorSelectorProvider>\n    )\n  },\n)\n\nColorSelector.displayName = \"ColorSelector\"\nColorSelector.__ui__ = \"ColorSelector\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAOA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,IAAI,iBAAiB;AAoHtB,SAME,KANF;AA/CD,IAAM,gBAAgB;AAAA,EAC3B,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ;AAC3B,UAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,iBAAiB;AAAA,MACpE;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AACD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA,aAAa;AAAA,MACb,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,eAAe,WAAW;AAC9B,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,iBAAiB,aAAa;AAElC,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,eAAe;AAAA,MACf,GAAG,OAAO;AAAA,IACZ;AAEA,WACE,oBAAC,yBAAsB,OAAO,EAAE,MAAM,QAAQ,OAAO,GAAG,KAAK,GAC3D;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,qBAAqB,SAAS;AAAA,QAC5C,OAAO;AAAA,QACN,GAAG,kBAAkB;AAAA,QAEtB;AAAA,8BAAC,GAAG,OAAH,EAAU,GAAG,cAAc,YAAY,GAAG,GAAG;AAAA,UAE7C,aACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV;AAAA,cACA,OAAO,EAAE,GAAG,OAAO,iBAAiB;AAAA,cACnC,GAAG;AAAA,gBACF;AAAA,gBACA;AAAA,cACF;AAAA;AAAA,UACF,IACE;AAAA,UAEH,aACC;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,gBACF;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA;AAAA,UACF,IACE;AAAA,UAEH,cAAc,cACb,oBAAC,yBAAuB,GAAG,EAAE,cAAc,GAAG,cAAc,GAAG,IAC7D;AAAA,UAEJ;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,gBACF;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,GAAG;AAAA,cACL;AAAA;AAAA,UACF;AAAA,UAEC,UAAU,UAAU,EAAE,MAAM,CAAC;AAAA;AAAA;AAAA,IAChC,GACF;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;AAC5B,cAAc,SAAS;","names":[]}