@moduix/solid-tailwind 1.0.0

package/dist/components/list/List.d.ts

@@ -0,0 +1,36 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+type ListMarker = 'disc' | 'decimal' | 'none';
+type ListGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type ListSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ListTone = 'default' | 'muted' | 'subtle' | 'primary' | 'destructive';
+type ListBaseProps = {
+    marker?: ListMarker;
+    gap?: ListGap;
+    size?: ListSize;
+    tone?: ListTone;
+};
+type ListDataProps = {
+    'data-scope'?: string;
+    'data-part'?: string;
+    'data-slot'?: string;
+};
+type ListRootProps = (HTMLArkProps<'ul'> & ListBaseProps & ListDataProps & {
+    as?: 'ul';
+    'data-gap'?: string;
+    'data-marker'?: string;
+    'data-size'?: string;
+    'data-tone'?: string;
+}) | (HTMLArkProps<'ol'> & ListBaseProps & ListDataProps & {
+    as: 'ol';
+    'data-gap'?: string;
+    'data-marker'?: string;
+    'data-size'?: string;
+    'data-tone'?: string;
+});
+declare function ListRoot(props: ListRootProps): import("solid-js").JSX.Element;
+declare function ListItem(props: HTMLArkProps<'li'> & ListDataProps): import("solid-js").JSX.Element;
+declare const List: typeof ListRoot & {
+    Root: typeof ListRoot;
+    Item: typeof ListItem;
+};
+export { List };

package/dist/components/list/List.js

@@ -0,0 +1,201 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { Show, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+const listVariants = cva('flex flex-col font-regular tracking-normal list-outside break-words', {
+    variants: {
+        as: {
+            ul: null,
+            ol: null
+        },
+        gap: {
+            xs: 'gap-space-xs',
+            sm: 'gap-space-sm',
+            md: 'gap-space-md',
+            lg: 'gap-space-lg',
+            xl: 'gap-space-xl',
+            '2xl': 'gap-space-2xl'
+        },
+        marker: {
+            auto: null,
+            disc: 'list-disc ps-5',
+            decimal: 'list-decimal ps-5',
+            none: 'list-none'
+        },
+        size: {
+            xs: 'text-xs',
+            sm: 'text-sm',
+            md: 'text-md',
+            lg: 'text-lg',
+            xl: 'text-xl'
+        },
+        tone: {
+            default: 'text-foreground',
+            muted: 'text-muted-foreground',
+            subtle: 'text-secondary-foreground',
+            primary: 'text-primary',
+            destructive: 'text-destructive'
+        }
+    },
+    compoundVariants: [
+        {
+            as: 'ul',
+            marker: 'auto',
+            class: 'list-disc ps-5'
+        },
+        {
+            as: 'ol',
+            marker: 'auto',
+            class: 'list-[revert] ps-5'
+        }
+    ],
+    defaultVariants: {
+        as: 'ul',
+        gap: 'sm',
+        marker: 'auto',
+        size: 'md',
+        tone: 'default'
+    }
+});
+function ListRoot(props) {
+    return createComponent(Show, {
+        get when () {
+            return 'ol' === props.as;
+        },
+        get fallback () {
+            return createComponent(UnorderedListRoot, props);
+        },
+        get children () {
+            return createComponent(OrderedListRoot, props);
+        }
+    });
+}
+function OrderedListRoot(props) {
+    const [local, others] = splitProps(props, [
+        'as',
+        'asChild',
+        'class',
+        'gap',
+        'marker',
+        'role',
+        'size',
+        'tone',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'data-gap',
+        'data-marker',
+        'data-size',
+        'data-tone'
+    ]);
+    const marker = local.marker ?? 'auto';
+    return createComponent(ark.ol, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        get role () {
+            return local.role ?? ('none' === marker ? 'list' : void 0);
+        },
+        "data-scope": "list",
+        "data-part": "root",
+        "data-slot": "list-root",
+        get ["data-gap"] () {
+            return local.gap ?? 'sm';
+        },
+        "data-marker": marker,
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        get ["data-tone"] () {
+            return local.tone ?? 'default';
+        },
+        get ["class"] () {
+            return cn(listVariants({
+                as: 'ol',
+                gap: local.gap ?? 'sm',
+                marker,
+                size: local.size ?? 'md',
+                tone: local.tone ?? 'default'
+            }), local.class);
+        }
+    }));
+}
+function UnorderedListRoot(props) {
+    const [local, others] = splitProps(props, [
+        'as',
+        'asChild',
+        'class',
+        'gap',
+        'marker',
+        'role',
+        'size',
+        'tone',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'data-gap',
+        'data-marker',
+        'data-size',
+        'data-tone'
+    ]);
+    const marker = local.marker ?? 'auto';
+    return createComponent(ark.ul, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        get role () {
+            return local.role ?? ('none' === marker ? 'list' : void 0);
+        },
+        "data-scope": "list",
+        "data-part": "root",
+        "data-slot": "list-root",
+        get ["data-gap"] () {
+            return local.gap ?? 'sm';
+        },
+        "data-marker": marker,
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        get ["data-tone"] () {
+            return local.tone ?? 'default';
+        },
+        get ["class"] () {
+            return cn(listVariants({
+                as: 'ul',
+                gap: local.gap ?? 'sm',
+                marker,
+                size: local.size ?? 'md',
+                tone: local.tone ?? 'default'
+            }), local.class);
+        }
+    }));
+}
+function ListItem(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot'
+    ]);
+    return createComponent(ark.li, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "list",
+        "data-part": "item",
+        "data-slot": "list-item",
+        get ["class"] () {
+            return local.class;
+        }
+    }));
+}
+const List = Object.assign(ListRoot, {
+    Root: ListRoot,
+    Item: ListItem
+});
+export { List };

