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

package/dist/chunks/chunk-BBLBTOP4.js

@@ -0,0 +1,205 @@
+'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 textInputVariants = classVarianceAuthority.cva("nexus-text-input", {
+  variants: {
+    size: {
+      md: "nexus-text-input--md",
+      lg: "nexus-text-input--lg",
+      xl: "nexus-text-input--xl"
+    },
+    state: {
+      default: "nexus-text-input--default",
+      error: "nexus-text-input--error"
+    }
+  },
+  defaultVariants: { size: "md", state: "default" }
+});
+var ClearIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" })
+  }
+);
+var TextInput = React__namespace.forwardRef(
+  ({
+    className,
+    size,
+    error,
+    prefixIcon,
+    suffixIcon,
+    label,
+    description,
+    showCount,
+    clearable,
+    onValueChange,
+    onChange,
+    value: controlledValue,
+    defaultValue,
+    disabled,
+    maxLength,
+    id,
+    ...props
+  }, ref) => {
+    const fallbackId = React__namespace.useRef(
+      `nexus-ti-${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(
+      () => defaultValue != null ? String(defaultValue) : ""
+    );
+    const currentValue = isControlled ? String(controlledValue) : internalValue;
+    const charCount = currentValue.length;
+    const isOverLimit = !!(maxLength && charCount > maxLength);
+    const state = error || isOverLimit ? "error" : "default";
+    const hasField = !!(label || description || showCount);
+    const handleChange = React__namespace.useCallback(
+      (e) => {
+        if (!isControlled) setInternalValue(e.target.value);
+        onValueChange?.(e.target.value);
+        onChange?.(e);
+      },
+      [isControlled, onValueChange, onChange]
+    );
+    const handleClear = React__namespace.useCallback(() => {
+      const input = inputRef.current;
+      if (!input) return;
+      const setter = Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        "value"
+      )?.set;
+      if (setter) {
+        setter.call(input, "");
+        input.dispatchEvent(new Event("input", { bubbles: true }));
+      }
+      if (!isControlled) setInternalValue("");
+      onValueChange?.("");
+      input.focus();
+    }, [isControlled, onValueChange]);
+    const handleWrapperClick = React__namespace.useCallback(() => {
+      if (!disabled) inputRef.current?.focus();
+    }, [disabled]);
+    const inputBox = /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: chunkCZC76ZD5_js.cn(
+          textInputVariants({ size, state }),
+          disabled && "nexus-text-input--disabled",
+          !hasField && className
+        ),
+        onClick: handleWrapperClick,
+        children: [
+          prefixIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-text-input__icon", children: prefixIcon }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: setInputRef,
+              id: label ? inputId : id,
+              className: "nexus-text-input__inner",
+              disabled,
+              maxLength: showCount ? void 0 : maxLength,
+              "aria-invalid": error || isOverLimit || void 0,
+              "aria-describedby": description ? `${inputId}-desc` : void 0,
+              value: isControlled ? controlledValue : void 0,
+              defaultValue: !isControlled ? defaultValue : void 0,
+              onChange: handleChange,
+              ...props
+            }
+          ),
+          clearable && currentValue.length > 0 && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "nexus-text-input__clear",
+              onClick: handleClear,
+              tabIndex: -1,
+              "aria-label": "Clear",
+              children: /* @__PURE__ */ jsxRuntime.jsx(ClearIcon, {})
+            }
+          ),
+          suffixIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-text-input__icon", children: suffixIcon })
+        ]
+      }
+    );
+    if (!hasField) return inputBox;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkCZC76ZD5_js.cn("nexus-text-input-field", className), children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "nexus-text-input-field__label", htmlFor: inputId, children: label }),
+      inputBox,
+      (description || showCount && maxLength) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-text-input-field__footer", children: [
+        description && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            id: `${inputId}-desc`,
+            className: chunkCZC76ZD5_js.cn(
+              "nexus-text-input-field__description",
+              (error || isOverLimit) && "nexus-text-input-field__description--error"
+            ),
+            children: description
+          }
+        ),
+        showCount && maxLength && /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: chunkCZC76ZD5_js.cn(
+              "nexus-text-input-field__count",
+              isOverLimit && "nexus-text-input-field__count--error"
+            ),
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            children: [
+              charCount,
+              "/",
+              maxLength
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+TextInput.displayName = "TextInput";
+
+exports.TextInput = TextInput;
+exports.textInputVariants = textInputVariants;

package/dist/chunks/{chunk-5XVEYVYA.js → chunk-BLGQHR3M.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');
 
@@ -40,17 +40,14 @@ var Skeleton = React__namespace.forwardRef(
       ref,
       role: "status",
       "aria-label": "Loading",
-      className: chunkQJNQCLMV_js.cn(
-        "nx:relative nx:overflow-hidden",
-        circle ? "nx:rounded-full" : "nx:rounded-md",
-        "nx:bg-gradient-to-r nx:from-surface-hover nx:via-surface-default nx:to-surface-hover",
-        "nx:bg-[length:300%_100%]",
-        "nx:animate-skeleton",
+      className: chunkCZC76ZD5_js.cn(
+        "nexus-skeleton",
+        circle ? "nexus-skeleton--circle" : "nexus-skeleton--rect",
         className
       ),
       style: { width, height, ...style },
       ...props,
-      children: children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nx:opacity-0", children })
+      children: children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-skeleton__children", children })
     }
   )
 );

package/dist/chunks/{chunk-LVTD2UQN.mjs → chunk-BPUQ2CO2.mjs}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-XALPBGSC.mjs';
+import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -9,7 +9,7 @@ var Spinner = React.forwardRef(
       ref,
       role: "status",
       "aria-label": ariaLabel,
-      className: cn("nx:animate-spin nx:text-current", className),
+      className: cn("nexus-spinner", className),
       viewBox: "0 0 50 50",
       fill: "none",
       style: { width: size, height: size },

package/dist/chunks/{chunk-AWBGWBFS.js → chunk-BSZ2LN6E.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 vaul = require('vaul');
 var classVarianceAuthority = require('class-variance-authority');
@@ -27,30 +27,27 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var DrawerDirectionCtx = React__namespace.createContext("bottom");
-var drawerOverlayVariants = classVarianceAuthority.cva("nx:fixed nx:inset-0 nx:z-50 nx:bg-static-black/60", {
+var drawerOverlayVariants = classVarianceAuthority.cva("nexus-drawer-overlay", {
   variants: {
     blur: {
       none: "",
-      sm: "nx:backdrop-blur-sm",
-      md: "nx:backdrop-blur-md"
+      sm: "nexus-drawer-overlay--blur-sm",
+      md: "nexus-drawer-overlay--blur-md"
     }
   },
   defaultVariants: { blur: "none" }
 });
-var drawerContentVariants = classVarianceAuthority.cva(
-  "nx:fixed nx:z-50 nx:flex nx:flex-col nx:bg-surface-default",
-  {
-    variants: {
-      direction: {
-        bottom: "nx:inset-x-0 nx:bottom-0 nx:mt-24 nx:rounded-t-2xl nx:border-t nx:border-border-default",
-        top: "nx:inset-x-0 nx:top-0 nx:mb-24 nx:rounded-b-2xl nx:border-b nx:border-border-default",
-        left: "nx:inset-y-0 nx:left-0 nx:mr-24 nx:w-[85vw] nx:max-w-sm nx:rounded-r-2xl nx:border-r nx:border-border-default",
-        right: "nx:inset-y-0 nx:right-0 nx:ml-24 nx:w-[85vw] nx:max-w-sm nx:rounded-l-2xl nx:border-l nx:border-border-default"
-      }
-    },
-    defaultVariants: { direction: "bottom" }
-  }
-);
+var drawerContentVariants = classVarianceAuthority.cva("nexus-drawer-content", {
+  variants: {
+    direction: {
+      bottom: "nexus-drawer-content--bottom",
+      top: "nexus-drawer-content--top",
+      left: "nexus-drawer-content--left",
+      right: "nexus-drawer-content--right"
+    }
+  },
+  defaultVariants: { direction: "bottom" }
+});
 var DrawerRoot = ({ direction = "bottom", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(DrawerDirectionCtx.Provider, { value: direction, children: /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Root, { shouldScaleBackground: false, direction, ...props }) });
 var DrawerTrigger = (props) => /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Trigger, { ...props });
 DrawerTrigger.displayName = "DrawerTrigger";
@@ -70,24 +67,21 @@ var DrawerContent = React__namespace.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(
         vaul.Drawer.Overlay,
         {
-          className: chunkQJNQCLMV_js.cn(drawerOverlayVariants({ blur }), overlayClassName)
+          className: chunkCZC76ZD5_js.cn(drawerOverlayVariants({ blur }), overlayClassName)
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(
         vaul.Drawer.Content,
         {
           ref,
-          className: chunkQJNQCLMV_js.cn(drawerContentVariants({ direction }), className),
+          className: chunkCZC76ZD5_js.cn(drawerContentVariants({ direction }), className),
           ...props,
           children: [
             showHandle && (direction === "bottom" || direction === "top") && /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: chunkQJNQCLMV_js.cn(
-                  "nx:flex nx:justify-center",
-                  direction === "bottom" ? "nx:pt-4" : "nx:pb-4"
-                ),
-                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nx:bg-border-strong nx:h-1.5 nx:w-12 nx:rounded-full" })
+                className: chunkCZC76ZD5_js.cn("nexus-drawer-handle", direction === "bottom" ? "nexus-drawer-handle--bottom" : "nexus-drawer-handle--top"),
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-drawer-handle__bar" })
               }
             ),
             children
@@ -103,7 +97,7 @@ DrawerClose.displayName = "DrawerClose";
 var DrawerTitle = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   vaul.Drawer.Title,
   {
-    className: chunkQJNQCLMV_js.cn("nx:text-lg nx:font-semibold nx:text-text-primary", className),
+    className: chunkCZC76ZD5_js.cn("nexus-drawer-title", className),
     ...props
   }
 );
@@ -111,7 +105,7 @@ DrawerTitle.displayName = "DrawerTitle";
 var DrawerDescription = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   vaul.Drawer.Description,
   {
-    className: chunkQJNQCLMV_js.cn("nx:text-sm nx:text-text-secondary", className),
+    className: chunkCZC76ZD5_js.cn("nexus-drawer-description", className),
     ...props
   }
 );

package/dist/chunks/chunk-C2DSAJTL.js

@@ -0,0 +1,109 @@
+'use strict';
+
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
+var React = require('react');
+var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+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 DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
+
+var DropdownMenu = ({
+  children,
+  items,
+  align = "start",
+  side = "bottom",
+  className,
+  contentClassName
+}) => /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuPrimitive__namespace.Root, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Trigger, { asChild: true, className, children }),
+  /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenuPrimitive__namespace.Content,
+    {
+      align,
+      side,
+      sideOffset: 4,
+      className: chunkCZC76ZD5_js.cn("nexus-dropdown-content", contentClassName),
+      children: items.map(
+        (item, i) => item.separator ? /* @__PURE__ */ jsxRuntime.jsx(
+          DropdownMenuPrimitive__namespace.Separator,
+          {
+            className: "nexus-dropdown-separator"
+          },
+          i
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(
+          DropdownMenuPrimitive__namespace.Item,
+          {
+            className: chunkCZC76ZD5_js.cn(
+              "nexus-dropdown-item",
+              item.danger && "nexus-dropdown-item--danger"
+            ),
+            disabled: item.disabled,
+            onSelect: item.onClick,
+            children: [
+              item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-dropdown-item__icon", children: item.icon }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+            ]
+          },
+          item.value ?? i
+        )
+      )
+    }
+  ) })
+] });
+DropdownMenu.displayName = "DropdownMenu";
+var DropdownMenuRoot = DropdownMenuPrimitive__namespace.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
+var DropdownMenuContent = React__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.Content,
+  {
+    ref,
+    sideOffset,
+    className: chunkCZC76ZD5_js.cn("nexus-dropdown-content", className),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuItem = React__namespace.forwardRef(({ className, danger, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.Item,
+  {
+    ref,
+    className: chunkCZC76ZD5_js.cn("nexus-dropdown-item", danger && "nexus-dropdown-item--danger", className),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuSeparator = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.Separator,
+  {
+    ref,
+    className: chunkCZC76ZD5_js.cn("nexus-dropdown-separator", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownMenuContent = DropdownMenuContent;
+exports.DropdownMenuItem = DropdownMenuItem;
+exports.DropdownMenuRoot = DropdownMenuRoot;
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;

package/dist/chunks/{chunk-KWPIEHD2.mjs → chunk-CA3SOLI3.mjs}

@@ -70,7 +70,7 @@ var Counter = React.forwardRef(
         if (rafId) cancelAnimationFrame(rafId);
       };
     }, [started, startValue, endValue, duration, delay, separator, digits, onEnd]);
-    return /* @__PURE__ */ jsx("span", { ref: innerRef, className, ...props, children: display });
+    return /* @__PURE__ */ jsx("span", { ref: innerRef, className, role: "status", "aria-live": "polite", "aria-atomic": true, ...props, children: display });
   }
 );
 Counter.displayName = "Counter";

package/dist/chunks/{chunk-MPKRXMCJ.js → chunk-CSJDDREF.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkQJNQCLMV_js = require('./chunk-QJNQCLMV.js');
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -28,20 +28,17 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 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 AccordionRoot = AccordionPrimitive__namespace.Root;
-var AccordionItem = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Item, { ref, className: chunkQJNQCLMV_js.cn("nx:border-b nx:border-border-default", className), ...props }));
+var AccordionItem = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Item, { ref, className: chunkCZC76ZD5_js.cn("nexus-accordion-item", className), ...props }));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "nx:flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
+var AccordionTrigger = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "nexus-accordion-header", children: /* @__PURE__ */ jsxRuntime.jsxs(
   AccordionPrimitive__namespace.Trigger,
   {
     ref,
-    className: chunkQJNQCLMV_js.cn(
-      "nx:flex nx:flex-1 nx:items-center nx:justify-between nx:py-4 nx:transition-all nx:[&[data-state=open]>svg]:rotate-180",
-      className
-    ),
+    className: chunkCZC76ZD5_js.cn("nexus-accordion-trigger", className),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { className: "nx:h-3 nx:w-3 nx:shrink-0 nx:transition-transform nx:duration-200" })
+      /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { className: "nexus-accordion-chevron" })
     ]
   }
 ) }));
@@ -50,9 +47,9 @@ var AccordionContent = React__namespace.forwardRef(({ className, children, ...pr
   AccordionPrimitive__namespace.Content,
   {
     ref,
-    className: "nx:overflow-hidden nx:transition-all nx:data-[state=closed]:animate-accordion-up nx:data-[state=open]:animate-accordion-down",
+    className: "nexus-accordion-content",
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkQJNQCLMV_js.cn("nx:pt-0 nx:pb-4", className), children })
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkCZC76ZD5_js.cn("nexus-accordion-content__inner", className), children })
   }
 ));
 AccordionContent.displayName = AccordionPrimitive__namespace.Content.displayName;

package/dist/chunks/chunk-CUTMLBC3.mjs

@@ -0,0 +1,86 @@
+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 badgeVariants = cva("nexus-badge", {
+  variants: {
+    variant: {
+      danger: "nexus-badge--danger",
+      primary: "nexus-badge--primary",
+      secondary: "nexus-badge--secondary",
+      info: "nexus-badge--info",
+      success: "nexus-badge--success",
+      warning: "nexus-badge--warning"
+    },
+    size: {
+      sm: "nexus-badge--sm",
+      md: "nexus-badge--md",
+      lg: "nexus-badge--lg"
+    }
+  },
+  defaultVariants: {
+    variant: "danger",
+    size: "md"
+  }
+});
+var Badge = React.forwardRef(
+  ({
+    className,
+    children,
+    variant,
+    size,
+    count,
+    max = 99,
+    dot = false,
+    showZero = false,
+    offset,
+    style,
+    ...props
+  }, ref) => {
+    const displayCount = count !== void 0 && max !== void 0 && count > max ? `${max}+` : count;
+    const isHidden = !dot && (count === void 0 || count === 0 && !showZero);
+    const badgeStyle = {
+      ...style,
+      ...offset ? { "--nexus-badge-offset-x": `${offset[0]}px`, "--nexus-badge-offset-y": `${offset[1]}px` } : {}
+    };
+    if (!children) {
+      if (isHidden) return null;
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref,
+          className: cn(
+            badgeVariants({ variant, size }),
+            dot && "nexus-badge--dot",
+            className
+          ),
+          style: badgeStyle,
+          ...props,
+          children: !dot && displayCount
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs("span", { className: "nexus-badge-wrapper", style: { position: "relative", display: "inline-flex" }, children: [
+      children,
+      !isHidden && /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref,
+          className: cn(
+            badgeVariants({ variant, size }),
+            dot && "nexus-badge--dot",
+            "nexus-badge--positioned",
+            className
+          ),
+          style: badgeStyle,
+          ...props,
+          children: !dot && displayCount
+        }
+      )
+    ] });
+  }
+);
+Badge.displayName = "Badge";
+
+export { Badge, badgeVariants };