@moduix/solid-tailwind 1.0.0

package/dist/components/table/Table.jsx

@@ -0,0 +1,189 @@
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+const tableVariants = cva('group/table isolate w-full border-collapse border-spacing-0 text-left text-foreground', {
+    variants: {
+        size: {
+            sm: 'text-xs leading-4',
+            md: 'text-sm leading-5',
+            lg: 'text-md leading-6'
+        },
+        variant: {
+            line: '',
+            outline: 'border border-border'
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'line'
+    }
+});
+function TableRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-interactive',
+        'data-part',
+        'data-scope',
+        'data-show-column-border',
+        'data-size',
+        'data-slot',
+        'data-sticky-header',
+        'data-striped',
+        'data-variant',
+        'interactive',
+        'showColumnBorder',
+        'size',
+        'stickyHeader',
+        'striped',
+        'variant'
+    ]);
+    const size = ()=>local.size ?? 'md';
+    const variant = ()=>local.variant ?? 'line';
+    return <ark.table asChild={local.asChild} {...others} data-scope="table" data-part="root" data-slot="table-root" data-interactive={local.interactive || void 0} data-show-column-border={local.showColumnBorder || void 0} data-size={size()} data-sticky-header={local.stickyHeader || void 0} data-striped={local.striped || void 0} data-variant={variant()} class={cn(tableVariants({
+        size: size(),
+        variant: variant()
+    }), local.class)}/>;
+}
+function TableScrollArea(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-slot'
+    ]);
+    return <ark.div asChild={local.asChild} {...others} data-scope="table" data-part="scroll-area" data-slot="table-scroll-area" class={cn('relative isolate w-full min-w-0 overflow-x-auto rounded-lg border border-border bg-card', local.class)}/>;
+}
+function TableCaption(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-side',
+        'data-slot',
+        'side'
+    ]);
+    const side = ()=>local.side ?? 'bottom';
+    return <ark.caption asChild={local.asChild} {...others} data-scope="table" data-part="caption" data-side={side()} data-slot="table-caption" class={cn('px-4 text-left text-sm leading-5 text-pretty text-muted-foreground group-data-[size=lg]/table:px-5 group-data-[size=sm]/table:px-3 data-[side=bottom]:caption-bottom data-[side=bottom]:pt-3 data-[side=bottom]:pb-2 data-[side=top]:caption-top data-[side=top]:pt-2 data-[side=top]:pb-3', local.class)}/>;
+}
+function TableColumnGroup(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-slot'
+    ]);
+    return <ark.colgroup asChild={local.asChild} {...others} data-scope="table" data-part="column-group" data-slot="table-column-group" class={local.class}/>;
+}
+function TableColumn(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-slot',
+        'htmlWidth',
+        'width'
+    ]);
+    return <ark.col asChild={local.asChild} {...others} data-scope="table" data-part="column" data-slot="table-column" width={local.htmlWidth ?? local.width} class={local.class}/>;
+}
+function TableHeader(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-slot'
+    ]);
+    return <ark.thead asChild={local.asChild} {...others} data-scope="table" data-part="header" data-slot="table-header" class={cn('group/table-header group-data-[sticky-header]/table:sticky group-data-[sticky-header]/table:top-0 group-data-[sticky-header]/table:z-3 group-data-[sticky-header]/table:bg-card', local.class)}/>;
+}
+function TableBody(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-slot'
+    ]);
+    return <ark.tbody asChild={local.asChild} {...others} data-scope="table" data-part="body" data-slot="table-body" class={cn('group/table-body', local.class)}/>;
+}
+function TableFooter(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-slot'
+    ]);
+    return <ark.tfoot asChild={local.asChild} {...others} data-scope="table" data-part="footer" data-slot="table-footer" class={cn('border-t border-border bg-muted font-medium', local.class)}/>;
+}
+function TableRow(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-slot'
+    ]);
+    return <ark.tr asChild={local.asChild} {...others} data-scope="table" data-part="row" data-slot="table-row" class={cn('transition-colors duration-200 ease-in-out group-data-[slot=table-body]/table-body:border-b group-data-[slot=table-body]/table-body:border-border group-data-[slot=table-header]/table-header:border-b group-data-[slot=table-header]/table-header:border-border group-data-[slot=table-body]/table-body:last:border-b-0 group-data-[interactive]/table:group-data-[slot=table-body]/table-body:[&:not([data-empty])]:focus-within:bg-muted group-data-[interactive]/table:group-data-[slot=table-body]/table-body:[&:not([data-empty])]:hover:bg-muted group-data-[striped]/table:[&:nth-child(even):not([data-empty])]:bg-muted/35', local.class)}/>;
+}
+function TableColumnHeader(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-numeric',
+        'data-part',
+        'data-scope',
+        'data-slot',
+        'numeric'
+    ]);
+    return <ark.th asChild={local.asChild} {...others} data-scope="table" data-part="column-header" data-numeric={local.numeric || void 0} data-slot="table-column-header" class={cn('relative z-0 px-4 py-3 align-middle font-medium whitespace-nowrap text-muted-foreground group-data-[size=lg]/table:px-5 group-data-[size=lg]/table:py-4 group-data-[size=sm]/table:px-3 group-data-[size=sm]/table:py-2 group-data-[sticky-header]/table:data-[sticky]:z-4 data-[sticky=end]:sticky data-[sticky=end]:end-0 data-[sticky=end]:z-2 data-[sticky=end]:bg-card data-[sticky=start]:sticky data-[sticky=start]:start-0 data-[sticky=start]:z-2 data-[sticky=start]:bg-card group-data-[show-column-border]/table:[&:not(:last-child)]:border-e group-data-[show-column-border]/table:[&:not(:last-child)]:border-border', local.numeric && 'text-end tabular-nums', local.class)}/>;
+}
+function TableCell(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-numeric',
+        'data-part',
+        'data-scope',
+        'data-slot',
+        'numeric'
+    ]);
+    return <ark.td asChild={local.asChild} {...others} data-scope="table" data-part="cell" data-numeric={local.numeric || void 0} data-slot="table-cell" class={cn('relative z-0 px-4 py-3 align-middle group-data-[size=lg]/table:px-5 group-data-[size=lg]/table:py-4 group-data-[size=sm]/table:px-3 group-data-[size=sm]/table:py-2 data-[sticky=end]:sticky data-[sticky=end]:end-0 data-[sticky=end]:z-2 data-[sticky=end]:bg-card data-[sticky=start]:sticky data-[sticky=start]:start-0 data-[sticky=start]:z-2 data-[sticky=start]:bg-card group-data-[show-column-border]/table:[&:not(:last-child)]:border-e group-data-[show-column-border]/table:[&:not(:last-child)]:border-border', local.numeric && 'text-end tabular-nums', local.class)}/>;
+}
+function TableEmpty(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'colSpan',
+        'data-part',
+        'data-scope',
+        'data-slot'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <ark.tr data-scope="table" data-part="row" data-empty data-slot="table-row" class="transition-colors duration-200 ease-in-out group-data-[slot=table-body]/table-body:border-b group-data-[slot=table-body]/table-body:border-border group-data-[slot=table-body]/table-body:last:border-b-0">
+      <ark.td asChild={local.asChild} {...others} data-scope="table" data-part="empty" data-slot="table-empty" colSpan={local.colSpan} class={cn('relative z-0 px-4 py-3 align-middle group-data-[size=lg]/table:px-5 group-data-[size=lg]/table:py-4 group-data-[size=sm]/table:px-3 group-data-[size=sm]/table:py-2 data-[sticky=end]:sticky data-[sticky=end]:end-0 data-[sticky=end]:z-2 data-[sticky=end]:bg-card data-[sticky=start]:sticky data-[sticky=start]:start-0 data-[sticky=start]:z-2 data-[sticky=start]:bg-card group-data-[show-column-border]/table:[&:not(:last-child)]:border-e group-data-[show-column-border]/table:[&:not(:last-child)]:border-border', 'py-6 text-center text-muted-foreground group-data-[size=lg]/table:py-8 group-data-[size=sm]/table:py-4', local.class)}>
+        {resolvedChildren() ?? 'No results.'}
+      </ark.td>
+    </ark.tr>;
+}
+const Table = Object.assign(TableRoot, {
+    Root: TableRoot,
+    ScrollArea: TableScrollArea,
+    Caption: TableCaption,
+    ColumnGroup: TableColumnGroup,
+    Column: TableColumn,
+    Header: TableHeader,
+    Body: TableBody,
+    Footer: TableFooter,
+    Row: TableRow,
+    ColumnHeader: TableColumnHeader,
+    Cell: TableCell,
+    Empty: TableEmpty
+});
+export { Table };

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

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

