@yamada-ui/color-picker 1.4.8 → 1.4.9-dev-20241109081144

Sign up to get free protection for your applications and to get access to all the features.
Files changed (49) hide show
  1. package/dist/alpha-slider.d.mts +1 -1
  2. package/dist/alpha-slider.d.ts +1 -1
  3. package/dist/alpha-slider.js +98 -45
  4. package/dist/alpha-slider.js.map +1 -1
  5. package/dist/alpha-slider.mjs +2 -2
  6. package/dist/{chunk-XL5VWGU4.mjs → chunk-FP3X3PED.mjs} +78 -43
  7. package/dist/chunk-FP3X3PED.mjs.map +1 -0
  8. package/dist/{chunk-CZCTI6T2.mjs → chunk-HJMXAALX.mjs} +2 -2
  9. package/dist/{chunk-62A7F566.mjs → chunk-HPP26MVU.mjs} +3 -3
  10. package/dist/{chunk-CAVDEKGO.mjs → chunk-LJHUX2RB.mjs} +2 -2
  11. package/dist/{chunk-APTJWP7T.mjs → chunk-OJVCLBAG.mjs} +2 -2
  12. package/dist/{chunk-F5EYME2W.mjs → chunk-SGAM4TJL.mjs} +26 -7
  13. package/dist/chunk-SGAM4TJL.mjs.map +1 -0
  14. package/dist/chunk-WZEWATJ3.mjs +139 -0
  15. package/dist/chunk-WZEWATJ3.mjs.map +1 -0
  16. package/dist/color-picker.js +170 -80
  17. package/dist/color-picker.js.map +1 -1
  18. package/dist/color-picker.mjs +7 -7
  19. package/dist/color-selector-body.js +170 -80
  20. package/dist/color-selector-body.js.map +1 -1
  21. package/dist/color-selector-body.mjs +5 -5
  22. package/dist/color-selector-sliders.js +170 -80
  23. package/dist/color-selector-sliders.js.map +1 -1
  24. package/dist/color-selector-sliders.mjs +4 -4
  25. package/dist/color-selector.js +170 -80
  26. package/dist/color-selector.js.map +1 -1
  27. package/dist/color-selector.mjs +6 -6
  28. package/dist/hue-slider.d.mts +1 -1
  29. package/dist/hue-slider.d.ts +1 -1
  30. package/dist/hue-slider.js +95 -40
  31. package/dist/hue-slider.js.map +1 -1
  32. package/dist/hue-slider.mjs +2 -2
  33. package/dist/index.js +170 -80
  34. package/dist/index.js.map +1 -1
  35. package/dist/index.mjs +7 -7
  36. package/dist/use-color-slider.d.mts +7 -1
  37. package/dist/use-color-slider.d.ts +7 -1
  38. package/dist/use-color-slider.js +25 -5
  39. package/dist/use-color-slider.js.map +1 -1
  40. package/dist/use-color-slider.mjs +3 -1
  41. package/package.json +1 -1
  42. package/dist/chunk-7NWT5PKE.mjs +0 -102
  43. package/dist/chunk-7NWT5PKE.mjs.map +0 -1
  44. package/dist/chunk-F5EYME2W.mjs.map +0 -1
  45. package/dist/chunk-XL5VWGU4.mjs.map +0 -1
  46. /package/dist/{chunk-CZCTI6T2.mjs.map → chunk-HJMXAALX.mjs.map} +0 -0
  47. /package/dist/{chunk-62A7F566.mjs.map → chunk-HPP26MVU.mjs.map} +0 -0
  48. /package/dist/{chunk-CAVDEKGO.mjs.map → chunk-LJHUX2RB.mjs.map} +0 -0
  49. /package/dist/{chunk-APTJWP7T.mjs.map → chunk-OJVCLBAG.mjs.map} +0 -0
@@ -48,6 +48,7 @@ var useColorSlider = ({
48
48
  id,
49
49
  name,
50
50
  style: styleProp,
51
+ channel = "hue",
51
52
  defaultValue,
52
53
  max,
53
54
  min = 0,
@@ -264,6 +265,7 @@ var useColorSlider = ({
264
265
  "aria-valuemax": max,
265
266
  "aria-valuemin": min,
266
267
  "aria-valuenow": value,
268
+ "aria-valuetext": getAriaValueText(channel, value),
267
269
  "data-active": (0, import_utils.dataAttr)(isDragging && focusThumbOnChange),
268
270
  role: "slider",
269
271
  tabIndex: isInteractive && focusThumbOnChange ? 0 : void 0,
@@ -279,14 +281,15 @@ var useColorSlider = ({
279
281
  value,
280
282
  formControlProps,
281
283
  ariaReadonly,
282
- isInteractive,
283
- focusThumbOnChange,
284
- min,
285
284
  max,
285
+ min,
286
+ channel,
286
287
  isDragging,
287
- onKeyDown,
288
+ focusThumbOnChange,
289
+ isInteractive,
290
+ onBlurProp,
288
291
  onFocusProp,
289
- onBlurProp
292
+ onKeyDown
290
293
  ]
291
294
  );
292
295
  return {
@@ -297,9 +300,30 @@ var useColorSlider = ({
297
300
  getTrackProps
298
301
  };
299
302
  };
303
+ var getAriaValueText = (channel, value) => {
304
+ if (channel === "hue") {
305
+ return `${value}\xB0, ${getColorName(value)}`;
306
+ } else {
307
+ return `${value * 100}%`;
308
+ }
309
+ };
310
+ var getColorName = (hue) => {
311
+ if (hue < 30 || hue >= 330) return "Red";
312
+ if (hue < 90) return "Yellow";
313
+ if (hue < 150) return "Green";
314
+ if (hue < 210) return "Cyan";
315
+ if (hue < 270) return "Blue";
316
+ return "Magenta";
317
+ };
300
318
 
301
319
  // src/alpha-slider.tsx
302
320
  var import_jsx_runtime = require("react/jsx-runtime");
321
+ var [AlphaSliderProvider, useAlphaSlider] = (0, import_utils2.createContext)(
322
+ {
323
+ name: "SliderContext",
324
+ errorMessage: `useSliderContext returned is 'undefined'. Seems you forgot to wrap the components in "<AlphaSlider />" `
325
+ }
326
+ );
303
327
  var defaultOverlays = (color, min, max, withShadow) => {
304
328
  let overlays = [
305
329
  {
@@ -353,14 +377,15 @@ var AlphaSlider = (0, import_core.forwardRef)(
353
377
  min,
354
378
  step: 0.01,
355
379
  thumbColor: "transparent",
356
- ...computedProps
380
+ ...computedProps,
381
+ channel: "alpha"
357
382
  });
358
383
  const css = {
359
384
  position: "relative",
360
385
  ...styles.container,
361
386
  ...__css
362
387
  };
363
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
388
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlphaSliderProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
364
389
  import_core.ui.div,
365
390
  {
366
391
  className: (0, import_utils2.cx)("ui-alpha-slider", className),
@@ -368,55 +393,87 @@ var AlphaSlider = (0, import_core.forwardRef)(
368
393
  ...getContainerProps(),
369
394
  children: [
370
395
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.input, { ...getInputProps(inputProps, ref) }),
371
- overlays.map((props2, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
372
- import_core.ui.div,
373
- {
374
- className: "ui-alpha-slider__overlay",
375
- __css: {
376
- bottom: 0,
377
- left: 0,
378
- position: "absolute",
379
- right: 0,
380
- top: 0,
381
- ...styles.overlay
382
- },
383
- ...props2
384
- },
385
- index
386
- )),
387
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
388
- import_core.ui.div,
389
- {
390
- className: "ui-alpha-slider__track",
391
- __css: {
392
- h: "100%",
393
- position: "relative",
394
- w: "100%",
395
- ...styles.track
396
- },
397
- ...getTrackProps(trackProps),
398
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
399
- import_core.ui.div,
400
- {
401
- className: "ui-alpha-slider__thumb",
402
- __css: { ...styles.thumb },
403
- ...getThumbProps(thumbProps)
404
- }
405
- )
406
- }
407
- )
396
+ overlays.map((props2, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlphaSliderOverlay, { ...props2 }, index)),
397
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlphaSliderTrack, { ...getTrackProps(trackProps), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlphaSliderThumb, { ...getThumbProps(thumbProps) }) })
408
398
  ]
409
399
  }
410
- );
400
+ ) });
411
401
  }
