@moduix/react 2.2.0 → 2.2.4

package/dist/components/select/{Select.css → Select_module.css}

@@ -1,5 +1,5 @@
 @layer moduix.components {
-  @keyframes FGbIOa_select-content-open {
+  @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)
@@ -13,7 +13,7 @@
     }
   }
 
-  @keyframes FGbIOa_select-content-closed {
+  @keyframes select-content-closed-wG10Nx {
     from {
       opacity: 1;
       transform: scale(1);
@@ -27,7 +27,7 @@
     }
   }
 
-  .FGbIOa_root {
+  .root-r1QO18 {
     box-sizing: border-box;
     width: var(--moduix-select-width, 14rem);
     max-width: var(--moduix-select-max-width, 100%);
@@ -38,34 +38,35 @@
     display: flex;
   }
 
-  .FGbIOa_label {
+  .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;
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-select-disabled-opacity, var(--moduix-opacity-disabled));
-    }
+  .label-WNAZBK[data-disabled] {
+    opacity: var(--moduix-select-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
-  .FGbIOa_control {
+  .control-QCSm_x {
     width: 100%;
     min-width: 0;
     color: var(--moduix-select-color, var(--moduix-color-foreground));
     align-items: center;
     display: flex;
     position: relative;
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-select-disabled-opacity, var(--moduix-opacity-disabled));
-    }
+  .control-QCSm_x[data-disabled] {
+    opacity: var(--moduix-select-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
-  .FGbIOa_trigger {
+  .trigger-_8XyWR {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
@@ -86,6 +87,7 @@
     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)),
@@ -95,36 +97,36 @@
     margin: 0;
     display: inline-flex;
     position: relative;
+  }
 
-    &[data-placeholder-shown] {
-      color: var(--moduix-select-placeholder-color, var(--moduix-color-muted-foreground));
-    }
+  .trigger-_8XyWR[data-placeholder-shown] {
+    color: var(--moduix-select-placeholder-color, var(--moduix-color-muted-foreground));
+  }
 
-    &[data-state="open"] {
-      border-color: var(--moduix-select-focus-ring-color, var(--moduix-color-ring));
-      outline-color: var(--moduix-select-focus-ring-color, var(--moduix-color-ring));
-    }
+  .trigger-_8XyWR[data-state="open"] {
+    border-color: var(--moduix-select-focus-ring-color, var(--moduix-color-ring));
+    outline-color: var(--moduix-select-focus-ring-color, var(--moduix-color-ring));
+  }
 
-    &[data-disabled], &[disabled] {
-      cursor: default;
-    }
+  .trigger-_8XyWR[data-disabled], .trigger-_8XyWR[disabled] {
+    cursor: default;
+  }
 
-    &: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));
-    }
+  .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));
+  }
 
-    .FGbIOa_control[data-invalid] & {
-      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[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));
   }
 
-  .FGbIOa_control:has(.FGbIOa_clearTrigger:not([hidden])) .FGbIOa_trigger {
+  .control-QCSm_x:has(.clearTrigger-bA52Dh:not([hidden])) .trigger-_8XyWR {
     padding-inline-end: var(--moduix-select-trigger-padding-x-end, 4.25rem);
   }
 
-  .FGbIOa_valueText {
+  .valueText-ZjlEZ9 {
     text-overflow: ellipsis;
     white-space: nowrap;
     flex: 1;
@@ -132,7 +134,7 @@
     overflow: hidden;
   }
 
-  .FGbIOa_indicator {
+  .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));
@@ -150,27 +152,27 @@
     padding: 0;
     line-height: 0;
     display: inline-flex;
+  }
 
-    & > 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 > svg {
+    width: var(--moduix-select-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-select-icon-size, var(--moduix-spacing-4));
+    display: block;
+  }
 
-    &[data-disabled], &[disabled] {
-      cursor: default;
-    }
+  .indicator-ywAB27[data-disabled], .indicator-ywAB27[disabled] {
+    cursor: default;
+  }
 
-    &[hidden] {
-      display: none;
-    }
+  .indicator-ywAB27[hidden] {
+    display: none;
   }
 
