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

package/dist/chunks/{chunk-RLP3U52D.mjs → chunk-33UFQJIO.mjs}

@@ -1,49 +1,22 @@
-import { cn } from './chunk-XALPBGSC.mjs';
+import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var radioGroupVariants = cva("nx:flex", {
+var radioGroupVariants = cva("nexus-radio-group", {
   variants: {
     orientation: {
-      horizontal: "nx:flex-row nx:gap-4",
-      vertical: "nx:flex-col nx:gap-2"
+      horizontal: "nexus-radio-group--horizontal",
+      vertical: "nexus-radio-group--vertical"
     }
   },
   defaultVariants: { orientation: "vertical" }
 });
-var radioItemVariants = cva(
-  "nx:inline-flex nx:items-center nx:gap-2 nx:select-none",
-  {
-    variants: {
-      size: {
-        sm: "nx:text-xs",
-        md: "nx:text-sm"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
-var circleVariants = cva(
-  [
-    "nx:inline-flex nx:shrink-0 nx:items-center nx:justify-center nx:rounded-full nx:border nx:transition-colors nx:duration-150",
-    "nx:peer-disabled:opacity-50 nx:peer-disabled:cursor-not-allowed"
-  ],
-  {
-    variants: {
-      size: {
-        sm: "nx:size-4",
-        md: "nx:size-5"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
-var dotVariants = cva("nx:rounded-full nx:bg-current", {
+var radioItemVariants = cva("nexus-radio-item", {
   variants: {
     size: {
-      sm: "nx:size-1.5",
-      md: "nx:size-2"
+      sm: "nexus-radio-item--sm",
+      md: "nexus-radio-item--md"
     }
   },
   defaultVariants: { size: "md" }
@@ -114,7 +87,7 @@ var RadioItem = React.forwardRef(
       {
         className: cn(
           radioItemVariants({ size }),
-          disabled ? "nx:cursor-not-allowed nx:opacity-50" : "nx:cursor-pointer",
+          disabled ? "nexus-radio-item--disabled" : "nexus-radio-item--pointer",
           className
         ),
         children: [
@@ -123,7 +96,7 @@ var RadioItem = React.forwardRef(
             {
               ref,
               type: "radio",
-              className: "nx:peer nx:sr-only",
+              className: "nexus-sr-only",
               name: ctx.name,
               value,
               checked,
@@ -136,13 +109,22 @@ var RadioItem = React.forwardRef(
             "span",
             {
               className: cn(
-                circleVariants({ size }),
-                checked ? "nx:border-accent-primary nx:text-accent-primary" : "nx:border-border-default nx:bg-surface-default"
+                size === "sm" ? "nexus-radio__circle--sm" : "nexus-radio__circle--md",
+                "nexus-radio__circle",
+                checked ? "nexus-radio__circle--checked" : "nexus-radio__circle--unchecked"
               ),
-              children: checked && /* @__PURE__ */ jsx("span", { className: dotVariants({ size }) })
+              children: checked && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "nexus-radio__dot",
+                    size === "sm" ? "nexus-radio__dot--sm" : "nexus-radio__dot--md"
+                  )
+                }
+              )
             }
           ),
-          content && /* @__PURE__ */ jsx("span", { className: "nx:text-text-primary", children: content })
+          content && /* @__PURE__ */ jsx("span", { className: "nexus-radio__label", children: content })
         ]
       }
     );

package/dist/chunks/{chunk-AOVU67NI.mjs → chunk-3HHJORN7.mjs}

@@ -1,7 +1,7 @@
-import { cn } from './chunk-XALPBGSC.mjs';
+import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import useEmblaCarousel from 'embla-carousel-react';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var CarouselContext = React.createContext(null);
 function useCarousel() {
@@ -39,11 +39,23 @@ var Carousel = React.forwardRef(
     }, [api, onSelect, onApiChange]);
     const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api]);
     const scrollNext = React.useCallback(() => api?.scrollNext(), [api]);
+    const slides = [];
+    const extras = [];
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement(child) && typeof child.type !== "string" && child.type.displayName === "CarouselSlide") {
+        slides.push(child);
+      } else {
+        extras.push(child);
+      }
+    });
     return /* @__PURE__ */ jsx(
       CarouselContext.Provider,
       {
         value: { api, canScrollPrev, canScrollNext, scrollPrev, scrollNext, selectedIndex, scrollSnapCount },
-        children: /* @__PURE__ */ jsx("div", { ref, className: cn("nx:relative", className), role: "region", "aria-roledescription": "carousel", "aria-label": props["aria-label"] ?? "Carousel", ...props, children: /* @__PURE__ */ jsx("div", { ref: emblaRef, className: "nx:overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "nx:flex", children }) }) })
+        children: /* @__PURE__ */ jsxs("div", { ref, className: cn("nexus-carousel", className), role: "region", "aria-roledescription": "carousel", "aria-label": props["aria-label"] ?? "Carousel", ...props, children: [
+          /* @__PURE__ */ jsx("div", { ref: emblaRef, className: "nexus-carousel__viewport", children: /* @__PURE__ */ jsx("div", { className: "nexus-carousel__container", children: slides }) }),
+          extras
+        ] })
       }
     );
   }
@@ -56,14 +68,14 @@ var CarouselSlide = React.forwardRef(
       ref,
       role: "group",
       "aria-roledescription": "slide",
-      className: cn("nx:min-w-0 nx:shrink-0 nx:grow-0 nx:basis-full", className),
+      className: cn("nexus-carousel-slide", className),
       ...props
     }
   )
 );
 CarouselSlide.displayName = "CarouselSlide";
-var ChevronLeftIcon = () => /* @__PURE__ */ jsx("svg", { className: "nx:size-4", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M10 4L6 8l4 4" }) });
-var ChevronRightIcon = () => /* @__PURE__ */ jsx("svg", { className: "nx:size-4", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4" }) });
+var ChevronLeftIcon = () => /* @__PURE__ */ jsx("svg", { className: "nexus-carousel-btn__icon", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M10 4L6 8l4 4" }) });
+var ChevronRightIcon = () => /* @__PURE__ */ jsx("svg", { className: "nexus-carousel-btn__icon", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4" }) });
 var CarouselPrev = React.forwardRef(
   ({ className, children, ...props }, ref) => {
     const { canScrollPrev, scrollPrev } = useCarousel();
@@ -72,14 +84,7 @@ var CarouselPrev = React.forwardRef(
       {
         ref,
         type: "button",
-        className: cn(
-          "nx:absolute nx:left-2 nx:top-1/2 nx:-translate-y-1/2 nx:z-10",
-          "nx:size-8 nx:inline-flex nx:items-center nx:justify-center nx:rounded-full",
-          "nx:bg-surface-default nx:border nx:border-border-default nx:shadow-sm",
-          "nx:text-text-primary nx:hover:bg-surface-hover nx:transition-colors",
-          "nx:disabled:opacity-40 nx:disabled:pointer-events-none",
-          className
-        ),
+        className: cn("nexus-carousel-btn nexus-carousel-btn--prev", className),
         disabled: !canScrollPrev,
         onClick: scrollPrev,
         "aria-label": "Previous slide",
@@ -98,14 +103,7 @@ var CarouselNext = React.forwardRef(
       {
         ref,
         type: "button",
-        className: cn(
-          "nx:absolute nx:right-2 nx:top-1/2 nx:-translate-y-1/2 nx:z-10",
-          "nx:size-8 nx:inline-flex nx:items-center nx:justify-center nx:rounded-full",
-          "nx:bg-surface-default nx:border nx:border-border-default nx:shadow-sm",
-          "nx:text-text-primary nx:hover:bg-surface-hover nx:transition-colors",
-          "nx:disabled:opacity-40 nx:disabled:pointer-events-none",
-          className
-        ),
+        className: cn("nexus-carousel-btn nexus-carousel-btn--next", className),
         disabled: !canScrollNext,
         onClick: scrollNext,
         "aria-label": "Next slide",
@@ -118,15 +116,15 @@ var CarouselNext = React.forwardRef(
 CarouselNext.displayName = "CarouselNext";
 function CarouselDots({ className }) {
   const { selectedIndex, scrollSnapCount, api } = useCarousel();
-  return /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": "Slide navigation", className: cn("nx:flex nx:justify-center nx:gap-1.5 nx:mt-3", className), children: Array.from({ length: scrollSnapCount }, (_, i) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": "Slide navigation", className: cn("nexus-carousel-dots", className), children: Array.from({ length: scrollSnapCount }, (_, i) => /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
       role: "tab",
       "aria-selected": i === selectedIndex,
       className: cn(
-        "nx:size-2 nx:rounded-full nx:transition-colors",
-        i === selectedIndex ? "nx:bg-accent-primary" : "nx:bg-border-default nx:hover:bg-text-tertiary"
+        "nexus-carousel-dot",
+        i === selectedIndex ? "nexus-carousel-dot--active" : "nexus-carousel-dot--inactive"
       ),
       onClick: () => api?.scrollTo(i),
       "aria-label": `Go to slide ${i + 1}`

package/dist/chunks/{chunk-TWHDXCKR.js → chunk-3PCNRCTB.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,16 +25,16 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var dividerVariants = classVarianceAuthority.cva("nx:shrink-0 nx:border-border-default", {
+var dividerVariants = classVarianceAuthority.cva("nexus-divider", {
   variants: {
     orientation: {
-      horizontal: "nx:w-full nx:border-t",
-      vertical: "nx:self-stretch nx:border-l"
+      horizontal: "nexus-divider--horizontal",
+      vertical: "nexus-divider--vertical"
     },
     variant: {
-      solid: "nx:border-solid",
-      dashed: "nx:border-dashed",
-      dotted: "nx:border-dotted"
+      solid: "nexus-divider--solid",
+      dashed: "nexus-divider--dashed",
+      dotted: "nexus-divider--dotted"
     }
   },
   defaultVariants: {
@@ -49,7 +49,7 @@ var Divider = React__namespace.forwardRef(
       ref,
       role: "separator",
       "aria-orientation": orientation ?? "horizontal",
-      className: chunkQJNQCLMV_js.cn(dividerVariants({ orientation, variant }), className),
+      className: chunkCZC76ZD5_js.cn(dividerVariants({ orientation, variant }), className),
       style: { ...style, ...color ? { borderColor: color } : {} },
       ...props
     }

package/dist/chunks/chunk-3ZWN66YH.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var ChevronRight = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4l4 4-4 4", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var Breadcrumb = React__namespace.forwardRef(
+  ({ className, items, separator, maxItems, ...props }, ref) => {
+    let displayItems = items;
+    let collapsed = false;
+    if (maxItems && maxItems > 2 && items.length > maxItems) {
+      displayItems = [
+        items[0],
+        { label: "..." },
+        ...items.slice(-(maxItems - 2))
+      ];
+      collapsed = true;
+    }
+    const sep = separator ?? /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, { className: "nexus-breadcrumb__separator-icon" });
+    return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, "aria-label": "Breadcrumb", className: chunkCZC76ZD5_js.cn("nexus-breadcrumb", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "nexus-breadcrumb__list", children: displayItems.map((item, i) => {
+      const isLast = i === displayItems.length - 1;
+      const isCollapsed = collapsed && i === 1;
+      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "nexus-breadcrumb__item", children: [
+        i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-breadcrumb__separator", "aria-hidden": "true", children: sep }),
+        isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-breadcrumb__ellipsis", children: "\u2026" }) : isLast ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-breadcrumb__current", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, className: "nexus-breadcrumb__link", onClick: item.onClick, children: item.label }) : item.onClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "nexus-breadcrumb__link nexus-breadcrumb__link--btn", onClick: item.onClick, children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-breadcrumb__link", children: item.label })
+      ] }, i);
+    }) }) });
+  }
+);
+Breadcrumb.displayName = "Breadcrumb";
+
+exports.Breadcrumb = Breadcrumb;

package/dist/chunks/chunk-4ENXP7WH.js

@@ -0,0 +1,224 @@
+'use strict';
+
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function formatWithComma(value) {
+  if (!value) return value;
+  const [intPart, decPart] = value.split(".");
+  const formatted = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return decPart !== void 0 ? `${formatted}.${decPart}` : formatted;
+}
+function stripComma(value) {
+  return value.replace(/,/g, "");
+}
+var priceInputVariants = classVarianceAuthority.cva("nexus-price-input", {
+  variants: {
+    size: {
+      md: "nexus-price-input--md",
+      lg: "nexus-price-input--lg",
+      xl: "nexus-price-input--xl"
+    },
+    state: {
+      default: "nexus-price-input--default",
+      error: "nexus-price-input--error"
+    }
+  },
+  defaultVariants: { size: "md", state: "default" }
+});
+var PriceInput = React__namespace.forwardRef(
+  ({
+    className,
+    size,
+    error,
+    prefix = true,
+    suffix,
+    label,
+    description,
+    balance,
+    balanceLabel = "Balance",
+    balanceContent,
+    maxBalance,
+    separator = false,
+    align = "left",
+    onValueChange,
+    onBalanceClick,
+    onChange,
+    value: controlledValue,
+    disabled,
+    id,
+    ...props
+  }, ref) => {
+    const fallbackId = React__namespace.useRef(
+      `nexus-pi-${Math.random().toString(36).slice(2, 9)}`
+    );
+    const inputId = id || fallbackId.current;
+    const inputRef = React__namespace.useRef(null);
+    const setInputRef = React__namespace.useCallback(
+      (node) => {
+        inputRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      [ref]
+    );
+    const isControlled = controlledValue !== void 0;
+    const [internalValue, setInternalValue] = React__namespace.useState("");
+    const currentValue = isControlled ? String(controlledValue) : internalValue;
+    const numericValue = currentValue !== "" ? parseFloat(currentValue) : NaN;
+    const isExceeded = maxBalance !== void 0 && !Number.isNaN(numericValue) && numericValue > maxBalance;
+    const hasError = error || isExceeded;
+    const state = hasError ? "error" : "default";
+    const prefixContent = prefix === true ? "$" : prefix === false ? null : prefix;
+    const hasHeader = !!(label || balance !== void 0);
+    const hasField = hasHeader || !!description;
+    const handleChange = React__namespace.useCallback(
+      (e) => {
+        const rawInput = e.target.value;
+        const raw = separator ? stripComma(rawInput) : rawInput;
+        if (!isControlled) setInternalValue(raw);
+        onValueChange?.(raw);
+        onChange?.(e);
+        if (separator && inputRef.current) {
+          const cursorPos = e.target.selectionStart ?? 0;
+          const commasBefore = (rawInput.slice(0, cursorPos).match(/,/g) || []).length;
+          const formatted = formatWithComma(raw);
+          const el = inputRef.current;
+          requestAnimationFrame(() => {
+            el.value = formatted;
+            const commasAfter = (formatted.slice(0, cursorPos).match(/,/g) || []).length;
+            const newPos = cursorPos + (commasAfter - commasBefore);
+            el.setSelectionRange(newPos, newPos);
+          });
+        }
+      },
+      [isControlled, onValueChange, onChange, separator]
+    );
+    const handleBalanceClick = React__namespace.useCallback(() => {
+      if (disabled || balance === void 0) return;
+      const balanceStr = String(balance);
+      const input = inputRef.current;
+      if (input) {
+        const setter = Object.getOwnPropertyDescriptor(
+          HTMLInputElement.prototype,
+          "value"
+        )?.set;
+        if (setter) {
+          setter.call(input, balanceStr);
+          input.dispatchEvent(new Event("input", { bubbles: true }));
+        }
+      }
+      if (!isControlled) setInternalValue(balanceStr);
+      onValueChange?.(balanceStr);
+      onBalanceClick?.(balance);
+      input?.focus();
+    }, [disabled, balance, isControlled, onValueChange, onBalanceClick]);
+    const handleWrapperClick = React__namespace.useCallback(() => {
+      if (!disabled) inputRef.current?.focus();
+    }, [disabled]);
+    const inputBox = /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: chunkCZC76ZD5_js.cn(
+          priceInputVariants({ size, state }),
+          disabled && "nexus-price-input--disabled",
+          !hasField && className
+        ),
+        onClick: handleWrapperClick,
+        children: [
+          prefixContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-price-input__prefix", children: prefixContent }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: setInputRef,
+              id: label ? inputId : id,
+              className: chunkCZC76ZD5_js.cn(
+                "nexus-price-input__inner",
+                align === "right" && "nexus-price-input__inner--right"
+              ),
+              disabled,
+              "aria-invalid": hasError || void 0,
+              "aria-describedby": description ? `${inputId}-desc` : void 0,
+              value: isControlled ? separator ? formatWithComma(String(controlledValue)) : controlledValue : void 0,
+              defaultValue: !isControlled ? void 0 : void 0,
+              onChange: handleChange,
+              inputMode: "decimal",
+              ...props
+            }
+          ),
+          suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-price-input__suffix", children: suffix })
+        ]
+      }
+    );
+    if (!hasField) return inputBox;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkCZC76ZD5_js.cn("nexus-price-input-field", className), children: [
+      hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-price-input-field__header", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            className: "nexus-price-input-field__label",
+            htmlFor: inputId,
+            children: label
+          }
+        ),
+        balance !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "nexus-price-input-field__balance",
+            onClick: handleBalanceClick,
+            disabled,
+            tabIndex: -1,
+            children: balanceContent ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              balanceLabel,
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkCZC76ZD5_js.cn(
+                "nexus-price-input-field__balance-value",
+                isExceeded && "nexus-price-input-field__balance-value--exceeded"
+              ), children: balance })
+            ] })
+          }
+        )
+      ] }),
+      inputBox,
+      description && /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          id: `${inputId}-desc`,
+          className: chunkCZC76ZD5_js.cn(
+            "nexus-price-input-field__description",
+            hasError && "nexus-price-input-field__description--error"
+          ),
+          children: description
+        }
+      )
+    ] });
+  }
+);
+PriceInput.displayName = "PriceInput";
+
+exports.PriceInput = PriceInput;
+exports.priceInputVariants = priceInputVariants;

package/dist/chunks/{chunk-YEGPB7A7.js → chunk-5JHJNN2K.js}

@@ -1,10 +1,10 @@
 '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');
 
-var DefaultSpinner = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nx:flex nx:items-center nx:justify-center nx:py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nx:h-6 nx:w-6 nx:animate-spin nx:rounded-full nx:border-2 nx:border-border-default nx:border-t-accent-primary" }) });
+var DefaultSpinner = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-infinite-spinner", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-infinite-spinner-icon" }) });
 var InfiniteScroll = ({
   className = "",
   tag = "div",
@@ -74,9 +74,9 @@ var InfiniteScroll = ({
   react.useEffect(() => {
     loadingRef.current = loading;
   }, [loading]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkQJNQCLMV_js.cn("nx:relative", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkCZC76ZD5_js.cn("nexus-infinite-scroll", className), children: [
     react.createElement(tag, null, children),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: target, className: "nx:relative nx:h-px nx:w-full", children: loading && (list ?? []).length > 0 && loadingElement })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: target, className: "nexus-infinite-sentinel", role: "status", "aria-live": "polite", children: loading && (list ?? []).length > 0 && loadingElement })
   ] });
 };
 

