@moduix/solid 1.0.0

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

@@ -0,0 +1,129 @@
+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.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+import TagsInput_module from "./TagsInput.module.jsx";
+function TagsInputRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <TagsInput.Root asChild={local.asChild} data-slot="tags-input-root" class={clsx(TagsInput_module.root, local.class)} {...others}>
+      {local.children}
+    </TagsInput.Root>;
+}
+function TagsInputRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <TagsInput.RootProvider asChild={local.asChild} data-slot="tags-input-root-provider" class={clsx(TagsInput_module.root, local.class)} {...others}>
+      {local.children}
+    </TagsInput.RootProvider>;
+}
+function TagsInputLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TagsInput.Label data-slot="tags-input-label" class={clsx(TagsInput_module.label, local.class)} {...others}/>;
+}
+function TagsInputControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TagsInput.Control data-slot="tags-input-control" class={clsx(TagsInput_module.control, local.class)} {...others}/>;
+}
+function TagsInputItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TagsInput.Item data-slot="tags-input-item" class={clsx(TagsInput_module.item, local.class)} {...others}/>;
+}
+function TagsInputItemPreview(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TagsInput.ItemPreview data-slot="tags-input-item-preview" class={clsx(TagsInput_module.itemPreview, local.class)} {...others}/>;
+}
+function TagsInputItemText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TagsInput.ItemText data-slot="tags-input-item-text" class={clsx(TagsInput_module.itemText, local.class)} {...others}/>;
+}
+function TagsInputItemDeleteTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <TagsInput.ItemDeleteTrigger data-slot="tags-input-item-delete-trigger" class={clsx(TagsInput_module.itemDeleteTrigger, local.class)} {...others}>
+      {resolvedChildren() ?? <CloseIcon/>}
+    </TagsInput.ItemDeleteTrigger>;
+}
+function TagsInputItemInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TagsInput.ItemInput data-slot="tags-input-item-input" class={clsx(TagsInput_module.itemInput, local.class)} {...others}/>;
+}
+function TagsInputInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TagsInput.Input data-slot="tags-input-input" class={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 <TagsInput.ClearTrigger asChild={local.asChild} data-slot="tags-input-clear-trigger" class={triggerClassName()} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} {...others}>
+        {local.children}
+      </TagsInput.ClearTrigger>;
+    return <TagsInput.ClearTrigger asChild={(triggerProps)=><CloseButton.Root {...triggerProps()} aria-label={local['aria-label'] ?? clearTriggerLabel()} aria-labelledby={local['aria-labelledby']} data-part="clear-trigger" data-scope="tags-input" data-slot="tags-input-clear-trigger">
+          {resolvedChildren()}
+        </CloseButton.Root>} data-slot="tags-input-clear-trigger" class={triggerClassName()} {...others}/>;
+}
+const TagsInputContext = TagsInput.Context;
+function TagsInputItems() {
+    return <TagsInputContext>
+      {(tagsInput)=><For each={tagsInput().value}>
+          {(value, index)=><TagsInputItem index={index()} value={value}>
+              <TagsInputItemPreview>
+                <TagsInputItemText>{value}</TagsInputItemText>
+                <TagsInputItemDeleteTrigger/>
+              </TagsInputItemPreview>
+              <TagsInputItemInput/>
+            </TagsInputItem>}
+        </For>}
+    </TagsInputContext>;
+}
+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 };

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

@@ -0,0 +1,14 @@
+import "./TagsInput_module.css";
+const TagsInput_module = {
+    root: "root-hoYMpF",
+    label: "label-EB302B",
+    control: "control-aj7rxt",
+    item: "item-YnX6WJ",
+    itemPreview: "itemPreview-Jtpko5",
+    itemText: "itemText-LUwEuF",
+    input: "input-uYY2LW",
+    itemInput: "itemInput-fToxnH",
+    itemDeleteTrigger: "itemDeleteTrigger-Fx1XkC",
+    clearTrigger: "clearTrigger-llMk8h"
+};
+export default TagsInput_module;

package/dist/components/tags-input/TagsInput.module.jsx

@@ -0,0 +1,14 @@
+import "./TagsInput_module.css";
+const TagsInput_module = {
+    root: "root-hoYMpF",
+    label: "label-EB302B",
+    control: "control-aj7rxt",
+    item: "item-YnX6WJ",
+    itemPreview: "itemPreview-Jtpko5",
+    itemText: "itemText-LUwEuF",
+    input: "input-uYY2LW",
+    itemInput: "itemInput-fToxnH",
+    itemDeleteTrigger: "itemDeleteTrigger-Fx1XkC",
+    clearTrigger: "clearTrigger-llMk8h"
+};
+export default TagsInput_module;

