@raystack/apsara 0.56.7 → 1.0.0-rc.1

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

@@ -1,5 +1,7 @@
-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;
+import { Slider } from '@base-ui/react/slider';
+export type ColorPickerAlphaProps = Slider.Root.Props;
+export declare const ColorPickerAlpha: {
+    ({ className, ...props }: ColorPickerAlphaProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=color-picker-alpha.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-alpha.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-alpha.tsx"],"names":[],"mappings":"AAGA,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"}
+{"version":3,"file":"color-picker-alpha.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-alpha.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAK/C,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;AAEtD,eAAO,MAAM,gBAAgB;8BAG1B,qBAAqB;;CAqBvB,CAAC"}

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

@@ -1,14 +1,15 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Slider } from '@base-ui/react/slider';
 import { cx } from 'class-variance-authority';
-import { Slider } from 'radix-ui';
-import { useColorPicker } from './color-picker-root.js';
 import styles from './color-picker.module.css.js';
+import { useColorPicker } from './color-picker-root.js';
 
 const ColorPickerAlpha = ({ className, ...props }) => {
     const { alpha = 1, setColor } = useColorPicker();
-    return (jsxs(Slider.Root, { className: cx(styles.sliderRoot, className), max: 100, onValueChange: ([alpha]) => setColor({ alpha: alpha / 100 }), step: 1, value: [alpha * 100], ...props, children: [jsxs(Slider.Track, { className: cx(styles.sliderTrack, styles.alphaTrack), children: [jsx("div", { className: styles.alphaTrackGradient }), jsx(Slider.Range, { className: styles.sliderRange })] }), jsx(Slider.Thumb, { className: styles.sliderThumb })] }));
+    return (jsx(Slider.Root, { className: cx(styles.sliderRoot, className), max: 100, onValueChange: value => setColor({ alpha: value / 100 }), step: 1, value: alpha * 100, thumbAlignment: 'edge', ...props, children: jsx(Slider.Control, { className: styles.sliderControl, children: jsxs(Slider.Track, { className: cx(styles.sliderTrack, styles.alphaTrack), children: [jsx("div", { className: styles.alphaTrackGradient }), jsx(Slider.Indicator, { className: styles.sliderRange }), jsx(Slider.Thumb, { className: styles.sliderThumb, "aria-label": 'Alpha' })] }) }) }));
 };
+ColorPickerAlpha.displayName = 'ColorPicker.Alpha';
 
 export { ColorPickerAlpha };
 //# sourceMappingURL=color-picker-alpha.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-alpha.js","sources":["../../../components/color-picker/color-picker-alpha.tsx"],"sourcesContent":["'use client';\n\nimport { 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":[],"mappings":";;;;;;;AAUO;;;AAqBP;;"}
+{"version":3,"file":"color-picker-alpha.js","sources":["../../../components/color-picker/color-picker-alpha.tsx"],"sourcesContent":["'use client';\n\nimport { Slider } from '@base-ui/react/slider';\nimport { cx } from 'class-variance-authority';\nimport styles from './color-picker.module.css';\nimport { useColorPicker } from './color-picker-root';\n\nexport type ColorPickerAlphaProps = Slider.Root.Props;\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={value => setColor({ alpha: (value as number) / 100 })}\n      step={1}\n      value={alpha * 100}\n      thumbAlignment='edge'\n      {...props}\n    >\n      <Slider.Control className={styles.sliderControl}>\n        <Slider.Track className={cx(styles.sliderTrack, styles.alphaTrack)}>\n          <div className={styles.alphaTrackGradient} />\n          <Slider.Indicator className={styles.sliderRange} />\n          <Slider.Thumb className={styles.sliderThumb} aria-label='Alpha' />\n        </Slider.Track>\n      </Slider.Control>\n    </Slider.Root>\n  );\n};\n\nColorPickerAlpha.displayName = 'ColorPicker.Alpha';\n"],"names":[],"mappings":";;;;;;;AASO;;;AAwBP;AAEA;;"}

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

@@ -5,8 +5,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
 var Color = require('color');
 var React = require('react');
-var colorPickerRoot = require('./color-picker-root.cjs');
 var colorPicker_module = require('./color-picker.module.css.cjs');
+var colorPickerRoot = require('./color-picker-root.cjs');
 
 const ColorPickerArea = ({ className, ...props }) => {
     const containerRef = React.useRef(null);
@@ -69,6 +69,7 @@ const ColorPickerArea = ({ className, ...props }) => {
                 opacity: 0
             } }) }));
 };