-  .FGbIOa_indicator {
+  .indicator-ywAB27 {
     pointer-events: none;
   }
 
-  .FGbIOa_trigger > .FGbIOa_indicator {
+  .trigger-_8XyWR > .indicator-ywAB27 {
     pointer-events: auto;
     top: 50%;
     position: absolute;
@@ -178,14 +180,14 @@
     transform: translateY(-50%);
   }
 
-  .FGbIOa_trigger > .FGbIOa_indicator:not(:is([data-disabled], [disabled])):hover {
-    @media (hover: hover) {
+  @media (hover: hover) {
+    .trigger-_8XyWR > .indicator-ywAB27:not(:is([data-disabled], [disabled])):hover {
       background-color: var(--moduix-select-action-bg-hover, var(--moduix-color-muted));
       color: var(--moduix-select-action-color-hover, var(--moduix-color-foreground));
     }
   }
 
-  .FGbIOa_clearTrigger {
+  .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));
@@ -195,13 +197,13 @@
     --moduix-close-button-color-hover: var(--moduix-select-action-color-hover, var(--moduix-color-foreground));
     --moduix-close-button-transition: var(--moduix-select-transition, var(--moduix-transition-default));
     pointer-events: auto;
+  }
 
-    &[hidden] {
-      display: none;
-    }
+  .clearTrigger-bA52Dh[hidden] {
+    display: none;
   }
 
-  .FGbIOa_control > .FGbIOa_clearTrigger {
+  .control-QCSm_x > .clearTrigger-bA52Dh {
     top: 50%;
     position: absolute;
     inset-inline-end: calc(var(--moduix-select-action-offset-right, var(--moduix-spacing-2)) +
@@ -210,12 +212,12 @@
     transform: translateY(-50%);
   }
 
-  .FGbIOa_positioner {
+  .positioner-mCDY9D {
     z-index: var(--z-index);
     outline: 0;
   }
 
-  .FGbIOa_content {
+  .content-fSDhut {
     box-sizing: border-box;
     z-index: calc(var(--moduix-z-popup) + var(--layer-index, 0));
     min-width: var(--reference-width);
@@ -235,22 +237,24 @@
     flex-direction: column;
     display: flex;
     overflow: auto;
+  }
 
-    &[data-state="open"] {
-      animation: FGbIOa_select-content-open
+  .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)));
-    }
+            var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)))
+        both;
+  }
 
-    &[data-state="closed"] {
-      animation: FGbIOa_select-content-closed
+  .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)));
-      pointer-events: none;
-    }
+            var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)))
+        both;
+    pointer-events: none;
   }
 
-  .FGbIOa_list {
+  .list-cVXRp6 {
     overscroll-behavior: contain;
     min-height: 0;
     scroll-padding-block: var(--moduix-select-content-padding-y, var(--moduix-spacing-1));
@@ -260,16 +264,16 @@
     overflow-y: auto;
   }
 
-  .FGbIOa_itemGroup {
+  .itemGroup-rRI1Ej {
     flex-direction: column;
     display: flex;
+  }
 
-    & + & {
-      margin-top: var(--moduix-select-item-group-gap, var(--moduix-spacing-2));
-    }
+  .itemGroup-rRI1Ej + .itemGroup-rRI1Ej {
+    margin-top: var(--moduix-select-item-group-gap, var(--moduix-spacing-2));
   }
 
-  .FGbIOa_itemGroupLabel {
+  .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)));
@@ -278,7 +282,7 @@
     line-height: var(--moduix-select-item-group-label-line-height, var(--moduix-popup-group-label-line-height, var(--moduix-line-height-text-xs)));
   }
 
-  .FGbIOa_item {
+  .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)));
@@ -296,29 +300,30 @@
     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;
+  }
 
-    &[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-highlighted] {
+    background-color: var(--moduix-select-highlight-bg, var(--moduix-color-accent));
+    color: var(--moduix-select-highlight-color, var(--moduix-color-accent-foreground));
+  }
 
-    &[data-state="checked"] {
-      color: var(--moduix-select-item-checked-color, var(--moduix-select-item-color, var(--moduix-color-foreground)));
-    }
+  .item-p_9W64[data-state="checked"] {
+    color: var(--moduix-select-item-checked-color, var(--moduix-select-item-color, var(--moduix-color-foreground)));
+  }
 
-    &[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));
-    }
+  .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));
   }
 
-  .FGbIOa_itemText {
+  .itemText-yYAdr3 {
     text-overflow: ellipsis;
     white-space: nowrap;
     flex: 1;
@@ -326,7 +331,7 @@
     overflow: hidden;
   }
 
-  .FGbIOa_itemIndicator {
+  .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);
@@ -334,14 +339,14 @@
     justify-content: center;
     align-items: center;
     display: inline-flex;
+  }
 
-    & > 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));
-    }
+  .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));
   }
 
-  .FGbIOa_itemTextContent {
+  .itemTextContent-QMS39O {
     align-items: center;
     gap: var(--moduix-select-item-text-content-gap, var(--moduix-spacing-2));
     vertical-align: top;
@@ -350,7 +355,7 @@
     display: inline-flex;
   }
 
-  .FGbIOa_itemTextIcon {
+  .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);
@@ -360,10 +365,11 @@
     display: inline-flex;
   }
 
-  .FGbIOa_itemTextLabel {
+  .itemTextLabel-pPftyF {
     text-overflow: ellipsis;
     white-space: nowrap;
     min-width: 0;
     overflow: hidden;
   }
 }
+

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

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

package/dist/components/select/index.js

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

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

@@ -1,14 +1,12 @@
-//#region src/components/separator/Separator.d.ts
 declare const Separator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
-  orientation?: "horizontal" | "vertical";
-  size?: "xs" | "sm" | "md" | "lg";
-  variant?: "solid" | "dashed" | "dotted";
-} & import("react").RefAttributes<HTMLSpanElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
     orientation?: "horizontal" | "vertical";
     size?: "xs" | "sm" | "md" | "lg";
     variant?: "solid" | "dashed" | "dotted";
