@moduix/solid-tailwind 1.0.0

package/dist/components/select/Select.js

@@ -0,0 +1,395 @@
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { Select, useSelect, useSelectContext, useSelectItemContext } from "@ark-ui/solid/select";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { CheckIcon, ChevronUpDownIcon } from "../../internal/icons/ui/Icons.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import { CloseButton } from "../close-button/index.js";
+const Select_SelectRoot = function(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(Select.Root, mergeProps({
+                get asChild () {
+                    return local.asChild;
+                },
+                "data-slot": "select-root",
+                get ["class"] () {
+                    return cn('flex w-56 max-w-full min-w-0 flex-col gap-1.5 text-foreground', local.class);
+                },
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+};
+const Select_SelectRootProvider = function(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(Select.RootProvider, mergeProps({
+                get asChild () {
+                    return local.asChild;
+                },
+                "data-slot": "select-root-provider",
+                get ["class"] () {
+                    return cn('flex w-56 max-w-full min-w-0 flex-col gap-1.5 text-foreground', local.class);
+                },
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+};
+function SelectLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Select.Label, mergeProps({
+        "data-slot": "select-label",
+        get ["class"] () {
+            return cn('inline-flex items-center text-sm font-medium text-foreground select-none data-disabled:opacity-50', local.class);
+        }
+    }, others));
+}
+function SelectControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Select.Control, mergeProps({
+        "data-slot": "select-control",
+        get ["class"] () {
+            return cn('group/select-control relative flex w-full min-w-0 items-center text-foreground data-disabled:opacity-50', local.class);
+        }
+    }, others));
+}
+function SelectTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Select.Trigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "select-trigger",
+        get ["class"] () {
+            return cn(!local.asChild && 'peer/select-trigger relative inline-flex h-control-md w-full min-w-0 cursor-pointer items-center justify-start rounded-md border border-border bg-background px-3.5 pe-[2.875rem] text-start text-inherit outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out select-none [font:inherit] group-has-[>[data-slot=select-clear-trigger]:not([hidden])]/select-control:pe-[4.25rem] group-data-invalid/select-control:border-destructive group-data-invalid/select-control:outline-destructive focus-visible:border-ring focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default data-placeholder-shown:text-muted-foreground data-[state=open]:border-ring data-[state=open]:outline-ring motion-reduce:transition-none', local.class);
+        }
+    }, others));
+}
+function SelectValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Select.ValueText, mergeProps({
+        "data-slot": "select-value-text",
+        get ["class"] () {
+            return cn('min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap', local.class);
+        }
+    }, others));
+}
+function SelectClearTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    if (local.asChild) return createComponent(Select.ClearTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        get ["aria-label"] () {
+            return local['aria-label'];
+        },
+        get ["aria-labelledby"] () {
+            return local['aria-labelledby'];
+        },
+        "data-slot": "select-clear-trigger",
+        get ["class"] () {
+            return cn('pointer-events-auto absolute inset-y-0 end-[2.125rem] my-auto size-control-xs transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 motion-reduce:transition-none [&>svg]:size-4', local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+    return createComponent(Select.ClearTrigger, mergeProps({
+        asChild: (triggerProps)=>{
+            const resolvedProps = triggerProps();
+            return createComponent(CloseButton.Root, mergeProps(resolvedProps, {
+                get ["aria-label"] () {
+                    return local['aria-label'] ?? (null == local['aria-labelledby'] ? 'Clear selection' : void 0);
+                },
+                get ["aria-labelledby"] () {
+                    return local['aria-labelledby'];
+                },
+                get children () {
+                    return resolvedChildren();
+                }
+            }));
+        },
+        "data-slot": "select-clear-trigger",
+        get ["class"] () {
+            return cn('pointer-events-auto absolute inset-y-0 end-[2.125rem] my-auto size-control-xs transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 motion-reduce:transition-none [&>svg]:size-4', local.class);
+        }
+    }, others));
+}
+function SelectIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Select.Indicator, mergeProps({
+        "data-slot": "select-indicator",
+        get ["class"] () {
+            return cn('pointer-events-none inline-flex size-control-xs shrink-0 items-center justify-center rounded-sm bg-transparent leading-none text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out peer-[:not([disabled]):not([data-disabled]):hover]/select-trigger:bg-muted peer-[:not([disabled]):not([data-disabled]):hover]/select-trigger:text-foreground motion-reduce:transition-none [&>svg]:block [&>svg]:size-4', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(ChevronUpDownIcon, {});
+        }
+    }));
+}
+function SelectField(props) {
+    const [local, others] = splitProps(props, [
+        'clearLabel',
+        'indicator',
+        'placeholder'
+    ]);
+    return createComponent(SelectControl, mergeProps(others, {
+        get children () {
+            return [
+                createComponent(SelectTrigger, {
+                    get children () {
+                        return createComponent(SelectValueText, {
+                            get placeholder () {
+                                return local.placeholder;
+                            }
+                        });
+                    }
+                }),
+                memo(()=>memo(()=>!!local.clearLabel)() && createComponent(SelectClearTrigger, {
+                        get ["aria-label"] () {
+                            return local.clearLabel;
+                        }
+                    })),
+                createComponent(SelectIndicator, {
+                    class: "absolute end-2 top-1/2 -translate-y-1/2",
+                    get children () {
+                        return local.indicator;
+                    }
+                })
+            ];
+        }
+    }));
+}
+function SelectPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Select.Positioner, mergeProps({
+                "data-slot": "select-positioner",
+                get ["class"] () {
+                    return cn('z-[var(--z-index)] outline-0', local.class);
+                }
+            }, others));
+        }
+    });
+}
+function SelectContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Select.Content, mergeProps({
+        "data-slot": "select-content",
+        get ["class"] () {
+            return cn('z-[calc(60+var(--layer-index,0))] flex max-h-[min(24rem,var(--available-height))] max-w-[var(--available-width)] min-w-[var(--reference-width)] origin-[var(--transform-origin)] scroll-py-1 flex-col overflow-auto overscroll-contain rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-lg outline-0 data-[state=closed]:pointer-events-none data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none', local.class);
+        }
+    }, others));
+}
+function SelectList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Select.List, mergeProps({
+        "data-slot": "select-list",
+        get ["class"] () {
+            return cn('flex min-h-0 scroll-py-1 flex-col overflow-y-auto overscroll-contain outline-0', local.class);
+        }
+    }, others));
+}
+function SelectItemGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Select.ItemGroup, mergeProps({
+        "data-slot": "select-item-group",
+        get ["class"] () {
+            return cn('flex flex-col [&+&]:mt-2', local.class);
+        }
+    }, others));
+}
+function SelectItemGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Select.ItemGroupLabel, mergeProps({
+        "data-slot": "select-item-group-label",
+        get ["class"] () {
+            return cn('px-2.5 py-1 text-xs font-normal text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function SelectItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Select.Item, mergeProps({
+        "data-slot": "select-item",
+        get ["class"] () {
+            return cn('relative mx-1 flex min-h-control-sm w-[calc(100%-0.5rem)] cursor-default items-center justify-between gap-2 rounded-sm bg-transparent px-3 py-1 text-sm text-popover-foreground outline-0 select-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground', local.class);
+        }
+    }, others));
+}
+function SelectItemText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Select.ItemText, mergeProps({
+        "data-slot": "select-item-text",
+        get ["class"] () {
+            return cn('min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap', local.class);
+        }
+    }, others));
+}
+function SelectItemIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Select.ItemIndicator, mergeProps({
+        "data-slot": "select-item-indicator",
+        get ["class"] () {
+            return cn('inline-flex size-3.5 shrink-0 items-center justify-center [&>svg]:size-3', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(CheckIcon, {});
+        }
+    }));
+}
+function SelectItemTextContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "select-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 SelectItemTextIcon(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "select-item-text-icon",
+        get ["class"] () {
+            return cn('inline-flex size-4 shrink-0 items-center justify-center', local.class);
+        }
+    }, others));
+}
+function SelectItemTextLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "select-item-text-label",
+        get ["class"] () {
+            return cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class);
+        }
+    }, others));
+}
+const Select_Select = Object.assign(Select_SelectRoot, {
+    Root: Select_SelectRoot,
+    RootProvider: Select_SelectRootProvider,
+    Context: Select.Context,
+    HiddenSelect: Select.HiddenSelect,
+    ItemContext: Select.ItemContext,
+    useSelect: useSelect,
+    useSelectContext: useSelectContext,
+    useSelectItemContext: useSelectItemContext,
+    Label: SelectLabel,
+    Control: SelectControl,
+    Field: SelectField,
+    Trigger: SelectTrigger,
+    ValueText: SelectValueText,
+    ClearTrigger: SelectClearTrigger,
+    Indicator: SelectIndicator,
+    Positioner: SelectPositioner,
+    Content: SelectContent,
+    List: SelectList,
+    ItemGroup: SelectItemGroup,
+    ItemGroupLabel: SelectItemGroupLabel,
+    Item: SelectItem,
+    ItemText: SelectItemText,
+    ItemIndicator: SelectItemIndicator,
+    ItemTextContent: SelectItemTextContent,
+    ItemTextIcon: SelectItemTextIcon,
+    ItemTextLabel: SelectItemTextLabel
+});
+export { Select_Select as Select, useSelect, useSelectContext, useSelectItemContext };