+ColorPickerArea.displayName = 'ColorPicker.Area';
 
 exports.ColorPickerArea = ColorPickerArea;
 //# sourceMappingURL=color-picker-area.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-area.cjs","sources":["../../../components/color-picker/color-picker-area.tsx"],"sourcesContent":["'use client';\n\nimport { 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":[],"mappings":";;;;;;;;;;AAiBO;AAIL;AACA;AACA;AACA;AAEA;AACA;AAEA;;;AAGgB;AAChB;;;;;;;;;AAWE;AACA;;AAGA;AACE;;;AAGJ;AAEA;AAEI;;;;;;AAMA;AAIA;AAIA;;;;AAIF;AAIF;AACE;AACA;AACA;AACF;AAEA;;AAGI;AACA;AACA;AACA;AACF;;AAUI;;AAQE;AACA;;AAKV;;"}
+{"version":3,"file":"color-picker-area.cjs","sources":["../../../components/color-picker/color-picker-area.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport Color from 'color';\nimport {\n  ComponentProps,\n  PointerEvent as ReactPointerEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef\n} from 'react';\nimport styles from './color-picker.module.css';\nimport { useColorPicker } from './color-picker-root';\n\nexport type ColorPickerAreaProps = ComponentProps<'div'>;\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\nColorPickerArea.displayName = 'ColorPicker.Area';\n"],"names":[],"mappings":";;;;;;;;;;AAiBO;AAIL;AACA;AACA;AACA;AAEA;AACA;AAEA;;;AAGgB;AAChB;;;;;;;;;AAWE;AACA;;AAGA;AACE;;;AAGJ;AAEA;AAEI;;;;;;AAMA;AAIA;AAIA;;;;AAIF;AAIF;AACE;AACA;AACA;AACF;AAEA;;AAGI;AACA;AACA;AACA;AACF;;AAUI;;AAQE;AACA;;AAKV;AAEA;;"}

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

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

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

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

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

@@ -3,8 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { cx } from 'class-variance-authority';
 import Color from 'color';
 import { useRef, useMemo, useEffect, useCallback } from 'react';
-import { useColorPicker } from './color-picker-root.js';
 import styles from './color-picker.module.css.js';
+import { useColorPicker } from './color-picker-root.js';
 
 const ColorPickerArea = ({ className, ...props }) => {
     const containerRef = useRef(null);
@@ -67,6 +67,7 @@ const ColorPickerArea = ({ className, ...props }) => {
                 opacity: 0
             } }) }));
 };
+ColorPickerArea.displayName = 'ColorPicker.Area';
 
 export { ColorPickerArea };
 //# sourceMappingURL=color-picker-area.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-area.js","sources":["../../../components/color-picker/color-picker-area.tsx"],"sourcesContent":["'use client';\n\nimport { 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":[],"mappings":";;;;;;;;AAiBO;AAIL;AACA;AACA;AACA;AAEA;AACA;AAEA;;;AAGgB;AAChB;;;;;;;;;AAWE;AACA;;AAGA;AACE;;;AAGJ;AAEA;AAEI;;;;;;AAMA;AAIA;AAIA;;;;AAIF;AAIF;AACE;AACA;AACA;AACF;AAEA;;AAGI;AACA;AACA;AACA;AACF;;AAUI;;AAQE;AACA;;AAKV;;"}
+{"version":3,"file":"color-picker-area.js","sources":["../../../components/color-picker/color-picker-area.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport Color from 'color';\nimport {\n  ComponentProps,\n  PointerEvent as ReactPointerEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef\n} from 'react';\nimport styles from './color-picker.module.css';\nimport { useColorPicker } from './color-picker-root';\n\nexport type ColorPickerAreaProps = ComponentProps<'div'>;\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\nColorPickerArea.displayName = 'ColorPicker.Area';\n"],"names":[],"mappings":";;;;;;;;AAiBO;AAIL;AACA;AACA;AACA;AAEA;AACA;AAEA;;;AAGgB;AAChB;;;;;;;;;AAWE;AACA;;AAGA;AACE;;;AAGJ;AAEA;AAEI;;;;;;AAMA;AAIA;AAIA;;;;AAIF;AAIF;AACE;AACA;AACA;AACF;AAEA;;AAGI;AACA;AACA;AACA;AACF;;AAUI;;AAQE;AACA;;AAKV;AAEA;;"}

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

