@moduix/react 1.1.1 → 2.1.0

package/dist/components/clipboard/Clipboard.css

@@ -1,8 +1,8 @@
 @layer ui.components {
   .eM1-oW_root {
-    gap: var(--clipboard-gap, .375rem);
+    gap: var(--clipboard-gap, var(--spacing-1-5));
     width: var(--clipboard-width, 100%);
-    max-width: var(--clipboard-max-width, 20rem);
+    max-width: var(--clipboard-max-width, none);
     color: var(--clipboard-color, var(--color-foreground));
     flex-direction: column;
     display: flex;
@@ -26,18 +26,18 @@
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    min-height: var(--clipboard-input-height, var(--input-height-md, var(--size-lg)));
+    min-height: var(--clipboard-input-height, var(--input-height-md, var(--size-md)));
     border: var(--clipboard-input-border-width, var(--input-border-width, var(--border-width-sm)))
       solid var(--clipboard-input-border-color, var(--input-border-color, var(--color-border)));
     border-radius: var(--clipboard-input-radius, var(--input-radius, var(--radius-md)));
-    padding-block: var(--clipboard-input-padding-y, var(--input-padding-y-md, .5rem));
-    padding-inline: var(--clipboard-input-padding-x, var(--input-padding-x-md, .875rem));
+    padding-block: var(--clipboard-input-padding-y, var(--input-padding-y-md, var(--spacing-1)));
+    padding-inline: var(--clipboard-input-padding-x, var(--input-padding-x-md, var(--spacing-3-5)));
     background-color: var(--clipboard-input-bg, var(--input-bg, var(--color-background)));
     color: var(--clipboard-input-color, var(--input-color, var(--color-foreground)));
     font: inherit;
     font-size: var(--clipboard-input-font-size, var(--input-font-size-md, var(--text-md)));
     line-height: var(--clipboard-input-line-height, var(--input-line-height-md, var(--line-height-text-md)));
-    outline: var(--clipboard-input-focus-ring-width, var(--input-focus-ring-width, var(--border-width-sm)))
+    outline: var(--clipboard-input-focus-ring-width, var(--input-focus-ring-width, var(--clipboard-input-border-width, var(--input-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))))
       solid transparent;
     outline-offset: calc(var(--clipboard-input-focus-ring-offset, var(--clipboard-input-border-width, var(--input-border-width, var(--border-width-sm)))) *
         -1);
@@ -73,8 +73,8 @@
     justify-content: center;
     align-items: center;
     gap: var(--clipboard-trigger-gap, var(--button-content-gap, var(--spacing-2)));
-    min-height: var(--clipboard-trigger-height, var(--button-size-md, var(--size-lg)));
-    padding-inline: var(--clipboard-trigger-padding-x, var(--button-padding-x-md, 1rem));
+    min-height: var(--clipboard-trigger-height, var(--button-size-md, var(--size-md)));
+    padding-inline: var(--clipboard-trigger-padding-x, var(--button-padding-x-md, var(--spacing-4)));
     border: var(--clipboard-trigger-border-width, var(--button-border-width, var(--border-width-sm)))
       solid
       var(--clipboard-trigger-border-color, var(--button-outline-border-color, var(--color-border)));
@@ -99,8 +99,8 @@
     display: inline-flex;
 
     & :where(svg) {
-      width: var(--clipboard-indicator-size, var(--button-icon-size, 1rem));
-      height: var(--clipboard-indicator-size, var(--button-icon-size, 1rem));
+      width: var(--clipboard-indicator-size, var(--button-icon-size, var(--spacing-4)));
+      height: var(--clipboard-indicator-size, var(--button-icon-size, var(--spacing-4)));
       flex-shrink: 0;
     }
 
@@ -111,7 +111,7 @@
     }
 
     &:focus-visible {
-      outline: var(--clipboard-trigger-focus-ring-width, var(--button-focus-ring-width, var(--border-width-md)))
+      outline: var(--clipboard-trigger-focus-ring-width, var(--button-focus-ring-width, var(--focus-ring-width, var(--border-width-md))))
         solid
         var(--clipboard-trigger-focus-ring-color, var(--button-focus-ring-color, var(--color-ring)));
       outline-offset: calc(var(--clipboard-trigger-focus-ring-offset, var(--clipboard-trigger-border-width, var(--button-border-width, var(--border-width-sm)))) *

package/dist/components/clipboard/Clipboard.d.ts

@@ -9,7 +9,9 @@ declare const Clipboard$1: import("react").ForwardRefExoticComponent<Omit<Clipbo
   Input: import("react").ForwardRefExoticComponent<Omit<Clipboard.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
   Trigger: import("react").ForwardRefExoticComponent<Omit<Clipboard.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Indicator: import("react").ForwardRefExoticComponent<Omit<Clipboard.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  CopyText: import("react").ForwardRefExoticComponent<Omit<Clipboard.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ValueText: import("react").ForwardRefExoticComponent<Omit<Clipboard.ValueTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  useClipboard: (props?: import("@ark-ui/react/clipboard").UseClipboardProps) => import("@ark-ui/react/clipboard").UseClipboardReturn;
 };
 //#endregion
 export { Clipboard$1 as Clipboard };

package/dist/components/clipboard/Clipboard.js

@@ -1,10 +1,10 @@
-import { CheckIcon, CopyIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CheckIcon, CopyIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import Clipboard_module_default from "./Clipboard.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Clipboard } from "@ark-ui/react/clipboard";
+import { jsx } from "react/jsx-runtime";
+import { Clipboard, useClipboard } from "@ark-ui/react/clipboard";
 //#region src/components/clipboard/Clipboard.tsx
 const ClipboardRoot = forwardRef(function ClipboardRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Clipboard.Root, {
@@ -82,6 +82,15 @@ const ClipboardValueText = forwardRef(function ClipboardValueText({ className, .
 		...props
 	});
 });
+const ClipboardCopyText = forwardRef(function ClipboardCopyText({ copied = "Copied", children = "Copy", ...props }, ref) {
+	return /* @__PURE__ */ jsx(ClipboardIndicator, {
+		ref,
+		"data-slot": "clipboard-copy-text",
+		copied,
+		...props,
+		children
+	});
+});
 const Clipboard$1 = Object.assign(ClipboardRoot, {
 	Root: ClipboardRoot,
 	RootProvider: ClipboardRootProvider,
@@ -90,7 +99,9 @@ const Clipboard$1 = Object.assign(ClipboardRoot, {
 	Input: ClipboardInput,
 	Trigger: ClipboardTrigger,
 	Indicator: ClipboardIndicator,
-	ValueText: ClipboardValueText
+	CopyText: ClipboardCopyText,
+	ValueText: ClipboardValueText,
+	useClipboard
 });
 //#endregion
 export { Clipboard$1 as Clipboard };

package/dist/components/close-button/CloseButton.css

@@ -1,8 +1,8 @@
 @layer ui.components {
   ._8WDg2W_root {
     box-sizing: border-box;
-    width: var(--close-button-size, 28px);
-    height: var(--close-button-size, 28px);
+    width: var(--close-button-size, var(--spacing-7));
+    height: var(--close-button-size, var(--spacing-7));
     background-color: var(--close-button-bg, transparent);
     border-radius: var(--close-button-radius, var(--radius-sm));
     color: var(--close-button-color, var(--color-muted-foreground));
@@ -22,8 +22,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--close-button-icon-size, 12px);
-      height: var(--close-button-icon-size, 12px);
+      width: var(--close-button-icon-size, var(--spacing-3));
+      height: var(--close-button-icon-size, var(--spacing-3));
       flex-shrink: 0;
     }
 
@@ -35,9 +35,9 @@
     }
 
     &:focus-visible {
-      outline: var(--close-button-focus-ring-width, var(--border-width-md)) solid
-        var(--close-button-focus-ring-color, var(--color-ring));
-      outline-offset: var(--close-button-focus-ring-offset, 2px);
+      outline: var(--close-button-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--close-button-focus-ring-color, var(--color-ring));
+      outline-offset: var(--close-button-focus-ring-offset, var(--focus-ring-offset));
     }
 
     &[data-disabled] {

package/dist/components/close-button/CloseButton.d.ts

@@ -1,6 +1,16 @@
 //#region src/components/close-button/CloseButton.d.ts
-declare const CloseButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLButtonElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const CloseButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+  'data-disabled'?: string;
+  'data-part'?: string;
+  'data-scope'?: string;
+  'data-slot'?: string;
+} & import("react").RefAttributes<HTMLButtonElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    'data-disabled'?: string;
+    'data-part'?: string;
+    'data-scope'?: string;
+    'data-slot'?: string;
+  } & import("react").RefAttributes<HTMLButtonElement>>;
 };
 //#endregion
 export { CloseButton };

package/dist/components/close-button/CloseButton.js

@@ -1,13 +1,13 @@
-import { CloseIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CloseIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import CloseButton_module_default from "./CloseButton.module.js";
-import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/close-button/CloseButton.tsx
-const CloseButtonRoot = forwardRef(function CloseButtonRoot({ asChild, className, children, disabled, onClick, type, "aria-disabled": ariaDisabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
-	const isDisabled = disabled || ariaDisabled === true || ariaDisabled === "true";
+const CloseButtonRoot = forwardRef(function CloseButtonRoot({ asChild, className, children, disabled, onClick, type, "aria-disabled": ariaDisabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-disabled": dataDisabled, "data-part": dataPart, "data-scope": dataScope, "data-slot": dataSlot, ...props }, ref) {
+	const isDisabled = disabled || ariaDisabled === true || ariaDisabled === "true" || dataDisabled !== void 0;
 	const handleClick = (event) => {
 		if (isDisabled) {
 			event.preventDefault();
@@ -19,18 +19,18 @@ const CloseButtonRoot = forwardRef(function CloseButtonRoot({ asChild, className
 	return /* @__PURE__ */ jsx(ark.button, {
 		ref,
 		asChild,
+		...props,
 		type: asChild ? type : type ?? "button",
 		disabled,
-		"data-scope": "close-button",
-		"data-part": "root",
-		"data-slot": "close-button-root",
-		"data-disabled": isDisabled ? "" : void 0,
+		"data-scope": dataScope ?? "close-button",
+		"data-part": dataPart ?? "root",
+		"data-slot": dataSlot ?? "close-button-root",
+		"data-disabled": dataDisabled ?? (isDisabled ? "" : void 0),
 		className: clsx(CloseButton_module_default.root, normalizeClassName(className)),
 		"aria-disabled": ariaDisabled,
 		"aria-label": ariaLabel ?? (children == null && ariaLabelledBy == null ? "Close" : void 0),
 		"aria-labelledby": ariaLabelledBy,
 		onClick: handleClick,
-		...props,
 		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
 	});
 });

package/dist/components/collapsible/Collapsible.css

@@ -29,7 +29,7 @@
 
   .CaaIva_root {
     box-sizing: border-box;
-    width: var(--collapsible-width, 14rem);
+    width: var(--collapsible-width, 100%);
     max-width: var(--collapsible-max-width, 100%);
     min-width: 0;
     color: var(--collapsible-color, var(--color-foreground));
@@ -62,8 +62,8 @@
     display: flex;
 
     &:focus-visible {
-      outline: var(--collapsible-focus-ring-width, var(--border-width-sm)) solid
-        var(--collapsible-focus-ring-color, var(--color-ring));
+      outline: var(--collapsible-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--collapsible-focus-ring-color, var(--color-ring));
       outline-offset: var(--collapsible-focus-ring-offset, var(--border-width-sm));
     }
 
@@ -87,8 +87,8 @@
 
   .CaaIva_indicator {
     box-sizing: border-box;
-    width: var(--collapsible-indicator-size, .75rem);
-    height: var(--collapsible-indicator-size, .75rem);
+    width: var(--collapsible-indicator-size, var(--spacing-3));
+    height: var(--collapsible-indicator-size, var(--spacing-3));
     transition: transform var(--collapsible-indicator-transition, var(--transition-default));
     flex-shrink: 0;
     justify-content: center;
@@ -101,7 +101,7 @@
     }
 
     &[data-state="open"] {
-      transform: var(--collapsible-indicator-open-transform, rotate(90deg));
+      transform: var(--collapsible-indicator-open-transform, rotate(180deg));
     }
 
     &[data-disabled] {
@@ -135,4 +135,11 @@
       }
     }
   }
+
+  .CaaIva_body {
+    gap: var(--collapsible-body-gap, var(--spacing-2));
+    min-width: 0;
+    padding: var(--collapsible-body-padding, var(--spacing-2));
+    display: grid;
+  }
 }

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

@@ -1,4 +1,4 @@
-import { Collapsible } from "@ark-ui/react/collapsible";
+import { Collapsible, useCollapsible } from "@ark-ui/react/collapsible";
 
 //#region src/components/collapsible/Collapsible.d.ts
 declare const Collapsible$1: import("react").ForwardRefExoticComponent<Omit<Collapsible.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
@@ -7,6 +7,7 @@ declare const Collapsible$1: import("react").ForwardRefExoticComponent<Omit<Coll
   Trigger: import("react").ForwardRefExoticComponent<Omit<Collapsible.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Indicator: import("react").ForwardRefExoticComponent<Omit<Collapsible.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Content: import("react").ForwardRefExoticComponent<Omit<Collapsible.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion
-export { Collapsible$1 as Collapsible };
+export { Collapsible$1 as Collapsible, useCollapsible };

package/dist/components/collapsible/Collapsible.js

@@ -1,10 +1,11 @@
-import { ChevronRightIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { ChevronDownIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import Collapsible_module_default from "./Collapsible.module.js";
-import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Collapsible } from "@ark-ui/react/collapsible";
+import { jsx } from "react/jsx-runtime";
+import { Collapsible, useCollapsible } from "@ark-ui/react/collapsible";
 //#region src/components/collapsible/Collapsible.tsx
 const CollapsibleRoot = forwardRef(function CollapsibleRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Collapsible.Root, {
@@ -37,7 +38,7 @@ const CollapsibleIndicator = forwardRef(function CollapsibleIndicator({ classNam
 		"data-slot": "collapsible-indicator",
 		className: clsx(Collapsible_module_default.indicator, normalizeClassName(className)),
 		...props,
-		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {})
+		children: children ?? /* @__PURE__ */ jsx(ChevronDownIcon, {})
 	});
 });
 const CollapsibleContent = forwardRef(function CollapsibleContent({ className, ...props }, ref) {
@@ -48,12 +49,23 @@ const CollapsibleContent = forwardRef(function CollapsibleContent({ className, .
 		...props
 	});
 });
+const CollapsibleBody = forwardRef(function CollapsibleBody({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		"data-scope": "collapsible",
+		"data-part": "body",
+		"data-slot": "collapsible-body",
+		className: clsx(Collapsible_module_default.body, normalizeClassName(className)),
+		...props
+	});
+});
 const Collapsible$1 = Object.assign(CollapsibleRoot, {
 	Root: CollapsibleRoot,
 	RootProvider: CollapsibleRootProvider,
 	Trigger: CollapsibleTrigger,
 	Indicator: CollapsibleIndicator,
-	Content: CollapsibleContent
+	Content: CollapsibleContent,
+	Body: CollapsibleBody
 });
 //#endregion
-export { Collapsible$1 as Collapsible };
+export { Collapsible$1 as Collapsible, useCollapsible };

package/dist/components/collapsible/Collapsible.module.js

@@ -1,6 +1,7 @@
 import './Collapsible.css';
 //#region src/components/collapsible/Collapsible.module.css
 var Collapsible_module_default = {
+	"body": "CaaIva_body",
 	"collapsible-content-closed": "CaaIva_collapsible-content-closed",
 	"collapsible-content-open": "CaaIva_collapsible-content-open",
 	"content": "CaaIva_content",

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

@@ -1,2 +1,2 @@
-import { Collapsible } from "./Collapsible.js";
-export { Collapsible };
+import { Collapsible, useCollapsible } from "./Collapsible.js";
+export { Collapsible, useCollapsible };

package/dist/components/color-picker/ColorPicker.css

@@ -1,8 +1,10 @@
 @layer ui.components {
   @keyframes kgcaIq_color-picker-content-open {
     from {
-      opacity: var(--color-picker-content-closed-opacity, 0);
-      transform: scale(var(--color-picker-content-closed-scale, var(--scale-popup)));
+      opacity: var(--color-picker-content-closed-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--popup-motion-starting-translate-x, 0)
+        var(--popup-motion-starting-translate-y, 0);
+      transform: scale(var(--color-picker-content-closed-scale, var(--popup-motion-starting-scale, var(--scale-popup))));
     }
 
     to {
@@ -18,8 +20,9 @@
     }
 
     to {
-      opacity: var(--color-picker-content-closed-opacity, 0);
-      transform: scale(var(--color-picker-content-closed-scale, var(--scale-popup)));
+      opacity: var(--color-picker-content-closed-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--popup-motion-ending-translate-x, 0) var(--popup-motion-ending-translate-y, 0);
+      transform: scale(var(--color-picker-content-closed-scale, var(--popup-motion-ending-scale, var(--scale-popup))));
     }
   }
 
@@ -65,16 +68,18 @@
 
   .kgcaIq_trigger {
     box-sizing: border-box;
-    width: var(--color-picker-trigger-size, var(--size-lg));
-    height: var(--color-picker-trigger-size, var(--size-lg));
+    width: var(--color-picker-trigger-size, var(--size-md));
+    height: var(--color-picker-trigger-size, var(--size-md));
     border: var(--color-picker-border-width, var(--border-width-sm)) solid
       var(--color-picker-border-color, var(--color-border));
     border-radius: var(--color-picker-radius, var(--radius-md));
     padding: var(--color-picker-trigger-padding, var(--spacing-1));
     background: var(--color-picker-control-bg, var(--color-background));
     color: var(--color-picker-color, var(--color-foreground));
-    outline: var(--color-picker-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--color-picker-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--color-picker-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--color-picker-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) *
+        -1);
     cursor: pointer;
     transition: border-color var(--color-picker-transition, var(--transition-default)),
       outline-color var(--color-picker-transition, var(--transition-default)),
@@ -98,6 +103,21 @@
     &:is([disabled], [data-disabled], [data-readonly]) {
       cursor: default;
     }
+
+    &[data-fit-content] {
+      width: auto;
+      min-width: var(--color-picker-trigger-size, var(--size-md));
+      padding-inline: var(--color-picker-trigger-fit-content-padding-x, var(--spacing-3));
+      gap: var(--color-picker-trigger-fit-content-gap, var(--spacing-2));
+      display: inline-flex;
+    }
+
+    &[data-fit-content] [data-slot="color-picker-transparency-grid"], &[data-fit-content] [data-slot="color-picker-value-swatch"] {
+      width: var(--color-picker-trigger-fit-content-swatch-size, var(--spacing-4));
+      height: var(--color-picker-trigger-fit-content-swatch-size, var(--spacing-4));
+      flex-shrink: 0;
+      grid-area: auto;
+    }
   }
 
   .kgcaIq_positioner {
@@ -126,12 +146,15 @@
     overflow: auto;
 
     &[data-state="open"] {
-      animation: kgcaIq_color-picker-content-open var(--color-picker-transition, var(--transition-default));
+      animation: kgcaIq_color-picker-content-open
+        var(--color-picker-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
 
     &[data-state="closed"] {
       animation: kgcaIq_color-picker-content-closed
-        var(--color-picker-transition, var(--transition-default));
+        var(--color-picker-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
   }
 
@@ -160,8 +183,8 @@
 
   .kgcaIq_thumb {
     box-sizing: border-box;
-    width: var(--color-picker-thumb-size, 1rem);
-    height: var(--color-picker-thumb-size, 1rem);
+    width: var(--color-picker-thumb-size, var(--spacing-4));
+    height: var(--color-picker-thumb-size, var(--spacing-4));
     border-radius: var(--color-picker-thumb-radius, var(--radius-full));
     background: var(--color-picker-thumb-bg, var(--color-background));
     box-shadow: 0 0 0 var(--color-picker-thumb-inner-ring-width, var(--border-width-md))
@@ -203,6 +226,14 @@
     }
   }
 
+  .kgcaIq_sliders {
+    gap: var(--color-picker-sliders-gap, var(--spacing-2));
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+  }
+
   .kgcaIq_channelSliderTrack {
     width: 100%;
     height: var(--color-picker-channel-slider-track-size, var(--spacing-3));
@@ -233,7 +264,7 @@
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    height: var(--color-picker-input-height, var(--size-lg));
+    height: var(--color-picker-input-height, var(--size-md));
     border: var(--color-picker-border-width, var(--border-width-sm)) solid
       var(--color-picker-border-color, var(--color-border));
     border-radius: var(--color-picker-radius, var(--radius-md));
@@ -243,8 +274,10 @@
     font: inherit;
     font-size: var(--color-picker-input-font-size, var(--text-sm));
     line-height: var(--color-picker-input-line-height, var(--line-height-text-sm));
-    outline: var(--color-picker-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--color-picker-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--color-picker-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--color-picker-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) *
+        -1);
     transition: border-color var(--color-picker-transition, var(--transition-default)),
       outline-color var(--color-picker-transition, var(--transition-default));
     appearance: textfield;
@@ -286,8 +319,8 @@
 
   .kgcaIq_eyeDropperTrigger, .kgcaIq_formatTrigger {
     box-sizing: border-box;
-    height: var(--color-picker-action-size, var(--size-lg));
-    min-width: var(--color-picker-action-size, var(--size-lg));
+    height: var(--color-picker-action-size, var(--size-md));
+    min-width: var(--color-picker-action-size, var(--size-md));
     justify-content: center;
     align-items: center;
     gap: var(--color-picker-action-gap, var(--spacing-2));
@@ -300,8 +333,10 @@
     font: inherit;
     font-size: var(--color-picker-action-font-size, var(--text-sm));
     line-height: var(--color-picker-action-line-height, var(--line-height-text-sm));
-    outline: var(--color-picker-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--color-picker-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--color-picker-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--color-picker-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) *
+        -1);
     cursor: pointer;
     transition: border-color var(--color-picker-transition, var(--transition-default)),
       outline-color var(--color-picker-transition, var(--transition-default)),
@@ -312,8 +347,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--color-picker-icon-size, 1rem);
-      height: var(--color-picker-icon-size, 1rem);
+      width: var(--color-picker-icon-size, var(--spacing-4));
+      height: var(--color-picker-icon-size, var(--spacing-4));
     }
 
     &:is(:focus-visible, [data-focus]) {
@@ -354,7 +389,8 @@
     display: inline-flex;
 
     &:focus-visible {
-      box-shadow: 0 0 0 var(--color-picker-focus-ring-width, var(--border-width-sm))
+      box-shadow: 0 0 0
+        var(--color-picker-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
         var(--color-picker-focus-ring-color, var(--color-ring));
     }
 
@@ -366,8 +402,8 @@
 
   .kgcaIq_swatch {
     box-sizing: border-box;
-    width: var(--color-picker-swatch-size, 2rem);
-    height: var(--color-picker-swatch-size, 2rem);
+    width: var(--color-picker-swatch-size, var(--size-sm));
+    height: var(--color-picker-swatch-size, var(--size-sm));
     border-radius: inherit;
     box-shadow: inset 0 0 0 var(--color-picker-swatch-border-width, var(--border-width-sm))
       var(--color-picker-swatch-border-color, oklab(0% none none / .14));
@@ -380,7 +416,7 @@
 
   .kgcaIq_swatchIndicator {
     color: var(--color-picker-swatch-indicator-color, white);
-    filter: drop-shadow(0 1px 1px #00000073);
+    filter: var(--color-picker-swatch-indicator-shadow, drop-shadow(0 1px 1px #00000073));
     pointer-events: none;
     justify-content: center;
     align-items: center;
@@ -389,8 +425,8 @@
     inset: 0;
 
     & > svg {
-      width: var(--color-picker-swatch-indicator-size, 1rem);
-      height: var(--color-picker-swatch-indicator-size, 1rem);
+      width: var(--color-picker-swatch-indicator-size, var(--spacing-4));
+      height: var(--color-picker-swatch-indicator-size, var(--spacing-4));
     }
 
     [data-state="checked"] > &, &[data-state="checked"] {

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

@@ -1,6 +1,6 @@
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
 import { ComponentProps } from "react";
-import { ColorPicker, parseColor } from "@ark-ui/react/color-picker";
+import { ColorPicker, parseColor, useColorPicker, useColorPickerContext } from "@ark-ui/react/color-picker";
 
 //#region src/components/color-picker/ColorPicker.d.ts
 type ColorPickerRootProps = ComponentProps<typeof ColorPicker.Root> & OverlayPortalProps;
@@ -17,6 +17,7 @@ declare const ColorPicker$1: import("react").ForwardRefExoticComponent<Omit<Colo
   AreaBackground: import("react").ForwardRefExoticComponent<Omit<ColorPicker.AreaBackgroundProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   AreaThumb: import("react").ForwardRefExoticComponent<Omit<ColorPicker.AreaThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ChannelSlider: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ChannelSliderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Sliders: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ChannelSliderTrack: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ChannelSliderTrackProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ChannelSliderThumb: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ChannelSliderThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ChannelSliderLabel: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ChannelSliderLabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
@@ -33,7 +34,6 @@ declare const ColorPicker$1: import("react").ForwardRefExoticComponent<Omit<Colo
   ValueSwatch: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ValueSwatchProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ValueText: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ValueTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   View: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ViewProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  HiddenInput: import("react").ForwardRefExoticComponent<Omit<ColorPicker.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 };
 //#endregion
-export { ColorPicker$1 as ColorPicker, parseColor };
+export { ColorPicker$1 as ColorPicker, parseColor, useColorPicker, useColorPickerContext };