@moduix/react-tailwind 1.0.0

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

@@ -0,0 +1,14 @@
+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>>;
+};
+export { CloseButton };

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

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { forwardRef } from "react";
+import { cn } from "../../internal/cn.js";
+import { CloseIcon } from "../../internal/icons/ui/index.js";
+const CloseButton_CloseButtonRoot = /*#__PURE__*/ forwardRef(function({ asChild, className, children, disabled, onClick, onClickCapture, 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 || true === ariaDisabled || 'true' === ariaDisabled || void 0 !== dataDisabled;
+    const nativeDisabled = asChild ? void 0 : disabled;
+    const resolvedAriaDisabled = asChild && disabled ? true : ariaDisabled;
+    const handleClickCapture = (event)=>{
+        if (isDisabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        onClickCapture?.(event);
+    };
+    const handleClick = (event)=>{
+        if (isDisabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        onClick?.(event);
+    };
+    return /*#__PURE__*/ jsx(ark.button, {
+        ref: ref,
+        asChild: asChild,
+        ...props,
+        type: asChild ? type : type ?? 'button',
+        disabled: nativeDisabled,
+        "data-scope": dataScope ?? 'close-button',
+        "data-part": dataPart ?? 'root',
+        "data-slot": dataSlot ?? 'close-button-root',
+        "data-disabled": dataDisabled ?? (isDisabled ? '' : void 0),
+        className: cn("m-0 box-border inline-flex size-7 shrink-0 cursor-pointer appearance-none items-center justify-center rounded-sm border-0 bg-transparent p-0 text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 [&:active:not([data-disabled])]:opacity-[0.94] [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-3 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-foreground", className),
+        "aria-disabled": resolvedAriaDisabled,
+        "aria-label": ariaLabel ?? (null == ariaLabelledBy ? 'Close' : void 0),
+        "aria-labelledby": ariaLabelledBy,
+        onClickCapture: handleClickCapture,
+        onClick: handleClick,
+        children: children || /*#__PURE__*/ jsx(CloseIcon, {
+            className: "size-3 shrink-0"
+        })
+    });
+});
+const CloseButton = Object.assign(CloseButton_CloseButtonRoot, {
+    Root: CloseButton_CloseButtonRoot
+});
+export { CloseButton };

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

@@ -0,0 +1 @@
+export { CloseButton } from './CloseButton.js';

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

@@ -0,0 +1 @@
+export { CloseButton } from "./CloseButton.js";

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

@@ -0,0 +1,11 @@
+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>>;
+};
+export { Collapsible, useCollapsible, useCollapsibleContext };

package/dist/components/collapsible/Collapsible.js

@@ -0,0 +1,67 @@
+"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 { forwardRef } from "react";
+import { cn } from "../../internal/cn.js";
+import { ChevronDownIcon } from "../../internal/icons/ui/index.js";
+const Collapsible_CollapsibleRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Collapsible.Root, {
+        ref: ref,
+        "data-slot": "collapsible-root",
+        className: cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground', className),
+        ...props
+    });
+});
+const Collapsible_CollapsibleRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Collapsible.RootProvider, {
+        ref: ref,
+        "data-slot": "collapsible-root-provider",
+        className: cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground', 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: cn(!asChild && 'box-border flex w-full cursor-pointer items-center justify-between gap-2 bg-transparent px-0 py-1 text-start text-sm outline-0 transition-colors duration-200 select-none focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none', className),
+        ...props
+    });
+});
+const Collapsible_CollapsibleIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Collapsible.Indicator, {
+        ref: ref,
+        "data-slot": "collapsible-indicator",
+        className: cn('inline-flex size-3 shrink-0 items-center justify-center transition-transform duration-200 data-disabled:opacity-50 data-[state=open]:rotate-180 motion-reduce:transition-none [&_svg]:size-full', className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(ChevronDownIcon, {})
+    });
+});
+const Collapsible_CollapsibleContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Collapsible.Content, {
+        ref: ref,
+        "data-slot": "collapsible-content",
+        className: cn('box-border overflow-hidden text-sm text-muted-foreground data-[state=closed]:animate-moduix-collapsible-closed data-[has-collapsed-size]:data-[state=closed]:animate-moduix-collapsible-closed-partial data-[state=open]:animate-moduix-collapsible-open data-[has-collapsed-size]:data-[state=open]:animate-moduix-collapsible-open-partial motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', className),
+        ...props
+    });
+});
+const Collapsible_CollapsibleBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-slot": "collapsible-body",
+        className: cn('grid min-w-0 gap-2', className),
+        ...props
+    });
+});
+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
+});
+export { Collapsible_Collapsible as Collapsible, useCollapsible, useCollapsibleContext };

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