412
402
  );
413
403
  AlphaSlider.displayName = "AlphaSlider";
414
404
  AlphaSlider.__ui__ = "AlphaSlider";
405
+ var AlphaSliderOverlay = (0, import_core.forwardRef)(
406
+ ({ className, ...rest }, ref) => {
407
+ const { styles } = useAlphaSlider();
408
+ const css = {
409
+ bottom: 0,
410
+ left: 0,
411
+ position: "absolute",
412
+ right: 0,
413
+ top: 0,
414
+ ...styles.overlay
415
+ };
416
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
417
+ import_core.ui.div,
418
+ {
419
+ ref,
420
+ className: (0, import_utils2.cx)("ui-alpha-slider__overlay", className),
421
+ __css: css,
422
+ ...rest
423
+ }
424
+ );
425
+ }
426
+ );
427
+ AlphaSliderOverlay.displayName = "AlphaSliderOverlay";
428
+ AlphaSliderOverlay.__ui__ = "AlphaSliderOverlay";
429
+ var AlphaSliderTrack = (0, import_core.forwardRef)(
430
+ ({ className, ...rest }, ref) => {
431
+ const { styles } = useAlphaSlider();
432
+ const css = {
433
+ h: "100%",
434
+ position: "relative",
435
+ w: "100%",
436
+ ...styles.track
437
+ };
438
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
439
+ import_core.ui.div,
440
+ {
441
+ ref,
442
+ className: (0, import_utils2.cx)("ui-alpha-slider__track", className),
443
+ __css: css,
444
+ ...rest
445
+ }
446
+ );
447
+ }
448
+ );
449
+ AlphaSliderTrack.displayName = "AlphaSliderTrack";
450
+ AlphaSliderTrack.__ui__ = "AlphaSliderTrack";
451
+ var AlphaSliderThumb = (0, import_core.forwardRef)(
452
+ ({ className, ...rest }, ref) => {
453
+ const { styles } = useAlphaSlider();
454
+ const css = { ...styles.thumb };
455
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
456
+ import_core.ui.div,
457
+ {
458
+ ref,
459
+ className: (0, import_utils2.cx)("ui-alpha-slider__thumb", className),
460
+ __css: css,
461
+ ...rest
462
+ }
463
+ );
464
+ }
465
+ );
466
+ AlphaSliderThumb.displayName = "AlphaSliderThumb";
467
+ AlphaSliderThumb.__ui__ = "AlphaSliderThumb";
415
468
 
416
469
  // src/hue-slider.tsx
417
470
  var import_core2 = require("@yamada-ui/core");
418
471
  var import_utils3 = require("@yamada-ui/utils");
419
472
  var import_jsx_runtime2 = require("react/jsx-runtime");
473
+ var [HueSliderProvider, useHueSlider] = (0, import_utils3.createContext)({
474
+ name: "SliderContext",
475
+ errorMessage: `useSliderContext returned is 'undefined'. Seems you forgot to wrap the components in "<HueSlider />" `
476
+ });
420
477
  var defaultOverlays2 = (min, max, withShadow) => {
421
478
  let overlays = [
422
479
  {
@@ -448,13 +505,13 @@ var HueSlider = (0, import_core2.forwardRef)((props, ref) => {
448
505
  __css,
449
506
  ...computedProps
450
507
  } = (0, import_core2.omitThemeProps)(mergedProps);
451
- const { getContainerProps, getInputProps, getThumbProps, getTrackProps } = useColorSlider({ max, min, step: 1, ...computedProps });
508
+ const { getContainerProps, getInputProps, getThumbProps, getTrackProps } = useColorSlider({ max, min, step: 1, ...computedProps, channel: "hue" });
452
509
  const css = {
453
510
  position: "relative",
454
511
  ...styles.container,
455
512
  ...__css
456
513
  };
457
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
514
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HueSliderProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
458
515
  import_core2.ui.div,
459
516
  {
460
517
  className: (0, import_utils3.cx)("ui-hue-slider", className),
@@ -462,44 +519,77 @@ var HueSlider = (0, import_core2.forwardRef)((props, ref) => {
462
519
  ...getContainerProps(),
463
520
  children: [
464
521
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.input, { ...getInputProps(inputProps, ref) }),
465
- overlays.map((props2, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
466
- import_core2.ui.div,
467
- {
468
- className: "ui-hue-slider__overlay",
469
- __css: {
470
- bottom: 0,
471
- left: 0,
472
- position: "absolute",
473
- right: 0,
474
- top: 0,
475
- ...styles.overlay
476
- },
477
- ...props2
478
- },
479
- index
480
- )),
481
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
482
- import_core2.ui.div,
483
- {
484
- className: "ui-hue-slider__track",
485
- __css: { h: "100%", position: "relative", w: "100%", ...styles.track },
486
- ...getTrackProps(trackProps),
487
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
488
- import_core2.ui.div,
489
- {
490
- className: "ui-hue-slider__thumb",
491
- __css: { ...styles.thumb },
492
- ...getThumbProps(thumbProps)
493
- }
494
- )
495
- }
496
- )
522
+ overlays.map((props2, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HueSliderOverlay, { ...props2 }, index)),
523
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HueSliderTrack, { ...getTrackProps(trackProps), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HueSliderThumb, { ...getThumbProps(thumbProps) }) })
497
524
  ]
498
525
  }
499
- );
526
+ ) });
500
527
  });
501
528
  HueSlider.displayName = "HueSlider";
502
529
  HueSlider.__ui__ = "HueSlider";
530
+ var HueSliderOverlay = (0, import_core2.forwardRef)(
531
+ ({ className, ...rest }, ref) => {
532
+ const { styles } = useHueSlider();
533
+ const css = {
534
+ bottom: 0,
535
+ left: 0,
536
+ position: "absolute",
537
+ right: 0,
538
+ top: 0,
539
+ ...styles.overlay
540
+ };
541
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
542
+ import_core2.ui.div,
543
+ {
544
+ ref,
545
+ className: (0, import_utils3.cx)("ui-hue-slider__overlay", className),
546
+ __css: css,
547
+ ...rest
548
+ }
549
+ );
550
+ }
551
+ );
552
+ HueSliderOverlay.displayName = "HueSliderOverlay";
553
+ HueSliderOverlay.__ui__ = "HueSliderOverlay";
554
+ var HueSliderTrack = (0, import_core2.forwardRef)(
555
+ ({ className, ...rest }, ref) => {
556
+ const { styles } = useHueSlider();
557
+ const css = {
558
+ h: "100%",
559
+ position: "relative",
560
+ w: "100%",
561
+ ...styles.track
562
+ };
563
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
564
+ import_core2.ui.div,
565
+ {
566
+ ref,
567
+ className: (0, import_utils3.cx)("ui-hue-slider__track", className),
568
+ __css: css,
569
+ ...rest
570
+ }
571
+ );
572
+ }
573
+ );
574
+ HueSliderTrack.displayName = "HueSliderTrack";
575
+ HueSliderTrack.__ui__ = "HueSliderTrack";
576
+ var HueSliderThumb = (0, import_core2.forwardRef)(
577
+ ({ className, ...rest }, ref) => {
578
+ const { styles } = useHueSlider();
579
+ const css = { ...styles.thumb };
580
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
581
+ import_core2.ui.div,
582
+ {
583
+ ref,
584
+ className: (0, import_utils3.cx)("ui-hue-slider__thumb", className),
585
+ __css: css,
586
+ ...rest
587
+ }
588
+ );
589
+ }
590
+ );
591
+ HueSliderThumb.displayName = "HueSliderThumb";
592
+ HueSliderThumb.__ui__ = "HueSliderThumb";
503
593
 
504
594
  // src/use-color-selector.ts
