@moduix/solid 1.0.0

package/dist/components/menu/Menu_module.css

@@ -0,0 +1,396 @@
+@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[data-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] {
+    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[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)));
+  }
+
+  .viewport-aiGW8J {
+    max-height: min(var(--moduix-menu-popup-max-height, 24rem), var(--available-height, 100dvh));
+    flex-direction: column;
+    display: flex;
+    overflow: auto;
+  }
+
+  .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;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .trigger-GnJcCa, .contextTrigger-jyrQRV {
+      transition: none;
+    }
+
+    .content-yFF7GN[data-state] {
+      animation: none;
+    }
+  }
+
+  @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

@@ -0,0 +1 @@
+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/menu/index.jsx

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

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

@@ -0,0 +1,11 @@
+import type { FieldSelectProps } from '@ark-ui/solid/field';
+import type { JSX } from 'solid-js';
+type NativeSelectRootProps = FieldSelectProps & {
+    controlProps?: JSX.HTMLAttributes<HTMLSpanElement>;
+    defaultValue?: FieldSelectProps['value'];
+};
+declare function NativeSelectRoot(props: NativeSelectRootProps): JSX.Element;
+declare const NativeSelect: typeof NativeSelectRoot & {
+    Root: typeof NativeSelectRoot;
+};
+export { NativeSelect };

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

@@ -0,0 +1,49 @@
+import { className, createComponent, effect, insert, mergeProps, spread, template } from "solid-js/web";
+import { Field } from "@ark-ui/solid/field";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import { ChevronDownIcon } from "../../internal/icons/ui/Icons.js";
+import NativeSelect_module from "./NativeSelect.module.js";
+var _tmpl$ = /*#__PURE__*/ template("<span><span aria-hidden=true data-scope=native-select data-part=indicator data-slot=native-select-indicator>");
+const NativeFieldSelect = Field.Select;
+function NativeSelectRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'controlProps',
+        'defaultValue'
+    ]);
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        spread(_el$, mergeProps(()=>local.controlProps, {
+            "data-scope": "native-select",
+            "data-part": "control",
+            "data-slot": "native-select-control",
+            get ["class"] () {
+                return clsx(NativeSelect_module.control, local.controlProps?.class);
+            }
+        }), false, true);
+        insert(_el$, createComponent(NativeFieldSelect, mergeProps({
+            get asChild () {
+                return local.asChild;
+            }
+        }, others, {
+            "data-scope": "field",
+            "data-part": "select",
+            "data-slot": "native-select-root",
+            get ["class"] () {
+                return clsx(NativeSelect_module.root, local.class);
+            },
+            get ["prop:defaultValue"] () {
+                return local.defaultValue;
+            }
+        })), _el$2);
+        insert(_el$2, createComponent(ChevronDownIcon, {}));
+        effect(()=>className(_el$2, NativeSelect_module.indicator));
+        return _el$;
+    })();
+}
+const NativeSelect = Object.assign(NativeSelectRoot, {
+    Root: NativeSelectRoot
+});
+export { NativeSelect };

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

@@ -0,0 +1,24 @@
+import { Field } from "@ark-ui/solid/field";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import { ChevronDownIcon } from "../../internal/icons/ui/Icons.jsx";
+import NativeSelect_module from "./NativeSelect.module.jsx";
+const NativeFieldSelect = Field.Select;
+function NativeSelectRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'controlProps',
+        'defaultValue'
+    ]);
+    return <span {...local.controlProps} data-scope="native-select" data-part="control" data-slot="native-select-control" class={clsx(NativeSelect_module.control, local.controlProps?.class)}>
+      <NativeFieldSelect asChild={local.asChild} {...others} data-scope="field" data-part="select" data-slot="native-select-root" class={clsx(NativeSelect_module.root, local.class)} prop:defaultValue={local.defaultValue}/>
+      <span aria-hidden="true" data-scope="native-select" data-part="indicator" data-slot="native-select-indicator" class={NativeSelect_module.indicator}>
+        <ChevronDownIcon/>
+      </span>
+    </span>;
+}
+const NativeSelect = Object.assign(NativeSelectRoot, {
+    Root: NativeSelectRoot
+});
+export { NativeSelect };

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