@@ -2,15 +2,16 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var slider = require('@base-ui/react/slider');
 var classVarianceAuthority = require('class-variance-authority');
-var radixUi = require('radix-ui');
-var colorPickerRoot = require('./color-picker-root.cjs');
 var colorPicker_module = require('./color-picker.module.css.cjs');
+var colorPickerRoot = require('./color-picker-root.cjs');
 
 const ColorPickerHue = ({ className, ...props }) => {
     const { hue, setColor } = colorPickerRoot.useColorPicker();
-    return (jsxRuntime.jsxs(radixUi.Slider.Root, { className: classVarianceAuthority.cx(colorPicker_module.default.sliderRoot, className), max: 360, onValueChange: ([hue]) => setColor({ h: hue }), step: 1, value: [hue], ...props, children: [jsxRuntime.jsx(radixUi.Slider.Track, { className: classVarianceAuthority.cx(colorPicker_module.default.sliderTrack, colorPicker_module.default.hueTrack), children: jsxRuntime.jsx(radixUi.Slider.Range, { className: colorPicker_module.default.sliderRange }) }), jsxRuntime.jsx(radixUi.Slider.Thumb, { className: colorPicker_module.default.sliderThumb })] }));
+    return (jsxRuntime.jsx(slider.Slider.Root, { className: classVarianceAuthority.cx(colorPicker_module.default.sliderRoot, className), max: 360, onValueChange: value => setColor({ h: value }), step: 1, value: hue, thumbAlignment: 'edge', ...props, children: jsxRuntime.jsx(slider.Slider.Control, { className: colorPicker_module.default.sliderControl, children: jsxRuntime.jsxs(slider.Slider.Track, { className: classVarianceAuthority.cx(colorPicker_module.default.sliderTrack, colorPicker_module.default.hueTrack), children: [jsxRuntime.jsx(slider.Slider.Indicator, { className: colorPicker_module.default.sliderRange }), jsxRuntime.jsx(slider.Slider.Thumb, { className: colorPicker_module.default.sliderThumb, "aria-label": 'Hue' })] }) }) }));
 };
+ColorPickerHue.displayName = 'ColorPicker.Hue';
 
 exports.ColorPickerHue = ColorPickerHue;
 //# sourceMappingURL=color-picker-hue.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-hue.cjs","sources":["../../../components/color-picker/color-picker-hue.tsx"],"sourcesContent":["'use client';\n\nimport { 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":[],"mappings":";;;;;;;;;AASO;;;AAoBP;;"}
+{"version":3,"file":"color-picker-hue.cjs","sources":["../../../components/color-picker/color-picker-hue.tsx"],"sourcesContent":["'use client';\n\nimport { Slider } from '@base-ui/react/slider';\nimport { cx } from 'class-variance-authority';\nimport styles from './color-picker.module.css';\nimport { useColorPicker } from './color-picker-root';\n\nexport type ColorPickerHueProps = Slider.Root.Props;\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={value => setColor({ h: value as number })}\n      step={1}\n      value={hue}\n      thumbAlignment='edge'\n      {...props}\n    >\n      <Slider.Control className={styles.sliderControl}>\n        <Slider.Track className={cx(styles.sliderTrack, styles.hueTrack)}>\n          <Slider.Indicator className={styles.sliderRange} />\n          <Slider.Thumb className={styles.sliderThumb} aria-label='Hue' />\n        </Slider.Track>\n      </Slider.Control>\n    </Slider.Root>\n  );\n};\n\nColorPickerHue.displayName = 'ColorPicker.Hue';\n"],"names":[],"mappings":";;;;;;;;;AAQO;;;AAuBP;AAEA;;"}

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

