@nexus-cross/design-system 1.0.4-beta.1 → 1.0.4

package/dist/chunks/chunk-6BWOKTVQ.mjs

@@ -0,0 +1,87 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var ImageIcon = ({ className }) => /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+  /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 15l-5-5L5 21" })
+] });
+var NxImage = React.forwardRef(
+  ({
+    className,
+    src,
+    alt,
+    fallback,
+    fallbackSrc,
+    aspectRatio,
+    objectFit = "cover",
+    lazy = true,
+    wrapperClassName,
+    style,
+    onError,
+    onLoad,
+    ...props
+  }, ref) => {
+    const [status, setStatus] = React.useState(
+      "loading"
+    );
+    React.useEffect(() => {
+      setStatus("loading");
+    }, [src]);
+    const handleLoad = React.useCallback(
+      (e) => {
+        setStatus("loaded");
+        onLoad?.(e);
+      },
+      [onLoad]
+    );
+    const handleError = React.useCallback(
+      (e) => {
+        if (fallbackSrc && e.currentTarget.src !== fallbackSrc) {
+          e.currentTarget.src = fallbackSrc;
+          return;
+        }
+        setStatus("error");
+        onError?.(e);
+      },
+      [fallbackSrc, onError]
+    );
+    const wrapperStyle = {
+      ...style,
+      ...aspectRatio ? { aspectRatio } : {}
+    };
+    const showFallback = status === "error" || !src;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("nexus-image", wrapperClassName),
+        style: wrapperStyle,
+        children: showFallback ? /* @__PURE__ */ jsx("div", { className: "nexus-image__fallback", children: fallback ?? /* @__PURE__ */ jsx(ImageIcon, { className: "nexus-image__fallback-icon" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          status === "loading" && /* @__PURE__ */ jsx("div", { className: "nexus-image__skeleton" }),
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              ref,
+              src,
+              alt: alt ?? "",
+              loading: lazy ? "lazy" : "eager",
+              className: cn(
+                "nexus-image__img",
+                `nexus-image__img--${objectFit}`,
+                status === "loaded" && "nexus-image__img--loaded",
+                className
+              ),
+              onLoad: handleLoad,
+              onError: handleError,
+              ...props
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+NxImage.displayName = "NxImage";
+
+export { NxImage };

package/dist/chunks/chunk-6DBRL6NA.mjs

@@ -0,0 +1,81 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DropdownMenu = ({
+  children,
+  items,
+  align = "start",
+  side = "bottom",
+  className,
+  contentClassName
+}) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Root, { children: [
+  /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { asChild: true, className, children }),
+  /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      align,
+      side,
+      sideOffset: 4,
+      className: cn("nexus-dropdown-content", contentClassName),
+      children: items.map(
+        (item, i) => item.separator ? /* @__PURE__ */ jsx(
+          DropdownMenuPrimitive.Separator,
+          {
+            className: "nexus-dropdown-separator"
+          },
+          i
+        ) : /* @__PURE__ */ jsxs(
+          DropdownMenuPrimitive.Item,
+          {
+            className: cn(
+              "nexus-dropdown-item",
+              item.danger && "nexus-dropdown-item--danger"
+            ),
+            disabled: item.disabled,
+            onSelect: item.onClick,
+            children: [
+              item.icon && /* @__PURE__ */ jsx("span", { className: "nexus-dropdown-item__icon", children: item.icon }),
+              /* @__PURE__ */ jsx("span", { children: item.label })
+            ]
+          },
+          item.value ?? i
+        )
+      )
+    }
+  ) })
+] });
+DropdownMenu.displayName = "DropdownMenu";
+var DropdownMenuRoot = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn("nexus-dropdown-content", className),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuItem = React.forwardRef(({ className, danger, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn("nexus-dropdown-item", danger && "nexus-dropdown-item--danger", className),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("nexus-dropdown-separator", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+
+export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuTrigger };

package/dist/chunks/{chunk-C3E7CSKG.mjs → chunk-6FMDO6TT.mjs}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-XALPBGSC.mjs';
+import { cn } from './chunk-MCKOWMLS.mjs';
 import { useRef, useState, useCallback, useMemo, useLayoutEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -85,12 +85,12 @@ var Ellipsis = ({
       });
     }
   }, [shortened, content, observingEnvs, resetContentElementAfterMeasuring]);
-  return /* @__PURE__ */ jsxs("div", { className: cn("nx:relative", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("nexus-ellipsis", className), children: [
     /* @__PURE__ */ jsx(
       "div",
       {
         ref: contentRef,
-        className: "nx:overflow-hidden nx:transition-[height] nx:duration-300",
+        className: "nexus-ellipsis__content",
         style: contentStyle,
         children: typeof content === "string" ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: content } }) : content
       }
@@ -98,14 +98,13 @@ var Ellipsis = ({
     triggerVisible && /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         onClick: onShowMoreLessClick ?? handleToggle,
-        className: cn(
-          "nx:mt-1 nx:flex nx:items-center nx:gap-1 nx:text-sm nx:text-text-secondary nx:transition-colors nx:hover:text-text-primary",
-          !shortened && "nx:[&>svg]:rotate-180"
-        ),
+        className: cn("nexus-ellipsis__trigger", !shortened && "nexus-ellipsis__trigger--expanded"),
+        "aria-expanded": !shortened,
         children: [
           shortened ? triggerMore : triggerLess,
-          /* @__PURE__ */ jsx(ChevronDown, { className: "nx:h-3.5 nx:w-3.5 nx:transition-transform nx:duration-200" })
+          /* @__PURE__ */ jsx(ChevronDown, { className: "nexus-ellipsis__chevron" })
         ]
       }
     )

package/dist/chunks/{chunk-76CY4STF.js → chunk-7G65JBTN.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkQJNQCLMV_js = require('./chunk-QJNQCLMV.js');
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
 var SelectPrimitive = require('@radix-ui/react-select');
 var classVarianceAuthority = require('class-variance-authority');
 var react = require('react');
@@ -26,51 +26,32 @@ function _interopNamespace(e) {
 
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 
-var selectTriggerVariants = classVarianceAuthority.cva(
-  [
-    "nx:relative",
-    "nx:flex nx:h-10 nx:items-center nx:justify-between nx:rounded nx:border nx:bg-surface-default nx:border-border-default",
-    "nx:placeholder:text-text-tertiary",
-    "nx:disabled:cursor-not-allowed nx:disabled:opacity-50",
-    "nx:hover:border-border-strong nx:transition-all nx:duration-200"
-  ],
-  {
-    variants: {
-      variant: {
-        default: "nx:bg-surface-hover",
-        outline: "nx:bg-surface-default"
-      },
-      size: {
-        sm: "nx:w-16",
-        md: "nx:w-32",
-        lg: "nx:w-48",
-        full: "nx:w-full"
-      }
+var selectTriggerVariants = classVarianceAuthority.cva("nexus-select-trigger", {
+  variants: {
+    variant: {
+      default: "nexus-select-trigger--default",
+      outline: "nexus-select-trigger--outline"
     },
-    defaultVariants: { variant: "default", size: "full" }
-  }
-);
-var selectContentVariants = classVarianceAuthority.cva(
-  [
-    "nx:relative nx:z-50 nx:max-h-96 nx:overflow-hidden nx:rounded nx:border nx:bg-surface-default nx:border-border-default nx:shadow-lg",
-    "nx:data-[state=open]:animate-in nx:data-[state=closed]:animate-out",
-    "nx:data-[state=closed]:fade-out-0 nx:data-[state=open]:fade-in-0",
-    "nx:data-[state=closed]:zoom-out-95 nx:data-[state=open]:zoom-in-95",
-    "nx:data-[side=bottom]:slide-in-from-top-2 nx:data-[side=left]:slide-in-from-right-2",
-    "nx:data-[side=right]:slide-in-from-left-2 nx:data-[side=top]:slide-in-from-bottom-2"
-  ],
-  {
-    variants: {
-      size: {
-        sm: "nx:w-16",
-        md: "nx:w-32",
-        lg: "nx:w-48",
-        full: "nx:w-[var(--radix-popper-anchor-width)]"
-      }
-    },
-    defaultVariants: { size: "full" }
-  }
-);
+    size: {
+      sm: "nexus-select-trigger--sm",
+      md: "nexus-select-trigger--md",
+      lg: "nexus-select-trigger--lg",
+      full: "nexus-select-trigger--full"
+    }
+  },
+  defaultVariants: { variant: "default", size: "full" }
+});
+var selectContentVariants = classVarianceAuthority.cva("nexus-select-content", {
+  variants: {
+    size: {
+      sm: "nexus-select-content--sm",
+      md: "nexus-select-content--md",
+      lg: "nexus-select-content--lg",
+      full: "nexus-select-content--full"
+    }
+  },
+  defaultVariants: { size: "full" }
+});
 var ChevronDown = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) });
 var Select = ({
   children,
@@ -95,28 +76,22 @@ var Select = ({
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: chunkQJNQCLMV_js.cn(
+          className: chunkCZC76ZD5_js.cn(
             selectTriggerVariants({ size, variant }),
-            displayComponent && "nx:justify-end",
+            displayComponent && "nexus-select-trigger--justify-end",
             className
           ),
           children: [
-            displayComponent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nx:absolute nx:top-0 nx:left-0 nx:flex nx:h-full nx:w-[calc(100%-30px)] nx:items-center", children: displayComponent }),
+            displayComponent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-select-trigger__display", children: displayComponent }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               SelectPrimitive__namespace.Trigger,
               {
-                className: chunkQJNQCLMV_js.cn(
-                  "nx:flex nx:h-full nx:w-full nx:flex-row-reverse nx:items-center nx:justify-between nx:rounded nx:px-3 nx:py-2 nx:focus:outline-none",
-                  triggerClassName
-                ),
+                className: chunkCZC76ZD5_js.cn("nexus-select-trigger__inner", triggerClassName),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
                     ChevronDown,
                     {
-                      className: chunkQJNQCLMV_js.cn(
-                        "nx:size-3 nx:opacity-50 nx:transition-transform nx:duration-200",
-                        isOpen && "nx:rotate-180"
-                      )
+                      className: chunkCZC76ZD5_js.cn("nexus-select-chevron", isOpen && "nexus-select-chevron--open")
                     }
                   ) }),
                   !displayComponent && /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Value, { placeholder })
@@ -126,9 +101,9 @@ var Select = ({
             /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
               SelectPrimitive__namespace.Content,
               {
-                className: chunkQJNQCLMV_js.cn(selectContentVariants({ size })),
+                className: chunkCZC76ZD5_js.cn(selectContentVariants({ size })),
                 position: "popper",
-                children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Viewport, { className: "nx:p-1", children })
+                children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Viewport, { className: "nexus-select-viewport", children })
               }
             ) })
           ]
@@ -147,14 +122,7 @@ var SelectItem = ({
   {
     value,
     disabled,
-    className: chunkQJNQCLMV_js.cn(
-      "nx:relative nx:flex nx:w-full nx:cursor-pointer nx:items-center nx:rounded nx:px-3 nx:py-2 nx:transition-colors nx:outline-none nx:select-none",
-      "nx:hover:bg-surface-hover",
-      "nx:focus:bg-surface-hover",
-      "nx:data-[disabled]:pointer-events-none nx:data-[disabled]:opacity-50",
-      "nx:data-[highlighted]:bg-surface-hover",
-      className
-    ),
+    className: chunkCZC76ZD5_js.cn("nexus-select-item", className),
     children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
   }
 );

package/dist/chunks/{chunk-GMIGQ5VP.mjs → chunk-ADO7PDLY.mjs}

@@ -1,36 +1,17 @@
-import { cn } from './chunk-XALPBGSC.mjs';
+import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var switchVariants = cva(
-  [
-    "nx:relative nx:inline-flex nx:shrink-0 nx:cursor-pointer nx:rounded-full nx:transition-colors nx:duration-200",
-    "nx:border-2 nx:border-transparent",
-    "nx:disabled:cursor-not-allowed nx:disabled:opacity-50"
-  ],
-  {
-    variants: {
-      size: {
-        sm: "nx:h-5 nx:w-9",
-        md: "nx:h-6 nx:w-11"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
-var thumbVariants = cva(
-  "nx:pointer-events-none nx:block nx:rounded-full nx:bg-white nx:shadow-sm nx:transition-transform nx:duration-200",
-  {
-    variants: {
-      size: {
-        sm: "nx:size-4",
-        md: "nx:size-5"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
+var switchVariants = cva("nexus-switch", {
+  variants: {
+    size: {
+      sm: "nexus-switch--sm",
+      md: "nexus-switch--md"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
 var Switch = React.forwardRef(
   ({ className, size, checked, disabled, readOnly, onCheckedChange, onChange, ...props }, ref) => {
     const handleChange = React.useCallback(
@@ -40,14 +21,12 @@ var Switch = React.forwardRef(
       },
       [onCheckedChange, onChange]
     );
-    const translateClass = size === "sm" ? "nx:translate-x-4" : "nx:translate-x-5";
     return /* @__PURE__ */ jsxs(
       "label",
       {
         className: cn(
           switchVariants({ size }),
-          checked ? "nx:bg-accent-primary" : "nx:bg-border-default",
-          disabled && "nx:cursor-not-allowed nx:opacity-50",
+          checked ? "nexus-switch--checked" : "nexus-switch--unchecked",
           className
         ),
         children: [
@@ -57,7 +36,7 @@ var Switch = React.forwardRef(
               ref,
               type: "checkbox",
               role: "switch",
-              className: "nx:sr-only",
+              className: "nexus-sr-only",
               checked,
               disabled,
               readOnly,
@@ -71,8 +50,9 @@ var Switch = React.forwardRef(
             {
               "aria-hidden": "true",
               className: cn(
-                thumbVariants({ size }),
-                checked ? translateClass : "nx:translate-x-0"
+                "nexus-switch__thumb",
+                size === "sm" ? "nexus-switch__thumb--sm" : "nexus-switch__thumb--md",
+                checked ? size === "sm" ? "nexus-switch__thumb--sm-on" : "nexus-switch__thumb--md-on" : "nexus-switch__thumb--off"
               )
             }
           )

package/dist/chunks/{chunk-ZINDMFOI.js → chunk-AFSEYJZT.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkQJNQCLMV_js = require('./chunk-QJNQCLMV.js');
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
 var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
@@ -25,28 +25,23 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var numberInputVariants = classVarianceAuthority.cva(
-  [
-    "nx:flex nx:w-full nx:items-center nx:rounded-md nx:border nx:bg-surface-default nx:text-text-primary",
-    "nx:transition-colors nx:duration-200"
-  ],
-  {
-    variants: {
-      size: {
-        sm: "nx:h-8 nx:text-xs",
-        md: "nx:h-10 nx:text-sm",
-        lg: "nx:h-12 nx:text-base"
-      },
-      state: {
-        default: "nx:border-border-default nx:focus-within:border-text-primary",
-        error: "nx:border-status-negative nx:focus-within:border-status-negative"
-      }
+var numberInputVariants = classVarianceAuthority.cva("nexus-number-input", {
+  variants: {
+    size: {
+      sm: "nexus-number-input--sm",
+      md: "nexus-number-input--md",
+      lg: "nexus-number-input--lg",
+      xl: "nexus-number-input--xl"
     },
-    defaultVariants: { size: "md", state: "default" }
-  }
-);
-var ChevronUp = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "nx:size-3", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 7.5L6 4.5l3 3" }) });
-var ChevronDown = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "nx:size-3", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 4.5L6 7.5l3-3" }) });
+    state: {
+      default: "nexus-number-input--default",
+      error: "nexus-number-input--error"
+    }
+  },
+  defaultVariants: { size: "md", state: "default" }
+});
+var ChevronUp = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "nexus-number-input__step-icon", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 7.5L6 4.5l3 3" }) });
+var ChevronDown = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "nexus-number-input__step-icon", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 4.5L6 7.5l3-3" }) });
 function clampValue(val, min, max) {
   let result = val;
   if (min !== void 0) result = Math.max(min, result);
@@ -194,7 +189,7 @@ var NumberInput = React__namespace.forwardRef(
       }),
       [step]
     );
-    const padSize = size === "sm" ? "nx:px-2" : size === "lg" ? "nx:px-3.5" : "nx:px-3";
+    const padSize = size === "sm" ? "nexus-number-input__field--sm" : size === "xl" ? "nexus-number-input__field--xl" : size === "lg" ? "nexus-number-input__field--lg" : "nexus-number-input__field--md";
     const showButtons = !hideButtons && !readOnly && !disabled;
     const numValue = parseFloat(internalValue) || 0;
     const isMinDisabled = min !== void 0 && numValue <= min;
@@ -202,9 +197,9 @@ var NumberInput = React__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: chunkQJNQCLMV_js.cn(
+        className: chunkCZC76ZD5_js.cn(
           numberInputVariants({ size, state }),
-          disabled && "nx:opacity-50 nx:cursor-not-allowed",
+          disabled && "nexus-number-input--disabled",
           className
         ),
         children: [
@@ -215,10 +210,7 @@ var NumberInput = React__namespace.forwardRef(
               type: "text",
               inputMode: "decimal",
               role: "spinbutton",
-              className: chunkQJNQCLMV_js.cn(
-                "nx:h-full nx:w-full nx:min-w-0 nx:flex-1 nx:bg-transparent nx:outline-none nx:placeholder:text-text-tertiary",
-                padSize
-              ),
+              className: chunkCZC76ZD5_js.cn("nexus-number-input__field", padSize),
               value: internalValue,
               disabled,
               readOnly,
@@ -233,14 +225,14 @@ var NumberInput = React__namespace.forwardRef(
               ...props
             }
           ),
-          showButtons && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nx:flex nx:flex-col nx:border-l nx:border-border-default nx:h-full nx:shrink-0", children: [
+          showButtons && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-number-input__buttons", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
                 tabIndex: -1,
                 disabled: isMaxDisabled,
-                className: "nx:flex nx:flex-1 nx:items-center nx:justify-center nx:px-1.5 nx:text-text-tertiary nx:hover:text-text-primary nx:hover:bg-surface-hover nx:disabled:opacity-40 nx:disabled:pointer-events-none nx:transition-colors nx:rounded-tr-md nx:border-b nx:border-border-default",
+                className: "nexus-number-input__step nexus-number-input__step--up",
                 onPointerDown: (e) => startRepeat(step, e),
                 onPointerUp: stopRepeat,
                 onPointerLeave: stopRepeat,
@@ -254,7 +246,7 @@ var NumberInput = React__namespace.forwardRef(
                 type: "button",
                 tabIndex: -1,
                 disabled: isMinDisabled,
-                className: "nx:flex nx:flex-1 nx:items-center nx:justify-center nx:px-1.5 nx:text-text-tertiary nx:hover:text-text-primary nx:hover:bg-surface-hover nx:disabled:opacity-40 nx:disabled:pointer-events-none nx:transition-colors nx:rounded-br-md",
+                className: "nexus-number-input__step nexus-number-input__step--down",
                 onPointerDown: (e) => startRepeat(-step, e),
                 onPointerUp: stopRepeat,
                 onPointerLeave: stopRepeat,

package/dist/chunks/chunk-B5O6W3Z4.mjs

@@ -0,0 +1,73 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var progressVariants = cva("nexus-progress", {
+  variants: {
+    variant: {
+      primary: "nexus-progress--primary",
+      success: "nexus-progress--success",
+      warning: "nexus-progress--warning",
+      danger: "nexus-progress--danger",
+      info: "nexus-progress--info"
+    },
+    size: {
+      sm: "nexus-progress--sm",
+      md: "nexus-progress--md",
+      lg: "nexus-progress--lg"
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md"
+  }
+});
+var Progress = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    value = 0,
+    max = 100,
+    showValue = false,
+    indeterminate = false,
+    label,
+    ...props
+  }, ref) => {
+    const percentage = Math.min(100, Math.max(0, value / max * 100));
+    return /* @__PURE__ */ jsxs("div", { className: cn("nexus-progress-wrapper", className), ref, ...props, children: [
+      (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "nexus-progress__header", children: [
+        label && /* @__PURE__ */ jsx("span", { className: "nexus-progress__label", children: label }),
+        showValue && !indeterminate && /* @__PURE__ */ jsxs("span", { className: "nexus-progress__value", children: [
+          Math.round(percentage),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(progressVariants({ variant, size })),
+          role: "progressbar",
+          "aria-valuenow": indeterminate ? void 0 : value,
+          "aria-valuemin": 0,
+          "aria-valuemax": max,
+          "aria-label": label,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "nexus-progress__bar",
+                indeterminate && "nexus-progress__bar--indeterminate"
+              ),
+              style: indeterminate ? void 0 : { width: `${percentage}%` }
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+Progress.displayName = "Progress";
+
+export { Progress, progressVariants };

package/dist/chunks/{chunk-6FHK6CBR.js → chunk-B6G5TJRO.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkQJNQCLMV_js = require('./chunk-QJNQCLMV.js');
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -87,12 +87,12 @@ var Ellipsis = ({
       });
     }
   }, [shortened, content, observingEnvs, resetContentElementAfterMeasuring]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkQJNQCLMV_js.cn("nx:relative", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkCZC76ZD5_js.cn("nexus-ellipsis", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref: contentRef,
-        className: "nx:overflow-hidden nx:transition-[height] nx:duration-300",
+        className: "nexus-ellipsis__content",
         style: contentStyle,
         children: typeof content === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: content } }) : content
       }
@@ -100,14 +100,13 @@ var Ellipsis = ({
     triggerVisible && /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
+        type: "button",
         onClick: onShowMoreLessClick ?? handleToggle,
-        className: chunkQJNQCLMV_js.cn(
-          "nx:mt-1 nx:flex nx:items-center nx:gap-1 nx:text-sm nx:text-text-secondary nx:transition-colors nx:hover:text-text-primary",
-          !shortened && "nx:[&>svg]:rotate-180"
-        ),
+        className: chunkCZC76ZD5_js.cn("nexus-ellipsis__trigger", !shortened && "nexus-ellipsis__trigger--expanded"),
+        "aria-expanded": !shortened,
         children: [
           shortened ? triggerMore : triggerLess,
-          /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { className: "nx:h-3.5 nx:w-3.5 nx:transition-transform nx:duration-200" })
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { className: "nexus-ellipsis__chevron" })
         ]
       }
     )