package/dist/components/table/index.js

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

package/dist/components/table/index.jsx

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

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,25 @@
+import { Tabs as TabsPrimitive, useTabs, useTabsContext } from '@ark-ui/solid/tabs';
+import type { ComponentProps } from 'solid-js';
+type TabsVariant = 'default' | 'line';
+declare function TabsRoot(props: ComponentProps<typeof TabsPrimitive.Root> & {
+    variant?: TabsVariant;
+}): import("solid-js").JSX.Element;
+declare function TabsRootProvider(props: ComponentProps<typeof TabsPrimitive.RootProvider> & {
+    variant?: TabsVariant;
+}): import("solid-js").JSX.Element;
+declare function TabsList(props: ComponentProps<typeof TabsPrimitive.List>): import("solid-js").JSX.Element;
+declare function TabsTrigger(props: ComponentProps<typeof TabsPrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function TabsIndicator(props: ComponentProps<typeof TabsPrimitive.Indicator>): import("solid-js").JSX.Element;
+declare function TabsContent(props: ComponentProps<typeof TabsPrimitive.Content>): import("solid-js").JSX.Element;
+type TabsComponent = typeof TabsRoot & {
+    Root: typeof TabsRoot;
+    RootProvider: typeof TabsRootProvider;
+    Context: typeof TabsPrimitive.Context;
+    List: typeof TabsList;
+    Trigger: typeof TabsTrigger;
+    Indicator: typeof TabsIndicator;
+    Content: typeof TabsContent;
+    useTabs: typeof useTabs;
+};
+declare const Tabs: TabsComponent;
+export { Tabs, useTabs, useTabsContext };

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,98 @@
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { Tabs, useTabs, useTabsContext } from "@ark-ui/solid/tabs";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+function TabsRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'orientation',
+        'variant'
+    ]);
+    return createComponent(Tabs.Root, mergeProps({
+        "data-slot": "tabs-root",
+        get ["data-variant"] () {
+            return memo(()=>'vertical' === local.orientation)() ? 'default' : local.variant ?? 'default';
+        },
+        get ["class"] () {
+            return cn('group/tabs box-border flex w-full min-w-0 flex-col gap-3 text-foreground data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class);
+        },
+        get orientation () {
+            return local.orientation;
+        }
+    }, others));
+}
+function TabsRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'value',
+        'variant'
+    ]);
+    const orientation = ()=>local.value().getRootProps()['data-orientation'];
+    return createComponent(Tabs.RootProvider, mergeProps({
+        "data-slot": "tabs-root-provider",
+        get ["data-variant"] () {
+            return memo(()=>'vertical' === orientation())() ? 'default' : local.variant ?? 'default';
+        },
+        get ["class"] () {
+            return cn('group/tabs box-border flex w-full min-w-0 flex-col gap-3 text-foreground data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class);
+        },
+        get value () {
+            return local.value;
+        }
+    }, others));
+}
+function TabsList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Tabs.List, mergeProps({
+        "data-slot": "tabs-list",
+        get ["class"] () {
+            return cn('relative z-0 inline-flex w-fit max-w-full items-stretch gap-1 rounded-lg border border-border bg-muted p-1 group-data-[orientation=horizontal]/tabs:overflow-x-auto group-data-[orientation=vertical]/tabs:w-48 group-data-[orientation=vertical]/tabs:min-w-48 group-data-[orientation=vertical]/tabs:flex-col group-data-[variant=line]/tabs:w-full group-data-[variant=line]/tabs:rounded-none group-data-[variant=line]/tabs:border-x-0 group-data-[variant=line]/tabs:border-t-0 group-data-[variant=line]/tabs:bg-transparent group-data-[variant=line]/tabs:px-0 group-data-[orientation=vertical]/tabs:max-[30rem]:w-2/5 group-data-[orientation=vertical]/tabs:max-[30rem]:min-w-0', local.class);
+        }
+    }, others));
+}
+function TabsTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Tabs.Trigger, mergeProps({
+        "data-slot": "tabs-trigger",
+        get ["class"] () {
+            return cn("relative z-1 inline-flex h-8 cursor-pointer items-center justify-center gap-2 rounded-md border-0 bg-transparent px-2.5 text-sm leading-5 font-medium whitespace-nowrap text-muted-foreground no-underline outline-0 transition-[color,opacity] duration-200 ease-in-out select-none focus-visible:before:pointer-events-none focus-visible:before:absolute focus-visible:before:inset-0 focus-visible:before:rounded-[inherit] focus-visible:before:outline-1 focus-visible:before:outline-ring focus-visible:before:content-[''] disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-selected:text-foreground motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [@media(hover:hover)]:hover:text-foreground", local.class);
+        }
+    }, others));
+}
+function TabsIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Tabs.Indicator, mergeProps({
+        "data-slot": "tabs-indicator",
+        get ["class"] () {
+            return cn('pointer-events-none absolute top-1/2 left-[var(--left,0)] z-0 h-8 w-[var(--width,0)] -translate-y-1/2 rounded-md bg-background shadow-sm transition-[var(--transition-property,translate)] duration-200 ease-in-out group-data-[orientation=vertical]/tabs:top-[var(--top,0)] group-data-[orientation=vertical]/tabs:left-1/2 group-data-[orientation=vertical]/tabs:h-[var(--height,0)] group-data-[orientation=vertical]/tabs:w-[calc(100%-0.5rem)] group-data-[orientation=vertical]/tabs:-translate-x-1/2 group-data-[orientation=vertical]/tabs:translate-y-0 group-data-[variant=line]/tabs:top-auto group-data-[variant=line]/tabs:bottom-0 group-data-[variant=line]/tabs:h-0.5 group-data-[variant=line]/tabs:[translate:none] group-data-[variant=line]/tabs:rounded-full group-data-[variant=line]/tabs:bg-foreground group-data-[variant=line]/tabs:shadow-none motion-reduce:transition-none', local.class);
+        }
+    }, others));
+}
+function TabsContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Tabs.Content, mergeProps({
+        "data-slot": "tabs-content",
+        get ["class"] () {
+            return cn("box-border min-w-0 flex-1 rounded-lg border border-border bg-background p-4 text-sm leading-5 text-foreground outline-0 focus-visible:rounded-[inherit] focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring [&[hidden]:not([hidden='until-found'])]:hidden", local.class);
+        }
+    }, others));
+}
+const Tabs_Tabs = Object.assign(TabsRoot, {
+    Root: TabsRoot,
+    RootProvider: TabsRootProvider,
+    Context: Tabs.Context,
+    List: TabsList,
+    Trigger: TabsTrigger,
+    Indicator: TabsIndicator,
+    Content: TabsContent,
+    useTabs: useTabs
+});
+export { Tabs_Tabs as Tabs, useTabs, useTabsContext };

