@moduix/solid-tailwind 1.0.0

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,240 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { TagsInput, useTagsInput, useTagsInputContext, useTagsInputItemContext } from "@ark-ui/solid/tags-input";
+import { For, children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { CloseIcon } from "../../internal/icons/ui/Icons.js";
+import { CloseButton } from "../close-button/index.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 cn('flex w-full max-w-96 flex-col gap-1 text-foreground data-disabled:opacity-50', 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 cn('flex w-full max-w-96 flex-col gap-1 text-foreground data-disabled:opacity-50', 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 cn('inline-flex items-center gap-1 text-sm leading-5 font-medium text-foreground data-disabled:opacity-50', 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 cn('flex min-h-control-md w-full flex-wrap items-center gap-1 rounded-md border border-border bg-background px-2 py-[0.3125rem] text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color,opacity] duration-200 ease-in-out data-disabled:pointer-events-none data-focus:outline-ring data-invalid:border-destructive data-invalid:data-focus:outline-destructive data-readonly:bg-background data-readonly:text-foreground motion-reduce:transition-none', 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 cn('contents', 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 cn('inline-flex min-h-control-xs max-w-full min-w-0 items-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 text-xs leading-4 font-medium text-secondary-foreground transition-[border-color,background-color,color,box-shadow] duration-200 ease-in-out data-disabled:opacity-50 data-highlighted:ring-1 data-highlighted:ring-ring motion-reduce:transition-none', 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 cn('min-w-0 truncate', 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 cn('inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 text-inherit outline-0 transition-[background-color,color,opacity,box-shadow] duration-200 ease-in-out focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:pointer-events-none [&>svg]:size-2.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-current/10', 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 cn('h-control-xs min-w-28 shrink grow-0 basis-28 border-0 bg-transparent px-1 text-sm leading-5 text-inherit outline-0 placeholder:text-muted-foreground read-only:cursor-default data-readonly:cursor-default', 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 cn('h-control-xs min-w-28 shrink grow basis-28 border-0 bg-transparent px-1 text-sm leading-5 text-inherit outline-0 placeholder:text-muted-foreground read-only:cursor-default data-readonly:hidden data-readonly:cursor-default', 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 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 cn('ms-auto shrink-0 self-center data-readonly:hidden', local.class);
+        },
+        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 cn('ms-auto size-control-xs shrink-0 self-center rounded-sm bg-transparent text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-ring data-readonly:hidden motion-reduce:transition-none [&>svg]:size-3 [@media(hover:hover)]:hover:bg-muted [@media(hover:hover)]:hover:text-foreground', local.class);
+        }
+    }, 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 };

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