@@ -1,5 +1,7 @@
-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;
+import { Slider } from '@base-ui/react/slider';
+export type ColorPickerHueProps = Slider.Root.Props;
+export declare const ColorPickerHue: {
+    ({ className, ...props }: ColorPickerHueProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=color-picker-hue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-hue.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-hue.tsx"],"names":[],"mappings":"AAGA,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"}
+{"version":3,"file":"color-picker-hue.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-hue.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAK/C,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;AACpD,eAAO,MAAM,cAAc;8BAGxB,mBAAmB;;CAoBrB,CAAC"}

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

@@ -1,14 +1,15 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Slider } from '@base-ui/react/slider';
 import { cx } from 'class-variance-authority';
-import { Slider } from 'radix-ui';
-import { useColorPicker } from './color-picker-root.js';
 import styles from './color-picker.module.css.js';
+import { useColorPicker } from './color-picker-root.js';
 
 const ColorPickerHue = ({ className, ...props }) => {
     const { hue, setColor } = useColorPicker();
-    return (jsxs(Slider.Root, { className: cx(styles.sliderRoot, className), max: 360, onValueChange: ([hue]) => setColor({ h: hue }), step: 1, value: [hue], ...props, children: [jsx(Slider.Track, { className: cx(styles.sliderTrack, styles.hueTrack), children: jsx(Slider.Range, { className: styles.sliderRange }) }), jsx(Slider.Thumb, { className: styles.sliderThumb })] }));
+    return (jsx(Slider.Root, { className: cx(styles.sliderRoot, className), max: 360, onValueChange: value => setColor({ h: value }), step: 1, value: hue, thumbAlignment: 'edge', ...props, children: jsx(Slider.Control, { className: styles.sliderControl, children: jsxs(Slider.Track, { className: cx(styles.sliderTrack, styles.hueTrack), children: [jsx(Slider.Indicator, { className: styles.sliderRange }), jsx(Slider.Thumb, { className: styles.sliderThumb, "aria-label": 'Hue' })] }) }) }));
 };
+ColorPickerHue.displayName = 'ColorPicker.Hue';
 
 export { ColorPickerHue };
 //# sourceMappingURL=color-picker-hue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-hue.js","sources":["../../../components/color-picker/color-picker-hue.tsx"],"sourcesContent":["'use client';\n\nimport { 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":[],"mappings":";;;;;;;AASO;;;AAoBP;;"}
+{"version":3,"file":"color-picker-hue.js","sources":["../../../components/color-picker/color-picker-hue.tsx"],"sourcesContent":["'use client';\n\nimport { Slider } from '@base-ui/react/slider';\nimport { cx } from 'class-variance-authority';\nimport styles from './color-picker.module.css';\nimport { useColorPicker } from './color-picker-root';\n\nexport type ColorPickerHueProps = Slider.Root.Props;\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={value => setColor({ h: value as number })}\n      step={1}\n      value={hue}\n      thumbAlignment='edge'\n      {...props}\n    >\n      <Slider.Control className={styles.sliderControl}>\n        <Slider.Track className={cx(styles.sliderTrack, styles.hueTrack)}>\n          <Slider.Indicator className={styles.sliderRange} />\n          <Slider.Thumb className={styles.sliderThumb} aria-label='Hue' />\n        </Slider.Track>\n      </Slider.Control>\n    </Slider.Root>\n  );\n};\n\nColorPickerHue.displayName = 'ColorPicker.Hue';\n"],"names":[],"mappings":";;;;;;;AAQO;;;AAuBP;AAEA;;"}

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

@@ -12,6 +12,7 @@ const ColorPickerInput = (props) => {
     const color = Color.hsl(hue, saturation, lightness, alpha ?? 1);
     return jsxRuntime.jsx(inputField.InputField, { value: utils.getColorString(color, mode), readOnly: true, ...props });
 };
+ColorPickerInput.displayName = 'ColorPicker.Input';
 
 exports.ColorPickerInput = ColorPickerInput;
 //# sourceMappingURL=color-picker-input.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-input.cjs","sources":["../../../components/color-picker/color-picker-input.tsx"],"sourcesContent":["'use client';\n\nimport 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":[],"mappings":";;;;;;;;;AAQa;AAGX;AACA;AAEA;AACF;;"}
+{"version":3,"file":"color-picker-input.cjs","sources":["../../../components/color-picker/color-picker-input.tsx"],"sourcesContent":["'use client';\n\nimport Color from 'color';\nimport { ComponentProps } from 'react';\nimport { InputField } from '../input-field';\nimport { useColorPicker } from './color-picker-root';\nimport { getColorString } from './utils';\n\nexport const ColorPickerInput = (props: ComponentProps<typeof InputField>) => {\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\nColorPickerInput.displayName = 'ColorPicker.Input';\n"],"names":[],"mappings":";;;;;;;;;AAQa;AACX;AACA;AAEA;AACF;AAEA;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-input.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-input.tsx"],"names":[],"mappings":"AAGA,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"}
+{"version":3,"file":"color-picker-input.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-input.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI5C,eAAO,MAAM,gBAAgB;YAAW,eAAe,iBAAiB,CAAC;;CAKxE,CAAC"}

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

