@moduix/solid 1.0.0

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 { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { CheckIcon, ChevronUpDownIcon } from "../../internal/icons/ui/Icons.jsx";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+import Select_module from "./Select.module.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={clsx(Select_module.root, 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={clsx(Select_module.root, 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={clsx(Select_module.label, local.class)} {...others}/>;
+}
+function SelectControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Select.Control data-slot="select-control" class={clsx(Select_module.control, local.class)} {...others}/>;
+}
+function SelectTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Select.Trigger asChild={local.asChild} data-slot="select-trigger" class={clsx(!local.asChild && Select_module.trigger, local.class)} {...others}/>;
+}
+function SelectValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Select.ValueText data-slot="select-value-text" class={clsx(Select_module.valueText, local.class)} {...others}/>;
+}
+function SelectClearTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const triggerClass = clsx(Select_module.clearTrigger, local.class);
+    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={triggerClass} {...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={triggerClass} {...others}/>;
+}
+function SelectIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Select.Indicator data-slot="select-indicator" class={clsx(Select_module.indicator, 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>{local.indicator}</SelectIndicator>
+    </SelectControl>;
+}
+function SelectPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Select.Positioner data-slot="select-positioner" class={clsx(Select_module.positioner, local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function SelectContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Select.Content data-slot="select-content" class={clsx(Select_module.content, local.class)} {...others}/>;
+}
+function SelectList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Select.List data-slot="select-list" class={clsx(Select_module.list, local.class)} {...others}/>;
+}
+function SelectItemGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Select.ItemGroup data-slot="select-item-group" class={clsx(Select_module.itemGroup, local.class)} {...others}/>;
+}
+function SelectItemGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Select.ItemGroupLabel data-slot="select-item-group-label" class={clsx(Select_module.itemGroupLabel, local.class)} {...others}/>;
+}
+function SelectItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Select.Item data-slot="select-item" class={clsx(Select_module.item, local.class)} {...others}/>;
+}
+function SelectItemText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Select.ItemText data-slot="select-item-text" class={clsx(Select_module.itemText, 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={clsx(Select_module.itemIndicator, 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={clsx(Select_module.itemTextContent, local.class)} {...others}/>;
+}
+function SelectItemTextIcon(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-slot="select-item-text-icon" class={clsx(Select_module.itemTextIcon, local.class)} {...others}/>;
+}
+function SelectItemTextLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-slot="select-item-text-label" class={clsx(Select_module.itemTextLabel, 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.module.js

@@ -0,0 +1,26 @@
+import "./Select_module.css";
+const Select_module = {
+    root: "root-r1QO18",
+    label: "label-WNAZBK",
+    control: "control-QCSm_x",
+    trigger: "trigger-_8XyWR",
+    clearTrigger: "clearTrigger-bA52Dh",
+    valueText: "valueText-ZjlEZ9",
+    itemText: "itemText-yYAdr3",
+    indicator: "indicator-ywAB27",
+    positioner: "positioner-mCDY9D",
+    content: "content-fSDhut",
+    "select-content-open": "select-content-open-BbqYJQ",
+    selectContentOpen: "select-content-open-BbqYJQ",
+    "select-content-closed": "select-content-closed-wG10Nx",
+    selectContentClosed: "select-content-closed-wG10Nx",
+    list: "list-cVXRp6",
+    itemGroup: "itemGroup-rRI1Ej",
+    itemGroupLabel: "itemGroupLabel-IeDuI7",
+    item: "item-p_9W64",
+    itemIndicator: "itemIndicator-ONCmCH",
+    itemTextContent: "itemTextContent-QMS39O",
+    itemTextIcon: "itemTextIcon-gnF6sP",
+    itemTextLabel: "itemTextLabel-pPftyF"
+};
+export default Select_module;

package/dist/components/select/Select.module.jsx

@@ -0,0 +1,26 @@
+import "./Select_module.css";
+const Select_module = {
+    root: "root-r1QO18",
+    label: "label-WNAZBK",
+    control: "control-QCSm_x",
+    trigger: "trigger-_8XyWR",
+    clearTrigger: "clearTrigger-bA52Dh",
+    valueText: "valueText-ZjlEZ9",
+    itemText: "itemText-yYAdr3",
+    indicator: "indicator-ywAB27",
+    positioner: "positioner-mCDY9D",
+    content: "content-fSDhut",
+    "select-content-open": "select-content-open-BbqYJQ",
+    selectContentOpen: "select-content-open-BbqYJQ",
+    "select-content-closed": "select-content-closed-wG10Nx",
+    selectContentClosed: "select-content-closed-wG10Nx",
+    list: "list-cVXRp6",
+    itemGroup: "itemGroup-rRI1Ej",
+    itemGroupLabel: "itemGroupLabel-IeDuI7",
+    item: "item-p_9W64",
+    itemIndicator: "itemIndicator-ONCmCH",
+    itemTextContent: "itemTextContent-QMS39O",
+    itemTextIcon: "itemTextIcon-gnF6sP",
+    itemTextLabel: "itemTextLabel-pPftyF"
+};
+export default Select_module;

package/dist/components/select/Select_module.css

@@ -0,0 +1,362 @@
+@layer moduix.components {
+  @keyframes select-content-open-BbqYJQ {
+    from {
+      opacity: var(--moduix-select-content-closed-opacity, var(--moduix-popup-motion-starting-opacity, 0));
+      translate: var(--moduix-popup-motion-starting-translate-x, 0)
+        var(--moduix-popup-motion-starting-translate-y, 0);
+      transform: scale(var(--moduix-select-content-closed-scale, var(--moduix-popup-motion-starting-scale, var(--moduix-scale-popup))));
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes select-content-closed-wG10Nx {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: var(--moduix-select-content-closed-opacity, var(--moduix-popup-motion-ending-opacity, 0));
+      translate: var(--moduix-popup-motion-ending-translate-x, 0)
+        var(--moduix-popup-motion-ending-translate-y, 0);
+      transform: scale(var(--moduix-select-content-closed-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup))));
+    }
+  }
+
+  .root-r1QO18 {
+    box-sizing: border-box;
+    width: var(--moduix-select-width, 14rem);
+    max-width: var(--moduix-select-max-width, 100%);
+    gap: var(--moduix-select-root-gap, var(--moduix-spacing-1-5));
+    min-width: 0;
+    color: var(--moduix-select-color, var(--moduix-color-foreground));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .label-WNAZBK {
+    color: var(--moduix-select-label-color, var(--moduix-select-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-select-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-select-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-select-label-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
+    user-select: none;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .label-WNAZBK[data-disabled] {
+    opacity: var(--moduix-select-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .control-QCSm_x {
+    width: 100%;
+    min-width: 0;
+    color: var(--moduix-select-color, var(--moduix-color-foreground));
+    align-items: center;
+    display: flex;
+    position: relative;
+  }
+
+  .control-QCSm_x[data-disabled] {
+    opacity: var(--moduix-select-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .trigger-_8XyWR {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    height: var(--moduix-select-control-height, var(--moduix-size-md));
+    border: var(--moduix-select-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-select-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-select-radius, var(--moduix-radius-md));
+    padding-inline: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3-5))
+      calc(var(--moduix-select-action-offset-right, var(--moduix-spacing-2)) +
+          var(--moduix-select-action-size, var(--moduix-size-xs)) +
+          var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3-5)));
+    background-color: var(--moduix-select-bg, var(--moduix-color-background));
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    outline: var(--moduix-select-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--moduix-select-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
+        -1);
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    transition: background-color var(--moduix-select-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-select-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-select-transition, var(--moduix-transition-default));
+    justify-content: flex-start;
+    align-items: center;
+    margin: 0;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .trigger-_8XyWR[data-placeholder-shown] {
+    color: var(--moduix-select-placeholder-color, var(--moduix-color-muted-foreground));
+  }
+
+  .trigger-_8XyWR[data-disabled], .trigger-_8XyWR[disabled] {
+    cursor: default;
+  }
+
+  .trigger-_8XyWR[data-state="open"], .trigger-_8XyWR:focus-visible {
+    border-color: var(--moduix-select-focus-ring-color, var(--moduix-color-ring));
+    outline-color: var(--moduix-select-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  .control-QCSm_x[data-invalid] .trigger-_8XyWR {
+    border-color: var(--moduix-select-invalid-color, var(--moduix-color-destructive));
+    outline-color: var(--moduix-select-invalid-color, var(--moduix-color-destructive));
+  }
+
+  .control-QCSm_x:has(.clearTrigger-bA52Dh:not([hidden])) .trigger-_8XyWR {
+    padding-inline-end: var(--moduix-select-trigger-padding-x-end, 4.25rem);
+  }
+
+  .valueText-ZjlEZ9, .itemText-yYAdr3 {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .indicator-ywAB27 {
+    box-sizing: border-box;
+    width: var(--moduix-select-action-size, var(--moduix-size-xs));
+    height: var(--moduix-select-action-size, var(--moduix-size-xs));
+    border-radius: var(--moduix-select-action-radius, var(--moduix-radius-sm));
+    background: var(--moduix-select-action-bg, transparent);
+    color: var(--moduix-select-icon-color, var(--moduix-color-muted-foreground));
+    transition: background-color var(--moduix-select-transition, var(--moduix-transition-default)),
+      color var(--moduix-select-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-select-transition, var(--moduix-transition-default));
+    border: 0;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    line-height: 0;
+    display: inline-flex;
+  }
+
+  .indicator-ywAB27 > svg {
+    width: var(--moduix-select-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-select-icon-size, var(--moduix-spacing-4));
+    display: block;
+  }
+
+  .indicator-ywAB27[data-disabled], .indicator-ywAB27[disabled] {
+    cursor: default;
+  }
+
+  .indicator-ywAB27 {
+    pointer-events: none;
+  }
+
+  .control-QCSm_x > .indicator-ywAB27 {
+    top: 50%;
+    position: absolute;
+    inset-inline-end: var(--moduix-select-action-offset-right, var(--moduix-spacing-2));
+    transform: translateY(-50%);
+  }
+
+  @media (hover: hover) {
+    .trigger-_8XyWR:not(:is([data-disabled], [disabled])):hover ~ .indicator-ywAB27 {
+      background-color: var(--moduix-select-action-bg-hover, var(--moduix-color-muted));
+      color: var(--moduix-select-action-color-hover, var(--moduix-color-foreground));
+    }
+  }
+
+  .clearTrigger-bA52Dh {
+    --moduix-close-button-size: var(--moduix-select-action-size, var(--moduix-size-xs));
+    --moduix-close-button-icon-size: var(--moduix-select-icon-size, var(--moduix-spacing-4));
+    --moduix-close-button-radius: var(--moduix-select-action-radius, var(--moduix-radius-sm));
+    --moduix-close-button-bg: var(--moduix-select-action-bg, transparent);
+    --moduix-close-button-bg-hover: var(--moduix-select-action-bg-hover, var(--moduix-color-muted));
+    --moduix-close-button-color: var(--moduix-select-icon-color, var(--moduix-color-muted-foreground));
+    --moduix-close-button-color-hover: var(--moduix-select-action-color-hover, var(--moduix-color-foreground));
+    pointer-events: auto;
+  }
+
+  .control-QCSm_x > .clearTrigger-bA52Dh {
+    top: 50%;
+    position: absolute;
+    inset-inline-end: calc(var(--moduix-select-action-offset-right, var(--moduix-spacing-2)) +
+        var(--moduix-select-action-size, var(--moduix-size-xs)) +
+        var(--moduix-select-action-gap, var(--moduix-spacing-0-5)));
+    transform: translateY(-50%);
+  }
+
+  .positioner-mCDY9D {
+    z-index: var(--z-index);
+    outline: 0;
+  }
+
+  .content-fSDhut {
+    box-sizing: border-box;
+    z-index: calc(var(--moduix-z-popup) + var(--layer-index, 0));
+    min-width: var(--reference-width);
+    max-width: var(--available-width);
+    max-height: min(var(--moduix-select-content-max-height, 24rem), var(--available-height));
+    border: var(--moduix-select-content-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-select-content-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-select-radius, var(--moduix-radius-md));
+    padding-block: var(--moduix-select-content-padding-y, var(--moduix-popup-list-padding-y, var(--moduix-spacing-1)));
+    background-color: var(--moduix-select-content-bg, var(--moduix-color-popover));
+    box-shadow: var(--moduix-select-content-shadow, var(--moduix-shadow-lg));
+    color: var(--moduix-select-content-color, var(--moduix-color-popover-foreground));
+    transform-origin: var(--transform-origin);
+    overscroll-behavior: contain;
+    scroll-padding-block: var(--moduix-select-content-padding-y, var(--moduix-spacing-1));
+    outline: 0;
+    flex-direction: column;
+    display: flex;
+    overflow: auto;
+  }
+
+  .content-fSDhut[data-state="open"] {
+    animation: select-content-open-BbqYJQ
+        var(--moduix-select-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
+            var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)))
+        both;
+  }
+
+  .content-fSDhut[data-state="closed"] {
+    animation: select-content-closed-wG10Nx
+        var(--moduix-select-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
+            var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)))
+        both;
+    pointer-events: none;
+  }
+
+  .list-cVXRp6 {
+    overscroll-behavior: contain;
+    min-height: 0;
+    scroll-padding-block: var(--moduix-select-content-padding-y, var(--moduix-spacing-1));
+    outline: 0;
+    flex-direction: column;
+    display: flex;
+    overflow-y: auto;
+  }
+
+  .itemGroup-rRI1Ej {
+    flex-direction: column;
+    display: flex;
+  }
+
+  .itemGroup-rRI1Ej + .itemGroup-rRI1Ej {
+    margin-block-start: var(--moduix-select-item-group-gap, var(--moduix-spacing-2));
+  }
+
+  .itemGroupLabel-IeDuI7 {
+    padding-block: var(--moduix-select-item-group-label-padding-y, var(--moduix-popup-group-label-padding-y, var(--moduix-spacing-1)));
+    padding-inline: var(--moduix-select-item-group-label-padding-x, var(--moduix-spacing-2-5));
+    color: var(--moduix-select-item-group-label-color, var(--moduix-popup-group-label-color, var(--moduix-color-muted-foreground)));
+    font-size: var(--moduix-select-item-group-label-font-size, var(--moduix-popup-group-label-font-size, var(--moduix-text-xs)));
+    font-weight: var(--moduix-select-item-group-label-font-weight, var(--moduix-popup-group-label-font-weight, var(--moduix-weight-regular)));
+    line-height: var(--moduix-select-item-group-label-line-height, var(--moduix-popup-group-label-line-height, var(--moduix-line-height-text-xs)));
+  }
+
+  .item-p_9W64 {
+    box-sizing: border-box;
+    width: calc(100% - var(--moduix-select-item-inset-x, var(--moduix-spacing-2)));
+    min-height: var(--moduix-select-item-min-height, var(--moduix-popup-item-min-height, var(--moduix-size-sm)));
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--moduix-select-item-gap, var(--moduix-spacing-2));
+    margin-inline: calc(var(--moduix-select-item-inset-x, var(--moduix-spacing-2)) / 2);
+    border: var(--moduix-select-item-border-width, 0) solid
+      var(--moduix-select-item-border-color, transparent);
+    border-radius: var(--moduix-select-item-radius, var(--moduix-radius-sm));
+    padding-block: var(--moduix-select-item-padding-y, var(--moduix-popup-item-padding-y, var(--moduix-spacing-1)));
+    padding-inline: var(--moduix-select-item-padding-x, var(--moduix-popup-item-padding-x-start, var(--moduix-spacing-3)));
+    background-color: var(--moduix-select-item-bg, transparent);
+    color: var(--moduix-select-item-color, var(--moduix-select-content-color, var(--moduix-color-foreground)));
+    font: inherit;
+    font-size: var(--moduix-select-item-font-size, var(--moduix-popup-item-font-size, var(--moduix-text-sm)));
+    line-height: var(--moduix-select-item-line-height, var(--moduix-popup-item-line-height, var(--moduix-line-height-text-sm)));
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: default;
+    outline: 0;
+    display: flex;
+    position: relative;
+  }
+
+  .item-p_9W64[data-highlighted] {
+    background-color: var(--moduix-select-highlight-bg, var(--moduix-color-accent));
+    color: var(--moduix-select-highlight-color, var(--moduix-color-accent-foreground));
+  }
+
+  .item-p_9W64[data-state="checked"] {
+    color: var(--moduix-select-item-checked-color, var(--moduix-select-item-color, var(--moduix-color-foreground)));
+  }
+
+  .item-p_9W64[data-disabled] {
+    pointer-events: none;
+    color: var(--moduix-select-item-disabled-color, var(--moduix-color-muted-foreground));
+    opacity: var(--moduix-select-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .itemIndicator-ONCmCH {
+    width: var(--moduix-select-item-indicator-size, var(--moduix-spacing-3-5));
+    height: var(--moduix-select-item-indicator-size, var(--moduix-spacing-3-5));
+    color: var(--moduix-select-item-indicator-color, currentColor);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .itemIndicator-ONCmCH > svg {
+    width: var(--moduix-select-item-indicator-icon-size, var(--moduix-spacing-3));
+    height: var(--moduix-select-item-indicator-icon-size, var(--moduix-spacing-3));
+  }
+
+  .itemTextContent-QMS39O {
+    align-items: center;
+    gap: var(--moduix-select-item-text-content-gap, var(--moduix-spacing-2));
+    vertical-align: top;
+    min-width: 0;
+    max-width: 100%;
+    display: inline-flex;
+  }
+
+  .itemTextIcon-gnF6sP {
+    width: var(--moduix-select-item-text-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-select-item-text-icon-size, var(--moduix-spacing-4));
+    color: var(--moduix-select-item-text-icon-color, currentColor);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .itemTextLabel-pPftyF {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .trigger-_8XyWR, .indicator-ywAB27 {
+      transition: none;
+    }
+
+    .content-fSDhut[data-state] {
+      animation: none;
+    }
+  }
+}
+

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 };