@raystack/apsara 0.48.5 → 0.49.1

package/dist/components/color-picker/color-picker-alpha.d.ts

@@ -0,0 +1,5 @@
+import { Slider } from 'radix-ui';
+import { type ComponentProps } from 'react';
+export type ColorPickerAlphaProps = ComponentProps<typeof Slider.Root>;
+export declare const ColorPickerAlpha: ({ className, ...props }: ColorPickerAlphaProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=color-picker-alpha.d.ts.map

package/dist/components/color-picker/color-picker-alpha.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-alpha.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-alpha.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AAEvE,eAAO,MAAM,gBAAgB,4BAG1B,qBAAqB,4CAkBvB,CAAC"}

package/dist/components/color-picker/color-picker-alpha.js

@@ -0,0 +1,13 @@
+import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
+import { useColorPicker } from './color-picker-root.js';
+import styles from './color-picker.module.css.js';
+import { Root, Track, Range, Thumb } from '../../node_modules/.pnpm/@radix-ui_react-slider@1.3.5_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-slider/dist/index.js';
+
+const ColorPickerAlpha = ({ className, ...props }) => {
+    const { alpha = 1, setColor } = useColorPicker();
+    return (jsxRuntimeExports.jsxs(Root, { className: cx(styles.sliderRoot, className), max: 100, onValueChange: ([alpha]) => setColor({ alpha: alpha / 100 }), step: 1, value: [alpha * 100], ...props, children: [jsxRuntimeExports.jsxs(Track, { className: cx(styles.sliderTrack, styles.alphaTrack), children: [jsxRuntimeExports.jsx("div", { className: styles.alphaTrackGradient }), jsxRuntimeExports.jsx(Range, { className: styles.sliderRange })] }), jsxRuntimeExports.jsx(Thumb, { className: styles.sliderThumb })] }));
+};
+
+export { ColorPickerAlpha };
+//# sourceMappingURL=color-picker-alpha.js.map

package/dist/components/color-picker/color-picker-alpha.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-alpha.js","sources":["../../../components/color-picker/color-picker-alpha.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { Slider } from 'radix-ui';\nimport { type ComponentProps } from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerAlphaProps = ComponentProps<typeof Slider.Root>;\n\nexport const ColorPickerAlpha = ({\n  className,\n  ...props\n}: ColorPickerAlphaProps) => {\n  const { alpha = 1, setColor } = useColorPicker();\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={100}\n      onValueChange={([alpha]) => setColor({ alpha: alpha / 100 })}\n      step={1}\n      value={[alpha * 100]}\n      {...props}\n    >\n      <Slider.Track className={cx(styles.sliderTrack, styles.alphaTrack)}>\n        <div className={styles.alphaTrackGradient} />\n        <Slider.Range className={styles.sliderRange} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.sliderThumb} />\n    </Slider.Root>\n  );\n};\n"],"names":["_jsxs","Slider.Root","Slider.Track","_jsx","Slider.Range","Slider.Thumb"],"mappings":";;;;;;AAQO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACc,KAAI;IAC1B,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACjD,QACEA,uBAACC,IAAW,EACV,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,CAAC,EAC3C,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,GAAG,GAAG,EAAE,CAAC,EAC5D,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,EAAA,GAChB,KAAK,EAET,QAAA,EAAA,CAAAD,sBAAA,CAACE,KAAY,EAAA,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,UAAU,CAAC,EAChE,QAAA,EAAA,CAAAC,qBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAI,CAAA,EAC7CA,sBAACC,KAAY,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,WAAW,EAAI,CAAA,CAAA,EAAA,CAClC,EACfD,qBAAA,CAACE,KAAY,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,CAAI,CACnC,EAAA,CAAA,EACd;AACJ;;;;"}

package/dist/components/color-picker/color-picker-area.cjs

@@ -0,0 +1,73 @@
+'use strict';
+
+var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var index$1 = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
+var index = require('../../node_modules/.pnpm/color@5.0.0/node_modules/color/index.cjs');
+var React = require('react');
+var colorPickerRoot = require('./color-picker-root.cjs');
+var colorPicker_module = require('./color-picker.module.css.cjs');
+
+const ColorPickerArea = ({ className, ...props }) => {
+    const containerRef = React.useRef(null);
+    const thumbRef = React.useRef(null);
+    const isDragging = React.useRef(false);
+    const isThumbVisible = React.useRef(false);
+    const { hue, saturation, lightness, setColor } = colorPickerRoot.useColorPicker();
+    const color = index.default.hsl(hue, saturation, lightness);
+    const backgroundGradient = React.useMemo(() => {
+        return `linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)),
+            linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)),
+            hsl(${hue}, 100%, 50%)`;
+    }, [hue]);
+    // Need to use useEffect as color can change from outside, and we need to sync thumb position
+    React.useEffect(() => {
+        if (!containerRef.current || !thumbRef.current)
+            return;
+        const clamp = (v) => Math.max(0, Math.min(1, v));
+        const x = clamp(saturation / 100);
+        const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);
+        const y = clamp(1 - lightness / topLightness);
+        thumbRef.current.style.left = `${x * 100}%`;
+        thumbRef.current.style.top = `${y * 100}%`;
+        // This is needed to avoid flickering of the thumb on initial render
+        if (!isThumbVisible.current) {
+            isThumbVisible.current = true;
+            thumbRef.current.style.opacity = '1';
+        }
+    }, [saturation, lightness]);
+    const handlePointerMove = React.useCallback((event) => {
+        if (!(isDragging.current && containerRef.current && thumbRef.current)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const rect = containerRef.current.getBoundingClientRect();
+        const x = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
+        const y = Math.max(0, Math.min(1, (event.clientY - rect.top) / rect.height));
+        const saturation = x * 100;
+        const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);
+        const lightness = topLightness * (1 - y);
+        setColor({ s: saturation, l: lightness });
+    }, [setColor]);
+    const handlePointerUp = React.useCallback(() => {
+        isDragging.current = false;
+        window.removeEventListener('pointermove', handlePointerMove);
+        window.removeEventListener('pointerup', handlePointerUp);
+    }, [handlePointerMove]);
+    const handlePointerDown = React.useCallback((e) => {
+        e.preventDefault();
+        isDragging.current = true;
+        handlePointerMove(e.nativeEvent);
+        window.addEventListener('pointermove', handlePointerMove);
+        window.addEventListener('pointerup', handlePointerUp);
+    }, [handlePointerMove, handlePointerUp]);
+    return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: index$1.cx(colorPicker_module.default.selectionRoot, className), onPointerDown: handlePointerDown, ref: containerRef, style: {
+            background: backgroundGradient
+        }, ...props, children: jsxRuntime.jsxRuntimeExports.jsx("div", { className: index$1.cx(colorPicker_module.default.sliderThumb, colorPicker_module.default.selectionThumb), ref: thumbRef, style: {
+                background: color.hex().toString(),
+                opacity: 0
+            } }) }));
+};
+
+exports.ColorPickerArea = ColorPickerArea;
+//# sourceMappingURL=color-picker-area.cjs.map