package/dist/components/tabs/Tabs.jsx

@@ -0,0 +1,55 @@
+import { Tabs, useTabs, useTabsContext } from "@ark-ui/solid/tabs";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+function TabsRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'orientation',
+        'variant'
+    ]);
+    return <Tabs.Root data-slot="tabs-root" data-variant={'vertical' === local.orientation ? 'default' : local.variant ?? 'default'} class={cn('group/tabs box-border flex w-full min-w-0 flex-col gap-3 text-foreground data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class)} orientation={local.orientation} {...others}/>;
+}
+function TabsRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'value',
+        'variant'
+    ]);
+    const orientation = ()=>local.value().getRootProps()['data-orientation'];
+    return <Tabs.RootProvider data-slot="tabs-root-provider" data-variant={'vertical' === orientation() ? 'default' : local.variant ?? 'default'} class={cn('group/tabs box-border flex w-full min-w-0 flex-col gap-3 text-foreground data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class)} value={local.value} {...others}/>;
+}
+function TabsList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Tabs.List data-slot="tabs-list" class={cn('relative z-0 inline-flex w-fit max-w-full items-stretch gap-1 rounded-lg border border-border bg-muted p-1 group-data-[orientation=horizontal]/tabs:overflow-x-auto group-data-[orientation=vertical]/tabs:w-48 group-data-[orientation=vertical]/tabs:min-w-48 group-data-[orientation=vertical]/tabs:flex-col group-data-[variant=line]/tabs:w-full group-data-[variant=line]/tabs:rounded-none group-data-[variant=line]/tabs:border-x-0 group-data-[variant=line]/tabs:border-t-0 group-data-[variant=line]/tabs:bg-transparent group-data-[variant=line]/tabs:px-0 group-data-[orientation=vertical]/tabs:max-[30rem]:w-2/5 group-data-[orientation=vertical]/tabs:max-[30rem]:min-w-0', local.class)} {...others}/>;
+}
+function TabsTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Tabs.Trigger data-slot="tabs-trigger" class={cn("relative z-1 inline-flex h-8 cursor-pointer items-center justify-center gap-2 rounded-md border-0 bg-transparent px-2.5 text-sm leading-5 font-medium whitespace-nowrap text-muted-foreground no-underline outline-0 transition-[color,opacity] duration-200 ease-in-out select-none focus-visible:before:pointer-events-none focus-visible:before:absolute focus-visible:before:inset-0 focus-visible:before:rounded-[inherit] focus-visible:before:outline-1 focus-visible:before:outline-ring focus-visible:before:content-[''] disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-selected:text-foreground motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [@media(hover:hover)]:hover:text-foreground", local.class)} {...others}/>;
+}
+function TabsIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Tabs.Indicator data-slot="tabs-indicator" class={cn('pointer-events-none absolute top-1/2 left-[var(--left,0)] z-0 h-8 w-[var(--width,0)] -translate-y-1/2 rounded-md bg-background shadow-sm transition-[var(--transition-property,translate)] duration-200 ease-in-out group-data-[orientation=vertical]/tabs:top-[var(--top,0)] group-data-[orientation=vertical]/tabs:left-1/2 group-data-[orientation=vertical]/tabs:h-[var(--height,0)] group-data-[orientation=vertical]/tabs:w-[calc(100%-0.5rem)] group-data-[orientation=vertical]/tabs:-translate-x-1/2 group-data-[orientation=vertical]/tabs:translate-y-0 group-data-[variant=line]/tabs:top-auto group-data-[variant=line]/tabs:bottom-0 group-data-[variant=line]/tabs:h-0.5 group-data-[variant=line]/tabs:[translate:none] group-data-[variant=line]/tabs:rounded-full group-data-[variant=line]/tabs:bg-foreground group-data-[variant=line]/tabs:shadow-none motion-reduce:transition-none', local.class)} {...others}/>;
+}
+function TabsContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Tabs.Content data-slot="tabs-content" class={cn("box-border min-w-0 flex-1 rounded-lg border border-border bg-background p-4 text-sm leading-5 text-foreground outline-0 focus-visible:rounded-[inherit] focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring [&[hidden]:not([hidden='until-found'])]:hidden", local.class)} {...others}/>;
+}
+const Tabs_Tabs = Object.assign(TabsRoot, {
+    Root: TabsRoot,
+    RootProvider: TabsRootProvider,
+    Context: Tabs.Context,
+    List: TabsList,
+    Trigger: TabsTrigger,
+    Indicator: TabsIndicator,
+    Content: TabsContent,
+    useTabs: useTabs
+});
+export { Tabs_Tabs as Tabs, useTabs, useTabsContext };

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

