@moduix/solid 1.0.0

package/dist/components/editable/Editable.js

@@ -0,0 +1,182 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Editable, useEditable, useEditableContext } from "@ark-ui/solid/editable";
+import { clsx } from "clsx";
+import { Show, children, splitProps } from "solid-js";
+import { CheckIcon, CloseIcon, PencilIcon } from "../../internal/icons/ui/Icons.js";
+import Editable_module from "./Editable.module.js";
+function EditableRoot(props) {
+    const [local, others] = splitProps(props, [
+        'activationMode',
+        'class'
+    ]);
+    return createComponent(Editable.Root, mergeProps({
+        "data-slot": "editable-root",
+        get activationMode () {
+            return local.activationMode ?? 'dblclick';
+        },
+        get ["class"] () {
+            return clsx(Editable_module.root, local.class);
+        }
+    }, others));
+}
+function EditableRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Editable.RootProvider, mergeProps({
+        "data-slot": "editable-root-provider",
+        get ["class"] () {
+            return clsx(Editable_module.root, local.class);
+        }
+    }, others));
+}
+function EditableLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Editable.Label, mergeProps({
+        "data-slot": "editable-label",
+        get ["class"] () {
+            return clsx(Editable_module.label, local.class);
+        }
+    }, others));
+}
+function EditableArea(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Editable.Area, mergeProps({
+        "data-slot": "editable-area",
+        get ["class"] () {
+            return clsx(Editable_module.area, local.class);
+        }
+    }, others));
+}
+function EditableInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Editable.Input, mergeProps({
+        "data-slot": "editable-input",
+        get ["class"] () {
+            return clsx(Editable_module.input, local.class);
+        }
+    }, others));
+}
+function EditablePreview(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Editable.Preview, mergeProps({
+        "data-slot": "editable-preview",
+        get ["class"] () {
+            return clsx(Editable_module.preview, local.class);
+        }
+    }, others));
+}
+function EditableControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Editable.Control, mergeProps({
+        "data-slot": "editable-control",
+        get ["class"] () {
+            return clsx(Editable_module.control, local.class);
+        }
+    }, others));
+}
+function EditableEditTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Editable.EditTrigger, mergeProps({
+        "data-slot": "editable-edit-trigger",
+        get ["class"] () {
+            return clsx(Editable_module.trigger, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(PencilIcon, {});
+        }
+    }));
+}
+function EditableSubmitTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Editable.SubmitTrigger, mergeProps({
+        "data-slot": "editable-submit-trigger",
+        get ["class"] () {
+            return clsx(Editable_module.trigger, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(CheckIcon, {});
+        }
+    }));
+}
+function EditableCancelTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Editable.CancelTrigger, mergeProps({
+        "data-slot": "editable-cancel-trigger",
+        get ["class"] () {
+            return clsx(Editable_module.trigger, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(CloseIcon, {});
+        }
+    }));
+}
+function EditableControls(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(EditableControl, mergeProps({
+        get ["class"] () {
+            return local.class;
+        }
+    }, others, {
+        get children () {
+            return createComponent(Editable.Context, {
+                children: (editable)=>createComponent(Show, {
+                        get when () {
+                            return editable().editing;
+                        },
+                        get fallback () {
+                            return createComponent(EditableEditTrigger, {});
+                        },
+                        get children () {
+                            return [
+                                createComponent(EditableSubmitTrigger, {}),
+                                createComponent(EditableCancelTrigger, {})
+                            ];
+                        }
+                    })
+            });
+        }
+    }));
+}
+const Editable_Editable = Object.assign(EditableRoot, {
+    Root: EditableRoot,
+    RootProvider: EditableRootProvider,
+    Label: EditableLabel,
+    Area: EditableArea,
+    Input: EditableInput,
+    Preview: EditablePreview,
+    Control: EditableControl,
+    EditTrigger: EditableEditTrigger,
+    SubmitTrigger: EditableSubmitTrigger,
+    CancelTrigger: EditableCancelTrigger,
+    Controls: EditableControls,
+    Context: Editable.Context
+});
+export { Editable_Editable as Editable, useEditable, useEditableContext };

package/dist/components/editable/Editable.jsx