package/dist/components/color-picker/color-picker-area.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-area.cjs","sources":["../../../components/color-picker/color-picker-area.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport Color from 'color';\nimport {\n  type HTMLAttributes,\n  PointerEvent as ReactPointerEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef\n} from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerAreaProps = HTMLAttributes<HTMLDivElement>;\n\nexport const ColorPickerArea = ({\n  className,\n  ...props\n}: ColorPickerAreaProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const thumbRef = useRef<HTMLDivElement>(null);\n  const isDragging = useRef(false);\n  const isThumbVisible = useRef(false);\n\n  const { hue, saturation, lightness, setColor } = useColorPicker();\n  const color = Color.hsl(hue, saturation, lightness);\n\n  const backgroundGradient = useMemo(() => {\n    return `linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)),\n            linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)),\n            hsl(${hue}, 100%, 50%)`;\n  }, [hue]);\n\n  // Need to use useEffect as color can change from outside, and we need to sync thumb position\n  useEffect(() => {\n    if (!containerRef.current || !thumbRef.current) return;\n\n    const clamp = (v: number) => Math.max(0, Math.min(1, v));\n    const x = clamp(saturation / 100);\n    const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);\n    const y = clamp(1 - lightness / topLightness);\n\n    thumbRef.current.style.left = `${x * 100}%`;\n    thumbRef.current.style.top = `${y * 100}%`;\n\n    // This is needed to avoid flickering of the thumb on initial render\n    if (!isThumbVisible.current) {\n      isThumbVisible.current = true;\n      thumbRef.current.style.opacity = '1';\n    }\n  }, [saturation, lightness]);\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!(isDragging.current && containerRef.current && thumbRef.current)) {\n        return;\n      }\n      event.preventDefault();\n      event.stopPropagation();\n      const rect = containerRef.current.getBoundingClientRect();\n      const x = Math.max(\n        0,\n        Math.min(1, (event.clientX - rect.left) / rect.width)\n      );\n      const y = Math.max(\n        0,\n        Math.min(1, (event.clientY - rect.top) / rect.height)\n      );\n      const saturation = x * 100;\n      const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);\n      const lightness = topLightness * (1 - y);\n      setColor({ s: saturation, l: lightness });\n    },\n    [setColor]\n  );\n\n  const handlePointerUp = useCallback(() => {\n    isDragging.current = false;\n    window.removeEventListener('pointermove', handlePointerMove);\n    window.removeEventListener('pointerup', handlePointerUp);\n  }, [handlePointerMove]);\n\n  const handlePointerDown = useCallback(\n    (e: ReactPointerEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      isDragging.current = true;\n      handlePointerMove(e.nativeEvent);\n      window.addEventListener('pointermove', handlePointerMove);\n      window.addEventListener('pointerup', handlePointerUp);\n    },\n    [handlePointerMove, handlePointerUp]\n  );\n\n  return (\n    <div\n      className={cx(styles.selectionRoot, className)}\n      onPointerDown={handlePointerDown}\n      ref={containerRef}\n      style={{\n        background: backgroundGradient\n      }}\n      {...props}\n    >\n      <div\n        className={cx(styles.sliderThumb, styles.selectionThumb)}\n        ref={thumbRef}\n        style={{\n          background: color.hex().toString(),\n          opacity: 0\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["useRef","useColorPicker","Color","useMemo","useEffect","useCallback","_jsx","cx","styles"],"mappings":"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"}

package/dist/components/color-picker/color-picker-area.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLAttributes } from 'react';
+export type ColorPickerAreaProps = HTMLAttributes<HTMLDivElement>;
+export declare const ColorPickerArea: ({ className, ...props }: ColorPickerAreaProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=color-picker-area.d.ts.map

package/dist/components/color-picker/color-picker-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-area.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-area.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAMpB,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAElE,eAAO,MAAM,eAAe,4FAkG3B,CAAC"}

package/dist/components/color-picker/color-picker-area.js

@@ -0,0 +1,71 @@
+import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
+import Color from '../../node_modules/.pnpm/color@5.0.0/node_modules/color/index.js';
+import { useRef, useMemo, useEffect, useCallback } from 'react';
+import { useColorPicker } from './color-picker-root.js';
+import styles from './color-picker.module.css.js';
+
+const ColorPickerArea = ({ className, ...props }) => {
+    const containerRef = useRef(null);
+    const thumbRef = useRef(null);
+    const isDragging = useRef(false);
+    const isThumbVisible = useRef(false);
+    const { hue, saturation, lightness, setColor } = useColorPicker();
+    const color = Color.hsl(hue, saturation, lightness);
+    const backgroundGradient = useMemo(() => {
+        return `linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)),
+            linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)),
+            hsl(${hue}, 100%, 50%)`;
+    }, [hue]);
+    // Need to use useEffect as color can change from outside, and we need to sync thumb position
+    useEffect(() => {
+        if (!containerRef.current || !thumbRef.current)
+            return;
+        const clamp = (v) => Math.max(0, Math.min(1, v));
+        const x = clamp(saturation / 100);
+        const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);
+        const y = clamp(1 - lightness / topLightness);
+        thumbRef.current.style.left = `${x * 100}%`;
+        thumbRef.current.style.top = `${y * 100}%`;
+        // This is needed to avoid flickering of the thumb on initial render
+        if (!isThumbVisible.current) {
+            isThumbVisible.current = true;
+            thumbRef.current.style.opacity = '1';
+        }
+    }, [saturation, lightness]);
+    const handlePointerMove = useCallback((event) => {
+        if (!(isDragging.current && containerRef.current && thumbRef.current)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const rect = containerRef.current.getBoundingClientRect();
+        const x = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
+        const y = Math.max(0, Math.min(1, (event.clientY - rect.top) / rect.height));
+        const saturation = x * 100;
+        const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);
+        const lightness = topLightness * (1 - y);
+        setColor({ s: saturation, l: lightness });
+    }, [setColor]);
+    const handlePointerUp = useCallback(() => {
+        isDragging.current = false;
+        window.removeEventListener('pointermove', handlePointerMove);
+        window.removeEventListener('pointerup', handlePointerUp);
+    }, [handlePointerMove]);
+    const handlePointerDown = useCallback((e) => {
+        e.preventDefault();
+        isDragging.current = true;
+        handlePointerMove(e.nativeEvent);
+        window.addEventListener('pointermove', handlePointerMove);
+        window.addEventListener('pointerup', handlePointerUp);
+    }, [handlePointerMove, handlePointerUp]);
+    return (jsxRuntimeExports.jsx("div", { className: cx(styles.selectionRoot, className), onPointerDown: handlePointerDown, ref: containerRef, style: {
+            background: backgroundGradient
+        }, ...props, children: jsxRuntimeExports.jsx("div", { className: cx(styles.sliderThumb, styles.selectionThumb), ref: thumbRef, style: {
+                background: color.hex().toString(),
+                opacity: 0
+            } }) }));
+};
+
+export { ColorPickerArea };
+//# sourceMappingURL=color-picker-area.js.map