-  } & import("react").RefAttributes<HTMLSpanElement>>;
+} & import("react").RefAttributes<HTMLSpanElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+        orientation?: "horizontal" | "vertical";
+        size?: "xs" | "sm" | "md" | "lg";
+        variant?: "solid" | "dashed" | "dotted";
+    } & import("react").RefAttributes<HTMLSpanElement>>;
 };
-//#endregion
-export { Separator };
+export { Separator };

package/dist/components/separator/Separator.js

@@ -1,27 +1,27 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import Separator_module_default from "./Separator.module.js";
+import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/separator/Separator.tsx
-const SeparatorRoot = forwardRef(function SeparatorRoot({ asChild, className, orientation = "horizontal", role, size = "sm", variant = "solid", "aria-orientation": ariaOrientation, ...props }, ref) {
-	const resolvedRole = role ?? "separator";
-	return /* @__PURE__ */ jsx(ark.span, {
-		ref,
-		asChild,
-		role: resolvedRole,
-		"aria-orientation": ariaOrientation ?? (resolvedRole === "separator" ? orientation : void 0),
-		"data-scope": "separator",
-		"data-part": "root",
-		"data-slot": "separator-root",
-		"data-orientation": orientation,
-		"data-size": size,
-		"data-variant": variant,
-		className: clsx(Separator_module_default.root, normalizeClassName(className)),
-		...props
-	});
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Separator_module from "./Separator.module.js";
+const Separator_SeparatorRoot = /*#__PURE__*/ forwardRef(function({ asChild, className, orientation = 'horizontal', role, size = 'sm', variant = 'solid', 'aria-orientation': ariaOrientation, ...props }, ref) {
+    const resolvedRole = role ?? 'separator';
+    return /*#__PURE__*/ jsx(ark.span, {
+        ...props,
+        ref: ref,
+        asChild: asChild,
+        role: resolvedRole,
+        "aria-orientation": ariaOrientation ?? ('separator' === resolvedRole ? orientation : void 0),
+        "data-scope": "separator",
+        "data-part": "root",
+        "data-slot": "separator-root",
+        "data-orientation": orientation,
+        "data-size": size,
+        "data-variant": variant,
+        className: clsx(Separator_module.root, normalizeClassName(className))
+    });
+});
+const Separator = Object.assign(Separator_SeparatorRoot, {
+    Root: Separator_SeparatorRoot
 });
-const Separator = Object.assign(SeparatorRoot, { Root: SeparatorRoot });
-//#endregion
 export { Separator };

package/dist/components/separator/Separator.module.js

@@ -1,5 +1,5 @@
-import './Separator.css';
-//#region src/components/separator/Separator.module.css
-var Separator_module_default = { "root": "Jd5mwa_root" };
-//#endregion
-export { Separator_module_default as default };
+import "./Separator_module.css";
+const Separator_module = {
+    root: "root-q9iyyK"
+};
+export default Separator_module;

package/dist/components/separator/Separator_module.css

@@ -0,0 +1,47 @@
+@layer moduix.components {
+  .root-q9iyyK {
+    border: 0;
+    border-color: var(--moduix-separator-color, var(--moduix-color-border));
+    border-style: var(--moduix-separator-border-style, var(--moduix-separator-variant-border-style, solid));
+    flex-shrink: 0;
+    margin: 0;
+    display: block;
+  }
+
+  .root-q9iyyK[data-size="xs"] {
+    --moduix-separator-size-thickness: var(--moduix-separator-thickness-xs, .5px);
+  }
+
+  .root-q9iyyK[data-size="sm"] {
+    --moduix-separator-size-thickness: var(--moduix-separator-thickness-sm, var(--moduix-border-width-sm));
+  }
+
+  .root-q9iyyK[data-size="md"] {
+    --moduix-separator-size-thickness: var(--moduix-separator-thickness-md, var(--moduix-border-width-md));
+  }
+
+  .root-q9iyyK[data-size="lg"] {
+    --moduix-separator-size-thickness: var(--moduix-separator-thickness-lg, 3px);
+  }
+
+  .root-q9iyyK[data-variant="dashed"] {
+    --moduix-separator-variant-border-style: dashed;
+  }
+
+  .root-q9iyyK[data-variant="dotted"] {
+    --moduix-separator-variant-border-style: dotted;
+  }
+
+  .root-q9iyyK[data-orientation="horizontal"] {
+    width: var(--moduix-separator-length-horizontal, 100%);
+    border-block-start-width: var(--moduix-separator-thickness, var(--moduix-separator-size-thickness, var(--moduix-border-width-sm)));
+    height: 0;
+  }
+
+  .root-q9iyyK[data-orientation="vertical"] {
+    width: 0;
+    height: var(--moduix-separator-length-vertical, 1em);
+    border-inline-start-width: var(--moduix-separator-thickness, var(--moduix-separator-size-thickness, var(--moduix-border-width-sm)));
+  }
+}
+

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

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

package/dist/components/separator/index.js

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