@moduix/solid 1.0.0

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

@@ -0,0 +1,19 @@
+import { Collapsible as CollapsiblePrimitive, useCollapsible, useCollapsibleContext } from '@ark-ui/solid/collapsible';
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import type { ComponentProps } from 'solid-js';
+declare function CollapsibleRoot(props: ComponentProps<typeof CollapsiblePrimitive.Root>): import("solid-js").JSX.Element;
+declare function CollapsibleRootProvider(props: ComponentProps<typeof CollapsiblePrimitive.RootProvider>): import("solid-js").JSX.Element;
+declare function CollapsibleTrigger(props: ComponentProps<typeof CollapsiblePrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function CollapsibleIndicator(props: ComponentProps<typeof CollapsiblePrimitive.Indicator>): import("solid-js").JSX.Element;
+declare function CollapsibleContent(props: ComponentProps<typeof CollapsiblePrimitive.Content>): import("solid-js").JSX.Element;
+declare function CollapsibleBody(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare const Collapsible: typeof CollapsibleRoot & {
+    Root: typeof CollapsibleRoot;
+    RootProvider: typeof CollapsibleRootProvider;
+    Context: (props: CollapsiblePrimitive.ContextProps) => import("solid-js").JSX.Element;
+    Trigger: typeof CollapsibleTrigger;
+    Indicator: typeof CollapsibleIndicator;
+    Content: typeof CollapsibleContent;
+    Body: typeof CollapsibleBody;
+};
+export { Collapsible, useCollapsible, useCollapsibleContext };

package/dist/components/collapsible/Collapsible.js

@@ -0,0 +1,93 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Collapsible, useCollapsible, useCollapsibleContext } from "@ark-ui/solid/collapsible";
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { ChevronDownIcon } from "../../internal/icons/ui/Icons.js";
+import Collapsible_module from "./Collapsible.module.js";
+function CollapsibleRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Collapsible.Root, mergeProps({
+        "data-slot": "collapsible-root",
+        get ["class"] () {
+            return clsx(Collapsible_module.root, local.class);
+        }
+    }, others));
+}
+function CollapsibleRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Collapsible.RootProvider, mergeProps({
+        "data-slot": "collapsible-root-provider",
+        get ["class"] () {
+            return clsx(Collapsible_module.root, local.class);
+        }
+    }, others));
+}
+function CollapsibleTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Collapsible.Trigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "collapsible-trigger",
+        get ["class"] () {
+            return clsx(!local.asChild && Collapsible_module.trigger, local.class);
+        }
+    }, others));
+}
+function CollapsibleIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Collapsible.Indicator, mergeProps({
+        "data-slot": "collapsible-indicator",
+        get ["class"] () {
+            return clsx(Collapsible_module.indicator, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(ChevronDownIcon, {});
+        }
+    }));
+}
+function CollapsibleContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Collapsible.Content, mergeProps({
+        "data-slot": "collapsible-content",
+        get ["class"] () {
+            return clsx(Collapsible_module.content, local.class);
+        }
+    }, others));
+}
+function CollapsibleBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "collapsible-body",
+        get ["class"] () {
+            return clsx(Collapsible_module.body, local.class);
+        }
+    }, others));
+}
+const Collapsible_Collapsible = Object.assign(CollapsibleRoot, {
+    Root: CollapsibleRoot,
+    RootProvider: CollapsibleRootProvider,
+    Context: Collapsible.Context,
+    Trigger: CollapsibleTrigger,
+    Indicator: CollapsibleIndicator,
+    Content: CollapsibleContent,
+    Body: CollapsibleBody
+});
+export { Collapsible_Collapsible as Collapsible, useCollapsible, useCollapsibleContext };

package/dist/components/collapsible/Collapsible.jsx

