@commercetools/nimbus 0.0.0-canary-20251001152303 → 0.0.0-canary-20251006121034

package/dist/chunks/{index-fjbcWgyz.es.js → index-Rp8alyOt.es.js}

@@ -218,7 +218,7 @@ function B(r) {
     r[a]?.value ? l[a] = r[a].value : l[a] = r[a];
   return l;
 }
-const H = /* @__PURE__ */ B(e.breakpoints), _ = /* @__PURE__ */ m({
+const _ = /* @__PURE__ */ B(e.breakpoints), H = /* @__PURE__ */ m({
   /**
    * Maps to React Aria's open state data attributes
    * Used for animations when a component is opening/entering
@@ -636,7 +636,7 @@ const H = /* @__PURE__ */ B(e.breakpoints), _ = /* @__PURE__ */ m({
   defaultVariants: {
     size: "xl"
   }
-}), u = /* @__PURE__ */ t({
+}), g = /* @__PURE__ */ t({
   slots: ["root", "option"],
   // Unique class name prefix for the component
   className: "nimbus-radio-input",
@@ -762,7 +762,7 @@ const H = /* @__PURE__ */ B(e.breakpoints), _ = /* @__PURE__ */ m({
     variant: "outline",
     tone: "primary"
   }
-}), F = /* @__PURE__ */ v({
+}), V = /* @__PURE__ */ v({
   className: "nimbus-toolbar",
   base: {
     display: "inline-flex",
@@ -815,7 +815,7 @@ const H = /* @__PURE__ */ B(e.breakpoints), _ = /* @__PURE__ */ m({
     size: "md",
     variant: "plain"
   }
-}), V = {
+}), F = {
   avatar: S,
   button: n,
   code: A,
@@ -824,10 +824,10 @@ const H = /* @__PURE__ */ B(e.breakpoints), _ = /* @__PURE__ */ m({
   kbd: R,
   link: C,
   tooltip: I,
-  radioInput: u,
+  radioInput: g,
   toggleButton: L,
-  toolbar: F
-}, G = /* @__PURE__ */ d.colors({
+  toolbar: V
+}, j = /* @__PURE__ */ d.colors({
   bg: {
     DEFAULT: {
       value: {
@@ -876,11 +876,11 @@ const H = /* @__PURE__ */ B(e.breakpoints), _ = /* @__PURE__ */ m({
   ...e.color["system-palettes"],
   ...e.color["brand-palettes"],
   ...e.color["semantic-palettes"]
-}), O = /* @__PURE__ */ d.shadows(e.shadow), j = /* @__PURE__ */ d.radii({}), M = {
-  colors: G,
-  shadows: O,
-  radii: j
-}, Y = /* @__PURE__ */ t({
+}), G = /* @__PURE__ */ d.shadows(e.shadow), O = /* @__PURE__ */ d.radii({}), M = {
+  colors: j,
+  shadows: G,
+  radii: O
+}, X = /* @__PURE__ */ t({
   className: "nimbus-list",
   slots: ["root", "item", "indicator"],
   base: {
@@ -945,7 +945,7 @@ const H = /* @__PURE__ */ B(e.breakpoints), _ = /* @__PURE__ */ m({
   defaultVariants: {
     variant: "marker"
   }
-}), X = /* @__PURE__ */ t({
+}), Y = /* @__PURE__ */ t({
   className: "chakra-table",
   slots: [
     "root",
@@ -3198,18 +3198,201 @@ const H = /* @__PURE__ */ B(e.breakpoints), _ = /* @__PURE__ */ m({
       }
     }
   }
-}), re = `
+}), re = /* @__PURE__ */ t({
+  slots: ["root", "list", "tab", "panels", "panel", "trigger"],
+  className: "nimbus-tabs",
+  base: {
+    root: {
+      display: "flex",
+      width: "100%"
+    },
+    list: {
+      display: "flex",
+      flexShrink: 0
+    },
+    tab: {
+      appearance: "none",
+      background: "transparent",
+      border: "none",
+      color: "neutral.12",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "200",
+      fontWeight: "500",
+      padding: "300 400",
+      transition: "all 150ms ease",
+      paddingTop: "var(--tabs-padding-top)",
+      paddingRight: "var(--tabs-padding-right)",
+      paddingBottom: "var(--tabs-padding-bottom)",
+      paddingLeft: "var(--tabs-padding-left)",
+      fontSize: "var(--tabs-font-size)",
+      overflowX: "auto",
+      _hover: {
+        color: "primary.11"
+      },
+      _selected: {
+        color: "primary.9",
+        borderColor: "primary.9"
+      },
+      _disabled: {
+        layerStyle: "disabled"
+      },
+      _focusVisible: {
+        layerStyle: "focusRing"
+      }
+    },
+    panels: {
+      flex: 1,
+      minWidth: 0
+    },
+    panel: {
+      _focusVisible: {
+        layerStyle: "focusRing"
+      }
+    }
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: {
+          flexDirection: "column"
+        },
+        list: {
+          borderBottom: "{spacing.25} {colors.neutral.6} solid"
+        },
+        tab: {
+          borderBottom: "{spacing.50} solid transparent",
+          marginRight: "-25",
+          _selected: {
+            borderBottomColor: "primary.9"
+          }
+        }
+      },
+      vertical: {
+        root: {
+          flexDirection: "row"
+        },
+        list: {
+          flexDirection: "column"
+        },
+        tab: {
+          justifyContent: "flex-start"
+        }
+      }
+    },
+    placement: {
+      start: {},
+      end: {}
+    },
+    size: {
+      sm: {
+        tab: {
+          "--tabs-font-size": "fontSizes.300",
+          "--tabs-padding-top": "spacing.100",
+          "--tabs-padding-right": "spacing.300",
+          "--tabs-padding-bottom": "spacing.100",
+          "--tabs-padding-left": "spacing.300"
+        }
+      },
+      md: {
+        tab: {
+          "--tabs-font-size": "fontSizes.350",
+          "--tabs-padding-top": "spacing.200",
+          "--tabs-padding-right": "spacing.400",
+          "--tabs-padding-bottom": "spacing.200",
+          "--tabs-padding-left": "spacing.400"
+        }
+      },
+      lg: {
+        tab: {
+          "--tabs-font-size": "fontSizes.400",
+          "--tabs-padding-top": "spacing.300",
+          "--tabs-padding-right": "spacing.600",
+          "--tabs-padding-bottom": "spacing.300",
+          "--tabs-padding-left": "spacing.600"
+        }
+      }
+    }
+  },
+  // Compound variants for different orientation/placement combinations
+  compoundVariants: [
+    // Horizontal + Start (default)
+    {
+      orientation: "horizontal",
+      placement: "start",
+      css: {
+        list: {
+          justifyContent: "flex-start"
+        }
+      }
+    },
+    // Horizontal + End
+    {
+      orientation: "horizontal",
+      placement: "end",
+      css: {
+        list: {
+          justifyContent: "flex-end"
+        }
+      }
+    },
+    // Vertical + Start (tabs on left, border on left)
+    {
+      orientation: "vertical",
+      placement: "start",
+      css: {
+        root: {
+          flexDirection: "row"
+        },
+        list: {
+          borderLeft: "{spacing.25} {colors.neutral.6} solid"
+        },
+        tab: {
+          borderLeft: "{spacing.50} solid transparent",
+          marginLeft: "-25",
+          _selected: {
+            borderLeftColor: "primary.9"
+          }
+        }
+      }
+    },
+    // Vertical + End (tabs on right, border on right)
+    {
+      orientation: "vertical",
+      placement: "end",
+      css: {
+        list: {
+          borderRight: "{spacing.25} {colors.neutral.6} solid"
+        },
+        tab: {
+          borderRight: "{spacing.50} solid transparent",
+          marginRight: "-25",
+          _selected: {
+            borderRightColor: "primary.9"
+          }
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    placement: "start",
+    size: "md"
+  }
+}), ie = `
 "label"
 "fields"
 "toggle"
 "description"
 "error"
 
-`, ie = `
+`, le = `
 "label input"
 "description description"
 "error error"
-`, le = /* @__PURE__ */ t({
+`, ne = /* @__PURE__ */ t({
   slots: [
     // Group / Fieldset slots
     "root",
@@ -3231,7 +3414,7 @@ const H = /* @__PURE__ */ B(e.breakpoints), _ = /* @__PURE__ */ m({
     root: {
       display: "grid",
       width: "auto",
-      gridTemplateAreas: re,
+      gridTemplateAreas: ie,
       gap: "100"
     },
     label: {
@@ -3291,7 +3474,7 @@ const H = /* @__PURE__ */ B(e.breakpoints), _ = /* @__PURE__ */ m({
     // Individual Locale Field / Input slots
     localeFieldRoot: {
       gap: 0,
-      gridTemplateAreas: ie,
+      gridTemplateAreas: le,
       // Fake `_focusWithin` on the label element, since formfield's `label` and `input` slots cannot be wrapped,
       // and the root slot needs to display desc/warning/error, so the focus styling would be off if we used _focusWithin on it
       "&:has(.nimbus-localized-field__localeFieldInput:focus-within)": {
@@ -3347,7 +3530,105 @@ const H = /* @__PURE__ */ B(e.breakpoints), _ = /* @__PURE__ */ m({
       richText: {}
     }
   }
-}), ne = /* @__PURE__ */ t({
+}), se = /* @__PURE__ */ t({
+  slots: ["root", "leadingElement", "input"],
+  // Unique class name prefix for the component
+  className: "nimbus-search-input",
+  // Base styles applied to all instances of the component
+  base: {
+    root: {
+      display: "inline-flex",
+      position: "relative",
+      cursor: "text",
+      borderRadius: "200",
+      boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
+      alignItems: "center",
+      _focusWithin: {
+        layerStyle: "focusRing"
+      },
+      _hover: {
+        backgroundColor: "primary.2"
+      },
+      "&[data-invalid='true']": {
+        "--border-color": "colors.critical.7",
+        "--border-width": "sizes.50",
+        color: "critical.11"
+      },
+      _disabled: {
+        bg: "neutral.3",
+        layerStyle: "disabled"
+      }
+    },
+    leadingElement: {
+      display: "flex",
+      alignItems: "center",
+      color: "neutral.11",
+      pointerEvents: "none"
+    },
+    input: {
+      cursor: "inherit",
+      display: "block",
+      flexGrow: 1,
+      bg: "transparent",
+      outline: "none",
+      fontSize: "inherit",
+      _placeholder: {
+        opacity: 0.5,
+        color: "currentColor"
+      },
+      "&::-webkit-search-cancel-button": {
+        display: "none"
+      },
+      "&::-webkit-search-decoration": {
+        display: "none"
+      }
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        root: {
+          height: "800",
+          px: "300",
+          gap: "100",
+          textStyle: "sm"
+        },
+        leadingElement: {
+          "& > svg": {
+            boxSize: "400"
+          }
+        }
+      },
+      md: {
+        root: {
+          height: "1000",
+          px: "400",
+          gap: "200",
+          textStyle: "md"
+        },
+        leadingElement: {
+          "& > svg": {
+            boxSize: "500"
+          }
+        }
+      }
+    },
+    variant: {
+      solid: {
+        root: {
+          "--border-width": "sizes.25",
+          "--border-color": "colors.neutral.7",
+          backgroundColor: "primary.1"
+        }
+      },
+      ghost: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "solid"
+  }
+}), de = /* @__PURE__ */ t({
   className: "nimbus-progress-bar",
   slots: ["root", "track", "fill", "label", "value"],
   // Base styles applied to all instances of the component
@@ -3495,7 +3776,7 @@ const H = /* @__PURE__ */ B(e.breakpoints), _ = /* @__PURE__ */ m({
       }
     }
   ]
-}), se = /* @__PURE__ */ t({
+}), ce = /* @__PURE__ */ t({
   slots: [
     "root",
     "trigger",
@@ -3675,7 +3956,7 @@ const H = /* @__PURE__ */ B(e.breakpoints), _ = /* @__PURE__ */ m({
       letterSpacing: "{spacing.25}"
     }
   }
-}), de = /* @__PURE__ */ t({
+}), pe = /* @__PURE__ */ t({
   slots: ["root", "leadingElement", "input", "trailingElement"],
   // Unique class name prefix for the component
   className: "nimbus-text-input",
@@ -3780,7 +4061,7 @@ const H = /* @__PURE__ */ B(e.breakpoints), _ = /* @__PURE__ */ m({
     size: "md",
     variant: "solid"
   }
-}), ce = /* @__PURE__ */ p({
+}), ge = /* @__PURE__ */ p({
   slots: ["root", "buttonGroup", "primaryButton", "dropdownTrigger"],
   // Unique class name prefix for the component
   className: "nimbus-split-button",
@@ -3841,7 +4122,7 @@ const H = /* @__PURE__ */ B(e.breakpoints), _ = /* @__PURE__ */ m({
     variant: "solid"
     // Match component default
   }
-}), pe = /* @__PURE__ */ t({
+}), ue = /* @__PURE__ */ t({
   slots: ["root", "trigger", "content"],
   className: "collapsibleMotion",
   base: {
@@ -3851,10 +4132,10 @@ const H = /* @__PURE__ */ B(e.breakpoints), _ = /* @__PURE__ */ m({
     },
     content: {}
   }
-}), ue = {
+}), be = {
   dialog: P,
-  list: Y,
-  table: X,
+  list: X,
+  table: Y,
   checkbox: s,
   select: i,
   accordion: $,
@@ -3867,27 +4148,29 @@ const H = /* @__PURE__ */ B(e.breakpoints), _ = /* @__PURE__ */ m({
   dateRangePicker: oe,
   datePicker: te,
   dataTable: ae,
-  radioInput: u,
+  radioInput: g,
   combobox: K,
-  progressBar: ne,
-  menu: se,
-  textInput: de,
-  splitButton: ce,
-  localizedField: le,
-  collapsibleMotion: pe
-}, ge = /* @__PURE__ */ x(
+  progressBar: de,
+  menu: ce,
+  textInput: pe,
+  splitButton: ge,
+  tabs: re,
+  localizedField: ne,
+  collapsibleMotion: ue,
+  searchInput: se
+}, me = /* @__PURE__ */ x(
   e.textStyle
-), be = /* @__PURE__ */ o.durations(e.aspectRatio), me = /* @__PURE__ */ o.animations(e.animation), fe = /* @__PURE__ */ o.blurs(e.blur), he = /* @__PURE__ */ o.borders(e.border), ve = /* @__PURE__ */ o.colors({
+), fe = /* @__PURE__ */ o.durations(e.aspectRatio), he = /* @__PURE__ */ o.animations(e.animation), ve = /* @__PURE__ */ o.blurs(e.blur), xe = /* @__PURE__ */ o.borders(e.border), ye = /* @__PURE__ */ o.colors({
   ...e.color["blacks-and-whites"]
-}), xe = /* @__PURE__ */ o.durations(e.duration), ye = /* @__PURE__ */ o.easings(e.easing), we = /* @__PURE__ */ o.fonts(e.fontFamily), ze = /* @__PURE__ */ o.fontSizes(e.fontSize), Se = /* @__PURE__ */ o.fontWeights(e.fontWeight), ke = (r) => Object.keys(r).reduce(
+}), we = /* @__PURE__ */ o.durations(e.duration), ze = /* @__PURE__ */ o.easings(e.easing), Se = /* @__PURE__ */ o.fonts(e.fontFamily), ke = /* @__PURE__ */ o.fontSizes(e.fontSize), Re = /* @__PURE__ */ o.fontWeights(e.fontWeight), Ce = (r) => Object.keys(r).reduce(
   (l, a) => {
-    const g = parseFloat(r[a].value) / 100;
-    return l[a] = { value: `${g}em` }, l;
+    const u = parseFloat(r[a].value) / 100;
+    return l[a] = { value: `${u}em` }, l;
   },
   {}
-), Re = /* @__PURE__ */ o.letterSpacings(
-  /* @__PURE__ */ ke(e.letterSpacing)
-), Ce = /* @__PURE__ */ o.lineHeights(e.lineHeight), Ie = /* @__PURE__ */ o.radii(e.borderRadius), Pe = /* @__PURE__ */ o.spacing(e.spacing), We = /* @__PURE__ */ o.sizes({
+), Ie = /* @__PURE__ */ o.letterSpacings(
+  /* @__PURE__ */ Ce(e.letterSpacing)
+), Pe = /* @__PURE__ */ o.lineHeights(e.lineHeight), We = /* @__PURE__ */ o.radii(e.borderRadius), Be = /* @__PURE__ */ o.spacing(e.spacing), _e = /* @__PURE__ */ o.sizes({
   ...e.size,
   "1/2": {
     value: "50%"
@@ -4003,61 +4286,63 @@ const H = /* @__PURE__ */ B(e.breakpoints), _ = /* @__PURE__ */ m({
   vh: {
     value: "100vh"
   }
-}), Be = /* @__PURE__ */ o.zIndex(e.zIndex), He = /* @__PURE__ */ o.cursor(e.cursor), _e = {
-  aspectRatios: be,
-  animations: me,
-  blurs: fe,
-  borders: he,
-  colors: ve,
-  durations: xe,
-  easings: ye,
-  fonts: we,
-  fontSizes: ze,
-  fontWeights: Se,
-  letterSpacings: Re,
-  lineHeights: Ce,
-  radii: Ie,
-  spacing: Pe,
-  sizes: We,
-  zIndex: Be,
-  cursor: He
-}, Ee = /* @__PURE__ */ z({
+}), He = /* @__PURE__ */ o.zIndex(e.zIndex), Ee = /* @__PURE__ */ o.cursor(e.cursor), Ne = {
+  aspectRatios: fe,
+  animations: he,
+  blurs: ve,
+  borders: xe,
+  colors: ye,
+  durations: we,
+  easings: ze,
+  fonts: Se,
+  fontSizes: ke,
+  fontWeights: Re,
+  letterSpacings: Ie,
+  lineHeights: Pe,
+  radii: We,
+  spacing: Be,
+  sizes: _e,
+  zIndex: He,
+  cursor: Ee
+}, Te = /* @__PURE__ */ z({
   preflight: !0,
   cssVarsPrefix: "nimbus",
   cssVarsRoot: ":where(:root, :host)",
   globalCss: E,
-  conditions: _,
+  conditions: H,
   theme: {
-    breakpoints: H,
+    breakpoints: _,
     keyframes: N,
-    tokens: _e,
+    tokens: Ne,
     semanticTokens: M,
-    recipes: V,
-    slotRecipes: ue,
-    textStyles: ge,
+    recipes: F,
+    slotRecipes: be,
+    textStyles: me,
     layerStyles: T,
     animationStyles: W
   }
-}), Me = /* @__PURE__ */ y(w, Ee);
+}), Ye = /* @__PURE__ */ y(w, Te);
 export {
-  de as a,
-  ce as b,
-  F as c,
+  pe as a,
+  ge as b,
+  V as c,
   ee as d,
   q as e,
   oe as f,
   te as g,
   Q as h,
-  u as i,
+  g as i,
   i as j,
   P as k,
-  le as l,
-  se as m,
-  J as n,
-  ae as o,
-  K as p,
+  ne as l,
+  ce as m,
+  re as n,
+  se as o,
+  J as p,
+  ae as q,
   Z as r,
-  Me as s,
-  L as t
+  Ye as s,
+  L as t,
+  K as u
 };
-//# sourceMappingURL=index-fjbcWgyz.es.js.map
+//# sourceMappingURL=index-Rp8alyOt.es.js.map