package/dist/components/color-picker/color-picker-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-area.js","sources":["../../../components/color-picker/color-picker-area.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport Color from 'color';\nimport {\n  type HTMLAttributes,\n  PointerEvent as ReactPointerEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef\n} from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerAreaProps = HTMLAttributes<HTMLDivElement>;\n\nexport const ColorPickerArea = ({\n  className,\n  ...props\n}: ColorPickerAreaProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const thumbRef = useRef<HTMLDivElement>(null);\n  const isDragging = useRef(false);\n  const isThumbVisible = useRef(false);\n\n  const { hue, saturation, lightness, setColor } = useColorPicker();\n  const color = Color.hsl(hue, saturation, lightness);\n\n  const backgroundGradient = useMemo(() => {\n    return `linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)),\n            linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)),\n            hsl(${hue}, 100%, 50%)`;\n  }, [hue]);\n\n  // Need to use useEffect as color can change from outside, and we need to sync thumb position\n  useEffect(() => {\n    if (!containerRef.current || !thumbRef.current) return;\n\n    const clamp = (v: number) => Math.max(0, Math.min(1, v));\n    const x = clamp(saturation / 100);\n    const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);\n    const y = clamp(1 - lightness / topLightness);\n\n    thumbRef.current.style.left = `${x * 100}%`;\n    thumbRef.current.style.top = `${y * 100}%`;\n\n    // This is needed to avoid flickering of the thumb on initial render\n    if (!isThumbVisible.current) {\n      isThumbVisible.current = true;\n      thumbRef.current.style.opacity = '1';\n    }\n  }, [saturation, lightness]);\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!(isDragging.current && containerRef.current && thumbRef.current)) {\n        return;\n      }\n      event.preventDefault();\n      event.stopPropagation();\n      const rect = containerRef.current.getBoundingClientRect();\n      const x = Math.max(\n        0,\n        Math.min(1, (event.clientX - rect.left) / rect.width)\n      );\n      const y = Math.max(\n        0,\n        Math.min(1, (event.clientY - rect.top) / rect.height)\n      );\n      const saturation = x * 100;\n      const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);\n      const lightness = topLightness * (1 - y);\n      setColor({ s: saturation, l: lightness });\n    },\n    [setColor]\n  );\n\n  const handlePointerUp = useCallback(() => {\n    isDragging.current = false;\n    window.removeEventListener('pointermove', handlePointerMove);\n    window.removeEventListener('pointerup', handlePointerUp);\n  }, [handlePointerMove]);\n\n  const handlePointerDown = useCallback(\n    (e: ReactPointerEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      isDragging.current = true;\n      handlePointerMove(e.nativeEvent);\n      window.addEventListener('pointermove', handlePointerMove);\n      window.addEventListener('pointerup', handlePointerUp);\n    },\n    [handlePointerMove, handlePointerUp]\n  );\n\n  return (\n    <div\n      className={cx(styles.selectionRoot, className)}\n      onPointerDown={handlePointerDown}\n      ref={containerRef}\n      style={{\n        background: backgroundGradient\n      }}\n      {...props}\n    >\n      <div\n        className={cx(styles.sliderThumb, styles.selectionThumb)}\n        ref={thumbRef}\n        style={{\n          background: color.hex().toString(),\n          opacity: 0\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":"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"}

package/dist/components/color-picker/color-picker-hue.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var index$1 = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
+var colorPickerRoot = require('./color-picker-root.cjs');
+var colorPicker_module = require('./color-picker.module.css.cjs');
+var index = require('../../node_modules/.pnpm/@radix-ui_react-slider@1.3.5_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-slider/dist/index.cjs');
+
+const ColorPickerHue = ({ className, ...props }) => {
+    const { hue, setColor } = colorPickerRoot.useColorPicker();
+    return (jsxRuntime.jsxRuntimeExports.jsxs(index.Root, { className: index$1.cx(colorPicker_module.default.sliderRoot, className), max: 360, onValueChange: ([hue]) => setColor({ h: hue }), step: 1, value: [hue], ...props, children: [jsxRuntime.jsxRuntimeExports.jsx(index.Track, { className: index$1.cx(colorPicker_module.default.sliderTrack, colorPicker_module.default.hueTrack), children: jsxRuntime.jsxRuntimeExports.jsx(index.Range, { className: colorPicker_module.default.sliderRange }) }), jsxRuntime.jsxRuntimeExports.jsx(index.Thumb, { className: colorPicker_module.default.sliderThumb })] }));
+};
+
+exports.ColorPickerHue = ColorPickerHue;
+//# sourceMappingURL=color-picker-hue.cjs.map

package/dist/components/color-picker/color-picker-hue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-hue.cjs","sources":["../../../components/color-picker/color-picker-hue.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { Slider } from 'radix-ui';\nimport { type ComponentProps } from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerHueProps = ComponentProps<typeof Slider.Root>;\nexport const ColorPickerHue = ({\n  className,\n  ...props\n}: ColorPickerHueProps) => {\n  const { hue, setColor } = useColorPicker();\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={360}\n      onValueChange={([hue]) => setColor({ h: hue })}\n      step={1}\n      value={[hue]}\n      {...props}\n    >\n      <Slider.Track className={cx(styles.sliderTrack, styles.hueTrack)}>\n        <Slider.Range className={styles.sliderRange} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.sliderThumb} />\n    </Slider.Root>\n  );\n};\n"],"names":["useColorPicker","_jsxs","Slider.Root","cx","styles","_jsx","Slider.Track","Slider.Range","Slider.Thumb"],"mappings":";;;;;;;;AAOO,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACY,KAAI;IACxB,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAGA,8BAAc,EAAE,CAAC;IAC3C,QACEC,kCAACC,UAAW,EACV,EAAA,SAAS,EAAEC,UAAE,CAACC,0BAAM,CAAC,UAAU,EAAE,SAAS,CAAC,EAC3C,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,QAAQ,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAC9C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,CAAC,GAAG,CAAC,EACR,GAAA,KAAK,aAETC,gCAAC,CAAAC,WAAY,EAAA,EAAC,SAAS,EAAEH,UAAE,CAACC,0BAAM,CAAC,WAAW,EAAEA,0BAAM,CAAC,QAAQ,CAAC,EAC9D,QAAA,EAAAC,gCAAA,CAACE,WAAY,EAAC,EAAA,SAAS,EAAEH,0BAAM,CAAC,WAAW,EAAI,CAAA,EAAA,CAClC,EACfC,gCAAC,CAAAG,WAAY,EAAA,EAAC,SAAS,EAAEJ,0BAAM,CAAC,WAAW,EAAA,CAAI,CACnC,EAAA,CAAA,EACd;AACJ;;;;"}

package/dist/components/color-picker/color-picker-hue.d.ts

