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

package/dist/chunks/{chunk-OGUTGD4J.mjs → chunk-HNLI646G.mjs}

@@ -1,5 +1,5 @@
-import { Skeleton } from './chunk-B7UU3FSS.mjs';
-import { cn } from './chunk-XALPBGSC.mjs';
+import { Skeleton } from './chunk-P2T72N62.mjs';
+import { cn } from './chunk-MCKOWMLS.mjs';
 import { orderBy } from 'lodash-es';
 import React, { createContext, useContext, useState, useCallback, useMemo, Children, isValidElement, Fragment } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
@@ -16,20 +16,21 @@ var TableHighlightProvider = ({ children }) => {
   return /* @__PURE__ */ 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",
@@ -44,24 +45,26 @@ var TdColumn = ({
   const handleMouseLeave = 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__ */ jsx(
     "td",
     {
-      className: cn("nx:min-w-0 nx:w-full", fieldId, className),
+      className: cn("nexus-td", fieldId, className),
       title: textOverflow === "truncate" && typeof children === "string" ? children : void 0,
       colSpan,
       rowSpan,
+      style: sizeStyle,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: /* @__PURE__ */ jsx(
         "div",
         {
           className: cn(
-            typeof children !== "string" && "nx:flex",
+            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
         }
@@ -70,11 +73,11 @@ var TdColumn = ({
   );
 };
 TdColumn.displayName = "TdColumn";
-var tableRowVariants = cva("nx:border-border-default nx:scrollbar-none nx:flex nx:border-b", {
+var tableRowVariants = 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" }
@@ -98,10 +101,10 @@ var TableRow = ({ className = "", children, onClick, variant = "default" }) => {
     const childList = Array.isArray(children) ? children : [children];
     return getChildren(childList);
   }, [children]);
-  return /* @__PURE__ */ jsx("tr", { className: cn(tableRowVariants({ variant }), "nx:min-w-0", className), onClick, children: columnList });
+  return /* @__PURE__ */ jsx("tr", { className: cn(tableRowVariants({ variant }), className), onClick, children: columnList });
 };
 TableRow.displayName = "TableRow";
-var DefaultSortIcon = ({ direction }) => /* @__PURE__ */ jsxs("svg", { className: "nx:size-4", viewBox: "0 0 16 16", fill: "currentColor", children: [
+var DefaultSortIcon = ({ direction }) => /* @__PURE__ */ jsxs("svg", { className: "nexus-table-sort-icon", viewBox: "0 0 16 16", fill: "currentColor", children: [
   direction === "asc" && /* @__PURE__ */ jsx("path", { d: "M8 4l4 5H4z" }),
   direction === "desc" && /* @__PURE__ */ jsx("path", { d: "M8 12l4-5H4z" }),
   direction === "default" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -136,12 +139,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__ */ 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__ */ jsx("div", { className: "nx:flex nx:items-center nx:justify-center nx:py-12", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "nexus-table-center nexus-table-nodata", children: "No data available." });
+var DefaultLoading = () => /* @__PURE__ */ jsx("div", { className: "nexus-table-center", children: /* @__PURE__ */ jsx("div", { className: "nexus-table-loading-icon" }) });
 function Table({
   className = "",
   theadClassName = "",
@@ -184,6 +187,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 ?? ""
@@ -205,8 +209,19 @@ function Table({
     return Array.from({ length: skeletonCount }, (_, trIndex) => /* @__PURE__ */ jsx(
       "tr",
       {
-        className: cn(trRowComponent?.props?.className, "nx:flex nx:cursor-default"),
-        children: thRowData?.map((thData, tdIndex) => /* @__PURE__ */ jsx("td", { className: cn(thData.widthClassName, "nx:h-full nx:w-full nx:py-4"), children: /* @__PURE__ */ jsx(Skeleton, { className: "nx:h-4 nx:w-full" }) }, `skeleton-td-${tdIndex}`))
+        className: cn(trRowComponent?.props?.className, "nexus-table-skeleton-row"),
+        children: thRowData?.map((thData, tdIndex) => /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: 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__ */ jsx(Skeleton, { className: "nexus-table-skeleton-bar" })
+          },
+          `skeleton-td-${tdIndex}`
+        ))
       },
       `skeleton-tr-${trIndex}`
     ));
@@ -255,28 +270,45 @@ function Table({
       }
     }
   };
-  return /* @__PURE__ */ jsx(TableHighlightProvider, { children: /* @__PURE__ */ jsx("div", { className: cn("nx:overflow-x-auto", className), children: /* @__PURE__ */ jsxs("table", { className: "nx:w-full", children: [
-    !hideThead && /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: cn("nx:flex nx:bg-surface-default", theadClassName), children: thRowData.map((thData, index) => /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(TableHighlightProvider, { children: /* @__PURE__ */ jsx("div", { className: cn("nexus-table-wrap", className), children: /* @__PURE__ */ jsxs("table", { className: "nexus-table", children: [
+    !hideThead && /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: cn("nexus-table-thead", theadClassName), children: thRowData.map((thData, index) => /* @__PURE__ */ jsx(
       "th",
       {
         rowSpan: thData.thRowSpan ?? thData.rowSpan,
         colSpan: thData.thColSpan ?? thData.colSpan,
-        onClick: () => handleThSorting({ ...thData, index }),
         className: cn(
-          "nx:flex",
-          thData.widthClassName?.includes("flex-1") ? "" : "nx:w-full",
-          thData.enableSorting && "nx:cursor-pointer nx:items-center nx:gap-1",
+          "nexus-table-th",
+          thData.enableSorting && "nexus-table-th--sortable",
           ALIGN_CLASSES2[thData.align ?? "left"],
           thData.widthClassName
         ),
-        children: [
-          thData.label,
-          !!thData.enableSorting && /* @__PURE__ */ jsxs("span", { children: [
-            thData.order !== "desc" && thData.order !== "asc" && /* @__PURE__ */ 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__ */ 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__ */ jsxs("span", { children: [
+                thData.order !== "desc" && thData.order !== "asc" && /* @__PURE__ */ jsx(DefaultSortIcon, { direction: "default" }),
+                thData.order === "desc" && sortDownElement,
+                thData.order === "asc" && sortUpElement
+              ] })
+            ]
+          }
+        ) : thData.label
       },
       `th-${thData.fieldId ?? index}`
     )) }) }),

package/dist/chunks/{chunk-C6H2UNOX.js → chunk-IE4DGLMH.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkQJNQCLMV_js = require('./chunk-QJNQCLMV.js');
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
@@ -25,23 +25,15 @@ function _interopNamespace(e) {
 
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 
-var tooltipContentVariants = classVarianceAuthority.cva(
-  [
-    "nx:z-50 nx:flex nx:overflow-hidden nx:rounded-md nx:border nx:px-3 nx:py-2 nx:text-sm",
-    "nx:data-[state=closed]:animate-out nx:data-[state=closed]:fade-out-0 nx:data-[state=closed]:zoom-out-95",
-    "nx:data-[side=bottom]:slide-in-from-top-2 nx:data-[side=left]:slide-in-from-right-2",
-    "nx:data-[side=right]:slide-in-from-left-2 nx:data-[side=top]:slide-in-from-bottom-2"
-  ],
-  {
-    variants: {
-      variant: {
-        light: "nx:border nx:border-border-default nx:bg-static-white nx:text-static-black nx:shadow-md",
-        dark: "nx:border-none nx:bg-static-black nx:text-static-white"
-      }
-    },
-    defaultVariants: { variant: "dark" }
-  }
-);
+var tooltipContentVariants = classVarianceAuthority.cva("nexus-tooltip-content", {
+  variants: {
+    variant: {
+      light: "nexus-tooltip--light",
+      dark: "nexus-tooltip--dark"
+    }
+  },
+  defaultVariants: { variant: "dark" }
+});
 var TooltipProvider = TooltipPrimitive__namespace.Provider;
 var Tooltip = ({
   children,
@@ -56,20 +48,20 @@ var Tooltip = ({
 }) => {
   if (disabled) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration, children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipPrimitive__namespace.Root, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { asChild: true, className: chunkQJNQCLMV_js.cn("nx:cursor-default", triggerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("span", { children }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { asChild: true, className: chunkCZC76ZD5_js.cn("nexus-tooltip-trigger", triggerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("span", { children }) }),
     /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
       TooltipPrimitive__namespace.Content,
       {
         side,
         align,
-        className: chunkQJNQCLMV_js.cn(tooltipContentVariants({ variant }), className),
+        className: chunkCZC76ZD5_js.cn(tooltipContentVariants({ variant }), className),
         sideOffset: 4,
         children: [
           content,
           /* @__PURE__ */ jsxRuntime.jsx(
             TooltipPrimitive__namespace.Arrow,
             {
-              style: { fill: variant === "dark" ? "#000000" : "#FFFFFF" }
+              className: variant === "dark" ? "nexus-tooltip-arrow--dark" : "nexus-tooltip-arrow--light"
             }
           )
         ]

package/dist/chunks/{chunk-U76LT5GE.js → chunk-IOSIQLZL.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');
 
@@ -31,7 +31,7 @@ var Spinner = React__namespace.forwardRef(
       ref,
       role: "status",
       "aria-label": ariaLabel,
-      className: chunkQJNQCLMV_js.cn("nx:animate-spin nx:text-current", className),
+      className: chunkCZC76ZD5_js.cn("nexus-spinner", className),
       viewBox: "0 0 50 50",
       fill: "none",
       style: { width: size, height: size },

package/dist/chunks/{chunk-ZCMKIB5U.js → chunk-J5ZKGPBY.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,41 +25,32 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var checkBoxVariants = classVarianceAuthority.cva(
-  "nx:inline-flex nx:items-center nx:gap-2 nx:select-none",
-  {
-    variants: {
-      size: {
-        sm: "nx:text-xs",
-        md: "nx:text-sm"
-      },
-      shape: {
-        square: "",
-        round: ""
-      }
+var checkBoxVariants = classVarianceAuthority.cva("nexus-checkbox", {
+  variants: {
+    size: {
+      sm: "nexus-checkbox--sm",
+      md: "nexus-checkbox--md"
     },
-    defaultVariants: { size: "md", shape: "square" }
-  }
-);
-var boxVariants = classVarianceAuthority.cva(
-  [
-    "nx:inline-flex nx:shrink-0 nx:items-center nx:justify-center 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"
-      },
-      shape: {
-        square: "nx:rounded",
-        round: "nx:rounded-full"
-      }
+    shape: {
+      square: "",
+      round: ""
+    }
+  },
+  defaultVariants: { size: "md", shape: "square" }
+});
+var boxVariants = classVarianceAuthority.cva("nexus-checkbox__box", {
+  variants: {
+    size: {
+      sm: "nexus-checkbox__box--sm",
+      md: "nexus-checkbox__box--md"
     },
-    defaultVariants: { size: "md", shape: "square" }
-  }
-);
+    shape: {
+      square: "nexus-checkbox__box--square",
+      round: "nexus-checkbox__box--round"
+    }
+  },
+  defaultVariants: { size: "md", shape: "square" }
+});
 var CheckIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.5 8.5L6.5 11.5L12.5 5" }) });
 var IndeterminateIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 8h8" }) });
 var CheckBox = React__namespace.forwardRef(
@@ -93,12 +84,13 @@ var CheckBox = React__namespace.forwardRef(
     );
     const isChecked = checked || indeterminate;
     const content = label ?? children;
+    const iconClass = size === "sm" ? "nexus-checkbox__icon--sm" : "nexus-checkbox__icon--md";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
-        className: chunkQJNQCLMV_js.cn(
+        className: chunkCZC76ZD5_js.cn(
           checkBoxVariants({ size, shape }),
-          disabled ? "nx:cursor-not-allowed nx:opacity-50" : "nx:cursor-pointer",
+          disabled ? "nexus-checkbox--disabled" : "nexus-checkbox--pointer",
           className
         ),
         children: [
@@ -107,7 +99,7 @@ var CheckBox = React__namespace.forwardRef(
             {
               ref: innerRef,
               type: "checkbox",
-              className: "nx:peer nx:sr-only",
+              className: "nexus-sr-only",
               checked,
               disabled,
               readOnly,
@@ -120,14 +112,14 @@ var CheckBox = React__namespace.forwardRef(
             "span",
             {
               "aria-hidden": "true",
-              className: chunkQJNQCLMV_js.cn(
+              className: chunkCZC76ZD5_js.cn(
                 boxVariants({ size, shape }),
-                isChecked ? "nx:border-accent-primary nx:bg-accent-primary nx:text-white" : "nx:border-border-default nx:bg-surface-default"
+                isChecked ? "nexus-checkbox__box--checked" : "nexus-checkbox__box--unchecked"
               ),
-              children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(IndeterminateIcon, { className: size === "sm" ? "nx:size-3" : "nx:size-3.5" }) : checked ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: size === "sm" ? "nx:size-3" : "nx:size-3.5" }) : null
+              children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(IndeterminateIcon, { className: iconClass }) : checked ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: iconClass }) : null
             }
           ),
-          content && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nx:text-text-primary", children: content })
+          content && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-checkbox__label", children: content })
         ]
       }
     );

package/dist/chunks/{chunk-JUZHWKGS.mjs → chunk-K2TBLM3F.mjs}

@@ -1,6 +1,6 @@
-import { ErrorBoundary } from './chunk-LBKBCI2K.mjs';
-import { Spinner } from './chunk-LVTD2UQN.mjs';
-import { cn } from './chunk-XALPBGSC.mjs';
+import { ErrorBoundary } from './chunk-VIGRCJAE.mjs';
+import { Spinner } from './chunk-BPUQ2CO2.mjs';
+import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -19,13 +19,10 @@ function DataList({
     if (!list || loading) {
       if (skeletonElement) {
         return Array.from({ length: skeletonCount }).map(
-          (_, index) => React.cloneElement(skeletonElement, {
-            ...skeletonElement.props,
-            key: index
-          })
+          (_, index) => React.cloneElement(skeletonElement, { key: index })
         );
       }
-      return loadingElement ?? /* @__PURE__ */ jsx("div", { className: cn("nx:flex nx:items-center nx:justify-center nx:py-8"), children: /* @__PURE__ */ jsx(Spinner, { size: 32 }) });
+      return loadingElement ?? /* @__PURE__ */ jsx("div", { className: cn("nexus-datalist-center"), children: /* @__PURE__ */ jsx(Spinner, { size: 32 }) });
     }
     if (list.length === 0) {
       if (React.isValidElement(noDataMessage)) {
@@ -34,10 +31,7 @@ function DataList({
       return /* @__PURE__ */ jsx(
         "p",
         {
-          className: cn(
-            "nx:flex nx:items-center nx:justify-center nx:py-8",
-            "nx:text-sm nx:text-text-tertiary"
-          ),
+          className: cn("nexus-datalist-empty"),
           children: noDataMessage ?? "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4"
         }
       );