@@ -0,0 +1,106 @@
+import { Editable, useEditable, useEditableContext } from "@ark-ui/solid/editable";
+import { clsx } from "clsx";
+import { Show, children, splitProps } from "solid-js";
+import { CheckIcon, CloseIcon, PencilIcon } from "../../internal/icons/ui/Icons.jsx";
+import Editable_module from "./Editable.module.jsx";
+function EditableRoot(props) {
+    const [local, others] = splitProps(props, [
+        'activationMode',
+        'class'
+    ]);
+    return <Editable.Root data-slot="editable-root" activationMode={local.activationMode ?? 'dblclick'} class={clsx(Editable_module.root, local.class)} {...others}/>;
+}
+function EditableRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Editable.RootProvider data-slot="editable-root-provider" class={clsx(Editable_module.root, local.class)} {...others}/>;
+}
+function EditableLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Editable.Label data-slot="editable-label" class={clsx(Editable_module.label, local.class)} {...others}/>;
+}
+function EditableArea(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Editable.Area data-slot="editable-area" class={clsx(Editable_module.area, local.class)} {...others}/>;
+}
+function EditableInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Editable.Input data-slot="editable-input" class={clsx(Editable_module.input, local.class)} {...others}/>;
+}
+function EditablePreview(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Editable.Preview data-slot="editable-preview" class={clsx(Editable_module.preview, local.class)} {...others}/>;
+}
+function EditableControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Editable.Control data-slot="editable-control" class={clsx(Editable_module.control, local.class)} {...others}/>;
+}
+function EditableEditTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Editable.EditTrigger data-slot="editable-edit-trigger" class={clsx(Editable_module.trigger, local.class)} {...others}>
+      {resolvedChildren() ?? <PencilIcon/>}
+    </Editable.EditTrigger>;
+}
+function EditableSubmitTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Editable.SubmitTrigger data-slot="editable-submit-trigger" class={clsx(Editable_module.trigger, local.class)} {...others}>
+      {resolvedChildren() ?? <CheckIcon/>}
+    </Editable.SubmitTrigger>;
+}
+function EditableCancelTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Editable.CancelTrigger data-slot="editable-cancel-trigger" class={clsx(Editable_module.trigger, local.class)} {...others}>
+      {resolvedChildren() ?? <CloseIcon/>}
+    </Editable.CancelTrigger>;
+}
+function EditableControls(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <EditableControl class={local.class} {...others}>
+      <Editable.Context>
+        {(editable)=><Show when={editable().editing} fallback={<EditableEditTrigger/>}>
+            <EditableSubmitTrigger/>
+            <EditableCancelTrigger/>
+          </Show>}
+      </Editable.Context>
+    </EditableControl>;
+}
+const Editable_Editable = Object.assign(EditableRoot, {
+    Root: EditableRoot,
+    RootProvider: EditableRootProvider,
+    Label: EditableLabel,
+    Area: EditableArea,
+    Input: EditableInput,
+    Preview: EditablePreview,
+    Control: EditableControl,
+    EditTrigger: EditableEditTrigger,
+    SubmitTrigger: EditableSubmitTrigger,
+    CancelTrigger: EditableCancelTrigger,
+    Controls: EditableControls,
+    Context: Editable.Context
+});
+export { Editable_Editable as Editable, useEditable, useEditableContext };

package/dist/components/editable/Editable.module.js

@@ -0,0 +1,11 @@
+import "./Editable_module.css";
+const Editable_module = {
+    root: "root-h3pdNe",
+    area: "area-jB4rub",
+    label: "label-W5mYXc",
+    input: "input-D00lXJ",
+    preview: "preview-FEFxa4",
+    control: "control-RAMaJ8",
+    trigger: "trigger-vykuEP"
+};
+export default Editable_module;

package/dist/components/editable/Editable.module.jsx

@@ -0,0 +1,11 @@
+import "./Editable_module.css";
+const Editable_module = {
+    root: "root-h3pdNe",
+    area: "area-jB4rub",
+    label: "label-W5mYXc",
+    input: "input-D00lXJ",
+    preview: "preview-FEFxa4",
+    control: "control-RAMaJ8",
+    trigger: "trigger-vykuEP"
+};
+export default Editable_module;

package/dist/components/editable/Editable_module.css