@@ -0,0 +1,5 @@
+import { Slider } from 'radix-ui';
+import { type ComponentProps } from 'react';
+export type ColorPickerHueProps = ComponentProps<typeof Slider.Root>;
+export declare const ColorPickerHue: ({ className, ...props }: ColorPickerHueProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=color-picker-hue.d.ts.map

package/dist/components/color-picker/color-picker-hue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-hue.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-hue.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AACrE,eAAO,MAAM,cAAc,4BAGxB,mBAAmB,4CAiBrB,CAAC"}

package/dist/components/color-picker/color-picker-hue.js

@@ -0,0 +1,13 @@
+import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
+import { useColorPicker } from './color-picker-root.js';
+import styles from './color-picker.module.css.js';
+import { Root, Track, Range, Thumb } from '../../node_modules/.pnpm/@radix-ui_react-slider@1.3.5_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-slider/dist/index.js';
+
+const ColorPickerHue = ({ className, ...props }) => {
+    const { hue, setColor } = useColorPicker();
+    return (jsxRuntimeExports.jsxs(Root, { className: cx(styles.sliderRoot, className), max: 360, onValueChange: ([hue]) => setColor({ h: hue }), step: 1, value: [hue], ...props, children: [jsxRuntimeExports.jsx(Track, { className: cx(styles.sliderTrack, styles.hueTrack), children: jsxRuntimeExports.jsx(Range, { className: styles.sliderRange }) }), jsxRuntimeExports.jsx(Thumb, { className: styles.sliderThumb })] }));
+};
+
+export { ColorPickerHue };
+//# sourceMappingURL=color-picker-hue.js.map

package/dist/components/color-picker/color-picker-hue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-hue.js","sources":["../../../components/color-picker/color-picker-hue.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { Slider } from 'radix-ui';\nimport { type ComponentProps } from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerHueProps = ComponentProps<typeof Slider.Root>;\nexport const ColorPickerHue = ({\n  className,\n  ...props\n}: ColorPickerHueProps) => {\n  const { hue, setColor } = useColorPicker();\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={360}\n      onValueChange={([hue]) => setColor({ h: hue })}\n      step={1}\n      value={[hue]}\n      {...props}\n    >\n      <Slider.Track className={cx(styles.sliderTrack, styles.hueTrack)}>\n        <Slider.Range className={styles.sliderRange} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.sliderThumb} />\n    </Slider.Root>\n  );\n};\n"],"names":["_jsxs","Slider.Root","_jsx","Slider.Track","Slider.Range","Slider.Thumb"],"mappings":";;;;;;AAOO,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACY,KAAI;IACxB,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IAC3C,QACEA,uBAACC,IAAW,EACV,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,CAAC,EAC3C,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,QAAQ,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAC9C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,CAAC,GAAG,CAAC,EACR,GAAA,KAAK,aAETC,qBAAC,CAAAC,KAAY,EAAA,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,QAAQ,CAAC,EAC9D,QAAA,EAAAD,qBAAA,CAACE,KAAY,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAAI,CAAA,EAAA,CAClC,EACfF,qBAAC,CAAAG,KAAY,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,CAAI,CACnC,EAAA,CAAA,EACd;AACJ;;;;"}

package/dist/components/color-picker/color-picker-input.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var index = require('../../node_modules/.pnpm/color@5.0.0/node_modules/color/index.cjs');
+var inputField = require('../input-field/input-field.cjs');
+var colorPickerRoot = require('./color-picker-root.cjs');
+var utils = require('./utils.cjs');
+
+const ColorPickerInput = (props) => {
+    const { hue, saturation, lightness, alpha, mode } = colorPickerRoot.useColorPicker();
+    const color = index.default.hsl(hue, saturation, lightness, alpha ?? 1);
+    return jsxRuntime.jsxRuntimeExports.jsx(inputField.InputField, { value: utils.getColorString(color, mode), readOnly: true, ...props });
+};
+
+exports.ColorPickerInput = ColorPickerInput;
+//# sourceMappingURL=color-picker-input.cjs.map

package/dist/components/color-picker/color-picker-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-input.cjs","sources":["../../../components/color-picker/color-picker-input.tsx"],"sourcesContent":["import Color from 'color';\nimport { ComponentPropsWithoutRef } from 'react';\nimport { InputField } from '../input-field';\nimport { useColorPicker } from './color-picker-root';\nimport { getColorString } from './utils';\n\nexport const ColorPickerInput = (\n  props: ComponentPropsWithoutRef<typeof InputField>\n) => {\n  const { hue, saturation, lightness, alpha, mode } = useColorPicker();\n  const color = Color.hsl(hue, saturation, lightness, alpha ?? 1);\n\n  return <InputField value={getColorString(color, mode)} readOnly {...props} />;\n};\n"],"names":["useColorPicker","Color","_jsx","InputField","getColorString"],"mappings":";;;;;;;;AAMa,MAAA,gBAAgB,GAAG,CAC9B,KAAkD,KAChD;AACF,IAAA,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,GAAGA,8BAAc,EAAE,CAAC;AACrE,IAAA,MAAM,KAAK,GAAGC,aAAK,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC;AAEhE,IAAA,OAAOC,iCAACC,qBAAU,EAAA,EAAC,KAAK,EAAEC,oBAAc,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,QAAQ,EAAK,IAAA,EAAA,GAAA,KAAK,GAAI,CAAC;AAChF;;;;"}

package/dist/components/color-picker/color-picker-input.d.ts

@@ -0,0 +1,4 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { InputField } from '../input-field';
+export declare const ColorPickerInput: (props: ComponentPropsWithoutRef<typeof InputField>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=color-picker-input.d.ts.map

package/dist/components/color-picker/color-picker-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-input.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-input.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI5C,eAAO,MAAM,gBAAgB,UACpB,yBAAyB,iBAAiB,CAAC,4CAMnD,CAAC"}

package/dist/components/color-picker/color-picker-input.js

@@ -0,0 +1,14 @@
+import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import Color from '../../node_modules/.pnpm/color@5.0.0/node_modules/color/index.js';
+import { InputField } from '../input-field/input-field.js';
+import { useColorPicker } from './color-picker-root.js';
+import { getColorString } from './utils.js';
+
+const ColorPickerInput = (props) => {
+    const { hue, saturation, lightness, alpha, mode } = useColorPicker();
+    const color = Color.hsl(hue, saturation, lightness, alpha ?? 1);
+    return jsxRuntimeExports.jsx(InputField, { value: getColorString(color, mode), readOnly: true, ...props });
+};
+
+export { ColorPickerInput };
+//# sourceMappingURL=color-picker-input.js.map

package/dist/components/color-picker/color-picker-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-input.js","sources":["../../../components/color-picker/color-picker-input.tsx"],"sourcesContent":["import Color from 'color';\nimport { ComponentPropsWithoutRef } from 'react';\nimport { InputField } from '../input-field';\nimport { useColorPicker } from './color-picker-root';\nimport { getColorString } from './utils';\n\nexport const ColorPickerInput = (\n  props: ComponentPropsWithoutRef<typeof InputField>\n) => {\n  const { hue, saturation, lightness, alpha, mode } = useColorPicker();\n  const color = Color.hsl(hue, saturation, lightness, alpha ?? 1);\n\n  return <InputField value={getColorString(color, mode)} readOnly {...props} />;\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAMa,MAAA,gBAAgB,GAAG,CAC9B,KAAkD,KAChD;AACF,IAAA,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,cAAc,EAAE,CAAC;AACrE,IAAA,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC;AAEhE,IAAA,OAAOA,sBAAC,UAAU,EAAA,EAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,QAAQ,EAAK,IAAA,EAAA,GAAA,KAAK,GAAI,CAAC;AAChF;;;;"}

package/dist/components/color-picker/color-picker-mode.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
+var select = require('../select/select.cjs');
+var colorPickerRoot = require('./color-picker-root.cjs');
+var colorPicker_module = require('./color-picker.module.css.cjs');
+var utils = require('./utils.cjs');
+
+const ColorPickerMode = ({ className, options = utils.SUPPORTED_MODES, ...props }) => {
+    const { mode, setMode } = colorPickerRoot.useColorPicker();
+    return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { onValueChange: value => setMode(value), value: mode, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { className: index.cx(colorPicker_module.default.selectTrigger, className), ...props, children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: 'Mode' }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { children: options.map(option => (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: option, children: option.toUpperCase() }, option))) })] }));
+};
+
+exports.ColorPickerMode = ColorPickerMode;
+//# sourceMappingURL=color-picker-mode.cjs.map

