@commercetools/nimbus 0.0.0-canary-20250902091333 → 0.0.0-canary-20250903145300

package/dist/chunks/{index-DRWeBbu8.es.js → index-jAeaCpRm.es.js}

@@ -1,13 +1,13 @@
-import { defineAnimationStyles as g, defineGlobalStyles as m, defineLayerStyles as b, defineRecipe as f, defineSemanticTokens as c, defineSlotRecipe as h, defineTextStyles as v, defineTokens as o, createSystem as x, defaultBaseConfig as y, defineConfig as w } from "@chakra-ui/react";
+import { defineAnimationStyles as b, defineGlobalStyles as m, defineLayerStyles as h, defineRecipe as f, defineSemanticTokens as c, defineSlotRecipe as p, defineTextStyles as v, defineTokens as o, createSystem as y, defaultBaseConfig as x, defineConfig as w } from "@chakra-ui/react";
 import { themeTokens as e } from "@commercetools/nimbus-tokens";
-import { a as S } from "./avatar.recipe-CxXQlkH6.es.js";
-import { b as n } from "./button.recipe-D9e9Gh9L.es.js";
-import { d, a as t } from "./config-ufbQ08Vi.es.js";
-import { g as z } from "./group.recipe-BQafmscW.es.js";
-import { k } from "./kbd.recipe-BTW0MQqx.es.js";
-import { l as R } from "./link.recipe-BRnFQ5bP.es.js";
-import { t as C } from "./tooltip.recipe-DsVUEki2.es.js";
-const P = /* @__PURE__ */ g({
+import { a as S } from "./avatar.recipe-DfyPWbFZ.es.js";
+import { b as n } from "./button.recipe-NdTb5f8M.es.js";
+import { defineRecipe as d, defineSlotRecipe as t } from "@chakra-ui/react/styled-system";
+import { g as k } from "./group.recipe-BQafmscW.es.js";
+import { k as z } from "./kbd.recipe-DXiyvrAP.es.js";
+import { l as R } from "./link.recipe-pXiGIJtI.es.js";
+import { t as C } from "./tooltip.recipe-Cqi_tgR5.es.js";
+const I = /* @__PURE__ */ b({
   "slide-fade-in": {
     value: {
       transformOrigin: "var(--transform-origin)",
@@ -55,13 +55,13 @@ const P = /* @__PURE__ */ g({
     }
   }
 });
-function I(a) {
+function P(a) {
   const l = {};
   for (const r in a)
     a[r]?.value ? l[r] = a[r].value : l[r] = a[r];
   return l;
 }
-const W = /* @__PURE__ */ I(e.breakpoints), _ = /* @__PURE__ */ m({
+const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
   "*": {
     fontFeatureSettings: '"liga", "calt", "case", "ss01", "ss07", "ss08", "tnum"',
     /**
@@ -141,7 +141,7 @@ const W = /* @__PURE__ */ I(e.breakpoints), _ = /* @__PURE__ */ m({
     display: "initial",
     verticalAlign: "initial"
   }
-}), N = {
+}), B = {
   spin: {
     "0%": {
       transform: "rotate(0deg)"
@@ -347,14 +347,14 @@ const W = /* @__PURE__ */ I(e.breakpoints), _ = /* @__PURE__ */ m({
       backgroundPosition: "-200% 0"
     }
   }
-}, H = /* @__PURE__ */ b({
+}, N = /* @__PURE__ */ h({
   disabled: {
     value: {
       opacity: "0.5",
       cursor: "not-allowed"
     }
   }
-}), B = /* @__PURE__ */ d({
+}), H = /* @__PURE__ */ d({
   className: "nimbus-code",
   base: {
     fontFamily: "mono",
@@ -414,7 +414,7 @@ const W = /* @__PURE__ */ I(e.breakpoints), _ = /* @__PURE__ */ m({
     variant: "solid",
     size: "md"
   }
-}), A = /* @__PURE__ */ d({
+}), T = /* @__PURE__ */ d({
   className: "nimbus-heading",
   base: {
     fontFamily: "heading",
@@ -460,7 +460,7 @@ const W = /* @__PURE__ */ I(e.breakpoints), _ = /* @__PURE__ */ m({
   defaultVariants: {
     size: "xl"
   }
-}), T = /* @__PURE__ */ d({
+}), A = /* @__PURE__ */ d({
   // Unique class name prefix for the component
   className: "nimbus-text-input",
   // Base styles applied to all instances of the component
@@ -698,20 +698,20 @@ const W = /* @__PURE__ */ I(e.breakpoints), _ = /* @__PURE__ */ m({
     size: "md",
     variant: "plain"
   }
-}), G = {
+}), L = {
   avatar: S,
   button: n,
-  code: B,
-  group: z,
-  heading: A,
-  kbd: k,
+  code: H,
+  group: k,
+  heading: T,
+  kbd: z,
   link: R,
   tooltip: C,
-  textInput: T,
+  textInput: A,
   radioInput: u,
   toggleButton: V,
   toolbar: D
-}, L = /* @__PURE__ */ c.colors({
+}, G = /* @__PURE__ */ c.colors({
   bg: {
     DEFAULT: {
       value: {
@@ -760,11 +760,11 @@ const W = /* @__PURE__ */ I(e.breakpoints), _ = /* @__PURE__ */ m({
   ...e.color["system-palettes"],
   ...e.color["brand-palettes"],
   ...e.color["semantic-palettes"]
-}), j = /* @__PURE__ */ c.shadows(e.shadow), F = /* @__PURE__ */ c.radii({}), E = {
-  colors: L,
+}), j = /* @__PURE__ */ c.shadows(e.shadow), E = /* @__PURE__ */ c.radii({}), O = {
+  colors: G,
   shadows: j,
-  radii: F
-}, O = /* @__PURE__ */ t({
+  radii: E
+}, F = /* @__PURE__ */ t({
   slots: [
     "trigger",
     "backdrop",
@@ -2800,7 +2800,398 @@ const W = /* @__PURE__ */ I(e.breakpoints), _ = /* @__PURE__ */ m({
     size: "md",
     variant: "solid"
   }
-}), oe = /* @__PURE__ */ t({
+}), oe = /* @__PURE__ */ p({
+  // Available slots for the DataTable component
+  slots: [
+    "root",
+    "table",
+    "header",
+    "column",
+    "body",
+    "row",
+    "cell",
+    "footer",
+    "selectionCell",
+    "detailsButton",
+    "expandButton",
+    "nestedIcon",
+    "headerSortIcon",
+    "columnResizer"
+  ],
+  className: "nimbus-data-table",
+  base: {
+    root: {
+      colorPalette: "slate",
+      display: "block",
+      borderRadius: "8px",
+      border: "1px solid {colors.neutral.3}",
+      boxShadow: "1",
+      overflow: "auto",
+      contain: "layout style",
+      width: "100%",
+      // CSS custom properties for pinned row shadows
+      "--pinned-shadow-left": "inset 2px 0 0 {colors.neutral.7}",
+      "--pinned-shadow-right": "inset -2px 0 0 {colors.neutral.7}",
+      "--pinned-shadow-top": "inset 0 2px 0 {colors.neutral.7}",
+      "--pinned-shadow-bottom": "inset 0 -2px 0 {colors.neutral.7}",
+      "& .react-aria-Cell": {
+        paddingTop: "400",
+        paddingBottom: "400",
+        paddingLeft: "600",
+        paddingRight: "600",
+        color: "neutral.11",
+        focusRing: "outside",
+        hyphens: "auto",
+        "&[data-slot='expand']": {
+          padding: 0
+        },
+        "&[data-slot='pin-row-cell']": {
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        "& .nimbus-table-cell-copy-button": {
+          display: "none"
+        },
+        "& .nimbus-table-cell-pin-button": {
+          display: "none"
+        },
+        "& .nimbus-table-cell-pin-button-pinned": {
+          display: "inherit"
+        }
+      },
+      "& .data-table-row": {
+        borderBottom: "1px solid {colors.neutral.3}",
+        focusRing: "outside",
+        "& td, div": {
+          userSelect: "text"
+        },
+        "&:last-child": {
+          borderBottom: "none"
+        },
+        _hover: {
+          backgroundColor: "{colors.primary.3}",
+          transition: "background-color 100ms ease",
+          transform: "translate3d(0, 0, 0)",
+          "& .data-table-row-details-button": {
+            opacity: 1
+          },
+          "& .nimbus-table-cell-copy-button": {
+            display: "inherit"
+          },
+          "& .nimbus-table-cell-pin-button": {
+            display: "inherit"
+          }
+        },
+        "& .data-table-row-details-button": {
+          opacity: 0
+        },
+        "& .data-table-row-details-button:focus": {
+          opacity: 1
+        }
+      },
+      "& .data-table-row[data-selected='true']": {
+        background: "{colors.primary.4}"
+      },
+      "& .data-table-row[data-disabled='true']": {
+        // layerStyle: "disabled",
+        opacity: 0.8,
+        cursor: "not-allowed"
+      },
+      "& .data-table-row-pinned": {
+        boxShadow: "var(--pinned-shadow-left), var(--pinned-shadow-right)",
+        "&.data-table-row-pinned-first": {
+          boxShadow: "var(--pinned-shadow-left), var(--pinned-shadow-right), var(--pinned-shadow-top)"
+        },
+        "&.data-table-row-pinned-last": {
+          boxShadow: "var(--pinned-shadow-left), var(--pinned-shadow-right), var(--pinned-shadow-bottom)"
+        },
+        "&.data-table-row-pinned-single": {
+          boxShadow: "var(--pinned-shadow-left), var(--pinned-shadow-right), var(--pinned-shadow-top), var(--pinned-shadow-bottom)"
+        }
+      },
+      "& .data-table-header": {
+        background: "colorPalette.2",
+        color: "colorPalette.11",
+        borderBottom: "1px solid {colors.neutral.3}",
+        lineHeight: "400",
+        fontWeight: "500",
+        textStyle: "sm",
+        fontSize: "300",
+        height: "1000",
+        "& .data-table-column-divider": {
+          display: "none",
+          position: "absolute",
+          right: 0,
+          top: "10%",
+          bottom: "10%",
+          height: "80%",
+          width: "1px",
+          pointerEvents: "none"
+        },
+        _hover: {
+          "& .data-table-column-divider": {
+            display: "inherit"
+          },
+          "& tr th:last-of-type .data-table-column-divider": {
+            display: "none"
+          }
+        }
+      }
+      // Multiline header truncation using webkit line clamp
+    },
+    table: {
+      width: "fit-content",
+      tableLayout: "fixed"
+    },
+    header: {
+      background: "colorPalette.2",
+      color: "colorPalette.11",
+      borderBottom: "1px solid {colors.neutral.3}",
+      lineHeight: "400",
+      fontWeight: "500",
+      textStyle: "sm",
+      fontSize: "300",
+      height: "1000",
+      "&[data-sticky]": {
+        position: "sticky",
+        top: 0,
+        zIndex: 10
+      },
+      "& span[data-multiline-header]": {
+        overflow: "hidden",
+        lineHeight: "450",
+        wordBreak: "break-word",
+        whiteSpace: "normal",
+        textOverflow: "ellipsis",
+        textAlign: "left",
+        display: "-webkit-box",
+        WebkitLineClamp: 2,
+        WebkitBoxOrient: "vertical"
+      },
+      "& .data-table-column-divider": {
+        display: "none",
+        position: "absolute",
+        right: 0,
+        top: "10%",
+        bottom: "10%",
+        height: "80%",
+        width: "1px",
+        pointerEvents: "none"
+      },
+      _hover: {
+        "& .data-table-column-divider": {
+          display: "inherit"
+        },
+        "& tr th:last-of-type .data-table-column-divider": {
+          display: "none"
+        }
+      }
+    },
+    column: {
+      textAlign: "right",
+      position: "relative",
+      lineHeight: "450",
+      h: "100%",
+      "&:focus": {
+        outlineWidth: "var(--focus-ring-width)",
+        outlineColor: "var(--focus-ring-color)",
+        outlineStyle: "var(--focus-ring-style)",
+        outlineOffset: "-2px",
+        borderRadius: "2px"
+      },
+      "& > .nimbus-data-table__column-container": {
+        paddingTop: "100",
+        paddingBottom: "100",
+        paddingLeft: "600",
+        paddingRight: "600",
+        display: "flex",
+        alignItems: "center",
+        h: "100%",
+        // https://react-spectrum.adobe.com/react-aria/Table.html#width-values
+        "&:focus": {
+          outlineWidth: "var(--focus-ring-width)",
+          outlineColor: "var(--focus-ring-color)",
+          outlineStyle: "var(--focus-ring-style)",
+          outlineOffset: "-2px",
+          borderRadius: "2px"
+        },
+        "& > span:not(:first-of-type)": {
+          flexShrink: 0
+        }
+      },
+      "&.selection-column-header, &.expand-column-header": {
+        cursor: "default",
+        paddingTop: "100",
+        paddingBottom: "100",
+        paddingLeft: "600",
+        paddingRight: "600",
+        "&:hover": {
+          backgroundColor: "transparent"
+        }
+      },
+      "&.expand-column-header": {
+        padding: "0"
+      },
+      "&[aria-sort]": {
+        fontWeight: 600,
+        cursor: "pointer",
+        "&[aria-sort='none']:hover": {
+          "& .nimbus-data-table__headerSortIcon > svg": {
+            display: "inherit"
+          }
+        }
+      }
+    },
+    body: {},
+    row: {
+      position: "relative",
+      borderBottom: "1px solid {colors.neutral.3}",
+      focusRing: "outside",
+      "&:hover:not([data-nested-row-expanded])": {
+        backgroundColor: "{colors.primary.3}",
+        transition: "background-color 200ms ease",
+        transform: "translate3d(0, 0, 0)",
+        "& .nimbus-data-table__detailsButton": {
+          opacity: 1
+        }
+      },
+      "& td, div": {
+        userSelect: "none"
+      },
+      "&:last-child": {
+        borderBottom: "none"
+      },
+      "&[data-clickable='true']": {
+        cursor: "pointer"
+      },
+      "&[data-selected='true']": {
+        background: "{colors.primary.4}"
+      },
+      "&[data-disabled='true']": {
+        // layerStyle: "disabled",
+        opacity: 0.8,
+        cursor: "not-allowed"
+      },
+      "&[data-nested-row-expanded='false']": {
+        display: "none"
+      }
+    },
+    cell: {
+      paddingTop: "400",
+      paddingBottom: "400",
+      paddingLeft: "600",
+      paddingRight: "600",
+      color: "neutral.11",
+      focusRing: "outside",
+      hyphens: "auto",
+      height: "100%",
+      _hover: {
+        "& .nimbus-table-cell-copy-button:not([data-disabled='true'])": {
+          display: "inherit"
+        }
+      },
+      "&[data-slot='expand']": {
+        padding: 0
+      },
+      "& .nimbus-table-cell-copy-button": {
+        display: "none",
+        ml: "100"
+      },
+      "&[data-nested-cell]": {
+        boxShadow: "inset 2px 0 0 {colors.primary.10}"
+      }
+    },
+    footer: {
+      width: "100%"
+    },
+    selectionCell: {},
+    detailsButton: {
+      margin: "auto",
+      colorPalette: "primary",
+      opacity: 0,
+      focusRing: "outside",
+      _focus: {
+        opacity: 1
+      },
+      "&[data-disabled='true']": {
+        opacity: 0
+      }
+    },
+    nestedIcon: {},
+    headerSortIcon: {
+      transition: "transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      marginLeft: "6px",
+      width: "16px",
+      height: "16px",
+      willChange: "opacity, color, transform",
+      color: "neutral.10",
+      // Only hide the svg so that the sort icon appearing does not cause layout shift
+      "& > svg": { display: "none" },
+      "&[data-sort-active='true']": {
+        color: "neutral.11",
+        "& > svg": { display: "inherit" }
+      },
+      "&[data-sort-direction='ascending']": {
+        transform: "rotate(180deg)"
+      }
+    },
+    columnResizer: {
+      width: "150",
+      height: "100%",
+      position: "absolute",
+      right: 0,
+      top: 0,
+      cursor: "col-resize",
+      transition: "background 100ms",
+      background: "transparent",
+      outline: "none",
+      zIndex: 2,
+      "&:hover": {
+        background: "var(--focus-ring-color)"
+      },
+      "&[data-resizing='true']": {
+        background: "{colors.primary}"
+      },
+      "&[data-focused='true']": {
+        outlineWidth: "var(--focus-ring-width)",
+        outlineColor: "var(--focus-ring-color)",
+        outlineStyle: "var(--focus-ring-style)"
+      }
+    }
+  },
+  // Variants for different states
+  variants: {
+    truncated: {
+      true: {
+        root: {
+          "& .truncated-cell": {
+            maxWidth: "200px",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }
+        }
+      }
+    },
+    density: {
+      default: {
+        cell: {
+          paddingTop: "400",
+          paddingBottom: "400"
+        }
+      },
+      condensed: {
+        cell: {
+          paddingTop: "300",
+          paddingBottom: "300"
+        }
+      }
+    }
+  }
+}), re = /* @__PURE__ */ t({
   className: "nimbus-progress-bar",
   slots: ["root", "track", "fill", "label", "value"],
   // Base styles applied to all instances of the component
@@ -2948,7 +3339,7 @@ const W = /* @__PURE__ */ I(e.breakpoints), _ = /* @__PURE__ */ m({
       }
     }
   ]
-}), re = /* @__PURE__ */ t({
+}), ae = /* @__PURE__ */ t({
   slots: [
     "root",
     "trigger",
@@ -3129,7 +3520,7 @@ const W = /* @__PURE__ */ I(e.breakpoints), _ = /* @__PURE__ */ m({
       letterSpacing: "{spacing.25}"
     }
   }
-}), ae = /* @__PURE__ */ h({
+}), ie = /* @__PURE__ */ p({
   slots: ["root", "buttonGroup", "primaryButton", "dropdownTrigger"],
   // Unique class name prefix for the component
   className: "nimbus-split-button",
@@ -3190,8 +3581,8 @@ const W = /* @__PURE__ */ I(e.breakpoints), _ = /* @__PURE__ */ m({
     variant: "solid"
     // Match component default
   }
-}), ie = {
-  dialog: O,
+}), le = {
+  dialog: F,
   list: M,
   table: Y,
   checkbox: s,
@@ -3205,24 +3596,25 @@ const W = /* @__PURE__ */ I(e.breakpoints), _ = /* @__PURE__ */ m({
   dateInput: Z,
   dateRangePicker: te,
   datePicker: ee,
+  dataTable: oe,
   radioInput: u,
   combobox: J,
-  progressBar: oe,
-  menu: re,
-  splitButton: ae
-}, le = /* @__PURE__ */ v(
+  progressBar: re,
+  menu: ae,
+  splitButton: ie
+}, ne = /* @__PURE__ */ v(
   e.textStyle
-), ne = /* @__PURE__ */ o.durations(e.aspectRatio), se = /* @__PURE__ */ o.animations(e.animation), de = /* @__PURE__ */ o.blurs(e.blur), ce = /* @__PURE__ */ o.borders(e.border), ue = /* @__PURE__ */ o.colors({
+), se = /* @__PURE__ */ o.durations(e.aspectRatio), de = /* @__PURE__ */ o.animations(e.animation), ce = /* @__PURE__ */ o.blurs(e.blur), pe = /* @__PURE__ */ o.borders(e.border), ue = /* @__PURE__ */ o.colors({
   ...e.color["blacks-and-whites"]
-}), pe = /* @__PURE__ */ o.durations(e.duration), ge = /* @__PURE__ */ o.easings(e.easing), me = /* @__PURE__ */ o.fonts(e.fontFamily), be = /* @__PURE__ */ o.fontSizes(e.fontSize), fe = /* @__PURE__ */ o.fontWeights(e.fontWeight), he = (a) => Object.keys(a).reduce(
+}), ge = /* @__PURE__ */ o.durations(e.duration), be = /* @__PURE__ */ o.easings(e.easing), me = /* @__PURE__ */ o.fonts(e.fontFamily), he = /* @__PURE__ */ o.fontSizes(e.fontSize), fe = /* @__PURE__ */ o.fontWeights(e.fontWeight), ve = (a) => Object.keys(a).reduce(
   (l, r) => {
-    const p = parseFloat(a[r].value) / 100;
-    return l[r] = { value: `${p}em` }, l;
+    const g = parseFloat(a[r].value) / 100;
+    return l[r] = { value: `${g}em` }, l;
   },
   {}
-), ve = /* @__PURE__ */ o.letterSpacings(
-  /* @__PURE__ */ he(e.letterSpacing)
-), xe = /* @__PURE__ */ o.lineHeights(e.lineHeight), ye = /* @__PURE__ */ o.radii(e.borderRadius), we = /* @__PURE__ */ o.spacing(e.spacing), Se = /* @__PURE__ */ o.sizes({
+), ye = /* @__PURE__ */ o.letterSpacings(
+  /* @__PURE__ */ ve(e.letterSpacing)
+), xe = /* @__PURE__ */ o.lineHeights(e.lineHeight), we = /* @__PURE__ */ o.radii(e.borderRadius), Se = /* @__PURE__ */ o.spacing(e.spacing), ke = /* @__PURE__ */ o.sizes({
   ...e.size,
   "1/2": {
     value: "50%"
@@ -3338,43 +3730,43 @@ const W = /* @__PURE__ */ I(e.breakpoints), _ = /* @__PURE__ */ m({
   vh: {
     value: "100vh"
   }
-}), ze = /* @__PURE__ */ o.zIndex(e.zIndex), ke = /* @__PURE__ */ o.cursor(e.cursor), Re = {
-  aspectRatios: ne,
-  animations: se,
-  blurs: de,
-  borders: ce,
+}), ze = /* @__PURE__ */ o.zIndex(e.zIndex), Re = /* @__PURE__ */ o.cursor(e.cursor), Ce = {
+  aspectRatios: se,
+  animations: de,
+  blurs: ce,
+  borders: pe,
   colors: ue,
-  durations: pe,
-  easings: ge,
+  durations: ge,
+  easings: be,
   fonts: me,
-  fontSizes: be,
+  fontSizes: he,
   fontWeights: fe,
-  letterSpacings: ve,
+  letterSpacings: ye,
   lineHeights: xe,
-  radii: ye,
-  spacing: we,
-  sizes: Se,
+  radii: we,
+  spacing: Se,
+  sizes: ke,
   zIndex: ze,
-  cursor: ke
-}, Ce = /* @__PURE__ */ w({
+  cursor: Re
+}, Ie = /* @__PURE__ */ w({
   preflight: !0,
   cssVarsPrefix: "nimbus",
   cssVarsRoot: ":where(:root, :host)",
   globalCss: _,
   theme: {
     breakpoints: W,
-    keyframes: N,
-    tokens: Re,
-    semanticTokens: E,
-    recipes: G,
-    slotRecipes: ie,
-    textStyles: le,
-    layerStyles: H,
-    animationStyles: P
+    keyframes: B,
+    tokens: Ce,
+    semanticTokens: O,
+    recipes: L,
+    slotRecipes: le,
+    textStyles: ne,
+    layerStyles: N,
+    animationStyles: I
   }
-}), De = /* @__PURE__ */ x(y, Ce);
+}), Le = /* @__PURE__ */ y(x, Ie);
 export {
-  ae as a,
+  ie as a,
   V as b,
   U as c,
   Z as d,
@@ -3384,11 +3776,12 @@ export {
   K as h,
   u as i,
   i as j,
-  J as k,
-  re as m,
+  oe as k,
+  J as l,
+  ae as m,
   q as n,
   Q as r,
-  De as s,
-  T as t
+  Le as s,
+  A as t
 };
-//# sourceMappingURL=index-DRWeBbu8.es.js.map
+//# sourceMappingURL=index-jAeaCpRm.es.js.map