@nexus-cross/design-system 1.0.6 → 1.0.8

package/dist/chunks/{chunk-SUIT4XKB.js → chunk-3RK3UT2O.js}

@@ -41,7 +41,8 @@ var TdColumn = ({
   rowSpan,
   align = "left",
   textOverflow = "truncate",
-  highlightKey
+  highlightKey,
+  style
 }) => {
   const { highlightValue, setHighlightValue } = useTableHighlight();
   const isHighlighted = !!highlightKey && !!highlightValue && highlightKey === highlightValue;
@@ -52,6 +53,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__ */ jsxRuntime.jsx(
     "td",
     {
@@ -59,7 +61,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__ */ jsxRuntime.jsx(
@@ -110,6 +112,25 @@ var TableRow = ({ className = "", children, onClick, variant = "default" }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("tr", { className: chunkCZC76ZD5_js.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__ */ 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" }),
@@ -181,7 +202,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 ?? "",
@@ -194,6 +218,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 ?? ""
@@ -220,10 +245,13 @@ function Table({
           "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,
+            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__ */ jsxRuntime.jsx(chunkBLGQHR3M_js.Skeleton, { className: "nexus-table-skeleton-bar" })
           },
           `skeleton-td-${tdIndex}`
@@ -288,10 +316,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__ */ jsxRuntime.jsxs(
           "button",
           {

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

@@ -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",
           {

package/dist/chunks/chunk-DDY7ENHX.mjs

@@ -0,0 +1,53 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ChevronRight = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var BreadcrumbItem = ({ children, className }) => {
+  return /* @__PURE__ */ jsx("span", { className, children });
+};
+BreadcrumbItem.displayName = "BreadcrumbItem";
+var Breadcrumb = Object.assign(
+  React.forwardRef(
+    ({ className, children, separator, maxItems, ...props }, ref) => {
+      const items = React.Children.toArray(children).filter(
+        (child) => React.isValidElement(child) && child.type?.displayName === "BreadcrumbItem"
+      );
+      const entries = [];
+      if (maxItems && maxItems > 2 && items.length > maxItems) {
+        entries.push({ type: "item", element: items[0], isLast: false });
+        entries.push({ type: "ellipsis" });
+        const tail = items.slice(-(maxItems - 2));
+        tail.forEach(
+          (el, i) => entries.push({ type: "item", element: el, isLast: i === tail.length - 1 })
+        );
+      } else {
+        items.forEach(
+          (el, i) => entries.push({ type: "item", element: el, isLast: i === items.length - 1 })
+        );
+      }
+      const sep = separator ?? /* @__PURE__ */ jsx(ChevronRight, { className: "nexus-breadcrumb__separator-icon" });
+      return /* @__PURE__ */ jsx("nav", { ref, "aria-label": "Breadcrumb", className: cn("nexus-breadcrumb", className), ...props, children: /* @__PURE__ */ jsx("ol", { className: "nexus-breadcrumb__list", children: entries.map((entry, i) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: "nexus-breadcrumb__item",
+          ...entry.type === "item" && entry.isLast ? { "aria-current": "page" } : void 0,
+          children: [
+            i > 0 && /* @__PURE__ */ jsx("span", { className: "nexus-breadcrumb__separator", "aria-hidden": "true", children: sep }),
+            entry.type === "ellipsis" ? /* @__PURE__ */ jsx("span", { className: "nexus-breadcrumb__ellipsis", children: "\u2026" }) : React.cloneElement(entry.element, {
+              className: cn(
+                entry.isLast ? "nexus-breadcrumb__current" : void 0,
+                entry.element.props.className
+              )
+            })
+          ]
+        },
+        i
+      )) }) });
+    }
+  ),
+  { Item: BreadcrumbItem }
+);
+Breadcrumb.displayName = "Breadcrumb";
+
+export { Breadcrumb, BreadcrumbItem };