@@ -0,0 +1 @@
+export { Tabs, useTabs, useTabsContext } from './Tabs.js';

package/dist/components/tabs/index.js

@@ -0,0 +1 @@
+export { Tabs, useTabs, useTabsContext } from "./Tabs.js";

package/dist/components/tabs/index.jsx

@@ -0,0 +1 @@
+export { Tabs, useTabs, useTabsContext } from "./Tabs.jsx";

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

@@ -0,0 +1,24 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+type TagVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+type TagSize = 'sm' | 'md';
+type TagRootProps = HTMLArkProps<'span'> & {
+    variant?: TagVariant;
+    size?: TagSize;
+};
+type TagLabelProps = HTMLArkProps<'span'>;
+type TagStartElementProps = HTMLArkProps<'span'>;
+type TagEndElementProps = HTMLArkProps<'span'>;
+type TagCloseTriggerProps = HTMLArkProps<'button'>;
+declare function TagRoot(props: TagRootProps): import("solid-js").JSX.Element;
+declare function TagLabel(props: TagLabelProps): import("solid-js").JSX.Element;
+declare function TagStartElement(props: TagStartElementProps): import("solid-js").JSX.Element;
+declare function TagEndElement(props: TagEndElementProps): import("solid-js").JSX.Element;
+declare function TagCloseTrigger(props: TagCloseTriggerProps): import("solid-js").JSX.Element;
+declare const Tag: typeof TagRoot & {
+    Root: typeof TagRoot;
+    Label: typeof TagLabel;
+    StartElement: typeof TagStartElement;
+    EndElement: typeof TagEndElement;
+    CloseTrigger: typeof TagCloseTrigger;
+};
+export { Tag };

