{"version":3,"sources":["../src/alpha-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 { alphaToHex, convertColor, createContext, cx } from \"@yamada-ui/utils\"\nimport { useColorSlider } from \"./use-color-slider\"\n\ninterface AlphaSliderContext {\n  styles: { [key: string]: CSSUIObject | undefined }\n}\n\nconst [AlphaSliderProvider, useAlphaSlider] = createContext<AlphaSliderContext>(\n  {\n    name: \"SliderContext\",\n    errorMessage: `useSliderContext returned is 'undefined'. Seems you forgot to wrap the components in \"<AlphaSlider />\" `,\n  },\n)\n\nconst defaultOverlays = (\n  color: string,\n  min: number,\n  max: number,\n  withShadow: boolean,\n): HTMLUIProps[] => {\n  const overlays: HTMLUIProps[] = [\n    {\n      bgImage:\n        \"linear-gradient(45deg, $checkers 25%, transparent 25%), linear-gradient(-45deg, $checkers 25%, transparent 25%), linear-gradient(45deg, transparent 75%, $checkers 75%), linear-gradient(-45deg, $body 75%, $checkers 75%)\",\n      bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n      bgSize: `8px 8px`,\n      vars: [\n        {\n          name: \"checkers\",\n          token: \"colors\",\n          value: [\"blackAlpha.300\", \"whiteAlpha.300\"],\n        },\n        {\n          name: \"body\",\n          token: \"colors\",\n          value: [\"whiteAlpha.500\", \"blackAlpha.500\"],\n        },\n      ],\n    },\n    {\n      bgGradient: `linear(to-r, ${\n        convertColor(color)(\"hex\") + alphaToHex(min)\n      }, ${convertColor(color)(\"hex\") + alphaToHex(max)})`,\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 AlphaSliderOptions {\n  /**\n   * The color used for the slider.\n   *\n   * @default \"#ffffff\"\n   */\n  color?: string\n  /**\n   * The maximum allowed value of the slider. Cannot be less than min.\n   *\n   * @default 1\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 0.01\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 AlphaSliderProps\n  extends ThemeProps<\"AlphaSlider\">,\n    Partial<Omit<UseColorSliderProps, \"channel\" | \"color\">>,\n    AlphaSliderOptions {}\n\n/**\n * `AlphaSlider` is a component used to allow the user to select color transparency.\n *\n * @see Docs https://yamada-ui.com/components/forms/alpha-slider\n */\nexport const AlphaSlider = forwardRef<AlphaSliderProps, \"input\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\"AlphaSlider\", props)\n    const {\n      className,\n      color = \"#ffffff\",\n      max = 1,\n      min = 0,\n      withShadow = true,\n      overlays = defaultOverlays(color, min, max, withShadow),\n      inputProps,\n      thumbProps,\n      trackProps,\n      __css,\n      ...computedProps\n    } = omitThemeProps(mergedProps)\n    const { getContainerProps, getInputProps, getThumbProps, getTrackProps } =\n      useColorSlider({\n        max,\n        min,\n        step: 0.01,\n        thumbColor: \"transparent\",\n        ...computedProps,\n        channel: \"alpha\",\n      })\n\n    const css: CSSUIObject = {\n      position: \"relative\",\n      ...styles.container,\n      ...__css,\n    }\n\n    return (\n      <AlphaSliderProvider value={{ styles }}>\n        <ui.div\n          className={cx(\"ui-alpha-slider\", className)}\n          __css={css}\n          {...getContainerProps()}\n        >\n          <ui.input {...getInputProps(inputProps, ref)} />\n\n          {overlays.map((props, index) => (\n            <AlphaSliderOverlay key={index} {...props} />\n          ))}\n\n          <AlphaSliderTrack {...getTrackProps(trackProps)}>\n            <AlphaSliderThumb {...getThumbProps(thumbProps)} />\n          </AlphaSliderTrack>\n        </ui.div>\n      </AlphaSliderProvider>\n    )\n  },\n)\n\nAlphaSlider.displayName = \"AlphaSlider\"\nAlphaSlider.__ui__ = \"AlphaSlider\"\n\ninterface AlphaSliderOverlayProps extends HTMLUIProps {}\n\nconst AlphaSliderOverlay = forwardRef<AlphaSliderOverlayProps, \"div\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useAlphaSlider()\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-alpha-slider__overlay\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\nAlphaSliderOverlay.displayName = \"AlphaSliderOverlay\"\nAlphaSliderOverlay.__ui__ = \"AlphaSliderOverlay\"\n\ninterface AlphaSliderTrackProps extends HTMLUIProps {}\n\nconst AlphaSliderTrack = forwardRef<AlphaSliderTrackProps, \"div\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useAlphaSlider()\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-alpha-slider__track\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\nAlphaSliderTrack.displayName = \"AlphaSliderTrack\"\nAlphaSliderTrack.__ui__ = \"AlphaSliderTrack\"\n\ninterface AlphaSliderThumbProps extends HTMLUIProps {}\n\nconst AlphaSliderThumb = forwardRef<AlphaSliderThumbProps, \"div\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useAlphaSlider()\n\n    const css: CSSUIObject = { ...styles.thumb }\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-alpha-slider__thumb\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\nAlphaSliderThumb.displayName = \"AlphaSliderThumb\"\nAlphaSliderThumb.__ui__ = \"AlphaSliderThumb\"\n"],"mappings":"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","names":["props"]}