package/dist/chunks/chunk-5PQ3UCKF.js

@@ -0,0 +1,99 @@
+'use strict';
+
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var alertVariants = classVarianceAuthority.cva("nexus-alert", {
+  variants: {
+    variant: {
+      info: "nexus-alert--info",
+      success: "nexus-alert--success",
+      warning: "nexus-alert--warning",
+      danger: "nexus-alert--danger"
+    }
+  },
+  defaultVariants: {
+    variant: "info"
+  }
+});
+var statusIcons = {
+  info: ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
+  success: ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }),
+  warning: ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
+  danger: ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) })
+};
+var CloseIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", strokeLinecap: "round" }) });
+var Alert = React__namespace.forwardRef(
+  ({
+    className,
+    children,
+    variant = "info",
+    title,
+    icon,
+    closable = false,
+    onClose,
+    action,
+    ...props
+  }, ref) => {
+    const [visible, setVisible] = React__namespace.useState(true);
+    const handleClose = React__namespace.useCallback(() => {
+      setVisible(false);
+      onClose?.();
+    }, [onClose]);
+    if (!visible) return null;
+    const IconComp = icon === void 0 ? statusIcons[variant ?? "info"] : null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: chunkCZC76ZD5_js.cn(alertVariants({ variant }), className),
+        ...props,
+        children: [
+          (icon || IconComp) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-alert__icon", children: icon ?? (IconComp && /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: "nexus-alert__icon-svg" })) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-alert__body", children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "nexus-alert__title", children: title }),
+            children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-alert__description", children })
+          ] }),
+          action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-alert__action", children: action }),
+          closable && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "nexus-alert__close",
+              onClick: handleClose,
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { className: "nexus-alert__close-icon" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+
+exports.Alert = Alert;
+exports.alertVariants = alertVariants;