@moduix/solid 1.0.0

package/dist/components/tag/Tag.js

@@ -0,0 +1,126 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { CloseButton } from "../close-button/index.js";
+import Tag_module from "./Tag.module.js";
+const DEFAULT_CLOSE_LABEL = 'Remove tag';
+function TagRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'size',
+        'variant'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "tag",
+        "data-part": "root",
+        "data-slot": "tag-root",
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        get ["data-variant"] () {
+            return local.variant ?? 'default';
+        },
+        get ["class"] () {
+            return clsx(Tag_module.root, local.class);
+        }
+    }));
+}
+function TagLabel(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "tag",
+        "data-part": "label",
+        "data-slot": "tag-label",
+        get ["class"] () {
+            return clsx(Tag_module.label, local.class);
+        }
+    }));
+}
+function TagStartElement(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "tag",
+        "data-part": "start-element",
+        "data-slot": "tag-start-element",
+        get ["class"] () {
+            return clsx(Tag_module.startElement, local.class);
+        }
+    }));
+}
+function TagEndElement(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "tag",
+        "data-part": "end-element",
+        "data-slot": "tag-end-element",
+        get ["class"] () {
+            return clsx(Tag_module.endElement, local.class);
+        }
+    }));
+}
+function TagCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(CloseButton.Root, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "tag",
+        "data-part": "close-trigger",
+        "data-slot": "tag-close-trigger",
+        get ["aria-label"] () {
+            return local['aria-label'] ?? (local.asChild || null != resolvedChildren() || null != local['aria-labelledby'] ? void 0 : DEFAULT_CLOSE_LABEL);
+        },
+        get ["aria-labelledby"] () {
+            return local['aria-labelledby'];
+        },
+        get ["class"] () {
+            return clsx(Tag_module.closeTrigger, local.class);
+        },
+        get children () {
+            return local.children;
+        }
+    }));
+}
+const Tag = Object.assign(TagRoot, {
+    Root: TagRoot,
+    Label: TagLabel,
+    StartElement: TagStartElement,
+    EndElement: TagEndElement,
+    CloseTrigger: TagCloseTrigger
+});
+export { Tag };

package/dist/components/tag/Tag.jsx

@@ -0,0 +1,57 @@
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { CloseButton } from "../close-button/index.jsx";
+import Tag_module from "./Tag.module.jsx";
+const DEFAULT_CLOSE_LABEL = 'Remove tag';
+function TagRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'size',
+        'variant'
+    ]);
+    return <ark.span asChild={local.asChild} {...others} data-scope="tag" data-part="root" data-slot="tag-root" data-size={local.size ?? 'md'} data-variant={local.variant ?? 'default'} class={clsx(Tag_module.root, local.class)}/>;
+}
+function TagLabel(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.span asChild={local.asChild} {...others} data-scope="tag" data-part="label" data-slot="tag-label" class={clsx(Tag_module.label, local.class)}/>;
+}
+function TagStartElement(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.span asChild={local.asChild} {...others} data-scope="tag" data-part="start-element" data-slot="tag-start-element" class={clsx(Tag_module.startElement, local.class)}/>;
+}
+function TagEndElement(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.span asChild={local.asChild} {...others} data-scope="tag" data-part="end-element" data-slot="tag-end-element" class={clsx(Tag_module.endElement, local.class)}/>;
+}
+function TagCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <CloseButton.Root asChild={local.asChild} {...others} data-scope="tag" data-part="close-trigger" data-slot="tag-close-trigger" aria-label={local['aria-label'] ?? (!local.asChild && null == resolvedChildren() && null == local['aria-labelledby'] ? DEFAULT_CLOSE_LABEL : void 0)} aria-labelledby={local['aria-labelledby']} class={clsx(Tag_module.closeTrigger, local.class)}>
+      {local.children}
+    </CloseButton.Root>;
+}
+const Tag = Object.assign(TagRoot, {
+    Root: TagRoot,
+    Label: TagLabel,
+    StartElement: TagStartElement,
+    EndElement: TagEndElement,
+    CloseTrigger: TagCloseTrigger
+});
+export { Tag };