@@ -0,0 +1,176 @@
+@layer moduix.components {
+  .root-h3pdNe {
+    box-sizing: border-box;
+    align-items: center;
+    row-gap: var(--moduix-editable-gap, var(--moduix-spacing-1));
+    column-gap: var(--moduix-editable-control-gap, var(--moduix-spacing-1));
+    width: var(--moduix-editable-width, auto);
+    max-width: var(--moduix-editable-max-width, 100%);
+    color: var(--moduix-editable-color, var(--moduix-color-foreground));
+    grid-template-columns: minmax(0, 1fr) auto;
+    display: inline-grid;
+  }
+
+  .root-h3pdNe:has(.area-jB4rub[data-disabled]) {
+    opacity: var(--moduix-editable-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .label-W5mYXc {
+    align-items: center;
+    gap: var(--moduix-editable-label-gap, var(--moduix-spacing-1));
+    color: var(--moduix-editable-label-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-editable-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-editable-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-editable-label-line-height, var(--moduix-line-height-text-sm));
+    grid-column: 1 / -1;
+    display: inline-flex;
+  }
+
+  .label-W5mYXc[data-invalid] {
+    color: var(--moduix-editable-label-color-invalid, var(--moduix-color-destructive));
+  }
+
+  .area-jB4rub {
+    --_editable-focus-ring-width: var(--moduix-editable-focus-ring-width, var(--moduix-editable-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))));
+    box-sizing: border-box;
+    width: var(--moduix-editable-area-width, 100%);
+    min-width: 0;
+    min-height: var(--moduix-editable-area-height, var(--moduix-size-md));
+    border: var(--moduix-editable-border-width, var(--moduix-border-width-sm))
+      var(--moduix-editable-border-style, solid)
+      var(--moduix-editable-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-editable-radius, var(--moduix-radius-md));
+    padding: var(--moduix-editable-padding-y, var(--moduix-spacing-1))
+      var(--moduix-editable-padding-x, var(--moduix-spacing-3-5));
+    background-color: var(--moduix-editable-bg, var(--moduix-color-background));
+    color: var(--moduix-editable-color, var(--moduix-color-foreground));
+    outline: var(--_editable-focus-ring-width) solid transparent;
+    outline-offset: calc(var(--_editable-focus-ring-width) * -1);
+    transition: border-color var(--moduix-editable-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-editable-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-editable-transition, var(--moduix-transition-default));
+    grid-column: 1;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .area-jB4rub[data-focus] {
+    outline-color: var(--moduix-editable-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  .area-jB4rub:has(.input-D00lXJ:is([data-invalid], [aria-invalid="true"]), .preview-FEFxa4:is([data-invalid], [aria-invalid="true"])) {
+    border-color: var(--moduix-editable-border-color-invalid, var(--moduix-color-destructive));
+  }
+
+  .area-jB4rub:has(.input-D00lXJ:is([data-invalid], [aria-invalid="true"]), .preview-FEFxa4:is([data-invalid], [aria-invalid="true"]))[data-focus] {
+    outline-color: var(--moduix-editable-border-color-invalid, var(--moduix-color-destructive));
+  }
+
+  .area-jB4rub[data-disabled] {
+    pointer-events: none;
+  }
+
+  .input-D00lXJ, .preview-FEFxa4 {
+    box-sizing: border-box;
+    width: var(--moduix-editable-input-width, 100%);
+    min-width: 0;
+    color: inherit;
+    font: inherit;
+    font-size: var(--moduix-editable-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-editable-line-height, var(--moduix-line-height-text-md));
+    background: none;
+    border: 0;
+    outline: 0;
+    margin: 0;
+    padding: 0;
+    display: block;
+  }
+
+  .input-D00lXJ {
+    appearance: none;
+  }
+
+  .input-D00lXJ::placeholder {
+    color: var(--moduix-editable-placeholder-color, var(--moduix-color-muted-foreground));
+  }
+
+  .input-D00lXJ:is(textarea) {
+    min-height: var(--moduix-editable-textarea-min-height, 6rem);
+    resize: var(--moduix-editable-textarea-resize, vertical);
+  }
+
+  .preview-FEFxa4 {
+    min-height: var(--moduix-editable-preview-min-height, 1lh);
+    cursor: text;
+  }
+
+  .preview-FEFxa4[data-placeholder-shown] {
+    color: var(--moduix-editable-placeholder-color, var(--moduix-color-muted-foreground));
+  }
+
+  .preview-FEFxa4:is([data-disabled], [data-readonly], [aria-readonly="true"]) {
+    cursor: default;
+  }
+
+  .control-RAMaJ8 {
+    align-items: center;
+    align-self: var(--moduix-editable-control-align, center);
+    gap: var(--moduix-editable-control-gap, var(--moduix-spacing-1));
+    grid-column: 2;
+    display: inline-flex;
+  }
+
+  .trigger-vykuEP {
+    box-sizing: border-box;
+    width: var(--moduix-editable-trigger-size, var(--moduix-editable-area-height, var(--moduix-size-md)));
+    min-width: var(--moduix-editable-trigger-size, var(--moduix-editable-area-height, var(--moduix-size-md)));
+    height: var(--moduix-editable-trigger-size, var(--moduix-editable-area-height, var(--moduix-size-md)));
+    border: var(--moduix-editable-trigger-border-width, var(--moduix-border-width-sm))
+      var(--moduix-editable-trigger-border-style, solid)
+      var(--moduix-editable-trigger-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-editable-trigger-radius, var(--moduix-radius-sm));
+    background-color: var(--moduix-editable-trigger-bg, var(--moduix-color-background));
+    color: var(--moduix-editable-trigger-color, var(--moduix-color-foreground));
+    outline: var(--moduix-editable-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+      solid transparent;
+    outline-offset: calc(0px -
+        var(--moduix-editable-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))));
+    cursor: pointer;
+    transition: background-color var(--moduix-editable-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-editable-transition, var(--moduix-transition-default)),
+      color var(--moduix-editable-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-editable-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-editable-transition, var(--moduix-transition-default));
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+  }
+
+  @media (hover: hover) {
+    .trigger-vykuEP:hover {
+      background-color: var(--moduix-editable-trigger-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  .trigger-vykuEP:active {
+    background-color: var(--moduix-editable-trigger-bg-active, var(--moduix-editable-trigger-bg-hover, var(--moduix-color-accent)));
+  }
+
+  .trigger-vykuEP:focus-visible, .trigger-vykuEP[data-focus] {
+    outline-color: var(--moduix-editable-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  .trigger-vykuEP:is([data-disabled], :disabled) {
+    pointer-events: none;
+    opacity: var(--moduix-editable-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .trigger-vykuEP > svg {
+    width: var(--moduix-editable-trigger-icon-size, var(--moduix-spacing-3-5));
+    height: var(--moduix-editable-trigger-icon-size, var(--moduix-spacing-3-5));
+    flex-shrink: 0;
+  }
+}
+

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

@@ -0,0 +1 @@
+export { Editable, useEditable, useEditableContext } from './Editable.js';

package/dist/components/editable/index.js

@@ -0,0 +1 @@
+export { Editable, useEditable, useEditableContext } from "./Editable.js";

package/dist/components/editable/index.jsx

@@ -0,0 +1 @@
+export { Editable, useEditable, useEditableContext } from "./Editable.jsx";

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

@@ -0,0 +1,16 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+declare function EmptyRoot(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function EmptyIcon(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function EmptyContent(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function EmptyTitle(props: HTMLArkProps<'h3'>): import("solid-js").JSX.Element;
+declare function EmptyDescription(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function EmptyActions(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare const Empty: typeof EmptyRoot & {
+    Root: typeof EmptyRoot;
+    Icon: typeof EmptyIcon;
+    Content: typeof EmptyContent;
+    Title: typeof EmptyTitle;
+    Description: typeof EmptyDescription;
+    Actions: typeof EmptyActions;
+};
+export { Empty };

package/dist/components/empty/Empty.js

@@ -0,0 +1,122 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Empty_module from "./Empty.module.js";
+function EmptyRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "empty",
+        "data-part": "root",
+        "data-slot": "empty-root",
+        get ["class"] () {
+            return clsx(Empty_module.root, local.class);
+        }
+    }));
+}
+function EmptyIcon(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "empty",
+        "data-part": "icon",
+        "data-slot": "empty-icon",
+        get ["class"] () {
+            return clsx(Empty_module.icon, local.class);
+        }
+    }));
+}
+function EmptyContent(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "empty",
+        "data-part": "content",
+        "data-slot": "empty-content",
+        get ["class"] () {
+            return clsx(Empty_module.content, local.class);
+        }
+    }));
+}
+function EmptyTitle(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.h3, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "empty",
+        "data-part": "title",
+        "data-slot": "empty-title",
+        get ["class"] () {
+            return clsx(Empty_module.title, local.class);
+        }
+    }));
+}
+function EmptyDescription(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "empty",
+        "data-part": "description",
+        "data-slot": "empty-description",
+        get ["class"] () {
+            return clsx(Empty_module.description, local.class);
+        }
+    }));
+}
+function EmptyActions(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "empty",
+        "data-part": "actions",
+        "data-slot": "empty-actions",
+        get ["class"] () {
+            return 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 };