package/dist/components/select/Select.jsx

@@ -0,0 +1,210 @@
+import { ark } from "@ark-ui/solid/factory";
+import { Select, useSelect, useSelectContext, useSelectItemContext } from "@ark-ui/solid/select";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { CheckIcon, ChevronUpDownIcon } from "../../internal/icons/ui/Icons.jsx";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+const Select_SelectRoot = function(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <Select.Root asChild={local.asChild} data-slot="select-root" class={cn('flex w-56 max-w-full min-w-0 flex-col gap-1.5 text-foreground', local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </Select.Root>
+    </OverlayPortalProvider>;
+};
+const Select_SelectRootProvider = function(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <Select.RootProvider asChild={local.asChild} data-slot="select-root-provider" class={cn('flex w-56 max-w-full min-w-0 flex-col gap-1.5 text-foreground', local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </Select.RootProvider>
+    </OverlayPortalProvider>;
+};
+function SelectLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Select.Label data-slot="select-label" class={cn('inline-flex items-center text-sm font-medium text-foreground select-none data-disabled:opacity-50', local.class)} {...others}/>;
+}
+function SelectControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Select.Control data-slot="select-control" class={cn('group/select-control relative flex w-full min-w-0 items-center text-foreground data-disabled:opacity-50', local.class)} {...others}/>;
+}
+function SelectTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Select.Trigger asChild={local.asChild} data-slot="select-trigger" class={cn(!local.asChild && 'peer/select-trigger relative inline-flex h-control-md w-full min-w-0 cursor-pointer items-center justify-start rounded-md border border-border bg-background px-3.5 pe-[2.875rem] text-start text-inherit outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out select-none [font:inherit] group-has-[>[data-slot=select-clear-trigger]:not([hidden])]/select-control:pe-[4.25rem] group-data-invalid/select-control:border-destructive group-data-invalid/select-control:outline-destructive focus-visible:border-ring focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default data-placeholder-shown:text-muted-foreground data-[state=open]:border-ring data-[state=open]:outline-ring motion-reduce:transition-none', local.class)} {...others}/>;
+}
+function SelectValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Select.ValueText data-slot="select-value-text" class={cn('min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others}/>;
+}
+function SelectClearTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    if (local.asChild) return <Select.ClearTrigger asChild={local.asChild} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} data-slot="select-clear-trigger" class={cn('pointer-events-auto absolute inset-y-0 end-[2.125rem] my-auto size-control-xs transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 motion-reduce:transition-none [&>svg]:size-4', local.class)} {...others}>
+        {local.children}
+      </Select.ClearTrigger>;
+    return <Select.ClearTrigger asChild={(triggerProps)=>{
+        const resolvedProps = triggerProps();
+        return <CloseButton.Root {...resolvedProps} aria-label={local['aria-label'] ?? (null == local['aria-labelledby'] ? 'Clear selection' : void 0)} aria-labelledby={local['aria-labelledby']}>
+            {resolvedChildren()}
+          </CloseButton.Root>;
+    }} data-slot="select-clear-trigger" class={cn('pointer-events-auto absolute inset-y-0 end-[2.125rem] my-auto size-control-xs transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 motion-reduce:transition-none [&>svg]:size-4', local.class)} {...others}/>;
+}
+function SelectIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Select.Indicator data-slot="select-indicator" class={cn('pointer-events-none inline-flex size-control-xs shrink-0 items-center justify-center rounded-sm bg-transparent leading-none text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out peer-[:not([disabled]):not([data-disabled]):hover]/select-trigger:bg-muted peer-[:not([disabled]):not([data-disabled]):hover]/select-trigger:text-foreground motion-reduce:transition-none [&>svg]:block [&>svg]:size-4', local.class)} {...others}>
+      {resolvedChildren() ?? <ChevronUpDownIcon/>}
+    </Select.Indicator>;
+}
+function SelectField(props) {
+    const [local, others] = splitProps(props, [
+        'clearLabel',
+        'indicator',
+        'placeholder'
+    ]);
+    return <SelectControl {...others}>
+      <SelectTrigger>
+        <SelectValueText placeholder={local.placeholder}/>
+      </SelectTrigger>
+      {local.clearLabel && <SelectClearTrigger aria-label={local.clearLabel}/>}
+      <SelectIndicator class="absolute end-2 top-1/2 -translate-y-1/2">
+        {local.indicator}
+      </SelectIndicator>
+    </SelectControl>;
+}
+function SelectPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Select.Positioner data-slot="select-positioner" class={cn('z-[var(--z-index)] outline-0', local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function SelectContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Select.Content data-slot="select-content" class={cn('z-[calc(60+var(--layer-index,0))] flex max-h-[min(24rem,var(--available-height))] max-w-[var(--available-width)] min-w-[var(--reference-width)] origin-[var(--transform-origin)] scroll-py-1 flex-col overflow-auto overscroll-contain rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-lg outline-0 data-[state=closed]:pointer-events-none data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none', local.class)} {...others}/>;
+}
+function SelectList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Select.List data-slot="select-list" class={cn('flex min-h-0 scroll-py-1 flex-col overflow-y-auto overscroll-contain outline-0', local.class)} {...others}/>;
+}
+function SelectItemGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Select.ItemGroup data-slot="select-item-group" class={cn('flex flex-col [&+&]:mt-2', local.class)} {...others}/>;
+}
+function SelectItemGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Select.ItemGroupLabel data-slot="select-item-group-label" class={cn('px-2.5 py-1 text-xs font-normal text-muted-foreground', local.class)} {...others}/>;
+}
+function SelectItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Select.Item data-slot="select-item" class={cn('relative mx-1 flex min-h-control-sm w-[calc(100%-0.5rem)] cursor-default items-center justify-between gap-2 rounded-sm bg-transparent px-3 py-1 text-sm text-popover-foreground outline-0 select-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground', local.class)} {...others}/>;
+}
+function SelectItemText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Select.ItemText data-slot="select-item-text" class={cn('min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others}/>;
+}
+function SelectItemIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Select.ItemIndicator data-slot="select-item-indicator" class={cn('inline-flex size-3.5 shrink-0 items-center justify-center [&>svg]:size-3', local.class)} {...others}>
+      {resolvedChildren() ?? <CheckIcon/>}
+    </Select.ItemIndicator>;
+}
+function SelectItemTextContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-slot="select-item-text-content" class={cn('inline-flex max-w-full min-w-0 items-center gap-2 align-top', local.class)} {...others}/>;
+}
+function SelectItemTextIcon(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-slot="select-item-text-icon" class={cn('inline-flex size-4 shrink-0 items-center justify-center', local.class)} {...others}/>;
+}
+function SelectItemTextLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-slot="select-item-text-label" class={cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others}/>;
+}
+const Select_Select = Object.assign(Select_SelectRoot, {
+    Root: Select_SelectRoot,
+    RootProvider: Select_SelectRootProvider,
+    Context: Select.Context,
+    HiddenSelect: Select.HiddenSelect,
+    ItemContext: Select.ItemContext,
+    useSelect: useSelect,
+    useSelectContext: useSelectContext,
+    useSelectItemContext: useSelectItemContext,
+    Label: SelectLabel,
+    Control: SelectControl,
+    Field: SelectField,
+    Trigger: SelectTrigger,
+    ValueText: SelectValueText,
+    ClearTrigger: SelectClearTrigger,
+    Indicator: SelectIndicator,
+    Positioner: SelectPositioner,
+    Content: SelectContent,
+    List: SelectList,
+    ItemGroup: SelectItemGroup,
+    ItemGroupLabel: SelectItemGroupLabel,
+    Item: SelectItem,
+    ItemText: SelectItemText,
+    ItemIndicator: SelectItemIndicator,
+    ItemTextContent: SelectItemTextContent,
+    ItemTextIcon: SelectItemTextIcon,
+    ItemTextLabel: SelectItemTextLabel
+});
+export { Select_Select as Select, useSelect, useSelectContext, useSelectItemContext };

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

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

package/dist/components/select/index.js

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

package/dist/components/select/index.jsx

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

package/dist/components/separator/Separator.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+type SeparatorRootProps = HTMLArkProps<'span'> & {
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    variant?: 'solid' | 'dashed' | 'dotted';
+    'data-scope'?: string;
+    'data-part'?: string;
+    'data-slot'?: string;
+    'data-orientation'?: string;
+    'data-size'?: string;
+    'data-variant'?: string;
+};
+declare function SeparatorRoot(props: SeparatorRootProps): import("solid-js").JSX.Element;
+declare const Separator: typeof SeparatorRoot & {
+    Root: typeof SeparatorRoot;
+};
+export { Separator };