package/dist/components/tag/Tag.module.js

@@ -0,0 +1,9 @@
+import "./Tag_module.css";
+const Tag_module = {
+    root: "root-R1cDd9",
+    label: "label-kWF4Re",
+    startElement: "startElement-GMyCJN",
+    endElement: "endElement-rhNCUI",
+    closeTrigger: "closeTrigger-vg63XO"
+};
+export default Tag_module;

package/dist/components/tag/Tag.module.jsx

@@ -0,0 +1,9 @@
+import "./Tag_module.css";
+const Tag_module = {
+    root: "root-R1cDd9",
+    label: "label-kWF4Re",
+    startElement: "startElement-GMyCJN",
+    endElement: "endElement-rhNCUI",
+    closeTrigger: "closeTrigger-vg63XO"
+};
+export default Tag_module;

package/dist/components/tag/Tag_module.css

@@ -0,0 +1,101 @@
+@layer moduix.components {
+  .root-R1cDd9 {
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--moduix-tag-gap, var(--moduix-spacing-1-5));
+    border: var(--moduix-tag-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tag-border-color, var(--moduix-tag-default-border-color, transparent));
+    border-radius: var(--moduix-tag-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-tag-bg, var(--moduix-tag-default-bg, var(--moduix-color-primary)));
+    width: fit-content;
+    min-width: 0;
+    max-width: 100%;
+    color: var(--moduix-tag-color, var(--moduix-tag-default-color, var(--moduix-color-primary-foreground)));
+    font-size: var(--moduix-tag-font-size, var(--moduix-text-xs));
+    font-weight: var(--moduix-tag-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-tag-line-height, var(--moduix-line-height-text-xs));
+    min-height: var(--moduix-tag-height-md, var(--moduix-size-xs));
+    padding-block: var(--moduix-tag-padding-y-md, var(--moduix-spacing-0-5));
+    padding-inline: var(--moduix-tag-padding-x-md, var(--moduix-spacing-2));
+    white-space: nowrap;
+    vertical-align: middle;
+    transition: color var(--moduix-tag-transition, var(--moduix-transition-default)),
+      background-color var(--moduix-tag-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-tag-transition, var(--moduix-transition-default));
+    display: inline-flex;
+  }
+
+  .root-R1cDd9 > svg {
+    width: var(--moduix-tag-icon-size, var(--moduix-spacing-3));
+    height: var(--moduix-tag-icon-size, var(--moduix-spacing-3));
+    pointer-events: none;
+    flex-shrink: 0;
+  }
+
+  .root-R1cDd9[data-size="sm"] {
+    gap: var(--moduix-tag-gap-sm, var(--moduix-spacing-1));
+    min-height: var(--moduix-tag-height-sm, 1.25rem);
+    padding-block: var(--moduix-tag-padding-y-sm, 0);
+    padding-inline: var(--moduix-tag-padding-x-sm, var(--moduix-spacing-1-5));
+  }
+
+  .root-R1cDd9[data-variant="secondary"] {
+    background-color: var(--moduix-tag-bg, var(--moduix-tag-secondary-bg, var(--moduix-color-secondary)));
+    border-color: var(--moduix-tag-border-color, var(--moduix-tag-secondary-border-color, transparent));
+    color: var(--moduix-tag-color, var(--moduix-tag-secondary-color, var(--moduix-color-secondary-foreground)));
+  }
+
+  .root-R1cDd9[data-variant="outline"] {
+    background-color: var(--moduix-tag-bg, var(--moduix-tag-outline-bg, transparent));
+    border-color: var(--moduix-tag-border-color, var(--moduix-tag-outline-border-color, var(--moduix-color-border)));
+    color: var(--moduix-tag-color, var(--moduix-tag-outline-color, var(--moduix-color-foreground)));
+  }
+
+  .root-R1cDd9[data-variant="ghost"] {
+    background-color: var(--moduix-tag-bg, var(--moduix-tag-ghost-bg, transparent));
+    border-color: var(--moduix-tag-border-color, var(--moduix-tag-ghost-border-color, transparent));
+    color: var(--moduix-tag-color, var(--moduix-tag-ghost-color, var(--moduix-color-foreground)));
+  }
+
+  .root-R1cDd9[data-variant="destructive"] {
+    background-color: var(--moduix-tag-bg, var(--moduix-tag-destructive-bg, var(--moduix-color-destructive)));
+    border-color: var(--moduix-tag-border-color, var(--moduix-tag-destructive-border-color, transparent));
+    color: var(--moduix-tag-color, var(--moduix-tag-destructive-color, var(--moduix-color-destructive-foreground)));
+  }
+
+  .label-kWF4Re {
+    text-overflow: ellipsis;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .startElement-GMyCJN, .endElement-rhNCUI {
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    min-width: 0;
+    display: inline-flex;
+  }
+
+  :is(.startElement-GMyCJN, .endElement-rhNCUI) > svg {
+    width: var(--moduix-tag-icon-size, var(--moduix-spacing-3));
+    height: var(--moduix-tag-icon-size, var(--moduix-spacing-3));
+    pointer-events: none;
+    flex-shrink: 0;
+  }
+
+  .closeTrigger-vg63XO {
+    --moduix-close-button-size: var(--moduix-tag-close-trigger-size, var(--moduix-spacing-4));
+    --moduix-close-button-radius: var(--moduix-tag-close-trigger-radius, var(--moduix-radius-full));
+    --moduix-close-button-icon-size: var(--moduix-tag-close-trigger-icon-size, var(--moduix-spacing-2-5));
+    --moduix-close-button-bg: var(--moduix-tag-close-trigger-bg, transparent);
+    --moduix-close-button-bg-hover: var(--moduix-tag-close-trigger-bg-hover, color-mix(in oklab, currentColor 12%, transparent));
+    --moduix-close-button-color: currentColor;
+    --moduix-close-button-color-hover: currentColor;
+    --moduix-close-button-disabled-opacity: var(--moduix-tag-disabled-opacity, var(--moduix-opacity-disabled));
+    --moduix-close-button-focus-ring-width: var(--moduix-tag-close-trigger-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)));
+    --moduix-close-button-focus-ring-color: var(--moduix-tag-close-trigger-focus-ring-color, var(--moduix-color-ring));
+    --moduix-close-button-focus-ring-offset: var(--moduix-tag-close-trigger-focus-ring-offset, 0);
+  }
+}
+

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