505
595
  var import_form_control2 = require("@yamada-ui/form-control");
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/color-selector-sliders.tsx","../src/alpha-slider.tsx","../src/use-color-slider.ts","../src/hue-slider.tsx","../src/use-color-selector.ts"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { ForwardedRef } from \"react\"\nimport type { AlphaSliderProps } from \"./alpha-slider\"\nimport type { HueSliderProps } from \"./hue-slider\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { AlphaSlider } from \"./alpha-slider\"\nimport { HueSlider } from \"./hue-slider\"\nimport { useColorSelectorContext } from \"./use-color-selector\"\n\ninterface ColorSelectorSlidersOptions {\n /**\n * Ref for the alpha slider component.\n */\n alphaSliderRef?: ForwardedRef<HTMLInputElement>\n /**\n * Ref for the hue slider component.\n */\n hueSliderRef?: ForwardedRef<HTMLInputElement>\n /**\n * Props for the alpha slider component.\n */\n alphaSliderProps?: Omit<AlphaSliderProps, \"defaultValue\" | \"value\">\n /**\n * Props for the hue slider component.\n */\n hueSliderProps?: Omit<HueSliderProps, \"defaultValue\" | \"value\">\n}\n\nexport interface ColorSelectorSlidersProps\n extends Omit<HTMLUIProps, \"children\">,\n ColorSelectorSlidersOptions {}\n\nexport const ColorSelectorSliders = forwardRef<\n ColorSelectorSlidersProps,\n \"div\"\n>(\n (\n {\n className,\n alphaSliderRef,\n hueSliderRef,\n alphaSliderProps,\n hueSliderProps,\n ...rest\n },\n ref,\n ) => {\n let { size, styles, withAlpha, getAlphaSliderProps, getHueSliderProps } =\n useColorSelectorContext()\n\n if (size === \"full\") size = \"lg\"\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: \"column\",\n ...styles.sliders,\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-color-selector__sliders\", className)}\n __css={css}\n {...rest}\n >\n <HueSlider\n className=\"ui-color-selector__hue-slider\"\n size={size}\n __css={{ ...styles.hueSlider }}\n {...getHueSliderProps(hueSliderProps, hueSliderRef)}\n />\n\n {withAlpha ? (\n <AlphaSlider\n className=\"ui-color-selector__alpha-slider\"\n size={size}\n __css={{ ...styles.alphaSlider }}\n {...getAlphaSliderProps(alphaSliderProps, alphaSliderRef)}\n />\n ) : null}\n </ui.div>\n )\n },\n)\n\nColorSelectorSliders.displayName = \"ColorSelectorSliders\"\nColorSelectorSliders.__ui__ = \"ColorSelectorSliders\"\n","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, cx } from \"@yamada-ui/utils\"\nimport { useColorSlider } from \"./use-color-slider\"\n\nconst defaultOverlays = (\n color: string,\n min: number,\n max: number,\n withShadow: boolean,\n): HTMLUIProps[] => {\n let 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 = [\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\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, \"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 })\n\n const css: CSSUIObject = {\n position: \"relative\",\n ...styles.container,\n ...__css,\n }\n\n return (\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 <ui.div\n key={index}\n className=\"ui-alpha-slider__overlay\"\n __css={{\n bottom: 0,\n left: 0,\n position: \"absolute\",\n right: 0,\n top: 0,\n ...styles.overlay,\n }}\n {...props}\n />\n ))}\n\n <ui.div\n className=\"ui-alpha-slider__track\"\n __css={{\n h: \"100%\",\n position: \"relative\",\n w: \"100%\",\n ...styles.track,\n }}\n {...getTrackProps(trackProps)}\n >\n <ui.div\n className=\"ui-alpha-slider__thumb\"\n __css={{ ...styles.thumb }}\n {...getThumbProps(thumbProps)}\n />\n </ui.div>\n </ui.div>\n )\n },\n)\n\nAlphaSlider.displayName = \"AlphaSlider\"\nAlphaSlider.__ui__ = \"AlphaSlider\"\n","import type { CSSUIProps, HTMLUIProps, PropGetter } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { CSSProperties, KeyboardEvent, KeyboardEventHandler } from \"react\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useLatestRef } from \"@yamada-ui/use-latest-ref\"\nimport { usePanEvent } from \"@yamada-ui/use-pan-event\"\nimport { useSize } from \"@yamada-ui/use-size\"\nimport {\n clampNumber,\n dataAttr,\n handlerAll,\n mergeRefs,\n percentToValue,\n roundNumberToStep,\n splitObject,\n useCallbackRef,\n useUpdateEffect,\n valueToPercent,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useRef, useState } from \"react\"\n\ninterface UseColorSliderOptions {\n /**\n * The maximum allowed value of the slider. Cannot be less than min.\n */\n max: number\n /**\n * The minimum allowed value of the slider. Cannot be greater than max.\n */\n min: number\n /**\n * The base `id` to use for the slider.\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 initial value of the slider.\n */\n defaultValue?: number\n /**\n * If `false`, the slider handle will not capture focus when value changes.\n *\n * @default true\n */\n focusThumbOnChange?: boolean\n /**\n * The step in which increments or decrements have to be made.\n *\n * @default 1\n */\n step?: number\n /**\n * The CSS `background` property. Used in `background` of thumb element.\n */\n thumbColor?: CSSUIProps[\"bg\"]\n /**\n * The value of the slider.\n */\n value?: number\n /**\n * Function called whenever the slider value changes.\n */\n onChange?: (value: number) => void\n /**\n * Function called when the user is done selecting a new value.\n */\n onChangeEnd?: (value: number) => void\n /**\n * Function called when the user starts selecting a new value.\n */\n onChangeStart?: (value: number) => void\n}\n\nexport interface UseColorSliderProps\n extends Omit<HTMLUIProps, \"defaultValue\" | \"onChange\">,\n UseColorSliderOptions,\n FormControlOptions {}\n\nexport const useColorSlider = ({\n focusThumbOnChange = true,\n ...props\n}: UseColorSliderProps) => {\n if (!focusThumbOnChange) props.isReadOnly = true\n\n const {\n id,\n name,\n style: styleProp,\n defaultValue,\n max,\n min = 0,\n step = 1,\n thumbColor,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd: onChangeEndProp,\n onChangeStart: onChangeStartProp,\n ...rest\n } = useFormControlProps(props)\n const [\n {\n \"aria-readonly\": ariaReadonly,\n disabled,\n readOnly,\n required,\n onBlur: onBlurProp,\n onFocus: onFocusProp,\n ...formControlProps\n },\n containerProps,\n ] = splitObject(rest, formControlProperties)\n\n const onChangeStart = useCallbackRef(onChangeStartProp)\n const onChangeEnd = useCallbackRef(onChangeEndProp)\n\n const [computedValue, setValue] = useControllableState({\n defaultValue: defaultValue ?? min + (max - min) / 2,\n value: valueProp,\n onChange: onChangeProp,\n })\n const value = clampNumber(computedValue, min, max)\n const thumbPercent = valueToPercent(value, min, max)\n const [isDragging, setDragging] = useState(false)\n const isInteractive = !(disabled || readOnly)\n\n const oneStep = step || (max - min) / 100\n const tenStep = (max - min) / 10\n\n const containerRef = useRef<HTMLElement>(null)\n const trackRef = useRef<HTMLElement>(null)\n const thumbRef = useRef<HTMLElement>(null)\n const latestRef = useLatestRef({\n eventSource: null as \"keyboard\" | \"pointer\" | null,\n focusThumbOnChange,\n isInteractive,\n max,\n min,\n step,\n value,\n })\n\n const thumbSize = useSize(thumbRef)\n\n const getValueFromPointer = useCallback(\n (ev: any) => {\n if (!trackRef.current) return\n\n const { max, min, step } = latestRef.current\n\n latestRef.current.eventSource = \"pointer\"\n\n const { left, width } = trackRef.current.getBoundingClientRect()\n const { clientX } = ev.touches?.[0] ?? ev\n\n let percent = (clientX - left) / width\n\n let nextValue = percentToValue(percent, min, max)\n\n if (step) nextValue = parseFloat(roundNumberToStep(nextValue, min, step))\n\n nextValue = clampNumber(nextValue, min, max)\n\n return nextValue\n },\n [latestRef],\n )\n\n const setValueFromPointer = (ev: MouseEvent | PointerEvent | TouchEvent) => {\n const { value } = latestRef.current\n const nextValue = getValueFromPointer(ev)\n\n if (nextValue != null && nextValue !== value) setValue(nextValue)\n }\n\n const focusThumb = useCallback(() => {\n const { focusThumbOnChange } = latestRef.current\n\n if (focusThumbOnChange) setTimeout(() => thumbRef.current?.focus())\n }, [latestRef])\n\n const constrain = useCallback(\n (value: number) => {\n const { isInteractive, max, min } = latestRef.current\n\n if (!isInteractive) return\n\n value = parseFloat(roundNumberToStep(value, min, oneStep))\n value = clampNumber(value, min, max)\n\n setValue(value)\n },\n [setValue, latestRef, oneStep],\n )\n\n const stepUp = useCallback(\n (step = oneStep) => constrain(value + step),\n [constrain, value, oneStep],\n )\n\n const stepDown = useCallback(\n (step = oneStep) => constrain(value - step),\n [constrain, value, oneStep],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLElement>) => {\n const { max, min } = latestRef.current\n\n const actions: { [key: string]: KeyboardEventHandler } = {\n ArrowDown: () => stepDown(),\n ArrowLeft: () => stepDown(),\n ArrowRight: () => stepUp(),\n ArrowUp: () => stepUp(),\n End: () => constrain(max),\n Home: () => constrain(min),\n PageDown: () => stepDown(tenStep),\n PageUp: () => stepUp(tenStep),\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n ev.stopPropagation()\n\n action(ev)\n\n latestRef.current.eventSource = \"keyboard\"\n },\n [constrain, latestRef, stepDown, stepUp, tenStep],\n )\n\n usePanEvent(containerRef, {\n onMove: (ev) => {\n const { isInteractive } = latestRef.current\n\n if (!isInteractive) return\n\n setValueFromPointer(ev)\n },\n onSessionEnd: () => {\n const { isInteractive, value } = latestRef.current\n\n if (!isInteractive) return\n\n setDragging(false)\n onChangeEnd(value)\n },\n onSessionStart: (ev) => {\n const { isInteractive, value } = latestRef.current\n\n if (!isInteractive) return\n\n setDragging(true)\n focusThumb()\n setValueFromPointer(ev)\n onChangeStart(value)\n },\n })\n\n useUpdateEffect(() => {\n const { eventSource, value } = latestRef.current\n\n if (eventSource === \"keyboard\") onChangeEnd(value)\n }, [value, onChangeEnd])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n const { width: w } = thumbSize ?? { width: 0 }\n\n const style: CSSProperties = {\n ...props.style,\n ...styleProp,\n paddingInline: `${w / 2}px`,\n }\n\n return {\n ...props,\n ...formControlProps,\n ...containerProps,\n ref: mergeRefs(ref, containerRef),\n style,\n tabIndex: -1,\n }\n },\n [containerProps, formControlProps, styleProp, thumbSize],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n \"aria-readonly\": ariaReadonly,\n ...props,\n id,\n ref,\n type: \"hidden\",\n name,\n disabled,\n readOnly,\n required,\n value,\n }),\n [\n ariaReadonly,\n disabled,\n formControlProps,\n id,\n name,\n readOnly,\n required,\n value,\n ],\n )\n\n const getTrackProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, trackRef),\n }),\n [formControlProps],\n )\n\n const getThumbProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n const n = thumbPercent\n const { width: w } = thumbSize ?? { width: 0 }\n\n const style: CSSProperties = {\n ...props.style,\n left: `calc(${n}% - ${w / 2}px)`,\n position: \"absolute\",\n touchAction: \"none\",\n userSelect: \"none\",\n }\n\n return {\n \"aria-label\": \"Slider thumb\",\n bg: thumbColor ?? `hsl(${value}, 100%, 50%)`,\n ...formControlProps,\n \"aria-readonly\": ariaReadonly,\n ...props,\n ref: mergeRefs(ref, thumbRef),\n style,\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n \"aria-valuenow\": value,\n \"data-active\": dataAttr(isDragging && focusThumbOnChange),\n role: \"slider\",\n tabIndex: isInteractive && focusThumbOnChange ? 0 : undefined,\n onBlur: handlerAll(props.onBlur, onBlurProp),\n onFocus: handlerAll(props.onFocus, onFocusProp),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }\n },\n [\n thumbPercent,\n thumbSize,\n thumbColor,\n value,\n formControlProps,\n ariaReadonly,\n isInteractive,\n focusThumbOnChange,\n min,\n max,\n isDragging,\n onKeyDown,\n onFocusProp,\n onBlurProp,\n ],\n )\n\n return {\n value,\n getContainerProps,\n getInputProps,\n getThumbProps,\n getTrackProps,\n }\n}\n\nexport type UseColorSliderReturn = ReturnType<typeof useColorSlider>\n","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 { cx } from \"@yamada-ui/utils\"\nimport { useColorSlider } from \"./use-color-slider\"\n\nconst defaultOverlays = (\n min: number,\n max: number,\n withShadow: boolean,\n): HTMLUIProps[] => {\n let 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 = [\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\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<UseColorSliderProps>,\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 })\n\n const css: CSSUIObject = {\n position: \"relative\",\n ...styles.container,\n ...__css,\n }\n\n return (\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 <ui.div\n key={index}\n className=\"ui-hue-slider__overlay\"\n __css={{\n bottom: 0,\n left: 0,\n position: \"absolute\",\n right: 0,\n top: 0,\n ...styles.overlay,\n }}\n {...props}\n />\n ))}\n\n <ui.div\n className=\"ui-hue-slider__track\"\n __css={{ h: \"100%\", position: \"relative\", w: \"100%\", ...styles.track }}\n {...getTrackProps(trackProps)}\n >\n <ui.div\n className=\"ui-hue-slider__thumb\"\n __css={{ ...styles.thumb }}\n {...getThumbProps(thumbProps)}\n />\n </ui.div>\n </ui.div>\n )\n})\n\nHueSlider.displayName = \"HueSlider\"\nHueSlider.__ui__ = \"HueSlider\"\n","import type {\n CSSUIObject,\n HTMLUIProps,\n PropGetter,\n RequiredPropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { InputProps } from \"@yamada-ui/input\"\nimport type { ColorFormat, Dict } from \"@yamada-ui/utils\"\nimport type { ChangeEvent } 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\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useEyeDropper } from \"@yamada-ui/use-eye-dropper\"\nimport {\n calcFormat,\n convertColor,\n createContext,\n handlerAll,\n hslaTo,\n hsvTo,\n isString,\n parseToHsla,\n parseToHsv,\n parseToRgba,\n rgbaTo,\n splitObject,\n useCallbackRef,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useMemo, useRef, useState } from \"react\"\n\ntype Space = keyof Hsla | keyof Rgba\ninterface Hsla {\n a: number\n h: number\n l: number\n s: number\n}\ninterface Rgba {\n a: number\n b: number\n g: number\n r: number\n}\ninterface Hsva {\n a: number\n h: number\n s: number\n v: number\n}\ninterface Channel {\n label: string\n max: number\n min: number\n space: Space\n value: 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 { a, h, l, s }\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 { a, b, g, r }\n}\n\nconst convertHsva = (value: string, fallback?: string): Hsva => {\n const [h, s, v, a] = parseToHsv(value, fallback)\n\n return { a, h, s, v }\n}\n\ninterface ColorSelectorContext {\n channels: Channel[]\n eyeDropperSupported: boolean\n isInteractive: boolean\n styles: { [key: string]: CSSUIObject | undefined }\n value: string\n withAlpha: boolean\n getAlphaSliderProps: PropGetter<AlphaSliderProps>\n getChannelProps: RequiredPropGetter<{ space: Space } & InputProps, InputProps>\n getEyeDropperProps: PropGetter<\"button\">\n getHueSliderProps: PropGetter<HueSliderProps>\n getSwatchProps: PropGetter<ColorSwatchProps>\n onChange: (value: Partial<Hsva> | string) => void\n size?: ThemeProps<\"ColorSelector\">[\"size\"]\n disabled?: boolean\n readOnly?: boolean\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\ninterface 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 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 * Color format. For example, `hex`, `rgba`, etc.\n *\n * @default \"hexa\"\n */\n format?: ColorFormat\n /**\n * The value of the color selector.\n */\n value?: string\n /**\n * Function called whenever the color selector value changes.\n */\n onChange?: (value: string) => void\n /**\n * Function called when the user is done selecting a new value.\n */\n onChangeEnd?: (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 whenever the color swatch click.\n */\n onSwatchClick?: (value: string) => void\n}\n\nexport interface UseColorSelectorBaseProps\n extends UseColorSelectorOptions,\n FormControlOptions {}\n\nexport interface UseColorSelectorProps\n extends Omit<HTMLUIProps, \"children\" | \"defaultValue\" | \"onChange\">,\n UseColorSelectorBaseProps {}\n\nexport const useColorSelector = ({\n isInvalid,\n ...props\n}: UseColorSelectorProps) => {\n const {\n id,\n name,\n defaultValue,\n fallbackValue,\n format: formatProp,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd: onChangeEndProp,\n onChangeStart: onChangeStartProp,\n onSwatchClick,\n ...rest\n } = useFormControlProps({ isInvalid, ...props })\n const [\n {\n \"aria-readonly\": ariaReadonly,\n disabled,\n readOnly,\n required,\n ...formControlProps\n },\n containerProps,\n ] = splitObject(rest, formControlProperties)\n\n const onChangeStartRef = useCallbackRef(onChangeStartProp)\n const onChangeEndRef = useCallbackRef(onChangeEndProp)\n const { supported: eyeDropperSupported, onOpen } = useEyeDropper()\n const [value, setValue] = useControllableState({\n defaultValue: defaultValue ?? fallbackValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const format = useMemo(\n () => formatProp ?? calcFormat(value || \"#ffffff\"),\n [value, formatProp],\n )\n const resolvedValue = convertColor(value, \"#ffffff\")(format) as string\n const timeoutId = useRef<any>(undefined)\n const isDraggingRef = useRef<boolean>(false)\n const [parsedValue, setParsedValue] = useState<Hsva>(\n convertHsva(resolvedValue, fallbackValue),\n )\n const { a, h, s, v } = parsedValue\n const withAlpha = format.endsWith(\"a\")\n const isInteractive = !(disabled || readOnly)\n\n const channels: Channel[] = useMemo(() => {\n if (resolvedValue.startsWith(\"hsl\")) {\n const { a, h, l, s } = convertHsla(resolvedValue, fallbackValue)\n\n let channels: Channel[] = [\n { label: \"H\", max: 360, min: 0, space: \"h\", value: Math.round(h) },\n {\n label: \"S(%)\",\n max: 100,\n min: 0,\n space: \"s\",\n value: Math.round(s * 100),\n },\n {\n label: \"L(%)\",\n max: 100,\n min: 0,\n space: \"l\",\n value: Math.round(l * 100),\n },\n ]\n\n if (withAlpha) {\n channels = [\n ...channels,\n {\n label: \"A(%)\",\n max: 100,\n min: 0,\n space: \"a\",\n value: Math.round(a * 100),\n },\n ]\n }\n\n return channels\n } else {\n const { a, b, g, r } = convertRgba(resolvedValue, fallbackValue)\n\n let channels: Channel[] = [\n { label: \"R\", max: 255, min: 0, space: \"r\", value: Math.round(r) },\n { label: \"G\", max: 255, min: 0, space: \"g\", value: Math.round(g) },\n { label: \"B\", max: 255, min: 0, space: \"b\", value: Math.round(b) },\n ]\n\n if (withAlpha) {\n channels = [\n ...channels,\n {\n label: \"A(%)\",\n max: 100,\n min: 0,\n space: \"a\",\n value: Math.round(a * 100),\n },\n ]\n }\n\n return channels\n }\n }, [resolvedValue, withAlpha, fallbackValue])\n\n const onChange = useCallback(\n (value: Partial<Hsva> | string) => {\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 { a, h, s, v } = { ...parsedValue, ...value }\n\n const nextValue = hsvTo([h, s, v, a], fallbackValue)(format)\n\n if (nextValue) onChangeStartRef(nextValue)\n },\n [onChangeStartRef, fallbackValue, parsedValue, format],\n )\n\n const onChangeEnd = useCallback(\n (value: Partial<Hsva> | string) => {\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)(format)\n } else {\n const { a, h, s, v } = { ...parsedValue, ...value }\n\n nextValue = hsvTo([h, s, v, a], fallbackValue)(format)\n }\n\n if (nextValue) onChangeEndRef(nextValue)\n },\n [onChangeEndRef, fallbackValue, parsedValue, format],\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 ([\"a\", \"l\", \"s\"].includes(space)) n = n / 100\n\n let nextValue: string | undefined\n\n if (resolvedValue.startsWith(\"hsl\")) {\n const { a, h, l, s } = Object.assign(\n convertHsla(resolvedValue, fallbackValue),\n { [space]: n },\n )\n\n nextValue = hslaTo([h, s, l, a], fallbackValue)(format)\n } else {\n const { a, b, g, r } = Object.assign(\n convertRgba(resolvedValue, fallbackValue),\n { [space]: n },\n )\n\n nextValue = rgbaTo([r, g, b, a], fallbackValue)(format)\n }\n\n if (!nextValue) return\n\n onChange(nextValue)\n onChangeEnd(nextValue)\n },\n [resolvedValue, onChange, onChangeEnd, fallbackValue, format],\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)(format)\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 (!value) return\n\n const nextValue = convertColor(value, fallbackValue)(format)\n\n if (nextValue) setValue(nextValue)\n }, [format])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n ...formControlProps,\n ...containerProps,\n }),\n [containerProps, formControlProps],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n \"aria-readonly\": ariaReadonly,\n ...props,\n id,\n ref,\n type: \"hidden\",\n name,\n disabled,\n readOnly,\n required,\n value: resolvedValue,\n }),\n [\n formControlProps,\n ariaReadonly,\n id,\n name,\n resolvedValue,\n required,\n disabled,\n readOnly,\n ],\n )\n\n const getSaturationSliderProps: PropGetter<SaturationSliderProps> =\n useCallback(\n (props = {}, ref = null) => ({\n disabled,\n isInvalid,\n readOnly,\n required,\n ...props,\n ref,\n value: [h, s, v],\n onChange: handlerAll(props.onChange, ([, s, v]) => onChange({ s, v })),\n onChangeEnd: handlerAll(props.onChangeEnd, ([, s, v]) =>\n onChangeEnd({ s, v }),\n ),\n onChangeStart: handlerAll(props.onChangeStart, ([, s, v]) =>\n onChangeStart({ 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: PropGetter<HueSliderProps> = useCallback(\n (props = {}, ref = null) => ({\n disabled,\n isInvalid,\n readOnly,\n required,\n ...props,\n ref,\n value: h,\n onChange: handlerAll(props.onChange, (h) => onChange({ h })),\n onChangeEnd: handlerAll(props.onChangeEnd, (h) => onChangeEnd({ h })),\n onChangeStart: handlerAll(props.onChangeStart, (h) =>\n onChangeStart({ h }),\n ),\n }),\n [\n required,\n disabled,\n readOnly,\n isInvalid,\n h,\n onChange,\n onChangeStart,\n onChangeEnd,\n ],\n )\n\n const getAlphaSliderProps: PropGetter<AlphaSliderProps> = useCallback(\n (props = {}, ref = null) => ({\n disabled,\n isInvalid,\n readOnly,\n required,\n ...props,\n ref,\n color: hsvTo([h, s, v, a], fallbackValue)(format),\n value: a,\n onChange: handlerAll(props.onChange, (a) => onChange({ a })),\n onChangeEnd: handlerAll(props.onChangeEnd, (a) => onChangeEnd({ a })),\n onChangeStart: handlerAll(props.onChangeStart, (a) =>\n onChangeStart({ a }),\n ),\n }),\n [\n fallbackValue,\n required,\n disabled,\n readOnly,\n isInvalid,\n format,\n h,\n s,\n v,\n a,\n onChange,\n onChangeStart,\n onChangeEnd,\n ],\n )\n\n const getChannelProps: RequiredPropGetter<\n { space: Space } & InputProps,\n InputProps\n > = useCallback(\n ({ space, ...props }, ref = null) => {\n return {\n disabled,\n isInvalid,\n readOnly,\n required,\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: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n \"aria-label\": \"Pick a color\",\n disabled,\n ...props,\n ref,\n onClick: handlerAll(props.onClick, onEyeDropperClick),\n }),\n [disabled, onEyeDropperClick],\n )\n\n const getSwatchProps: PropGetter<ColorSwatchProps> = 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 channels,\n disabled,\n eyeDropperSupported,\n isInteractive,\n readOnly,\n value: resolvedValue,\n withAlpha,\n getAlphaSliderProps,\n getChannelProps,\n getContainerProps,\n getEyeDropperProps,\n getHueSliderProps,\n getInputProps,\n getSaturationSliderProps,\n getSwatchProps,\n onChange,\n }\n}\n\nexport type UseColorSelectorReturn = ReturnType<typeof useColorSelector>\n"],"mappings":"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","names":["import_core","import_utils","import_utils","max","min","step","value","focusThumbOnChange","isInteractive","props","props","import_core","import_utils","import_jsx_runtime","defaultOverlays","props","import_form_control","import_use_controllable_state","import_utils","import_react","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../src/color-selector-sliders.tsx","../src/alpha-slider.tsx","../src/use-color-slider.ts","../src/hue-slider.tsx","../src/use-color-selector.ts"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { ForwardedRef } from \"react\"\nimport type { AlphaSliderProps } from \"./alpha-slider\"\nimport type { HueSliderProps } from \"./hue-slider\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { AlphaSlider } from \"./alpha-slider\"\nimport { HueSlider } from \"./hue-slider\"\nimport { useColorSelectorContext } from \"./use-color-selector\"\n\ninterface ColorSelectorSlidersOptions {\n /**\n * Ref for the alpha slider component.\n */\n alphaSliderRef?: ForwardedRef<HTMLInputElement>\n /**\n * Ref for the hue slider component.\n */\n hueSliderRef?: ForwardedRef<HTMLInputElement>\n /**\n * Props for the alpha slider component.\n */\n alphaSliderProps?: Omit<AlphaSliderProps, \"defaultValue\" | \"value\">\n /**\n * Props for the hue slider component.\n */\n hueSliderProps?: Omit<HueSliderProps, \"defaultValue\" | \"value\">\n}\n\nexport interface ColorSelectorSlidersProps\n extends Omit<HTMLUIProps, \"children\">,\n ColorSelectorSlidersOptions {}\n\nexport const ColorSelectorSliders = forwardRef<\n ColorSelectorSlidersProps,\n \"div\"\n>(\n (\n {\n className,\n alphaSliderRef,\n hueSliderRef,\n alphaSliderProps,\n hueSliderProps,\n ...rest\n },\n ref,\n ) => {\n let { size, styles, withAlpha, getAlphaSliderProps, getHueSliderProps } =\n useColorSelectorContext()\n\n if (size === \"full\") size = \"lg\"\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: \"column\",\n ...styles.sliders,\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-color-selector__sliders\", className)}\n __css={css}\n {...rest}\n >\n <HueSlider\n className=\"ui-color-selector__hue-slider\"\n size={size}\n __css={{ ...styles.hueSlider }}\n {...getHueSliderProps(hueSliderProps, hueSliderRef)}\n />\n\n {withAlpha ? (\n <AlphaSlider\n className=\"ui-color-selector__alpha-slider\"\n size={size}\n __css={{ ...styles.alphaSlider }}\n {...getAlphaSliderProps(alphaSliderProps, alphaSliderRef)}\n />\n ) : null}\n </ui.div>\n )\n },\n)\n\nColorSelectorSliders.displayName = \"ColorSelectorSliders\"\nColorSelectorSliders.__ui__ = \"ColorSelectorSliders\"\n","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 let 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 = [\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\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","import type { CSSUIProps, HTMLUIProps, PropGetter } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { CSSProperties, KeyboardEvent, KeyboardEventHandler } from \"react\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useLatestRef } from \"@yamada-ui/use-latest-ref\"\nimport { usePanEvent } from \"@yamada-ui/use-pan-event\"\nimport { useSize } from \"@yamada-ui/use-size\"\nimport {\n clampNumber,\n dataAttr,\n handlerAll,\n mergeRefs,\n percentToValue,\n roundNumberToStep,\n splitObject,\n useCallbackRef,\n useUpdateEffect,\n valueToPercent,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useRef, useState } from \"react\"\n\ntype ColorSliderChannel = \"alpha\" | \"hue\"\n\ninterface UseColorSliderOptions {\n /**\n * The maximum allowed value of the slider. Cannot be less than min.\n */\n max: number\n /**\n * The minimum allowed value of the slider. Cannot be greater than max.\n */\n min: number\n /**\n * The base `id` to use for the slider.\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 channel of the slider.\n */\n channel?: ColorSliderChannel\n /**\n * The initial value of the slider.\n */\n defaultValue?: number\n /**\n * If `false`, the slider handle will not capture focus when value changes.\n *\n * @default true\n */\n focusThumbOnChange?: boolean\n /**\n * The step in which increments or decrements have to be made.\n *\n * @default 1\n */\n step?: number\n /**\n * The CSS `background` property. Used in `background` of thumb element.\n */\n thumbColor?: CSSUIProps[\"bg\"]\n /**\n * The value of the slider.\n */\n value?: number\n /**\n * Function called whenever the slider value changes.\n */\n onChange?: (value: number) => void\n /**\n * Function called when the user is done selecting a new value.\n */\n onChangeEnd?: (value: number) => void\n /**\n * Function called when the user starts selecting a new value.\n */\n onChangeStart?: (value: number) => void\n}\n\nexport interface UseColorSliderProps\n extends Omit<HTMLUIProps, \"defaultValue\" | \"onChange\">,\n UseColorSliderOptions,\n FormControlOptions {}\n\nexport const useColorSlider = ({\n focusThumbOnChange = true,\n ...props\n}: UseColorSliderProps) => {\n if (!focusThumbOnChange) props.isReadOnly = true\n\n const {\n id,\n name,\n style: styleProp,\n channel = \"hue\",\n defaultValue,\n max,\n min = 0,\n step = 1,\n thumbColor,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd: onChangeEndProp,\n onChangeStart: onChangeStartProp,\n ...rest\n } = useFormControlProps(props)\n const [\n {\n \"aria-readonly\": ariaReadonly,\n disabled,\n readOnly,\n required,\n onBlur: onBlurProp,\n onFocus: onFocusProp,\n ...formControlProps\n },\n containerProps,\n ] = splitObject(rest, formControlProperties)\n\n const onChangeStart = useCallbackRef(onChangeStartProp)\n const onChangeEnd = useCallbackRef(onChangeEndProp)\n\n const [computedValue, setValue] = useControllableState({\n defaultValue: defaultValue ?? min + (max - min) / 2,\n value: valueProp,\n onChange: onChangeProp,\n })\n const value = clampNumber(computedValue, min, max)\n const thumbPercent = valueToPercent(value, min, max)\n const [isDragging, setDragging] = useState(false)\n const isInteractive = !(disabled || readOnly)\n\n const oneStep = step || (max - min) / 100\n const tenStep = (max - min) / 10\n\n const containerRef = useRef<HTMLElement>(null)\n const trackRef = useRef<HTMLElement>(null)\n const thumbRef = useRef<HTMLElement>(null)\n const latestRef = useLatestRef({\n eventSource: null as \"keyboard\" | \"pointer\" | null,\n focusThumbOnChange,\n isInteractive,\n max,\n min,\n step,\n value,\n })\n\n const thumbSize = useSize(thumbRef)\n\n const getValueFromPointer = useCallback(\n (ev: any) => {\n if (!trackRef.current) return\n\n const { max, min, step } = latestRef.current\n\n latestRef.current.eventSource = \"pointer\"\n\n const { left, width } = trackRef.current.getBoundingClientRect()\n const { clientX } = ev.touches?.[0] ?? ev\n\n let percent = (clientX - left) / width\n\n let nextValue = percentToValue(percent, min, max)\n\n if (step) nextValue = parseFloat(roundNumberToStep(nextValue, min, step))\n\n nextValue = clampNumber(nextValue, min, max)\n\n return nextValue\n },\n [latestRef],\n )\n\n const setValueFromPointer = (ev: MouseEvent | PointerEvent | TouchEvent) => {\n const { value } = latestRef.current\n const nextValue = getValueFromPointer(ev)\n\n if (nextValue != null && nextValue !== value) setValue(nextValue)\n }\n\n const focusThumb = useCallback(() => {\n const { focusThumbOnChange } = latestRef.current\n\n if (focusThumbOnChange) setTimeout(() => thumbRef.current?.focus())\n }, [latestRef])\n\n const constrain = useCallback(\n (value: number) => {\n const { isInteractive, max, min } = latestRef.current\n\n if (!isInteractive) return\n\n value = parseFloat(roundNumberToStep(value, min, oneStep))\n value = clampNumber(value, min, max)\n\n setValue(value)\n },\n [setValue, latestRef, oneStep],\n )\n\n const stepUp = useCallback(\n (step = oneStep) => constrain(value + step),\n [constrain, value, oneStep],\n )\n\n const stepDown = useCallback(\n (step = oneStep) => constrain(value - step),\n [constrain, value, oneStep],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLElement>) => {\n const { max, min } = latestRef.current\n\n const actions: { [key: string]: KeyboardEventHandler } = {\n ArrowDown: () => stepDown(),\n ArrowLeft: () => stepDown(),\n ArrowRight: () => stepUp(),\n ArrowUp: () => stepUp(),\n End: () => constrain(max),\n Home: () => constrain(min),\n PageDown: () => stepDown(tenStep),\n PageUp: () => stepUp(tenStep),\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n ev.stopPropagation()\n\n action(ev)\n\n latestRef.current.eventSource = \"keyboard\"\n },\n [constrain, latestRef, stepDown, stepUp, tenStep],\n )\n\n usePanEvent(containerRef, {\n onMove: (ev) => {\n const { isInteractive } = latestRef.current\n\n if (!isInteractive) return\n\n setValueFromPointer(ev)\n },\n onSessionEnd: () => {\n const { isInteractive, value } = latestRef.current\n\n if (!isInteractive) return\n\n setDragging(false)\n onChangeEnd(value)\n },\n onSessionStart: (ev) => {\n const { isInteractive, value } = latestRef.current\n\n if (!isInteractive) return\n\n setDragging(true)\n focusThumb()\n setValueFromPointer(ev)\n onChangeStart(value)\n },\n })\n\n useUpdateEffect(() => {\n const { eventSource, value } = latestRef.current\n\n if (eventSource === \"keyboard\") onChangeEnd(value)\n }, [value, onChangeEnd])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n const { width: w } = thumbSize ?? { width: 0 }\n\n const style: CSSProperties = {\n ...props.style,\n ...styleProp,\n paddingInline: `${w / 2}px`,\n }\n\n return {\n ...props,\n ...formControlProps,\n ...containerProps,\n ref: mergeRefs(ref, containerRef),\n style,\n tabIndex: -1,\n }\n },\n [containerProps, formControlProps, styleProp, thumbSize],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n \"aria-readonly\": ariaReadonly,\n ...props,\n id,\n ref,\n type: \"hidden\",\n name,\n disabled,\n readOnly,\n required,\n value,\n }),\n [\n ariaReadonly,\n disabled,\n formControlProps,\n id,\n name,\n readOnly,\n required,\n value,\n ],\n )\n\n const getTrackProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, trackRef),\n }),\n [formControlProps],\n )\n\n const getThumbProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n const n = thumbPercent\n const { width: w } = thumbSize ?? { width: 0 }\n\n const style: CSSProperties = {\n ...props.style,\n left: `calc(${n}% - ${w / 2}px)`,\n position: \"absolute\",\n touchAction: \"none\",\n userSelect: \"none\",\n }\n\n return {\n \"aria-label\": \"Slider thumb\",\n bg: thumbColor ?? `hsl(${value}, 100%, 50%)`,\n ...formControlProps,\n \"aria-readonly\": ariaReadonly,\n ...props,\n ref: mergeRefs(ref, thumbRef),\n style,\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n \"aria-valuenow\": value,\n \"aria-valuetext\": getAriaValueText(channel, value),\n \"data-active\": dataAttr(isDragging && focusThumbOnChange),\n role: \"slider\",\n tabIndex: isInteractive && focusThumbOnChange ? 0 : undefined,\n onBlur: handlerAll(props.onBlur, onBlurProp),\n onFocus: handlerAll(props.onFocus, onFocusProp),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }\n },\n [\n thumbPercent,\n thumbSize,\n thumbColor,\n value,\n formControlProps,\n ariaReadonly,\n max,\n min,\n channel,\n isDragging,\n focusThumbOnChange,\n isInteractive,\n onBlurProp,\n onFocusProp,\n onKeyDown,\n ],\n )\n\n return {\n value,\n getContainerProps,\n getInputProps,\n getThumbProps,\n getTrackProps,\n }\n}\n\nexport type UseColorSliderReturn = ReturnType<typeof useColorSlider>\n\nexport const getAriaValueText = (\n channel: ColorSliderChannel,\n value: number,\n) => {\n if (channel === \"hue\") {\n return `${value}°, ${getColorName(value)}`\n } else {\n return `${value * 100}%`\n }\n}\n\nconst getColorName = (hue: number): string => {\n if (hue < 30 || hue >= 330) return \"Red\"\n if (hue < 90) return \"Yellow\"\n if (hue < 150) return \"Green\"\n if (hue < 210) return \"Cyan\"\n if (hue < 270) return \"Blue\"\n return \"Magenta\"\n}\n","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 let 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 = [\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\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","import type {\n CSSUIObject,\n HTMLUIProps,\n PropGetter,\n RequiredPropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { InputProps } from \"@yamada-ui/input\"\nimport type { ColorFormat, Dict } from \"@yamada-ui/utils\"\nimport type { ChangeEvent } 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\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useEyeDropper } from \"@yamada-ui/use-eye-dropper\"\nimport {\n calcFormat,\n convertColor,\n createContext,\n handlerAll,\n hslaTo,\n hsvTo,\n isString,\n parseToHsla,\n parseToHsv,\n parseToRgba,\n rgbaTo,\n splitObject,\n useCallbackRef,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useMemo, useRef, useState } from \"react\"\n\ntype Space = keyof Hsla | keyof Rgba\ninterface Hsla {\n a: number\n h: number\n l: number\n s: number\n}\ninterface Rgba {\n a: number\n b: number\n g: number\n r: number\n}\ninterface Hsva {\n a: number\n h: number\n s: number\n v: number\n}\ninterface Channel {\n label: string\n max: number\n min: number\n space: Space\n value: 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 { a, h, l, s }\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 { a, b, g, r }\n}\n\nconst convertHsva = (value: string, fallback?: string): Hsva => {\n const [h, s, v, a] = parseToHsv(value, fallback)\n\n return { a, h, s, v }\n}\n\ninterface ColorSelectorContext {\n channels: Channel[]\n eyeDropperSupported: boolean\n isInteractive: boolean\n styles: { [key: string]: CSSUIObject | undefined }\n value: string\n withAlpha: boolean\n getAlphaSliderProps: PropGetter<AlphaSliderProps>\n getChannelProps: RequiredPropGetter<{ space: Space } & InputProps, InputProps>\n getEyeDropperProps: PropGetter<\"button\">\n getHueSliderProps: PropGetter<HueSliderProps>\n getSwatchProps: PropGetter<ColorSwatchProps>\n onChange: (value: Partial<Hsva> | string) => void\n size?: ThemeProps<\"ColorSelector\">[\"size\"]\n disabled?: boolean\n readOnly?: boolean\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\ninterface 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 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 * Color format. For example, `hex`, `rgba`, etc.\n *\n * @default \"hexa\"\n */\n format?: ColorFormat\n /**\n * The value of the color selector.\n */\n value?: string\n /**\n * Function called whenever the color selector value changes.\n */\n onChange?: (value: string) => void\n /**\n * Function called when the user is done selecting a new value.\n */\n onChangeEnd?: (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 whenever the color swatch click.\n */\n onSwatchClick?: (value: string) => void\n}\n\nexport interface UseColorSelectorBaseProps\n extends UseColorSelectorOptions,\n FormControlOptions {}\n\nexport interface UseColorSelectorProps\n extends Omit<HTMLUIProps, \"children\" | \"defaultValue\" | \"onChange\">,\n UseColorSelectorBaseProps {}\n\nexport const useColorSelector = ({\n isInvalid,\n ...props\n}: UseColorSelectorProps) => {\n const {\n id,\n name,\n defaultValue,\n fallbackValue,\n format: formatProp,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd: onChangeEndProp,\n onChangeStart: onChangeStartProp,\n onSwatchClick,\n ...rest\n } = useFormControlProps({ isInvalid, ...props })\n const [\n {\n \"aria-readonly\": ariaReadonly,\n disabled,\n readOnly,\n required,\n ...formControlProps\n },\n containerProps,\n ] = splitObject(rest, formControlProperties)\n\n const onChangeStartRef = useCallbackRef(onChangeStartProp)\n const onChangeEndRef = useCallbackRef(onChangeEndProp)\n const { supported: eyeDropperSupported, onOpen } = useEyeDropper()\n const [value, setValue] = useControllableState({\n defaultValue: defaultValue ?? fallbackValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const format = useMemo(\n () => formatProp ?? calcFormat(value || \"#ffffff\"),\n [value, formatProp],\n )\n const resolvedValue = convertColor(value, \"#ffffff\")(format) as string\n const timeoutId = useRef<any>(undefined)\n const isDraggingRef = useRef<boolean>(false)\n const [parsedValue, setParsedValue] = useState<Hsva>(\n convertHsva(resolvedValue, fallbackValue),\n )\n const { a, h, s, v } = parsedValue\n const withAlpha = format.endsWith(\"a\")\n const isInteractive = !(disabled || readOnly)\n\n const channels: Channel[] = useMemo(() => {\n if (resolvedValue.startsWith(\"hsl\")) {\n const { a, h, l, s } = convertHsla(resolvedValue, fallbackValue)\n\n let channels: Channel[] = [\n { label: \"H\", max: 360, min: 0, space: \"h\", value: Math.round(h) },\n {\n label: \"S(%)\",\n max: 100,\n min: 0,\n space: \"s\",\n value: Math.round(s * 100),\n },\n {\n label: \"L(%)\",\n max: 100,\n min: 0,\n space: \"l\",\n value: Math.round(l * 100),\n },\n ]\n\n if (withAlpha) {\n channels = [\n ...channels,\n {\n label: \"A(%)\",\n max: 100,\n min: 0,\n space: \"a\",\n value: Math.round(a * 100),\n },\n ]\n }\n\n return channels\n } else {\n const { a, b, g, r } = convertRgba(resolvedValue, fallbackValue)\n\n let channels: Channel[] = [\n { label: \"R\", max: 255, min: 0, space: \"r\", value: Math.round(r) },\n { label: \"G\", max: 255, min: 0, space: \"g\", value: Math.round(g) },\n { label: \"B\", max: 255, min: 0, space: \"b\", value: Math.round(b) },\n ]\n\n if (withAlpha) {\n channels = [\n ...channels,\n {\n label: \"A(%)\",\n max: 100,\n min: 0,\n space: \"a\",\n value: Math.round(a * 100),\n },\n ]\n }\n\n return channels\n }\n }, [resolvedValue, withAlpha, fallbackValue])\n\n const onChange = useCallback(\n (value: Partial<Hsva> | string) => {\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 { a, h, s, v } = { ...parsedValue, ...value }\n\n const nextValue = hsvTo([h, s, v, a], fallbackValue)(format)\n\n if (nextValue) onChangeStartRef(nextValue)\n },\n [onChangeStartRef, fallbackValue, parsedValue, format],\n )\n\n const onChangeEnd = useCallback(\n (value: Partial<Hsva> | string) => {\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)(format)\n } else {\n const { a, h, s, v } = { ...parsedValue, ...value }\n\n nextValue = hsvTo([h, s, v, a], fallbackValue)(format)\n }\n\n if (nextValue) onChangeEndRef(nextValue)\n },\n [onChangeEndRef, fallbackValue, parsedValue, format],\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 ([\"a\", \"l\", \"s\"].includes(space)) n = n / 100\n\n let nextValue: string | undefined\n\n if (resolvedValue.startsWith(\"hsl\")) {\n const { a, h, l, s } = Object.assign(\n convertHsla(resolvedValue, fallbackValue),\n { [space]: n },\n )\n\n nextValue = hslaTo([h, s, l, a], fallbackValue)(format)\n } else {\n const { a, b, g, r } = Object.assign(\n convertRgba(resolvedValue, fallbackValue),\n { [space]: n },\n )\n\n nextValue = rgbaTo([r, g, b, a], fallbackValue)(format)\n }\n\n if (!nextValue) return\n\n onChange(nextValue)\n onChangeEnd(nextValue)\n },\n [resolvedValue, onChange, onChangeEnd, fallbackValue, format],\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)(format)\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 (!value) return\n\n const nextValue = convertColor(value, fallbackValue)(format)\n\n if (nextValue) setValue(nextValue)\n }, [format])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n ...formControlProps,\n ...containerProps,\n }),\n [containerProps, formControlProps],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n \"aria-readonly\": ariaReadonly,\n ...props,\n id,\n ref,\n type: \"hidden\",\n name,\n disabled,\n readOnly,\n required,\n value: resolvedValue,\n }),\n [\n formControlProps,\n ariaReadonly,\n id,\n name,\n resolvedValue,\n required,\n disabled,\n readOnly,\n ],\n )\n\n const getSaturationSliderProps: PropGetter<SaturationSliderProps> =\n useCallback(\n (props = {}, ref = null) => ({\n disabled,\n isInvalid,\n readOnly,\n required,\n ...props,\n ref,\n value: [h, s, v],\n onChange: handlerAll(props.onChange, ([, s, v]) => onChange({ s, v })),\n onChangeEnd: handlerAll(props.onChangeEnd, ([, s, v]) =>\n onChangeEnd({ s, v }),\n ),\n onChangeStart: handlerAll(props.onChangeStart, ([, s, v]) =>\n onChangeStart({ 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: PropGetter<HueSliderProps> = useCallback(\n (props = {}, ref = null) => ({\n disabled,\n isInvalid,\n readOnly,\n required,\n ...props,\n ref,\n value: h,\n onChange: handlerAll(props.onChange, (h) => onChange({ h })),\n onChangeEnd: handlerAll(props.onChangeEnd, (h) => onChangeEnd({ h })),\n onChangeStart: handlerAll(props.onChangeStart, (h) =>\n onChangeStart({ h }),\n ),\n }),\n [\n required,\n disabled,\n readOnly,\n isInvalid,\n h,\n onChange,\n onChangeStart,\n onChangeEnd,\n ],\n )\n\n const getAlphaSliderProps: PropGetter<AlphaSliderProps> = useCallback(\n (props = {}, ref = null) => ({\n disabled,\n isInvalid,\n readOnly,\n required,\n ...props,\n ref,\n color: hsvTo([h, s, v, a], fallbackValue)(format),\n value: a,\n onChange: handlerAll(props.onChange, (a) => onChange({ a })),\n onChangeEnd: handlerAll(props.onChangeEnd, (a) => onChangeEnd({ a })),\n onChangeStart: handlerAll(props.onChangeStart, (a) =>\n onChangeStart({ a }),\n ),\n }),\n [\n fallbackValue,\n required,\n disabled,\n readOnly,\n isInvalid,\n format,\n h,\n s,\n v,\n a,\n onChange,\n onChangeStart,\n onChangeEnd,\n ],\n )\n\n const getChannelProps: RequiredPropGetter<\n { space: Space } & InputProps,\n InputProps\n > = useCallback(\n ({ space, ...props }, ref = null) => {\n return {\n disabled,\n isInvalid,\n readOnly,\n required,\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: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n \"aria-label\": \"Pick a color\",\n disabled,\n ...props,\n ref,\n onClick: handlerAll(props.onClick, onEyeDropperClick),\n }),\n [disabled, onEyeDropperClick],\n )\n\n const getSwatchProps: PropGetter<ColorSwatchProps> = 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 channels,\n disabled,\n eyeDropperSupported,\n isInteractive,\n readOnly,\n value: resolvedValue,\n withAlpha,\n getAlphaSliderProps,\n getChannelProps,\n getContainerProps,\n getEyeDropperProps,\n getHueSliderProps,\n getInputProps,\n getSaturationSliderProps,\n getSwatchProps,\n onChange,\n }\n}\n\nexport type UseColorSelectorReturn = ReturnType<typeof useColorSelector>\n"],"mappings":"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","names":["import_core","import_utils","import_utils","max","min","step","value","focusThumbOnChange","isInteractive","props","props","import_core","import_utils","import_jsx_runtime","defaultOverlays","props","import_form_control","import_use_controllable_state","import_utils","import_react","import_jsx_runtime"]}
@@ -1,10 +1,10 @@
1
1
  "use client"
2
2
  import {
3
3
  ColorSelectorSliders
4
- } from "./chunk-62A7F566.mjs";
5
- import "./chunk-7NWT5PKE.mjs";
6
- import "./chunk-XL5VWGU4.mjs";
7
- import "./chunk-F5EYME2W.mjs";
4
+ } from "./chunk-HPP26MVU.mjs";
5
+ import "./chunk-WZEWATJ3.mjs";
6
+ import "./chunk-FP3X3PED.mjs";
7
+ import "./chunk-SGAM4TJL.mjs";
8
8
  import "./chunk-X2EYDFTM.mjs";
9
9
  export {
10
10
  ColorSelectorSliders