@@ -10,6 +10,7 @@ const ColorPickerInput = (props) => {
     const color = Color.hsl(hue, saturation, lightness, alpha ?? 1);
     return jsx(InputField, { value: getColorString(color, mode), readOnly: true, ...props });
 };
+ColorPickerInput.displayName = 'ColorPicker.Input';
 
 export { ColorPickerInput };
 //# sourceMappingURL=color-picker-input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-input.js","sources":["../../../components/color-picker/color-picker-input.tsx"],"sourcesContent":["'use client';\n\nimport 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":[],"mappings":";;;;;;;AAQa;AAGX;AACA;AAEA;AACF;;"}
+{"version":3,"file":"color-picker-input.js","sources":["../../../components/color-picker/color-picker-input.tsx"],"sourcesContent":["'use client';\n\nimport Color from 'color';\nimport { ComponentProps } from 'react';\nimport { InputField } from '../input-field';\nimport { useColorPicker } from './color-picker-root';\nimport { getColorString } from './utils';\n\nexport const ColorPickerInput = (props: ComponentProps<typeof InputField>) => {\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\nColorPickerInput.displayName = 'ColorPicker.Input';\n"],"names":[],"mappings":";;;;;;;AAQa;AACX;AACA;AAEA;AACF;AAEA;;"}

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

@@ -4,14 +4,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
 var select = require('../select/select.cjs');
-var colorPickerRoot = require('./color-picker-root.cjs');
 var colorPicker_module = require('./color-picker.module.css.cjs');
+var colorPickerRoot = require('./color-picker-root.cjs');
 var utils = require('./utils.cjs');
 
 const ColorPickerMode = ({ className, options = utils.SUPPORTED_MODES, ...props }) => {
     const { mode, setMode } = colorPickerRoot.useColorPicker();
     return (jsxRuntime.jsxs(select.Select, { onValueChange: value => setMode(value), value: mode, children: [jsxRuntime.jsx(select.Select.Trigger, { className: classVarianceAuthority.cx(colorPicker_module.default.selectTrigger, className), ...props, children: jsxRuntime.jsx(select.Select.Value, { placeholder: 'Mode' }) }), jsxRuntime.jsx(select.Select.Content, { children: options.map(option => (jsxRuntime.jsx(select.Select.Item, { value: option, children: option.toUpperCase() }, option))) })] }));
 };
+ColorPickerMode.displayName = 'ColorPicker.Mode';
 
 exports.ColorPickerMode = ColorPickerMode;
 //# sourceMappingURL=color-picker-mode.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-mode.cjs","sources":["../../../components/color-picker/color-picker-mode.tsx"],"sourcesContent":["'use client';\n\nimport { 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":[],"mappings":";;;;;;;;;;AAca;;AAMX;AAiBF;;"}
+{"version":3,"file":"color-picker-mode.cjs","sources":["../../../components/color-picker/color-picker-mode.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { type ComponentProps } from 'react';\nimport { Select } from '../select';\nimport styles from './color-picker.module.css';\nimport { useColorPicker } from './color-picker-root';\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\nColorPickerMode.displayName = 'ColorPicker.Mode';\n"],"names":[],"mappings":";;;;;;;;;;AAca;;AAMX;AAiBF;AAEA;;"}

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