package/dist/components/list/List.jsx

@@ -0,0 +1,133 @@
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { Show, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+const listVariants = cva('flex flex-col font-regular tracking-normal list-outside break-words', {
+    variants: {
+        as: {
+            ul: null,
+            ol: null
+        },
+        gap: {
+            xs: 'gap-space-xs',
+            sm: 'gap-space-sm',
+            md: 'gap-space-md',
+            lg: 'gap-space-lg',
+            xl: 'gap-space-xl',
+            '2xl': 'gap-space-2xl'
+        },
+        marker: {
+            auto: null,
+            disc: 'list-disc ps-5',
+            decimal: 'list-decimal ps-5',
+            none: 'list-none'
+        },
+        size: {
+            xs: 'text-xs',
+            sm: 'text-sm',
+            md: 'text-md',
+            lg: 'text-lg',
+            xl: 'text-xl'
+        },
+        tone: {
+            default: 'text-foreground',
+            muted: 'text-muted-foreground',
+            subtle: 'text-secondary-foreground',
+            primary: 'text-primary',
+            destructive: 'text-destructive'
+        }
+    },
+    compoundVariants: [
+        {
+            as: 'ul',
+            marker: 'auto',
+            class: 'list-disc ps-5'
+        },
+        {
+            as: 'ol',
+            marker: 'auto',
+            class: 'list-[revert] ps-5'
+        }
+    ],
+    defaultVariants: {
+        as: 'ul',
+        gap: 'sm',
+        marker: 'auto',
+        size: 'md',
+        tone: 'default'
+    }
+});
+function ListRoot(props) {
+    return <Show when={'ol' === props.as} fallback={<UnorderedListRoot {...props}/>}>
+      <OrderedListRoot {...props}/>
+    </Show>;
+}
+function OrderedListRoot(props) {
+    const [local, others] = splitProps(props, [
+        'as',
+        'asChild',
+        'class',
+        'gap',
+        'marker',
+        'role',
+        'size',
+        'tone',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'data-gap',
+        'data-marker',
+        'data-size',
+        'data-tone'
+    ]);
+    const marker = local.marker ?? 'auto';
+    return <ark.ol asChild={local.asChild} {...others} role={local.role ?? ('none' === marker ? 'list' : void 0)} data-scope="list" data-part="root" data-slot="list-root" data-gap={local.gap ?? 'sm'} data-marker={marker} data-size={local.size ?? 'md'} data-tone={local.tone ?? 'default'} class={cn(listVariants({
+        as: 'ol',
+        gap: local.gap ?? 'sm',
+        marker,
+        size: local.size ?? 'md',
+        tone: local.tone ?? 'default'
+    }), local.class)}/>;
+}
+function UnorderedListRoot(props) {
+    const [local, others] = splitProps(props, [
+        'as',
+        'asChild',
+        'class',
+        'gap',
+        'marker',
+        'role',
+        'size',
+        'tone',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'data-gap',
+        'data-marker',
+        'data-size',
+        'data-tone'
+    ]);
+    const marker = local.marker ?? 'auto';
+    return <ark.ul asChild={local.asChild} {...others} role={local.role ?? ('none' === marker ? 'list' : void 0)} data-scope="list" data-part="root" data-slot="list-root" data-gap={local.gap ?? 'sm'} data-marker={marker} data-size={local.size ?? 'md'} data-tone={local.tone ?? 'default'} class={cn(listVariants({
+        as: 'ul',
+        gap: local.gap ?? 'sm',
+        marker,
+        size: local.size ?? 'md',
+        tone: local.tone ?? 'default'
+    }), local.class)}/>;
+}
+function ListItem(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot'
+    ]);
+    return <ark.li asChild={local.asChild} {...others} data-scope="list" data-part="item" data-slot="list-item" class={local.class}/>;
+}
+const List = Object.assign(ListRoot, {
+    Root: ListRoot,
+    Item: ListItem
+});
+export { List };

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

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

