@yamada-ui/react/dist/cjs/components/hue-slider/hue-slider.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"hue-slider.cjs","names":["createSlotComponent","hueSliderStyle","useI18n","useValue","styled"],"sources":["../../../../src/components/hue-slider/hue-slider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { HueSliderStyle } from \"./hue-slider.style\"\nimport { useCallback, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { Slider } from \"../slider\"\nimport { hueSliderStyle } from \"./hue-slider.style\"\n\ninterface ComponentContext\n  extends Pick<Required<HueSliderRootProps>, \"max\" | \"min\" | \"orientation\"> {}\n\nexport interface HueSliderRootProps\n  extends WithoutThemeProps<\n      Omit<\n        Slider.RootProps,\n        | \"betweenThumbs\"\n        | \"marks\"\n        | \"marksProps\"\n        | \"max\"\n        | \"rangeFill\"\n        | \"rangeProps\"\n        | \"thumbFill\"\n        | \"thumbProps\"\n        | \"trackFill\"\n        | \"trackProps\"\n      >,\n      HueSliderStyle\n    >,\n    ThemeProps<HueSliderStyle> {\n  /**\n   * The maximum allowed value of the slider. Cannot be less than min.\n   *\n   * @default 360\n   */\n  max?: number\n  /**\n   * Props for the overlay element.\n   */\n  overlayProps?: HueSliderOverlayProps\n  /**\n   * Props for the thumb element.\n   */\n  thumbProps?: HueSliderThumbProps\n  /**\n   * Props for the track element.\n   */\n  trackProps?: HueSliderTrackProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: HueSliderPropsContext,\n  useComponentContext,\n  usePropsContext: useHueSliderPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<HueSliderRootProps, HueSliderStyle, ComponentContext>(\n  \"hue-slider\",\n  hueSliderStyle,\n)\n\nexport { HueSliderPropsContext, useHueSliderPropsContext }\n\n/**\n * `HueSlider` is a component used to allow the user to select a color hue.\n *\n * @see https://yamada-ui.com/docs/components/hue-slider\n */\nexport const HueSliderRoot = withProvider<\"input\", HueSliderRootProps>(\n  ({\n    children,\n    max = 360,\n    min = 0,\n    orientation: orientationProp = \"horizontal\",\n    overlayProps,\n    thumbProps,\n    trackProps,\n    ...rest\n  }) => {\n    const { t } = useI18n(\"hueSlider\")\n    const orientation = useValue(orientationProp)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return (\n        <HueSliderTrack {...trackProps}>\n          <HueSliderThumb {...thumbProps} />\n\n          <HueSliderOverlay {...overlayProps} />\n        </HueSliderTrack>\n      )\n    }, [children, overlayProps, thumbProps, trackProps])\n    const context = useMemo(\n      () => ({ max, min, orientation }),\n      [max, min, orientation],\n    )\n    const getColorName = useCallback(\n      (hue: number): string => {\n        if (hue < 30 || hue >= 330) return t(\"Red\")\n        if (hue < 90) return t(\"Yellow\")\n        if (hue < 150) return t(\"Green\")\n        if (hue < 210) return t(\"Cyan\")\n        if (hue < 270) return t(\"Blue\")\n        return t(\"Magenta\")\n      },\n      [t],\n    )\n    const getAriaValueText = useCallback(\n      (hue: number) => `${hue}°, ${getColorName(hue)}`,\n      [getColorName],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        <Slider.Root\n          getAriaValueText={getAriaValueText}\n          max={max}\n          min={min}\n          orientation={orientation}\n          {...rest}\n        >\n          {computedChildren}\n        </Slider.Root>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)({\n  \"--thumb-fill\": \"transparent\",\n  \"--track-fill\": \"transparent\",\n})\n\nexport interface HueSliderTrackProps extends Slider.TrackProps {}\n\nexport const HueSliderTrack = withContext<\"div\", HueSliderTrackProps>(\n  Slider.Track,\n  \"track\",\n)()\n\nexport interface HueSliderOverlayProps extends HTMLStyledProps {\n  /**\n   * The layers used for the overlay element.\n   */\n  layers?: HTMLStyledProps[]\n}\n\nexport const HueSliderOverlay = withContext<\"fragment\", HueSliderOverlayProps>(\n  ({ layers, ...rest }) => {\n    const { max, min, orientation } = useComponentContext()\n\n    layers ??= [\n      {\n        bgGradient: `linear(${[\n          orientation === \"horizontal\" ? \"to-r\" : \"to-t\",\n          ...Array.from({ length: 7 }).map(\n            (_, index) =>\n              `hsl(${Math.round(min + ((max - min) / 6) * index)}, 100%, 50%)`,\n          ),\n        ].join(\", \")})`,\n        boxShadow: \"inner\",\n      },\n    ]\n\n    return (\n      <>\n        {layers.map((props, index) => (\n          <styled.div\n            key={index}\n            data-orientation={orientation}\n            {...rest}\n            {...props}\n          />\n        ))}\n      </>\n    )\n  },\n  \"overlay\",\n)()\n\nexport interface HueSliderThumbProps extends Slider.ThumbProps {}\n\nexport const HueSliderThumb = withContext<\"div\", HueSliderThumbProps>(\n  Slider.Thumb,\n  \"thumb\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;;AAoDA,MAAM,EACJ,kBACA,cAAc,uBACd,qBACA,iBAAiB,0BACjB,aACA,iBACEA,6CACF,cACAC,wCACD;;;;;;AASD,MAAa,gBAAgB,cAC1B,EACC,UACA,MAAM,KACN,MAAM,GACN,aAAa,kBAAkB,cAC/B,cACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,MAAMC,8BAAQ,YAAY;CAClC,MAAM,cAAcC,uCAAS,gBAAgB;CAC7C,MAAM,4CAAiC;AACrC,MAAI,SAAU,QAAO;AAErB,SACE,4CAAC;GAAe,GAAI;cAClB,2CAAC,kBAAe,GAAI,aAAc,EAElC,2CAAC,oBAAiB,GAAI,eAAgB;IACvB;IAElB;EAAC;EAAU;EAAc;EAAY;EAAW,CAAC;CACpD,MAAM,oCACG;EAAE;EAAK;EAAK;EAAa,GAChC;EAAC;EAAK;EAAK;EAAY,CACxB;CACD,MAAM,uCACH,QAAwB;AACvB,MAAI,MAAM,MAAM,OAAO,IAAK,QAAO,EAAE,MAAM;AAC3C,MAAI,MAAM,GAAI,QAAO,EAAE,SAAS;AAChC,MAAI,MAAM,IAAK,QAAO,EAAE,QAAQ;AAChC,MAAI,MAAM,IAAK,QAAO,EAAE,OAAO;AAC/B,MAAI,MAAM,IAAK,QAAO,EAAE,OAAO;AAC/B,SAAO,EAAE,UAAU;IAErB,CAAC,EAAE,CACJ;CACD,MAAM,2CACH,QAAgB,GAAG,IAAI,KAAK,aAAa,IAAI,IAC9C,CAAC,aAAa,CACf;AAED,QACE,2CAAC;EAAiB,OAAO;YACvB;GACoB;GACb;GACA;GACQ;GACb,GAAI;aAEH;IACW;GACG;GAGvB,OACD,CAAC;CACA,gBAAgB;CAChB,gBAAgB;CACjB,CAAC;AAIF,MAAa,iBAAiB,wCAE5B,QACD,EAAE;AASH,MAAa,mBAAmB,aAC7B,EAAE,OAAQ,GAAG,WAAW;CACvB,MAAM,EAAE,KAAK,KAAK,gBAAgB,qBAAqB;AAEvD,YAAW,CACT;EACE,YAAY,UAAU,CACpB,gBAAgB,eAAe,SAAS,QACxC,GAAG,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,KAC1B,GAAG,UACF,OAAO,KAAK,MAAM,OAAQ,MAAM,OAAO,IAAK,MAAM,CAAC,cACtD,CACF,CAAC,KAAK,KAAK,CAAC;EACb,WAAW;EACZ,CACF;AAED,QACE,mFACG,OAAO,KAAK,OAAO,UAClB,2CAACC,uBAAO;EAEN,oBAAkB;EAClB,GAAI;EACJ,GAAI;IAHC,MAIL,CACF,GACD;GAGP,UACD,EAAE;AAIH,MAAa,iBAAiB,wCAE5B,QACD,EAAE"}