@@ -4,5 +4,8 @@ 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;
+export declare const ColorPickerMode: {
+    ({ className, options, ...props }: ColorPickerModeProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=color-picker-mode.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-mode.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-mode.tsx"],"names":[],"mappings":"AAGA,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"}
+{"version":3,"file":"color-picker-mode.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-mode.tsx"],"names":[],"mappings":"AAGA,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;uCAIzB,oBAAoB;;CAmBtB,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-mode.js","sources":["../../../components/color-picker/color-picker-mode.tsx"],"sourcesContent":["'use client';\n\nimport { 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":[],"mappings":";;;;;;;;AAca;;AAMX;AAiBF;;"}
+{"version":3,"file":"color-picker-mode.js","sources":["../../../components/color-picker/color-picker-mode.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { type ComponentProps } from 'react';\nimport { Select } from '../select';\nimport styles from './color-picker.module.css';\nimport { useColorPicker } from './color-picker-root';\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\nColorPickerMode.displayName = 'ColorPicker.Mode';\n"],"names":[],"mappings":";;;;;;;;AAca;;AAMX;AAiBF;AAEA;;"}

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

@@ -38,7 +38,7 @@ const ColorPickerRoot = ({ value, defaultValue = '#ffffff', onValueChange, defau
         setInternalMode(value);
         onModeChange?.(value);
     }, [onModeChange]);
-    return (jsxRuntime.jsx(ColorPickerContext.Provider, { value: {
+    return (jsxRuntime.jsx(ColorPickerContext, { value: {
             hue,
             saturation,
             lightness,
@@ -48,6 +48,7 @@ const ColorPickerRoot = ({ value, defaultValue = '#ffffff', onValueChange, defau
             setMode
         }, children: jsxRuntime.jsx(flex.Flex, { direction: 'column', gap: 4, ...props }) }));
 };
+ColorPickerRoot.displayName = 'ColorPicker';
 
 exports.ColorPickerRoot = ColorPickerRoot;
 exports.useColorPicker = useColorPicker;

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-root.cjs","sources":["../../../components/color-picker/color-picker-root.tsx"],"sourcesContent":["'use client';\n\nimport 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":[],"mappings":";;;;;;;;;AAuBA;AAIO;AACL;;AAEE;;AAEF;AACF;AAWO;AASL;AAEA;;AAKA;AACA;AACA;AACA;AAGA;AAEA;;;AAKM;AAAoB;;;AAWpB;AACF;AACF;AAIF;;AAGI;AACF;AAIF;;;;;;;;AAUK;AAKP;;;"}
+{"version":3,"file":"color-picker-root.cjs","sources":["../../../components/color-picker/color-picker-root.tsx"],"sourcesContent":["'use client';\n\nimport Color, { type ColorLike } from 'color';\nimport {\n  ComponentProps,\n  createContext,\n  useCallback,\n  useContext,\n  useState\n} from 'react';\nimport { Flex } from '../flex';\nimport { ColorObject, getColorString, ModeType } 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<ComponentProps<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\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>\n  );\n};\n\nColorPickerRoot.displayName = 'ColorPicker';\n"],"names":[],"mappings":";;;;;;;;;AAuBA;AAIO;AACL;;AAEE;;AAEF;AACF;AAWO;AASL;AAEA;;AAKA;AACA;AACA;AACA;AAGA;AAEA;;;AAKM;AAAoB;;;AAWpB;AACF;AACF;AAIF;;AAGI;AACF;AAIF;;;;;;;;AAUK;AAKP;AAEA;;;"}

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

@@ -1,5 +1,5 @@
 import { type ColorLike } from 'color';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentProps } from 'react';
 import { Flex } from '../flex';
 import { ColorObject, ModeType } from './utils';
 type ColorPickerContextValue = {
@@ -12,7 +12,7 @@ type ColorPickerContextValue = {
     setMode: (mode: ModeType) => void;
 };
 export declare const useColorPicker: () => ColorPickerContextValue;
-export interface ColorPickerProps extends Omit<ComponentPropsWithoutRef<typeof Flex>, 'defaultValue'> {
+export interface ColorPickerProps extends Omit<ComponentProps<typeof Flex>, 'defaultValue'> {
     value?: ColorLike;
     defaultValue?: ColorLike;
     onValueChange?: (value: string, mode: string) => void;
@@ -20,6 +20,9 @@ export interface ColorPickerProps extends Omit<ComponentPropsWithoutRef<typeof F
     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 declare const ColorPickerRoot: {
+    ({ value, defaultValue, onValueChange, defaultMode, mode: providedMode, onModeChange, ...props }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};
 //# sourceMappingURL=color-picker-root.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-root.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-root.tsx"],"names":[],"mappings":"AAEA,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"}
+{"version":3,"file":"color-picker-root.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-root.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EACL,cAAc,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAkB,QAAQ,EAAE,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,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,cAAc,CAAC;IACzD,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;sGAQzB,gBAAgB;;CA6DlB,CAAC"}

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

@@ -36,7 +36,7 @@ const ColorPickerRoot = ({ value, defaultValue = '#ffffff', onValueChange, defau
         setInternalMode(value);
         onModeChange?.(value);
     }, [onModeChange]);
-    return (jsx(ColorPickerContext.Provider, { value: {
+    return (jsx(ColorPickerContext, { value: {
             hue,
             saturation,
             lightness,
@@ -46,6 +46,7 @@ const ColorPickerRoot = ({ value, defaultValue = '#ffffff', onValueChange, defau
             setMode
         }, children: jsx(Flex, { direction: 'column', gap: 4, ...props }) }));
 };
+ColorPickerRoot.displayName = 'ColorPicker';
 
 export { ColorPickerRoot, useColorPicker };
 //# sourceMappingURL=color-picker-root.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-root.js","sources":["../../../components/color-picker/color-picker-root.tsx"],"sourcesContent":["'use client';\n\nimport 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":[],"mappings":";;;;;;;AAuBA;AAIO;AACL;;AAEE;;AAEF;AACF;AAWO;AASL;AAEA;;AAKA;AACA;AACA;AACA;AAGA;AAEA;;;AAKM;AAAoB;;;AAWpB;AACF;AACF;AAIF;;AAGI;AACF;AAIF;;;;;;;;AAUK;AAKP;;"}
+{"version":3,"file":"color-picker-root.js","sources":["../../../components/color-picker/color-picker-root.tsx"],"sourcesContent":["'use client';\n\nimport Color, { type ColorLike } from 'color';\nimport {\n  ComponentProps,\n  createContext,\n  useCallback,\n  useContext,\n  useState\n} from 'react';\nimport { Flex } from '../flex';\nimport { ColorObject, getColorString, ModeType } 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<ComponentProps<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\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>\n  );\n};\n\nColorPickerRoot.displayName = 'ColorPicker';\n"],"names":[],"mappings":";;;;;;;AAuBA;AAIO;AACL;;AAEE;;AAEF;AACF;AAWO;AASL;AAEA;;AAKA;AACA;AACA;AACA;AAGA;AAEA;;;AAKM;AAAoB;;;AAWpB;AACF;AACF;AAIF;;AAGI;AACF;AAIF;;;;;;;;AAUK;AAKP;AAEA;;"}

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

@@ -0,0 +1,26 @@
+export declare const ColorPicker: {
+    ({ value, defaultValue, onValueChange, defaultMode, mode: providedMode, onModeChange, ...props }: import("./color-picker-root").ColorPickerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Area: {
+        ({ className, ...props }: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Hue: {
+        ({ className, ...props }: import("./color-picker-hue").ColorPickerHueProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Alpha: {
+        ({ className, ...props }: import("./color-picker-alpha").ColorPickerAlphaProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Input: {
+        (props: import("../input-field/input-field").InputFieldProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Mode: {
+        ({ className, options, ...props }: import("./color-picker-mode").ColorPickerModeProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+//# sourceMappingURL=color-picker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;CAMtB,CAAC"}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"sliderRoot":"color-picker-module_sliderRoot__Nbq80","sliderRange":"color-picker-module_sliderRange__yCQ1V","sliderTrack":"color-picker-module_sliderTrack__aXp7n","hueTrack":"color-picker-module_hueTrack__wx1Wz","sliderThumb":"color-picker-module_sliderThumb__oN9nI","alphaTrack":"color-picker-module_alphaTrack__QySYG","alphaTrackGradient":"color-picker-module_alphaTrackGradient__QxdDS","selectTrigger":"color-picker-module_selectTrigger__hwv-W","selectionRoot":"color-picker-module_selectionRoot__ez-fs","selectionThumb":"color-picker-module_selectionThumb__gk6OK"};
+var styles = {"sliderRoot":"color-picker-module_sliderRoot__Nbq80","sliderControl":"color-picker-module_sliderControl__kQPiC","sliderRange":"color-picker-module_sliderRange__yCQ1V","sliderTrack":"color-picker-module_sliderTrack__aXp7n","hueTrack":"color-picker-module_hueTrack__wx1Wz","sliderThumb":"color-picker-module_sliderThumb__oN9nI","alphaTrack":"color-picker-module_alphaTrack__QySYG","alphaTrackGradient":"color-picker-module_alphaTrackGradient__QxdDS","selectTrigger":"color-picker-module_selectTrigger__hwv-W","selectionRoot":"color-picker-module_selectionRoot__ez-fs","selectionThumb":"color-picker-module_selectionThumb__gk6OK"};
 
 exports.default = styles;
 //# sourceMappingURL=color-picker.module.css.cjs.map

package/dist/components/color-picker/color-picker.module.css.js

@@ -1,4 +1,4 @@
-var styles = {"sliderRoot":"color-picker-module_sliderRoot__Nbq80","sliderRange":"color-picker-module_sliderRange__yCQ1V","sliderTrack":"color-picker-module_sliderTrack__aXp7n","hueTrack":"color-picker-module_hueTrack__wx1Wz","sliderThumb":"color-picker-module_sliderThumb__oN9nI","alphaTrack":"color-picker-module_alphaTrack__QySYG","alphaTrackGradient":"color-picker-module_alphaTrackGradient__QxdDS","selectTrigger":"color-picker-module_selectTrigger__hwv-W","selectionRoot":"color-picker-module_selectionRoot__ez-fs","selectionThumb":"color-picker-module_selectionThumb__gk6OK"};
+var styles = {"sliderRoot":"color-picker-module_sliderRoot__Nbq80","sliderControl":"color-picker-module_sliderControl__kQPiC","sliderRange":"color-picker-module_sliderRange__yCQ1V","sliderTrack":"color-picker-module_sliderTrack__aXp7n","hueTrack":"color-picker-module_hueTrack__wx1Wz","sliderThumb":"color-picker-module_sliderThumb__oN9nI","alphaTrack":"color-picker-module_alphaTrack__QySYG","alphaTrackGradient":"color-picker-module_alphaTrackGradient__QxdDS","selectTrigger":"color-picker-module_selectTrigger__hwv-W","selectionRoot":"color-picker-module_selectionRoot__ez-fs","selectionThumb":"color-picker-module_selectionThumb__gk6OK"};
 
 export { styles as default };
 //# sourceMappingURL=color-picker.module.css.js.map

package/dist/components/combobox/combobox-content.cjs

@@ -2,38 +2,16 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('@ariakit/react');
+var react = require('@base-ui/react');
 var classVarianceAuthority = require('class-variance-authority');
-var radixUi = require('radix-ui');
-var React = require('react');
 var combobox_module = require('./combobox.module.css.cjs');
 var comboboxRoot = require('./combobox-root.cjs');
 
-const ComboboxContent = React.forwardRef(({ className, children, sideOffset = 4, align = 'start', onOpenAutoFocus, onInteractOutside, onFocusOutside, ...props }, ref) => {
-    const { inputRef, listRef, value, setInputValue, multiple } = comboboxRoot.useComboboxContext();
-    const handleOnInteractOutside = React.useCallback(event => {
-        const target = event.target;
-        const isInput = target === inputRef.current;
-        const inListbox = target && listRef.current?.contains(target);
-        if (isInput || inListbox) {
-            event.preventDefault();
-            return;
-        }
-        if (!multiple) {
-            if (typeof value === 'string' && value.length)
-                setInputValue(value);
-            else
-                setInputValue('');
-        }
-        onInteractOutside?.(event);
-    }, [onInteractOutside, inputRef, listRef, multiple, value, setInputValue]);
-    const handleOnOpenAutoFocus = React.useCallback(event => {
-        event.preventDefault();
-        onOpenAutoFocus?.(event);
-    }, [onOpenAutoFocus]);
-    return (jsxRuntime.jsx(radixUi.Popover.Portal, { children: jsxRuntime.jsx(radixUi.Popover.Content, { ref: ref, sideOffset: sideOffset, align: align, className: classVarianceAuthority.cx(combobox_module.default.content, className), onOpenAutoFocus: handleOnOpenAutoFocus, onInteractOutside: handleOnInteractOutside, ...props, children: jsxRuntime.jsx(react.ComboboxList, { ref: listRef, role: 'listbox', className: combobox_module.default.list, children: children }) }) }));
-});
-ComboboxContent.displayName = 'ComboboxContent';
+const ComboboxContent = ({ ref, className, children, style, render, initialFocus, finalFocus, sideOffset = 4, ...positionerProps }) => {
+    const { inputContainerRef } = comboboxRoot.useComboboxContext();
+    return (jsxRuntime.jsx(react.Combobox.Portal, { children: jsxRuntime.jsx(react.Combobox.Positioner, { sideOffset: sideOffset, className: combobox_module.default.positioner, anchor: inputContainerRef, ...positionerProps, children: jsxRuntime.jsx(react.Combobox.Popup, { ref: ref, className: classVarianceAuthority.cx(combobox_module.default.content, className), style: style, render: render, initialFocus: initialFocus, finalFocus: finalFocus, children: jsxRuntime.jsx(react.Combobox.List, { className: combobox_module.default.list, children: children }) }) }) }));
+};
+ComboboxContent.displayName = 'Combobox.Content';
 
 exports.ComboboxContent = ComboboxContent;
 //# sourceMappingURL=combobox-content.cjs.map