@moduix/react 2.2.0 → 2.2.4

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

@@ -1,13 +1,11 @@
-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>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<Collapsible.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  RootProvider: import("react").ForwardRefExoticComponent<Omit<Collapsible.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  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>>;
+import { Collapsible as CollapsiblePrimitive, useCollapsible, useCollapsibleContext } from '@ark-ui/react/collapsible';
+declare const Collapsible: import("react").ForwardRefExoticComponent<Omit<CollapsiblePrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<CollapsiblePrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<CollapsiblePrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: CollapsiblePrimitive.ContextProps) => import("react").ReactNode;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<CollapsiblePrimitive.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Omit<CollapsiblePrimitive.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<CollapsiblePrimitive.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, useCollapsible };
+export { Collapsible, useCollapsible, useCollapsibleContext };

package/dist/components/collapsible/Collapsible.js

@@ -1,71 +1,71 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import { ChevronDownIcon } from "../../lib/moduix/icons/ui/Icons.js";
-import Collapsible_module_default from "./Collapsible.module.js";
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Collapsible, useCollapsible, useCollapsibleContext } from "@ark-ui/react/collapsible";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-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, {
-		ref,
-		"data-slot": "collapsible-root",
-		className: clsx(Collapsible_module_default.root, normalizeClassName(className)),
-		...props
-	});
+import { ChevronDownIcon } from "../../internal/icons/ui/index.js";
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Collapsible_module from "./Collapsible.module.js";
+const Collapsible_CollapsibleRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Collapsible.Root, {
+        ref: ref,
+        "data-slot": "collapsible-root",
+        className: clsx(Collapsible_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const CollapsibleRootProvider = forwardRef(function CollapsibleRootProvider({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Collapsible.RootProvider, {
-		ref,
-		"data-slot": "collapsible-root-provider",
-		className: clsx(Collapsible_module_default.root, normalizeClassName(className)),
-		...props
-	});
+const Collapsible_CollapsibleRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Collapsible.RootProvider, {
+        ref: ref,
+        "data-slot": "collapsible-root-provider",
+        className: clsx(Collapsible_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const CollapsibleTrigger = forwardRef(function CollapsibleTrigger({ asChild, className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
-		ref,
-		asChild,
-		"data-slot": "collapsible-trigger",
-		className: clsx(!asChild && Collapsible_module_default.trigger, normalizeClassName(className)),
-		...props
-	});
+const Collapsible_CollapsibleTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Collapsible.Trigger, {
+        ref: ref,
+        asChild: asChild,
+        "data-slot": "collapsible-trigger",
+        className: clsx(!asChild && Collapsible_module.trigger, normalizeClassName(className)),
+        ...props
+    });
 });
-const CollapsibleIndicator = forwardRef(function CollapsibleIndicator({ className, children, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Collapsible.Indicator, {
-		ref,
-		"data-slot": "collapsible-indicator",
-		className: clsx(Collapsible_module_default.indicator, normalizeClassName(className)),
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(ChevronDownIcon, {})
-	});
+const Collapsible_CollapsibleIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Collapsible.Indicator, {
+        ref: ref,
+        "data-slot": "collapsible-indicator",
+        className: clsx(Collapsible_module.indicator, normalizeClassName(className)),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(ChevronDownIcon, {})
+    });
 });
-const CollapsibleContent = forwardRef(function CollapsibleContent({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Collapsible.Content, {
-		ref,
-		"data-slot": "collapsible-content",
-		className: clsx(Collapsible_module_default.content, normalizeClassName(className)),
-		...props
-	});
+const Collapsible_CollapsibleContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Collapsible.Content, {
+        ref: ref,
+        "data-slot": "collapsible-content",
+        className: clsx(Collapsible_module.content, normalizeClassName(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_CollapsibleBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "collapsible",
+        "data-part": "body",
+        "data-slot": "collapsible-body",
+        className: clsx(Collapsible_module.body, normalizeClassName(className)),
+        ...props
+    });
 });
-const Collapsible$1 = Object.assign(CollapsibleRoot, {
-	Root: CollapsibleRoot,
-	RootProvider: CollapsibleRootProvider,
-	Trigger: CollapsibleTrigger,
-	Indicator: CollapsibleIndicator,
-	Content: CollapsibleContent,
-	Body: CollapsibleBody
+const Collapsible_Collapsible = Object.assign(Collapsible_CollapsibleRoot, {
+    Root: Collapsible_CollapsibleRoot,
+    RootProvider: Collapsible_CollapsibleRootProvider,
+    Context: Collapsible.Context,
+    Trigger: Collapsible_CollapsibleTrigger,
+    Indicator: Collapsible_CollapsibleIndicator,
+    Content: Collapsible_CollapsibleContent,
+    Body: Collapsible_CollapsibleBody
 });
-//#endregion
-export { Collapsible$1 as Collapsible, useCollapsible };
+export { Collapsible_Collapsible as Collapsible, useCollapsible, useCollapsibleContext };

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

@@ -1,13 +1,13 @@
-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",
-	"indicator": "CaaIva_indicator",
-	"root": "CaaIva_root",
-	"trigger": "CaaIva_trigger"
+import "./Collapsible_module.css";
+const Collapsible_module = {
+    root: "root-Z4Oayn",
+    trigger: "trigger-o93fRO",
+    indicator: "indicator-ll1vd8",
+    content: "content-dHAw0w",
+    "collapsible-content-open": "collapsible-content-open-Su6gb3",
+    collapsibleContentOpen: "collapsible-content-open-Su6gb3",
+    "collapsible-content-closed": "collapsible-content-closed-EkdIr9",
+    collapsibleContentClosed: "collapsible-content-closed-EkdIr9",
+    body: "body-TpC0eh"
 };
-//#endregion
-export { Collapsible_module_default as default };
+export default Collapsible_module;

package/dist/components/collapsible/{Collapsible.css → Collapsible_module.css}

@@ -1,5 +1,5 @@
 @layer moduix.components {
-  @keyframes CaaIva_collapsible-content-open {
+  @keyframes collapsible-content-open-Su6gb3 {
     from {
       height: var(--collapsed-height, 0);
       width: var(--collapsed-width, var(--width));
@@ -13,7 +13,7 @@
     }
   }
 
-  @keyframes CaaIva_collapsible-content-closed {
+  @keyframes collapsible-content-closed-EkdIr9 {
     from {
       height: var(--height);
       width: var(--width);
@@ -27,7 +27,7 @@
     }
   }
 
-  .CaaIva_root {
+  .root-Z4Oayn {
     box-sizing: border-box;
     width: var(--moduix-collapsible-width, 100%);
     max-width: var(--moduix-collapsible-max-width, 100%);
@@ -37,7 +37,7 @@
     display: flex;
   }
 
-  .CaaIva_trigger {
+  .trigger-o93fRO {
     box-sizing: border-box;
     justify-content: space-between;
     align-items: center;
@@ -51,7 +51,8 @@
     font: inherit;
     font-size: var(--moduix-collapsible-trigger-font-size, var(--moduix-text-sm));
     line-height: var(--moduix-collapsible-trigger-line-height, var(--moduix-line-height-text-sm));
-    text-align: left;
+    text-align: start;
+    -webkit-user-select: none;
     user-select: none;
     cursor: pointer;
     transition: background-color
@@ -61,32 +62,32 @@
     outline: 0;
     margin: 0;
     display: flex;
+  }
 
-    &:focus-visible {
-      outline: var(--moduix-collapsible-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+  .trigger-o93fRO:focus-visible {
+    z-index: 1;
+    outline: var(--moduix-collapsible-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
         solid var(--moduix-collapsible-focus-ring-color, var(--moduix-color-ring));
-      outline-offset: var(--moduix-collapsible-focus-ring-offset, var(--moduix-border-width-sm));
-    }
-
-    &:not(:is([disabled], [data-disabled])) {
-      @media (hover: hover) {
-        &:hover {
-          background-color: var(--moduix-collapsible-trigger-bg-hover, var(--moduix-collapsible-trigger-bg, transparent));
-        }
-      }
+    outline-offset: calc(var(--moduix-collapsible-focus-ring-offset, var(--moduix-border-width-sm)) * -1);
+    position: relative;
+  }
 
-      &:active {
-        background-color: var(--moduix-collapsible-trigger-bg-active, var(--moduix-collapsible-trigger-bg-hover, var(--moduix-collapsible-trigger-bg, transparent)));
-      }
+  @media (hover: hover) {
+    .trigger-o93fRO:not(:is([disabled], [data-disabled])):hover {
+      background-color: var(--moduix-collapsible-trigger-bg-hover, var(--moduix-collapsible-trigger-bg, transparent));
     }
+  }
 
-    &:is([disabled], [data-disabled]) {
-      opacity: var(--moduix-collapsible-disabled-opacity, var(--moduix-opacity-disabled));
-      cursor: default;
-    }
+  .trigger-o93fRO:not(:is([disabled], [data-disabled])):active {
+    background-color: var(--moduix-collapsible-trigger-bg-active, var(--moduix-collapsible-trigger-bg-hover, var(--moduix-collapsible-trigger-bg, transparent)));
   }
 
-  .CaaIva_indicator {
+  .trigger-o93fRO:is([disabled], [data-disabled]) {
+    opacity: var(--moduix-collapsible-disabled-opacity, var(--moduix-opacity-disabled));
+    cursor: default;
+  }
+
+  .indicator-ll1vd8 {
     box-sizing: border-box;
     width: var(--moduix-collapsible-indicator-size, var(--moduix-spacing-3));
     height: var(--moduix-collapsible-indicator-size, var(--moduix-spacing-3));
@@ -96,52 +97,53 @@
     justify-content: center;
     align-items: center;
     display: inline-flex;
+  }
 
-    & > svg {
-      width: 100%;
-      height: 100%;
-    }
+  .indicator-ll1vd8 > svg {
+    width: 100%;
+    height: 100%;
+  }
 
-    &[data-state="open"] {
-      transform: var(--moduix-collapsible-indicator-open-transform, rotate(180deg));
-    }
+  .indicator-ll1vd8[data-state="open"] {
+    transform: var(--moduix-collapsible-indicator-open-transform, rotate(180deg));
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-collapsible-disabled-opacity, var(--moduix-opacity-disabled));
-    }
+  .indicator-ll1vd8[data-disabled] {
+    opacity: var(--moduix-collapsible-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
-  .CaaIva_content {
+  .content-dHAw0w {
     --collapsed-height: 0;
     box-sizing: border-box;
     color: var(--moduix-collapsible-content-color, var(--moduix-color-muted-foreground));
     font-size: var(--moduix-collapsible-content-font-size, var(--moduix-text-sm));
     line-height: var(--moduix-collapsible-content-line-height, var(--moduix-line-height-text-sm));
     overflow: hidden;
+  }
 
-    &[data-state="open"] {
-      animation: CaaIva_collapsible-content-open
+  .content-dHAw0w[data-state="open"] {
+    animation: collapsible-content-open-Su6gb3
         var(--moduix-collapsible-content-transition, var(--moduix-transition-default));
+  }
 
-      &[data-has-collapsed-size] {
-        --moduix-collapsible-content-closed-opacity: var(--moduix-collapsible-content-open-opacity, 1);
-      }
-    }
+  .content-dHAw0w[data-state="open"][data-has-collapsed-size] {
+    --moduix-collapsible-content-closed-opacity: var(--moduix-collapsible-content-open-opacity, 1);
+  }
 
-    &[data-state="closed"] {
-      animation: CaaIva_collapsible-content-closed
+  .content-dHAw0w[data-state="closed"] {
+    animation: collapsible-content-closed-EkdIr9
         var(--moduix-collapsible-content-transition, var(--moduix-transition-default));
+  }
 
-      &[data-has-collapsed-size] {
-        --moduix-collapsible-content-closed-opacity: var(--moduix-collapsible-content-open-opacity, 1);
-      }
-    }
+  .content-dHAw0w[data-state="closed"][data-has-collapsed-size] {
+    --moduix-collapsible-content-closed-opacity: var(--moduix-collapsible-content-open-opacity, 1);
   }
 
-  .CaaIva_body {
+  .body-TpC0eh {
     gap: var(--moduix-collapsible-body-gap, var(--moduix-spacing-2));
     min-width: 0;
     padding: var(--moduix-collapsible-body-padding, var(--moduix-spacing-2));
     display: grid;
   }
 }
+

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

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

package/dist/components/collapsible/index.js

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

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

@@ -1,39 +1,37 @@
-import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
-import { ComponentProps } from "react";
-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;
-type ColorPickerRootProviderProps = ComponentProps<typeof ColorPicker.RootProvider> & OverlayPortalProps;
-declare const ColorPicker$1: import("react").ForwardRefExoticComponent<Omit<ColorPickerRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<ColorPickerRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  RootProvider: import("react").ForwardRefExoticComponent<Omit<ColorPickerRootProviderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Label: import("react").ForwardRefExoticComponent<Omit<ColorPicker.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-  Control: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Trigger: import("react").ForwardRefExoticComponent<Omit<ColorPicker.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Positioner: import("react").ForwardRefExoticComponent<Omit<ColorPicker.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Content: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Area: import("react").ForwardRefExoticComponent<Omit<ColorPicker.AreaProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  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>>;
-  ChannelSliderValueText: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ChannelSliderValueTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  ChannelInput: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ChannelInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-  EyeDropperTrigger: import("react").ForwardRefExoticComponent<Omit<ColorPicker.EyeDropperTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  FormatSelect: import("react").ForwardRefExoticComponent<Omit<ColorPicker.FormatSelectProps & import("react").RefAttributes<HTMLSelectElement>, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
-  FormatTrigger: import("react").ForwardRefExoticComponent<Omit<ColorPicker.FormatTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  SwatchGroup: import("react").ForwardRefExoticComponent<Omit<ColorPicker.SwatchGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  SwatchTrigger: import("react").ForwardRefExoticComponent<Omit<ColorPicker.SwatchTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Swatch: import("react").ForwardRefExoticComponent<Omit<ColorPicker.SwatchProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  SwatchIndicator: import("react").ForwardRefExoticComponent<Omit<ColorPicker.SwatchIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  TransparencyGrid: import("react").ForwardRefExoticComponent<Omit<ColorPicker.TransparencyGridProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  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>>;
+import { ColorPicker as ColorPickerPrimitive, parseColor, useColorPicker, useColorPickerContext } from '@ark-ui/react/color-picker';
+import type { ComponentProps, ReactNode } from 'react';
+import { type OverlayPortalProps } from '../../internal/overlayPortal';
+type ColorPickerRootProps = ComponentProps<typeof ColorPickerPrimitive.Root> & OverlayPortalProps;
+type ColorPickerRootProviderProps = ComponentProps<typeof ColorPickerPrimitive.RootProvider> & OverlayPortalProps;
+declare const ColorPicker: import("react").ForwardRefExoticComponent<Omit<ColorPickerRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<ColorPickerRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<ColorPickerRootProviderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: ColorPickerPrimitive.ContextProps) => ReactNode;
+    Label: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    Control: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Area: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.AreaProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    AreaBackground: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.AreaBackgroundProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    AreaThumb: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.AreaThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ChannelSlider: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.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<ColorPickerPrimitive.ChannelSliderTrackProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ChannelSliderThumb: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.ChannelSliderThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ChannelSliderLabel: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.ChannelSliderLabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    ChannelSliderValueText: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.ChannelSliderValueTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    ChannelInput: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.ChannelInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    EyeDropperTrigger: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.EyeDropperTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    FormatSelect: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.FormatSelectProps & import("react").RefAttributes<HTMLSelectElement>, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
+    FormatTrigger: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.FormatTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    SwatchGroup: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.SwatchGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    SwatchTrigger: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.SwatchTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Swatch: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.SwatchProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    SwatchIndicator: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.SwatchIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    TransparencyGrid: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.TransparencyGridProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ValueSwatch: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.ValueSwatchProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ValueText: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.ValueTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    View: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.ViewProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
-//#endregion
-export { ColorPicker$1 as ColorPicker, parseColor, useColorPicker, useColorPickerContext };
+export { ColorPicker, parseColor, useColorPicker, useColorPickerContext };