package/dist/components/tags-input/TagsInput_module.css

@@ -0,0 +1,222 @@
+@layer moduix.components {
+  .root-hoYMpF {
+    box-sizing: border-box;
+    gap: var(--moduix-tags-input-gap, var(--moduix-field-gap, var(--moduix-spacing-1)));
+    width: var(--moduix-tags-input-width, 100%);
+    max-width: var(--moduix-tags-input-max-width, 24rem);
+    color: var(--moduix-tags-input-color, var(--moduix-input-color, var(--moduix-color-foreground)));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .root-hoYMpF[data-disabled] {
+    opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-field-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled))));
+  }
+
+  .label-EB302B {
+    align-items: center;
+    gap: var(--moduix-tags-input-label-gap, var(--moduix-field-label-gap, var(--moduix-spacing-1)));
+    color: var(--moduix-tags-input-label-color, var(--moduix-field-label-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-tags-input-label-font-size, var(--moduix-field-label-font-size, var(--moduix-text-sm)));
+    font-weight: var(--moduix-tags-input-label-font-weight, var(--moduix-field-label-font-weight, var(--moduix-weight-medium)));
+    line-height: var(--moduix-tags-input-label-line-height, var(--moduix-field-label-line-height, var(--moduix-line-height-text-sm)));
+    display: inline-flex;
+  }
+
+  .label-EB302B[data-disabled] {
+    opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-field-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled))));
+  }
+
+  .control-aj7rxt {
+    box-sizing: border-box;
+    min-height: var(--moduix-tags-input-min-height, var(--moduix-input-height, var(--moduix-size-md)));
+    align-items: center;
+    gap: var(--moduix-tags-input-control-gap, var(--moduix-spacing-1));
+    border: var(--moduix-tags-input-border-width, var(--moduix-input-border-width, var(--moduix-border-width-sm)))
+      var(--moduix-input-border-style, solid)
+      var(--moduix-tags-input-border-color, var(--moduix-input-border-color, var(--moduix-color-border)));
+    border-radius: var(--moduix-tags-input-radius, var(--moduix-input-radius, var(--moduix-radius-md)));
+    width: 100%;
+    padding: var(--moduix-tags-input-padding-y, .3125rem)
+      var(--moduix-tags-input-padding-x, var(--moduix-spacing-2));
+    background-color: var(--moduix-tags-input-bg, var(--moduix-input-bg, var(--moduix-color-background)));
+    color: var(--moduix-tags-input-color, var(--moduix-input-color, var(--moduix-color-foreground)));
+    outline: var(--moduix-tags-input-focus-ring-width, var(--moduix-input-focus-ring-width, var(--moduix-tags-input-border-width, var(--moduix-input-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))))
+      solid transparent;
+    outline-offset: var(--moduix-tags-input-focus-ring-offset, var(--moduix-input-focus-ring-offset, calc(0px -
+            var(--moduix-tags-input-border-width, var(--moduix-input-border-width, var(--moduix-border-width-sm))))));
+    transition: border-color
+        var(--moduix-tags-input-transition, var(--moduix-input-transition, var(--moduix-transition-default))),
+      outline-color
+        var(--moduix-tags-input-transition, var(--moduix-input-transition, var(--moduix-transition-default))),
+      background-color
+        var(--moduix-tags-input-transition, var(--moduix-input-transition, var(--moduix-transition-default))),
+      opacity
+        var(--moduix-tags-input-transition, var(--moduix-input-transition, var(--moduix-transition-default)));
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .control-aj7rxt[data-focus] {
+    outline-color: var(--moduix-tags-input-focus-ring-color, var(--moduix-input-focus-ring-color, var(--moduix-color-ring)));
+  }
+
+  .control-aj7rxt[data-invalid] {
+    border-color: var(--moduix-tags-input-invalid-border-color, var(--moduix-input-border-color-invalid, var(--moduix-color-destructive)));
+  }
+
+  .control-aj7rxt[data-invalid][data-focus] {
+    outline-color: var(--moduix-tags-input-invalid-focus-ring-color, var(--moduix-input-border-color-invalid, var(--moduix-color-destructive)));
+  }
+
+  .control-aj7rxt[data-readonly] {
+    background-color: var(--moduix-tags-input-readonly-bg, var(--moduix-input-readonly-bg, var(--moduix-tags-input-bg, var(--moduix-color-background))));
+    color: var(--moduix-tags-input-readonly-color, var(--moduix-input-readonly-color, var(--moduix-tags-input-color, var(--moduix-color-foreground))));
+  }
+
+  .control-aj7rxt[data-disabled] {
+    pointer-events: none;
+  }
+
+  .item-YnX6WJ {
+    display: contents;
+  }
+
+  .itemPreview-Jtpko5 {
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--moduix-tags-input-item-gap, var(--moduix-spacing-1));
+    min-width: 0;
+    max-width: 100%;
+    min-height: var(--moduix-tags-input-item-height, var(--moduix-size-xs));
+    border: var(--moduix-tags-input-item-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tags-input-item-border-color, transparent);
+    border-radius: var(--moduix-tags-input-item-radius, var(--moduix-radius-full));
+    padding-block: var(--moduix-tags-input-item-padding-y, var(--moduix-spacing-0-5));
+    padding-inline: var(--moduix-tags-input-item-padding-x, var(--moduix-spacing-2));
+    background-color: var(--moduix-tags-input-item-bg, var(--moduix-color-secondary));
+    color: var(--moduix-tags-input-item-color, var(--moduix-color-secondary-foreground));
+    font-size: var(--moduix-tags-input-item-font-size, var(--moduix-text-xs));
+    font-weight: var(--moduix-tags-input-item-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-tags-input-item-line-height, var(--moduix-line-height-text-xs));
+    transition: border-color var(--moduix-tags-input-transition, var(--moduix-transition-default)),
+      background-color var(--moduix-tags-input-transition, var(--moduix-transition-default)),
+      color var(--moduix-tags-input-transition, var(--moduix-transition-default)),
+      box-shadow var(--moduix-tags-input-transition, var(--moduix-transition-default));
+    display: inline-flex;
+  }
+
+  .itemPreview-Jtpko5[data-highlighted] {
+    box-shadow: 0 0 0
+        var(--moduix-tags-input-item-highlight-ring-width, var(--moduix-border-width-sm))
+        var(--moduix-tags-input-item-highlight-ring-color, var(--moduix-color-ring));
+  }
+
+  .itemPreview-Jtpko5[data-disabled] {
+    opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .itemText-LUwEuF {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .input-uYY2LW, .itemInput-fToxnH {
+    box-sizing: border-box;
+    flex: 1 1 var(--moduix-tags-input-input-min-width, 7rem);
+    min-width: var(--moduix-tags-input-input-min-width, 7rem);
+    height: var(--moduix-tags-input-input-height, var(--moduix-size-xs));
+    padding: 0 var(--moduix-tags-input-input-padding-x, var(--moduix-spacing-1));
+    color: inherit;
+    font: inherit;
+    font-size: var(--moduix-tags-input-input-font-size, var(--moduix-input-font-size, var(--moduix-text-sm)));
+    line-height: var(--moduix-tags-input-input-line-height, var(--moduix-input-line-height, var(--moduix-line-height-text-sm)));
+    background-color: #0000;
+    border: 0;
+    outline: 0;
+    margin: 0;
+  }
+
+  :is(.input-uYY2LW, .itemInput-fToxnH)::placeholder {
+    color: var(--moduix-tags-input-placeholder-color, var(--moduix-input-placeholder-color, var(--moduix-color-muted-foreground)));
+  }
+
+  :is(.input-uYY2LW, .itemInput-fToxnH)[data-readonly], :is(.input-uYY2LW, .itemInput-fToxnH):read-only {
+    cursor: default;
+  }
+
+  .itemInput-fToxnH {
+    flex: 0 1 var(--moduix-tags-input-item-input-width, 7rem);
+  }
+
+  .input-uYY2LW[data-readonly] {
+    display: none;
+  }
+
+  .itemDeleteTrigger-Fx1XkC {
+    width: var(--moduix-tags-input-trigger-size, var(--moduix-spacing-4));
+    height: var(--moduix-tags-input-trigger-size, var(--moduix-spacing-4));
+    border-radius: var(--moduix-tags-input-trigger-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-tags-input-trigger-bg, transparent);
+    color: var(--moduix-tags-input-trigger-color, currentColor);
+    cursor: pointer;
+    transition: background-color var(--moduix-tags-input-transition, var(--moduix-transition-default)),
+      color var(--moduix-tags-input-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-tags-input-transition, var(--moduix-transition-default)),
+      box-shadow var(--moduix-tags-input-transition, var(--moduix-transition-default));
+    border: 0;
+    outline: 0;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    display: inline-flex;
+  }
+
+  .itemDeleteTrigger-Fx1XkC > svg {
+    width: var(--moduix-tags-input-trigger-icon-size, var(--moduix-spacing-2-5));
+    height: var(--moduix-tags-input-trigger-icon-size, var(--moduix-spacing-2-5));
+    pointer-events: none;
+    flex: none;
+  }
+
+  .itemDeleteTrigger-Fx1XkC:hover {
+    background-color: var(--moduix-tags-input-trigger-bg-hover, color-mix(in oklab, currentColor 12%, transparent));
+  }
+
+  .itemDeleteTrigger-Fx1XkC:focus-visible {
+    box-shadow: 0 0 0
+        var(--moduix-tags-input-trigger-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        var(--moduix-tags-input-trigger-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  .itemDeleteTrigger-Fx1XkC[data-disabled], .itemDeleteTrigger-Fx1XkC:disabled {
+    cursor: default;
+    opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-opacity-disabled));
+    pointer-events: none;
+  }
+
+  .clearTrigger-llMk8h {
+    --moduix-close-button-size: var(--moduix-tags-input-clear-trigger-size, var(--moduix-size-xs));
+    --moduix-close-button-icon-size: var(--moduix-tags-input-clear-trigger-icon-size, var(--moduix-spacing-3));
+    --moduix-close-button-radius: var(--moduix-tags-input-clear-trigger-radius, var(--moduix-radius-sm));
+    --moduix-close-button-bg: var(--moduix-tags-input-clear-trigger-bg, transparent);
+    --moduix-close-button-bg-hover: var(--moduix-tags-input-clear-trigger-bg-hover, var(--moduix-color-muted));
+    --moduix-close-button-color: var(--moduix-tags-input-clear-trigger-color, var(--moduix-color-muted-foreground));
+    --moduix-close-button-color-hover: var(--moduix-tags-input-clear-trigger-color-hover, var(--moduix-color-foreground));
+    --moduix-close-button-focus-ring-color: var(--moduix-tags-input-trigger-focus-ring-color, var(--moduix-color-ring));
+    --moduix-close-button-focus-ring-width: var(--moduix-tags-input-trigger-focus-ring-width, var(--moduix-border-width-sm));
+    --moduix-close-button-focus-ring-offset: var(--moduix-tags-input-trigger-focus-ring-offset, var(--moduix-focus-ring-offset));
+    --moduix-close-button-disabled-opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-opacity-disabled));
+    flex: none;
+    align-self: center;
+    margin-inline-start: auto;
+  }
+
+  .clearTrigger-llMk8h[data-readonly] {
+    display: none;
+  }
+}
+

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