@@ -0,0 +1,57 @@
+import { Collapsible, useCollapsible, useCollapsibleContext } from "@ark-ui/solid/collapsible";
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { ChevronDownIcon } from "../../internal/icons/ui/Icons.jsx";
+import Collapsible_module from "./Collapsible.module.jsx";
+function CollapsibleRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Collapsible.Root data-slot="collapsible-root" class={clsx(Collapsible_module.root, local.class)} {...others}/>;
+}
+function CollapsibleRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Collapsible.RootProvider data-slot="collapsible-root-provider" class={clsx(Collapsible_module.root, local.class)} {...others}/>;
+}
+function CollapsibleTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Collapsible.Trigger asChild={local.asChild} data-slot="collapsible-trigger" class={clsx(!local.asChild && Collapsible_module.trigger, local.class)} {...others}/>;
+}
+function CollapsibleIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Collapsible.Indicator data-slot="collapsible-indicator" class={clsx(Collapsible_module.indicator, local.class)} {...others}>
+      {resolvedChildren() ?? <ChevronDownIcon/>}
+    </Collapsible.Indicator>;
+}
+function CollapsibleContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Collapsible.Content data-slot="collapsible-content" class={clsx(Collapsible_module.content, local.class)} {...others}/>;
+}
+function CollapsibleBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="collapsible-body" class={clsx(Collapsible_module.body, local.class)} {...others}/>;
+}
+const Collapsible_Collapsible = Object.assign(CollapsibleRoot, {
+    Root: CollapsibleRoot,
+    RootProvider: CollapsibleRootProvider,
+    Context: Collapsible.Context,
+    Trigger: CollapsibleTrigger,
+    Indicator: CollapsibleIndicator,
+    Content: CollapsibleContent,
+    Body: CollapsibleBody
+});
+export { Collapsible_Collapsible as Collapsible, useCollapsible, useCollapsibleContext };

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

@@ -0,0 +1,13 @@
+import "./Collapsible_module.css";
+const Collapsible_module = {
+    root: "root-Z4Oayn",
+    trigger: "trigger-o93fRO",
+    indicator: "indicator-ll1vd8",
+    content: "content-dHAw0w",
+    "collapsible-content-open": "collapsible-content-open-Su6gb3",
+    collapsibleContentOpen: "collapsible-content-open-Su6gb3",
+    "collapsible-content-closed": "collapsible-content-closed-EkdIr9",
+    collapsibleContentClosed: "collapsible-content-closed-EkdIr9",
+    body: "body-TpC0eh"
+};
+export default Collapsible_module;

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

@@ -0,0 +1,13 @@
+import "./Collapsible_module.css";
+const Collapsible_module = {
+    root: "root-Z4Oayn",
+    trigger: "trigger-o93fRO",
+    indicator: "indicator-ll1vd8",
+    content: "content-dHAw0w",
+    "collapsible-content-open": "collapsible-content-open-Su6gb3",
+    collapsibleContentOpen: "collapsible-content-open-Su6gb3",
+    "collapsible-content-closed": "collapsible-content-closed-EkdIr9",
+    collapsibleContentClosed: "collapsible-content-closed-EkdIr9",
+    body: "body-TpC0eh"
+};
+export default Collapsible_module;

package/dist/components/collapsible/Collapsible_module.css