@@ -0,0 +1 @@
+export { Tag } from './Tag.js';

package/dist/components/tag/index.js

@@ -0,0 +1 @@
+export { Tag } from "./Tag.js";

package/dist/components/tag/index.jsx

@@ -0,0 +1 @@
+export { Tag } from "./Tag.jsx";

package/dist/components/tags-input/TagsInput.d.ts

@@ -0,0 +1,32 @@
+import { TagsInput as TagsInputPrimitive, useTagsInput, useTagsInputContext, useTagsInputItemContext } from '@ark-ui/solid/tags-input';
+import type { ComponentProps } from 'solid-js';
+declare function TagsInputRoot(props: ComponentProps<typeof TagsInputPrimitive.Root>): import("solid-js").JSX.Element;
+declare function TagsInputRootProvider(props: ComponentProps<typeof TagsInputPrimitive.RootProvider>): import("solid-js").JSX.Element;
+declare function TagsInputLabel(props: ComponentProps<typeof TagsInputPrimitive.Label>): import("solid-js").JSX.Element;
+declare function TagsInputControl(props: ComponentProps<typeof TagsInputPrimitive.Control>): import("solid-js").JSX.Element;
+declare function TagsInputItem(props: ComponentProps<typeof TagsInputPrimitive.Item>): import("solid-js").JSX.Element;
+declare function TagsInputItemPreview(props: ComponentProps<typeof TagsInputPrimitive.ItemPreview>): import("solid-js").JSX.Element;
+declare function TagsInputItemText(props: ComponentProps<typeof TagsInputPrimitive.ItemText>): import("solid-js").JSX.Element;
+declare function TagsInputItemDeleteTrigger(props: ComponentProps<typeof TagsInputPrimitive.ItemDeleteTrigger>): import("solid-js").JSX.Element;
+declare function TagsInputItemInput(props: ComponentProps<typeof TagsInputPrimitive.ItemInput>): import("solid-js").JSX.Element;
+declare function TagsInputInput(props: ComponentProps<typeof TagsInputPrimitive.Input>): import("solid-js").JSX.Element;
+declare function TagsInputClearTrigger(props: ComponentProps<typeof TagsInputPrimitive.ClearTrigger>): import("solid-js").JSX.Element;
+declare function TagsInputItems(): import("solid-js").JSX.Element;
+declare const TagsInput: typeof TagsInputRoot & {
+    Root: typeof TagsInputRoot;
+    RootProvider: typeof TagsInputRootProvider;
+    HiddenInput: (props: TagsInputPrimitive.HiddenInputProps) => import("solid-js").JSX.Element;
+    Label: typeof TagsInputLabel;
+    Control: typeof TagsInputControl;
+    Item: typeof TagsInputItem;
+    ItemContext: (props: TagsInputPrimitive.ItemContextProps) => import("solid-js").JSX.Element;
+    ItemPreview: typeof TagsInputItemPreview;
+    ItemText: typeof TagsInputItemText;
+    ItemDeleteTrigger: typeof TagsInputItemDeleteTrigger;
+    ItemInput: typeof TagsInputItemInput;
+    Input: typeof TagsInputInput;
+    ClearTrigger: typeof TagsInputClearTrigger;
+    Context: (props: TagsInputPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    Items: typeof TagsInputItems;
+};
+export { TagsInput, useTagsInput, useTagsInputContext, useTagsInputItemContext };

package/dist/components/tags-input/TagsInput.js

@@ -0,0 +1,242 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { TagsInput, useTagsInput, useTagsInputContext, useTagsInputItemContext } from "@ark-ui/solid/tags-input";
+import { clsx } from "clsx";
+import { For, children, splitProps } from "solid-js";
+import { CloseIcon } from "../../internal/icons/ui/Icons.js";
+import { CloseButton } from "../close-button/index.js";
+import TagsInput_module from "./TagsInput.module.js";
+function TagsInputRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(TagsInput.Root, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "tags-input-root",
+        get ["class"] () {
+            return clsx(TagsInput_module.root, local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function TagsInputRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(TagsInput.RootProvider, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "tags-input-root-provider",
+        get ["class"] () {
+            return clsx(TagsInput_module.root, local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function TagsInputLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(TagsInput.Label, mergeProps({
+        "data-slot": "tags-input-label",
+        get ["class"] () {
+            return clsx(TagsInput_module.label, local.class);
+        }
+    }, others));
+}
+function TagsInputControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(TagsInput.Control, mergeProps({
+        "data-slot": "tags-input-control",
+        get ["class"] () {
+            return clsx(TagsInput_module.control, local.class);
+        }
+    }, others));
+}
+function TagsInputItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(TagsInput.Item, mergeProps({
+        "data-slot": "tags-input-item",
+        get ["class"] () {
+            return clsx(TagsInput_module.item, local.class);
+        }
+    }, others));
+}
+function TagsInputItemPreview(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(TagsInput.ItemPreview, mergeProps({
+        "data-slot": "tags-input-item-preview",
+        get ["class"] () {
+            return clsx(TagsInput_module.itemPreview, local.class);
+        }
+    }, others));
+}
+function TagsInputItemText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(TagsInput.ItemText, mergeProps({
+        "data-slot": "tags-input-item-text",
+        get ["class"] () {
+            return clsx(TagsInput_module.itemText, local.class);
+        }
+    }, others));
+}
+function TagsInputItemDeleteTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(TagsInput.ItemDeleteTrigger, mergeProps({
+        "data-slot": "tags-input-item-delete-trigger",
+        get ["class"] () {
+            return clsx(TagsInput_module.itemDeleteTrigger, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(CloseIcon, {});
+        }
+    }));
+}
+function TagsInputItemInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(TagsInput.ItemInput, mergeProps({
+        "data-slot": "tags-input-item-input",
+        get ["class"] () {
+            return clsx(TagsInput_module.itemInput, local.class);
+        }
+    }, others));
+}
+function TagsInputInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(TagsInput.Input, mergeProps({
+        "data-slot": "tags-input-input",
+        get ["class"] () {
+            return clsx(TagsInput_module.input, local.class);
+        }
+    }, others));
+}
+function TagsInputClearTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const tagsInput = useTagsInputContext();
+    const resolvedChildren = children(()=>local.children);
+    const triggerClassName = ()=>clsx(TagsInput_module.clearTrigger, local.class);
+    const clearTriggerLabel = ()=>tagsInput().getClearTriggerProps()['aria-label'];
+    if (local.asChild) return createComponent(TagsInput.ClearTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "tags-input-clear-trigger",
+        get ["class"] () {
+            return triggerClassName();
+        },
+        get ["aria-label"] () {
+            return local['aria-label'];
+        },
+        get ["aria-labelledby"] () {
+            return local['aria-labelledby'];
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+    return createComponent(TagsInput.ClearTrigger, mergeProps({
+        asChild: (triggerProps)=>createComponent(CloseButton.Root, mergeProps(triggerProps, {
+                get ["aria-label"] () {
+                    return local['aria-label'] ?? clearTriggerLabel();
+                },
+                get ["aria-labelledby"] () {
+                    return local['aria-labelledby'];
+                },
+                "data-part": "clear-trigger",
+                "data-scope": "tags-input",
+                "data-slot": "tags-input-clear-trigger",
+                get children () {
+                    return resolvedChildren();
+                }
+            })),
+        "data-slot": "tags-input-clear-trigger",
+        get ["class"] () {
+            return triggerClassName();
+        }
+    }, others));
+}
+const TagsInputContext = TagsInput.Context;
+function TagsInputItems() {
+    return createComponent(TagsInputContext, {
+        children: (tagsInput)=>createComponent(For, {
+                get each () {
+                    return tagsInput().value;
+                },
+                children: (value, index)=>createComponent(TagsInputItem, {
+                        get index () {
+                            return index();
+                        },
+                        value: value,
+                        get children () {
+                            return [
+                                createComponent(TagsInputItemPreview, {
+                                    get children () {
+                                        return [
+                                            createComponent(TagsInputItemText, {
+                                                children: value
+                                            }),
+                                            createComponent(TagsInputItemDeleteTrigger, {})
+                                        ];
+                                    }
+                                }),
+                                createComponent(TagsInputItemInput, {})
+                            ];
+                        }
+                    })
+            })
+    });
+}
+const TagsInput_TagsInput = Object.assign(TagsInputRoot, {
+    Root: TagsInputRoot,
+    RootProvider: TagsInputRootProvider,
+    HiddenInput: TagsInput.HiddenInput,
+    Label: TagsInputLabel,
+    Control: TagsInputControl,
+    Item: TagsInputItem,
+    ItemContext: TagsInput.ItemContext,
+    ItemPreview: TagsInputItemPreview,
+    ItemText: TagsInputItemText,
+    ItemDeleteTrigger: TagsInputItemDeleteTrigger,
+    ItemInput: TagsInputItemInput,
+    Input: TagsInputInput,
+    ClearTrigger: TagsInputClearTrigger,
+    Context: TagsInputContext,
+    Items: TagsInputItems
+});
+export { TagsInput_TagsInput as TagsInput, useTagsInput, useTagsInputContext, useTagsInputItemContext };