@moduix/react 2.1.0 → 2.2.4

package/dist/components/menu/Menu_module.css

@@ -0,0 +1,386 @@
+@layer moduix.components {
+  .trigger-GnJcCa, .contextTrigger-jyrQRV {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--moduix-menu-trigger-gap, var(--moduix-spacing-2));
+    min-height: var(--moduix-menu-trigger-height, var(--moduix-size-md));
+    padding: var(--moduix-menu-trigger-padding-y, var(--moduix-spacing-1))
+      var(--moduix-menu-trigger-padding-x, var(--moduix-spacing-4));
+    border: var(--moduix-menu-trigger-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-menu-trigger-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-menu-trigger-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-menu-trigger-bg, var(--moduix-color-background));
+    color: var(--moduix-menu-trigger-color, var(--moduix-color-foreground));
+    font: inherit;
+    font-size: var(--moduix-menu-trigger-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-menu-trigger-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-menu-trigger-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--moduix-menu-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-menu-transition, var(--moduix-transition-default)),
+      color var(--moduix-menu-transition, var(--moduix-transition-default));
+    outline: 0;
+    margin: 0;
+    display: inline-flex;
+  }
+
+  @media (hover: hover) {
+    :is(.trigger-GnJcCa, .contextTrigger-jyrQRV):hover {
+      background-color: var(--moduix-menu-trigger-bg-hover);
+    }
+  }
+
+  :is(.trigger-GnJcCa, .contextTrigger-jyrQRV):active, :is(.trigger-GnJcCa, .contextTrigger-jyrQRV)[data-current][data-state="open"] {
+    background-color: var(--moduix-menu-trigger-bg-active, var(--moduix-menu-trigger-bg-hover));
+  }
+
+  :is(.trigger-GnJcCa, .contextTrigger-jyrQRV):focus-visible {
+    outline: var(--moduix-menu-focus-ring-width, var(--moduix-menu-trigger-border-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-menu-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: calc(var(--moduix-menu-focus-ring-width, var(--moduix-menu-trigger-border-width, var(--moduix-border-width-sm))) *
+          -1);
+  }
+
+  :is(.trigger-GnJcCa, .contextTrigger-jyrQRV)[data-disabled], :is(.trigger-GnJcCa, .contextTrigger-jyrQRV):disabled {
+    pointer-events: none;
+    opacity: var(--moduix-menu-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .triggerIcon-N7XJst, .indicator-E0mVnS {
+    box-sizing: border-box;
+    width: var(--moduix-menu-trigger-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-menu-trigger-icon-size, var(--moduix-spacing-4));
+    color: var(--moduix-menu-trigger-icon-color, currentColor);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .iconSvg-BqAnRB, .indicator-E0mVnS > svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .positioner-Dxj8G1 {
+    z-index: var(--z-index);
+    width: var(--positioner-width, auto);
+    max-width: var(--available-width);
+    outline: 0;
+  }
+
+  .content-yFF7GN {
+    --arrow-size: var(--moduix-menu-arrow-size, var(--moduix-spacing-2-5));
+    --arrow-background: var(--moduix-menu-popup-bg, var(--moduix-color-popover));
+    box-sizing: border-box;
+    min-width: min(max(var(--reference-width, 0px), var(--moduix-menu-popup-min-width, 12rem)),
+      var(--available-width, 100vw));
+    max-width: min(var(--moduix-menu-popup-max-width, 20rem), var(--available-width, 100vw));
+    overflow: var(--moduix-menu-popup-overflow, visible);
+    padding-block: var(--moduix-menu-popup-padding-y, var(--moduix-popup-list-padding-y, var(--moduix-spacing-1)));
+    border-radius: var(--moduix-menu-popup-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-menu-popup-bg, var(--moduix-color-popover));
+    color: var(--moduix-menu-popup-color, var(--moduix-color-popover-foreground));
+    outline: var(--moduix-menu-popup-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-menu-popup-border-color, var(--moduix-color-border));
+    box-shadow: var(--moduix-menu-popup-shadow, var(--moduix-shadow-lg));
+    transform-origin: var(--transform-origin);
+    z-index: calc(var(--moduix-z-popup) + var(--layer-index, 0));
+    flex-direction: column;
+    display: flex;
+    position: relative;
+  }
+
+  .content-yFF7GN[data-state="open"] {
+    animation: menuContentIn-XDpUnW
+        var(--moduix-menu-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
+            var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
+  }
+
+  .content-yFF7GN .contentViewport-GpY3ZX {
+    max-height: min(var(--moduix-menu-popup-max-height, 24rem), var(--available-height, 100dvh));
+    flex-direction: column;
+    display: flex;
+    overflow: auto;
+  }
+
+  .content-yFF7GN[data-state="closed"] {
+    animation: menuContentOut-Q7Drkj
+        var(--moduix-menu-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
+            var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
+  }
+
+  .arrow-sziCms {
+    --arrow-background: var(--moduix-menu-popup-bg, var(--moduix-color-popover));
+  }
+
+  .arrowTip-h3KKa6 {
+    border-block-start: var(--moduix-menu-popup-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-menu-arrow-stroke-color, var(--moduix-menu-popup-border-color, var(--moduix-color-border)));
+    border-inline-start: var(--moduix-menu-popup-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-menu-arrow-stroke-color, var(--moduix-menu-popup-border-color, var(--moduix-color-border)));
+  }
+
+  .item-DZSt0x, .triggerItem-hvuoWI, .radioItem-dEpPt0, .checkboxItem-fPj1rO {
+    box-sizing: border-box;
+    min-height: var(--moduix-menu-item-height, var(--moduix-popup-item-min-height, var(--moduix-size-sm)));
+    border-radius: var(--moduix-menu-item-radius, var(--moduix-radius-sm));
+    background-color: var(--moduix-menu-item-bg, transparent);
+    color: inherit;
+    font: inherit;
+    font-size: var(--moduix-menu-item-font-size, var(--moduix-popup-item-font-size, var(--moduix-text-sm)));
+    line-height: var(--moduix-menu-item-line-height, var(--moduix-popup-item-line-height, var(--moduix-line-height-text-sm)));
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: default;
+    border: 0;
+    outline: 0;
+    margin: 0;
+    text-decoration: none;
+    position: relative;
+  }
+
+  :is(.item-DZSt0x, .triggerItem-hvuoWI, .radioItem-dEpPt0, .checkboxItem-fPj1rO):is([data-highlighted], [data-state="open"]) {
+    z-index: 0;
+  }
+
+  :is(.item-DZSt0x, .triggerItem-hvuoWI, .radioItem-dEpPt0, .checkboxItem-fPj1rO):is([data-highlighted], [data-state="open"]):before {
+    content: "";
+    z-index: -1;
+    inset-block: 0;
+    inset-inline: var(--moduix-menu-highlight-inset-x, var(--moduix-popup-highlight-inset-x, var(--moduix-spacing-1)));
+    border-radius: var(--moduix-menu-highlight-radius, var(--moduix-popup-highlight-radius, var(--moduix-radius-sm)));
+    background-color: var(--moduix-menu-submenu-open-bg, var(--moduix-color-accent));
+    position: absolute;
+  }
+
+  :is(.item-DZSt0x, .triggerItem-hvuoWI, .radioItem-dEpPt0, .checkboxItem-fPj1rO)[data-highlighted] {
+    color: var(--moduix-menu-highlight-color, var(--moduix-color-accent-foreground));
+  }
+
+  :is(.item-DZSt0x, .triggerItem-hvuoWI, .radioItem-dEpPt0, .checkboxItem-fPj1rO)[data-highlighted]:before {
+    background-color: var(--moduix-menu-highlight-bg, var(--moduix-color-accent));
+  }
+
+  :is(.item-DZSt0x, .triggerItem-hvuoWI, .radioItem-dEpPt0, .checkboxItem-fPj1rO)[data-disabled] {
+    pointer-events: none;
+    background-color: var(--moduix-menu-item-bg-disabled, var(--moduix-menu-item-bg, transparent));
+    color: var(--moduix-menu-item-disabled-color, var(--moduix-color-muted-foreground));
+    cursor: default;
+  }
+
+  :is(.item-DZSt0x, .triggerItem-hvuoWI, .radioItem-dEpPt0, .checkboxItem-fPj1rO)[data-tone="destructive"] {
+    color: var(--moduix-menu-item-destructive-color, var(--moduix-color-destructive));
+  }
+
+  :is(.item-DZSt0x, .triggerItem-hvuoWI, .radioItem-dEpPt0, .checkboxItem-fPj1rO)[data-tone="destructive"][data-highlighted] {
+    color: var(--moduix-menu-item-destructive-highlight-color, var(--moduix-menu-item-destructive-color, var(--moduix-color-destructive)));
+  }
+
+  :is(.item-DZSt0x, .triggerItem-hvuoWI, .radioItem-dEpPt0, .checkboxItem-fPj1rO)[data-tone="destructive"][data-highlighted]:before {
+    background-color: var(--moduix-menu-item-destructive-highlight-bg, color-mix(in oklab, var(--moduix-color-destructive) 12%, transparent));
+  }
+
+  .item-DZSt0x {
+    align-items: center;
+    gap: var(--moduix-menu-item-gap, var(--moduix-spacing-2));
+    padding-block: var(--moduix-menu-item-padding-y, var(--moduix-popup-item-padding-y, var(--moduix-spacing-1)));
+    padding-inline: var(--moduix-menu-item-padding-x-start, var(--moduix-popup-item-padding-x-start, var(--moduix-spacing-3)))
+      var(--moduix-menu-item-padding-x-end, var(--moduix-popup-item-padding-x-end, var(--moduix-spacing-3)));
+    display: flex;
+  }
+
+  .triggerItem-hvuoWI {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--moduix-menu-trigger-item-gap, var(--moduix-spacing-3));
+    padding-block: var(--moduix-menu-item-padding-y, var(--moduix-popup-item-padding-y, var(--moduix-spacing-1)));
+    padding-inline: var(--moduix-menu-item-padding-x-start, var(--moduix-popup-item-padding-x-start, var(--moduix-spacing-3)))
+      var(--moduix-menu-trigger-item-padding-x-end, var(--moduix-spacing-3));
+    display: flex;
+  }
+
+  .triggerItemIcon-hMUDIf {
+    box-sizing: border-box;
+    width: var(--moduix-menu-trigger-item-icon-size, var(--moduix-spacing-3-5));
+    height: var(--moduix-menu-trigger-item-icon-size, var(--moduix-spacing-3-5));
+    color: currentColor;
+    flex-shrink: 0;
+    display: inline-flex;
+  }
+
+  .triggerItemIcon-hMUDIf:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+    transform: scaleX(-1);
+  }
+
+  .itemGroup-XRBydJ {
+    padding-block: var(--moduix-menu-group-padding-y, 0);
+    display: grid;
+  }
+
+  .itemGroupLabel-xvJRDv {
+    padding-block: var(--moduix-menu-group-label-padding-y, var(--moduix-popup-group-label-padding-y, var(--moduix-spacing-1)));
+    padding-inline: var(--moduix-menu-group-label-padding-x-start, var(--moduix-popup-group-label-padding-x-start, var(--moduix-spacing-2-5)))
+      var(--moduix-menu-group-label-padding-x-end, var(--moduix-popup-group-label-padding-x-end, var(--moduix-spacing-3)));
+    color: var(--moduix-menu-group-label-color, var(--moduix-popup-group-label-color, var(--moduix-color-muted-foreground)));
+    font-size: var(--moduix-menu-group-label-font-size, var(--moduix-popup-group-label-font-size, var(--moduix-text-xs)));
+    font-weight: var(--moduix-menu-group-label-font-weight, var(--moduix-popup-group-label-font-weight, var(--moduix-weight-regular)));
+    line-height: var(--moduix-menu-group-label-line-height, var(--moduix-popup-group-label-line-height, var(--moduix-line-height-text-xs)));
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: default;
+    margin: 0;
+  }
+
+  .radioItemGroup-EzfpoY {
+    display: grid;
+  }
+
+  .radioItem-dEpPt0, .checkboxItem-fPj1rO {
+    align-items: center;
+    gap: var(--moduix-menu-check-gap, var(--moduix-popup-check-gap, var(--moduix-spacing-2)));
+    grid-template-columns: var(--moduix-menu-check-indicator-size, var(--moduix-popup-check-indicator-size, var(--moduix-spacing-3)))
+      minmax(0, 1fr);
+    padding-block: var(--moduix-menu-item-padding-y, var(--moduix-popup-item-padding-y, var(--moduix-spacing-1)));
+    padding-inline: var(--moduix-menu-check-padding-x-start, var(--moduix-popup-check-padding-x-start, var(--moduix-spacing-2-5)))
+      var(--moduix-menu-item-padding-x-end, var(--moduix-popup-item-padding-x-end, var(--moduix-spacing-3)));
+    display: grid;
+  }
+
+  :is(.radioItem-dEpPt0, .checkboxItem-fPj1rO)[data-indicator-position="none"] {
+    grid-template-columns: minmax(0, 1fr);
+    padding-inline-start: var(--moduix-menu-item-padding-x-start, var(--moduix-popup-item-padding-x-start, var(--moduix-spacing-3)));
+  }
+
+  :is(.radioItem-dEpPt0, .checkboxItem-fPj1rO)[data-indicator-position="none"] > .itemIndicator-hAUfu1 {
+    display: none;
+  }
+
+  :is(.radioItem-dEpPt0, .checkboxItem-fPj1rO)[data-indicator-position="none"] > .itemText-bAw_c1 {
+    grid-column-start: 1;
+  }
+
+  :is(.radioItem-dEpPt0, .checkboxItem-fPj1rO)[data-indicator-position="end"] {
+    grid-template-columns: minmax(0, 1fr)
+        var(--moduix-menu-check-indicator-size, var(--moduix-popup-check-indicator-size, var(--moduix-spacing-3)));
+  }
+
+  :is(.radioItem-dEpPt0, .checkboxItem-fPj1rO)[data-indicator-position="end"] > .itemText-bAw_c1 {
+    grid-column-start: 1;
+  }
+
+  :is(.radioItem-dEpPt0, .checkboxItem-fPj1rO)[data-indicator-position="end"] > .itemIndicator-hAUfu1 {
+    grid-column-start: 2;
+    justify-self: end;
+  }
+
+  .checkboxItem-fPj1rO[data-state="checked"] > .itemIndicator-hAUfu1 {
+    background-color: var(--moduix-menu-checkbox-indicator-bg-checked, var(--moduix-menu-checkbox-indicator-bg, transparent));
+    border-color: var(--moduix-menu-checkbox-indicator-border-color-checked, var(--moduix-menu-checkbox-indicator-border-color, currentColor));
+  }
+
+  .itemIndicator-hAUfu1 {
+    width: var(--moduix-menu-check-indicator-size, var(--moduix-popup-check-indicator-size, var(--moduix-spacing-3)));
+    height: var(--moduix-menu-check-indicator-size, var(--moduix-popup-check-indicator-size, var(--moduix-spacing-3)));
+    border: var(--moduix-menu-checkbox-indicator-border-width, 0) solid
+      var(--moduix-menu-checkbox-indicator-border-color, currentColor);
+    border-radius: var(--moduix-menu-checkbox-indicator-radius, var(--moduix-radius-xs));
+    background-color: var(--moduix-menu-checkbox-indicator-bg, transparent);
+    grid-column-start: 1;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .itemIndicator-hAUfu1[data-state="checked"] {
+    color: var(--moduix-menu-item-indicator-color-checked, currentColor);
+  }
+
+  .itemIndicatorIcon-GDT0ww {
+    width: 100%;
+    height: 100%;
+  }
+
+  .itemText-bAw_c1 {
+    grid-column-start: 2;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .itemTextContent-n45S95 {
+    align-items: center;
+    gap: var(--moduix-menu-item-text-content-gap, var(--moduix-spacing-2));
+    vertical-align: top;
+    min-width: 0;
+    max-width: 100%;
+    display: inline-flex;
+  }
+
+  .itemTextIcon-VvwPBT {
+    width: var(--moduix-menu-item-text-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-menu-item-text-icon-size, var(--moduix-spacing-4));
+    color: var(--moduix-menu-item-text-icon-color, currentColor);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .itemTextLabel-o2rZzl {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .itemShortcut-sUTFok {
+    color: var(--moduix-menu-item-shortcut-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-menu-item-shortcut-font-size, var(--moduix-text-xs));
+    line-height: var(--moduix-menu-item-shortcut-line-height, var(--moduix-line-height-text-xs));
+    white-space: nowrap;
+    margin-inline-start: auto;
+    padding-inline-start: var(--moduix-menu-item-shortcut-padding-x-start, var(--moduix-spacing-4));
+  }
+
+  .separator-gjooPr {
+    box-sizing: border-box;
+    height: var(--moduix-menu-separator-height, var(--moduix-border-width-sm));
+    margin-block: var(--moduix-menu-separator-margin-y, var(--moduix-popup-separator-margin-y, var(--moduix-spacing-1-5)));
+    margin-inline: var(--moduix-menu-separator-margin-x-start, var(--moduix-popup-separator-margin-x-start, var(--moduix-spacing-3)))
+      var(--moduix-menu-separator-margin-x-end, var(--moduix-popup-separator-margin-x-end, var(--moduix-spacing-3)));
+    background-color: var(--moduix-menu-separator-color, var(--moduix-color-border));
+    border: 0;
+  }
+
+  @keyframes menuContentIn-XDpUnW {
+    from {
+      opacity: var(--moduix-menu-popup-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0));
+      translate: var(--moduix-menu-popup-starting-translate-x, var(--moduix-popup-motion-starting-translate-x, 0))
+        var(--moduix-menu-popup-starting-translate-y, var(--moduix-popup-motion-starting-translate-y, 0));
+      transform: scale(var(--moduix-menu-popup-starting-scale, var(--moduix-popup-motion-starting-scale, var(--moduix-scale-popup))));
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes menuContentOut-Q7Drkj {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: var(--moduix-menu-popup-ending-opacity, var(--moduix-popup-motion-ending-opacity, 0));
+      translate: var(--moduix-menu-popup-ending-translate-x, var(--moduix-popup-motion-ending-translate-x, 0))
+        var(--moduix-menu-popup-ending-translate-y, var(--moduix-popup-motion-ending-translate-y, 0));
+      transform: scale(var(--moduix-menu-popup-ending-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup))));
+    }
+  }
+}
+

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

@@ -1,2 +1 @@
-import { Menu, useMenu } from "./Menu.js";
-export { Menu, useMenu };
+export { Menu, useMenu, useMenuContext, useMenuItemContext } from './Menu.js';

package/dist/components/menu/index.js

@@ -0,0 +1 @@
+export { Menu, useMenu, useMenuContext, useMenuItemContext } from "./Menu.js";

package/dist/components/native-select/NativeSelect.d.ts

@@ -1,12 +1,9 @@
-import { ComponentProps } from "react";
-import { Field } from "@ark-ui/react/field";
-
-//#region src/components/native-select/NativeSelect.d.ts
-type NativeSelectRootProps = ComponentProps<typeof Field.Select> & {
-  controlProps?: ComponentProps<'span'>;
+import { Field as FieldPrimitive } from '@ark-ui/react/field';
+import type { ComponentProps } from 'react';
+type NativeSelectRootProps = ComponentProps<typeof FieldPrimitive.Select> & {
+    controlProps?: ComponentProps<'span'>;
 };
 declare const NativeSelect: import("react").ForwardRefExoticComponent<Omit<NativeSelectRootProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<NativeSelectRootProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
+    Root: import("react").ForwardRefExoticComponent<Omit<NativeSelectRootProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
 };
-//#endregion
-export { NativeSelect };
+export { NativeSelect };

package/dist/components/native-select/NativeSelect.js

@@ -1,33 +1,36 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import { ChevronDownIcon } from "../../lib/moduix/icons/ui/Icons.js";
-import NativeSelect_module_default from "./NativeSelect.module.js";
-import { clsx } from "clsx";
-import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@ark-ui/react/field";
-//#region src/components/native-select/NativeSelect.tsx
-const NativeSelectRoot = forwardRef(function NativeSelectRoot({ className, controlProps, ...props }, ref) {
-	return /* @__PURE__ */ jsxs("span", {
-		...controlProps,
-		"data-scope": "native-select",
-		"data-part": "control",
-		"data-slot": "native-select-control",
-		className: clsx(NativeSelect_module_default.control, normalizeClassName(controlProps?.className)),
-		children: [/* @__PURE__ */ jsx(Field.Select, {
-			...props,
-			ref,
-			"data-slot": "native-select-root",
-			className: clsx(NativeSelect_module_default.root, normalizeClassName(className))
-		}), /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			"data-scope": "native-select",
-			"data-part": "indicator",
-			"data-slot": "native-select-indicator",
-			className: NativeSelect_module_default.indicator,
-			children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
-		})]
-	});
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { ChevronDownIcon } from "../../internal/icons/ui/index.js";
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import NativeSelect_module from "./NativeSelect.module.js";
+const NativeSelect_NativeSelectRoot = /*#__PURE__*/ forwardRef(function({ className, controlProps, ...props }, ref) {
+    return /*#__PURE__*/ jsxs("span", {
+        ...controlProps,
+        "data-scope": "native-select",
+        "data-part": "control",
+        "data-slot": "native-select-control",
+        className: clsx(NativeSelect_module.control, normalizeClassName(controlProps?.className)),
+        children: [
+            /*#__PURE__*/ jsx(Field.Select, {
+                ...props,
+                ref: ref,
+                "data-slot": "native-select-root",
+                className: clsx(NativeSelect_module.root, normalizeClassName(className))
+            }),
+            /*#__PURE__*/ jsx("span", {
+                "aria-hidden": "true",
+                "data-scope": "native-select",
+                "data-part": "indicator",
+                "data-slot": "native-select-indicator",
+                className: NativeSelect_module.indicator,
+                children: /*#__PURE__*/ jsx(ChevronDownIcon, {})
+            })
+        ]
+    });
+});
+const NativeSelect = Object.assign(NativeSelect_NativeSelectRoot, {
+    Root: NativeSelect_NativeSelectRoot
 });
-const NativeSelect = Object.assign(NativeSelectRoot, { Root: NativeSelectRoot });
-//#endregion
 export { NativeSelect };

package/dist/components/native-select/NativeSelect.module.js

@@ -1,9 +1,7 @@
-import './NativeSelect.css';
-//#region src/components/native-select/NativeSelect.module.css
-var NativeSelect_module_default = {
-	"control": "mei8Eq_control",
-	"indicator": "mei8Eq_indicator",
-	"root": "mei8Eq_root"
+import "./NativeSelect_module.css";
+const NativeSelect_module = {
+    control: "control-D7osAi",
+    root: "root-ZCXVuV",
+    indicator: "indicator-oW5rXf"
 };
-//#endregion
-export { NativeSelect_module_default as default };
+export default NativeSelect_module;

package/dist/components/native-select/NativeSelect_module.css

@@ -0,0 +1,116 @@
+@layer moduix.components {
+  .control-D7osAi {
+    width: -moz-fit-content;
+    width: fit-content;
+    min-width: 0;
+    max-width: 100%;
+    display: inline-grid;
+    position: relative;
+  }
+
+  .root-ZCXVuV {
+    box-sizing: border-box;
+    width: var(--moduix-select-width, 14rem);
+    max-width: var(--moduix-select-max-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));
+    appearance: none;
+    background-color: var(--moduix-select-bg, var(--moduix-color-background));
+    color: var(--moduix-select-color, var(--moduix-color-foreground));
+    font: inherit;
+    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;
+    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)),
+      opacity var(--moduix-select-transition, var(--moduix-transition-default));
+    margin: 0;
+    padding-inline-start: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3));
+    padding-inline-end: calc(var(--moduix-select-action-offset-right, var(--moduix-spacing-1)) +
+        var(--moduix-select-action-size, var(--moduix-spacing-6)) +
+        var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3)));
+  }
+
+  .root-ZCXVuV: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));
+  }
+
+  .root-ZCXVuV:is([data-invalid], [aria-invalid="true"]) {
+    border-color: var(--moduix-select-invalid-color, var(--moduix-color-destructive));
+    outline-color: var(--moduix-select-invalid-color, var(--moduix-color-destructive));
+  }
+
+  .root-ZCXVuV:is([data-disabled], :disabled) {
+    pointer-events: none;
+    opacity: var(--moduix-select-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .root-ZCXVuV:is([multiple], [size]:not([size="0"], [size="1"])) {
+    height: auto;
+    padding-block: var(--moduix-spacing-2);
+    padding-inline: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3));
+    appearance: auto;
+  }
+
+  @media (forced-colors: active) {
+    .root-ZCXVuV {
+      appearance: auto;
+      padding-inline-end: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3));
+    }
+  }
+
+  .indicator-oW5rXf {
+    top: 50%;
+    width: var(--moduix-select-action-size, var(--moduix-spacing-6));
+    height: var(--moduix-select-action-size, var(--moduix-spacing-6));
+    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));
+    pointer-events: none;
+    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));
+    justify-content: center;
+    align-items: center;
+    line-height: 0;
+    display: inline-flex;
+    position: absolute;
+    inset-inline-end: var(--moduix-select-action-offset-right, var(--moduix-spacing-2));
+    transform: translateY(-50%);
+  }
+
+  .indicator-oW5rXf > svg {
+    width: var(--moduix-select-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-select-icon-size, var(--moduix-spacing-4));
+    display: block;
+  }
+
+  @media (forced-colors: active) {
+    .indicator-oW5rXf {
+      display: none;
+    }
+  }
+
+  .root-ZCXVuV:is([data-disabled], :disabled) + .indicator-oW5rXf {
+    opacity: var(--moduix-select-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  @media (hover: hover) {
+    .root-ZCXVuV:not(:disabled, [data-disabled]):hover + .indicator-oW5rXf {
+      background-color: var(--moduix-select-action-bg-hover, var(--moduix-color-muted));
+      color: var(--moduix-select-action-color-hover, var(--moduix-color-foreground));
+    }
+  }
+
+  .root-ZCXVuV:is([multiple], [size]:not([size="0"], [size="1"])) + .indicator-oW5rXf {
+    display: none;
+  }
+}
+

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

@@ -1,2 +1 @@
-import { NativeSelect } from "./NativeSelect.js";
-export { NativeSelect };
+export * from './NativeSelect.js';

package/dist/components/native-select/index.js

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