package/dist/components/tag/Tag.js

@@ -0,0 +1,147 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { CloseButton } from "../close-button/index.js";
+const tagVariants = cva('inline-flex min-h-control-xs w-fit max-w-full min-w-0 items-center gap-1.5 rounded-full border px-2 py-0.5 align-middle font-medium text-xs whitespace-nowrap transition-colors duration-200 ease-in-out motion-reduce:transition-none [&>svg]:pointer-events-none [&>svg]:size-3 [&>svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: 'border-transparent bg-primary text-primary-foreground',
+            secondary: 'border-transparent bg-secondary text-secondary-foreground',
+            outline: 'border-border bg-transparent text-foreground',
+            ghost: 'border-transparent bg-transparent text-foreground',
+            destructive: 'border-transparent bg-destructive text-destructive-foreground'
+        },
+        size: {
+            sm: 'min-h-5 gap-1 px-1.5 py-0',
+            md: ''
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md'
+    }
+});
+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 cn(tagVariants({
+                size: local.size,
+                variant: local.variant
+            }), 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 cn('min-w-0 overflow-hidden text-ellipsis', 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 cn('inline-flex min-w-0 shrink-0 items-center justify-center [&>svg]:pointer-events-none [&>svg]:size-3 [&>svg]:shrink-0', 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 cn('inline-flex min-w-0 shrink-0 items-center justify-center [&>svg]:pointer-events-none [&>svg]:size-3 [&>svg]:shrink-0', 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 : 'Remove tag');
+        },
+        get ["aria-labelledby"] () {
+            return local['aria-labelledby'];
+        },
+        get ["class"] () {
+            return cn('size-4 rounded-full bg-transparent p-0 text-inherit focus-visible:outline-1 focus-visible:outline-offset-0 [&>svg]:size-2.5 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-current/10 [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-inherit', 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,78 @@
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+const tagVariants = cva('inline-flex min-h-control-xs w-fit max-w-full min-w-0 items-center gap-1.5 rounded-full border px-2 py-0.5 align-middle font-medium text-xs whitespace-nowrap transition-colors duration-200 ease-in-out motion-reduce:transition-none [&>svg]:pointer-events-none [&>svg]:size-3 [&>svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: 'border-transparent bg-primary text-primary-foreground',
+            secondary: 'border-transparent bg-secondary text-secondary-foreground',
+            outline: 'border-border bg-transparent text-foreground',
+            ghost: 'border-transparent bg-transparent text-foreground',
+            destructive: 'border-transparent bg-destructive text-destructive-foreground'
+        },
+        size: {
+            sm: 'min-h-5 gap-1 px-1.5 py-0',
+            md: ''
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md'
+    }
+});
+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={cn(tagVariants({
+        size: local.size,
+        variant: local.variant
+    }), 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={cn('min-w-0 overflow-hidden text-ellipsis', 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={cn('inline-flex min-w-0 shrink-0 items-center justify-center [&>svg]:pointer-events-none [&>svg]:size-3 [&>svg]:shrink-0', 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={cn('inline-flex min-w-0 shrink-0 items-center justify-center [&>svg]:pointer-events-none [&>svg]:size-3 [&>svg]:shrink-0', 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'] ? 'Remove tag' : void 0)} aria-labelledby={local['aria-labelledby']} class={cn('size-4 rounded-full bg-transparent p-0 text-inherit focus-visible:outline-1 focus-visible:outline-offset-0 [&>svg]:size-2.5 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-current/10 [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-inherit', 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/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";