@@ -0,0 +1 @@
+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

@@ -0,0 +1,38 @@
+import { ColorPicker as ColorPickerPrimitive, parseColor, useColorPicker, useColorPickerContext } from '@ark-ui/react/color-picker';
+import type { ComponentProps } from 'react';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+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) => import("react").ReactNode;
+    HiddenInput: import("react").ForwardRefExoticComponent<ColorPickerPrimitive.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+    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>>;
+};
+export { ColorPicker, parseColor, useColorPicker, useColorPickerContext };

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

@@ -0,0 +1,354 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ColorPicker, parseColor, useColorPicker, useColorPickerContext } from "@ark-ui/react/color-picker";
+import { forwardRef } from "react";
+import { cn } from "../../internal/cn.js";
+import { CheckIcon, ChevronDownIcon, PipetteIcon } from "../../internal/icons/ui/index.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+const ColorPicker_ColorPickerRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }, ref) {
+    return /*#__PURE__*/ jsx(OverlayPortalProvider, {
+        portalled: portalled,
+        portalRef: portalRef,
+        children: /*#__PURE__*/ jsx(ColorPicker.Root, {
+            ref: ref,
+            asChild: asChild,
+            "data-slot": "color-picker-root",
+            className: cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', className),
+            lazyMount: lazyMount,
+            unmountOnExit: unmountOnExit,
+            ...props,
+            children: children
+        })
+    });
+});
+const ColorPicker_ColorPickerRootProvider = /*#__PURE__*/ forwardRef(function({ asChild, children, className, lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }, ref) {
+    return /*#__PURE__*/ jsx(OverlayPortalProvider, {
+        portalled: portalled,
+        portalRef: portalRef,
+        children: /*#__PURE__*/ jsx(ColorPicker.RootProvider, {
+            ref: ref,
+            asChild: asChild,
+            "data-slot": "color-picker-root-provider",
+            className: cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', className),
+            lazyMount: lazyMount,
+            unmountOnExit: unmountOnExit,
+            ...props,
+            children: children
+        })
+    });
+});
+const ColorPicker_ColorPickerLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.Label, {
+        ref: ref,
+        "data-slot": "color-picker-label",
+        className: cn('inline-flex items-center text-sm font-medium text-foreground select-none', className),
+        ...props
+    });
+});
+const ColorPicker_ColorPickerControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.Control, {
+        ref: ref,
+        "data-slot": "color-picker-control",
+        className: cn('flex min-w-0 items-center gap-2 data-disabled:opacity-50', className),
+        ...props
+    });
+});
+const ColorPicker_ColorPickerTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.Trigger, {
+        ref: ref,
+        "data-slot": "color-picker-trigger",
+        className: cn('group/trigger box-border grid size-control-md shrink-0 place-items-center overflow-hidden rounded-md border border-border bg-background p-1 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color] duration-200 ease-in-out select-none focus-visible:border-ring focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default data-invalid:border-destructive data-invalid:outline-destructive data-readonly:cursor-default data-[fit-content]:inline-flex data-[fit-content]:w-auto data-[fit-content]:min-w-control-md data-[fit-content]:gap-2 data-[fit-content]:px-3 data-[state=open]:border-ring data-[state=open]:outline-ring motion-reduce:transition-none', className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(ColorPicker.TransparencyGrid, {
+                    "data-slot": "color-picker-transparency-grid",
+                    className: "col-start-1 row-start-1 size-full rounded-[inherit] group-data-[fit-content]/trigger:col-auto group-data-[fit-content]/trigger:row-auto group-data-[fit-content]/trigger:size-4 group-data-[fit-content]/trigger:shrink-0"
+                }),
+                /*#__PURE__*/ jsx(ColorPicker.ValueSwatch, {
+                    "data-slot": "color-picker-value-swatch",
+                    className: "z-1 col-start-1 row-start-1 size-full rounded-[inherit] group-data-[fit-content]/trigger:col-auto group-data-[fit-content]/trigger:row-auto group-data-[fit-content]/trigger:size-4 group-data-[fit-content]/trigger:shrink-0"
+                })
+            ]
+        })
+    });
+});
+const ColorPicker_ColorPickerPositioner = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(OverlayPortal, {
+        children: /*#__PURE__*/ jsx(ColorPicker.Positioner, {
+            ref: ref,
+            "data-slot": "color-picker-positioner",
+            className: cn('z-[var(--z-index)] outline-0', className),
+            ...props
+        })
+    });
+});
+const ColorPicker_ColorPickerContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.Content, {
+        ref: ref,
+        "data-slot": "color-picker-content",
+        className: cn('z-[calc(var(--moduix-z-popup)+var(--layer-index,0))] box-border flex max-h-[min(32rem,var(--available-height))] w-64 max-w-[var(--available-width)] origin-[var(--transform-origin)] flex-col gap-3 overflow-auto overscroll-contain rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-lg outline-0 data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', className),
+        ...props
+    });
+});
+const ColorPicker_ColorPickerArea = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.Area, {
+        ref: ref,
+        "data-slot": "color-picker-area",
+        className: cn('relative box-border h-40 w-full touch-none overflow-hidden rounded-md shadow-[inset_0_0_0_1px_color-mix(in_oklab,black_14%,transparent)] select-none data-disabled:cursor-default data-readonly:cursor-default', className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(ColorPicker.AreaBackground, {
+                    "data-slot": "color-picker-area-background",
+                    className: "size-full rounded-[inherit]"
+                }),
+                /*#__PURE__*/ jsx(ColorPicker.AreaThumb, {
+                    "data-slot": "color-picker-area-thumb",
+                    className: "box-border size-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-background shadow-[0_0_0_4px_rgb(0_0_0_/_18%),0_2px_4px_0_rgb(0_0_0_/_10%),0_1px_2px_-1px_rgb(0_0_0_/_10%)] ring-2 ring-background outline-0 focus-visible:ring-ring data-disabled:pointer-events-none"
+                })
+            ]
+        })
+    });
+});
+const ColorPicker_ColorPickerAreaBackground = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.AreaBackground, {
+        ref: ref,
+        "data-slot": "color-picker-area-background",
+        className: cn('size-full rounded-[inherit]', className),
+        ...props
+    });
+});
+const ColorPicker_ColorPickerAreaThumb = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.AreaThumb, {
+        ref: ref,
+        "data-slot": "color-picker-area-thumb",
+        className: cn('box-border size-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-background shadow-[0_0_0_4px_rgb(0_0_0_/_18%),0_2px_4px_0_rgb(0_0_0_/_10%),0_1px_2px_-1px_rgb(0_0_0_/_10%)] ring-2 ring-background outline-0 focus-visible:ring-ring data-disabled:pointer-events-none', className),
+        ...props
+    });
+});
+const ColorPicker_ColorPickerChannelSlider = /*#__PURE__*/ forwardRef(function({ className, children, channel, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.ChannelSlider, {
+        ref: ref,
+        "data-slot": "color-picker-channel-slider",
+        className: cn('relative box-border flex h-3 touch-none items-center rounded-full select-none data-[orientation=vertical]:h-40 data-[orientation=vertical]:w-3 data-[orientation=vertical]:items-stretch data-[orientation=vertical]:justify-center', className),
+        channel: channel,
+        ...props,
+        children: children ?? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                'alpha' === channel && /*#__PURE__*/ jsx(ColorPicker.TransparencyGrid, {
+                    "data-slot": "color-picker-transparency-grid",
+                    className: "size-full rounded-[inherit]"
+                }),
+                /*#__PURE__*/ jsx(ColorPicker.ChannelSliderTrack, {
+                    "data-slot": "color-picker-channel-slider-track",
+                    className: "h-3 w-full rounded-[inherit] shadow-[inset_0_0_0_1px_color-mix(in_oklab,black_14%,transparent)] data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3"
+                }),
+                /*#__PURE__*/ jsx(ColorPicker.ChannelSliderThumb, {
+                    "data-slot": "color-picker-channel-slider-thumb",
+                    className: "box-border size-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-background shadow-[0_0_0_4px_rgb(0_0_0_/_18%),0_2px_4px_0_rgb(0_0_0_/_10%),0_1px_2px_-1px_rgb(0_0_0_/_10%)] ring-2 ring-background outline-0 focus-visible:ring-ring data-disabled:pointer-events-none"
+                })
+            ]
+        })
+    });
+});
+const ColorPicker_ColorPickerSliders = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        "data-slot": "color-picker-sliders",
+        className: cn('flex min-w-0 flex-1 flex-col gap-2', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(ColorPicker_ColorPickerChannelSlider, {
+                channel: "hue"
+            }),
+            /*#__PURE__*/ jsx(ColorPicker_ColorPickerChannelSlider, {
+                channel: "alpha"
+            })
+        ]
+    });
+});
+const ColorPicker_ColorPickerChannelSliderTrack = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.ChannelSliderTrack, {
+        ref: ref,
+        "data-slot": "color-picker-channel-slider-track",
+        className: cn('h-3 w-full rounded-[inherit] shadow-[inset_0_0_0_1px_color-mix(in_oklab,black_14%,transparent)] data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3', className),
+        ...props
+    });
+});
+const ColorPicker_ColorPickerChannelSliderThumb = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.ChannelSliderThumb, {
+        ref: ref,
+        "data-slot": "color-picker-channel-slider-thumb",
+        className: cn('box-border size-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-background shadow-[0_0_0_4px_rgb(0_0_0_/_18%),0_2px_4px_0_rgb(0_0_0_/_10%),0_1px_2px_-1px_rgb(0_0_0_/_10%)] ring-2 ring-background outline-0 focus-visible:ring-ring data-disabled:pointer-events-none', className),
+        ...props
+    });
+});
+const ColorPicker_ColorPickerChannelSliderLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.ChannelSliderLabel, {
+        ref: ref,
+        "data-slot": "color-picker-channel-slider-label",
+        className: cn('text-sm font-medium text-foreground', className),
+        ...props
+    });
+});
+const ColorPicker_ColorPickerChannelSliderValueText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.ChannelSliderValueText, {
+        ref: ref,
+        "data-slot": "color-picker-channel-slider-value-text",
+        className: cn('text-sm text-muted-foreground', className),
+        ...props
+    });
+});
+const ColorPicker_ColorPickerChannelInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.ChannelInput, {
+        ref: ref,
+        "data-slot": "color-picker-channel-input",
+        className: cn('box-border h-control-md w-full min-w-0 [appearance:textfield] rounded-md border border-border bg-background px-3 text-sm text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color] duration-200 ease-in-out focus:border-ring focus:outline-ring data-disabled:opacity-50 data-invalid:border-destructive data-invalid:outline-destructive data-[channel=alpha]:w-16 data-[channel=alpha]:flex-none motion-reduce:transition-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none', className),
+        ...props
+    });
+});
+const ColorPicker_ColorPickerEyeDropperTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.EyeDropperTrigger, {
+        ref: ref,
+        "data-slot": "color-picker-eye-dropper-trigger",
+        className: cn('box-border inline-flex h-control-md min-w-control-md shrink-0 items-center justify-center gap-2 rounded-md border border-border bg-transparent px-2 text-sm text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color,color] duration-200 ease-in-out focus-visible:border-ring focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default data-focus:border-ring data-focus:outline-ring data-readonly:cursor-default motion-reduce:transition-none [&:not([disabled]):not([data-disabled]):not([data-readonly]):hover]:bg-muted [&:not([disabled]):not([data-disabled]):not([data-readonly]):hover]:text-foreground [&>svg]:size-4 [&>svg]:shrink-0', className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(PipetteIcon, {})
+    });
+});
+const ColorPicker_ColorPickerFormatSelect = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsxs("span", {
+        className: "group/format-select relative inline-grid w-fit max-w-full min-w-0 shrink-0",
+        children: [
+            /*#__PURE__*/ jsx(ColorPicker.FormatSelect, {
+                ref: ref,
+                "data-slot": "color-picker-format-select",
+                className: cn('peer/format-select box-border h-control-md w-auto min-w-0 rounded-md border border-border bg-background px-3 pe-8 text-sm text-foreground uppercase outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color] duration-200 ease-in-out focus:border-ring focus:outline-ring disabled:cursor-default data-disabled:cursor-default data-disabled:opacity-50 data-invalid:border-destructive data-invalid:outline-destructive forced-colors:appearance-auto forced-colors:pe-3', className),
+                ...props
+            }),
+            /*#__PURE__*/ jsx("span", {
+                "aria-hidden": "true",
+                className: "pointer-events-none absolute top-1/2 right-3 inline-flex size-4 -translate-y-1/2 items-center justify-center rounded-sm bg-transparent leading-none text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out peer-disabled/format-select:opacity-50 peer-data-disabled/format-select:opacity-50 peer-[:not([disabled]):hover]/format-select:bg-muted peer-[:not([disabled]):hover]/format-select:text-foreground forced-colors:hidden [&>svg]:block [&>svg]:size-full",
+                children: /*#__PURE__*/ jsx(ChevronDownIcon, {})
+            })
+        ]
+    });
+});
+const ColorPicker_ColorPickerFormatTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.FormatTrigger, {
+        ref: ref,
+        "data-slot": "color-picker-format-trigger",
+        className: cn('box-border inline-flex h-control-md min-w-control-md shrink-0 items-center justify-center gap-2 rounded-md border border-border bg-transparent px-2 text-sm text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color,color] duration-200 ease-in-out focus-visible:border-ring focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default data-focus:border-ring data-focus:outline-ring data-readonly:cursor-default motion-reduce:transition-none [&:not([disabled]):not([data-disabled]):not([data-readonly]):hover]:bg-muted [&:not([disabled]):not([data-disabled]):not([data-readonly]):hover]:text-foreground [&>svg]:size-4 [&>svg]:shrink-0', className),
+        ...props
+    });
+});
+const ColorPicker_ColorPickerSwatchGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.SwatchGroup, {
+        ref: ref,
+        "data-slot": "color-picker-swatch-group",
+        className: cn('flex flex-wrap gap-2', className),
+        ...props
+    });
+});
+const ColorPicker_ColorPickerSwatchTrigger = /*#__PURE__*/ forwardRef(function({ className, children, value, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.SwatchTrigger, {
+        ref: ref,
+        "data-slot": "color-picker-swatch-trigger",
+        className: cn('group/swatch inline-flex cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 outline-0 focus-visible:ring-2 focus-visible:ring-ring data-disabled:cursor-default data-disabled:opacity-50', className),
+        value: value,
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(ColorPicker.Swatch, {
+            "data-slot": "color-picker-swatch",
+            className: "relative grid size-control-sm shrink-0 place-items-center overflow-hidden rounded-[inherit] shadow-[inset_0_0_0_1px_color-mix(in_oklab,black_14%,transparent)]",
+            value: value,
+            children: /*#__PURE__*/ jsx(ColorPicker.SwatchIndicator, {
+                "data-slot": "color-picker-swatch-indicator",
+                className: "pointer-events-none absolute inset-0 hidden items-center justify-center text-white [filter:drop-shadow(0_1px_1px_rgb(0_0_0_/_45%))] group-data-[state=checked]/swatch:inline-flex data-[state=checked]:inline-flex [&>svg]:size-4",
+                children: /*#__PURE__*/ jsx(CheckIcon, {})
+            })
+        })
+    });
+});
+const ColorPicker_ColorPickerSwatch = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.Swatch, {
+        ref: ref,
+        "data-slot": "color-picker-swatch",
+        className: cn('relative grid size-control-sm shrink-0 place-items-center overflow-hidden rounded-[inherit] shadow-[inset_0_0_0_1px_color-mix(in_oklab,black_14%,transparent)]', className),
+        ...props
+    });
+});
+const ColorPicker_ColorPickerSwatchIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.SwatchIndicator, {
+        ref: ref,
+        "data-slot": "color-picker-swatch-indicator",
+        className: cn('pointer-events-none absolute inset-0 hidden items-center justify-center text-white [filter:drop-shadow(0_1px_1px_rgb(0_0_0_/_45%))] data-[state=checked]:inline-flex [&>svg]:size-4', className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
+    });
+});
+const ColorPicker_ColorPickerTransparencyGrid = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.TransparencyGrid, {
+        ref: ref,
+        "data-slot": "color-picker-transparency-grid",
+        className: cn('col-start-1 row-start-1 size-full rounded-[inherit] group-data-[fit-content]/trigger:col-auto group-data-[fit-content]/trigger:row-auto group-data-[fit-content]/trigger:size-4 group-data-[fit-content]/trigger:shrink-0', className),
+        ...props
+    });
+});
+const ColorPicker_ColorPickerValueSwatch = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.ValueSwatch, {
+        ref: ref,
+        "data-slot": "color-picker-value-swatch",
+        className: cn('z-1 col-start-1 row-start-1 size-full rounded-[inherit] group-data-[fit-content]/trigger:col-auto group-data-[fit-content]/trigger:row-auto group-data-[fit-content]/trigger:size-4 group-data-[fit-content]/trigger:shrink-0', className),
+        ...props
+    });
+});
+const ColorPicker_ColorPickerValueText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.ValueText, {
+        ref: ref,
+        "data-slot": "color-picker-value-text",
+        className: cn('min-w-0 text-sm text-foreground', className),
+        ...props
+    });
+});
+const ColorPicker_ColorPickerView = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ColorPicker.View, {
+        ref: ref,
+        "data-slot": "color-picker-view",
+        className: cn('flex min-w-0 flex-col gap-2 [&[hidden]:not([hidden="until-found"])]:hidden', className),
+        ...props
+    });
+});
+const ColorPicker_ColorPicker = Object.assign(ColorPicker_ColorPickerRoot, {
+    Root: ColorPicker_ColorPickerRoot,
+    RootProvider: ColorPicker_ColorPickerRootProvider,
+    Context: ColorPicker.Context,
+    HiddenInput: ColorPicker.HiddenInput,
+    Label: ColorPicker_ColorPickerLabel,
+    Control: ColorPicker_ColorPickerControl,
+    Trigger: ColorPicker_ColorPickerTrigger,
+    Positioner: ColorPicker_ColorPickerPositioner,
+    Content: ColorPicker_ColorPickerContent,
+    Area: ColorPicker_ColorPickerArea,
+    AreaBackground: ColorPicker_ColorPickerAreaBackground,
+    AreaThumb: ColorPicker_ColorPickerAreaThumb,
+    ChannelSlider: ColorPicker_ColorPickerChannelSlider,
+    Sliders: ColorPicker_ColorPickerSliders,
+    ChannelSliderTrack: ColorPicker_ColorPickerChannelSliderTrack,
+    ChannelSliderThumb: ColorPicker_ColorPickerChannelSliderThumb,
+    ChannelSliderLabel: ColorPicker_ColorPickerChannelSliderLabel,
+    ChannelSliderValueText: ColorPicker_ColorPickerChannelSliderValueText,
+    ChannelInput: ColorPicker_ColorPickerChannelInput,
+    EyeDropperTrigger: ColorPicker_ColorPickerEyeDropperTrigger,
+    FormatSelect: ColorPicker_ColorPickerFormatSelect,
+    FormatTrigger: ColorPicker_ColorPickerFormatTrigger,
+    SwatchGroup: ColorPicker_ColorPickerSwatchGroup,
+    SwatchTrigger: ColorPicker_ColorPickerSwatchTrigger,
+    Swatch: ColorPicker_ColorPickerSwatch,
+    SwatchIndicator: ColorPicker_ColorPickerSwatchIndicator,
+    TransparencyGrid: ColorPicker_ColorPickerTransparencyGrid,
+    ValueSwatch: ColorPicker_ColorPickerValueSwatch,
+    ValueText: ColorPicker_ColorPickerValueText,
+    View: ColorPicker_ColorPickerView
+});
+export { ColorPicker_ColorPicker as ColorPicker, parseColor, useColorPicker, useColorPickerContext };

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

