@moduix/solid 1.0.0

package/dist/components/empty/Empty.jsx

@@ -0,0 +1,55 @@
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Empty_module from "./Empty.module.jsx";
+function EmptyRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.div asChild={local.asChild} {...others} data-scope="empty" data-part="root" data-slot="empty-root" class={clsx(Empty_module.root, local.class)}/>;
+}
+function EmptyIcon(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.div asChild={local.asChild} {...others} data-scope="empty" data-part="icon" data-slot="empty-icon" class={clsx(Empty_module.icon, local.class)}/>;
+}
+function EmptyContent(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.div asChild={local.asChild} {...others} data-scope="empty" data-part="content" data-slot="empty-content" class={clsx(Empty_module.content, local.class)}/>;
+}
+function EmptyTitle(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.h3 asChild={local.asChild} {...others} data-scope="empty" data-part="title" data-slot="empty-title" class={clsx(Empty_module.title, local.class)}/>;
+}
+function EmptyDescription(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.div asChild={local.asChild} {...others} data-scope="empty" data-part="description" data-slot="empty-description" class={clsx(Empty_module.description, local.class)}/>;
+}
+function EmptyActions(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.div asChild={local.asChild} {...others} data-scope="empty" data-part="actions" data-slot="empty-actions" class={clsx(Empty_module.actions, local.class)}/>;
+}
+const Empty = Object.assign(EmptyRoot, {
+    Root: EmptyRoot,
+    Icon: EmptyIcon,
+    Content: EmptyContent,
+    Title: EmptyTitle,
+    Description: EmptyDescription,
+    Actions: EmptyActions
+});
+export { Empty };

package/dist/components/empty/Empty.module.js

@@ -0,0 +1,10 @@
+import "./Empty_module.css";
+const Empty_module = {
+    root: "root-eGkN9L",
+    icon: "icon-LWbtAW",
+    content: "content-qVnKHg",
+    title: "title-siLoJh",
+    description: "description-_YR4BR",
+    actions: "actions-pllhOJ"
+};
+export default Empty_module;

package/dist/components/empty/Empty.module.jsx

@@ -0,0 +1,10 @@
+import "./Empty_module.css";
+const Empty_module = {
+    root: "root-eGkN9L",
+    icon: "icon-LWbtAW",
+    content: "content-qVnKHg",
+    title: "title-siLoJh",
+    description: "description-_YR4BR",
+    actions: "actions-pllhOJ"
+};
+export default Empty_module;

package/dist/components/empty/Empty_module.css

