@moduix/react 2.1.0 → 2.2.4

package/dist/components/select/Select_module.css

@@ -0,0 +1,375 @@
+@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-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-disabled], .trigger-_8XyWR[disabled] {
+    cursor: default;
+  }
+
+  .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 {
+    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[hidden] {
+    display: none;
+  }
+
+  .indicator-ywAB27 {
+    pointer-events: none;
+  }
+
+  .trigger-_8XyWR > .indicator-ywAB27 {
+    pointer-events: auto;
+    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 > .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));
+    }
+  }
+
+  .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));
+    --moduix-close-button-transition: var(--moduix-select-transition, var(--moduix-transition-default));
+    pointer-events: auto;
+  }
+
+  .clearTrigger-bA52Dh[hidden] {
+    display: none;
+  }
+
+  .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-top: 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));
+  }
+
+  .itemText-yYAdr3 {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .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;
+  }
+}
+

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