@@ -0,0 +1 @@
+export { TagsInput, useTagsInput, useTagsInputContext, useTagsInputItemContext, } from './TagsInput.js';

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

@@ -0,0 +1 @@
+export { TagsInput, useTagsInput, useTagsInputContext, useTagsInputItemContext } from "./TagsInput.js";

package/dist/components/tags-input/index.jsx

@@ -0,0 +1 @@
+export { TagsInput, useTagsInput, useTagsInputContext, useTagsInputItemContext } from "./TagsInput.jsx";

package/dist/components/text/Text.d.ts

@@ -0,0 +1,30 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import type { JSX } from 'solid-js';
+type TextElement = 'p' | 'span' | 'small' | 'strong' | 'em' | 'div';
+type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+type TextTone = 'default' | 'muted' | 'subtle' | 'primary' | 'destructive';
+type TextAlign = 'start' | 'center' | 'end' | 'left' | 'right' | 'justify';
+type TextProps = HTMLArkProps<'p'> & {
+    as?: TextElement;
+    size?: TextSize;
+    weight?: TextWeight;
+    tone?: TextTone;
+    align?: TextAlign;
+    truncate?: boolean;
+    lineClamp?: number;
+    'data-scope'?: string;
+    'data-part'?: string;
+    'data-slot'?: string;
+    'data-size'?: string;
+    'data-weight'?: string;
+    'data-tone'?: string;
+    'data-align'?: string;
+    'data-truncate'?: string;
+    'data-line-clamp'?: string;
+};
+declare function TextRoot(props: TextProps): JSX.Element;
+declare const Text: typeof TextRoot & {
+    Root: typeof TextRoot;
+};
+export { Text };

