@yamada-ui/color-picker 1.2.25 → 1.2.26-dev-20240802115247
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-UZQ2UORY.mjs → chunk-3LSKYAZH.mjs} +2 -2
- package/dist/{chunk-UZQ2UORY.mjs.map → chunk-3LSKYAZH.mjs.map} +1 -1
- package/dist/{chunk-UQWAM6TA.mjs → chunk-7IS4DYY4.mjs} +1 -1
- package/dist/chunk-7IS4DYY4.mjs.map +1 -0
- package/dist/{chunk-3DGCARVD.mjs → chunk-KJXPM5WS.mjs} +4 -4
- package/dist/{chunk-KV7PYPAQ.mjs → chunk-NXOBXSPP.mjs} +5 -5
- package/dist/{chunk-PH3OS7P6.mjs → chunk-RRGOTSTI.mjs} +2 -2
- package/dist/{chunk-DQG3MOMA.mjs → chunk-RU5PBK5I.mjs} +2 -2
- package/dist/{chunk-YUVIAAMW.mjs → chunk-WXU77UZN.mjs} +2 -2
- package/dist/{chunk-CCDOOZRF.mjs → chunk-YSD4GTTV.mjs} +3 -3
- package/dist/{chunk-I5FT5CBR.mjs → chunk-YXO5RKWB.mjs} +5 -5
- package/dist/color-picker.js +1 -1
- package/dist/color-picker.js.map +1 -1
- package/dist/color-picker.mjs +9 -9
- package/dist/color-selector-body.js.map +1 -1
- package/dist/color-selector-body.mjs +5 -5
- package/dist/color-selector-channels.js.map +1 -1
- package/dist/color-selector-channels.mjs +2 -2
- package/dist/color-selector-eye-dropper.js.map +1 -1
- package/dist/color-selector-eye-dropper.mjs +2 -2
- package/dist/color-selector-sliders.js.map +1 -1
- package/dist/color-selector-sliders.mjs +2 -2
- package/dist/color-selector-swatches.js.map +1 -1
- package/dist/color-selector-swatches.mjs +3 -3
- package/dist/color-selector.js +1 -1
- package/dist/color-selector.js.map +1 -1
- package/dist/color-selector.mjs +8 -8
- package/dist/color-swatch.d.mts +2 -2
- package/dist/color-swatch.d.ts +2 -2
- package/dist/color-swatch.js.map +1 -1
- package/dist/color-swatch.mjs +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +9 -9
- package/dist/use-color-selector.js +1 -1
- package/dist/use-color-selector.js.map +1 -1
- package/dist/use-color-selector.mjs +1 -1
- package/package.json +3 -3
- package/dist/chunk-UQWAM6TA.mjs.map +0 -1
- /package/dist/{chunk-3DGCARVD.mjs.map → chunk-KJXPM5WS.mjs.map} +0 -0
- /package/dist/{chunk-KV7PYPAQ.mjs.map → chunk-NXOBXSPP.mjs.map} +0 -0
- /package/dist/{chunk-PH3OS7P6.mjs.map → chunk-RRGOTSTI.mjs.map} +0 -0
- /package/dist/{chunk-DQG3MOMA.mjs.map → chunk-RU5PBK5I.mjs.map} +0 -0
- /package/dist/{chunk-YUVIAAMW.mjs.map → chunk-WXU77UZN.mjs.map} +0 -0
- /package/dist/{chunk-CCDOOZRF.mjs.map → chunk-YSD4GTTV.mjs.map} +0 -0
- /package/dist/{chunk-I5FT5CBR.mjs.map → chunk-YXO5RKWB.mjs.map} +0 -0
|
@@ -377,7 +377,7 @@ var useColorSelector = ({
|
|
|
377
377
|
ref,
|
|
378
378
|
color,
|
|
379
379
|
onClick: handlerAll(props2.onClick, () => {
|
|
380
|
-
if (!color) return;
|
|
380
|
+
if (!isString(color)) return;
|
|
381
381
|
onSwatchClick == null ? void 0 : onSwatchClick(color);
|
|
382
382
|
onChange(color);
|
|
383
383
|
onChangeEnd(color);
|
|
@@ -410,4 +410,4 @@ export {
|
|
|
410
410
|
useColorSelectorContext,
|
|
411
411
|
useColorSelector
|
|
412
412
|
};
|
|
413
|
-
//# sourceMappingURL=chunk-
|
|
413
|
+
//# sourceMappingURL=chunk-3LSKYAZH.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/use-color-selector.ts"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n UIPropGetter,\n ThemeProps,\n RequiredUIPropGetter,\n} from \"@yamada-ui/core\"\nimport {\n useFormControlProps,\n type FormControlOptions,\n formControlProperties,\n} from \"@yamada-ui/form-control\"\nimport type { InputProps } from \"@yamada-ui/input\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useEyeDropper } from \"@yamada-ui/use-eye-dropper\"\nimport type { ColorFormat, Dict, Merge } from \"@yamada-ui/utils\"\nimport {\n calcFormat,\n convertColor,\n createContext,\n handlerAll,\n hsvTo,\n isString,\n parseToHsv,\n useCallbackRef,\n useUpdateEffect,\n omitObject,\n parseToRgba,\n parseToHsla,\n rgbaTo,\n hslaTo,\n pickObject,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent } from \"react\"\nimport { useCallback, useMemo, useRef, useState } from \"react\"\nimport type { AlphaSliderProps } from \"./alpha-slider\"\nimport type { ColorSwatchProps } from \"./color-swatch\"\nimport type { HueSliderProps } from \"./hue-slider\"\nimport type { SaturationSliderProps } from \"./saturation-slider\"\n\ntype Space = keyof Hsla | keyof Rgba\ntype Hsla = { h: number; s: number; l: number; a: number }\ntype Rgba = { r: number; g: number; b: number; a: number }\ntype Hsva = { h: number; s: number; v: number; a: number }\ntype Channel = {\n label: string\n space: Space\n value: number\n min: number\n max: number\n}\n\nconst convertHsla = (value: string, fallback?: string): Hsla => {\n let [h, s, l, a] = parseToHsla(value, fallback) ?? [0, 0, 1, 1]\n\n if (a > 1) a = 1\n\n return { h, s, l, a }\n}\n\nconst convertRgba = (value: string, fallback?: string): Rgba => {\n let [r, g, b, a] = parseToRgba(value, fallback) ?? [255, 255, 255, 1]\n\n if (r > 255) r = 255\n if (g > 255) g = 255\n if (b > 255) b = 255\n if (a > 1) a = 1\n\n return { r, g, b, a }\n}\n\nconst convertHsva = (value: string, fallback?: string): Hsva => {\n const [h, s, v, a] = parseToHsv(value, fallback)\n\n return { h, s, v, a }\n}\n\ntype ColorSelectorContext = {\n value: string\n onChange: (value: string | Partial<Hsva>) => void\n eyeDropperSupported: boolean\n withAlpha: boolean\n isInteractive: boolean\n disabled?: boolean\n readOnly?: boolean\n channels: Channel[]\n size?: ThemeProps<\"ColorSelector\">[\"size\"]\n getHueSliderProps: UIPropGetter<\"input\", HueSliderProps, HueSliderProps>\n getAlphaSliderProps: UIPropGetter<\"input\", AlphaSliderProps, AlphaSliderProps>\n getEyeDropperProps: UIPropGetter<\"button\">\n getChannelProps: RequiredUIPropGetter<\n \"input\",\n Merge<InputProps, { space: Space }>,\n InputProps\n >\n getSwatchProps: UIPropGetter<\"div\", ColorSwatchProps, ColorSwatchProps>\n styles: Record<string, CSSUIObject>\n}\n\nexport const [ColorSelectorProvider, useColorSelectorContext] =\n createContext<ColorSelectorContext>({\n name: \"ColorSelectorContext\",\n errorMessage: `useColorSelectorContext returned is 'undefined'. Seems you forgot to wrap the components in \"<ColorSelector />\"`,\n })\n\ntype UseColorSelectorOptions = {\n /**\n * The base `id` to use for the color selector.\n */\n id?: string\n /**\n * The name attribute of the hidden `input` field.\n * This is particularly useful in forms.\n */\n name?: string\n /**\n * The value of the color selector.\n */\n value?: string\n /**\n * The initial value of the color selector.\n */\n defaultValue?: string\n /**\n * The fallback value returned when color determination fails.\n */\n fallbackValue?: string\n /**\n * Function called whenever the color selector value changes.\n */\n onChange?: (value: string) => void\n /**\n * Function called when the user starts selecting a new value.\n */\n onChangeStart?: (value: string) => void\n /**\n * Function called when the user is done selecting a new value.\n */\n onChangeEnd?: (value: string) => void\n /**\n * Color format. For example, `hex`, `rgba`, etc.\n *\n * @default \"hexa\"\n */\n format?: ColorFormat\n /**\n * Function called whenever the color swatch click.\n */\n onSwatchClick?: (value: string) => void\n}\n\nexport type UseColorSelectorBaseProps = UseColorSelectorOptions &\n FormControlOptions\n\nexport type UseColorSelectorProps = Omit<\n HTMLUIProps<\"div\">,\n \"defaultValue\" | \"onChange\" | \"children\"\n> &\n UseColorSelectorBaseProps\n\nexport const useColorSelector = ({\n isInvalid,\n ...props\n}: UseColorSelectorProps) => {\n let {\n id,\n name,\n value: valueProp,\n defaultValue,\n fallbackValue,\n onChange: onChangeProp,\n onChangeStart: onChangeStartProp,\n onChangeEnd: onChangeEndProp,\n format,\n required,\n disabled,\n readOnly,\n onSwatchClick,\n ...rest\n } = useFormControlProps({ isInvalid, ...props })\n\n const onChangeStartRef = useCallbackRef(onChangeStartProp)\n const onChangeEndRef = useCallbackRef(onChangeEndProp)\n const { supported: eyeDropperSupported, onOpen } = useEyeDropper()\n const [value, setValue] = useControllableState({\n value: valueProp,\n defaultValue: defaultValue ?? fallbackValue,\n onChange: onChangeProp,\n })\n const resolvedValue = value ?? \"#ffffff\"\n const timeoutId = useRef<any>(undefined)\n const formatRef = useRef<ColorFormat>(format ?? calcFormat(resolvedValue))\n const isDraggingRef = useRef<boolean>(false)\n const [parsedValue, setParsedValue] = useState<Hsva>(\n convertHsva(resolvedValue, fallbackValue),\n )\n const { h, s, v, a } = parsedValue\n const withAlpha = formatRef.current.endsWith(\"a\")\n const isInteractive = !(disabled || readOnly)\n\n const channels: Channel[] = useMemo(() => {\n if (resolvedValue.startsWith(\"hsl\")) {\n const { h, s, l, a } = convertHsla(resolvedValue, fallbackValue)\n\n let channels: Channel[] = [\n { label: \"H\", space: \"h\", value: Math.round(h), min: 0, max: 360 },\n {\n label: \"S(%)\",\n space: \"s\",\n value: Math.round(s * 100),\n min: 0,\n max: 100,\n },\n {\n label: \"L(%)\",\n space: \"l\",\n value: Math.round(l * 100),\n min: 0,\n max: 100,\n },\n ]\n\n if (withAlpha) {\n channels = [\n ...channels,\n {\n label: \"A(%)\",\n space: \"a\",\n value: Math.round(a * 100),\n min: 0,\n max: 100,\n },\n ]\n }\n\n return channels\n } else {\n const { r, g, b, a } = convertRgba(resolvedValue, fallbackValue)\n\n let channels: Channel[] = [\n { label: \"R\", space: \"r\", value: Math.round(r), min: 0, max: 255 },\n { label: \"G\", space: \"g\", value: Math.round(g), min: 0, max: 255 },\n { label: \"B\", space: \"b\", value: Math.round(b), min: 0, max: 255 },\n ]\n\n if (withAlpha) {\n channels = [\n ...channels,\n {\n label: \"A(%)\",\n space: \"a\",\n value: Math.round(a * 100),\n min: 0,\n max: 100,\n },\n ]\n }\n\n return channels\n }\n }, [resolvedValue, withAlpha, fallbackValue])\n\n const onChange = useCallback(\n (value: string | Partial<Hsva>) => {\n if (isString(value)) {\n setParsedValue(convertHsva(value, fallbackValue))\n } else {\n setParsedValue((prev) => ({ ...prev, ...value }))\n }\n },\n [fallbackValue],\n )\n\n const onChangeStart = useCallback(\n (value: Partial<Hsva>) => {\n window.clearTimeout(timeoutId.current)\n\n isDraggingRef.current = true\n\n const { h, s, v, a } = { ...parsedValue, ...value }\n\n const nextValue = hsvTo([h, s, v, a], fallbackValue)(formatRef.current)\n\n if (nextValue) onChangeStartRef(nextValue)\n },\n [formatRef, onChangeStartRef, fallbackValue, parsedValue],\n )\n\n const onChangeEnd = useCallback(\n (value: string | Partial<Hsva>) => {\n window.clearTimeout(timeoutId.current)\n\n timeoutId.current = window.setTimeout(() => {\n isDraggingRef.current = false\n }, 200)\n\n let nextValue: string | undefined\n\n if (isString(value)) {\n nextValue = convertColor(value, fallbackValue)(formatRef.current)\n } else {\n const { h, s, v, a } = { ...parsedValue, ...value }\n\n nextValue = hsvTo([h, s, v, a], fallbackValue)(formatRef.current)\n }\n\n if (nextValue) onChangeEndRef(nextValue)\n },\n [formatRef, onChangeEndRef, fallbackValue, parsedValue],\n )\n\n const onChannelChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>, space: Space) => {\n let n = Math.floor(parseFloat(ev.target.value))\n\n if (isNaN(n)) n = 0\n\n if ([\"s\", \"l\", \"a\"].includes(space)) n = n / 100\n\n let nextValue: string | undefined\n\n if (resolvedValue.startsWith(\"hsl\")) {\n const { h, s, l, a } = Object.assign(\n convertHsla(resolvedValue, fallbackValue),\n { [space]: n },\n )\n\n nextValue = hslaTo([h, s, l, a], fallbackValue)(formatRef.current)\n } else {\n const { r, g, b, a } = Object.assign(\n convertRgba(resolvedValue, fallbackValue),\n { [space]: n },\n )\n\n nextValue = rgbaTo([r, g, b, a], fallbackValue)(formatRef.current)\n }\n\n if (!nextValue) return\n\n onChange(nextValue)\n onChangeEnd(nextValue)\n },\n [resolvedValue, onChange, onChangeEnd, formatRef, fallbackValue],\n )\n\n const onEyeDropperClick = useCallback(async () => {\n try {\n const { sRGBHex } = (await onOpen()) ?? {}\n\n if (!sRGBHex) return\n\n onChange(sRGBHex)\n onChangeEnd(sRGBHex)\n } catch {}\n }, [onOpen, onChange, onChangeEnd])\n\n useUpdateEffect(() => {\n const nextValue = hsvTo([h, s, v, a], fallbackValue)(formatRef.current)\n\n if (nextValue) setValue(nextValue)\n }, [h, s, v, a])\n\n useUpdateEffect(() => {\n if (isDraggingRef.current) return\n\n if (valueProp) setParsedValue(convertHsva(valueProp, fallbackValue))\n }, [valueProp])\n\n useUpdateEffect(() => {\n if (!format || !value) return\n\n formatRef.current = format\n\n const nextValue = convertColor(value, fallbackValue)(format)\n\n if (nextValue) setValue(nextValue)\n }, [format])\n\n const getContainerProps: UIPropGetter = (props = {}, ref = null) => ({\n ...props,\n ref,\n ...omitObject(rest, [\"aria-readonly\"]),\n })\n\n const getInputProps: UIPropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n ...pickObject(rest, formControlProperties),\n ...props,\n id,\n ref,\n type: \"hidden\",\n name,\n value: resolvedValue,\n required,\n disabled,\n readOnly,\n }),\n [disabled, id, name, readOnly, required, rest, resolvedValue],\n )\n\n const getSaturationSliderProps: UIPropGetter<\n \"input\",\n SaturationSliderProps,\n SaturationSliderProps\n > = useCallback(\n (props = {}, ref = null) => ({\n required,\n disabled,\n readOnly,\n isInvalid,\n ...props,\n ref,\n value: [h, s, v],\n onChange: handlerAll(props.onChange, ([, s, v]) => onChange({ s, v })),\n onChangeStart: handlerAll(props.onChangeStart, ([, s, v]) =>\n onChangeStart({ s, v }),\n ),\n onChangeEnd: handlerAll(props.onChangeEnd, ([, s, v]) =>\n onChangeEnd({ s, v }),\n ),\n }),\n [\n required,\n disabled,\n readOnly,\n isInvalid,\n h,\n s,\n v,\n onChange,\n onChangeStart,\n onChangeEnd,\n ],\n )\n\n const getHueSliderProps: UIPropGetter<\n \"input\",\n HueSliderProps,\n HueSliderProps\n > = useCallback(\n (props = {}, ref = null) => ({\n required,\n disabled,\n readOnly,\n isInvalid,\n ...props,\n ref,\n value: h,\n onChange: handlerAll(props.onChange, (h) => onChange({ h })),\n onChangeStart: handlerAll(props.onChangeStart, (h) =>\n onChangeStart({ h }),\n ),\n onChangeEnd: handlerAll(props.onChangeEnd, (h) => onChangeEnd({ h })),\n }),\n [\n required,\n disabled,\n readOnly,\n isInvalid,\n h,\n onChange,\n onChangeStart,\n onChangeEnd,\n ],\n )\n\n const getAlphaSliderProps: UIPropGetter<\n \"input\",\n AlphaSliderProps,\n AlphaSliderProps\n > = useCallback(\n (props = {}, ref = null) => ({\n required,\n disabled,\n readOnly,\n isInvalid,\n ...props,\n ref,\n value: a,\n color: hsvTo([h, s, v, a], fallbackValue)(formatRef.current),\n onChange: handlerAll(props.onChange, (a) => onChange({ a })),\n onChangeStart: handlerAll(props.onChangeStart, (a) =>\n onChangeStart({ a }),\n ),\n onChangeEnd: handlerAll(props.onChangeEnd, (a) => onChangeEnd({ a })),\n }),\n [\n fallbackValue,\n required,\n disabled,\n readOnly,\n isInvalid,\n formatRef,\n h,\n s,\n v,\n a,\n onChange,\n onChangeStart,\n onChangeEnd,\n ],\n )\n\n const getChannelProps: RequiredUIPropGetter<\n \"input\",\n Merge<InputProps, { space: Space }>,\n InputProps\n > = useCallback(\n ({ space, ...props }, ref = null) => {\n return {\n required,\n disabled,\n readOnly,\n isInvalid,\n ...props,\n ref,\n type: \"number\",\n step: 1,\n onChange: handlerAll(props.onChange, (ev) =>\n onChannelChange(ev, space),\n ),\n } as Dict\n },\n [required, disabled, readOnly, isInvalid, onChannelChange],\n )\n\n const getEyeDropperProps: UIPropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n disabled,\n \"aria-label\": \"Pick a color\",\n ...props,\n ref,\n onClick: handlerAll(props.onClick, onEyeDropperClick),\n }),\n [disabled, onEyeDropperClick],\n )\n\n const getSwatchProps: UIPropGetter<\n \"div\",\n ColorSwatchProps,\n ColorSwatchProps\n > = useCallback(\n ({ color, ...props } = {}, ref = null) => ({\n \"aria-label\": `Select ${color} as the color`,\n disabled,\n readOnly,\n ...props,\n ref,\n color,\n onClick: handlerAll(props.onClick, () => {\n if (!color) return\n\n onSwatchClick?.(color)\n onChange(color)\n onChangeEnd(color)\n }),\n }),\n [disabled, readOnly, onSwatchClick, onChange, onChangeEnd],\n )\n\n return {\n value: resolvedValue,\n onChange,\n eyeDropperSupported,\n withAlpha,\n isInteractive,\n disabled,\n readOnly,\n channels,\n getContainerProps,\n getInputProps,\n getSaturationSliderProps,\n getHueSliderProps,\n getAlphaSliderProps,\n getEyeDropperProps,\n getChannelProps,\n getSwatchProps,\n }\n}\n\nexport type UseColorSelectorReturn = ReturnType<typeof useColorSelector>\n"],"mappings":"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","names":["h","s","a","channels","value","v","props"]}
|
|
1
|
+
{"version":3,"sources":["../src/use-color-selector.ts"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n UIPropGetter,\n ThemeProps,\n RequiredUIPropGetter,\n} from \"@yamada-ui/core\"\nimport {\n useFormControlProps,\n type FormControlOptions,\n formControlProperties,\n} from \"@yamada-ui/form-control\"\nimport type { InputProps } from \"@yamada-ui/input\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useEyeDropper } from \"@yamada-ui/use-eye-dropper\"\nimport type { ColorFormat, Dict, Merge } from \"@yamada-ui/utils\"\nimport {\n calcFormat,\n convertColor,\n createContext,\n handlerAll,\n hsvTo,\n isString,\n parseToHsv,\n useCallbackRef,\n useUpdateEffect,\n omitObject,\n parseToRgba,\n parseToHsla,\n rgbaTo,\n hslaTo,\n pickObject,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent } from \"react\"\nimport { useCallback, useMemo, useRef, useState } from \"react\"\nimport type { AlphaSliderProps } from \"./alpha-slider\"\nimport type { ColorSwatchProps } from \"./color-swatch\"\nimport type { HueSliderProps } from \"./hue-slider\"\nimport type { SaturationSliderProps } from \"./saturation-slider\"\n\ntype Space = keyof Hsla | keyof Rgba\ntype Hsla = { h: number; s: number; l: number; a: number }\ntype Rgba = { r: number; g: number; b: number; a: number }\ntype Hsva = { h: number; s: number; v: number; a: number }\ntype Channel = {\n label: string\n space: Space\n value: number\n min: number\n max: number\n}\n\nconst convertHsla = (value: string, fallback?: string): Hsla => {\n let [h, s, l, a] = parseToHsla(value, fallback) ?? [0, 0, 1, 1]\n\n if (a > 1) a = 1\n\n return { h, s, l, a }\n}\n\nconst convertRgba = (value: string, fallback?: string): Rgba => {\n let [r, g, b, a] = parseToRgba(value, fallback) ?? [255, 255, 255, 1]\n\n if (r > 255) r = 255\n if (g > 255) g = 255\n if (b > 255) b = 255\n if (a > 1) a = 1\n\n return { r, g, b, a }\n}\n\nconst convertHsva = (value: string, fallback?: string): Hsva => {\n const [h, s, v, a] = parseToHsv(value, fallback)\n\n return { h, s, v, a }\n}\n\ntype ColorSelectorContext = {\n value: string\n onChange: (value: string | Partial<Hsva>) => void\n eyeDropperSupported: boolean\n withAlpha: boolean\n isInteractive: boolean\n disabled?: boolean\n readOnly?: boolean\n channels: Channel[]\n size?: ThemeProps<\"ColorSelector\">[\"size\"]\n getHueSliderProps: UIPropGetter<\"input\", HueSliderProps, HueSliderProps>\n getAlphaSliderProps: UIPropGetter<\"input\", AlphaSliderProps, AlphaSliderProps>\n getEyeDropperProps: UIPropGetter<\"button\">\n getChannelProps: RequiredUIPropGetter<\n \"input\",\n Merge<InputProps, { space: Space }>,\n InputProps\n >\n getSwatchProps: UIPropGetter<\"div\", ColorSwatchProps, ColorSwatchProps>\n styles: Record<string, CSSUIObject>\n}\n\nexport const [ColorSelectorProvider, useColorSelectorContext] =\n createContext<ColorSelectorContext>({\n name: \"ColorSelectorContext\",\n errorMessage: `useColorSelectorContext returned is 'undefined'. Seems you forgot to wrap the components in \"<ColorSelector />\"`,\n })\n\ntype UseColorSelectorOptions = {\n /**\n * The base `id` to use for the color selector.\n */\n id?: string\n /**\n * The name attribute of the hidden `input` field.\n * This is particularly useful in forms.\n */\n name?: string\n /**\n * The value of the color selector.\n */\n value?: string\n /**\n * The initial value of the color selector.\n */\n defaultValue?: string\n /**\n * The fallback value returned when color determination fails.\n */\n fallbackValue?: string\n /**\n * Function called whenever the color selector value changes.\n */\n onChange?: (value: string) => void\n /**\n * Function called when the user starts selecting a new value.\n */\n onChangeStart?: (value: string) => void\n /**\n * Function called when the user is done selecting a new value.\n */\n onChangeEnd?: (value: string) => void\n /**\n * Color format. For example, `hex`, `rgba`, etc.\n *\n * @default \"hexa\"\n */\n format?: ColorFormat\n /**\n * Function called whenever the color swatch click.\n */\n onSwatchClick?: (value: string) => void\n}\n\nexport type UseColorSelectorBaseProps = UseColorSelectorOptions &\n FormControlOptions\n\nexport type UseColorSelectorProps = Omit<\n HTMLUIProps<\"div\">,\n \"defaultValue\" | \"onChange\" | \"children\"\n> &\n UseColorSelectorBaseProps\n\nexport const useColorSelector = ({\n isInvalid,\n ...props\n}: UseColorSelectorProps) => {\n let {\n id,\n name,\n value: valueProp,\n defaultValue,\n fallbackValue,\n onChange: onChangeProp,\n onChangeStart: onChangeStartProp,\n onChangeEnd: onChangeEndProp,\n format,\n required,\n disabled,\n readOnly,\n onSwatchClick,\n ...rest\n } = useFormControlProps({ isInvalid, ...props })\n\n const onChangeStartRef = useCallbackRef(onChangeStartProp)\n const onChangeEndRef = useCallbackRef(onChangeEndProp)\n const { supported: eyeDropperSupported, onOpen } = useEyeDropper()\n const [value, setValue] = useControllableState({\n value: valueProp,\n defaultValue: defaultValue ?? fallbackValue,\n onChange: onChangeProp,\n })\n const resolvedValue = value ?? \"#ffffff\"\n const timeoutId = useRef<any>(undefined)\n const formatRef = useRef<ColorFormat>(format ?? calcFormat(resolvedValue))\n const isDraggingRef = useRef<boolean>(false)\n const [parsedValue, setParsedValue] = useState<Hsva>(\n convertHsva(resolvedValue, fallbackValue),\n )\n const { h, s, v, a } = parsedValue\n const withAlpha = formatRef.current.endsWith(\"a\")\n const isInteractive = !(disabled || readOnly)\n\n const channels: Channel[] = useMemo(() => {\n if (resolvedValue.startsWith(\"hsl\")) {\n const { h, s, l, a } = convertHsla(resolvedValue, fallbackValue)\n\n let channels: Channel[] = [\n { label: \"H\", space: \"h\", value: Math.round(h), min: 0, max: 360 },\n {\n label: \"S(%)\",\n space: \"s\",\n value: Math.round(s * 100),\n min: 0,\n max: 100,\n },\n {\n label: \"L(%)\",\n space: \"l\",\n value: Math.round(l * 100),\n min: 0,\n max: 100,\n },\n ]\n\n if (withAlpha) {\n channels = [\n ...channels,\n {\n label: \"A(%)\",\n space: \"a\",\n value: Math.round(a * 100),\n min: 0,\n max: 100,\n },\n ]\n }\n\n return channels\n } else {\n const { r, g, b, a } = convertRgba(resolvedValue, fallbackValue)\n\n let channels: Channel[] = [\n { label: \"R\", space: \"r\", value: Math.round(r), min: 0, max: 255 },\n { label: \"G\", space: \"g\", value: Math.round(g), min: 0, max: 255 },\n { label: \"B\", space: \"b\", value: Math.round(b), min: 0, max: 255 },\n ]\n\n if (withAlpha) {\n channels = [\n ...channels,\n {\n label: \"A(%)\",\n space: \"a\",\n value: Math.round(a * 100),\n min: 0,\n max: 100,\n },\n ]\n }\n\n return channels\n }\n }, [resolvedValue, withAlpha, fallbackValue])\n\n const onChange = useCallback(\n (value: string | Partial<Hsva>) => {\n if (isString(value)) {\n setParsedValue(convertHsva(value, fallbackValue))\n } else {\n setParsedValue((prev) => ({ ...prev, ...value }))\n }\n },\n [fallbackValue],\n )\n\n const onChangeStart = useCallback(\n (value: Partial<Hsva>) => {\n window.clearTimeout(timeoutId.current)\n\n isDraggingRef.current = true\n\n const { h, s, v, a } = { ...parsedValue, ...value }\n\n const nextValue = hsvTo([h, s, v, a], fallbackValue)(formatRef.current)\n\n if (nextValue) onChangeStartRef(nextValue)\n },\n [formatRef, onChangeStartRef, fallbackValue, parsedValue],\n )\n\n const onChangeEnd = useCallback(\n (value: string | Partial<Hsva>) => {\n window.clearTimeout(timeoutId.current)\n\n timeoutId.current = window.setTimeout(() => {\n isDraggingRef.current = false\n }, 200)\n\n let nextValue: string | undefined\n\n if (isString(value)) {\n nextValue = convertColor(value, fallbackValue)(formatRef.current)\n } else {\n const { h, s, v, a } = { ...parsedValue, ...value }\n\n nextValue = hsvTo([h, s, v, a], fallbackValue)(formatRef.current)\n }\n\n if (nextValue) onChangeEndRef(nextValue)\n },\n [formatRef, onChangeEndRef, fallbackValue, parsedValue],\n )\n\n const onChannelChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>, space: Space) => {\n let n = Math.floor(parseFloat(ev.target.value))\n\n if (isNaN(n)) n = 0\n\n if ([\"s\", \"l\", \"a\"].includes(space)) n = n / 100\n\n let nextValue: string | undefined\n\n if (resolvedValue.startsWith(\"hsl\")) {\n const { h, s, l, a } = Object.assign(\n convertHsla(resolvedValue, fallbackValue),\n { [space]: n },\n )\n\n nextValue = hslaTo([h, s, l, a], fallbackValue)(formatRef.current)\n } else {\n const { r, g, b, a } = Object.assign(\n convertRgba(resolvedValue, fallbackValue),\n { [space]: n },\n )\n\n nextValue = rgbaTo([r, g, b, a], fallbackValue)(formatRef.current)\n }\n\n if (!nextValue) return\n\n onChange(nextValue)\n onChangeEnd(nextValue)\n },\n [resolvedValue, onChange, onChangeEnd, formatRef, fallbackValue],\n )\n\n const onEyeDropperClick = useCallback(async () => {\n try {\n const { sRGBHex } = (await onOpen()) ?? {}\n\n if (!sRGBHex) return\n\n onChange(sRGBHex)\n onChangeEnd(sRGBHex)\n } catch {}\n }, [onOpen, onChange, onChangeEnd])\n\n useUpdateEffect(() => {\n const nextValue = hsvTo([h, s, v, a], fallbackValue)(formatRef.current)\n\n if (nextValue) setValue(nextValue)\n }, [h, s, v, a])\n\n useUpdateEffect(() => {\n if (isDraggingRef.current) return\n\n if (valueProp) setParsedValue(convertHsva(valueProp, fallbackValue))\n }, [valueProp])\n\n useUpdateEffect(() => {\n if (!format || !value) return\n\n formatRef.current = format\n\n const nextValue = convertColor(value, fallbackValue)(format)\n\n if (nextValue) setValue(nextValue)\n }, [format])\n\n const getContainerProps: UIPropGetter = (props = {}, ref = null) => ({\n ...props,\n ref,\n ...omitObject(rest, [\"aria-readonly\"]),\n })\n\n const getInputProps: UIPropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n ...pickObject(rest, formControlProperties),\n ...props,\n id,\n ref,\n type: \"hidden\",\n name,\n value: resolvedValue,\n required,\n disabled,\n readOnly,\n }),\n [disabled, id, name, readOnly, required, rest, resolvedValue],\n )\n\n const getSaturationSliderProps: UIPropGetter<\n \"input\",\n SaturationSliderProps,\n SaturationSliderProps\n > = useCallback(\n (props = {}, ref = null) => ({\n required,\n disabled,\n readOnly,\n isInvalid,\n ...props,\n ref,\n value: [h, s, v],\n onChange: handlerAll(props.onChange, ([, s, v]) => onChange({ s, v })),\n onChangeStart: handlerAll(props.onChangeStart, ([, s, v]) =>\n onChangeStart({ s, v }),\n ),\n onChangeEnd: handlerAll(props.onChangeEnd, ([, s, v]) =>\n onChangeEnd({ s, v }),\n ),\n }),\n [\n required,\n disabled,\n readOnly,\n isInvalid,\n h,\n s,\n v,\n onChange,\n onChangeStart,\n onChangeEnd,\n ],\n )\n\n const getHueSliderProps: UIPropGetter<\n \"input\",\n HueSliderProps,\n HueSliderProps\n > = useCallback(\n (props = {}, ref = null) => ({\n required,\n disabled,\n readOnly,\n isInvalid,\n ...props,\n ref,\n value: h,\n onChange: handlerAll(props.onChange, (h) => onChange({ h })),\n onChangeStart: handlerAll(props.onChangeStart, (h) =>\n onChangeStart({ h }),\n ),\n onChangeEnd: handlerAll(props.onChangeEnd, (h) => onChangeEnd({ h })),\n }),\n [\n required,\n disabled,\n readOnly,\n isInvalid,\n h,\n onChange,\n onChangeStart,\n onChangeEnd,\n ],\n )\n\n const getAlphaSliderProps: UIPropGetter<\n \"input\",\n AlphaSliderProps,\n AlphaSliderProps\n > = useCallback(\n (props = {}, ref = null) => ({\n required,\n disabled,\n readOnly,\n isInvalid,\n ...props,\n ref,\n value: a,\n color: hsvTo([h, s, v, a], fallbackValue)(formatRef.current),\n onChange: handlerAll(props.onChange, (a) => onChange({ a })),\n onChangeStart: handlerAll(props.onChangeStart, (a) =>\n onChangeStart({ a }),\n ),\n onChangeEnd: handlerAll(props.onChangeEnd, (a) => onChangeEnd({ a })),\n }),\n [\n fallbackValue,\n required,\n disabled,\n readOnly,\n isInvalid,\n formatRef,\n h,\n s,\n v,\n a,\n onChange,\n onChangeStart,\n onChangeEnd,\n ],\n )\n\n const getChannelProps: RequiredUIPropGetter<\n \"input\",\n Merge<InputProps, { space: Space }>,\n InputProps\n > = useCallback(\n ({ space, ...props }, ref = null) => {\n return {\n required,\n disabled,\n readOnly,\n isInvalid,\n ...props,\n ref,\n type: \"number\",\n step: 1,\n onChange: handlerAll(props.onChange, (ev) =>\n onChannelChange(ev, space),\n ),\n } as Dict\n },\n [required, disabled, readOnly, isInvalid, onChannelChange],\n )\n\n const getEyeDropperProps: UIPropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n disabled,\n \"aria-label\": \"Pick a color\",\n ...props,\n ref,\n onClick: handlerAll(props.onClick, onEyeDropperClick),\n }),\n [disabled, onEyeDropperClick],\n )\n\n const getSwatchProps: UIPropGetter<\n \"div\",\n ColorSwatchProps,\n ColorSwatchProps\n > = useCallback(\n ({ color, ...props } = {}, ref = null) => ({\n \"aria-label\": `Select ${color} as the color`,\n disabled,\n readOnly,\n ...props,\n ref,\n color,\n onClick: handlerAll(props.onClick, () => {\n if (!isString(color)) return\n\n onSwatchClick?.(color)\n onChange(color)\n onChangeEnd(color)\n }),\n }),\n [disabled, readOnly, onSwatchClick, onChange, onChangeEnd],\n )\n\n return {\n value: resolvedValue,\n onChange,\n eyeDropperSupported,\n withAlpha,\n isInteractive,\n disabled,\n readOnly,\n channels,\n getContainerProps,\n getInputProps,\n getSaturationSliderProps,\n getHueSliderProps,\n getAlphaSliderProps,\n getEyeDropperProps,\n getChannelProps,\n getSwatchProps,\n }\n}\n\nexport type UseColorSelectorReturn = ReturnType<typeof useColorSelector>\n"],"mappings":"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","names":["h","s","a","channels","value","v","props"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/color-swatch.tsx"],"sourcesContent":["import {\n ui,\n forwardRef,\n omitThemeProps,\n useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport type {\n CSSUIObject,\n CSSUIProps,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\n\nconst defaultOverlays = (\n background: CSSUIProps[\"color\"],\n withShadow: boolean,\n): HTMLUIProps<\"div\">[] => {\n let overlays: HTMLUIProps<\"div\">[] = [\n {\n bgImage:\n \"linear-gradient(45deg, var(--ui-checkers) 25%, transparent 25%), linear-gradient(-45deg, var(--ui-checkers) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--ui-checkers) 75%), linear-gradient(-45deg, var(--ui-body) 75%, var(--ui-checkers) 75%)\",\n bgSize: `8px 8px`,\n bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n var: [\n {\n __prefix: \"ui\",\n name: \"checkers\",\n token: \"colors\",\n value: [\"blackAlpha.300\", \"whiteAlpha.300\"],\n },\n {\n __prefix: \"ui\",\n name: \"body\",\n token: \"colors\",\n value: [\"whiteAlpha.500\", \"blackAlpha.500\"],\n },\n ],\n },\n { background },\n ]\n\n if (withShadow)\n overlays = [\n ...overlays,\n {\n boxShadow: `rgba(0, 0, 0, .1) 0 0 0 1px inset, rgb(0, 0, 0, .15) 0 0 4px inset`,\n },\n ]\n\n return overlays\n}\n\ntype ColorSwatchOptions = {\n /**\n * The color used for the swatch element.\n *\n * @default \"#ffffff00\"\n */\n color?: CSSUIProps[\"color\"]\n /**\n * The overlay used for the swatch element.\n */\n overlays?: HTMLUIProps<\"div\">[]\n /**\n * If `true`, the swatch element has an inner `box-shadow`.\n *\n * @default true\n */\n withShadow?: boolean\n /**\n * If `true`, the color swatch will be perfectly round. Else, it'll be slightly round.\n *\n * @default false\n */\n isRounded?: boolean\n}\n\nexport type ColorSwatchProps = Omit<HTMLUIProps<\"div\">, \"color\"> &\n ThemeProps<\"ColorSwatch\"> &\n ColorSwatchOptions\n\n/**\n * `ColorSwatch` is a component that displays color samples.\n *\n * @see Docs https://yamada-ui.com/components/data-display/color-swatch\n */\nexport const ColorSwatch = forwardRef<ColorSwatchProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"ColorSwatch\", props)\n const {\n className,\n color = \"#ffffff00\",\n withShadow = true,\n overlays = defaultOverlays(color, withShadow),\n isRounded,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const css: CSSUIObject = {\n position: \"relative\",\n _before: {\n content: `\"\"`,\n display: \"block\",\n h: 0,\n pb: \"100%\",\n },\n \"& > *\": {\n overflow: \"hidden\",\n position: \"absolute\",\n top: \"0\",\n right: \"0\",\n bottom: \"0\",\n left: \"0\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n w: \"100%\",\n h: \"100%\",\n },\n ...styles.container,\n ...__css,\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-color-swatch\", className)}\n {...(isRounded ? { rounded: \"fallback(full, 9999px)\" } : {})}\n __css={css}\n {...rest}\n >\n <ui.div {...(isRounded ? { rounded: \"fallback(full, 9999px)\" } : {})}>\n {overlays.map((props, index) => (\n <ui.div\n key={index}\n __css={{\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n ...styles.overlay,\n }}\n {...(isRounded ? { rounded: \"fallback(full, 9999px)\" } : {})}\n {...props}\n />\n ))}\n </ui.div>\n </ui.div>\n )\n})\n"],"mappings":";;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAOP,SAAS,UAAU;AA0HT;AAxHV,IAAM,kBAAkB,CACtB,YACA,eACyB;AACzB,MAAI,WAAiC;AAAA,IACnC;AAAA,MACE,SACE;AAAA,MACF,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,KAAK;AAAA,QACH;AAAA,UACE,UAAU;AAAA,UACV,MAAM;AAAA,UACN,OAAO;AAAA,UACP,OAAO,CAAC,kBAAkB,gBAAgB;AAAA,QAC5C;AAAA,QACA;AAAA,UACE,UAAU;AAAA,UACV,MAAM;AAAA,UACN,OAAO;AAAA,UACP,OAAO,CAAC,kBAAkB,gBAAgB;AAAA,QAC5C;AAAA,MACF;AAAA,IACF;AAAA,IACA,EAAE,WAAW;AAAA,EACf;AAEA,MAAI;AACF,eAAW;AAAA,MACT,GAAG;AAAA,MACH;AAAA,QACE,WAAW;AAAA,MACb;AAAA,IACF;AAEF,SAAO;AACT;AAoCO,IAAM,cAAc,WAAoC,CAAC,OAAO,QAAQ;AAC7E,QAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,eAAe,KAAK;AACzE,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,WAAW,gBAAgB,OAAO,UAAU;AAAA,IAC5C;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAE9B,QAAM,MAAmB;AAAA,IACvB,UAAU;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,GAAG;AAAA,MACH,IAAI;AAAA,IACN;AAAA,IACA,SAAS;AAAA,MACP,UAAU;AAAA,MACV,UAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,GAAG,OAAO;AAAA,IACV,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,MACzC,GAAI,YAAY,EAAE,SAAS,yBAAyB,IAAI,CAAC;AAAA,MAC1D,OAAO;AAAA,MACN,GAAG;AAAA,MAEJ,8BAAC,GAAG,KAAH,EAAQ,GAAI,YAAY,EAAE,SAAS,yBAAyB,IAAI,CAAC,GAC/D,mBAAS,IAAI,CAACA,QAAO,UACpB;AAAA,QAAC,GAAG;AAAA,QAAH;AAAA,UAEC,OAAO;AAAA,YACL,UAAU;AAAA,YACV,KAAK;AAAA,YACL,MAAM;AAAA,YACN,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,GAAG,OAAO;AAAA,UACZ;AAAA,UACC,GAAI,YAAY,EAAE,SAAS,yBAAyB,IAAI,CAAC;AAAA,UACzD,GAAGA;AAAA;AAAA,QAVC;AAAA,MAWP,CACD,GACH;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["props"]}
|
|
@@ -6,13 +6,13 @@ import {
|
|
|
6
6
|
} from "./chunk-PVPQQB6L.mjs";
|
|
7
7
|
import {
|
|
8
8
|
ColorSelector
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-YXO5RKWB.mjs";
|
|
10
10
|
import {
|
|
11
11
|
EyeDropperIcon
|
|
12
|
-
} from "./chunk-
|
|
12
|
+
} from "./chunk-RU5PBK5I.mjs";
|
|
13
13
|
import {
|
|
14
14
|
ColorSwatch
|
|
15
|
-
} from "./chunk-
|
|
15
|
+
} from "./chunk-7IS4DYY4.mjs";
|
|
16
16
|
|
|
17
17
|
// src/color-picker.tsx
|
|
18
18
|
import {
|
|
@@ -227,4 +227,4 @@ var ColorPickerEyeDropper = forwardRef(
|
|
|
227
227
|
export {
|
|
228
228
|
ColorPicker
|
|
229
229
|
};
|
|
230
|
-
//# sourceMappingURL=chunk-
|
|
230
|
+
//# sourceMappingURL=chunk-KJXPM5WS.mjs.map
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
ColorSelectorEyeDropper
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-RU5PBK5I.mjs";
|
|
5
5
|
import {
|
|
6
6
|
ColorSelectorSliders
|
|
7
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-RRGOTSTI.mjs";
|
|
8
8
|
import {
|
|
9
9
|
ColorSwatch
|
|
10
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-7IS4DYY4.mjs";
|
|
11
11
|
import {
|
|
12
12
|
useColorSelectorContext
|
|
13
|
-
} from "./chunk-
|
|
13
|
+
} from "./chunk-3LSKYAZH.mjs";
|
|
14
14
|
|
|
15
15
|
// src/color-selector-body.tsx
|
|
16
16
|
import { forwardRef, ui } from "@yamada-ui/core";
|
|
@@ -72,4 +72,4 @@ var ColorSelectorBody = forwardRef(
|
|
|
72
72
|
export {
|
|
73
73
|
ColorSelectorBody
|
|
74
74
|
};
|
|
75
|
-
//# sourceMappingURL=chunk-
|
|
75
|
+
//# sourceMappingURL=chunk-NXOBXSPP.mjs.map
|
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
} from "./chunk-5PEJ23VN.mjs";
|
|
8
8
|
import {
|
|
9
9
|
useColorSelectorContext
|
|
10
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-3LSKYAZH.mjs";
|
|
11
11
|
|
|
12
12
|
// src/color-selector-sliders.tsx
|
|
13
13
|
import { forwardRef, ui } from "@yamada-ui/core";
|
|
@@ -64,4 +64,4 @@ var ColorSelectorSliders = forwardRef(
|
|
|
64
64
|
export {
|
|
65
65
|
ColorSelectorSliders
|
|
66
66
|
};
|
|
67
|
-
//# sourceMappingURL=chunk-
|
|
67
|
+
//# sourceMappingURL=chunk-RRGOTSTI.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
useColorSelectorContext
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-3LSKYAZH.mjs";
|
|
5
5
|
|
|
6
6
|
// src/color-selector-eye-dropper.tsx
|
|
7
7
|
import { IconButton } from "@yamada-ui/button";
|
|
@@ -53,4 +53,4 @@ export {
|
|
|
53
53
|
ColorSelectorEyeDropper,
|
|
54
54
|
EyeDropperIcon
|
|
55
55
|
};
|
|
56
|
-
//# sourceMappingURL=chunk-
|
|
56
|
+
//# sourceMappingURL=chunk-RU5PBK5I.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
useColorSelectorContext
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-3LSKYAZH.mjs";
|
|
5
5
|
|
|
6
6
|
// src/color-selector-channels.tsx
|
|
7
7
|
import { forwardRef, ui } from "@yamada-ui/core";
|
|
@@ -61,4 +61,4 @@ export {
|
|
|
61
61
|
ColorSelectorChannels,
|
|
62
62
|
ColorSelectorChannel
|
|
63
63
|
};
|
|
64
|
-
//# sourceMappingURL=chunk-
|
|
64
|
+
//# sourceMappingURL=chunk-WXU77UZN.mjs.map
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
ColorSwatch
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-7IS4DYY4.mjs";
|
|
5
5
|
import {
|
|
6
6
|
useColorSelectorContext
|
|
7
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-3LSKYAZH.mjs";
|
|
8
8
|
|
|
9
9
|
// src/color-selector-swatches.tsx
|
|
10
10
|
import { forwardRef, ui } from "@yamada-ui/core";
|
|
@@ -67,4 +67,4 @@ var ColorSelectorSwatches = forwardRef(
|
|
|
67
67
|
export {
|
|
68
68
|
ColorSelectorSwatches
|
|
69
69
|
};
|
|
70
|
-
//# sourceMappingURL=chunk-
|
|
70
|
+
//# sourceMappingURL=chunk-YSD4GTTV.mjs.map
|
|
@@ -4,17 +4,17 @@ import {
|
|
|
4
4
|
} from "./chunk-VZQ3PFLT.mjs";
|
|
5
5
|
import {
|
|
6
6
|
ColorSelectorBody
|
|
7
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-NXOBXSPP.mjs";
|
|
8
8
|
import {
|
|
9
9
|
ColorSelectorChannels
|
|
10
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-WXU77UZN.mjs";
|
|
11
11
|
import {
|
|
12
12
|
ColorSelectorSwatches
|
|
13
|
-
} from "./chunk-
|
|
13
|
+
} from "./chunk-YSD4GTTV.mjs";
|
|
14
14
|
import {
|
|
15
15
|
ColorSelectorProvider,
|
|
16
16
|
useColorSelector
|
|
17
|
-
} from "./chunk-
|
|
17
|
+
} from "./chunk-3LSKYAZH.mjs";
|
|
18
18
|
|
|
19
19
|
// src/color-selector.tsx
|
|
20
20
|
import {
|
|
@@ -127,4 +127,4 @@ var ColorSelector = forwardRef(
|
|
|
127
127
|
export {
|
|
128
128
|
ColorSelector
|
|
129
129
|
};
|
|
130
|
-
//# sourceMappingURL=chunk-
|
|
130
|
+
//# sourceMappingURL=chunk-YXO5RKWB.mjs.map
|
package/dist/color-picker.js
CHANGED
|
@@ -402,7 +402,7 @@ var useColorSelector = ({
|
|
|
402
402
|
ref,
|
|
403
403
|
color,
|
|
404
404
|
onClick: (0, import_utils.handlerAll)(props2.onClick, () => {
|
|
405
|
-
if (!color) return;
|
|
405
|
+
if (!(0, import_utils.isString)(color)) return;
|
|
406
406
|
onSwatchClick == null ? void 0 : onSwatchClick(color);
|
|
407
407
|
onChange(color);
|
|
408
408
|
onChangeEnd(color);
|