@@ -0,0 +1,91 @@
+@layer moduix.components {
+  .root-eGkN9L {
+    box-sizing: border-box;
+    justify-items: center;
+    gap: var(--moduix-empty-gap, var(--moduix-spacing-4));
+    width: 100%;
+    min-width: 0;
+    padding: var(--moduix-empty-padding, var(--moduix-spacing-8));
+    border: var(--moduix-empty-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-empty-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-empty-radius, var(--moduix-radius-xl));
+    background-color: var(--moduix-empty-bg, color-mix(in oklab, var(--moduix-color-card) 92%, var(--moduix-color-muted)));
+    color: var(--moduix-empty-color, var(--moduix-color-card-foreground));
+    box-shadow: var(--moduix-empty-shadow, none);
+    text-align: center;
+    display: grid;
+  }
+
+  .icon-LWbtAW {
+    min-width: 0;
+    padding: var(--moduix-empty-icon-padding, var(--moduix-spacing-3));
+    border-radius: var(--moduix-empty-icon-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-empty-icon-bg, var(--moduix-color-muted));
+    color: var(--moduix-empty-icon-color, var(--moduix-color-muted-foreground));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .icon-LWbtAW:where(svg), .icon-LWbtAW :where(svg) {
+    width: var(--moduix-empty-icon-size, var(--moduix-spacing-6));
+    height: var(--moduix-empty-icon-size, var(--moduix-spacing-6));
+    pointer-events: none;
+    flex-shrink: 0;
+  }
+
+  .content-qVnKHg {
+    justify-items: center;
+    gap: var(--moduix-empty-content-gap, var(--moduix-spacing-1));
+    min-width: 0;
+    max-width: var(--moduix-empty-content-max-width, 28rem);
+    display: grid;
+  }
+
+  .title-siLoJh {
+    min-width: 0;
+    color: var(--moduix-empty-title-color, currentColor);
+    font-size: var(--moduix-empty-title-font-size, var(--moduix-text-xl));
+    font-weight: var(--moduix-empty-title-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-empty-title-line-height, var(--moduix-line-height-text-xl));
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .description-_YR4BR {
+    min-width: 0;
+    color: var(--moduix-empty-description-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-empty-description-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-empty-description-line-height, var(--moduix-line-height-text-sm));
+    overflow-wrap: anywhere;
+  }
+
+  .description-_YR4BR > :first-child {
+    margin-block-start: 0;
+  }
+
+  .description-_YR4BR > :last-child {
+    margin-bottom: 0;
+  }
+
+  .actions-pllhOJ {
+    justify-content: center;
+    align-items: center;
+    gap: var(--moduix-empty-actions-gap, var(--moduix-spacing-2));
+    flex-wrap: wrap;
+    min-width: 0;
+    max-width: 100%;
+    display: flex;
+  }
+
+  .actions-pllhOJ > * {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .actions-pllhOJ > :where(button, a) {
+    overflow-wrap: anywhere;
+    white-space: normal;
+  }
+}
+

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

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

package/dist/components/empty/index.js

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

package/dist/components/empty/index.jsx

@@ -0,0 +1 @@
+export * from "./Empty.jsx";

package/dist/components/field/Field.d.ts

@@ -0,0 +1,37 @@
+import { Field as FieldPrimitive, useField, useFieldContext } from '@ark-ui/solid/field';
+import type { ComponentProps } from 'solid-js';
+import type { JSX } from 'solid-js';
+type FieldItemProps = ComponentProps<typeof FieldPrimitive.Item> & ComponentProps<'div'>;
+type FieldInputProps = ComponentProps<typeof FieldPrimitive.Input> & {
+    defaultValue?: string | number | readonly string[];
+};
+type FieldTextareaProps = ComponentProps<typeof FieldPrimitive.Textarea> & {
+    defaultValue?: string | number | readonly string[];
+};
+type FieldSelectProps = ComponentProps<typeof FieldPrimitive.Select> & {
+    defaultValue?: ComponentProps<typeof FieldPrimitive.Select>['value'];
+};
+declare function FieldRoot(props: ComponentProps<typeof FieldPrimitive.Root>): JSX.Element;
+declare function FieldRootProvider(props: ComponentProps<typeof FieldPrimitive.RootProvider>): JSX.Element;
+declare function FieldItem(props: FieldItemProps): JSX.Element;
+declare function FieldLabel(props: ComponentProps<typeof FieldPrimitive.Label>): JSX.Element;
+declare function FieldInput(props: FieldInputProps): JSX.Element;
+declare function FieldTextarea(props: FieldTextareaProps): JSX.Element;
+declare function FieldSelect(props: FieldSelectProps): JSX.Element;
+declare function FieldHelperText(props: ComponentProps<typeof FieldPrimitive.HelperText>): JSX.Element;
+declare function FieldErrorText(props: ComponentProps<typeof FieldPrimitive.ErrorText>): JSX.Element;
+declare function FieldRequiredIndicator(props: ComponentProps<typeof FieldPrimitive.RequiredIndicator>): JSX.Element;
+declare const Field: typeof FieldRoot & {
+    Root: typeof FieldRoot;
+    RootProvider: typeof FieldRootProvider;
+    Item: typeof FieldItem;
+    Label: typeof FieldLabel;
+    Input: typeof FieldInput;
+    Textarea: typeof FieldTextarea;
+    Select: typeof FieldSelect;
+    HelperText: typeof FieldHelperText;
+    ErrorText: typeof FieldErrorText;
+    RequiredIndicator: typeof FieldRequiredIndicator;
+    Context: (props: FieldPrimitive.ContextProps) => JSX.Element;
+};
+export { Field, useField, useFieldContext };

package/dist/components/field/Field.js

@@ -0,0 +1,237 @@
+import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
+import { Field, useField, useFieldContext } from "@ark-ui/solid/field";
+import { clsx } from "clsx";
+import { createEffect, splitProps } from "solid-js";
+import Field_module from "./Field.module.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>");
+const FieldSelectPrimitive = Field.Select;
+function FieldRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Field.Root, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-slot": "field-root",
+        get ["class"] () {
+            return clsx(Field_module.root, local.class);
+        }
+    }));
+}
+function FieldRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Field.RootProvider, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-slot": "field-root-provider",
+        get ["class"] () {
+            return clsx(Field_module.root, local.class);
+        }
+    }));
+}
+function FieldItem(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'ref',
+        'value'
+    ]);
+    return createComponent(Field.Item, {
+        get value () {
+            return local.value;
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            var _ref$ = local.ref;
+            "function" == typeof _ref$ ? use(_ref$, _el$) : local.ref = _el$;
+            spread(_el$, mergeProps(others, {
+                "data-slot": "field-item",
+                get ["class"] () {
+                    return clsx(Field_module.item, local.class);
+                }
+            }), false, true);
+            insert(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+}
+function FieldLabel(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Field.Label, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-slot": "field-label",
+        get ["class"] () {
+            return clsx(Field_module.label, local.class);
+        }
+    }));
+}
+function FieldInput(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'defaultValue',
+        'ref'
+    ]);
+    let inputRef;
+    createEffect(()=>{
+        if (inputRef) inputRef.defaultValue = String(local.defaultValue ?? '');
+    });
+    return createComponent(Field.Input, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, ()=>local.asChild ? {
+            'prop:defaultValue': local.defaultValue
+        } : {}, {
+        "data-slot": "field-input",
+        get ["class"] () {
+            return clsx(Field_module.control, local.class);
+        },
+        ref: (element)=>{
+            inputRef = element;
+            if ('function' == typeof local.ref) local.ref(element);
+        }
+    }));
+}
+function FieldTextarea(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'defaultValue',
+        'ref'
+    ]);
+    let textareaRef;
+    createEffect(()=>{
+        if (textareaRef) textareaRef.defaultValue = String(local.defaultValue ?? '');
+    });
+    return createComponent(Field.Textarea, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, ()=>local.asChild ? {
+            'prop:defaultValue': local.defaultValue
+        } : {}, {
+        "data-slot": "field-textarea",
+        get ["class"] () {
+            return clsx(Field_module.control, Field_module.textarea, local.class);
+        },
+        ref: (element)=>{
+            textareaRef = element;
+            if ('function' == typeof local.ref) local.ref(element);
+        }
+    }));
+}
+function FieldSelect(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'defaultValue',
+        'ref'
+    ]);
+    let selectRef;
+    createEffect(()=>{
+        const defaultValue = local.defaultValue;
+        if (!selectRef || void 0 === defaultValue) return;
+        const values = new Set((Array.isArray(defaultValue) ? defaultValue : [
+            defaultValue
+        ]).map((value)=>String(value)));
+        for (const option of Array.from(selectRef.options)){
+            const selected = values.has(option.value);
+            option.selected = selected;
+            option.defaultSelected = selected;
+        }
+    });
+    return createComponent(FieldSelectPrimitive, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        get ["prop:defaultValue"] () {
+            return local.defaultValue;
+        },
+        "data-slot": "field-select",
+        get ["class"] () {
+            return clsx(Field_module.control, local.class);
+        },
+        ref: (element)=>{
+            selectRef = element;
+            if ('function' == typeof local.ref) local.ref(element);
+        }
+    }));
+}
+function FieldHelperText(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Field.HelperText, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-slot": "field-helper-text",
+        get ["class"] () {
+            return clsx(Field_module.helperText, local.class);
+        }
+    }));
+}
+function FieldErrorText(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Field.ErrorText, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-slot": "field-error-text",
+        get ["class"] () {
+            return clsx(Field_module.errorText, local.class);
+        }
+    }));
+}
+function FieldRequiredIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Field.RequiredIndicator, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-slot": "field-required-indicator",
+        get ["class"] () {
+            return clsx(Field_module.requiredIndicator, local.class);
+        }
+    }));
+}
+const Field_Field = Object.assign(FieldRoot, {
+    Root: FieldRoot,
+    RootProvider: FieldRootProvider,
+    Item: FieldItem,
+    Label: FieldLabel,
+    Input: FieldInput,
+    Textarea: FieldTextarea,
+    Select: FieldSelect,
+    HelperText: FieldHelperText,
+    ErrorText: FieldErrorText,
+    RequiredIndicator: FieldRequiredIndicator,
+    Context: Field.Context
+});
+export { Field_Field as Field, useField, useFieldContext };

