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

package/dist/chunks/chunk-S2GMEC43.js

@@ -0,0 +1,109 @@
+'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 badgeVariants = classVarianceAuthority.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__namespace.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__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ref,
+          className: chunkCZC76ZD5_js.cn(
+            badgeVariants({ variant, size }),
+            dot && "nexus-badge--dot",
+            className
+          ),
+          style: badgeStyle,
+          ...props,
+          children: !dot && displayCount
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "nexus-badge-wrapper", style: { position: "relative", display: "inline-flex" }, children: [
+      children,
+      !isHidden && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ref,
+          className: chunkCZC76ZD5_js.cn(
+            badgeVariants({ variant, size }),
+            dot && "nexus-badge--dot",
+            "nexus-badge--positioned",
+            className
+          ),
+          style: badgeStyle,
+          ...props,
+          children: !dot && displayCount
+        }
+      )
+    ] });
+  }
+);
+Badge.displayName = "Badge";
+
+exports.Badge = Badge;
+exports.badgeVariants = badgeVariants;

package/dist/chunks/{chunk-WJ2OVQD3.mjs → chunk-SGNRVYYQ.mjs}

@@ -1,34 +1,31 @@
-import { cn } from './chunk-XALPBGSC.mjs';
+import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import { Drawer as Drawer$1 } from 'vaul';
 import { cva } from 'class-variance-authority';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var DrawerDirectionCtx = React.createContext("bottom");