@@ -0,0 +1 @@
+export * from './ColorPicker.js';

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

@@ -0,0 +1 @@
+export * from "./ColorPicker.js";

package/dist/components/combobox/Combobox.d.ts

@@ -0,0 +1,30 @@
+import { Combobox as ComboboxPrimitive, type ComboboxRootComponent as ArkComboboxRootComponent, type ComboboxRootProviderComponent as ArkComboboxRootProviderComponent, useCombobox, useComboboxContext, useComboboxItemContext } from '@ark-ui/react/combobox';
+import type { ComponentProps, ReactNode } from 'react';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type ComboboxOptionProps = Omit<ComponentProps<typeof ComboboxPrimitive.Item>, 'asChild' | 'children'> & {
+    children: ReactNode;
+    indicator?: ReactNode | false;
+};
+declare const Combobox: ArkComboboxRootComponent<OverlayPortalProps> & {
+    Root: ArkComboboxRootComponent<OverlayPortalProps>;
+    RootProvider: ArkComboboxRootProviderComponent<OverlayPortalProps>;
+    Label: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    Control: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Input: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    ClearTrigger: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Empty: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.EmptyProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Status: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    List: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemGroup: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemGroupLabel: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ItemGroupLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemText: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ItemTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemIndicator: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Option: import("react").ForwardRefExoticComponent<Omit<ComboboxOptionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: <T extends unknown>(props: ComboboxPrimitive.ContextProps<T>) => ReactNode;
+    ItemContext: (props: ComboboxPrimitive.ItemContextProps) => ReactNode;
+};
+export { Combobox, useCombobox, useComboboxContext, useComboboxItemContext };