@moduix/solid 1.0.0

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

@@ -0,0 +1,277 @@
+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.jsx";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+import ColorPicker_module from "./ColorPicker.module.jsx";
+function ColorPickerRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <ColorPicker.Root asChild={local.asChild} data-slot="color-picker-root" class={clsx(ColorPicker_module.root, local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </ColorPicker.Root>
+    </OverlayPortalProvider>;
+}
+function ColorPickerRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <ColorPicker.RootProvider asChild={local.asChild} data-slot="color-picker-root-provider" class={clsx(ColorPicker_module.root, local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </ColorPicker.RootProvider>
+    </OverlayPortalProvider>;
+}
+function ColorPickerLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ColorPicker.Label data-slot="color-picker-label" class={clsx(ColorPicker_module.label, local.class)} {...others}/>;
+}
+function ColorPickerControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ColorPicker.Control data-slot="color-picker-control" class={clsx(ColorPicker_module.control, local.class)} {...others}/>;
+}
+function ColorPickerTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <ColorPicker.Trigger data-slot="color-picker-trigger" class={clsx(ColorPicker_module.trigger, local.class)} {...others}>
+      {resolvedChildren() ?? <>
+          <ColorPicker.TransparencyGrid data-slot="color-picker-transparency-grid" class={ColorPicker_module.transparencyGrid}/>
+          <ColorPicker.ValueSwatch data-slot="color-picker-value-swatch" class={ColorPicker_module.valueSwatch}/>
+        </>}
+    </ColorPicker.Trigger>;
+}
+function ColorPickerPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <ColorPicker.Positioner data-slot="color-picker-positioner" class={clsx(ColorPicker_module.positioner, local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function ColorPickerContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ColorPicker.Content data-slot="color-picker-content" class={clsx(ColorPicker_module.content, local.class)} {...others}/>;
+}
+function ColorPickerArea(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <ColorPicker.Area data-slot="color-picker-area" class={clsx(ColorPicker_module.area, local.class)} {...others}>
+      {resolvedChildren() ?? <>
+          <ColorPicker.AreaBackground data-slot="color-picker-area-background" class={ColorPicker_module.areaBackground}/>
+          <ColorPicker.AreaThumb data-slot="color-picker-area-thumb" class={ColorPicker_module.thumb}/>
+        </>}
+    </ColorPicker.Area>;
+}
+function ColorPickerAreaBackground(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ColorPicker.AreaBackground data-slot="color-picker-area-background" class={clsx(ColorPicker_module.areaBackground, local.class)} {...others}/>;
+}
+function ColorPickerAreaThumb(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ColorPicker.AreaThumb data-slot="color-picker-area-thumb" class={clsx(ColorPicker_module.thumb, local.class)} {...others}/>;
+}
+function ColorPickerChannelSlider(props) {
+    const [local, others] = splitProps(props, [
+        'channel',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <ColorPicker.ChannelSlider channel={local.channel} data-slot="color-picker-channel-slider" class={clsx(ColorPicker_module.channelSlider, local.class)} {...others}>
+      {resolvedChildren() ?? <>
+          {'alpha' === local.channel && <ColorPicker.TransparencyGrid data-slot="color-picker-transparency-grid" class={ColorPicker_module.transparencyGrid}/>}
+          <ColorPicker.ChannelSliderTrack data-slot="color-picker-channel-slider-track" class={ColorPicker_module.channelSliderTrack}/>
+          <ColorPicker.ChannelSliderThumb data-slot="color-picker-channel-slider-thumb" class={ColorPicker_module.thumb}/>
+        </>}
+    </ColorPicker.ChannelSlider>;
+}
+function ColorPickerSliders(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <div data-slot="color-picker-sliders" class={clsx(ColorPicker_module.sliders, local.class)} {...others}>
+      <ColorPickerChannelSlider channel="hue"/>
+      <ColorPickerChannelSlider channel="alpha"/>
+    </div>;
+}
+function ColorPickerChannelSliderTrack(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ColorPicker.ChannelSliderTrack data-slot="color-picker-channel-slider-track" class={clsx(ColorPicker_module.channelSliderTrack, local.class)} {...others}/>;
+}
+function ColorPickerChannelSliderThumb(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ColorPicker.ChannelSliderThumb data-slot="color-picker-channel-slider-thumb" class={clsx(ColorPicker_module.thumb, local.class)} {...others}/>;
+}
+function ColorPickerChannelSliderLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ColorPicker.ChannelSliderLabel data-slot="color-picker-channel-slider-label" class={clsx(ColorPicker_module.channelSliderLabel, local.class)} {...others}/>;
+}
+function ColorPickerChannelSliderValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ColorPicker.ChannelSliderValueText data-slot="color-picker-channel-slider-value-text" class={clsx(ColorPicker_module.channelSliderValueText, local.class)} {...others}/>;
+}
+function ColorPickerChannelInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ColorPicker.ChannelInput data-slot="color-picker-channel-input" class={clsx(ColorPicker_module.channelInput, local.class)} {...others}/>;
+}
+function ColorPickerEyeDropperTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <ColorPicker.EyeDropperTrigger data-slot="color-picker-eye-dropper-trigger" class={clsx(ColorPicker_module.eyeDropperTrigger, local.class)} {...others}>
+      {resolvedChildren() ?? <PipetteIcon/>}
+    </ColorPicker.EyeDropperTrigger>;
+}
+function ColorPickerFormatSelect(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <span class={ColorPicker_module.formatSelectControl}>
+      <ColorPicker.FormatSelect data-slot="color-picker-format-select" class={clsx(ColorPicker_module.formatSelect, local.class)} {...others}/>
+      <span aria-hidden="true" class={ColorPicker_module.formatSelectIndicator}>
+        <ChevronDownIcon/>
+      </span>
+    </span>;
+}
+function ColorPickerFormatTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ColorPicker.FormatTrigger data-slot="color-picker-format-trigger" class={clsx(ColorPicker_module.formatTrigger, local.class)} {...others}/>;
+}
+function ColorPickerSwatchGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ColorPicker.SwatchGroup data-slot="color-picker-swatch-group" class={clsx(ColorPicker_module.swatchGroup, local.class)} {...others}/>;
+}
+function ColorPickerSwatchTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'value'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <ColorPicker.SwatchTrigger data-slot="color-picker-swatch-trigger" class={clsx(ColorPicker_module.swatchTrigger, local.class)} value={local.value} {...others}>
+      {resolvedChildren() ?? <ColorPicker.Swatch data-slot="color-picker-swatch" class={ColorPicker_module.swatch} value={local.value}>
+          <ColorPicker.SwatchIndicator data-slot="color-picker-swatch-indicator" class={ColorPicker_module.swatchIndicator}>
+            <CheckIcon/>
+          </ColorPicker.SwatchIndicator>
+        </ColorPicker.Swatch>}
+    </ColorPicker.SwatchTrigger>;
+}
+function ColorPickerSwatch(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ColorPicker.Swatch data-slot="color-picker-swatch" class={clsx(ColorPicker_module.swatch, local.class)} {...others}/>;
+}
+function ColorPickerSwatchIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <ColorPicker.SwatchIndicator data-slot="color-picker-swatch-indicator" class={clsx(ColorPicker_module.swatchIndicator, local.class)} {...others}>
+      {resolvedChildren() ?? <CheckIcon/>}
+    </ColorPicker.SwatchIndicator>;
+}
+function ColorPickerTransparencyGrid(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ColorPicker.TransparencyGrid data-slot="color-picker-transparency-grid" class={clsx(ColorPicker_module.transparencyGrid, local.class)} {...others}/>;
+}
+function ColorPickerValueSwatch(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ColorPicker.ValueSwatch data-slot="color-picker-value-swatch" class={clsx(ColorPicker_module.valueSwatch, local.class)} {...others}/>;
+}
+function ColorPickerValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ColorPicker.ValueText data-slot="color-picker-value-text" class={clsx(ColorPicker_module.valueText, local.class)} {...others}/>;
+}
+function ColorPickerView(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ColorPicker.View data-slot="color-picker-view" class={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 };

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

@@ -0,0 +1,36 @@
+import "./ColorPicker_module.css";
+const ColorPicker_module = {
+    root: "root-TExENm",
+    label: "label-_ln_Tp",
+    control: "control-s8Gz_s",
+    trigger: "trigger-o5tyg7",
+    positioner: "positioner-XKLqp5",
+    content: "content-z7zabu",
+    "color-picker-content-open": "color-picker-content-open-q3_ID4",
+    colorPickerContentOpen: "color-picker-content-open-q3_ID4",
+    "color-picker-content-closed": "color-picker-content-closed-KFhLyd",
+    colorPickerContentClosed: "color-picker-content-closed-KFhLyd",
+    area: "area-t8_R52",
+    areaBackground: "areaBackground-PkoUAT",
+    thumb: "thumb-H6MPip",
+    channelSlider: "channelSlider-AurwFW",
+    sliders: "sliders-sPeKpK",
+    channelSliderTrack: "channelSliderTrack-hKvFlr",
+    channelSliderLabel: "channelSliderLabel-hwLzBw",
+    channelSliderValueText: "channelSliderValueText-ZFMCO7",
+    channelInput: "channelInput-KxngYC",
+    formatSelect: "formatSelect-jD2i0e",
+    formatSelectControl: "formatSelectControl-S40Hse",
+    formatSelectIndicator: "formatSelectIndicator-VJN6PV",
+    eyeDropperTrigger: "eyeDropperTrigger-jF9YiQ",
+    formatTrigger: "formatTrigger-pUu2zb",
+    swatchGroup: "swatchGroup-c99XUr",
+    swatchTrigger: "swatchTrigger-evVzC6",
+    swatch: "swatch-Wk05He",
+    swatchIndicator: "swatchIndicator-OSvsx1",
+    transparencyGrid: "transparencyGrid-kXaWYM",
+    valueSwatch: "valueSwatch-voiJSA",
+    valueText: "valueText-DP0Ni5",
+    view: "view-l5Ln0d"
+};
+export default ColorPicker_module;

package/dist/components/color-picker/ColorPicker.module.jsx

@@ -0,0 +1,36 @@
+import "./ColorPicker_module.css";
+const ColorPicker_module = {
+    root: "root-TExENm",
+    label: "label-_ln_Tp",
+    control: "control-s8Gz_s",
+    trigger: "trigger-o5tyg7",
+    positioner: "positioner-XKLqp5",
+    content: "content-z7zabu",
+    "color-picker-content-open": "color-picker-content-open-q3_ID4",
+    colorPickerContentOpen: "color-picker-content-open-q3_ID4",
+    "color-picker-content-closed": "color-picker-content-closed-KFhLyd",
+    colorPickerContentClosed: "color-picker-content-closed-KFhLyd",
+    area: "area-t8_R52",
+    areaBackground: "areaBackground-PkoUAT",
+    thumb: "thumb-H6MPip",
+    channelSlider: "channelSlider-AurwFW",
+    sliders: "sliders-sPeKpK",
+    channelSliderTrack: "channelSliderTrack-hKvFlr",
+    channelSliderLabel: "channelSliderLabel-hwLzBw",
+    channelSliderValueText: "channelSliderValueText-ZFMCO7",
+    channelInput: "channelInput-KxngYC",
+    formatSelect: "formatSelect-jD2i0e",
+    formatSelectControl: "formatSelectControl-S40Hse",
+    formatSelectIndicator: "formatSelectIndicator-VJN6PV",
+    eyeDropperTrigger: "eyeDropperTrigger-jF9YiQ",
+    formatTrigger: "formatTrigger-pUu2zb",
+    swatchGroup: "swatchGroup-c99XUr",
+    swatchTrigger: "swatchTrigger-evVzC6",
+    swatch: "swatch-Wk05He",
+    swatchIndicator: "swatchIndicator-OSvsx1",
+    transparencyGrid: "transparencyGrid-kXaWYM",
+    valueSwatch: "valueSwatch-voiJSA",
+    valueText: "valueText-DP0Ni5",
+    view: "view-l5Ln0d"
+};
+export default ColorPicker_module;