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

package/dist/carousel.mjs

@@ -1,3 +1,3 @@
-export { Carousel, CarouselDots, CarouselNext, CarouselPrev, CarouselSlide, useCarousel } from './chunks/chunk-AOVU67NI.mjs';
-import './chunks/chunk-XALPBGSC.mjs';
+export { Carousel, CarouselDots, CarouselNext, CarouselPrev, CarouselSlide, useCarousel } from './chunks/chunk-3HHJORN7.mjs';
+import './chunks/chunk-MCKOWMLS.mjs';
 import './chunks/chunk-CVYXRSXT.mjs';

package/dist/checkbox.js

@@ -1,20 +1,20 @@
 'use strict';
 
-var chunkZCMKIB5U_js = require('./chunks/chunk-ZCMKIB5U.js');
-require('./chunks/chunk-QJNQCLMV.js');
+var chunkJ5ZKGPBY_js = require('./chunks/chunk-J5ZKGPBY.js');
+require('./chunks/chunk-CZC76ZD5.js');
 require('./chunks/chunk-JNMCYWGY.js');
 
 
 
 Object.defineProperty(exports, "CheckBox", {
   enumerable: true,
-  get: function () { return chunkZCMKIB5U_js.CheckBox; }
+  get: function () { return chunkJ5ZKGPBY_js.CheckBox; }
 });
 Object.defineProperty(exports, "boxVariants", {
   enumerable: true,
-  get: function () { return chunkZCMKIB5U_js.boxVariants; }
+  get: function () { return chunkJ5ZKGPBY_js.boxVariants; }
 });
 Object.defineProperty(exports, "checkBoxVariants", {
   enumerable: true,
-  get: function () { return chunkZCMKIB5U_js.checkBoxVariants; }
+  get: function () { return chunkJ5ZKGPBY_js.checkBoxVariants; }
 });

package/dist/checkbox.mjs

@@ -1,3 +1,3 @@
-export { CheckBox, boxVariants, checkBoxVariants } from './chunks/chunk-TR5JBBEA.mjs';
-import './chunks/chunk-XALPBGSC.mjs';
+export { CheckBox, boxVariants, checkBoxVariants } from './chunks/chunk-MRRKW5QN.mjs';
+import './chunks/chunk-MCKOWMLS.mjs';
 import './chunks/chunk-CVYXRSXT.mjs';

