@moduix/solid 1.0.0

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

@@ -0,0 +1,542 @@
+import { className, createComponent, effect, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { ColorPicker, parseColor, useColorPicker, useColorPickerContext } from "@ark-ui/solid/color-picker";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { CheckIcon, ChevronDownIcon, PipetteIcon } from "../../internal/icons/ui/Icons.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import ColorPicker_module from "./ColorPicker.module.js";
+var _tmpl$ = /*#__PURE__*/ template("<div data-slot=color-picker-sliders>"), _tmpl$2 = /*#__PURE__*/ template("<span><span aria-hidden=true>");
+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 clsx(ColorPicker_module.root, 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 clsx(ColorPicker_module.root, 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 clsx(ColorPicker_module.label, 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 clsx(ColorPicker_module.control, 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 clsx(ColorPicker_module.trigger, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? [
+                createComponent(ColorPicker.TransparencyGrid, {
+                    "data-slot": "color-picker-transparency-grid",
+                    get ["class"] () {
+                        return ColorPicker_module.transparencyGrid;
+                    }
+                }),
+                createComponent(ColorPicker.ValueSwatch, {
+                    "data-slot": "color-picker-value-swatch",
+                    get ["class"] () {
+                        return ColorPicker_module.valueSwatch;
+                    }
+                })
+            ];
+        }
+    }));
+}
+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 clsx(ColorPicker_module.positioner, 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 clsx(ColorPicker_module.content, 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 clsx(ColorPicker_module.area, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? [
+                createComponent(ColorPicker.AreaBackground, {
+                    "data-slot": "color-picker-area-background",
+                    get ["class"] () {
+                        return ColorPicker_module.areaBackground;
+                    }
+                }),
+                createComponent(ColorPicker.AreaThumb, {
+                    "data-slot": "color-picker-area-thumb",
+                    get ["class"] () {
+                        return ColorPicker_module.thumb;
+                    }
+                })
+            ];
+        }
+    }));
+}
+function ColorPickerAreaBackground(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ColorPicker.AreaBackground, mergeProps({
+        "data-slot": "color-picker-area-background",
+        get ["class"] () {
+            return clsx(ColorPicker_module.areaBackground, 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 clsx(ColorPicker_module.thumb, 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 clsx(ColorPicker_module.channelSlider, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? [
+                memo(()=>memo(()=>'alpha' === local.channel)() && createComponent(ColorPicker.TransparencyGrid, {
+                        "data-slot": "color-picker-transparency-grid",
+                        get ["class"] () {
+                            return ColorPicker_module.transparencyGrid;
+                        }
+                    })),
+                createComponent(ColorPicker.ChannelSliderTrack, {
+                    "data-slot": "color-picker-channel-slider-track",
+                    get ["class"] () {
+                        return ColorPicker_module.channelSliderTrack;
+                    }
+                }),
+                createComponent(ColorPicker.ChannelSliderThumb, {
+                    "data-slot": "color-picker-channel-slider-thumb",
+                    get ["class"] () {
+                        return ColorPicker_module.thumb;
+                    }
+                })
+            ];
+        }
+    }));
+}
+function ColorPickerSliders(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps({
+            get ["class"] () {
+                return clsx(ColorPicker_module.sliders, 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 clsx(ColorPicker_module.channelSliderTrack, 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 clsx(ColorPicker_module.thumb, 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 clsx(ColorPicker_module.channelSliderLabel, 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 clsx(ColorPicker_module.channelSliderValueText, 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 clsx(ColorPicker_module.channelInput, 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 clsx(ColorPicker_module.eyeDropperTrigger, 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 clsx(ColorPicker_module.formatSelect, local.class);
+            }
+        }, others)), _el$3);
+        insert(_el$3, createComponent(ChevronDownIcon, {}));
+        effect((_p$)=>{
+            var _v$ = ColorPicker_module.formatSelectControl, _v$2 = ColorPicker_module.formatSelectIndicator;
+            _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+            _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0
+        });
+        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 clsx(ColorPicker_module.formatTrigger, 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 clsx(ColorPicker_module.swatchGroup, 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 clsx(ColorPicker_module.swatchTrigger, local.class);
+        },
+        get value () {
+            return local.value;
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(ColorPicker.Swatch, {
+                "data-slot": "color-picker-swatch",
+                get ["class"] () {
+                    return ColorPicker_module.swatch;
+                },
+                get value () {
+                    return local.value;
+                },
+                get children () {
+                    return createComponent(ColorPicker.SwatchIndicator, {
+                        "data-slot": "color-picker-swatch-indicator",
+                        get ["class"] () {
+                            return ColorPicker_module.swatchIndicator;
+                        },
+                        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 clsx(ColorPicker_module.swatch, 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 clsx(ColorPicker_module.swatchIndicator, 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 clsx(ColorPicker_module.transparencyGrid, 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 clsx(ColorPicker_module.valueSwatch, 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 clsx(ColorPicker_module.valueText, 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 clsx(ColorPicker_module.view, 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 };