-var drawerOverlayVariants = cva("nx:fixed nx:inset-0 nx:z-50 nx:bg-static-black/60", {
+var drawerOverlayVariants = 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 = 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 = 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__ */ jsx(DrawerDirectionCtx.Provider, { value: direction, children: /* @__PURE__ */ jsx(Drawer$1.Root, { shouldScaleBackground: false, direction, ...props }) });
 var DrawerTrigger = (props) => /* @__PURE__ */ jsx(Drawer$1.Trigger, { ...props });
 DrawerTrigger.displayName = "DrawerTrigger";
@@ -61,11 +58,8 @@ var DrawerContent = React.forwardRef(
             showHandle && (direction === "bottom" || direction === "top") && /* @__PURE__ */ jsx(
               "div",
               {
-                className: cn(
-                  "nx:flex nx:justify-center",
-                  direction === "bottom" ? "nx:pt-4" : "nx:pb-4"
-                ),
-                children: /* @__PURE__ */ jsx("div", { className: "nx:bg-border-strong nx:h-1.5 nx:w-12 nx:rounded-full" })
+                className: cn("nexus-drawer-handle", direction === "bottom" ? "nexus-drawer-handle--bottom" : "nexus-drawer-handle--top"),
+                children: /* @__PURE__ */ jsx("div", { className: "nexus-drawer-handle__bar" })
               }
             ),
             children
@@ -81,7 +75,7 @@ DrawerClose.displayName = "DrawerClose";
 var DrawerTitle = ({ className, ...props }) => /* @__PURE__ */ jsx(
   Drawer$1.Title,
   {
-    className: cn("nx:text-lg nx:font-semibold nx:text-text-primary", className),
+    className: cn("nexus-drawer-title", className),
     ...props
   }
 );
@@ -89,7 +83,7 @@ DrawerTitle.displayName = "DrawerTitle";
 var DrawerDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(
   Drawer$1.Description,
   {
-    className: cn("nx:text-sm nx:text-text-secondary", className),
+    className: cn("nexus-drawer-description", className),
     ...props
   }
 );

package/dist/chunks/{chunk-IB5UCYQY.mjs → chunk-SJMCPSVH.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';
 
@@ -6,6 +6,14 @@ var Marquee = React.forwardRef(
   ({ direction = "left", speed = 40, pauseOnHover = false, gap = 16, children, className, style, ...props }, ref) => {
     const containerRef = React.useRef(null);
     const [copies, setCopies] = React.useState(2);
+    const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(false);
+    React.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.useEffect(() => {
@@ -33,8 +41,10 @@ var Marquee = React.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} {
@@ -47,8 +57,8 @@ var Marquee = React.forwardRef(
       {
         ref,
         className: cn(
-          "nx:overflow-hidden",
-          pauseOnHover && "nx:[&:hover_>_div]:![animation-play-state:paused]",
+          "nexus-marquee",
+          pauseOnHover && "nexus-marquee--pause-on-hover",
           className
         ),
         style,

package/dist/chunks/chunk-UKRU46PH.mjs

@@ -0,0 +1,182 @@
+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 textInputVariants = 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__ */ jsx(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    children: /* @__PURE__ */ jsx("path", { d: "M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" })
+  }
+);
+var TextInput = React.forwardRef(
+  ({
+    className,
+    size,
+    error,
+    prefixIcon,
+    suffixIcon,
+    label,
+    description,
+    showCount,
+    clearable,
+    onValueChange,
+    onChange,
+    value: controlledValue,
+    defaultValue,
+    disabled,
+    maxLength,
+    id,
+    ...props
+  }, ref) => {
+    const fallbackId = React.useRef(
+      `nexus-ti-${Math.random().toString(36).slice(2, 9)}`
+    );
+    const inputId = id || fallbackId.current;
+    const inputRef = React.useRef(null);
+    const setInputRef = React.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.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.useCallback(
+      (e) => {
+        if (!isControlled) setInternalValue(e.target.value);
+        onValueChange?.(e.target.value);
+        onChange?.(e);
+      },
+      [isControlled, onValueChange, onChange]
+    );
+    const handleClear = React.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.useCallback(() => {
+      if (!disabled) inputRef.current?.focus();
+    }, [disabled]);
+    const inputBox = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          textInputVariants({ size, state }),
+          disabled && "nexus-text-input--disabled",
+          !hasField && className
+        ),
+        onClick: handleWrapperClick,
+        children: [
+          prefixIcon && /* @__PURE__ */ jsx("span", { className: "nexus-text-input__icon", children: prefixIcon }),
+          /* @__PURE__ */ 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__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "nexus-text-input__clear",
+              onClick: handleClear,
+              tabIndex: -1,
+              "aria-label": "Clear",
+              children: /* @__PURE__ */ jsx(ClearIcon, {})
+            }
+          ),
+          suffixIcon && /* @__PURE__ */ jsx("span", { className: "nexus-text-input__icon", children: suffixIcon })
+        ]
+      }
+    );
+    if (!hasField) return inputBox;
+    return /* @__PURE__ */ jsxs("div", { className: cn("nexus-text-input-field", className), children: [
+      label && /* @__PURE__ */ jsx("label", { className: "nexus-text-input-field__label", htmlFor: inputId, children: label }),
+      inputBox,
+      (description || showCount && maxLength) && /* @__PURE__ */ jsxs("div", { className: "nexus-text-input-field__footer", children: [
+        description && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: `${inputId}-desc`,
+            className: cn(
+              "nexus-text-input-field__description",
+              (error || isOverLimit) && "nexus-text-input-field__description--error"
+            ),
+            children: description
+          }
+        ),
+        showCount && maxLength && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: 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";
+
+export { TextInput, textInputVariants };

package/dist/chunks/{chunk-WNFJ4NJN.mjs → chunk-ULGYTBCT.mjs}

@@ -1,16 +1,8 @@
-import { cn } from './chunk-XALPBGSC.mjs';
+import { cn } from './chunk-MCKOWMLS.mjs';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var popoverContentClasses = [
-  "nx:z-50 nx:rounded-lg nx:border nx:p-4 nx:shadow-lg nx:outline-none",
-  "nx:bg-surface-default nx:border-border-default nx:text-text-primary",
-  "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"
-].join(" ");
+var popoverContentClasses = "nexus-popover-content";
 var Popover = ({
   children,
   trigger,
@@ -39,7 +31,7 @@ var Popover = ({
           /* @__PURE__ */ jsx(
             PopoverPrimitive.Arrow,
             {
-              className: cn("nx:fill-surface-default", arrowClassName)
+              className: cn("nexus-popover-arrow", arrowClassName)
             }
           )
         ]

package/dist/chunks/{chunk-TXYYBJBQ.js → chunk-VGO4Z2WH.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunk5XVEYVYA_js = require('./chunk-5XVEYVYA.js');
-var chunkQJNQCLMV_js = require('./chunk-QJNQCLMV.js');
+var chunkBLGQHR3M_js = require('./chunk-BLGQHR3M.js');
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
 var lodashEs = require('lodash-es');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -22,20 +22,21 @@ var TableHighlightProvider = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(TableHighlightContext.Provider, { value: { highlightValue, setHighlightValue }, children });
 };
 var ALIGN_CLASSES = {
-  center: "nx:text-center nx:justify-center",
-  left: "nx:text-left nx:justify-start",
-  right: "nx:text-right nx:justify-end"
+  center: "nexus-td--center",
+  left: "nexus-td--left",
+  right: "nexus-td--right"
 };
 var TEXT_OVERFLOW_CLASSES = {
-  auto: "nx:whitespace-nowrap",
-  truncate: "nx:truncate",
-  wrap: "nx:whitespace-normal nx:break-words",
-  "break-all": "nx:whitespace-normal nx:break-all"
+  auto: "nexus-td--nowrap",
+  truncate: "nexus-td--truncate",
+  wrap: "nexus-td--wrap",
+  "break-all": "nexus-td--break-all"
 };
 var TdColumn = ({
   className = "",
   children,
   fieldId,
+  size,
   colSpan,
   rowSpan,
   align = "left",
@@ -50,24 +51,26 @@ var TdColumn = ({
   const handleMouseLeave = React.useCallback(() => {
     if (highlightKey) setHighlightValue(null);
   }, [highlightKey, setHighlightValue]);
+  const sizeStyle = size ? { width: typeof size === "number" ? `${size}px` : size, flex: `0 0 ${typeof size === "number" ? `${size}px` : size}` } : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "td",
     {
-      className: chunkQJNQCLMV_js.cn("nx:min-w-0 nx:w-full", fieldId, className),
+      className: chunkCZC76ZD5_js.cn("nexus-td", fieldId, className),
       title: textOverflow === "truncate" && typeof children === "string" ? children : void 0,
       colSpan,
       rowSpan,
+      style: sizeStyle,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: chunkQJNQCLMV_js.cn(
-            typeof children !== "string" && "nx:flex",
+          className: chunkCZC76ZD5_js.cn(
+            typeof children !== "string" && "nexus-td__inner--flex",
             TEXT_OVERFLOW_CLASSES[textOverflow],
             ALIGN_CLASSES[align],
-            "nx:rounded-md nx:px-1 nx:py-[2px] nx:transition-colors nx:duration-150",
-            isHighlighted && "nx:bg-accent-primary/10 nx:outline-accent-primary nx:outline nx:-outline-offset-1 nx:outline-dashed"
+            "nexus-td__inner",
+            isHighlighted && "nexus-td__inner--highlight"
           ),
           children
         }
@@ -76,11 +79,11 @@ var TdColumn = ({
   );
 };
 TdColumn.displayName = "TdColumn";
-var tableRowVariants = classVarianceAuthority.cva("nx:border-border-default nx:scrollbar-none nx:flex nx:border-b", {
+var tableRowVariants = classVarianceAuthority.cva("nexus-table-row", {
   variants: {
     variant: {
-      default: "nx:hover:bg-surface-hover",
-      accent: "nx:hover:bg-accent-primary/5"
+      default: "nexus-table-row--default",
+      accent: "nexus-table-row--accent"
     }
   },
   defaultVariants: { variant: "default" }
@@ -104,10 +107,10 @@ var TableRow = ({ className = "", children, onClick, variant = "default" }) => {
     const childList = Array.isArray(children) ? children : [children];
     return getChildren(childList);
   }, [children]);
-  return /* @__PURE__ */ jsxRuntime.jsx("tr", { className: chunkQJNQCLMV_js.cn(tableRowVariants({ variant }), "nx:min-w-0", className), onClick, children: columnList });
+  return /* @__PURE__ */ jsxRuntime.jsx("tr", { className: chunkCZC76ZD5_js.cn(tableRowVariants({ variant }), className), onClick, children: columnList });
 };
 TableRow.displayName = "TableRow";
-var DefaultSortIcon = ({ direction }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "nx:size-4", viewBox: "0 0 16 16", fill: "currentColor", children: [
+var DefaultSortIcon = ({ direction }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "nexus-table-sort-icon", viewBox: "0 0 16 16", fill: "currentColor", children: [
   direction === "asc" && /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 4l4 5H4z" }),
   direction === "desc" && /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 12l4-5H4z" }),
   direction === "default" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -142,12 +145,12 @@ var findTrRow = (children) => {
   return result;
 };
 var ALIGN_CLASSES2 = {
-  center: "nx:text-center nx:justify-center",
-  left: "nx:text-left nx:justify-start",
-  right: "nx:text-right nx:justify-end"
+  center: "nexus-td--center",
+  left: "nexus-td--left",
+  right: "nexus-td--right"
 };
-var DefaultNoData = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nx:flex nx:items-center nx:justify-center nx:py-12 nx:text-text-tertiary", children: "No data available." });
-var DefaultLoading = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nx:flex nx:items-center nx:justify-center nx:py-12", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nx:h-8 nx:w-8 nx:animate-spin nx:rounded-full nx:border-2 nx:border-border-default nx:border-t-accent-primary" }) });
+var DefaultNoData = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-table-center nexus-table-nodata", children: "No data available." });
+var DefaultLoading = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-table-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-table-loading-icon" }) });
 function Table({
   className = "",
   theadClassName = "",
@@ -190,6 +193,7 @@ function Table({
         thRowSpan: component.props?.thRowSpan,
         rowSpan: component.props?.rowSpan,
         colSpan: component.props?.colSpan,
+        size: component.props?.size,
         widthClassName: widthClassName && widthClassName.join(" "),
         align: component.props?.align ?? "left",
         order: component.props?.order ?? ""
@@ -211,8 +215,19 @@ function Table({
     return Array.from({ length: skeletonCount }, (_, trIndex) => /* @__PURE__ */ jsxRuntime.jsx(
       "tr",
       {
-        className: chunkQJNQCLMV_js.cn(trRowComponent?.props?.className, "nx:flex nx:cursor-default"),
-        children: thRowData?.map((thData, tdIndex) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: chunkQJNQCLMV_js.cn(thData.widthClassName, "nx:h-full nx:w-full nx:py-4"), children: /* @__PURE__ */ jsxRuntime.jsx(chunk5XVEYVYA_js.Skeleton, { className: "nx:h-4 nx:w-full" }) }, `skeleton-td-${tdIndex}`))
+        className: chunkCZC76ZD5_js.cn(trRowComponent?.props?.className, "nexus-table-skeleton-row"),
+        children: thRowData?.map((thData, tdIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+          "td",
+          {
+            className: chunkCZC76ZD5_js.cn(thData.widthClassName, "nexus-table-skeleton-td"),
+            style: thData.size ? {
+              width: typeof thData.size === "number" ? `${thData.size}px` : thData.size,
+              flex: `0 0 ${typeof thData.size === "number" ? `${thData.size}px` : thData.size}`
+            } : void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(chunkBLGQHR3M_js.Skeleton, { className: "nexus-table-skeleton-bar" })
+          },
+          `skeleton-td-${tdIndex}`
+        ))
       },
       `skeleton-tr-${trIndex}`
     ));
@@ -261,28 +276,45 @@ function Table({
       }
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(TableHighlightProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkQJNQCLMV_js.cn("nx:overflow-x-auto", className), children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "nx:w-full", children: [
-    !hideThead && /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: chunkQJNQCLMV_js.cn("nx:flex nx:bg-surface-default", theadClassName), children: thRowData.map((thData, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(TableHighlightProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkCZC76ZD5_js.cn("nexus-table-wrap", className), children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "nexus-table", children: [
+    !hideThead && /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: chunkCZC76ZD5_js.cn("nexus-table-thead", theadClassName), children: thRowData.map((thData, index) => /* @__PURE__ */ jsxRuntime.jsx(
       "th",
       {
         rowSpan: thData.thRowSpan ?? thData.rowSpan,
         colSpan: thData.thColSpan ?? thData.colSpan,
-        onClick: () => handleThSorting({ ...thData, index }),
-        className: chunkQJNQCLMV_js.cn(
-          "nx:flex",
-          thData.widthClassName?.includes("flex-1") ? "" : "nx:w-full",
-          thData.enableSorting && "nx:cursor-pointer nx:items-center nx:gap-1",
+        className: chunkCZC76ZD5_js.cn(
+          "nexus-table-th",
+          thData.enableSorting && "nexus-table-th--sortable",
           ALIGN_CLASSES2[thData.align ?? "left"],
           thData.widthClassName
         ),
-        children: [
-          thData.label,
-          !!thData.enableSorting && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-            thData.order !== "desc" && thData.order !== "asc" && /* @__PURE__ */ jsxRuntime.jsx(DefaultSortIcon, { direction: "default" }),
-            thData.order === "desc" && sortDownElement,
-            thData.order === "asc" && sortUpElement
-          ] })
-        ]
+        style: thData.size ? {
+          width: typeof thData.size === "number" ? `${thData.size}px` : thData.size,
+          flex: `0 0 ${typeof thData.size === "number" ? `${thData.size}px` : thData.size}`
+        } : void 0,
+        children: thData.enableSorting ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "nexus-table-th__sort-btn",
+            onClick: () => handleThSorting({ ...thData, index }),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleThSorting({ ...thData, index });
+              }
+            },
+            "aria-label": `Sort by ${thData.label}${thData.order === "asc" ? ", ascending" : thData.order === "desc" ? ", descending" : ""}`,
+            children: [
+              thData.label,
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                thData.order !== "desc" && thData.order !== "asc" && /* @__PURE__ */ jsxRuntime.jsx(DefaultSortIcon, { direction: "default" }),
+                thData.order === "desc" && sortDownElement,
+                thData.order === "asc" && sortUpElement
+              ] })
+            ]
+          }
+        ) : thData.label
       },
       `th-${thData.fieldId ?? index}`
     )) }) }),