package/dist/components/field/Field.jsx

@@ -0,0 +1,135 @@
+import { Field, useField, useFieldContext } from "@ark-ui/solid/field";
+import { clsx } from "clsx";
+import { createEffect, splitProps } from "solid-js";
+import Field_module from "./Field.module.jsx";
+const FieldSelectPrimitive = Field.Select;
+function FieldRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Field.Root asChild={local.asChild} {...others} data-slot="field-root" class={clsx(Field_module.root, local.class)}/>;
+}
+function FieldRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Field.RootProvider asChild={local.asChild} {...others} data-slot="field-root-provider" class={clsx(Field_module.root, local.class)}/>;
+}
+function FieldItem(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'ref',
+        'value'
+    ]);
+    return <Field.Item value={local.value}>
+      <div {...others} data-slot="field-item" class={clsx(Field_module.item, local.class)} ref={local.ref}>
+        {local.children}
+      </div>
+    </Field.Item>;
+}
+function FieldLabel(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Field.Label asChild={local.asChild} {...others} data-slot="field-label" class={clsx(Field_module.label, local.class)}/>;
+}
+function FieldInput(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'defaultValue',
+        'ref'
+    ]);
+    let inputRef;
+    createEffect(()=>{
+        if (inputRef) inputRef.defaultValue = String(local.defaultValue ?? '');
+    });
+    return <Field.Input asChild={local.asChild} {...others} {...local.asChild ? {
+        'prop:defaultValue': local.defaultValue
+    } : {}} data-slot="field-input" class={clsx(Field_module.control, local.class)} ref={(element)=>{
+        inputRef = element;
+        if ('function' == typeof local.ref) local.ref(element);
+    }}/>;
+}
+function FieldTextarea(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'defaultValue',
+        'ref'
+    ]);
+    let textareaRef;
+    createEffect(()=>{
+        if (textareaRef) textareaRef.defaultValue = String(local.defaultValue ?? '');
+    });
+    return <Field.Textarea asChild={local.asChild} {...others} {...local.asChild ? {
+        'prop:defaultValue': local.defaultValue
+    } : {}} data-slot="field-textarea" class={clsx(Field_module.control, Field_module.textarea, local.class)} ref={(element)=>{
+        textareaRef = element;
+        if ('function' == typeof local.ref) local.ref(element);
+    }}/>;
+}
+function FieldSelect(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'defaultValue',
+        'ref'
+    ]);
+    let selectRef;
+    createEffect(()=>{
+        const defaultValue = local.defaultValue;
+        if (!selectRef || void 0 === defaultValue) return;
+        const values = new Set((Array.isArray(defaultValue) ? defaultValue : [
+            defaultValue
+        ]).map((value)=>String(value)));
+        for (const option of Array.from(selectRef.options)){
+            const selected = values.has(option.value);
+            option.selected = selected;
+            option.defaultSelected = selected;
+        }
+    });
+    return <FieldSelectPrimitive asChild={local.asChild} {...others} prop:defaultValue={local.defaultValue} data-slot="field-select" class={clsx(Field_module.control, local.class)} ref={(element)=>{
+        selectRef = element;
+        if ('function' == typeof local.ref) local.ref(element);
+    }}/>;
+}
+function FieldHelperText(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Field.HelperText asChild={local.asChild} {...others} data-slot="field-helper-text" class={clsx(Field_module.helperText, local.class)}/>;
+}
+function FieldErrorText(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Field.ErrorText asChild={local.asChild} {...others} data-slot="field-error-text" class={clsx(Field_module.errorText, local.class)}/>;
+}
+function FieldRequiredIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Field.RequiredIndicator asChild={local.asChild} {...others} data-slot="field-required-indicator" class={clsx(Field_module.requiredIndicator, local.class)}/>;
+}
+const Field_Field = Object.assign(FieldRoot, {
+    Root: FieldRoot,
+    RootProvider: FieldRootProvider,
+    Item: FieldItem,
+    Label: FieldLabel,
+    Input: FieldInput,
+    Textarea: FieldTextarea,
+    Select: FieldSelect,
+    HelperText: FieldHelperText,
+    ErrorText: FieldErrorText,
+    RequiredIndicator: FieldRequiredIndicator,
+    Context: Field.Context
+});
+export { Field_Field as Field, useField, useFieldContext };

package/dist/components/field/Field.module.js

@@ -0,0 +1,12 @@
+import "./Field_module.css";
+const Field_module = {
+    root: "root-8ZfZ1W",
+    item: "item-IAvDWz",
+    label: "label-b5wNPe",
+    helperText: "helperText-pAOAcE",
+    control: "control-hI2WSE",
+    textarea: "textarea-Y8lb0K",
+    errorText: "errorText-HCuYXk",
+    requiredIndicator: "requiredIndicator-yiixrR"
+};
+export default Field_module;

package/dist/components/field/Field.module.jsx

@@ -0,0 +1,12 @@
+import "./Field_module.css";
+const Field_module = {
+    root: "root-8ZfZ1W",
+    item: "item-IAvDWz",
+    label: "label-b5wNPe",
+    helperText: "helperText-pAOAcE",
+    control: "control-hI2WSE",
+    textarea: "textarea-Y8lb0K",
+    errorText: "errorText-HCuYXk",
+    requiredIndicator: "requiredIndicator-yiixrR"
+};
+export default Field_module;