@raystack/apsara 1.0.0-rc.0 → 1.0.0-rc.2

package/dist/components/code-block/code-block-root.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { cx } from 'class-variance-authority';
-import { createContext, forwardRef, useState, useCallback, useContext } from 'react';
+import { createContext, useContext, useState, useCallback } from 'react';
 import styles from './code-block.module.css.js';
 
 const CodeBlockContext = createContext(undefined);
@@ -12,7 +12,7 @@ const useCodeBlockContext = () => {
     }
     return context;
 };
-const CodeBlockRoot = forwardRef(({ children, value: providedValue, onValueChange, defaultValue, hideLineNumbers = false, maxLines, maxHeight, className, collapsed: providedCollapsed, defaultCollapsed = true, onCollapseChange, ...props }, ref) => {
+const CodeBlockRoot = ({ children, value: providedValue, onValueChange, defaultValue, hideLineNumbers = false, maxLines, maxHeight, className, collapsed: providedCollapsed, defaultCollapsed = true, onCollapseChange, ...props }) => {
     const [internalValue, setInternalValue] = useState(defaultValue);
     const [code, setCode] = useState();
     const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed ?? false);
@@ -28,7 +28,7 @@ const CodeBlockRoot = forwardRef(({ children, value: providedValue, onValueChang
             return !_internalCollapsed;
         });
     }, [onCollapseChange]);
-    return (jsx(CodeBlockContext.Provider, { value: {
+    return (jsx(CodeBlockContext, { value: {
             hideLineNumbers,
             value,
             setValue,
@@ -37,8 +37,8 @@ const CodeBlockRoot = forwardRef(({ children, value: providedValue, onValueChang
             maxLines: maxLines && maxLines + 1, // to compensate for the absolute collapse trigger
             collapsed,
             toggleCollapsed
-        }, children: jsx("div", { ref: ref, className: cx(styles.container, className), ...props, children: children }) }));
-});
+        }, children: jsx("div", { className: cx(styles.container, className), ...props, children: children }) }));
+};
 CodeBlockRoot.displayName = 'CodeBlock';
 
 export { CodeBlockRoot, useCodeBlockContext };

package/dist/components/code-block/code-block-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-block-root.js","sources":["../../../components/code-block/code-block-root.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport {\n  createContext,\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useContext,\n  useState\n} from 'react';\nimport styles from './code-block.module.css';\n\ninterface CodeBlockCommonProps {\n  hideLineNumbers?: boolean;\n  value?: string;\n  maxLines?: number;\n  collapsed?: boolean;\n}\n\ninterface CodeBlockContextValue extends CodeBlockCommonProps {\n  setValue: (value: string) => void;\n  code?: string;\n  setCode: (code: string) => void;\n  toggleCollapsed: () => void;\n}\n\nconst CodeBlockContext = createContext<CodeBlockContextValue | undefined>(\n  undefined\n);\n\nexport const useCodeBlockContext = () => {\n  const context = useContext(CodeBlockContext);\n  if (!context) {\n    throw new Error('useCodeBlockContext must be used within a CodeBlock');\n  }\n  return context;\n};\n\nexport interface CodeBlockProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CodeBlockCommonProps {\n  defaultValue?: string;\n  maxHeight?: string | number;\n  onValueChange?: (value: string) => void;\n  defaultCollapsed?: boolean;\n  onCollapseChange?: (value: boolean) => void;\n}\n\nexport const CodeBlockRoot = forwardRef<HTMLDivElement, CodeBlockProps>(\n  (\n    {\n      children,\n      value: providedValue,\n      onValueChange,\n      defaultValue,\n      hideLineNumbers = false,\n      maxLines,\n      maxHeight,\n      className,\n      collapsed: providedCollapsed,\n      defaultCollapsed = true,\n      onCollapseChange,\n      ...props\n    },\n    ref\n  ) => {\n    const [internalValue, setInternalValue] = useState<string | undefined>(\n      defaultValue\n    );\n    const [code, setCode] = useState<string | undefined>();\n    const [internalCollapsed, setInternalCollapsed] = useState<boolean>(\n      defaultCollapsed ?? false\n    );\n\n    const collapsed = providedCollapsed ?? internalCollapsed;\n\n    const value = providedValue ?? internalValue ?? defaultValue;\n\n    const setValue = useCallback(\n      (newValue: string) => {\n        setInternalValue(newValue);\n        onValueChange?.(newValue);\n      },\n      [onValueChange]\n    );\n\n    const toggleCollapsed = useCallback(() => {\n      setInternalCollapsed(_internalCollapsed => {\n        onCollapseChange?.(!_internalCollapsed);\n        return !_internalCollapsed;\n      });\n    }, [onCollapseChange]);\n\n    return (\n      <CodeBlockContext.Provider\n        value={{\n          hideLineNumbers,\n          value,\n          setValue,\n          code,\n          setCode,\n          maxLines: maxLines && maxLines + 1, // to compensate for the absolute collapse trigger\n          collapsed,\n          toggleCollapsed\n        }}\n      >\n        <div ref={ref} className={cx(styles.container, className)} {...props}>\n          {children}\n        </div>\n      </CodeBlockContext.Provider>\n    );\n  }\n);\n\nCodeBlockRoot.displayName = 'CodeBlock';\n"],"names":[],"mappings":";;;;;;AA2BA;AAIO;AACL;;AAEE;;AAEF;AACF;;;;AAkCI;AAIA;AAEA;AAEA;;AAGI;AACF;AAIF;;AAEI;;AAEF;AACF;AAEA;;;;;;AAQM;;;;AAUR;AAGF;;"}
+{"version":3,"file":"code-block-root.js","sources":["../../../components/code-block/code-block-root.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport {\n  ComponentProps,\n  createContext,\n  useCallback,\n  useContext,\n  useState\n} from 'react';\nimport styles from './code-block.module.css';\n\ninterface CodeBlockCommonProps {\n  hideLineNumbers?: boolean;\n  value?: string;\n  maxLines?: number;\n  collapsed?: boolean;\n}\n\ninterface CodeBlockContextValue extends CodeBlockCommonProps {\n  setValue: (value: string) => void;\n  code?: string;\n  setCode: (code: string) => void;\n  toggleCollapsed: () => void;\n}\n\nconst CodeBlockContext = createContext<CodeBlockContextValue | undefined>(\n  undefined\n);\n\nexport const useCodeBlockContext = () => {\n  const context = useContext(CodeBlockContext);\n  if (!context) {\n    throw new Error('useCodeBlockContext must be used within a CodeBlock');\n  }\n  return context;\n};\n\nexport interface CodeBlockProps\n  extends ComponentProps<'div'>,\n    CodeBlockCommonProps {\n  defaultValue?: string;\n  maxHeight?: string | number;\n  onValueChange?: (value: string) => void;\n  defaultCollapsed?: boolean;\n  onCollapseChange?: (value: boolean) => void;\n}\n\nexport const CodeBlockRoot = ({\n  children,\n  value: providedValue,\n  onValueChange,\n  defaultValue,\n  hideLineNumbers = false,\n  maxLines,\n  maxHeight,\n  className,\n  collapsed: providedCollapsed,\n  defaultCollapsed = true,\n  onCollapseChange,\n  ...props\n}: CodeBlockProps) => {\n  const [internalValue, setInternalValue] = useState<string | undefined>(\n    defaultValue\n  );\n  const [code, setCode] = useState<string | undefined>();\n  const [internalCollapsed, setInternalCollapsed] = useState<boolean>(\n    defaultCollapsed ?? false\n  );\n\n  const collapsed = providedCollapsed ?? internalCollapsed;\n\n  const value = providedValue ?? internalValue ?? defaultValue;\n\n  const setValue = useCallback(\n    (newValue: string) => {\n      setInternalValue(newValue);\n      onValueChange?.(newValue);\n    },\n    [onValueChange]\n  );\n\n  const toggleCollapsed = useCallback(() => {\n    setInternalCollapsed(_internalCollapsed => {\n      onCollapseChange?.(!_internalCollapsed);\n      return !_internalCollapsed;\n    });\n  }, [onCollapseChange]);\n\n  return (\n    <CodeBlockContext\n      value={{\n        hideLineNumbers,\n        value,\n        setValue,\n        code,\n        setCode,\n        maxLines: maxLines && maxLines + 1, // to compensate for the absolute collapse trigger\n        collapsed,\n        toggleCollapsed\n      }}\n    >\n      <div className={cx(styles.container, className)} {...props}>\n        {children}\n      </div>\n    </CodeBlockContext>\n  );\n};\n\nCodeBlockRoot.displayName = 'CodeBlock';\n"],"names":[],"mappings":";;;;;;AA0BA;AAIO;AACL;;AAEE;;AAEF;AACF;AAYa;;;AAkBX;AAIA;AAEA;AAEA;;AAGI;AACF;AAIF;;AAEI;;AAEF;AACF;AAEA;;;;;;AAQM;;;AAGD;AAOP;AAEA;;"}

package/dist/components/code-block/code-block.d.ts

@@ -1,100 +1,24 @@
-export declare const CodeBlock: import("react").ForwardRefExoticComponent<import("./code-block-root").CodeBlockProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Header: import("react").ForwardRefExoticComponent<Omit<Omit<import("class-variance-authority").VariantProps<(props?: ({
-        direction?: "row" | "column" | "rowReverse" | "columnReverse" | null | undefined;
-        align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
-        justify?: "center" | "start" | "end" | "between" | null | undefined;
-        wrap?: "wrap" | "noWrap" | "wrapReverse" | null | undefined;
-        gap?: "small" | 1 | 2 | "extra-small" | "medium" | "large" | "extra-large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
-        width?: "full" | null | undefined;
-    } & import("class-variance-authority/types").ClassProp) | undefined) => string> & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-        render?: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("@base-ui/react").ComponentRenderFn<import("@base-ui/react").HTMLProps, {}> | undefined;
-    }, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Content: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-    Label: import("react").ForwardRefExoticComponent<(Omit<import("class-variance-authority").VariantProps<(props?: ({
-        variant?: "primary" | "secondary" | "tertiary" | "emphasis" | "accent" | "attention" | "danger" | "success" | null | undefined;
-        size?: "small" | 1 | 2 | 10 | "large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "micro" | "mini" | "regular" | null | undefined;
-        weight?: "bold" | "medium" | "regular" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | null | undefined;
-        transform?: "capitalize" | "uppercase" | "lowercase" | null | undefined;
-        align?: "center" | "start" | "end" | "justify" | null | undefined;
-        lineClamp?: 1 | 2 | 3 | 4 | 5 | null | undefined;
-        underline?: boolean | null | undefined;
-        strikeThrough?: boolean | null | undefined;
-        italic?: boolean | null | undefined;
-    } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
-        size?: "small" | 1 | 2 | 10 | "large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "micro" | "mini" | "regular" | undefined;
-        weight?: "bold" | "medium" | "regular" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
-    } & {
-        as?: "span" | undefined;
-    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLLabelElement | HTMLParagraphElement>, "ref"> | Omit<import("class-variance-authority").VariantProps<(props?: ({
-        variant?: "primary" | "secondary" | "tertiary" | "emphasis" | "accent" | "attention" | "danger" | "success" | null | undefined;
-        size?: "small" | 1 | 2 | 10 | "large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "micro" | "mini" | "regular" | null | undefined;
-        weight?: "bold" | "medium" | "regular" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | null | undefined;
-        transform?: "capitalize" | "uppercase" | "lowercase" | null | undefined;
-        align?: "center" | "start" | "end" | "justify" | null | undefined;
-        lineClamp?: 1 | 2 | 3 | 4 | 5 | null | undefined;
-        underline?: boolean | null | undefined;
-        strikeThrough?: boolean | null | undefined;
-        italic?: boolean | null | undefined;
-    } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
-        size?: "small" | 1 | 2 | 10 | "large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "micro" | "mini" | "regular" | undefined;
-        weight?: "bold" | "medium" | "regular" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
-    } & {
-        as: "div";
-    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLLabelElement | HTMLParagraphElement>, "ref"> | Omit<import("class-variance-authority").VariantProps<(props?: ({
-        variant?: "primary" | "secondary" | "tertiary" | "emphasis" | "accent" | "attention" | "danger" | "success" | null | undefined;
-        size?: "small" | 1 | 2 | 10 | "large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "micro" | "mini" | "regular" | null | undefined;
-        weight?: "bold" | "medium" | "regular" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | null | undefined;
-        transform?: "capitalize" | "uppercase" | "lowercase" | null | undefined;
-        align?: "center" | "start" | "end" | "justify" | null | undefined;
-        lineClamp?: 1 | 2 | 3 | 4 | 5 | null | undefined;
-        underline?: boolean | null | undefined;
-        strikeThrough?: boolean | null | undefined;
-        italic?: boolean | null | undefined;
-    } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
-        size?: "small" | 1 | 2 | 10 | "large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "micro" | "mini" | "regular" | undefined;
-        weight?: "bold" | "medium" | "regular" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
-    } & {
-        as: "label";
-    } & Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLLabelElement | HTMLParagraphElement>, "ref"> | Omit<import("class-variance-authority").VariantProps<(props?: ({
-        variant?: "primary" | "secondary" | "tertiary" | "emphasis" | "accent" | "attention" | "danger" | "success" | null | undefined;
-        size?: "small" | 1 | 2 | 10 | "large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "micro" | "mini" | "regular" | null | undefined;
-        weight?: "bold" | "medium" | "regular" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | null | undefined;
-        transform?: "capitalize" | "uppercase" | "lowercase" | null | undefined;
-        align?: "center" | "start" | "end" | "justify" | null | undefined;
-        lineClamp?: 1 | 2 | 3 | 4 | 5 | null | undefined;
-        underline?: boolean | null | undefined;
-        strikeThrough?: boolean | null | undefined;
-        italic?: boolean | null | undefined;
-    } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
-        size?: "small" | 1 | 2 | 10 | "large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "micro" | "mini" | "regular" | undefined;
-        weight?: "bold" | "medium" | "regular" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
-    } & {
-        as: "p";
-    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLLabelElement | HTMLParagraphElement>, "ref"> | Omit<import("class-variance-authority").VariantProps<(props?: ({
-        variant?: "primary" | "secondary" | "tertiary" | "emphasis" | "accent" | "attention" | "danger" | "success" | null | undefined;
-        size?: "small" | 1 | 2 | 10 | "large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "micro" | "mini" | "regular" | null | undefined;
-        weight?: "bold" | "medium" | "regular" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | null | undefined;
-        transform?: "capitalize" | "uppercase" | "lowercase" | null | undefined;
-        align?: "center" | "start" | "end" | "justify" | null | undefined;
-        lineClamp?: 1 | 2 | 3 | 4 | 5 | null | undefined;
-        underline?: boolean | null | undefined;
-        strikeThrough?: boolean | null | undefined;
-        italic?: boolean | null | undefined;
-    } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
-        size?: "small" | 1 | 2 | 10 | "large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "micro" | "mini" | "regular" | undefined;
-        weight?: "bold" | "medium" | "regular" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
-    } & {
-        as: "a";
-    } & Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import("react").RefAttributes<HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLLabelElement | HTMLParagraphElement>, "ref">) & import("react").RefAttributes<HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLLabelElement | HTMLParagraphElement>>;
+import { CodeBlockLanguageSelectTrigger } from './code-block-language-select';
+import { CodeBlockCollapseTrigger, CodeBlockContent, CodeBlockCopyButton, CodeBlockHeader, CodeBlockLabel } from './code-block-misc';
+export declare const CodeBlock: {
+    ({ children, value: providedValue, onValueChange, defaultValue, hideLineNumbers, maxLines, maxHeight, className, collapsed: providedCollapsed, defaultCollapsed, onCollapseChange, ...props }: import("./code-block-root").CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Header: typeof CodeBlockHeader;
+    Content: typeof CodeBlockContent;
+    Label: typeof CodeBlockLabel;
     LanguageSelect: {
         (props: import("../select/select-root").SingleSelectProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
-    LanguageSelectTrigger: import("react").ForwardRefExoticComponent<Omit<import("../select/select-trigger").SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-    LanguageSelectContent: import("react").ForwardRefExoticComponent<import("../select/select-content").SelectContentProps & import("react").RefAttributes<HTMLDivElement>>;
-    LanguageSelectItem: import("react").ForwardRefExoticComponent<import("../select/select-item").SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
-    CopyButton: import("react").ForwardRefExoticComponent<Omit<import("./code-block-misc").CodeBlockCopyButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-    Code: import("react").ForwardRefExoticComponent<import("./code-block-code").CodeBlockCodeProps & import("react").RefAttributes<HTMLDivElement>>;
-    CollapseTrigger: import("react").ForwardRefExoticComponent<Omit<import("./code-block-misc").CodeBlockCollapseTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    LanguageSelectTrigger: typeof CodeBlockLanguageSelectTrigger;
+    LanguageSelectContent: typeof import("../select/select-content").SelectContent;
+    LanguageSelectItem: typeof import("../select/select-item").SelectItem;
+    CopyButton: typeof CodeBlockCopyButton;
+    Code: {
+        ({ children, language, className, value, ...props }: import("./code-block-code").CodeBlockCodeProps): import("react/jsx-runtime").JSX.Element | null;
+        displayName: string;
+    };
+    CollapseTrigger: typeof CodeBlockCollapseTrigger;
 };
 //# sourceMappingURL=code-block.d.ts.map

package/dist/components/code-block/code-block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../components/code-block/code-block.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWpB,CAAC"}
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../components/code-block/code-block.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,8BAA8B,EAC/B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,wBAAwB,EACxB,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,cAAc,EACf,MAAM,mBAAmB,CAAC;AAG3B,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAWpB,CAAC"}

package/dist/components/collapsible/collapsible.cjs

@@ -4,14 +4,19 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@base-ui/react');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var collapsible_module = require('./collapsible.module.css.cjs');
 
-const CollapsibleRoot = React.forwardRef((props, ref) => jsxRuntime.jsx(react.Collapsible.Root, { ref: ref, ...props }));
+function CollapsibleRoot(props) {
+    return jsxRuntime.jsx(react.Collapsible.Root, { ...props });
+}
 CollapsibleRoot.displayName = 'Collapsible';
-const CollapsibleTrigger = React.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx(react.Collapsible.Trigger, { ref: ref, className: classVarianceAuthority.cx(collapsible_module.default.trigger, className), ...props })));
+function CollapsibleTrigger({ className, ...props }) {
+    return (jsxRuntime.jsx(react.Collapsible.Trigger, { className: classVarianceAuthority.cx(collapsible_module.default.trigger, className), ...props }));
+}
 CollapsibleTrigger.displayName = 'Collapsible.Trigger';
-const CollapsiblePanel = React.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx(react.Collapsible.Panel, { ref: ref, className: classVarianceAuthority.cx(collapsible_module.default.panel, className), ...props })));
+function CollapsiblePanel({ className, ...props }) {
+    return (jsxRuntime.jsx(react.Collapsible.Panel, { className: classVarianceAuthority.cx(collapsible_module.default.panel, className), ...props }));
+}
 CollapsiblePanel.displayName = 'Collapsible.Panel';
 const Collapsible = Object.assign(CollapsibleRoot, {
     Trigger: CollapsibleTrigger,

package/dist/components/collapsible/collapsible.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.cjs","sources":["../../../components/collapsible/collapsible.tsx"],"sourcesContent":["'use client';\n\nimport { Collapsible as CollapsiblePrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { ElementRef, forwardRef } from 'react';\nimport styles from './collapsible.module.css';\n\nconst CollapsibleRoot = forwardRef<\n  ElementRef<typeof CollapsiblePrimitive.Root>,\n  CollapsiblePrimitive.Root.Props\n>((props, ref) => <CollapsiblePrimitive.Root ref={ref} {...props} />);\n\nCollapsibleRoot.displayName = 'Collapsible';\n\nconst CollapsibleTrigger = forwardRef<\n  ElementRef<typeof CollapsiblePrimitive.Trigger>,\n  CollapsiblePrimitive.Trigger.Props\n>(({ className, ...props }, ref) => (\n  <CollapsiblePrimitive.Trigger\n    ref={ref}\n    className={cx(styles.trigger, className)}\n    {...props}\n  />\n));\n\nCollapsibleTrigger.displayName = 'Collapsible.Trigger';\n\nconst CollapsiblePanel = forwardRef<\n  ElementRef<typeof CollapsiblePrimitive.Panel>,\n  CollapsiblePrimitive.Panel.Props\n>(({ className, ...props }, ref) => (\n  <CollapsiblePrimitive.Panel\n    ref={ref}\n    className={cx(styles.panel, className)}\n    {...props}\n  />\n));\n\nCollapsiblePanel.displayName = 'Collapsible.Panel';\n\nexport const Collapsible = Object.assign(CollapsibleRoot, {\n  Trigger: CollapsibleTrigger,\n  Panel: CollapsiblePanel\n});\n"],"names":[],"mappings":";;;;;;;;;AAOA;AAKA;AAEA;AAWA;AAEA;AAWA;;AAGE;AACA;AACD;;"}
+{"version":3,"file":"collapsible.cjs","sources":["../../../components/collapsible/collapsible.tsx"],"sourcesContent":["'use client';\n\nimport { Collapsible as CollapsiblePrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport styles from './collapsible.module.css';\n\nfunction CollapsibleRoot(props: CollapsiblePrimitive.Root.Props) {\n  return <CollapsiblePrimitive.Root {...props} />;\n}\n\nCollapsibleRoot.displayName = 'Collapsible';\n\nfunction CollapsibleTrigger({\n  className,\n  ...props\n}: CollapsiblePrimitive.Trigger.Props) {\n  return (\n    <CollapsiblePrimitive.Trigger\n      className={cx(styles.trigger, className)}\n      {...props}\n    />\n  );\n}\n\nCollapsibleTrigger.displayName = 'Collapsible.Trigger';\n\nfunction CollapsiblePanel({\n  className,\n  ...props\n}: CollapsiblePrimitive.Panel.Props) {\n  return (\n    <CollapsiblePrimitive.Panel\n      className={cx(styles.panel, className)}\n      {...props}\n    />\n  );\n}\n\nCollapsiblePanel.displayName = 'Collapsible.Panel';\n\nexport const Collapsible = Object.assign(CollapsibleRoot, {\n  Trigger: CollapsibleTrigger,\n  Panel: CollapsiblePanel\n});\n"],"names":[],"mappings":";;;;;;;;AAMA;AACE;AACF;AAEA;AAEA;;AAUA;AAEA;AAEA;;AAUA;AAEA;;AAGE;AACA;AACD;;"}

package/dist/components/collapsible/collapsible.d.ts

@@ -1,5 +1,19 @@
-export declare const Collapsible: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").CollapsibleRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-    Trigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").CollapsibleTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-    Panel: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").CollapsiblePanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react';
+declare function CollapsibleRoot(props: CollapsiblePrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+declare namespace CollapsibleRoot {
+    var displayName: string;
+}
+declare function CollapsibleTrigger({ className, ...props }: CollapsiblePrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
+declare namespace CollapsibleTrigger {
+    var displayName: string;
+}
+declare function CollapsiblePanel({ className, ...props }: CollapsiblePrimitive.Panel.Props): import("react/jsx-runtime").JSX.Element;
+declare namespace CollapsiblePanel {
+    var displayName: string;
+}
+export declare const Collapsible: typeof CollapsibleRoot & {
+    Trigger: typeof CollapsibleTrigger;
+    Panel: typeof CollapsiblePanel;
 };
+export {};
 //# sourceMappingURL=collapsible.d.ts.map

package/dist/components/collapsible/collapsible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../components/collapsible/collapsible.tsx"],"names":[],"mappings":"AAwCA,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../components/collapsible/collapsible.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAIrE,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,CAAC,IAAI,CAAC,KAAK,2CAE9D;kBAFQ,eAAe;;;AAMxB,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,OAAO,CAAC,KAAK,2CAOpC;kBAVQ,kBAAkB;;;AAc3B,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,CAAC,KAAK,2CAOlC;kBAVQ,gBAAgB;;;AAczB,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}

package/dist/components/collapsible/collapsible.js

@@ -2,14 +2,19 @@
 import { jsx } from 'react/jsx-runtime';
 import { Collapsible as Collapsible$1 } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import styles from './collapsible.module.css.js';
 
-const CollapsibleRoot = forwardRef((props, ref) => jsx(Collapsible$1.Root, { ref: ref, ...props }));
+function CollapsibleRoot(props) {
+    return jsx(Collapsible$1.Root, { ...props });
+}
 CollapsibleRoot.displayName = 'Collapsible';
-const CollapsibleTrigger = forwardRef(({ className, ...props }, ref) => (jsx(Collapsible$1.Trigger, { ref: ref, className: cx(styles.trigger, className), ...props })));
+function CollapsibleTrigger({ className, ...props }) {
+    return (jsx(Collapsible$1.Trigger, { className: cx(styles.trigger, className), ...props }));
+}
 CollapsibleTrigger.displayName = 'Collapsible.Trigger';
-const CollapsiblePanel = forwardRef(({ className, ...props }, ref) => (jsx(Collapsible$1.Panel, { ref: ref, className: cx(styles.panel, className), ...props })));
+function CollapsiblePanel({ className, ...props }) {
+    return (jsx(Collapsible$1.Panel, { className: cx(styles.panel, className), ...props }));
+}
 CollapsiblePanel.displayName = 'Collapsible.Panel';
 const Collapsible = Object.assign(CollapsibleRoot, {
     Trigger: CollapsibleTrigger,

package/dist/components/collapsible/collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.js","sources":["../../../components/collapsible/collapsible.tsx"],"sourcesContent":["'use client';\n\nimport { Collapsible as CollapsiblePrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { ElementRef, forwardRef } from 'react';\nimport styles from './collapsible.module.css';\n\nconst CollapsibleRoot = forwardRef<\n  ElementRef<typeof CollapsiblePrimitive.Root>,\n  CollapsiblePrimitive.Root.Props\n>((props, ref) => <CollapsiblePrimitive.Root ref={ref} {...props} />);\n\nCollapsibleRoot.displayName = 'Collapsible';\n\nconst CollapsibleTrigger = forwardRef<\n  ElementRef<typeof CollapsiblePrimitive.Trigger>,\n  CollapsiblePrimitive.Trigger.Props\n>(({ className, ...props }, ref) => (\n  <CollapsiblePrimitive.Trigger\n    ref={ref}\n    className={cx(styles.trigger, className)}\n    {...props}\n  />\n));\n\nCollapsibleTrigger.displayName = 'Collapsible.Trigger';\n\nconst CollapsiblePanel = forwardRef<\n  ElementRef<typeof CollapsiblePrimitive.Panel>,\n  CollapsiblePrimitive.Panel.Props\n>(({ className, ...props }, ref) => (\n  <CollapsiblePrimitive.Panel\n    ref={ref}\n    className={cx(styles.panel, className)}\n    {...props}\n  />\n));\n\nCollapsiblePanel.displayName = 'Collapsible.Panel';\n\nexport const Collapsible = Object.assign(CollapsibleRoot, {\n  Trigger: CollapsibleTrigger,\n  Panel: CollapsiblePanel\n});\n"],"names":[],"mappings":";;;;;;;AAOA;AAKA;AAEA;AAWA;AAEA;AAWA;;AAGE;AACA;AACD;;"}
+{"version":3,"file":"collapsible.js","sources":["../../../components/collapsible/collapsible.tsx"],"sourcesContent":["'use client';\n\nimport { Collapsible as CollapsiblePrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport styles from './collapsible.module.css';\n\nfunction CollapsibleRoot(props: CollapsiblePrimitive.Root.Props) {\n  return <CollapsiblePrimitive.Root {...props} />;\n}\n\nCollapsibleRoot.displayName = 'Collapsible';\n\nfunction CollapsibleTrigger({\n  className,\n  ...props\n}: CollapsiblePrimitive.Trigger.Props) {\n  return (\n    <CollapsiblePrimitive.Trigger\n      className={cx(styles.trigger, className)}\n      {...props}\n    />\n  );\n}\n\nCollapsibleTrigger.displayName = 'Collapsible.Trigger';\n\nfunction CollapsiblePanel({\n  className,\n  ...props\n}: CollapsiblePrimitive.Panel.Props) {\n  return (\n    <CollapsiblePrimitive.Panel\n      className={cx(styles.panel, className)}\n      {...props}\n    />\n  );\n}\n\nCollapsiblePanel.displayName = 'Collapsible.Panel';\n\nexport const Collapsible = Object.assign(CollapsibleRoot, {\n  Trigger: CollapsibleTrigger,\n  Panel: CollapsiblePanel\n});\n"],"names":[],"mappings":";;;;;;AAMA;AACE;AACF;AAEA;AAEA;;AAUA;AAEA;AAEA;;AAUA;AAEA;;AAGE;AACA;AACD;;"}

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

@@ -11,6 +11,7 @@ const ColorPickerAlpha = ({ className, ...props }) => {
     const { alpha = 1, setColor } = colorPickerRoot.useColorPicker();
     return (jsxRuntime.jsx(slider.Slider.Root, { className: classVarianceAuthority.cx(colorPicker_module.default.sliderRoot, className), max: 100, onValueChange: value => setColor({ alpha: value / 100 }), step: 1, value: alpha * 100, 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.alphaTrack), children: [jsxRuntime.jsx("div", { className: colorPicker_module.default.alphaTrackGradient }), jsxRuntime.jsx(slider.Slider.Indicator, { className: colorPicker_module.default.sliderRange }), jsxRuntime.jsx(slider.Slider.Thumb, { className: colorPicker_module.default.sliderThumb, "aria-label": 'Alpha' })] }) }) }));
 };
+ColorPickerAlpha.displayName = 'ColorPicker.Alpha';
 
 exports.ColorPickerAlpha = ColorPickerAlpha;
 //# sourceMappingURL=color-picker-alpha.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-alpha.cjs","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"],"names":[],"mappings":";;;;;;;;;AASO;;;AAwBP;;"}
+{"version":3,"file":"color-picker-alpha.cjs","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-alpha.d.ts

@@ -1,4 +1,7 @@
 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;
+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":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAK/C,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;AAEtD,eAAO,MAAM,gBAAgB,4BAG1B,qBAAqB,4CAqBvB,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

@@ -9,6 +9,7 @@ const ColorPickerAlpha = ({ className, ...props }) => {
     const { alpha = 1, setColor } = useColorPicker();
     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 { 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"],"names":[],"mappings":";;;;;;;AASO;;;AAwBP;;"}
+{"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

@@ -11,6 +11,7 @@ const ColorPickerHue = ({ className, ...props }) => {
     const { hue, setColor } = colorPickerRoot.useColorPicker();
     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 { 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"],"names":[],"mappings":";;;;;;;;;AAQO;;;AAuBP;;"}
+{"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,4 +1,7 @@
 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;
+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":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAK/C,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;AACpD,eAAO,MAAM,cAAc,4BAGxB,mBAAmB,4CAoBrB,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

@@ -9,6 +9,7 @@ const ColorPickerHue = ({ className, ...props }) => {
     const { hue, setColor } = useColorPicker();
     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 { 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"],"names":[],"mappings":";;;;;;;AAQO;;;AAuBP;;"}
+{"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