package/dist/components/text/Text.js

@@ -0,0 +1,89 @@
+import { Dynamic, createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Text_module from "./Text.module.js";
+const Text_elements = {
+    div: ark.div,
+    em: ark.em,
+    p: ark.p,
+    small: ark.small,
+    span: ark.span,
+    strong: ark.strong
+};
+function TextRoot(props) {
+    const [local, others] = splitProps(props, [
+        'as',
+        'asChild',
+        'size',
+        'weight',
+        'tone',
+        'align',
+        'truncate',
+        'lineClamp',
+        'class',
+        'style',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'data-size',
+        'data-weight',
+        'data-tone',
+        'data-align',
+        'data-truncate',
+        'data-line-clamp'
+    ]);
+    const Element = ()=>Text_elements[local.as ?? 'p'];
+    const defaultSize = ()=>'small' === local.as ? 'sm' : 'md';
+    const defaultWeight = ()=>'strong' === local.as ? 'semibold' : 'regular';
+    const resolvedLineClamp = ()=>Number.isInteger(local.lineClamp) && (local.lineClamp ?? 0) > 0 ? local.lineClamp : void 0;
+    const lineClampStyle = ()=>{
+        const value = resolvedLineClamp();
+        if (void 0 === value) return local.style;
+        if ('string' == typeof local.style) return `${local.style};--_text-line-clamp:${value}`;
+        return {
+            ...local.style,
+            '--_text-line-clamp': value
+        };
+    };
+    return createComponent(Dynamic, mergeProps({
+        get component () {
+            return Element();
+        },
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "text",
+        "data-part": "root",
+        "data-slot": "text-root",
+        get ["data-size"] () {
+            return local.size ?? defaultSize();
+        },
+        get ["data-weight"] () {
+            return local.weight ?? defaultWeight();
+        },
+        get ["data-tone"] () {
+            return local.tone ?? 'default';
+        },
+        get ["data-align"] () {
+            return local.align;
+        },
+        get ["data-truncate"] () {
+            return local.truncate ? '' : void 0;
+        },
+        get ["data-line-clamp"] () {
+            return void 0 === resolvedLineClamp() ? void 0 : '';
+        },
+        get ["class"] () {
+            return clsx(Text_module.root, local.class);
+        },
+        get style () {
+            return lineClampStyle();
+        }
+    }));
+}
+const Text = Object.assign(TextRoot, {
+    Root: TextRoot
+});
+export { Text };

package/dist/components/text/Text.jsx

@@ -0,0 +1,54 @@
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import Text_module from "./Text.module.jsx";
+const Text_elements = {
+    div: ark.div,
+    em: ark.em,
+    p: ark.p,
+    small: ark.small,
+    span: ark.span,
+    strong: ark.strong
+};
+function TextRoot(props) {
+    const [local, others] = splitProps(props, [
+        'as',
+        'asChild',
+        'size',
+        'weight',
+        'tone',
+        'align',
+        'truncate',
+        'lineClamp',
+        'class',
+        'style',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'data-size',
+        'data-weight',
+        'data-tone',
+        'data-align',
+        'data-truncate',
+        'data-line-clamp'
+    ]);
+    const Element = ()=>Text_elements[local.as ?? 'p'];
+    const defaultSize = ()=>'small' === local.as ? 'sm' : 'md';
+    const defaultWeight = ()=>'strong' === local.as ? 'semibold' : 'regular';
+    const resolvedLineClamp = ()=>Number.isInteger(local.lineClamp) && (local.lineClamp ?? 0) > 0 ? local.lineClamp : void 0;
+    const lineClampStyle = ()=>{
+        const value = resolvedLineClamp();
+        if (void 0 === value) return local.style;
+        if ('string' == typeof local.style) return `${local.style};--_text-line-clamp:${value}`;
+        return {
+            ...local.style,
+            '--_text-line-clamp': value
+        };
+    };
+    return <Dynamic component={Element()} asChild={local.asChild} {...others} data-scope="text" data-part="root" data-slot="text-root" data-size={local.size ?? defaultSize()} data-weight={local.weight ?? defaultWeight()} data-tone={local.tone ?? 'default'} data-align={local.align} data-truncate={local.truncate ? '' : void 0} data-line-clamp={void 0 === resolvedLineClamp() ? void 0 : ''} class={clsx(Text_module.root, local.class)} style={lineClampStyle()}/>;
+}
+const Text = Object.assign(TextRoot, {
+    Root: TextRoot
+});
+export { Text };

package/dist/components/text/Text.module.js

@@ -0,0 +1,5 @@
+import "./Text_module.css";
+const Text_module = {
+    root: "root-lOp5q5"
+};
+export default Text_module;

package/dist/components/text/Text.module.jsx

@@ -0,0 +1,5 @@
+import "./Text_module.css";
+const Text_module = {
+    root: "root-lOp5q5"
+};
+export default Text_module;

package/dist/components/text/Text_module.css

@@ -0,0 +1,101 @@
+@layer moduix.components {
+  .root-lOp5q5 {
+    font-family: var(--moduix-text-font-family, inherit);
+    font-size: var(--moduix-text-font-size-md, var(--moduix-text-md));
+    font-weight: var(--moduix-text-font-weight-regular, var(--moduix-weight-regular));
+    line-height: var(--moduix-text-line-height-md, var(--moduix-line-height-text-md));
+    letter-spacing: var(--moduix-text-letter-spacing, 0);
+    color: var(--moduix-text-default-color, var(--moduix-color-foreground));
+    text-align: start;
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .root-lOp5q5[data-size="xs"] {
+    font-size: var(--moduix-text-font-size-xs, var(--moduix-text-xs));
+    line-height: var(--moduix-text-line-height-xs, var(--moduix-line-height-text-xs));
+  }
+
+  .root-lOp5q5[data-size="sm"] {
+    font-size: var(--moduix-text-font-size-sm, var(--moduix-text-sm));
+    line-height: var(--moduix-text-line-height-sm, var(--moduix-line-height-text-sm));
+  }
+
+  .root-lOp5q5[data-size="lg"] {
+    font-size: var(--moduix-text-font-size-lg, var(--moduix-text-lg));
+    line-height: var(--moduix-text-line-height-lg, var(--moduix-line-height-text-lg));
+  }
+
+  .root-lOp5q5[data-size="xl"] {
+    font-size: var(--moduix-text-font-size-xl, var(--moduix-text-xl));
+    line-height: var(--moduix-text-line-height-xl, var(--moduix-line-height-text-xl));
+  }
+
+  .root-lOp5q5[data-weight="medium"] {
+    font-weight: var(--moduix-text-font-weight-medium, var(--moduix-weight-medium));
+  }
+
+  .root-lOp5q5[data-weight="semibold"] {
+    font-weight: var(--moduix-text-font-weight-semibold, var(--moduix-weight-semibold));
+  }
+
+  .root-lOp5q5[data-weight="bold"] {
+    font-weight: var(--moduix-text-font-weight-bold, var(--moduix-weight-bold));
+  }
+
+  .root-lOp5q5[data-tone="muted"] {
+    color: var(--moduix-text-muted-color, var(--moduix-color-muted-foreground));
+  }
+
+  .root-lOp5q5[data-tone="subtle"] {
+    color: var(--moduix-text-subtle-color, var(--moduix-color-secondary-foreground));
+  }
+
+  .root-lOp5q5[data-tone="primary"] {
+    color: var(--moduix-text-primary-color, var(--moduix-color-primary));
+  }
+
+  .root-lOp5q5[data-tone="destructive"] {
+    color: var(--moduix-text-destructive-color, var(--moduix-color-destructive));
+  }
+
+  .root-lOp5q5[data-align="left"] {
+    text-align: left;
+  }
+
+  .root-lOp5q5[data-align="start"] {
+    text-align: start;
+  }
+
+  .root-lOp5q5[data-align="center"] {
+    text-align: center;
+  }
+
+  .root-lOp5q5[data-align="right"] {
+    text-align: right;
+  }
+
+  .root-lOp5q5[data-align="end"] {
+    text-align: end;
+  }
+
+  .root-lOp5q5[data-align="justify"] {
+    text-align: justify;
+  }
+
+  .root-lOp5q5[data-truncate] {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .root-lOp5q5[data-line-clamp] {
+    --_text-line-clamp: initial;
+    white-space: normal;
+    -webkit-line-clamp: var(--moduix-text-line-clamp, var(--_text-line-clamp));
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+}
+