{"version":3,"sources":["../src/color-picker.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { PortalProps } from \"@yamada-ui/portal\"\nimport type { FC, ReactNode, RefAttributes } from \"react\"\nimport type { ColorSelectorProps } from \"./color-selector\"\nimport type { ColorSwatchProps } from \"./color-swatch\"\nimport type { UseColorPickerProps } from \"./use-color-picker\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@yamada-ui/popover\"\nimport { Portal } from \"@yamada-ui/portal\"\nimport {\n  cx,\n  getValidChildren,\n  isValidElement,\n  mergeRefs,\n  runIfFunc,\n} from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\nimport { ColorSelector } from \"./color-selector\"\nimport { EyeDropperIcon } from \"./color-selector-eye-dropper\"\nimport { ColorSwatch } from \"./color-swatch\"\nimport {\n  ColorPickerProvider,\n  useColorPicker,\n  useColorPickerContext,\n} from \"./use-color-picker\"\n\ninterface ColorPickerOptions {\n  children?: FC<{ value: string; onClose: () => void }> | ReactNode\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: string\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: string\n  /**\n   * If `true`, display the eye dropper component.\n   *\n   * @default true\n   */\n  withEyeDropper?: boolean\n  /**\n   * If `true`, display the color swatch component.\n   *\n   * @default true\n   */\n  withSwatch?: boolean\n  /**\n   * Props for color picker container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"children\">\n  /**\n   * Props for color eye dropper component.\n   */\n  eyeDropperProps?: ColorPickerEyeDropperProps\n  /**\n   * Props for color picker field element.\n   */\n  fieldProps?: Omit<ColorPickerFieldProps, \"children\" | \"inputProps\">\n  /**\n   * Props for color picker input element.\n   */\n  inputProps?: HTMLUIProps<\"input\">\n  /**\n   * Props to be forwarded to the portal component.\n   *\n   * @default '{ disabled: true }'\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Props for color swatch component.\n   */\n  swatchProps?: ColorPickerSwatchProps\n}\n\nexport interface ColorPickerProps\n  extends ThemeProps<\"ColorPicker\">,\n    UseColorPickerProps,\n    ColorPickerOptions,\n    Pick<\n      ColorSelectorProps,\n      | \"alphaSliderProps\"\n      | \"alphaSliderRef\"\n      | \"channelProps\"\n      | \"channelsProps\"\n      | \"hueSliderProps\"\n      | \"hueSliderRef\"\n      | \"saturationSliderProps\"\n      | \"saturationSliderRef\"\n      | \"swatchesProps\"\n    > {}\n\n/**\n * `ColorPicker` is a component used by the user to select a color or enter an arbitrary color value.\n *\n * @see Docs https://yamada-ui.com/components/forms/color-picker\n */\nexport const ColorPicker = forwardRef<ColorPickerProps, \"input\">(\n  ({ withSwatch = true, ...props }, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\"ColorPicker\", {\n      withSwatch,\n      ...props,\n    })\n    const {\n      className,\n      alphaSliderRef,\n      children,\n      color,\n      h,\n      height = h,\n      hueSliderRef,\n      minH,\n      minHeight = minH,\n      saturationSliderRef,\n      withEyeDropper = true,\n      alphaSliderProps,\n      channelProps,\n      channelsProps,\n      containerProps,\n      eyeDropperProps,\n      fieldProps,\n      hueSliderProps,\n      inputProps,\n      portalProps = { disabled: true },\n      saturationSliderProps,\n      swatchesProps,\n      swatchProps,\n      ...computedProps\n    } = omitThemeProps(mergedProps, [\"withSwatch\"])\n    const {\n      eyeDropperSupported,\n      value,\n      getContainerProps,\n      getEyeDropperProps,\n      getFieldProps,\n      getInputProps,\n      getPopoverProps,\n      getSelectorProps,\n      onClose,\n      ...rest\n    } = useColorPicker(computedProps)\n    const css: CSSUIObject = {\n      color,\n      h: \"fit-content\",\n      w: \"100%\",\n      ...styles.container,\n    }\n\n    return (\n      <ColorPickerProvider value={{ styles, value, ...rest }}>\n        <Popover {...getPopoverProps()}>\n          <ui.div\n            className={cx(\"ui-color-picker\", className)}\n            __css={css}\n            {...getContainerProps(containerProps)}\n          >\n            <ui.div\n              className=\"ui-color-picker__inner\"\n              __css={{\n                position: \"relative\",\n                ...styles.inner,\n              }}\n            >\n              {withSwatch ? <ColorPickerSwatch {...swatchProps} /> : null}\n\n              <ColorPickerField\n                height={height}\n                minHeight={minHeight}\n                {...getFieldProps(fieldProps, ref)}\n                inputProps={getInputProps(inputProps)}\n              />\n\n              {eyeDropperSupported && withEyeDropper ? (\n                <ColorPickerEyeDropper\n                  {...getEyeDropperProps(eyeDropperProps)}\n                />\n              ) : null}\n            </ui.div>\n\n            <Portal {...portalProps}>\n              <PopoverContent\n                as=\"div\"\n                className=\"ui-color-picker__content\"\n                __css={{ ...styles.content }}\n              >\n                <ColorSelector\n                  className=\"ui-color-picker__picker\"\n                  {...getSelectorProps({\n                    alphaSliderRef,\n                    hueSliderRef,\n                    saturationSliderRef,\n                    alphaSliderProps,\n                    channelProps,\n                    channelsProps,\n                    hueSliderProps,\n                    saturationSliderProps,\n                    swatchesProps,\n                  })}\n                >\n                  {runIfFunc(children, { value, onClose })}\n                </ColorSelector>\n              </PopoverContent>\n            </Portal>\n          </ui.div>\n        </Popover>\n      </ColorPickerProvider>\n    )\n  },\n)\n\nColorPicker.displayName = \"ColorPicker\"\nColorPicker.__ui__ = \"ColorPicker\"\n\ninterface ColorPickerFieldOptions {\n  inputProps?: HTMLUIProps<\"input\"> & RefAttributes<HTMLInputElement>\n}\n\ninterface ColorPickerFieldProps extends HTMLUIProps, ColorPickerFieldOptions {}\n\nconst ColorPickerField = forwardRef<ColorPickerFieldProps, \"input\">(\n  ({ className, inputProps, ...rest }, ref) => {\n    const { styles } = useColorPickerContext()\n    const { ref: inputRef, ...computedInputProps } = inputProps ?? {}\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      display: \"flex\",\n      pe: \"2rem\",\n      ps: \"2rem\",\n      ...styles.field,\n    }\n\n    return (\n      <PopoverTrigger>\n        <ui.div\n          className={cx(\"ui-color-picker__field\", className)}\n          __css={css}\n          {...rest}\n        >\n          <ui.input\n            ref={mergeRefs(ref, inputRef)}\n            className=\"ui-color-picker-picker__field__input\"\n            display=\"inline-block\"\n            w=\"100%\"\n            {...computedInputProps}\n          />\n        </ui.div>\n      </PopoverTrigger>\n    )\n  },\n)\n\nColorPickerField.displayName = \"ColorPickerField\"\nColorPickerField.__ui__ = \"ColorPickerField\"\n\ninterface ColorPickerSwatchProps extends ColorSwatchProps {}\n\nconst ColorPickerSwatch = forwardRef<ColorPickerSwatchProps, \"div\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, value } = useColorPickerContext()\n\n    const css: CSSUIObject = {\n      position: \"absolute\",\n      top: \"50%\",\n      transform: \"translateY(-50%)\",\n      zIndex: 1,\n      ...styles.swatch,\n    }\n\n    return (\n      <ColorSwatch\n        ref={ref}\n        className={cx(\"ui-color-picker__swatch\", className)}\n        color={value}\n        isRounded\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\nColorPickerSwatch.displayName = \"ColorPickerSwatch\"\nColorPickerSwatch.__ui__ = \"ColorPickerSwatch\"\n\ninterface ColorPickerEyeDropperProps extends HTMLUIProps<\"button\"> {}\n\nconst ColorPickerEyeDropper = forwardRef<ColorPickerEyeDropperProps, \"button\">(\n  ({ className, children, ...rest }, ref) => {\n    const { styles } = useColorPickerContext()\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      display: \"inline-flex\",\n      justifyContent: \"center\",\n      position: \"absolute\",\n      top: \"50%\",\n      transform: \"translateY(-50%)\",\n      zIndex: 1,\n      ...styles.eyeDropper,\n    }\n\n    const validChildren = getValidChildren(children)\n\n    const cloneChildren = validChildren.map((child) =>\n      cloneElement(child, {\n        style: {\n          color: \"currentColor\",\n          maxHeight: \"1em\",\n          maxWidth: \"1em\",\n        },\n        \"aria-hidden\": true,\n        focusable: false,\n      }),\n    )\n\n    return (\n      <ui.button\n        ref={ref}\n        className={cx(\"ui-color-picker__eye-dropper\", className)}\n        __css={css}\n        {...rest}\n      >\n        {isValidElement(children) ? (\n          cloneChildren\n        ) : (\n          <EyeDropperIcon className=\"ui-color-picker__eye-dropper__icon\" />\n        )}\n      </ui.button>\n    )\n  },\n)\n\nColorPickerEyeDropper.displayName = \"ColorPickerEyeDropper\"\nColorPickerEyeDropper.__ui__ = \"ColorPickerEyeDropper\"\n"],"mappings":"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","names":[]}