@nexus-cross/design-system 1.0.6-beta.2 → 1.0.7

package/dist/chunks/chunk-6BWOKTVQ.mjs

@@ -0,0 +1,87 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var ImageIcon = ({ className }) => /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+  /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 15l-5-5L5 21" })
+] });
+var NxImage = React.forwardRef(
+  ({
+    className,
+    src,
+    alt,
+    fallback,
+    fallbackSrc,
+    aspectRatio,
+    objectFit = "cover",
+    lazy = true,
+    wrapperClassName,
+    style,
+    onError,
+    onLoad,
+    ...props
+  }, ref) => {
+    const [status, setStatus] = React.useState(
+      "loading"
+    );
+    React.useEffect(() => {
+      setStatus("loading");
+    }, [src]);
+    const handleLoad = React.useCallback(
+      (e) => {
+        setStatus("loaded");
+        onLoad?.(e);
+      },
+      [onLoad]
+    );
+    const handleError = React.useCallback(
+      (e) => {
+        if (fallbackSrc && e.currentTarget.src !== fallbackSrc) {
+          e.currentTarget.src = fallbackSrc;
+          return;
+        }
+        setStatus("error");
+        onError?.(e);
+      },
+      [fallbackSrc, onError]
+    );
+    const wrapperStyle = {
+      ...style,
+      ...aspectRatio ? { aspectRatio } : {}
+    };
+    const showFallback = status === "error" || !src;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("nexus-image", wrapperClassName),
+        style: wrapperStyle,
+        children: showFallback ? /* @__PURE__ */ jsx("div", { className: "nexus-image__fallback", children: fallback ?? /* @__PURE__ */ jsx(ImageIcon, { className: "nexus-image__fallback-icon" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          status === "loading" && /* @__PURE__ */ jsx("div", { className: "nexus-image__skeleton" }),
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              ref,
+              src,
+              alt: alt ?? "",
+              loading: lazy ? "lazy" : "eager",
+              className: cn(
+                "nexus-image__img",
+                `nexus-image__img--${objectFit}`,
+                status === "loaded" && "nexus-image__img--loaded",
+                className
+              ),
+              onLoad: handleLoad,
+              onError: handleError,
+              ...props
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+NxImage.displayName = "NxImage";
+
+export { NxImage };

package/dist/chunks/chunk-6DBRL6NA.mjs

@@ -0,0 +1,81 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DropdownMenu = ({
+  children,
+  items,
+  align = "start",
+  side = "bottom",
+  className,
+  contentClassName
+}) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Root, { children: [
+  /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { asChild: true, className, children }),
+  /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      align,
+      side,
+      sideOffset: 4,
+      className: cn("nexus-dropdown-content", contentClassName),
+      children: items.map(
+        (item, i) => item.separator ? /* @__PURE__ */ jsx(
+          DropdownMenuPrimitive.Separator,
+          {
+            className: "nexus-dropdown-separator"
+          },
+          i
+        ) : /* @__PURE__ */ jsxs(
+          DropdownMenuPrimitive.Item,
+          {
+            className: cn(
+              "nexus-dropdown-item",
+              item.danger && "nexus-dropdown-item--danger"
+            ),
+            disabled: item.disabled,
+            onSelect: item.onClick,
+            children: [
+              item.icon && /* @__PURE__ */ jsx("span", { className: "nexus-dropdown-item__icon", children: item.icon }),
+              /* @__PURE__ */ jsx("span", { children: item.label })
+            ]
+          },
+          item.value ?? i
+        )
+      )
+    }
+  ) })
+] });
+DropdownMenu.displayName = "DropdownMenu";
+var DropdownMenuRoot = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn("nexus-dropdown-content", className),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuItem = React.forwardRef(({ className, danger, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn("nexus-dropdown-item", danger && "nexus-dropdown-item--danger", className),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("nexus-dropdown-separator", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+
+export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuTrigger };

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

@@ -1,7 +1,7 @@
 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 React, { createContext, useState, useMemo, Children, isValidElement, Fragment, useCallback, useContext } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 
@@ -35,7 +35,8 @@ var TdColumn = ({
   rowSpan,
   align = "left",
   textOverflow = "truncate",
-  highlightKey
+  highlightKey,
+  style
 }) => {
   const { highlightValue, setHighlightValue } = useTableHighlight();
   const isHighlighted = !!highlightKey && !!highlightValue && highlightKey === highlightValue;
@@ -46,6 +47,7 @@ var TdColumn = ({
     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;
+  const mergedStyle = { ...sizeStyle, ...style };
   return /* @__PURE__ */ jsx(
     "td",
     {
@@ -53,7 +55,7 @@ var TdColumn = ({
       title: textOverflow === "truncate" && typeof children === "string" ? children : void 0,
       colSpan,
       rowSpan,
-      style: sizeStyle,
+      style: Object.keys(mergedStyle).length > 0 ? mergedStyle : void 0,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: /* @__PURE__ */ jsx(
@@ -104,6 +106,25 @@ var TableRow = ({ className = "", children, onClick, variant = "default" }) => {
   return /* @__PURE__ */ jsx("tr", { className: cn(tableRowVariants({ variant }), className), onClick, children: columnList });
 };
 TableRow.displayName = "TableRow";
+var SIZING_STYLE_KEYS = [
+  "width",
+  "minWidth",
+  "maxWidth",
+  "flex",
+  "flexBasis",
+  "flexGrow",
+  "flexShrink"
+];
+function extractSizingStyle(style) {
+  if (!style) return void 0;
+  const result = {};
+  for (const key of SIZING_STYLE_KEYS) {
+    if (style[key] !== void 0) {
+      result[key] = style[key];
+    }
+  }
+  return Object.keys(result).length > 0 ? result : void 0;
+}
 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" }),
@@ -175,7 +196,10 @@ function Table({
       const component = column;
       const tdClassName = component?.props?.className;
       const widthClassName = tdClassName?.match(
-        /(fold:|mobile-sm:|tablet:|desktop-sm:|desktop:|desktop-lg:|wide-desktop:|xs:|sm:|md:|lg:|xl:|2xl:)?(w-\[[0-9]+(\.[0-9]+)?px\]|w-full|w-\d+\/\d+|w-\d+|min-w-[^\s"]+|max-w-[^\s"]+)/g
+        /(fold:|mobile-sm:|tablet:|desktop-sm:|desktop:|desktop-lg:|wide-desktop:|xs:|sm:|md:|lg:|xl:|2xl:)?(w-\[[^\]]+\]|w-full|w-\d+\/\d+|w-\d+|min-w-[^\s"]+|max-w-[^\s"]+|flex-[^\s"]+|basis-[^\s"]+|grow(-[^\s"]+)?|shrink(-[^\s"]+)?)/g
+      );
+      const sizingStyle = extractSizingStyle(
+        component.props?.style
       );
       return {
         className: component.props?.className ?? "",
@@ -188,6 +212,7 @@ function Table({
         rowSpan: component.props?.rowSpan,
         colSpan: component.props?.colSpan,
         size: component.props?.size,
+        sizingStyle,
         widthClassName: widthClassName && widthClassName.join(" "),
         align: component.props?.align ?? "left",
         order: component.props?.order ?? ""
@@ -214,10 +239,13 @@ function Table({
           "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,
+            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,
+              ...thData.sizingStyle
+            },
             children: /* @__PURE__ */ jsx(Skeleton, { className: "nexus-table-skeleton-bar" })
           },
           `skeleton-td-${tdIndex}`
@@ -282,10 +310,13 @@ function Table({
           ALIGN_CLASSES2[thData.align ?? "left"],
           thData.widthClassName
         ),
-        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,
+        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,
+          ...thData.sizingStyle
+        },
         children: thData.enableSorting ? /* @__PURE__ */ jsxs(
           "button",
           {
@@ -322,4 +353,11 @@ function Table({
   ] }) }) });
 }
 
-export { Table, TableHighlightProvider, TableRow, TdColumn, tableRowVariants, useTableHighlight };
+// src/table/index.ts
+var Table2 = Object.assign(Table, {
+  Row: TableRow,
+  Column: TdColumn,
+  HighlightProvider: TableHighlightProvider
+});
+
+export { Table2 as Table, TableHighlightProvider, TableRow, TdColumn, tableRowVariants, useTableHighlight };

package/dist/chunks/chunk-B5O6W3Z4.mjs

@@ -0,0 +1,73 @@
+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 progressVariants = cva("nexus-progress", {
+  variants: {
+    variant: {
+      primary: "nexus-progress--primary",
+      success: "nexus-progress--success",
+      warning: "nexus-progress--warning",
+      danger: "nexus-progress--danger",
+      info: "nexus-progress--info"
+    },
+    size: {
+      sm: "nexus-progress--sm",
+      md: "nexus-progress--md",
+      lg: "nexus-progress--lg"
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md"
+  }
+});
+var Progress = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    value = 0,
+    max = 100,
+    showValue = false,
+    indeterminate = false,
+    label,
+    ...props
+  }, ref) => {
+    const percentage = Math.min(100, Math.max(0, value / max * 100));
+    return /* @__PURE__ */ jsxs("div", { className: cn("nexus-progress-wrapper", className), ref, ...props, children: [
+      (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "nexus-progress__header", children: [
+        label && /* @__PURE__ */ jsx("span", { className: "nexus-progress__label", children: label }),
+        showValue && !indeterminate && /* @__PURE__ */ jsxs("span", { className: "nexus-progress__value", children: [
+          Math.round(percentage),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(progressVariants({ variant, size })),
+          role: "progressbar",
+          "aria-valuenow": indeterminate ? void 0 : value,
+          "aria-valuemin": 0,
+          "aria-valuemax": max,
+          "aria-label": label,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "nexus-progress__bar",
+                indeterminate && "nexus-progress__bar--indeterminate"
+              ),
+              style: indeterminate ? void 0 : { width: `${percentage}%` }
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+Progress.displayName = "Progress";
+
+export { Progress, progressVariants };