@moduix/solid-tailwind 1.0.0

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

@@ -0,0 +1,514 @@
+import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { ColorPicker, parseColor, useColorPicker, useColorPickerContext } from "@ark-ui/solid/color-picker";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { CheckIcon, ChevronDownIcon, PipetteIcon } from "../../internal/icons/ui/Icons.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+var _tmpl$ = /*#__PURE__*/ template("<div data-slot=color-picker-sliders>"), _tmpl$2 = /*#__PURE__*/ template('<span class="group/format-select relative inline-grid w-fit max-w-full min-w-0 shrink-0"><span aria-hidden=true class="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 [&amp;>svg]:block [&amp;>svg]:size-full">');
+function ColorPickerRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(ColorPicker.Root, mergeProps({
+                get asChild () {
+                    return local.asChild;
+                },
+                "data-slot": "color-picker-root",
+                get ["class"] () {
+                    return cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', local.class);
+                },
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function ColorPickerRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(ColorPicker.RootProvider, mergeProps({
+                get asChild () {
+                    return local.asChild;
+                },
+                "data-slot": "color-picker-root-provider",
+                get ["class"] () {
+                    return cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', local.class);
+                },
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function ColorPickerLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ColorPicker.Label, mergeProps({
+        "data-slot": "color-picker-label",
+        get ["class"] () {
+            return cn('inline-flex items-center text-sm font-medium text-foreground select-none', local.class);
+        }
+    }, others));
+}
+function ColorPickerControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ColorPicker.Control, mergeProps({
+        "data-slot": "color-picker-control",
+        get ["class"] () {
+            return cn('flex min-w-0 items-center gap-2 data-disabled:opacity-50', local.class);
+        }
+    }, others));
+}
+function ColorPickerTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(ColorPicker.Trigger, mergeProps({
+        "data-slot": "color-picker-trigger",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? [
+                createComponent(ColorPicker.TransparencyGrid, {
+                    "data-slot": "color-picker-transparency-grid",
+                    class: "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"
+                }),
+                createComponent(ColorPicker.ValueSwatch, {
+                    "data-slot": "color-picker-value-swatch",
+                    class: "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"
+                })
+            ];
+        }
+    }));
+}
+function ColorPickerPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(ColorPicker.Positioner, mergeProps({
+                "data-slot": "color-picker-positioner",
+                get ["class"] () {
+                    return cn('z-[var(--z-index)] outline-0', local.class);
+                }
+            }, others));
+        }
+    });
+}
+function ColorPickerContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ColorPicker.Content, mergeProps({
+        "data-slot": "color-picker-content",
+        get ["class"] () {
+            return 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]', local.class);
+        }
+    }, others));
+}
+function ColorPickerArea(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(ColorPicker.Area, mergeProps({
+        "data-slot": "color-picker-area",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? [
+                createComponent(ColorPicker.AreaBackground, {
+                    "data-slot": "color-picker-area-background",
+                    class: "size-full rounded-[inherit]"
+                }),
+                createComponent(ColorPicker.AreaThumb, {
+                    "data-slot": "color-picker-area-thumb",
+                    class: "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"
+                })
+            ];
+        }
+    }));
+}
+function ColorPickerAreaBackground(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ColorPicker.AreaBackground, mergeProps({
+        "data-slot": "color-picker-area-background",
+        get ["class"] () {
+            return cn('size-full rounded-[inherit]', local.class);
+        }
+    }, others));
+}
+function ColorPickerAreaThumb(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ColorPicker.AreaThumb, mergeProps({
+        "data-slot": "color-picker-area-thumb",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }, others));
+}
+function ColorPickerChannelSlider(props) {
+    const [local, others] = splitProps(props, [
+        'channel',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(ColorPicker.ChannelSlider, mergeProps({
+        get channel () {
+            return local.channel;
+        },
+        "data-slot": "color-picker-channel-slider",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? [
+                memo(()=>memo(()=>'alpha' === local.channel)() && createComponent(ColorPicker.TransparencyGrid, {
+                        "data-slot": "color-picker-transparency-grid",
+                        class: "size-full rounded-[inherit]"
+                    })),
+                createComponent(ColorPicker.ChannelSliderTrack, {
+                    "data-slot": "color-picker-channel-slider-track",
+                    class: "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"
+                }),
+                createComponent(ColorPicker.ChannelSliderThumb, {
+                    "data-slot": "color-picker-channel-slider-thumb",
+                    class: "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"
+                })
+            ];
+        }
+    }));
+}
+function ColorPickerSliders(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps({
+            get ["class"] () {
+                return cn('flex min-w-0 flex-1 flex-col gap-2', local.class);
+            }
+        }, others), false, true);
+        insert(_el$, createComponent(ColorPickerChannelSlider, {
+            channel: "hue"
+        }), null);
+        insert(_el$, createComponent(ColorPickerChannelSlider, {
+            channel: "alpha"
+        }), null);
+        return _el$;
+    })();
+}
+function ColorPickerChannelSliderTrack(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ColorPicker.ChannelSliderTrack, mergeProps({
+        "data-slot": "color-picker-channel-slider-track",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }, others));
+}
+function ColorPickerChannelSliderThumb(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ColorPicker.ChannelSliderThumb, mergeProps({
+        "data-slot": "color-picker-channel-slider-thumb",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }, others));
+}
+function ColorPickerChannelSliderLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ColorPicker.ChannelSliderLabel, mergeProps({
+        "data-slot": "color-picker-channel-slider-label",
+        get ["class"] () {
+            return cn('text-sm font-medium text-foreground', local.class);
+        }
+    }, others));
+}
+function ColorPickerChannelSliderValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ColorPicker.ChannelSliderValueText, mergeProps({
+        "data-slot": "color-picker-channel-slider-value-text",
+        get ["class"] () {
+            return cn('text-sm text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function ColorPickerChannelInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ColorPicker.ChannelInput, mergeProps({
+        "data-slot": "color-picker-channel-input",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }, others));
+}
+function ColorPickerEyeDropperTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(ColorPicker.EyeDropperTrigger, mergeProps({
+        "data-slot": "color-picker-eye-dropper-trigger",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(PipetteIcon, {});
+        }
+    }));
+}
+function ColorPickerFormatSelect(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return (()=>{
+        var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild;
+        insert(_el$2, createComponent(ColorPicker.FormatSelect, mergeProps({
+            "data-slot": "color-picker-format-select",
+            get ["class"] () {
+                return 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', local.class);
+            }
+        }, others)), _el$3);
+        insert(_el$3, createComponent(ChevronDownIcon, {}));
+        return _el$2;
+    })();
+}
+function ColorPickerFormatTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ColorPicker.FormatTrigger, mergeProps({
+        "data-slot": "color-picker-format-trigger",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }, others));
+}
+function ColorPickerSwatchGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ColorPicker.SwatchGroup, mergeProps({
+        "data-slot": "color-picker-swatch-group",
+        get ["class"] () {
+            return cn('flex flex-wrap gap-2', local.class);
+        }
+    }, others));
+}
+function ColorPickerSwatchTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'value'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(ColorPicker.SwatchTrigger, mergeProps({
+        "data-slot": "color-picker-swatch-trigger",
+        get ["class"] () {
+            return 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', local.class);
+        },
+        get value () {
+            return local.value;
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(ColorPicker.Swatch, {
+                "data-slot": "color-picker-swatch",
+                class: "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)]",
+                get value () {
+                    return local.value;
+                },
+                get children () {
+                    return createComponent(ColorPicker.SwatchIndicator, {
+                        "data-slot": "color-picker-swatch-indicator",
+                        class: "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",
+                        get children () {
+                            return createComponent(CheckIcon, {});
+                        }
+                    });
+                }
+            });
+        }
+    }));
+}
+function ColorPickerSwatch(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ColorPicker.Swatch, mergeProps({
+        "data-slot": "color-picker-swatch",
+        get ["class"] () {
+            return 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)]', local.class);
+        }
+    }, others));
+}
+function ColorPickerSwatchIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(ColorPicker.SwatchIndicator, mergeProps({
+        "data-slot": "color-picker-swatch-indicator",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(CheckIcon, {});
+        }
+    }));
+}
+function ColorPickerTransparencyGrid(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ColorPicker.TransparencyGrid, mergeProps({
+        "data-slot": "color-picker-transparency-grid",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }, others));
+}
+function ColorPickerValueSwatch(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ColorPicker.ValueSwatch, mergeProps({
+        "data-slot": "color-picker-value-swatch",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }, others));
+}
+function ColorPickerValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ColorPicker.ValueText, mergeProps({
+        "data-slot": "color-picker-value-text",
+        get ["class"] () {
+            return cn('min-w-0 text-sm text-foreground', local.class);
+        }
+    }, others));
+}
+function ColorPickerView(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ColorPicker.View, mergeProps({
+        "data-slot": "color-picker-view",
+        get ["class"] () {
+            return cn('flex min-w-0 flex-col gap-2 [&[hidden]:not([hidden="until-found"])]:hidden', local.class);
+        }
+    }, others));
+}
+const ColorPicker_ColorPicker = Object.assign(ColorPickerRoot, {
+    Root: ColorPickerRoot,
+    RootProvider: ColorPickerRootProvider,
+    Context: ColorPicker.Context,
+    HiddenInput: ColorPicker.HiddenInput,
+    Label: ColorPickerLabel,
+    Control: ColorPickerControl,
+    Trigger: ColorPickerTrigger,
+    Positioner: ColorPickerPositioner,
+    Content: ColorPickerContent,
+    Area: ColorPickerArea,
+    AreaBackground: ColorPickerAreaBackground,
+    AreaThumb: ColorPickerAreaThumb,
+    ChannelSlider: ColorPickerChannelSlider,
+    Sliders: ColorPickerSliders,
+    ChannelSliderTrack: ColorPickerChannelSliderTrack,
+    ChannelSliderThumb: ColorPickerChannelSliderThumb,
+    ChannelSliderLabel: ColorPickerChannelSliderLabel,
+    ChannelSliderValueText: ColorPickerChannelSliderValueText,
+    ChannelInput: ColorPickerChannelInput,
+    EyeDropperTrigger: ColorPickerEyeDropperTrigger,
+    FormatSelect: ColorPickerFormatSelect,
+    FormatTrigger: ColorPickerFormatTrigger,
+    SwatchGroup: ColorPickerSwatchGroup,
+    SwatchTrigger: ColorPickerSwatchTrigger,
+    Swatch: ColorPickerSwatch,
+    SwatchIndicator: ColorPickerSwatchIndicator,
+    TransparencyGrid: ColorPickerTransparencyGrid,
+    ValueSwatch: ColorPickerValueSwatch,
+    ValueText: ColorPickerValueText,
+    View: ColorPickerView
+});
+export { ColorPicker_ColorPicker as ColorPicker, parseColor, useColorPicker, useColorPickerContext };