@@ -0,0 +1,127 @@
+import { TagsInput, useTagsInput, useTagsInputContext, useTagsInputItemContext } from "@ark-ui/solid/tags-input";
+import { For, children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { CloseIcon } from "../../internal/icons/ui/Icons.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+function TagsInputRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <TagsInput.Root asChild={local.asChild} data-slot="tags-input-root" class={cn('flex w-full max-w-96 flex-col gap-1 text-foreground data-disabled:opacity-50', 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={cn('flex w-full max-w-96 flex-col gap-1 text-foreground data-disabled:opacity-50', 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={cn('inline-flex items-center gap-1 text-sm leading-5 font-medium text-foreground data-disabled:opacity-50', local.class)} {...others}/>;
+}
+function TagsInputControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TagsInput.Control data-slot="tags-input-control" class={cn('flex min-h-control-md w-full flex-wrap items-center gap-1 rounded-md border border-border bg-background px-2 py-[0.3125rem] text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color,opacity] duration-200 ease-in-out data-disabled:pointer-events-none data-focus:outline-ring data-invalid:border-destructive data-invalid:data-focus:outline-destructive data-readonly:bg-background data-readonly:text-foreground motion-reduce:transition-none', local.class)} {...others}/>;
+}
+function TagsInputItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TagsInput.Item data-slot="tags-input-item" class={cn('contents', local.class)} {...others}/>;
+}
+function TagsInputItemPreview(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TagsInput.ItemPreview data-slot="tags-input-item-preview" class={cn('inline-flex min-h-control-xs max-w-full min-w-0 items-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 text-xs leading-4 font-medium text-secondary-foreground transition-[border-color,background-color,color,box-shadow] duration-200 ease-in-out data-disabled:opacity-50 data-highlighted:ring-1 data-highlighted:ring-ring motion-reduce:transition-none', local.class)} {...others}/>;
+}
+function TagsInputItemText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TagsInput.ItemText data-slot="tags-input-item-text" class={cn('min-w-0 truncate', 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={cn('inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 text-inherit outline-0 transition-[background-color,color,opacity,box-shadow] duration-200 ease-in-out focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:pointer-events-none [&>svg]:size-2.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-current/10', 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={cn('h-control-xs min-w-28 shrink grow-0 basis-28 border-0 bg-transparent px-1 text-sm leading-5 text-inherit outline-0 placeholder:text-muted-foreground read-only:cursor-default data-readonly:cursor-default', local.class)} {...others}/>;
+}
+function TagsInputInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TagsInput.Input data-slot="tags-input-input" class={cn('h-control-xs min-w-28 shrink grow basis-28 border-0 bg-transparent px-1 text-sm leading-5 text-inherit outline-0 placeholder:text-muted-foreground read-only:cursor-default data-readonly:hidden data-readonly:cursor-default', 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 clearTriggerLabel = ()=>tagsInput().getClearTriggerProps()['aria-label'];
+    if (local.asChild) return <TagsInput.ClearTrigger asChild={local.asChild} data-slot="tags-input-clear-trigger" class={cn('ms-auto shrink-0 self-center data-readonly:hidden', local.class)} 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={cn('ms-auto size-control-xs shrink-0 self-center rounded-sm bg-transparent text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-ring data-readonly:hidden motion-reduce:transition-none [&>svg]:size-3 [@media(hover:hover)]:hover:bg-muted [@media(hover:hover)]:hover:text-foreground', local.class)} {...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/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,126 @@
+import { Dynamic, createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+const Text_elements = {
+    div: ark.div,
+    em: ark.em,
+    p: ark.p,
+    small: ark.small,
+    span: ark.span,
+    strong: ark.strong
+};
+const textVariants = cva('tracking-normal wrap-anywhere', {
+    variants: {
+        size: {
+            xs: 'text-xs',
+            sm: 'text-sm',
+            md: 'text-md',
+            lg: 'text-lg',
+            xl: 'text-xl'
+        },
+        weight: {
+            regular: 'font-regular',
+            medium: 'font-medium',
+            semibold: 'font-semibold',
+            bold: 'font-bold'
+        },
+        tone: {
+            default: 'text-foreground',
+            muted: 'text-muted-foreground',
+            subtle: 'text-secondary-foreground',
+            primary: 'text-primary',
+            destructive: 'text-destructive'
+        },
+        align: {
+            start: 'text-start',
+            center: 'text-center',
+            end: 'text-end',
+            left: 'text-left',
+            right: 'text-right',
+            justify: 'text-justify'
+        }
+    }
+});
+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};-webkit-line-clamp:${value}`;
+        return {
+            ...local.style,
+            '-webkit-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 cn(textVariants({
+                size: local.size ?? defaultSize(),
+                weight: local.weight ?? defaultWeight(),
+                tone: local.tone ?? 'default',
+                align: local.align ?? 'start'
+            }), local.truncate && 'overflow-hidden text-ellipsis whitespace-nowrap', void 0 !== resolvedLineClamp() && '[display:-webkit-box] overflow-hidden [white-space:normal] [-webkit-box-orient:vertical]', local.class);
+        },
+        get style () {
+            return lineClampStyle();
+        }
+    }));
+}
+const Text = Object.assign(TextRoot, {
+    Root: TextRoot
+});
+export { Text };

package/dist/components/text/Text.jsx

@@ -0,0 +1,91 @@
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { cn } from "../../internal/cn.jsx";
+const Text_elements = {
+    div: ark.div,
+    em: ark.em,
+    p: ark.p,
+    small: ark.small,
+    span: ark.span,
+    strong: ark.strong
+};
+const textVariants = cva('tracking-normal wrap-anywhere', {
+    variants: {
+        size: {
+            xs: 'text-xs',
+            sm: 'text-sm',
+            md: 'text-md',
+            lg: 'text-lg',
+            xl: 'text-xl'
+        },
+        weight: {
+            regular: 'font-regular',
+            medium: 'font-medium',
+            semibold: 'font-semibold',
+            bold: 'font-bold'
+        },
+        tone: {
+            default: 'text-foreground',
+            muted: 'text-muted-foreground',
+            subtle: 'text-secondary-foreground',
+            primary: 'text-primary',
+            destructive: 'text-destructive'
+        },
+        align: {
+            start: 'text-start',
+            center: 'text-center',
+            end: 'text-end',
+            left: 'text-left',
+            right: 'text-right',
+            justify: 'text-justify'
+        }
+    }
+});
+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};-webkit-line-clamp:${value}`;
+        return {
+            ...local.style,
+            '-webkit-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={cn(textVariants({
+        size: local.size ?? defaultSize(),
+        weight: local.weight ?? defaultWeight(),
+        tone: local.tone ?? 'default',
+        align: local.align ?? 'start'
+    }), local.truncate && 'overflow-hidden text-ellipsis whitespace-nowrap', void 0 !== resolvedLineClamp() && '[display:-webkit-box] overflow-hidden [white-space:normal] [-webkit-box-orient:vertical]', local.class)} style={lineClampStyle()}/>;
+}
+const Text = Object.assign(TextRoot, {
+    Root: TextRoot
+});
+export { Text };

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

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

package/dist/components/text/index.js

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

package/dist/components/text/index.jsx

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