@commercetools/nimbus 0.0.0-canary-20251001071243 → 0.0.0-canary-20251001130410

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

@@ -1,6 +1,6 @@
-import { defineAnimationStyles as b, defineConditions as m, defineGlobalStyles as h, defineLayerStyles as f, defineRecipe as v, defineSemanticTokens as d, defineSlotRecipe as p, defineTextStyles as x, defineTokens as o, createSystem as y, defaultBaseConfig as w, defineConfig as S } from "@chakra-ui/react";
+import { defineAnimationStyles as b, defineConditions as m, defineGlobalStyles as f, defineLayerStyles as h, defineRecipe as v, defineSemanticTokens as d, defineSlotRecipe as p, defineTextStyles as x, defineTokens as o, createSystem as y, defaultBaseConfig as w, defineConfig as z } from "@chakra-ui/react";
 import { themeTokens as e } from "@commercetools/nimbus-tokens";
-import { a as z } from "./avatar.recipe-DfyPWbFZ.es.js";
+import { a as S } from "./avatar.recipe-DfyPWbFZ.es.js";
 import { b as n } from "./button.recipe-NdTb5f8M.es.js";
 import { defineSlotRecipe as t, defineRecipe as c } from "@chakra-ui/react/styled-system";
 import { g as k } from "./group.recipe-BQafmscW.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), E = /* @__PURE__ */ m({