@@ -0,0 +1,158 @@
+@layer moduix.components {
+  @keyframes collapsible-content-open-Su6gb3 {
+    from {
+      height: var(--collapsed-height, 0);
+      width: var(--collapsed-width, var(--width));
+      opacity: var(--moduix-collapsible-content-closed-opacity, .01);
+    }
+
+    to {
+      height: var(--height);
+      width: var(--width);
+      opacity: var(--moduix-collapsible-content-open-opacity, 1);
+    }
+  }
+
+  @keyframes collapsible-content-closed-EkdIr9 {
+    from {
+      height: var(--height);
+      width: var(--width);
+      opacity: var(--moduix-collapsible-content-open-opacity, 1);
+    }
+
+    to {
+      height: var(--collapsed-height, 0);
+      width: var(--collapsed-width, var(--width));
+      opacity: var(--moduix-collapsible-content-closed-opacity, .01);
+    }
+  }
+
+  .root-Z4Oayn {
+    box-sizing: border-box;
+    width: var(--moduix-collapsible-width, 100%);
+    max-width: var(--moduix-collapsible-max-width, 100%);
+    min-width: 0;
+    color: var(--moduix-collapsible-color, var(--moduix-color-foreground));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .trigger-o93fRO {
+    box-sizing: border-box;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--moduix-collapsible-trigger-gap, var(--moduix-spacing-2));
+    border-radius: var(--moduix-collapsible-trigger-radius, 0);
+    width: 100%;
+    padding-block: var(--moduix-collapsible-trigger-padding-y, var(--moduix-spacing-1));
+    padding-inline: var(--moduix-collapsible-trigger-padding-x, 0);
+    background-color: var(--moduix-collapsible-trigger-bg, transparent);
+    color: var(--moduix-collapsible-trigger-color, var(--moduix-collapsible-color, var(--moduix-color-foreground)));
+    font: inherit;
+    font-size: var(--moduix-collapsible-trigger-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-collapsible-trigger-line-height, var(--moduix-line-height-text-sm));
+    text-align: start;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    transition: background-color
+        var(--moduix-collapsible-trigger-transition, var(--moduix-transition-default)),
+      color var(--moduix-collapsible-trigger-transition, var(--moduix-transition-default));
+    border: 0;
+    outline: 0;
+    margin: 0;
+    display: flex;
+  }
+
+  .trigger-o93fRO:focus-visible {
+    z-index: 1;
+    outline: var(--moduix-collapsible-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-collapsible-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: calc(var(--moduix-collapsible-focus-ring-offset, var(--moduix-border-width-sm)) * -1);
+    position: relative;
+  }
+
+  @media (hover: hover) {
+    .trigger-o93fRO:not(:is([disabled], [data-disabled])):hover {
+      background-color: var(--moduix-collapsible-trigger-bg-hover, var(--moduix-collapsible-trigger-bg, transparent));
+    }
+  }
+
+  .trigger-o93fRO:not(:is([disabled], [data-disabled])):active {
+    background-color: var(--moduix-collapsible-trigger-bg-active, var(--moduix-collapsible-trigger-bg-hover, var(--moduix-collapsible-trigger-bg, transparent)));
+  }
+
+  .trigger-o93fRO:is([disabled], [data-disabled]) {
+    opacity: var(--moduix-collapsible-disabled-opacity, var(--moduix-opacity-disabled));
+    cursor: default;
+  }
+
+  .indicator-ll1vd8 {
+    box-sizing: border-box;
+    width: var(--moduix-collapsible-indicator-size, var(--moduix-spacing-3));
+    height: var(--moduix-collapsible-indicator-size, var(--moduix-spacing-3));
+    transition: transform
+      var(--moduix-collapsible-indicator-transition, var(--moduix-transition-default));
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .indicator-ll1vd8 > svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .indicator-ll1vd8[data-state="open"] {
+    transform: var(--moduix-collapsible-indicator-open-transform, rotate(180deg));
+  }
+
+  .indicator-ll1vd8[data-disabled] {
+    opacity: var(--moduix-collapsible-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .content-dHAw0w {
+    box-sizing: border-box;
+    color: var(--moduix-collapsible-content-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-collapsible-content-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-collapsible-content-line-height, var(--moduix-line-height-text-sm));
+    overflow: hidden;
+  }
+
+  .content-dHAw0w[data-state="open"] {
+    animation: collapsible-content-open-Su6gb3
+        var(--moduix-collapsible-content-transition, var(--moduix-transition-default));
+  }
+
+  .content-dHAw0w[data-state="open"][data-has-collapsed-size] {
+    --moduix-collapsible-content-closed-opacity: var(--moduix-collapsible-content-open-opacity, 1);
+  }
+
+  .content-dHAw0w[data-state="closed"] {
+    animation: collapsible-content-closed-EkdIr9
+        var(--moduix-collapsible-content-transition, var(--moduix-transition-default));
+  }
+
+  .content-dHAw0w[data-state="closed"][data-has-collapsed-size] {
+    --moduix-collapsible-content-closed-opacity: var(--moduix-collapsible-content-open-opacity, 1);
+  }
+
+  .body-TpC0eh {
+    gap: var(--moduix-collapsible-body-gap, var(--moduix-spacing-2));
+    min-width: 0;
+    padding: var(--moduix-collapsible-body-padding, 0);
+    display: grid;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .trigger-o93fRO, .indicator-ll1vd8 {
+      transition: none;
+    }
+
+    .content-dHAw0w[data-state] {
+      animation-duration: 1ms;
+    }
+  }
+}
+

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/collapsible/index.jsx

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

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

@@ -0,0 +1,66 @@
+import { ColorPicker as ColorPickerPrimitive, parseColor, useColorPicker, useColorPickerContext } from '@ark-ui/solid/color-picker';
+import { type ComponentProps } from 'solid-js';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type ColorPickerRootProps = ComponentProps<typeof ColorPickerPrimitive.Root> & OverlayPortalProps;
+type ColorPickerRootProviderProps = ComponentProps<typeof ColorPickerPrimitive.RootProvider> & OverlayPortalProps;
+declare function ColorPickerRoot(props: ColorPickerRootProps): import("solid-js").JSX.Element;
+declare function ColorPickerRootProvider(props: ColorPickerRootProviderProps): import("solid-js").JSX.Element;
+declare function ColorPickerLabel(props: ComponentProps<typeof ColorPickerPrimitive.Label>): import("solid-js").JSX.Element;
+declare function ColorPickerControl(props: ComponentProps<typeof ColorPickerPrimitive.Control>): import("solid-js").JSX.Element;
+declare function ColorPickerTrigger(props: ComponentProps<typeof ColorPickerPrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function ColorPickerPositioner(props: ComponentProps<typeof ColorPickerPrimitive.Positioner>): import("solid-js").JSX.Element;
+declare function ColorPickerContent(props: ComponentProps<typeof ColorPickerPrimitive.Content>): import("solid-js").JSX.Element;
+declare function ColorPickerArea(props: ComponentProps<typeof ColorPickerPrimitive.Area>): import("solid-js").JSX.Element;
+declare function ColorPickerAreaBackground(props: ComponentProps<typeof ColorPickerPrimitive.AreaBackground>): import("solid-js").JSX.Element;
+declare function ColorPickerAreaThumb(props: ComponentProps<typeof ColorPickerPrimitive.AreaThumb>): import("solid-js").JSX.Element;
+declare function ColorPickerChannelSlider(props: ComponentProps<typeof ColorPickerPrimitive.ChannelSlider>): import("solid-js").JSX.Element;
+declare function ColorPickerSliders(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
+declare function ColorPickerChannelSliderTrack(props: ComponentProps<typeof ColorPickerPrimitive.ChannelSliderTrack>): import("solid-js").JSX.Element;
+declare function ColorPickerChannelSliderThumb(props: ComponentProps<typeof ColorPickerPrimitive.ChannelSliderThumb>): import("solid-js").JSX.Element;
+declare function ColorPickerChannelSliderLabel(props: ComponentProps<typeof ColorPickerPrimitive.ChannelSliderLabel>): import("solid-js").JSX.Element;
+declare function ColorPickerChannelSliderValueText(props: ComponentProps<typeof ColorPickerPrimitive.ChannelSliderValueText>): import("solid-js").JSX.Element;
+declare function ColorPickerChannelInput(props: ComponentProps<typeof ColorPickerPrimitive.ChannelInput>): import("solid-js").JSX.Element;
+declare function ColorPickerEyeDropperTrigger(props: ComponentProps<typeof ColorPickerPrimitive.EyeDropperTrigger>): import("solid-js").JSX.Element;
+declare function ColorPickerFormatSelect(props: ComponentProps<typeof ColorPickerPrimitive.FormatSelect>): import("solid-js").JSX.Element;
+declare function ColorPickerFormatTrigger(props: ComponentProps<typeof ColorPickerPrimitive.FormatTrigger>): import("solid-js").JSX.Element;
+declare function ColorPickerSwatchGroup(props: ComponentProps<typeof ColorPickerPrimitive.SwatchGroup>): import("solid-js").JSX.Element;
+declare function ColorPickerSwatchTrigger(props: ComponentProps<typeof ColorPickerPrimitive.SwatchTrigger>): import("solid-js").JSX.Element;
+declare function ColorPickerSwatch(props: ComponentProps<typeof ColorPickerPrimitive.Swatch>): import("solid-js").JSX.Element;
+declare function ColorPickerSwatchIndicator(props: ComponentProps<typeof ColorPickerPrimitive.SwatchIndicator>): import("solid-js").JSX.Element;
+declare function ColorPickerTransparencyGrid(props: ComponentProps<typeof ColorPickerPrimitive.TransparencyGrid>): import("solid-js").JSX.Element;
+declare function ColorPickerValueSwatch(props: ComponentProps<typeof ColorPickerPrimitive.ValueSwatch>): import("solid-js").JSX.Element;
+declare function ColorPickerValueText(props: ComponentProps<typeof ColorPickerPrimitive.ValueText>): import("solid-js").JSX.Element;
+declare function ColorPickerView(props: ComponentProps<typeof ColorPickerPrimitive.View>): import("solid-js").JSX.Element;
+declare const ColorPicker: typeof ColorPickerRoot & {
+    Root: typeof ColorPickerRoot;
+    RootProvider: typeof ColorPickerRootProvider;
+    Context: (props: ColorPickerPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    HiddenInput: (props: ColorPickerPrimitive.HiddenInputProps) => import("solid-js").JSX.Element;
+    Label: typeof ColorPickerLabel;
+    Control: typeof ColorPickerControl;
+    Trigger: typeof ColorPickerTrigger;
+    Positioner: typeof ColorPickerPositioner;
+    Content: typeof ColorPickerContent;
+    Area: typeof ColorPickerArea;
+    AreaBackground: typeof ColorPickerAreaBackground;
+    AreaThumb: typeof ColorPickerAreaThumb;
+    ChannelSlider: typeof ColorPickerChannelSlider;
+    Sliders: typeof ColorPickerSliders;
+    ChannelSliderTrack: typeof ColorPickerChannelSliderTrack;
+    ChannelSliderThumb: typeof ColorPickerChannelSliderThumb;
+    ChannelSliderLabel: typeof ColorPickerChannelSliderLabel;
+    ChannelSliderValueText: typeof ColorPickerChannelSliderValueText;
+    ChannelInput: typeof ColorPickerChannelInput;
+    EyeDropperTrigger: typeof ColorPickerEyeDropperTrigger;
+    FormatSelect: typeof ColorPickerFormatSelect;
+    FormatTrigger: typeof ColorPickerFormatTrigger;
+    SwatchGroup: typeof ColorPickerSwatchGroup;
+    SwatchTrigger: typeof ColorPickerSwatchTrigger;
+    Swatch: typeof ColorPickerSwatch;
+    SwatchIndicator: typeof ColorPickerSwatchIndicator;
+    TransparencyGrid: typeof ColorPickerTransparencyGrid;
+    ValueSwatch: typeof ColorPickerValueSwatch;
+    ValueText: typeof ColorPickerValueText;
+    View: typeof ColorPickerView;
+};
+export { ColorPicker, parseColor, useColorPicker, useColorPickerContext };