package/dist/components/color-picker/color-picker-mode.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-mode.cjs","sources":["../../../components/color-picker/color-picker-mode.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { type ComponentProps } from 'react';\nimport { Select } from '../select';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\nimport { ModeType, SUPPORTED_MODES } from './utils';\n\nexport interface ColorPickerModeProps\n  extends ComponentProps<typeof Select.Trigger> {\n  options?: ModeType[];\n}\n\nexport const ColorPickerMode = ({\n  className,\n  options = SUPPORTED_MODES,\n  ...props\n}: ColorPickerModeProps) => {\n  const { mode, setMode } = useColorPicker();\n  return (\n    <Select onValueChange={value => setMode(value as ModeType)} value={mode}>\n      <Select.Trigger\n        className={cx(styles.selectTrigger, className)}\n        {...props}\n      >\n        <Select.Value placeholder='Mode' />\n      </Select.Trigger>\n      <Select.Content>\n        {options.map(option => (\n          <Select.Item key={option} value={option}>\n            {option.toUpperCase()}\n          </Select.Item>\n        ))}\n      </Select.Content>\n    </Select>\n  );\n};\n"],"names":["SUPPORTED_MODES","useColorPicker","_jsxs","Select","_jsx","cx","styles"],"mappings":";;;;;;;;;AAYa,MAAA,eAAe,GAAG,CAAC,EAC9B,SAAS,EACT,OAAO,GAAGA,qBAAe,EACzB,GAAG,KAAK,EACa,KAAI;IACzB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAGC,8BAAc,EAAE,CAAC;AAC3C,IAAA,QACEC,iCAAC,CAAAC,aAAM,EAAC,EAAA,aAAa,EAAE,KAAK,IAAI,OAAO,CAAC,KAAiB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAA,QAAA,EAAA,CACrEC,gCAAC,CAAAD,aAAM,CAAC,OAAO,EAAA,EACb,SAAS,EAAEE,QAAE,CAACC,0BAAM,CAAC,aAAa,EAAE,SAAS,CAAC,EAAA,GAC1C,KAAK,EAET,QAAA,EAAAF,gCAAA,CAACD,aAAM,CAAC,KAAK,EAAC,EAAA,WAAW,EAAC,MAAM,EAAA,CAAG,GACpB,EACjBC,gCAAA,CAACD,aAAM,CAAC,OAAO,EACZ,EAAA,QAAA,EAAA,OAAO,CAAC,GAAG,CAAC,MAAM,KACjBC,gCAAA,CAACD,aAAM,CAAC,IAAI,EAAc,EAAA,KAAK,EAAE,MAAM,EAAA,QAAA,EACpC,MAAM,CAAC,WAAW,EAAE,EAAA,EADL,MAAM,CAEV,CACf,CAAC,EACa,CAAA,CAAA,EAAA,CACV,EACT;AACJ;;;;"}