+const H = /* @__PURE__ */ B(e.breakpoints), _ = /* @__PURE__ */ m({
   /**
    * Maps to React Aria's open state data attributes
    * Used for animations when a component is opening/entering
@@ -229,7 +229,7 @@ const H = /* @__PURE__ */ B(e.breakpoints), E = /* @__PURE__ */ m({
    * Used for animations when a component is closing/exiting
    */
   closed: "&:is([data-exiting], [data-closed])"
-}), _ = /* @__PURE__ */ h({
+}), E = /* @__PURE__ */ f({
   "*": {
     fontFeatureSettings: '"liga", "calt", "case", "ss01", "ss07", "ss08", "tnum"',
     /**
@@ -515,7 +515,7 @@ const H = /* @__PURE__ */ B(e.breakpoints), E = /* @__PURE__ */ m({
       backgroundPosition: "-200% 0"
     }
   }
-}, T = /* @__PURE__ */ f({
+}, T = /* @__PURE__ */ h({
   disabled: {
     value: {
       opacity: "0.5",
@@ -705,7 +705,7 @@ const H = /* @__PURE__ */ B(e.breakpoints), E = /* @__PURE__ */ m({
   defaultVariants: {
     orientation: "vertical"
   }
-}), V = /* @__PURE__ */ c({
+}), L = /* @__PURE__ */ c({
   className: "nimbus-toggle-button",
   base: {
     ...n.base
@@ -762,7 +762,7 @@ const H = /* @__PURE__ */ B(e.breakpoints), E = /* @__PURE__ */ m({
     variant: "outline",
     tone: "primary"
   }
-}), L = /* @__PURE__ */ v({
+}), F = /* @__PURE__ */ v({
   className: "nimbus-toolbar",
   base: {
     display: "inline-flex",
@@ -815,8 +815,8 @@ const H = /* @__PURE__ */ B(e.breakpoints), E = /* @__PURE__ */ m({
     size: "md",
     variant: "plain"
   }
-}), j = {
-  avatar: z,
+}), V = {
+  avatar: S,
   button: n,
   code: A,
   group: k,
@@ -825,8 +825,8 @@ const H = /* @__PURE__ */ B(e.breakpoints), E = /* @__PURE__ */ m({
   link: C,
   tooltip: I,
   radioInput: u,
-  toggleButton: V,
-  toolbar: L
+  toggleButton: L,
+  toolbar: F
 }, G = /* @__PURE__ */ d.colors({
   bg: {
     DEFAULT: {
@@ -876,10 +876,10 @@ const H = /* @__PURE__ */ B(e.breakpoints), E = /* @__PURE__ */ m({
   ...e.color["system-palettes"],
   ...e.color["brand-palettes"],
   ...e.color["semantic-palettes"]
-}), O = /* @__PURE__ */ d.shadows(e.shadow), F = /* @__PURE__ */ d.radii({}), M = {
+}), O = /* @__PURE__ */ d.shadows(e.shadow), j = /* @__PURE__ */ d.radii({}), M = {
   colors: G,
   shadows: O,
-  radii: F
+  radii: j
 }, Y = /* @__PURE__ */ t({
   className: "nimbus-list",
   slots: ["root", "item", "indicator"],
@@ -3198,7 +3198,156 @@ const H = /* @__PURE__ */ B(e.breakpoints), E = /* @__PURE__ */ m({
       }
     }
   }
-}), re = /* @__PURE__ */ t({
+}), re = `
+"label"
+"fields"
+"toggle"
+"description"
+"error"
+
+`, ie = `
+"label input"
+"description description"
+"error error"
+`, le = /* @__PURE__ */ t({
+  slots: [
+    // Group / Fieldset slots
+    "root",
+    "label",
+    "infoDialog",
+    "fieldsContainer",
+    "description",
+    "error",
+    "toggleButtonContainer",
+    // Individual Locale Field / Input slots
+    "localeFieldRoot",
+    "localeFieldLabel",
+    "localeFieldInput",
+    "localeFieldDescription",
+    "localeFieldError"
+  ],
+  className: "nimbus-localized-field",
+  base: {
+    root: {
+      display: "grid",
+      width: "auto",
+      gridTemplateAreas: re,
+      gap: "100"
+    },
+    label: {
+      gridArea: "label",
+      fontWeight: "500",
+      color: "neutral.11",
+      fontSize: "var(--localized-field-font-size)",
+      lineHeight: "var(--localized-field-line-height)",
+      position: "relative"
+    },
+    infoDialog: {
+      bg: "neutral.1",
+      maxWidth: "xl",
+      borderRadius: "200",
+      boxShadow: "6",
+      border: "solid-25",
+      borderColor: "neutral.8",
+      maxHeight: "40svh",
+      overflow: "auto",
+      scrollbarWidth: "thin",
+      scrollbarColor: "{colors.neutral.8} {colors.neutral.3}",
+      focusRing: "outside"
+    },
+    fieldsContainer: {
+      gridArea: "fields",
+      display: "flex",
+      flexDirection: "column",
+      gap: "200",
+      // Animation for when container expands to show more fields
+      '&[data-expanded="true"]': {
+        "& > *:not(:first-of-type)": {
+          animationName: "slide-from-top",
+          animationDuration: "slow",
+          animationTimingFunction: "ease-in-smooth"
+        }
+      }
+    },
+    description: {
+      gridArea: "description",
+      color: "neutral.11",
+      fontSize: "var(--localized-field-font-size)",
+      lineHeight: "var(--localized-field-line-height)",
+      display: "flex",
+      gap: "100",
+      alignItems: "center"
+    },
+    error: {
+      gridArea: "error",
+      color: "critical.11",
+      fontSize: "var(--localized-field-font-size)",
+      lineHeight: "var(--localized-field-line-height)",
+      display: "flex",
+      gap: "100",
+      alignItems: "center"
+    },
+    toggleButtonContainer: { gridArea: "toggle" },
+    // Individual Locale Field / Input slots
+    localeFieldRoot: {
+      gap: 0,
+      gridTemplateAreas: ie,
+      // 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)": {
+        "& .nimbus-localized-field__localeFieldLabel": {
+          outlineWidth: "var(--focus-ring-width)",
+          outlineColor: "var(--focus-ring-color)",
+          outlineStyle: "var(--focus-ring-style)",
+          outlineOffset: "var(--focus-ring-offset)"
+        }
+      }
+    },
+    localeFieldLabel: {
+      display: "flex",
+      borderLeftRadius: "200",
+      backgroundColor: "neutral.1",
+      boxShadow: "inset 0 0 0 {sizes.25} {colors.neutral.7}",
+      // remove outline on right side so that it looks like there is a continuous outline around the label and input.
+      // This is because `FormField` does not allow wrapping the two in a div, so we cannot use `FocusWithin`.
+      clipPath: "inset(-4px -1px -4px -4px)",
+      marginInlineEnd: "-25",
+      paddingInline: "400",
+      alignItems: "center",
+      "&[data-disabled='true']": {
+        opacity: "0.5"
+      }
+    },
+    localeFieldInput: {
+      borderLeftRadius: 0,
+      // remove outline on left side so that it looks like there is a continuous outline around the label and input.
+      // This is because `FormField` does not allow wrapping the two in a div, so we cannot use `FocusWithin`.
+      clipPath: "inset(-4px -4px -4px -1px)"
+    }
+  },
+  variants: {
+    size: {
+      md: {
+        root: {
+          "--localized-field-font-size": "fontSizes.350",
+          "--localized-field-line-height": "lineHeights.500"
+        }
+      },
+      sm: {
+        root: {
+          "--localized-field-font-size": "fontSizes.300",
+          "--localized-field-line-height": "lineHeights.450"
+        }
+      }
+    },
+    type: {
+      text: {},
+      multiLine: {},
+      money: {},
+      richText: {}
+    }
+  }
+}), ne = /* @__PURE__ */ t({
   className: "nimbus-progress-bar",
   slots: ["root", "track", "fill", "label", "value"],
   // Base styles applied to all instances of the component
@@ -3346,7 +3495,7 @@ const H = /* @__PURE__ */ B(e.breakpoints), E = /* @__PURE__ */ m({
       }
     }
   ]
-}), ie = /* @__PURE__ */ t({
+}), se = /* @__PURE__ */ t({
   slots: [
     "root",
     "trigger",
@@ -3526,7 +3675,7 @@ const H = /* @__PURE__ */ B(e.breakpoints), E = /* @__PURE__ */ m({
       letterSpacing: "{spacing.25}"
     }
   }
-}), le = /* @__PURE__ */ t({
+}), de = /* @__PURE__ */ t({
   slots: ["root", "leadingElement", "input", "trailingElement"],
   // Unique class name prefix for the component
   className: "nimbus-text-input",
@@ -3631,7 +3780,7 @@ const H = /* @__PURE__ */ B(e.breakpoints), E = /* @__PURE__ */ m({
     size: "md",
     variant: "solid"
   }
-}), ne = /* @__PURE__ */ p({
+}), ce = /* @__PURE__ */ p({
   slots: ["root", "buttonGroup", "primaryButton", "dropdownTrigger"],
   // Unique class name prefix for the component
   className: "nimbus-split-button",
@@ -3692,7 +3841,7 @@ const H = /* @__PURE__ */ B(e.breakpoints), E = /* @__PURE__ */ m({
     variant: "solid"
     // Match component default
   }
-}), se = /* @__PURE__ */ t({
+}), pe = /* @__PURE__ */ t({
   slots: ["root", "trigger", "content"],
   className: "collapsibleMotion",
   base: {
@@ -3702,7 +3851,7 @@ const H = /* @__PURE__ */ B(e.breakpoints), E = /* @__PURE__ */ m({
     },
     content: {}
   }
-}), de = {
+}), ue = {
   dialog: P,
   list: Y,
   table: X,
@@ -3720,24 +3869,25 @@ const H = /* @__PURE__ */ B(e.breakpoints), E = /* @__PURE__ */ m({
   dataTable: ae,
   radioInput: u,
   combobox: K,
-  progressBar: re,
-  menu: ie,
-  textInput: le,
-  splitButton: ne,
-  collapsibleMotion: se
-}, ce = /* @__PURE__ */ x(
+  progressBar: ne,
+  menu: se,
+  textInput: de,
+  splitButton: ce,
+  localizedField: le,
+  collapsibleMotion: pe
+}, ge = /* @__PURE__ */ x(
   e.textStyle
-), pe = /* @__PURE__ */ o.durations(e.aspectRatio), ue = /* @__PURE__ */ o.animations(e.animation), ge = /* @__PURE__ */ o.blurs(e.blur), be = /* @__PURE__ */ o.borders(e.border), me = /* @__PURE__ */ o.colors({
+), 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({
   ...e.color["blacks-and-whites"]
-}), he = /* @__PURE__ */ o.durations(e.duration), fe = /* @__PURE__ */ o.easings(e.easing), ve = /* @__PURE__ */ o.fonts(e.fontFamily), xe = /* @__PURE__ */ o.fontSizes(e.fontSize), ye = /* @__PURE__ */ o.fontWeights(e.fontWeight), we = (r) => Object.keys(r).reduce(
+}), 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(
   (l, a) => {
     const g = parseFloat(r[a].value) / 100;
     return l[a] = { value: `${g}em` }, l;
   },
   {}
-), Se = /* @__PURE__ */ o.letterSpacings(
-  /* @__PURE__ */ we(e.letterSpacing)
-), ze = /* @__PURE__ */ o.lineHeights(e.lineHeight), ke = /* @__PURE__ */ o.radii(e.borderRadius), Re = /* @__PURE__ */ o.spacing(e.spacing), Ce = /* @__PURE__ */ o.sizes({
+), 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({
   ...e.size,
   "1/2": {
     value: "50%"
@@ -3853,46 +4003,46 @@ const H = /* @__PURE__ */ B(e.breakpoints), E = /* @__PURE__ */ m({
   vh: {
     value: "100vh"
   }
-}), Ie = /* @__PURE__ */ o.zIndex(e.zIndex), Pe = /* @__PURE__ */ o.cursor(e.cursor), We = {
-  aspectRatios: pe,
-  animations: ue,
-  blurs: ge,
-  borders: be,
-  colors: me,
-  durations: he,
-  easings: fe,
-  fonts: ve,
-  fontSizes: xe,
-  fontWeights: ye,
-  letterSpacings: Se,
-  lineHeights: ze,
-  radii: ke,
-  spacing: Re,
-  sizes: Ce,
-  zIndex: Ie,
-  cursor: Pe
-}, Be = /* @__PURE__ */ S({
+}), 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({
   preflight: !0,
   cssVarsPrefix: "nimbus",
   cssVarsRoot: ":where(:root, :host)",
-  globalCss: _,
-  conditions: E,
+  globalCss: E,
+  conditions: _,
   theme: {
     breakpoints: H,
     keyframes: N,
-    tokens: We,
+    tokens: _e,
     semanticTokens: M,
-    recipes: j,
-    slotRecipes: de,
-    textStyles: ce,
+    recipes: V,
+    slotRecipes: ue,
+    textStyles: ge,
     layerStyles: T,
     animationStyles: W
   }
-}), Ge = /* @__PURE__ */ y(w, Be);
+}), Me = /* @__PURE__ */ y(w, Ee);
 export {
-  le as a,
-  ne as b,
-  L as c,
+  de as a,
+  ce as b,
+  F as c,
   ee as d,
   q as e,
   oe as f,
@@ -3901,12 +4051,13 @@ export {
   u as i,
   i as j,
   P as k,
-  ae as l,
-  ie as m,
+  le as l,
+  se as m,
   J as n,
-  K as o,
+  ae as o,
+  K as p,
   Z as r,
-  Ge as s,
-  V as t
+  Me as s,
+  L as t
 };
-//# sourceMappingURL=index-DRb2wMPi.es.js.map
+//# sourceMappingURL=index-fjbcWgyz.es.js.map