{"version":3,"sources":["../src/hue-slider.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { UseColorSliderProps } from \"./use-color-slider\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { createContext, cx } from \"@yamada-ui/utils\"\nimport { useColorSlider } from \"./use-color-slider\"\n\ninterface HueSliderContext {\n  styles: { [key: string]: CSSUIObject | undefined }\n}\n\nconst [HueSliderProvider, useHueSlider] = createContext<HueSliderContext>({\n  name: \"SliderContext\",\n  errorMessage: `useSliderContext returned is 'undefined'. Seems you forgot to wrap the components in \"<HueSlider />\" `,\n})\n\nconst defaultOverlays = (\n  min: number,\n  max: number,\n  withShadow: boolean,\n): HTMLUIProps[] => {\n  const overlays: HTMLUIProps[] = [\n    {\n      bgGradient: `linear(to-r, ${[...Array(7)]\n        .map(\n          (_, index) =>\n            `hsl(${Math.round(min + ((max - min) / 6) * index)}, 100%, 50%)`,\n        )\n        .join(\", \")})`,\n    },\n  ]\n\n  if (withShadow)\n    overlays.push({\n      boxShadow: `rgba(0, 0, 0, .1) 0 0 0 1px inset, rgb(0, 0, 0, .15) 0 0 4px inset`,\n    })\n\n  return overlays\n}\n\ninterface HueSliderOptions {\n  /**\n   * The maximum allowed value of the slider. Cannot be less than min.\n   *\n   * @default 360\n   */\n  max?: number\n  /**\n   * The minimum allowed value of the slider. Cannot be greater than max.\n   *\n   * @default 0\n   */\n  min?: number\n  /**\n   * The overlay used for the slider.\n   */\n  overlays?: HTMLUIProps[]\n  /**\n   * The step in which increments or decrements have to be made.\n   *\n   * @default 1\n   */\n  step?: number\n  /**\n   * If `true`, the slider has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\n  /**\n   * Props for slider input element.\n   */\n  inputProps?: HTMLUIProps<\"input\">\n  /**\n   * Props for slider thumb element.\n   */\n  thumbProps?: HTMLUIProps\n  /**\n   * Props for slider track element.\n   */\n  trackProps?: HTMLUIProps\n}\n\nexport interface HueSliderProps\n  extends ThemeProps<\"HueSlider\">,\n    Partial<Omit<UseColorSliderProps, \"channel\">>,\n    HueSliderOptions {}\n\n/**\n * `HueSlider` is a component used to allow the user to select a color hue.\n *\n * @see Docs https://yamada-ui.com/components/forms/hue-slider\n */\nexport const HueSlider = forwardRef<HueSliderProps, \"input\">((props, ref) => {\n  const [styles, mergedProps] = useComponentMultiStyle(\"HueSlider\", props)\n  const {\n    className,\n    max = 360,\n    min = 0,\n    withShadow = true,\n    overlays = defaultOverlays(min, max, withShadow),\n    inputProps,\n    thumbProps,\n    trackProps,\n    __css,\n    ...computedProps\n  } = omitThemeProps(mergedProps)\n  const { getContainerProps, getInputProps, getThumbProps, getTrackProps } =\n    useColorSlider({ max, min, step: 1, ...computedProps, channel: \"hue\" })\n\n  const css: CSSUIObject = {\n    position: \"relative\",\n    ...styles.container,\n    ...__css,\n  }\n\n  return (\n    <HueSliderProvider value={{ styles }}>\n      <ui.div\n        className={cx(\"ui-hue-slider\", className)}\n        __css={css}\n        {...getContainerProps()}\n      >\n        <ui.input {...getInputProps(inputProps, ref)} />\n\n        {overlays.map((props, index) => (\n          <HueSliderOverlay key={index} {...props} />\n        ))}\n\n        <HueSliderTrack {...getTrackProps(trackProps)}>\n          <HueSliderThumb {...getThumbProps(thumbProps)} />\n        </HueSliderTrack>\n      </ui.div>\n    </HueSliderProvider>\n  )\n})\n\nHueSlider.displayName = \"HueSlider\"\nHueSlider.__ui__ = \"HueSlider\"\n\ninterface HueSliderOverlayProps extends HTMLUIProps {}\n\nconst HueSliderOverlay = forwardRef<HueSliderOverlayProps, \"div\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useHueSlider()\n\n    const css: CSSUIObject = {\n      bottom: 0,\n      left: 0,\n      position: \"absolute\",\n      right: 0,\n      top: 0,\n      ...styles.overlay,\n    }\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-hue-slider__overlay\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\nHueSliderOverlay.displayName = \"HueSliderOverlay\"\nHueSliderOverlay.__ui__ = \"HueSliderOverlay\"\n\ninterface HueSliderTrackProps extends HTMLUIProps {}\n\nconst HueSliderTrack = forwardRef<HueSliderTrackProps, \"div\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useHueSlider()\n\n    const css: CSSUIObject = {\n      h: \"100%\",\n      position: \"relative\",\n      w: \"100%\",\n      ...styles.track,\n    }\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-hue-slider__track\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\nHueSliderTrack.displayName = \"HueSliderTrack\"\nHueSliderTrack.__ui__ = \"HueSliderTrack\"\n\ninterface HueSliderThumbProps extends HTMLUIProps {}\n\nconst HueSliderThumb = forwardRef<HueSliderThumbProps, \"div\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useHueSlider()\n\n    const css: CSSUIObject = { ...styles.thumb }\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-hue-slider__thumb\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\nHueSliderThumb.displayName = \"HueSliderThumb\"\nHueSliderThumb.__ui__ = \"HueSliderThumb\"\n"],"mappings":"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","names":["props"]}