@@ -0,0 +1,7 @@
+import "./NativeSelect_module.css";
+const NativeSelect_module = {
+    control: "control-D7osAi",
+    root: "root-ZCXVuV",
+    indicator: "indicator-oW5rXf"
+};
+export default NativeSelect_module;

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

@@ -0,0 +1,7 @@
+import "./NativeSelect_module.css";
+const NativeSelect_module = {
+    control: "control-D7osAi",
+    root: "root-ZCXVuV",
+    indicator: "indicator-oW5rXf"
+};
+export default NativeSelect_module;

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

@@ -0,0 +1,115 @@
+@layer moduix.components {
+  .control-D7osAi {
+    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-2)) +
+        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

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

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

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

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

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

package/dist/components/navigation-menu/NavigationMenu.d.ts

@@ -0,0 +1,31 @@
+import { NavigationMenu as NavigationMenuPrimitive, useNavigationMenu, useNavigationMenuContext } from '@ark-ui/solid/navigation-menu';
+import type { ComponentProps } from 'solid-js';
+declare function NavigationMenuRoot(props: ComponentProps<typeof NavigationMenuPrimitive.Root>): import("solid-js").JSX.Element;
+declare function NavigationMenuRootProvider(props: ComponentProps<typeof NavigationMenuPrimitive.RootProvider>): import("solid-js").JSX.Element;
+declare function NavigationMenuList(props: ComponentProps<typeof NavigationMenuPrimitive.List>): import("solid-js").JSX.Element;
+declare function NavigationMenuItem(props: ComponentProps<typeof NavigationMenuPrimitive.Item>): import("solid-js").JSX.Element;
+declare function NavigationMenuTrigger(props: ComponentProps<typeof NavigationMenuPrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function NavigationMenuContent(props: ComponentProps<typeof NavigationMenuPrimitive.Content>): import("solid-js").JSX.Element;
+declare function NavigationMenuLink(props: ComponentProps<typeof NavigationMenuPrimitive.Link>): import("solid-js").JSX.Element;
+declare function NavigationMenuIndicator(props: ComponentProps<typeof NavigationMenuPrimitive.Indicator>): import("solid-js").JSX.Element;
+declare function NavigationMenuItemIndicator(props: ComponentProps<typeof NavigationMenuPrimitive.ItemIndicator>): import("solid-js").JSX.Element;
+declare function NavigationMenuArrow(props: ComponentProps<typeof NavigationMenuPrimitive.Arrow>): import("solid-js").JSX.Element;
+declare function NavigationMenuViewportPositioner(props: ComponentProps<typeof NavigationMenuPrimitive.ViewportPositioner>): import("solid-js").JSX.Element;
+declare function NavigationMenuViewport(props: ComponentProps<typeof NavigationMenuPrimitive.Viewport>): import("solid-js").JSX.Element;
+declare const NavigationMenu: typeof NavigationMenuRoot & {
+    Root: typeof NavigationMenuRoot;
+    RootProvider: typeof NavigationMenuRootProvider;
+    Context: (props: NavigationMenuPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    List: typeof NavigationMenuList;
+    Item: typeof NavigationMenuItem;
+    Trigger: typeof NavigationMenuTrigger;
+    Content: typeof NavigationMenuContent;
+    Link: typeof NavigationMenuLink;
+    Indicator: typeof NavigationMenuIndicator;
+    ItemIndicator: typeof NavigationMenuItemIndicator;
+    Arrow: typeof NavigationMenuArrow;
+    ViewportPositioner: typeof NavigationMenuViewportPositioner;
+    Viewport: typeof NavigationMenuViewport;
+};
+export { useNavigationMenu, useNavigationMenuContext };
+export { NavigationMenu };