package/dist/components/list/index.js

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

package/dist/components/list/index.jsx

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

package/dist/components/listbox/Listbox.d.ts

@@ -0,0 +1,46 @@
+import { type HTMLArkProps } from '@ark-ui/solid/factory';
+import { Listbox as ListboxPrimitive, type ListboxRootComponent, type ListboxRootProviderComponent, useListbox, useListboxContext, useListboxItemContext } from '@ark-ui/solid/listbox';
+import type { ComponentProps } from 'solid-js';
+declare const ListboxRoot: ListboxRootComponent;
+declare const ListboxRootProvider: ListboxRootProviderComponent;
+declare function ListboxLabel(props: ComponentProps<typeof ListboxPrimitive.Label>): import("solid-js").JSX.Element;
+declare function ListboxInput(props: ComponentProps<typeof ListboxPrimitive.Input>): import("solid-js").JSX.Element;
+declare function ListboxFilter(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
+declare function ListboxClearTrigger(props: HTMLArkProps<'button'>): import("solid-js").JSX.Element;
+declare function ListboxContent(props: ComponentProps<typeof ListboxPrimitive.Content>): import("solid-js").JSX.Element;
+declare function ListboxEmpty(props: ComponentProps<typeof ListboxPrimitive.Empty>): import("solid-js").JSX.Element;
+declare function ListboxItemGroup(props: ComponentProps<typeof ListboxPrimitive.ItemGroup>): import("solid-js").JSX.Element;
+declare function ListboxItemGroupLabel(props: ComponentProps<typeof ListboxPrimitive.ItemGroupLabel>): import("solid-js").JSX.Element;
+declare function ListboxItem(props: ComponentProps<typeof ListboxPrimitive.Item>): import("solid-js").JSX.Element;
+declare function ListboxItemText(props: ComponentProps<typeof ListboxPrimitive.ItemText>): import("solid-js").JSX.Element;
+declare function ListboxItemIndicator(props: ComponentProps<typeof ListboxPrimitive.ItemIndicator>): import("solid-js").JSX.Element;
+declare function ListboxValueText(props: ComponentProps<typeof ListboxPrimitive.ValueText>): import("solid-js").JSX.Element;
+declare function ListboxItemTextContent(props: HTMLArkProps<'span'>): import("solid-js").JSX.Element;
+declare function ListboxItemTextIcon(props: HTMLArkProps<'span'>): import("solid-js").JSX.Element;
+declare function ListboxItemTextLabel(props: HTMLArkProps<'span'>): import("solid-js").JSX.Element;
+type ListboxComponent = ListboxRootComponent & {
+    Root: typeof ListboxRoot;
+    RootProvider: typeof ListboxRootProvider;
+    Label: typeof ListboxLabel;
+    Input: typeof ListboxInput;
+    Filter: typeof ListboxFilter;
+    ClearTrigger: typeof ListboxClearTrigger;
+    Content: typeof ListboxContent;
+    Empty: typeof ListboxEmpty;
+    ItemGroup: typeof ListboxItemGroup;
+    ItemGroupLabel: typeof ListboxItemGroupLabel;
+    Item: typeof ListboxItem;
+    ItemText: typeof ListboxItemText;
+    ItemIndicator: typeof ListboxItemIndicator;
+    ValueText: typeof ListboxValueText;
+    Context: typeof ListboxPrimitive.Context;
+    ItemContext: typeof ListboxPrimitive.ItemContext;
+    ItemTextContent: typeof ListboxItemTextContent;
+    ItemTextIcon: typeof ListboxItemTextIcon;
+    ItemTextLabel: typeof ListboxItemTextLabel;
+    useListbox: typeof useListbox;
+    useListboxContext: typeof useListboxContext;
+    useListboxItemContext: typeof useListboxItemContext;
+};
+declare const Listbox: ListboxComponent;
+export { Listbox, useListbox, useListboxContext, useListboxItemContext };

package/dist/components/listbox/Listbox.js

@@ -0,0 +1,249 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { Listbox, useListbox, useListboxContext, useListboxItemContext } from "@ark-ui/solid/listbox";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { CheckIcon, SearchIcon } from "../../internal/icons/ui/Icons.js";
+import { CloseButton } from "../close-button/index.js";
+var _tmpl$ = /*#__PURE__*/ template("<div data-slot=listbox-filter>");
+const Listbox_ListboxRoot = function(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Listbox.Root, mergeProps({
+        "data-slot": "listbox-root",
+        get ["class"] () {
+            return cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-3 text-foreground data-disabled:opacity-50', local.class);
+        }
+    }, others));
+};
+const Listbox_ListboxRootProvider = function(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Listbox.RootProvider, mergeProps({
+        "data-slot": "listbox-root-provider",
+        get ["class"] () {
+            return cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-3 text-foreground data-disabled:opacity-50', local.class);
+        }
+    }, others));
+};
+function ListboxLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Listbox.Label, mergeProps({
+        "data-slot": "listbox-label",
+        get ["class"] () {
+            return cn('text-sm leading-5 font-medium text-foreground select-none', local.class);
+        }
+    }, others));
+}
+function ListboxInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Listbox.Input, mergeProps({
+        "data-slot": "listbox-input",
+        get ["class"] () {
+            return cn('m-0 box-border min-h-control-md w-full rounded-md border border-border bg-background px-3 py-1 text-md leading-6 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out group-has-[[data-slot=listbox-filter-icon]]/listbox-filter:ps-9 group-has-[[data-slot=listbox-filter-icon]]/listbox-filter:pe-10 group-has-[+_[data-slot=listbox-content]]/listbox-filter:rounded-b-none group-has-[+_[data-slot=listbox-content]]/listbox-filter:border-b-0 placeholder:text-muted-foreground focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none', local.class);
+        }
+    }, others));
+}
+function ListboxFilter(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps({
+            get ["class"] () {
+                return cn('group/listbox-filter peer/listbox-filter relative box-border w-full', local.class);
+            }
+        }, others), false, true);
+        insert(_el$, createComponent(SearchIcon, {
+            "data-slot": "listbox-filter-icon",
+            class: "pointer-events-none absolute start-3 top-1/2 z-1 size-4 -translate-y-1/2 text-muted-foreground"
+        }), null);
+        insert(_el$, ()=>local.children, null);
+        return _el$;
+    })();
+}
+function ListboxClearTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'children',
+        'class',
+        'type'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(CloseButton.Root, mergeProps({
+        "data-slot": "listbox-clear-trigger",
+        get ["class"] () {
+            return cn('absolute end-3 top-1/2 size-control-xs -translate-y-1/2 rounded-sm bg-transparent text-muted-foreground [&>svg]:size-4 [@media(hover:hover)]:hover:bg-muted [@media(hover:hover)]:hover:text-foreground', local.class);
+        },
+        get type () {
+            return local.type ?? 'button';
+        },
+        get ["aria-label"] () {
+            return local['aria-label'] ?? 'Clear search';
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren();
+        }
+    }));
+}
+function ListboxContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Listbox.Content, mergeProps({
+        "data-slot": "listbox-content",
+        get ["class"] () {
+            return cn('box-border flex max-h-56 min-h-0 scroll-py-1 [scrollbar-gutter:stable] flex-col overflow-x-hidden overflow-y-auto overscroll-contain rounded-md border border-border bg-background py-1 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color] duration-200 ease-in-out peer-data-[slot=listbox-filter]/listbox-filter:-mt-3 peer-data-[slot=listbox-filter]/listbox-filter:rounded-t-none focus-visible:outline-ring data-[layout=grid]:grid data-[layout=grid]:grid-cols-[repeat(var(--column-count),minmax(0,1fr))] data-[layout=grid]:gap-1 data-[layout=grid]:p-2 data-[orientation=horizontal]:not-data-[layout=grid]:max-h-none data-[orientation=horizontal]:not-data-[layout=grid]:flex-row data-[orientation=horizontal]:not-data-[layout=grid]:gap-2 data-[orientation=horizontal]:not-data-[layout=grid]:overflow-x-auto data-[orientation=horizontal]:not-data-[layout=grid]:overflow-y-hidden data-[orientation=horizontal]:not-data-[layout=grid]:px-1 motion-reduce:transition-none', local.class);
+        }
+    }, others));
+}
+function ListboxEmpty(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Listbox.Empty, mergeProps({
+        "data-slot": "listbox-empty",
+        get ["class"] () {
+            return cn('px-3 py-1 text-center text-sm leading-5 text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function ListboxItemGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Listbox.ItemGroup, mergeProps({
+        "data-slot": "listbox-item-group",
+        get ["class"] () {
+            return cn('flex flex-col [&+&]:mt-2', local.class);
+        }
+    }, others));
+}
+function ListboxItemGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Listbox.ItemGroupLabel, mergeProps({
+        "data-slot": "listbox-item-group-label",
+        get ["class"] () {
+            return cn('px-2 py-1 text-xs leading-4 font-normal text-muted-foreground select-none', local.class);
+        }
+    }, others));
+}
+function ListboxItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Listbox.Item, mergeProps({
+        "data-slot": "listbox-item",
+        get ["class"] () {
+            return cn('relative mx-1 box-border grid min-h-control-sm w-[calc(100%-0.5rem)] cursor-pointer grid-cols-[minmax(0,1fr)_1rem] items-center gap-2 rounded-sm bg-transparent px-3 py-1 text-sm leading-5 text-foreground outline-0 transition-[background-color,color] duration-200 ease-in-out select-none data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:text-muted-foreground data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[layout=grid]:mx-0 data-[layout=grid]:w-full data-[layout=grid]:min-w-0 data-[layout=grid]:grid-cols-1 data-[layout=grid]:justify-items-center data-[layout=grid]:text-center data-[layout=grid]:data-selected:bg-muted data-[layout=grid]:data-selected:text-foreground data-[orientation=horizontal]:not-data-[layout=grid]:w-44 data-[orientation=horizontal]:not-data-[layout=grid]:min-w-44 data-[orientation=horizontal]:not-data-[layout=grid]:items-start motion-reduce:transition-none [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-accent-foreground', local.class);
+        }
+    }, others));
+}
+function ListboxItemText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Listbox.ItemText, mergeProps({
+        "data-slot": "listbox-item-text",
+        get ["class"] () {
+            return cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class);
+        }
+    }, others));
+}
+function ListboxItemIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Listbox.ItemIndicator, mergeProps({
+        "data-slot": "listbox-item-indicator",
+        get ["class"] () {
+            return cn('inline-flex size-4 shrink-0 items-center justify-center data-[state=unchecked]:invisible [&>svg]:size-3', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(CheckIcon, {});
+        }
+    }));
+}
+function ListboxValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Listbox.ValueText, mergeProps({
+        "data-slot": "listbox-value-text",
+        get ["class"] () {
+            return cn('text-sm leading-5 text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function ListboxItemTextContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "listbox-item-text-content",
+        get ["class"] () {
+            return cn('inline-flex max-w-full min-w-0 items-center gap-2 align-top', local.class);
+        }
+    }, others));
+}
+function ListboxItemTextIcon(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "listbox-item-text-icon",
+        get ["class"] () {
+            return cn('inline-flex size-4 shrink-0 items-center justify-center', local.class);
+        }
+    }, others));
+}
+function ListboxItemTextLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "listbox-item-text-label",
+        get ["class"] () {
+            return cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class);
+        }
+    }, others));
+}
+const Listbox_Listbox = Object.assign(Listbox_ListboxRoot, {
+    Root: Listbox_ListboxRoot,
+    RootProvider: Listbox_ListboxRootProvider,
+    Label: ListboxLabel,
+    Input: ListboxInput,
+    Filter: ListboxFilter,
+    ClearTrigger: ListboxClearTrigger,
+    Content: ListboxContent,
+    Empty: ListboxEmpty,
+    ItemGroup: ListboxItemGroup,
+    ItemGroupLabel: ListboxItemGroupLabel,
+    Item: ListboxItem,
+    ItemText: ListboxItemText,
+    ItemIndicator: ListboxItemIndicator,
+    ValueText: ListboxValueText,
+    Context: Listbox.Context,
+    ItemContext: Listbox.ItemContext,
+    ItemTextContent: ListboxItemTextContent,
+    ItemTextIcon: ListboxItemTextIcon,
+    ItemTextLabel: ListboxItemTextLabel,
+    useListbox: useListbox,
+    useListboxContext: useListboxContext,
+    useListboxItemContext: useListboxItemContext
+});
+export { Listbox_Listbox as Listbox, useListbox, useListboxContext, useListboxItemContext };