package/dist/chip.d.mts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const chipVariants: (props?: ({
-    variant?: "accent" | "default" | "filled" | "outline" | null | undefined;
+    variant?: "default" | "accent" | "filled" | "outline" | null | undefined;
     size?: "lg" | "md" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ChipProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof chipVariants> {

package/dist/chip.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const chipVariants: (props?: ({
-    variant?: "accent" | "default" | "filled" | "outline" | null | undefined;
+    variant?: "default" | "accent" | "filled" | "outline" | null | undefined;
     size?: "lg" | "md" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ChipProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof chipVariants> {

package/dist/chip.js

@@ -1,16 +1,16 @@
 'use strict';
 
-var chunkWSWD5ZUJ_js = require('./chunks/chunk-WSWD5ZUJ.js');
-require('./chunks/chunk-QJNQCLMV.js');
+var chunkWKCXACMZ_js = require('./chunks/chunk-WKCXACMZ.js');
+require('./chunks/chunk-CZC76ZD5.js');
 require('./chunks/chunk-JNMCYWGY.js');
 
 
 
 Object.defineProperty(exports, "Chip", {
   enumerable: true,
-  get: function () { return chunkWSWD5ZUJ_js.Chip; }
+  get: function () { return chunkWKCXACMZ_js.Chip; }
 });
 Object.defineProperty(exports, "chipVariants", {
   enumerable: true,
-  get: function () { return chunkWSWD5ZUJ_js.chipVariants; }
+  get: function () { return chunkWKCXACMZ_js.chipVariants; }
 });

package/dist/chip.mjs

@@ -1,3 +1,3 @@
-export { Chip, chipVariants } from './chunks/chunk-AKIBUO5A.mjs';
-import './chunks/chunk-XALPBGSC.mjs';
+export { Chip, chipVariants } from './chunks/chunk-RX5UKRYK.mjs';
+import './chunks/chunk-MCKOWMLS.mjs';
 import './chunks/chunk-CVYXRSXT.mjs';

package/dist/chunks/{chunk-5TBXVD56.js → chunk-2MC7XJSE.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');
 
@@ -28,6 +28,14 @@ var Marquee = React__namespace.forwardRef(
   ({ direction = "left", speed = 40, pauseOnHover = false, gap = 16, children, className, style, ...props }, ref) => {
     const containerRef = React__namespace.useRef(null);
     const [copies, setCopies] = React__namespace.useState(2);
+    const [prefersReducedMotion, setPrefersReducedMotion] = React__namespace.useState(false);
+    React__namespace.useEffect(() => {
+      const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+      setPrefersReducedMotion(mq.matches);
+      const handler = (e) => setPrefersReducedMotion(e.matches);
+      mq.addEventListener("change", handler);
+      return () => mq.removeEventListener("change", handler);
+    }, []);
     const isHorizontal = direction === "left" || direction === "right";
     const isReverse = direction === "right" || direction === "down";
     React__namespace.useEffect(() => {
@@ -55,8 +63,10 @@ var Marquee = React__namespace.forwardRef(
       display: "flex",
       flexDirection: isHorizontal ? "row" : "column",
       gap,
-      animation: `${animationName} ${speed}s linear infinite`,
-      ...isReverse ? { animationDirection: "reverse" } : {}
+      ...prefersReducedMotion ? {} : {
+        animation: `${animationName} ${speed}s linear infinite`,
+        ...isReverse ? { animationDirection: "reverse" } : {}
+      }
     };
     const keyframes = `
       @keyframes ${animationName} {
@@ -68,9 +78,9 @@ var Marquee = React__namespace.forwardRef(
       "div",
       {
         ref,
-        className: chunkQJNQCLMV_js.cn(
-          "nx:overflow-hidden",
-          pauseOnHover && "nx:[&:hover_>_div]:![animation-play-state:paused]",
+        className: chunkCZC76ZD5_js.cn(
+          "nexus-marquee",
+          pauseOnHover && "nexus-marquee--pause-on-hover",
           className
         ),
         style,

package/dist/chunks/chunk-2N2EPBO4.js

@@ -0,0 +1,120 @@
+'use strict';
+
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
+var React = require('react');
+var reactDayPicker = require('react-day-picker');
+var dateFns = require('date-fns');
+var locale = require('date-fns/locale');
+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 CalendarIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "4", width: "14", height: "14", rx: "2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 8h14M7 2v4M13 2v4", strokeLinecap: "round" })
+] });
+var DatePicker = ({
+  value,
+  defaultValue,
+  onChange,
+  placeholder = "\uB0A0\uC9DC \uC120\uD0DD",
+  disabled = false,
+  minDate,
+  maxDate,
+  locale: localeProp = "ko",
+  formatStr = "yyyy-MM-dd",
+  className
+}) => {
+  const [internalDate, setInternalDate] = React__namespace.useState(defaultValue);
+  const [open, setOpen] = React__namespace.useState(false);
+  const wrapperRef = React__namespace.useRef(null);
+  const selected = value ?? internalDate;
+  const handleSelect = React__namespace.useCallback(
+    (date) => {
+      if (!value) setInternalDate(date);
+      onChange?.(date);
+      setOpen(false);
+    },
+    [value, onChange]
+  );
+  React__namespace.useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    if (open) document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+  const displayText = selected ? dateFns.format(selected, formatStr, { locale: localeProp === "ko" ? locale.ko : void 0 }) : placeholder;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapperRef, className: chunkCZC76ZD5_js.cn("nexus-datepicker", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: chunkCZC76ZD5_js.cn(
+          "nexus-datepicker__trigger",
+          !selected && "nexus-datepicker__trigger--placeholder"
+        ),
+        onClick: () => !disabled && setOpen(!open),
+        disabled,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, { className: "nexus-datepicker__icon" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: displayText })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-datepicker__popover", children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactDayPicker.DayPicker,
+      {
+        mode: "single",
+        selected,
+        onSelect: handleSelect,
+        locale: localeProp === "ko" ? locale.ko : void 0,
+        disabled: [
+          ...minDate ? [{ before: minDate }] : [],
+          ...maxDate ? [{ after: maxDate }] : []
+        ],
+        classNames: {
+          root: "nexus-calendar",
+          months: "nexus-calendar__months",
+          month_caption: "nexus-calendar__caption",
+          nav: "nexus-calendar__nav",
+          button_previous: "nexus-calendar__nav-btn",
+          button_next: "nexus-calendar__nav-btn",
+          month_grid: "nexus-calendar__grid",
+          weekdays: "nexus-calendar__head-row",
+          weekday: "nexus-calendar__head-cell",
+          week: "nexus-calendar__row",
+          day: "nexus-calendar__cell",
+          day_button: "nexus-calendar__day",
+          selected: "nexus-calendar__day--selected",
+          today: "nexus-calendar__day--today",
+          outside: "nexus-calendar__day--outside",
+          disabled: "nexus-calendar__day--disabled"
+        }
+      }
+    ) })
+  ] });
+};
+DatePicker.displayName = "DatePicker";
+
+exports.DatePicker = DatePicker;

package/dist/chunks/{chunk-BEA727LO.mjs → chunk-2RPRCWKV.mjs}

@@ -1,37 +1,30 @@
-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 paginationVariants = cva("nx:flex nx:items-center nx:gap-1", {
+var paginationVariants = cva("nexus-pagination", {
   variants: {
     size: {
-      sm: "nx:text-xs",
-      md: "nx:text-sm"
+      sm: "nexus-pagination--sm",
+      md: "nexus-pagination--md"
     }
   },
   defaultVariants: { size: "md" }
 });
-var pageButtonVariants = cva(
-  [
-    "nx:inline-flex nx:items-center nx:justify-center nx:rounded-md nx:font-medium nx:transition-colors",
-    "nx:select-none nx:border nx:border-transparent",
-    "nx:disabled:opacity-40 nx:disabled:pointer-events-none"
-  ],
-  {
-    variants: {
-      size: {
-        sm: "nx:size-7 nx:text-xs",
-        md: "nx:size-9 nx:text-sm"
-      },
-      active: {
-        true: "nx:bg-accent-primary nx:text-white nx:border-accent-primary",
-        false: "nx:text-text-primary nx:hover:bg-surface-hover"
-      }
+var pageButtonVariants = cva("nexus-page-btn", {
+  variants: {
+    size: {
+      sm: "nexus-page-btn--sm",
+      md: "nexus-page-btn--md"
     },
-    defaultVariants: { size: "md", active: false }
-  }
-);
+    active: {
+      true: "nexus-page-btn--active",
+      false: "nexus-page-btn--inactive"
+    }
+  },
+  defaultVariants: { size: "md", active: false }
+});
 function generatePages(current, total, siblingCount) {
   const totalNumbers = siblingCount * 2 + 5;
   if (total <= totalNumbers) {
@@ -57,13 +50,32 @@ function generatePages(current, total, siblingCount) {
   );
   return [1, "dots", ...middleRange, "dots", total];
 }
+var ChevronsLeft = ({ className }) => /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M7 4L3 8l4 4" }),
+  /* @__PURE__ */ jsx("path", { d: "M13 4L9 8l4 4" })
+] });
 var ChevronLeft = ({ className }) => /* @__PURE__ */ jsx("svg", { className, 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 ChevronRight = ({ className }) => /* @__PURE__ */ jsx("svg", { className, 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 ChevronsRight = ({ className }) => /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M3 4l4 4-4 4" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 4l4 4-4 4" })
+] });
 var Pagination = React.forwardRef(
-  ({ currentPage, totalPages, siblingCount = 1, onPageChange, size, className }, ref) => {
+  ({ currentPage, totalPages, siblingCount = 1, showEdges = false, onPageChange, size, className }, ref) => {
     const pages = generatePages(currentPage, totalPages, siblingCount);
-    const iconSize = size === "sm" ? "nx:size-3.5" : "nx:size-4";
+    const iconSize = size === "sm" ? "nexus-page-icon--sm" : "nexus-page-icon--md";
     return /* @__PURE__ */ jsxs("nav", { ref, role: "navigation", "aria-label": "pagination", className: cn(paginationVariants({ size }), className), children: [
+      showEdges && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cn(pageButtonVariants({ size, active: false })),
+          disabled: currentPage <= 1,
+          onClick: () => onPageChange(1),
+          "aria-label": "First page",
+          children: /* @__PURE__ */ jsx(ChevronsLeft, { className: iconSize })
+        }
+      ),
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -76,7 +88,15 @@ var Pagination = React.forwardRef(
         }
       ),
       pages.map(
-        (page, i) => page === "dots" ? /* @__PURE__ */ jsx("span", { className: cn(pageButtonVariants({ size, active: false }), "nx:pointer-events-none"), children: "\xB7\xB7\xB7" }, `dots-${i}`) : /* @__PURE__ */ jsx(
+        (page, i) => page === "dots" ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(pageButtonVariants({ size, active: false })),
+            style: { pointerEvents: "none" },
+            children: "\xB7\xB7\xB7"
+          },
+          `dots-${i}`
+        ) : /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -99,6 +119,17 @@ var Pagination = React.forwardRef(
           "aria-label": "Next page",
           children: /* @__PURE__ */ jsx(ChevronRight, { className: iconSize })
         }
+      ),
+      showEdges && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cn(pageButtonVariants({ size, active: false })),
+          disabled: currentPage >= totalPages,
+          onClick: () => onPageChange(totalPages),
+          "aria-label": "Last page",
+          children: /* @__PURE__ */ jsx(ChevronsRight, { className: iconSize })
+        }
       )
     ] });
   }

package/dist/chunks/chunk-2UPGFY6E.mjs

@@ -0,0 +1,76 @@
+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 alertVariants = 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__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ 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__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ 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__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ 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__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ 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__ */ jsx("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8", strokeLinecap: "round" }) });
+var Alert = React.forwardRef(
+  ({
+    className,
+    children,
+    variant = "info",
+    title,
+    icon,
+    closable = false,
+    onClose,
+    action,
+    ...props
+  }, ref) => {
+    const [visible, setVisible] = React.useState(true);
+    const handleClose = React.useCallback(() => {
+      setVisible(false);
+      onClose?.();
+    }, [onClose]);
+    if (!visible) return null;
+    const IconComp = icon === void 0 ? statusIcons[variant ?? "info"] : null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: cn(alertVariants({ variant }), className),
+        ...props,
+        children: [
+          (icon || IconComp) && /* @__PURE__ */ jsx("span", { className: "nexus-alert__icon", children: icon ?? (IconComp && /* @__PURE__ */ jsx(IconComp, { className: "nexus-alert__icon-svg" })) }),
+          /* @__PURE__ */ jsxs("div", { className: "nexus-alert__body", children: [
+            title && /* @__PURE__ */ jsx("p", { className: "nexus-alert__title", children: title }),
+            children && /* @__PURE__ */ jsx("div", { className: "nexus-alert__description", children })
+          ] }),
+          action && /* @__PURE__ */ jsx("div", { className: "nexus-alert__action", children: action }),
+          closable && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "nexus-alert__close",
+              onClick: handleClose,
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx(CloseIcon, { className: "nexus-alert__close-icon" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+
+export { Alert, alertVariants };

package/dist/chunks/{chunk-5I2VRWWU.js → chunk-2ZXDXO4I.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,42 +25,36 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var tabListVariants = classVarianceAuthority.cva(
-  "nx:relative nx:flex nx:border-b nx:border-border-default",
-  {
-    variants: {
-      variant: {
-        line: "",
-        pill: "nx:gap-1 nx:border-none nx:bg-surface-hover nx:rounded-lg nx:p-1"
-      }
+var tabListVariants = classVarianceAuthority.cva("nexus-tab-list", {
+  variants: {
+    variant: {
+      line: "",
+      pill: "nexus-tab-list--pill"
+    }
+  },
+  defaultVariants: { variant: "line" }
+});
+var tabTriggerVariants = classVarianceAuthority.cva("nexus-tab-trigger", {
+  variants: {
+    variant: {
+      line: "nexus-tab-trigger--line",
+      pill: "nexus-tab-trigger--pill"
     },
-    defaultVariants: { variant: "line" }
-  }
-);
-var tabTriggerVariants = classVarianceAuthority.cva(
-  "nx:relative nx:inline-flex nx:items-center nx:justify-center nx:whitespace-nowrap nx:font-medium nx:transition-colors nx:select-none nx:outline-none",
-  {
-    variants: {
-      variant: {
-        line: "nx:px-4 nx:py-2.5 nx:text-text-tertiary hover:nx:text-text-primary nx:border-b-2 nx:border-transparent nx:-mb-px",
-        pill: "nx:px-3 nx:py-1.5 nx:rounded-md nx:text-text-tertiary hover:nx:text-text-primary"
-      },
-      size: {
-        sm: "nx:text-xs",
-        md: "nx:text-sm"
-      },
-      active: {
-        true: "",
-        false: ""
-      }
+    size: {
+      sm: "nexus-tab-trigger--sm",
+      md: "nexus-tab-trigger--md"
     },
-    compoundVariants: [
-      { variant: "line", active: true, className: "nx:text-text-primary nx:border-accent-primary" },
-      { variant: "pill", active: true, className: "nx:text-text-primary nx:bg-surface-default nx:shadow-sm" }
-    ],
-    defaultVariants: { variant: "line", size: "md", active: false }
-  }
-);
+    active: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    { variant: "line", active: true, className: "nexus-tab-trigger--line-active" },
+    { variant: "pill", active: true, className: "nexus-tab-trigger--pill-active" }
+  ],
+  defaultVariants: { variant: "line", size: "md", active: false }
+});
 function Tab({
   items,
   activeKey: controlledKey,
@@ -111,7 +105,7 @@ function Tab({
       "div",
       {
         role: "tablist",
-        className: chunkQJNQCLMV_js.cn(tabListVariants({ variant }), tabListClassName),
+        className: chunkCZC76ZD5_js.cn(tabListVariants({ variant }), tabListClassName),
         children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -123,13 +117,13 @@ function Tab({
             "aria-controls": `panel-${item.key}`,
             "aria-disabled": item.disabled || void 0,
             tabIndex: item.key === currentKey ? 0 : -1,
-            className: chunkQJNQCLMV_js.cn(
+            className: chunkCZC76ZD5_js.cn(
               tabTriggerVariants({
                 variant,
                 size,
                 active: item.key === currentKey
               }),
-              item.disabled && "nx:opacity-40 nx:pointer-events-none"
+              item.disabled && "nexus-tab-trigger--disabled"
             ),
             onClick: () => !item.disabled && handleSelect(item.key),
             onKeyDown: (e) => handleKeyDown(e, i),