package/dist/components/color-picker/color-picker-mode.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentProps } from 'react';
+import { Select } from '../select';
+import { ModeType } from './utils';
+export interface ColorPickerModeProps extends ComponentProps<typeof Select.Trigger> {
+    options?: ModeType[];
+}
+export declare const ColorPickerMode: ({ className, options, ...props }: ColorPickerModeProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=color-picker-mode.d.ts.map

package/dist/components/color-picker/color-picker-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-mode.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-mode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAGnC,OAAO,EAAE,QAAQ,EAAmB,MAAM,SAAS,CAAC;AAEpD,MAAM,WAAW,oBACf,SAAQ,cAAc,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC;IAC7C,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,qCAIzB,oBAAoB,4CAmBtB,CAAC"}

package/dist/components/color-picker/color-picker-mode.js

@@ -0,0 +1,14 @@
+import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
+import { Select } from '../select/select.js';
+import { useColorPicker } from './color-picker-root.js';
+import styles from './color-picker.module.css.js';
+import { SUPPORTED_MODES } from './utils.js';
+
+const ColorPickerMode = ({ className, options = SUPPORTED_MODES, ...props }) => {
+    const { mode, setMode } = useColorPicker();
+    return (jsxRuntimeExports.jsxs(Select, { onValueChange: value => setMode(value), value: mode, children: [jsxRuntimeExports.jsx(Select.Trigger, { className: cx(styles.selectTrigger, className), ...props, children: jsxRuntimeExports.jsx(Select.Value, { placeholder: 'Mode' }) }), jsxRuntimeExports.jsx(Select.Content, { children: options.map(option => (jsxRuntimeExports.jsx(Select.Item, { value: option, children: option.toUpperCase() }, option))) })] }));
+};
+
+export { ColorPickerMode };
+//# sourceMappingURL=color-picker-mode.js.map

package/dist/components/color-picker/color-picker-mode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-mode.js","sources":["../../../components/color-picker/color-picker-mode.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { type ComponentProps } from 'react';\nimport { Select } from '../select';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\nimport { ModeType, SUPPORTED_MODES } from './utils';\n\nexport interface ColorPickerModeProps\n  extends ComponentProps<typeof Select.Trigger> {\n  options?: ModeType[];\n}\n\nexport const ColorPickerMode = ({\n  className,\n  options = SUPPORTED_MODES,\n  ...props\n}: ColorPickerModeProps) => {\n  const { mode, setMode } = useColorPicker();\n  return (\n    <Select onValueChange={value => setMode(value as ModeType)} value={mode}>\n      <Select.Trigger\n        className={cx(styles.selectTrigger, className)}\n        {...props}\n      >\n        <Select.Value placeholder='Mode' />\n      </Select.Trigger>\n      <Select.Content>\n        {options.map(option => (\n          <Select.Item key={option} value={option}>\n            {option.toUpperCase()}\n          </Select.Item>\n        ))}\n      </Select.Content>\n    </Select>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAYa,MAAA,eAAe,GAAG,CAAC,EAC9B,SAAS,EACT,OAAO,GAAG,eAAe,EACzB,GAAG,KAAK,EACa,KAAI;IACzB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,CAAC;AAC3C,IAAA,QACEA,sBAAC,CAAA,MAAM,EAAC,EAAA,aAAa,EAAE,KAAK,IAAI,OAAO,CAAC,KAAiB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAA,QAAA,EAAA,CACrEC,qBAAC,CAAA,MAAM,CAAC,OAAO,EAAA,EACb,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,EAAA,GAC1C,KAAK,EAET,QAAA,EAAAA,qBAAA,CAAC,MAAM,CAAC,KAAK,EAAC,EAAA,WAAW,EAAC,MAAM,EAAA,CAAG,GACpB,EACjBA,qBAAA,CAAC,MAAM,CAAC,OAAO,EACZ,EAAA,QAAA,EAAA,OAAO,CAAC,GAAG,CAAC,MAAM,KACjBA,qBAAA,CAAC,MAAM,CAAC,IAAI,EAAc,EAAA,KAAK,EAAE,MAAM,EAAA,QAAA,EACpC,MAAM,CAAC,WAAW,EAAE,EAAA,EADL,MAAM,CAEV,CACf,CAAC,EACa,CAAA,CAAA,EAAA,CACV,EACT;AACJ;;;;"}

package/dist/components/color-picker/color-picker-root.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var index = require('../../node_modules/.pnpm/color@5.0.0/node_modules/color/index.cjs');
+var React = require('react');
+var flex = require('../flex/flex.cjs');
+var utils = require('./utils.cjs');
+
+const ColorPickerContext = React.createContext(undefined);
+const useColorPicker = () => {
+    const context = React.useContext(ColorPickerContext);
+    if (!context) {
+        throw new Error('useColorPicker must be used within a ColorPickerProvider');
+    }
+    return context;
+};
+const ColorPickerRoot = ({ value, defaultValue = '#ffffff', onValueChange, defaultMode = 'hex', mode: providedMode, onModeChange, ...props }) => {
+    const providedColor = value && index.default(value).hsl().object();
+    const [internalColor, setInternalColor] = React.useState(index.default(defaultValue).hsl().object());
+    const [internalMode, setInternalMode] = React.useState(defaultMode);
+    const hue = providedColor ? providedColor.h : internalColor.h;
+    const saturation = providedColor ? providedColor.s : internalColor.s;
+    const lightness = providedColor ? providedColor.l : internalColor.l;
+    const alpha = (providedColor ? providedColor?.alpha : internalColor?.alpha) ?? 1;
+    const mode = providedMode ?? internalMode;
+    const setColor = React.useCallback(value => {
+        setInternalColor(_color => {
+            const updatedColor = { ..._color, ...value };
+            if (!onValueChange)
+                return updatedColor;
+            const color = index.default.hsl(updatedColor.h, updatedColor.s, updatedColor.l, updatedColor?.alpha ?? 1);
+            onValueChange(utils.getColorString(color, mode), mode);
+            return updatedColor;
+        });
+    }, [mode, onValueChange]);
+    const setMode = React.useCallback(value => {
+        setInternalMode(value);
+        onModeChange?.(value);
+    }, [onModeChange]);
+    return (jsxRuntime.jsxRuntimeExports.jsx(ColorPickerContext.Provider, { value: {
+            hue,
+            saturation,
+            lightness,
+            alpha,
+            mode,
+            setColor,
+            setMode
+        }, children: jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { direction: 'column', gap: 4, ...props }) }));
+};
+
+exports.ColorPickerRoot = ColorPickerRoot;
+exports.useColorPicker = useColorPicker;
+//# sourceMappingURL=color-picker-root.cjs.map

package/dist/components/color-picker/color-picker-root.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-root.cjs","sources":["../../../components/color-picker/color-picker-root.tsx"],"sourcesContent":["import Color, { type ColorLike } from 'color';\nimport {\n  ComponentPropsWithoutRef,\n  createContext,\n  useCallback,\n  useContext,\n  useState\n} from 'react';\nimport { Flex } from '../flex';\nimport { ColorObject, ModeType, getColorString } from './utils';\n\ntype ColorPickerContextValue = {\n  hue: number;\n  saturation: number;\n  lightness: number;\n  alpha: number;\n  mode: ModeType;\n  setColor: (color: Partial<ColorObject>) => void;\n  setMode: (mode: ModeType) => void;\n};\n\nconst ColorPickerContext = createContext<ColorPickerContextValue | undefined>(\n  undefined\n);\n\nexport const useColorPicker = () => {\n  const context = useContext(ColorPickerContext);\n  if (!context) {\n    throw new Error('useColorPicker must be used within a ColorPickerProvider');\n  }\n  return context;\n};\n\nexport interface ColorPickerProps\n  extends Omit<ComponentPropsWithoutRef<typeof Flex>, 'defaultValue'> {\n  value?: ColorLike;\n  defaultValue?: ColorLike;\n  onValueChange?: (value: string, mode: string) => void;\n  defaultMode?: ModeType;\n  mode?: ModeType;\n  onModeChange?: (mode: ModeType) => void;\n}\nexport const ColorPickerRoot = ({\n  value,\n  defaultValue = '#ffffff',\n  onValueChange,\n  defaultMode = 'hex',\n  mode: providedMode,\n  onModeChange,\n  ...props\n}: ColorPickerProps) => {\n  const providedColor = value && (Color(value).hsl().object() as ColorObject);\n\n  const [internalColor, setInternalColor] = useState(\n    Color(defaultValue).hsl().object() as ColorObject\n  );\n  const [internalMode, setInternalMode] = useState(defaultMode);\n\n  const hue = providedColor ? providedColor.h : internalColor.h;\n  const saturation = providedColor ? providedColor.s : internalColor.s;\n  const lightness = providedColor ? providedColor.l : internalColor.l;\n  const alpha =\n    (providedColor ? providedColor?.alpha : internalColor?.alpha) ?? 1;\n\n  const mode = providedMode ?? internalMode;\n\n  const setColor = useCallback<ColorPickerContextValue['setColor']>(\n    value => {\n      setInternalColor(_color => {\n        const updatedColor = { ..._color, ...value };\n\n        if (!onValueChange) return updatedColor;\n\n        const color = Color.hsl(\n          updatedColor.h,\n          updatedColor.s,\n          updatedColor.l,\n          updatedColor?.alpha ?? 1\n        );\n\n        onValueChange(getColorString(color, mode), mode);\n\n        return updatedColor;\n      });\n    },\n    [mode, onValueChange]\n  );\n\n  const setMode = useCallback<ColorPickerContextValue['setMode']>(\n    value => {\n      setInternalMode(value);\n      onModeChange?.(value);\n    },\n    [onModeChange]\n  );\n\n  return (\n    <ColorPickerContext.Provider\n      value={{\n        hue,\n        saturation,\n        lightness,\n        alpha,\n        mode,\n        setColor,\n        setMode\n      }}\n    >\n      <Flex direction='column' gap={4} {...props} />\n    </ColorPickerContext.Provider>\n  );\n};\n"],"names":["createContext","useContext","Color","useState","useCallback","getColorString","_jsx","Flex"],"mappings":";;;;;;;;AAqBA,MAAM,kBAAkB,GAAGA,mBAAa,CACtC,SAAS,CACV,CAAC;AAEK,MAAM,cAAc,GAAG,MAAK;AACjC,IAAA,MAAM,OAAO,GAAGC,gBAAU,CAAC,kBAAkB,CAAC,CAAC;IAC/C,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAC;KAC7E;AACD,IAAA,OAAO,OAAO,CAAC;AACjB,EAAE;AAWK,MAAM,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,YAAY,GAAG,SAAS,EACxB,aAAa,EACb,WAAW,GAAG,KAAK,EACnB,IAAI,EAAE,YAAY,EAClB,YAAY,EACZ,GAAG,KAAK,EACS,KAAI;AACrB,IAAA,MAAM,aAAa,GAAG,KAAK,IAAKC,aAAK,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,EAAkB,CAAC;AAE5E,IAAA,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,CAChDD,aAAK,CAAC,YAAY,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,EAAiB,CAClD,CAAC;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGC,cAAQ,CAAC,WAAW,CAAC,CAAC;AAE9D,IAAA,MAAM,GAAG,GAAG,aAAa,GAAG,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC;AAC9D,IAAA,MAAM,UAAU,GAAG,aAAa,GAAG,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC;AACrE,IAAA,MAAM,SAAS,GAAG,aAAa,GAAG,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC;AACpE,IAAA,MAAM,KAAK,GACT,CAAC,aAAa,GAAG,aAAa,EAAE,KAAK,GAAG,aAAa,EAAE,KAAK,KAAK,CAAC,CAAC;AAErE,IAAA,MAAM,IAAI,GAAG,YAAY,IAAI,YAAY,CAAC;AAE1C,IAAA,MAAM,QAAQ,GAAGC,iBAAW,CAC1B,KAAK,IAAG;QACN,gBAAgB,CAAC,MAAM,IAAG;YACxB,MAAM,YAAY,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;AAE7C,YAAA,IAAI,CAAC,aAAa;AAAE,gBAAA,OAAO,YAAY,CAAC;YAExC,MAAM,KAAK,GAAGF,aAAK,CAAC,GAAG,CACrB,YAAY,CAAC,CAAC,EACd,YAAY,CAAC,CAAC,EACd,YAAY,CAAC,CAAC,EACd,YAAY,EAAE,KAAK,IAAI,CAAC,CACzB,CAAC;YAEF,aAAa,CAACG,oBAAc,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;AAEjD,YAAA,OAAO,YAAY,CAAC;AACtB,SAAC,CAAC,CAAC;AACL,KAAC,EACD,CAAC,IAAI,EAAE,aAAa,CAAC,CACtB,CAAC;AAEF,IAAA,MAAM,OAAO,GAAGD,iBAAW,CACzB,KAAK,IAAG;QACN,eAAe,CAAC,KAAK,CAAC,CAAC;AACvB,QAAA,YAAY,GAAG,KAAK,CAAC,CAAC;AACxB,KAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;AAEF,IAAA,QACEE,gCAAC,CAAA,kBAAkB,CAAC,QAAQ,EAAA,EAC1B,KAAK,EAAE;YACL,GAAG;YACH,UAAU;YACV,SAAS;YACT,KAAK;YACL,IAAI;YACJ,QAAQ;YACR,OAAO;AACR,SAAA,EAAA,QAAA,EAEDA,gCAAC,CAAAC,SAAI,EAAC,EAAA,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAM,GAAA,KAAK,EAAI,CAAA,EAAA,CAClB,EAC9B;AACJ;;;;;"}

package/dist/components/color-picker/color-picker-root.d.ts

@@ -0,0 +1,25 @@
+import { type ColorLike } from 'color';
+import { ComponentPropsWithoutRef } from 'react';
+import { Flex } from '../flex';
+import { ColorObject, ModeType } from './utils';
+type ColorPickerContextValue = {
+    hue: number;
+    saturation: number;
+    lightness: number;
+    alpha: number;
+    mode: ModeType;
+    setColor: (color: Partial<ColorObject>) => void;
+    setMode: (mode: ModeType) => void;
+};
+export declare const useColorPicker: () => ColorPickerContextValue;
+export interface ColorPickerProps extends Omit<ComponentPropsWithoutRef<typeof Flex>, 'defaultValue'> {
+    value?: ColorLike;
+    defaultValue?: ColorLike;
+    onValueChange?: (value: string, mode: string) => void;
+    defaultMode?: ModeType;
+    mode?: ModeType;
+    onModeChange?: (mode: ModeType) => void;
+}
+export declare const ColorPickerRoot: ({ value, defaultValue, onValueChange, defaultMode, mode: providedMode, onModeChange, ...props }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=color-picker-root.d.ts.map

package/dist/components/color-picker/color-picker-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-root.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-root.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EACL,wBAAwB,EAKzB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAkB,MAAM,SAAS,CAAC;AAEhE,KAAK,uBAAuB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACnC,CAAC;AAMF,eAAO,MAAM,cAAc,+BAM1B,CAAC;AAEF,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,EAAE,cAAc,CAAC;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACzC;AACD,eAAO,MAAM,eAAe,oGAQzB,gBAAgB,4CA6DlB,CAAC"}

package/dist/components/color-picker/color-picker-root.js

@@ -0,0 +1,50 @@
+import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import Color from '../../node_modules/.pnpm/color@5.0.0/node_modules/color/index.js';
+import { createContext, useState, useCallback, useContext } from 'react';
+import { Flex } from '../flex/flex.js';
+import { getColorString } from './utils.js';
+
+const ColorPickerContext = createContext(undefined);
+const useColorPicker = () => {
+    const context = useContext(ColorPickerContext);
+    if (!context) {
+        throw new Error('useColorPicker must be used within a ColorPickerProvider');
+    }
+    return context;
+};
+const ColorPickerRoot = ({ value, defaultValue = '#ffffff', onValueChange, defaultMode = 'hex', mode: providedMode, onModeChange, ...props }) => {
+    const providedColor = value && Color(value).hsl().object();
+    const [internalColor, setInternalColor] = useState(Color(defaultValue).hsl().object());
+    const [internalMode, setInternalMode] = useState(defaultMode);
+    const hue = providedColor ? providedColor.h : internalColor.h;
+    const saturation = providedColor ? providedColor.s : internalColor.s;
+    const lightness = providedColor ? providedColor.l : internalColor.l;
+    const alpha = (providedColor ? providedColor?.alpha : internalColor?.alpha) ?? 1;
+    const mode = providedMode ?? internalMode;
+    const setColor = useCallback(value => {
+        setInternalColor(_color => {
+            const updatedColor = { ..._color, ...value };
+            if (!onValueChange)
+                return updatedColor;
+            const color = Color.hsl(updatedColor.h, updatedColor.s, updatedColor.l, updatedColor?.alpha ?? 1);
+            onValueChange(getColorString(color, mode), mode);
+            return updatedColor;
+        });
+    }, [mode, onValueChange]);
+    const setMode = useCallback(value => {
+        setInternalMode(value);
+        onModeChange?.(value);
+    }, [onModeChange]);
+    return (jsxRuntimeExports.jsx(ColorPickerContext.Provider, { value: {
+            hue,
+            saturation,
+            lightness,
+            alpha,
+            mode,
+            setColor,
+            setMode
+        }, children: jsxRuntimeExports.jsx(Flex, { direction: 'column', gap: 4, ...props }) }));
+};
+
+export { ColorPickerRoot, useColorPicker };
+//# sourceMappingURL=color-picker-root.js.map

package/dist/components/color-picker/color-picker-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-root.js","sources":["../../../components/color-picker/color-picker-root.tsx"],"sourcesContent":["import Color, { type ColorLike } from 'color';\nimport {\n  ComponentPropsWithoutRef,\n  createContext,\n  useCallback,\n  useContext,\n  useState\n} from 'react';\nimport { Flex } from '../flex';\nimport { ColorObject, ModeType, getColorString } from './utils';\n\ntype ColorPickerContextValue = {\n  hue: number;\n  saturation: number;\n  lightness: number;\n  alpha: number;\n  mode: ModeType;\n  setColor: (color: Partial<ColorObject>) => void;\n  setMode: (mode: ModeType) => void;\n};\n\nconst ColorPickerContext = createContext<ColorPickerContextValue | undefined>(\n  undefined\n);\n\nexport const useColorPicker = () => {\n  const context = useContext(ColorPickerContext);\n  if (!context) {\n    throw new Error('useColorPicker must be used within a ColorPickerProvider');\n  }\n  return context;\n};\n\nexport interface ColorPickerProps\n  extends Omit<ComponentPropsWithoutRef<typeof Flex>, 'defaultValue'> {\n  value?: ColorLike;\n  defaultValue?: ColorLike;\n  onValueChange?: (value: string, mode: string) => void;\n  defaultMode?: ModeType;\n  mode?: ModeType;\n  onModeChange?: (mode: ModeType) => void;\n}\nexport const ColorPickerRoot = ({\n  value,\n  defaultValue = '#ffffff',\n  onValueChange,\n  defaultMode = 'hex',\n  mode: providedMode,\n  onModeChange,\n  ...props\n}: ColorPickerProps) => {\n  const providedColor = value && (Color(value).hsl().object() as ColorObject);\n\n  const [internalColor, setInternalColor] = useState(\n    Color(defaultValue).hsl().object() as ColorObject\n  );\n  const [internalMode, setInternalMode] = useState(defaultMode);\n\n  const hue = providedColor ? providedColor.h : internalColor.h;\n  const saturation = providedColor ? providedColor.s : internalColor.s;\n  const lightness = providedColor ? providedColor.l : internalColor.l;\n  const alpha =\n    (providedColor ? providedColor?.alpha : internalColor?.alpha) ?? 1;\n\n  const mode = providedMode ?? internalMode;\n\n  const setColor = useCallback<ColorPickerContextValue['setColor']>(\n    value => {\n      setInternalColor(_color => {\n        const updatedColor = { ..._color, ...value };\n\n        if (!onValueChange) return updatedColor;\n\n        const color = Color.hsl(\n          updatedColor.h,\n          updatedColor.s,\n          updatedColor.l,\n          updatedColor?.alpha ?? 1\n        );\n\n        onValueChange(getColorString(color, mode), mode);\n\n        return updatedColor;\n      });\n    },\n    [mode, onValueChange]\n  );\n\n  const setMode = useCallback<ColorPickerContextValue['setMode']>(\n    value => {\n      setInternalMode(value);\n      onModeChange?.(value);\n    },\n    [onModeChange]\n  );\n\n  return (\n    <ColorPickerContext.Provider\n      value={{\n        hue,\n        saturation,\n        lightness,\n        alpha,\n        mode,\n        setColor,\n        setMode\n      }}\n    >\n      <Flex direction='column' gap={4} {...props} />\n    </ColorPickerContext.Provider>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAqBA,MAAM,kBAAkB,GAAG,aAAa,CACtC,SAAS,CACV,CAAC;AAEK,MAAM,cAAc,GAAG,MAAK;AACjC,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAC/C,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAC;KAC7E;AACD,IAAA,OAAO,OAAO,CAAC;AACjB,EAAE;AAWK,MAAM,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,YAAY,GAAG,SAAS,EACxB,aAAa,EACb,WAAW,GAAG,KAAK,EACnB,IAAI,EAAE,YAAY,EAClB,YAAY,EACZ,GAAG,KAAK,EACS,KAAI;AACrB,IAAA,MAAM,aAAa,GAAG,KAAK,IAAK,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,EAAkB,CAAC;AAE5E,IAAA,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAChD,KAAK,CAAC,YAAY,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,EAAiB,CAClD,CAAC;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAE9D,IAAA,MAAM,GAAG,GAAG,aAAa,GAAG,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC;AAC9D,IAAA,MAAM,UAAU,GAAG,aAAa,GAAG,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC;AACrE,IAAA,MAAM,SAAS,GAAG,aAAa,GAAG,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC;AACpE,IAAA,MAAM,KAAK,GACT,CAAC,aAAa,GAAG,aAAa,EAAE,KAAK,GAAG,aAAa,EAAE,KAAK,KAAK,CAAC,CAAC;AAErE,IAAA,MAAM,IAAI,GAAG,YAAY,IAAI,YAAY,CAAC;AAE1C,IAAA,MAAM,QAAQ,GAAG,WAAW,CAC1B,KAAK,IAAG;QACN,gBAAgB,CAAC,MAAM,IAAG;YACxB,MAAM,YAAY,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;AAE7C,YAAA,IAAI,CAAC,aAAa;AAAE,gBAAA,OAAO,YAAY,CAAC;YAExC,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CACrB,YAAY,CAAC,CAAC,EACd,YAAY,CAAC,CAAC,EACd,YAAY,CAAC,CAAC,EACd,YAAY,EAAE,KAAK,IAAI,CAAC,CACzB,CAAC;YAEF,aAAa,CAAC,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;AAEjD,YAAA,OAAO,YAAY,CAAC;AACtB,SAAC,CAAC,CAAC;AACL,KAAC,EACD,CAAC,IAAI,EAAE,aAAa,CAAC,CACtB,CAAC;AAEF,IAAA,MAAM,OAAO,GAAG,WAAW,CACzB,KAAK,IAAG;QACN,eAAe,CAAC,KAAK,CAAC,CAAC;AACvB,QAAA,YAAY,GAAG,KAAK,CAAC,CAAC;AACxB,KAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;AAEF,IAAA,QACEA,qBAAC,CAAA,kBAAkB,CAAC,QAAQ,EAAA,EAC1B,KAAK,EAAE;YACL,GAAG;YACH,UAAU;YACV,SAAS;YACT,KAAK;YACL,IAAI;YACJ,QAAQ;YACR,OAAO;AACR,SAAA,EAAA,QAAA,EAEDA,qBAAC,CAAA,IAAI,EAAC,EAAA,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAM,GAAA,KAAK,EAAI,CAAA,EAAA,CAClB,EAC9B;AACJ;;;;"}

package/dist/components/color-picker/color-picker.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+var colorPickerAlpha = require('./color-picker-alpha.cjs');
+var colorPickerArea = require('./color-picker-area.cjs');
+var colorPickerHue = require('./color-picker-hue.cjs');
+var colorPickerInput = require('./color-picker-input.cjs');
+var colorPickerMode = require('./color-picker-mode.cjs');
+var colorPickerRoot = require('./color-picker-root.cjs');
+
+const ColorPicker = Object.assign(colorPickerRoot.ColorPickerRoot, {
+    Area: colorPickerArea.ColorPickerArea,
+    Hue: colorPickerHue.ColorPickerHue,
+    Alpha: colorPickerAlpha.ColorPickerAlpha,
+    Input: colorPickerInput.ColorPickerInput,
+    Mode: colorPickerMode.ColorPickerMode
+});
+
+exports.ColorPicker = ColorPicker;
+//# sourceMappingURL=color-picker.cjs.map

package/dist/components/color-picker/color-picker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.cjs","sources":["../../../components/color-picker/color-picker.tsx"],"sourcesContent":["import { ColorPickerAlpha } from './color-picker-alpha';\nimport { ColorPickerArea } from './color-picker-area';\nimport { ColorPickerHue } from './color-picker-hue';\nimport { ColorPickerInput } from './color-picker-input';\nimport { ColorPickerMode } from './color-picker-mode';\nimport { ColorPickerRoot } from './color-picker-root';\n\nexport const ColorPicker = Object.assign(ColorPickerRoot, {\n  Area: ColorPickerArea,\n  Hue: ColorPickerHue,\n  Alpha: ColorPickerAlpha,\n  Input: ColorPickerInput,\n  Mode: ColorPickerMode\n});\n"],"names":["ColorPickerRoot","ColorPickerArea","ColorPickerHue","ColorPickerAlpha","ColorPickerInput","ColorPickerMode"],"mappings":";;;;;;;;;MAOa,WAAW,GAAG,MAAM,CAAC,MAAM,CAACA,+BAAe,EAAE;AACxD,IAAA,IAAI,EAAEC,+BAAe;AACrB,IAAA,GAAG,EAAEC,6BAAc;AACnB,IAAA,KAAK,EAAEC,iCAAgB;AACvB,IAAA,KAAK,EAAEC,iCAAgB;AACvB,IAAA,IAAI,EAAEC,+BAAe;AACtB,CAAA;;;;"}