@commercetools/nimbus 2.10.0 → 3.0.0

package/dist/theme/slot-recipes/index.d.ts

@@ -59,7 +59,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    nimbusAlert: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "title" | "icon" | "description" | "actions" | "dismissButton", {
+    nimbusAlert: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "title" | "description" | "icon" | "actions" | "dismissButton", {
         variant: {
             flat: {};
             outlined: {
@@ -74,44 +74,48 @@ export declare const slotRecipes: {
         };
     }>;
     nimbusCalendar: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "grid" | "header" | "grids" | "monthTitle" | "gridHeader" | "headerCell" | "gridBody" | "bodyCell", import('@chakra-ui/react').SlotRecipeVariantRecord<"root" | "grid" | "header" | "grids" | "monthTitle" | "gridHeader" | "headerCell" | "gridBody" | "bodyCell">>;
-    nimbusCard: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "content" | "header", {
-        cardPadding: {
+    nimbusCard: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "body" | "footer" | "header", {
+        size: {
             sm: {
                 root: {
-                    padding: "200";
+                    "--card-spacing": "spacing.300";
                 };
             };
             md: {
                 root: {
-                    padding: "400";
+                    "--card-spacing": "spacing.400";
                 };
             };
             lg: {
                 root: {
-                    padding: "600";
+                    "--card-spacing": "spacing.600";
                 };
             };
         };
-        borderStyle: {
-            none: {};
+        variant: {
+            plain: {
+                root: {
+                    backgroundColor: "bg";
+                };
+            };
             outlined: {
                 root: {
                     border: "solid-25";
-                    borderColor: "colorPalette.3";
+                    borderColor: "colorPalette.6";
+                    backgroundColor: "bg";
                 };
             };
-        };
-        elevation: {
-            none: {};
             elevated: {
                 root: {
                     shadow: "1";
+                    backgroundColor: "bg";
                 };
             };
-        };
-        backgroundStyle: {
-            default: {
+            "outlined-elevated": {
                 root: {
+                    border: "solid-25";
+                    borderColor: "colorPalette.6";
+                    shadow: "1";
                     backgroundColor: "bg";
                 };
             };
@@ -120,6 +124,27 @@ export declare const slotRecipes: {
                     backgroundColor: "colorPalette.2";
                 };
             };
+            "outlined-muted": {
+                root: {
+                    border: "solid-25";
+                    borderColor: "colorPalette.6";
+                    backgroundColor: "colorPalette.2";
+                };
+            };
+            "elevated-muted": {
+                root: {
+                    shadow: "1";
+                    backgroundColor: "colorPalette.2";
+                };
+            };
+            "outlined-elevated-muted": {
+                root: {
+                    border: "solid-25";
+                    borderColor: "colorPalette.6";
+                    shadow: "1";
+                    backgroundColor: "colorPalette.2";
+                };
+            };
         };
     }>;
     nimbusCheckbox: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "label" | "indicator", {
@@ -572,7 +597,7 @@ export declare const slotRecipes: {
         };
     }>;
     nimbusFieldErrors: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "message", import('@chakra-ui/react').SlotRecipeVariantRecord<"root" | "message">>;
-    nimbusFormField: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "input" | "label" | "popover" | "description" | "error", {
+    nimbusFormField: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "input" | "label" | "popover" | "error" | "description", {
         size: {
             md: {
                 root: {
@@ -655,7 +680,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    nimbusLocalizedField: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "label" | "description" | "error" | "infoDialog" | "fieldsContainer" | "toggleButtonContainer" | "localeFieldRoot" | "localeFieldLabel" | "localeFieldInput" | "localeFieldDescription" | "localeFieldError", {
+    nimbusLocalizedField: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "label" | "error" | "description" | "infoDialog" | "fieldsContainer" | "toggleButtonContainer" | "localeFieldRoot" | "localeFieldLabel" | "localeFieldInput" | "localeFieldDescription" | "localeFieldError", {
         size: {
             md: {
                 root: {
@@ -1585,69 +1610,6 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    toast: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "title" | "description" | "indicator" | "closeTrigger" | "actionTrigger", {
-        variant: {
-            solid: {
-                root: {
-                    backgroundColor: "colorPalette.9";
-                };
-                indicator: {
-                    "& svg": {
-                        color: "colorPalette.contrast";
-                    };
-                };
-                title: {
-                    color: "colorPalette.contrast";
-                };
-                description: {
-                    color: "colorPalette.contrast";
-                };
-                actionTrigger: {
-                    borderColor: "colorPalette.contrast";
-                };
-            };
-            subtle: {
-                root: {
-                    backgroundColor: "colorPalette.2";
-                    boxShadow: "inset 0 0 0 1px {colors.colorPalette.5}, {shadows.1}";
-                };
-                indicator: {
-                    "& svg": {
-                        color: "colorPalette.11";
-                    };
-                };
-                title: {
-                    color: "colorPalette.11";
-                };
-                description: {
-                    color: "colorPalette.12";
-                };
-            };
-            "accent-start": {
-                root: {
-                    backgroundColor: "neutral.2";
-                    boxShadow: "inset 3px 0 0 0 {colors.colorPalette.9}, inset 0 0 0 1px {colors.neutral.5}, {shadows.1}";
-                };
-                indicator: {
-                    "& svg": {
-                        color: "colorPalette.11";
-                    };
-                };
-                title: {
-                    color: "neutral.12";
-                };
-                description: {
-                    color: "neutral.11";
-                };
-                actionTrigger: {
-                    colorPalette: "neutral";
-                };
-                closeTrigger: {
-                    colorPalette: "neutral";
-                };
-            };
-        };
-    }>;
     nimbusToggleButtonGroup: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "button", {
         size: {
             xs: {
@@ -1827,4 +1789,121 @@ export declare const slotRecipes: {
             };
         };
     }>;
+    scrollArea: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "content" | "scrollbar" | "viewport" | "thumb" | "corner", {
+        variant: {
+            hover: {
+                scrollbar: {
+                    opacity: "0";
+                    "&[data-hover], &[data-scrolling]": {
+                        opacity: "1";
+                        transitionDuration: "faster";
+                        transitionDelay: "0ms";
+                    };
+                };
+            };
+            always: {
+                viewport: {
+                    flex: "1";
+                    minHeight: "0";
+                    "&[data-overflow-y]": {
+                        width: "calc(100% - var(--scroll-area-scrollbar-size) - var(--scroll-area-scrollbar-margin) * 2)";
+                    };
+                    "&[data-overflow-x]": {
+                        marginBottom: "calc(var(--scroll-area-scrollbar-size) + var(--scroll-area-scrollbar-margin) * 2)";
+                    };
+                };
+                scrollbar: {
+                    opacity: "1";
+                };
+                corner: {
+                    opacity: number;
+                };
+            };
+        };
+        size: {
+            xs: {
+                root: {
+                    "--scroll-area-scrollbar-size": "{sizes.100}";
+                };
+            };
+            sm: {
+                root: {
+                    "--scroll-area-scrollbar-size": "{sizes.150}";
+                };
+            };
+            md: {
+                root: {
+                    "--scroll-area-scrollbar-size": "{sizes.200}";
+                };
+            };
+            lg: {
+                root: {
+                    "--scroll-area-scrollbar-size": "{sizes.300}";
+                };
+            };
+        };
+    }>;
+    toast: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "title" | "description" | "indicator" | "closeTrigger" | "actionTrigger", {
+        variant: {
+            solid: {
+                root: {
+                    backgroundColor: "colorPalette.9";
+                };
+                indicator: {
+                    "& svg": {
+                        color: "colorPalette.contrast";
+                    };
+                };
+                title: {
+                    color: "colorPalette.contrast";
+                };
+                description: {
+                    color: "colorPalette.contrast";
+                };
+                actionTrigger: {
+                    borderColor: "colorPalette.contrast";
+                };
+            };
+            subtle: {
+                root: {
+                    backgroundColor: "colorPalette.2";
+                    boxShadow: "inset 0 0 0 1px {colors.colorPalette.5}, {shadows.1}";
+                };
+                indicator: {
+                    "& svg": {
+                        color: "colorPalette.11";
+                    };
+                };
+                title: {
+                    color: "colorPalette.11";
+                };
+                description: {
+                    color: "colorPalette.12";
+                };
+            };
+            "accent-start": {
+                root: {
+                    backgroundColor: "neutral.2";
+                    boxShadow: "inset 3px 0 0 0 {colors.colorPalette.9}, inset 0 0 0 1px {colors.neutral.5}, {shadows.1}";
+                };
+                indicator: {
+                    "& svg": {
+                        color: "colorPalette.11";
+                    };
+                };
+                title: {
+                    color: "neutral.12";
+                };
+                description: {
+                    color: "neutral.11";
+                };
+                actionTrigger: {
+                    colorPalette: "neutral";
+                };
+                closeTrigger: {
+                    colorPalette: "neutral";
+                };
+            };
+        };
+    }>;
 };

package/dist/utils/extract-padding-props.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Extracts padding style-props from an object, separating them from other props.
+ * Responsive values (arrays and objects like `{ base: "200", md: "400" }`)
+ * are supported — they are extracted by key name unchanged.
+ * @param props The props object to separate
+ * @returns A tuple containing [paddingProps, otherProps]
+ */
+export declare function extractPaddingProps<T extends object>(props: T): [Record<string, unknown>, Omit<T, string>];

package/dist/utils/index.d.ts

@@ -1,5 +1,6 @@
 export { DisplayColorPalettes } from './display-color-palettes';
 export { extractAriaAttributes } from './extract-aria-attributes';
+export { extractPaddingProps } from './extract-padding-props';
 export { extractStyleProps } from './extract-style-props';
 export { mergeRefs } from './merge-refs';
 export { noop } from './no-op';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools/nimbus",
-  "version": "2.10.0",
+  "version": "3.0.0",
   "main": "./dist/index.cjs",
   "module": "./dist/index.es.js",
   "type": "module",
@@ -49,31 +49,32 @@
     }
   },
   "dependencies": {
-    "@chakra-ui/cli": "^3.34.0",
+    "@chakra-ui/cli": "^3.35.0",
     "@emotion/is-prop-valid": "^1.4.0",
     "@github-ui/storybook-addon-performance-panel": "^1.1.4",
     "@internationalized/string": "^3.2.8",
     "@react-aria/interactions": "3.28.0",
+    "@react-aria/utils": "3.34.0",
     "dequal": "^2.0.3",
     "escape-html": "^1.0.3",
     "is-hotkey": "^0.2.0",
     "next-themes": "^0.4.6",
     "react-aria": "3.48.0",
     "react-aria-components": "1.17.0",
-    "react-hotkeys-hook": "^5.2.1",
+    "react-hotkeys-hook": "^5.3.2",
     "react-stately": "3.46.0",
     "react-use": "^17.5.1",
     "use-debounce": "^10.1.0"
   },
   "devDependencies": {
-    "@chakra-ui/react": "^3.34.0",
+    "@chakra-ui/react": "^3.35.0",
     "@internationalized/date": "^3.12.1",
     "@react-aria/optimize-locales-plugin": "1.2.0",
     "@react-types/shared": "^3.34.0",
-    "@storybook/addon-a11y": "^10.3.5",
-    "@storybook/addon-docs": "^10.3.5",
-    "@storybook/addon-vitest": "^10.3.5",
-    "@storybook/react-vite": "^10.3.5",
+    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-vitest": "^10.3.6",
+    "@storybook/react-vite": "^10.3.6",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
@@ -81,43 +82,43 @@
     "@types/is-hotkey": "^0.1.10",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.4",
-    "@vitest/browser": "^4.1.4",
-    "@vitest/browser-playwright": "^4.1.4",
-    "@vitest/coverage-v8": "^4.1.4",
-    "@vueless/storybook-dark-mode": "^10.0.7",
+    "@vitejs/plugin-react": "^5.2.0",
+    "@vitest/browser": "^4.1.5",
+    "@vitest/browser-playwright": "^4.1.5",
+    "@vitest/coverage-v8": "^4.1.5",
+    "@vueless/storybook-dark-mode": "^10.0.8",
     "apca-w3": "^0.1.9",
     "axe-core": "^4.11.0",
-    "dompurify": "^3.4.0",
+    "dompurify": "^3.4.2",
     "glob": "^13.0.6",
     "jsdom": "29.0.1",
     "playwright": "^1.59.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "rollup": "^4.60.1",
+    "rollup": "^4.60.3",
     "rollup-plugin-tree-shakeable": "^2.0.0",
     "slate": "^0.123.0",
     "slate-history": "^0.115.0",
     "slate-hyperscript": "^0.115.0",
     "slate-react": "^0.123.0",
-    "storybook": "^10.3.5",
+    "storybook": "^10.3.6",
     "vite": "^7.3.2",
     "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^6.1.1",
-    "vitest": "^4.1.4",
-    "@commercetools/nimbus-design-token-ts-plugin": "^2.10.0",
-    "@commercetools/nimbus-icons": "^2.10.0",
-    "@commercetools/nimbus-tokens": "^2.10.0"
+    "vitest": "^4.1.5",
+    "@commercetools/nimbus-design-token-ts-plugin": "^3.0.0",
+    "@commercetools/nimbus-icons": "^3.0.0",
+    "@commercetools/nimbus-tokens": "^3.0.0"
   },
   "peerDependencies": {
-    "@chakra-ui/react": "^3.34.0",
+    "@chakra-ui/react": "^3.35.0",
     "react": "19.x",
     "slate": "^0.123.0",
     "slate-history": "^0.115.0",
     "slate-hyperscript": "^0.115.0",
     "slate-react": "^0.123.0",
-    "@commercetools/nimbus-icons": "^2.10.0",
-    "@commercetools/nimbus-tokens": "^2.10.0"
+    "@commercetools/nimbus-icons": "^3.0.0",
+    "@commercetools/nimbus-tokens": "^3.0.0"
   },
   "scripts": {
     "build": "pnpm run build-theme-typings && pnpm run build:lib",

package/dist/chunks/avatar-BZVVE8-z.cjs.js

@@ -1,2 +0,0 @@
-"use strict";const g=require("react/jsx-runtime"),u=require("react"),$=require("@chakra-ui/react/styled-system"),e=require("./normalize-messages-Dogs8lYA.cjs.js"),A=require("./image-CGOYoc2s.cjs.js"),{withContext:z}=$.createRecipeContext({key:"nimbusAvatar"}),I=z("figure"),S={avatarLabel:a=>`Avatar image for ${a.fullName}`},h={avatarLabel:a=>`Avatarbild für ${a.fullName}`},q={avatarLabel:a=>`Imagen de avatar para ${a.fullName}`},x={avatarLabel:a=>`Image d'avatar pour ${a.fullName}`},y={avatarLabel:a=>`Avatar para ${a.fullName}`},R={en:e.normalizeMessages(S),de:e.normalizeMessages(h),es:e.normalizeMessages(q),"fr-FR":e.normalizeMessages(x),"pt-BR":e.normalizeMessages(y)};function _(a,s){return a.split("")[0].toUpperCase()+s.split("")[0].toUpperCase()}const v=a=>{const s=e.useLocalizedStringFormatter(R),{ref:f,firstName:r,lastName:o,src:t,alt:d,...p}=a,[n,l]=u.useState(!1),[i,c]=u.useState(!1),m=`${r} ${o}`,b={"aria-label":s.format("avatarLabel",{fullName:m}),ref:f,...p},L=()=>{l(!0),c(!1)},M=()=>{l(!1),c(!0)},N=!t||!n||i;return g.jsxs(I,{...b,children:[N?_(r,o):null,t&&g.jsx(A.Image,{src:t,alt:d||m,onLoad:L,onError:M,display:n&&!i?"block":"none"})]})};v.displayName="Avatar";exports.Avatar=v;
-//# sourceMappingURL=avatar-BZVVE8-z.cjs.js.map

package/dist/chunks/avatar-BZVVE8-z.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"avatar-BZVVE8-z.cjs.js","sources":["../../src/components/avatar/avatar.slots.tsx","../../src/components/avatar/intl/en.ts","../../src/components/avatar/intl/de.ts","../../src/components/avatar/intl/es.ts","../../src/components/avatar/intl/fr-FR.ts","../../src/components/avatar/intl/pt-BR.ts","../../src/components/avatar/avatar.messages.ts","../../src/components/avatar/avatar.tsx"],"sourcesContent":["import { createRecipeContext } from \"@chakra-ui/react/styled-system\";\nimport type { AvatarRootSlotProps } from \"./avatar.types\";\n\nconst { withContext } = createRecipeContext({ key: \"nimbusAvatar\" });\n\nexport const AvatarRoot = withContext<HTMLElement, AvatarRootSlotProps>(\n  \"figure\"\n);\n","/**\n * Pre-compiled en messages for Avatar\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  avatarLabel: (args: Record<string, string | number>) =>\n    `Avatar image for ${args.fullName}`,\n};\n","/**\n * Pre-compiled de messages for Avatar\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  avatarLabel: (args: Record<string, string | number>) =>\n    `Avatarbild für ${args.fullName}`,\n};\n","/**\n * Pre-compiled es messages for Avatar\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  avatarLabel: (args: Record<string, string | number>) =>\n    `Imagen de avatar para ${args.fullName}`,\n};\n","/**\n * Pre-compiled fr-FR messages for Avatar\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  avatarLabel: (args: Record<string, string | number>) =>\n    `Image d'avatar pour ${args.fullName}`,\n};\n","/**\n * Pre-compiled pt-BR messages for Avatar\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  avatarLabel: (args: Record<string, string | number>) =>\n    `Avatar para ${args.fullName}`,\n};\n","/**\n * Pre-compiled localized messages for Avatar component\n *\n * Generated by scripts/generate-dictionaries.ts\n * DO NOT EDIT MANUALLY\n *\n * @see https://react-spectrum.adobe.com/react-aria/internationalization.html\n */\n\nimport {\n  type LocalizedString,\n  type LocalizedStrings,\n} from \"@internationalized/string\";\nimport { normalizeMessages } from \"../../utils/normalize-messages\";\n\n// Pre-compiled message functions\nimport avatarMessages_en from \"./intl/en\";\nimport avatarMessages_de from \"./intl/de\";\nimport avatarMessages_es from \"./intl/es\";\nimport avatarMessages_fr from \"./intl/fr-FR\";\nimport avatarMessages_pt from \"./intl/pt-BR\";\n\n// Raw LocalizedStrings object for use with useLocalizedStringFormatter hook\nexport const avatarMessagesStrings: LocalizedStrings<string, LocalizedString> =\n  {\n    en: normalizeMessages(avatarMessages_en),\n    de: normalizeMessages(avatarMessages_de),\n    es: normalizeMessages(avatarMessages_es),\n    \"fr-FR\": normalizeMessages(avatarMessages_fr),\n    \"pt-BR\": normalizeMessages(avatarMessages_pt),\n  } as LocalizedStrings<string, LocalizedString>;\n\n/**\n * Available message keys for Avatar component\n */\nexport type AvatarMessageKey = \"avatarLabel\";\n","import { useState } from \"react\";\nimport { Image } from \"@/components\";\nimport { useLocalizedStringFormatter } from \"@/hooks\";\nimport { type AvatarProps } from \"./avatar.types\";\nimport { AvatarRoot } from \"./avatar.slots\";\nimport { avatarMessagesStrings } from \"./avatar.messages\";\n\nfunction getInitials(firstName: string, lastName: string) {\n  return (\n    firstName.split(\"\")[0].toUpperCase() + lastName.split(\"\")[0].toUpperCase()\n  );\n}\n\n/**\n * Avatar\n * ============================================================\n * A small image or icon that identifies and personalizes the user within the interface.\n * Displays user images or automatically generates initials from first and last names.\n * Falls back to initials if image fails to load.\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/media/avatar}\n *\n * @supportsStyleProps\n *\n * @example\n * ```tsx\n * <Avatar firstName=\"John\" lastName=\"Doe\" src=\"https://example.com/avatar.jpg\" />\n * ```\n *\n * @example\n * ```tsx\n * // With initials fallback\n * <Avatar firstName=\"Jane\" lastName=\"Smith\" />\n * ```\n */\nexport const Avatar = (props: AvatarProps) => {\n  const msg = useLocalizedStringFormatter(avatarMessagesStrings);\n  const { ref, firstName, lastName, src, alt, ...rest } = props;\n  const [imageLoaded, setImageLoaded] = useState(false);\n  const [imageError, setImageError] = useState(false);\n\n  const fullName = `${firstName} ${lastName}`;\n\n  const avatarLabel = msg.format(\"avatarLabel\", {\n    fullName,\n  });\n\n  const sharedProps = {\n    \"aria-label\": avatarLabel,\n    ref,\n    ...rest,\n  };\n\n  const onLoad = () => {\n    setImageLoaded(true);\n    setImageError(false);\n  };\n\n  const onError = () => {\n    setImageLoaded(false);\n    setImageError(true);\n  };\n\n  // Show initials if no src provided, image hasn't loaded yet, or image failed\n  const shouldShowInitials = !src || !imageLoaded || imageError;\n\n  return (\n    <AvatarRoot {...sharedProps}>\n      {shouldShowInitials ? getInitials(firstName, lastName) : null}\n\n      {src && (\n        <Image\n          src={src}\n          alt={alt || fullName}\n          onLoad={onLoad}\n          onError={onError}\n          display={imageLoaded && !imageError ? \"block\" : \"none\"}\n        />\n      )}\n    </AvatarRoot>\n  );\n};\n\nAvatar.displayName = \"Avatar\";\n"],"names":["withContext","createRecipeContext","AvatarRoot","avatarMessages_en","args","avatarMessages_de","avatarMessages_es","avatarMessages_fr","avatarMessages_pt","avatarMessagesStrings","normalizeMessages","getInitials","firstName","lastName","Avatar","props","msg","useLocalizedStringFormatter","ref","src","alt","rest","imageLoaded","setImageLoaded","useState","imageError","setImageError","fullName","sharedProps","onLoad","onError","shouldShowInitials","jsxs","jsx","Image"],"mappings":"wMAGM,CAAE,YAAAA,CAAA,EAAgBC,EAAAA,oBAAoB,CAAE,IAAK,eAAgB,EAEtDC,EAAaF,EACxB,QACF,ECDAG,EAAe,CACb,YAAcC,GACZ,oBAAoBA,EAAK,QAAQ,EACrC,ECHAC,EAAe,CACb,YAAcD,GACZ,kBAAkBA,EAAK,QAAQ,EACnC,ECHAE,EAAe,CACb,YAAcF,GACZ,yBAAyBA,EAAK,QAAQ,EAC1C,ECHAG,EAAe,CACb,YAAcH,GACZ,uBAAuBA,EAAK,QAAQ,EACxC,ECHAI,EAAe,CACb,YAAcJ,GACZ,eAAeA,EAAK,QAAQ,EAChC,ECcaK,EACX,CACE,GAAIC,EAAAA,kBAAkBP,CAAiB,EACvC,GAAIO,EAAAA,kBAAkBL,CAAiB,EACvC,GAAIK,EAAAA,kBAAkBJ,CAAiB,EACvC,QAASI,EAAAA,kBAAkBH,CAAiB,EAC5C,QAASG,EAAAA,kBAAkBF,CAAiB,CAC9C,ECvBF,SAASG,EAAYC,EAAmBC,EAAkB,CACxD,OACED,EAAU,MAAM,EAAE,EAAE,CAAC,EAAE,cAAgBC,EAAS,MAAM,EAAE,EAAE,CAAC,EAAE,YAAA,CAEjE,CAwBO,MAAMC,EAAUC,GAAuB,CAC5C,MAAMC,EAAMC,EAAAA,4BAA4BR,CAAqB,EACvD,CAAE,IAAAS,EAAK,UAAAN,EAAW,SAAAC,EAAU,IAAAM,EAAK,IAAAC,EAAK,GAAGC,GAASN,EAClD,CAACO,EAAaC,CAAc,EAAIC,EAAAA,SAAS,EAAK,EAC9C,CAACC,EAAYC,CAAa,EAAIF,EAAAA,SAAS,EAAK,EAE5CG,EAAW,GAAGf,CAAS,IAAIC,CAAQ,GAMnCe,EAAc,CAClB,aALkBZ,EAAI,OAAO,cAAe,CAC5C,SAAAW,CAAA,CACD,EAIC,IAAAT,EACA,GAAGG,CAAA,EAGCQ,EAAS,IAAM,CACnBN,EAAe,EAAI,EACnBG,EAAc,EAAK,CACrB,EAEMI,EAAU,IAAM,CACpBP,EAAe,EAAK,EACpBG,EAAc,EAAI,CACpB,EAGMK,EAAqB,CAACZ,GAAO,CAACG,GAAeG,EAEnD,OACEO,EAAAA,KAAC9B,EAAA,CAAY,GAAG0B,EACb,SAAA,CAAAG,EAAqBpB,EAAYC,EAAWC,CAAQ,EAAI,KAExDM,GACCc,EAAAA,IAACC,EAAAA,MAAA,CACC,IAAAf,EACA,IAAKC,GAAOO,EACZ,OAAAE,EACA,QAAAC,EACA,QAASR,GAAe,CAACG,EAAa,QAAU,MAAA,CAAA,CAClD,EAEJ,CAEJ,EAEAX,EAAO,YAAc"}

package/dist/chunks/avatar-g0-w5BFv.es.js

@@ -1,58 +0,0 @@
-import { jsxs as L, jsx as I } from "react/jsx-runtime";
-import { useState as f } from "react";
-import { createRecipeContext as N } from "@chakra-ui/react/styled-system";
-import { n as e, u as A } from "./normalize-messages-CeN1NEyM.es.js";
-import { I as h } from "./image-DRigLU80.es.js";
-const { withContext: M } = /* @__PURE__ */ N({ key: "nimbusAvatar" }), $ = /* @__PURE__ */ M(
-  "figure"
-), x = {
-  avatarLabel: (a) => `Avatar image for ${a.fullName}`
-}, S = {
-  avatarLabel: (a) => `Avatarbild für ${a.fullName}`
-}, _ = {
-  avatarLabel: (a) => `Imagen de avatar para ${a.fullName}`
-}, C = {
-  avatarLabel: (a) => `Image d'avatar pour ${a.fullName}`
-}, R = {
-  avatarLabel: (a) => `Avatar para ${a.fullName}`
-}, w = {
-  en: /* @__PURE__ */ e(x),
-  de: /* @__PURE__ */ e(S),
-  es: /* @__PURE__ */ e(_),
-  "fr-FR": /* @__PURE__ */ e(C),
-  "pt-BR": /* @__PURE__ */ e(R)
-};
-function y(a, t) {
-  return a.split("")[0].toUpperCase() + t.split("")[0].toUpperCase();
-}
-const E = (a) => {
-  const t = A(w), { ref: v, firstName: r, lastName: o, src: s, alt: p, ...g } = a, [l, n] = f(!1), [m, i] = f(!1), c = `${r} ${o}`, u = {
-    "aria-label": t.format("avatarLabel", {
-      fullName: c
-    }),
-    ref: v,
-    ...g
-  }, d = () => {
-    n(!0), i(!1);
-  }, b = () => {
-    n(!1), i(!0);
-  };
-  return /* @__PURE__ */ L($, { ...u, children: [
-    !s || !l || m ? y(r, o) : null,
-    s && /* @__PURE__ */ I(
-      h,
-      {
-        src: s,
-        alt: p || c,
-        onLoad: d,
-        onError: b,
-        display: l && !m ? "block" : "none"
-      }
-    )
-  ] });
-};
-E.displayName = "Avatar";
-export {
-  E as A
-};
-//# sourceMappingURL=avatar-g0-w5BFv.es.js.map

package/dist/chunks/avatar-g0-w5BFv.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"avatar-g0-w5BFv.es.js","sources":["../../src/components/avatar/avatar.slots.tsx","../../src/components/avatar/intl/en.ts","../../src/components/avatar/intl/de.ts","../../src/components/avatar/intl/es.ts","../../src/components/avatar/intl/fr-FR.ts","../../src/components/avatar/intl/pt-BR.ts","../../src/components/avatar/avatar.messages.ts","../../src/components/avatar/avatar.tsx"],"sourcesContent":["import { createRecipeContext } from \"@chakra-ui/react/styled-system\";\nimport type { AvatarRootSlotProps } from \"./avatar.types\";\n\nconst { withContext } = createRecipeContext({ key: \"nimbusAvatar\" });\n\nexport const AvatarRoot = withContext<HTMLElement, AvatarRootSlotProps>(\n  \"figure\"\n);\n","/**\n * Pre-compiled en messages for Avatar\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  avatarLabel: (args: Record<string, string | number>) =>\n    `Avatar image for ${args.fullName}`,\n};\n","/**\n * Pre-compiled de messages for Avatar\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  avatarLabel: (args: Record<string, string | number>) =>\n    `Avatarbild für ${args.fullName}`,\n};\n","/**\n * Pre-compiled es messages for Avatar\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  avatarLabel: (args: Record<string, string | number>) =>\n    `Imagen de avatar para ${args.fullName}`,\n};\n","/**\n * Pre-compiled fr-FR messages for Avatar\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  avatarLabel: (args: Record<string, string | number>) =>\n    `Image d'avatar pour ${args.fullName}`,\n};\n","/**\n * Pre-compiled pt-BR messages for Avatar\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  avatarLabel: (args: Record<string, string | number>) =>\n    `Avatar para ${args.fullName}`,\n};\n","/**\n * Pre-compiled localized messages for Avatar component\n *\n * Generated by scripts/generate-dictionaries.ts\n * DO NOT EDIT MANUALLY\n *\n * @see https://react-spectrum.adobe.com/react-aria/internationalization.html\n */\n\nimport {\n  type LocalizedString,\n  type LocalizedStrings,\n} from \"@internationalized/string\";\nimport { normalizeMessages } from \"../../utils/normalize-messages\";\n\n// Pre-compiled message functions\nimport avatarMessages_en from \"./intl/en\";\nimport avatarMessages_de from \"./intl/de\";\nimport avatarMessages_es from \"./intl/es\";\nimport avatarMessages_fr from \"./intl/fr-FR\";\nimport avatarMessages_pt from \"./intl/pt-BR\";\n\n// Raw LocalizedStrings object for use with useLocalizedStringFormatter hook\nexport const avatarMessagesStrings: LocalizedStrings<string, LocalizedString> =\n  {\n    en: normalizeMessages(avatarMessages_en),\n    de: normalizeMessages(avatarMessages_de),\n    es: normalizeMessages(avatarMessages_es),\n    \"fr-FR\": normalizeMessages(avatarMessages_fr),\n    \"pt-BR\": normalizeMessages(avatarMessages_pt),\n  } as LocalizedStrings<string, LocalizedString>;\n\n/**\n * Available message keys for Avatar component\n */\nexport type AvatarMessageKey = \"avatarLabel\";\n","import { useState } from \"react\";\nimport { Image } from \"@/components\";\nimport { useLocalizedStringFormatter } from \"@/hooks\";\nimport { type AvatarProps } from \"./avatar.types\";\nimport { AvatarRoot } from \"./avatar.slots\";\nimport { avatarMessagesStrings } from \"./avatar.messages\";\n\nfunction getInitials(firstName: string, lastName: string) {\n  return (\n    firstName.split(\"\")[0].toUpperCase() + lastName.split(\"\")[0].toUpperCase()\n  );\n}\n\n/**\n * Avatar\n * ============================================================\n * A small image or icon that identifies and personalizes the user within the interface.\n * Displays user images or automatically generates initials from first and last names.\n * Falls back to initials if image fails to load.\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/media/avatar}\n *\n * @supportsStyleProps\n *\n * @example\n * ```tsx\n * <Avatar firstName=\"John\" lastName=\"Doe\" src=\"https://example.com/avatar.jpg\" />\n * ```\n *\n * @example\n * ```tsx\n * // With initials fallback\n * <Avatar firstName=\"Jane\" lastName=\"Smith\" />\n * ```\n */\nexport const Avatar = (props: AvatarProps) => {\n  const msg = useLocalizedStringFormatter(avatarMessagesStrings);\n  const { ref, firstName, lastName, src, alt, ...rest } = props;\n  const [imageLoaded, setImageLoaded] = useState(false);\n  const [imageError, setImageError] = useState(false);\n\n  const fullName = `${firstName} ${lastName}`;\n\n  const avatarLabel = msg.format(\"avatarLabel\", {\n    fullName,\n  });\n\n  const sharedProps = {\n    \"aria-label\": avatarLabel,\n    ref,\n    ...rest,\n  };\n\n  const onLoad = () => {\n    setImageLoaded(true);\n    setImageError(false);\n  };\n\n  const onError = () => {\n    setImageLoaded(false);\n    setImageError(true);\n  };\n\n  // Show initials if no src provided, image hasn't loaded yet, or image failed\n  const shouldShowInitials = !src || !imageLoaded || imageError;\n\n  return (\n    <AvatarRoot {...sharedProps}>\n      {shouldShowInitials ? getInitials(firstName, lastName) : null}\n\n      {src && (\n        <Image\n          src={src}\n          alt={alt || fullName}\n          onLoad={onLoad}\n          onError={onError}\n          display={imageLoaded && !imageError ? \"block\" : \"none\"}\n        />\n      )}\n    </AvatarRoot>\n  );\n};\n\nAvatar.displayName = \"Avatar\";\n"],"names":["withContext","createRecipeContext","AvatarRoot","avatarMessages_en","args","avatarMessages_de","avatarMessages_es","avatarMessages_fr","avatarMessages_pt","avatarMessagesStrings","normalizeMessages","getInitials","firstName","lastName","Avatar","props","msg","useLocalizedStringFormatter","ref","src","alt","rest","imageLoaded","setImageLoaded","useState","imageError","setImageError","fullName","sharedProps","onLoad","onError","jsxs","jsx","Image"],"mappings":";;;;;AAGA,MAAM,EAAE,aAAAA,EAAA,IAAgB,gBAAAC,EAAoB,EAAE,KAAK,gBAAgB,GAEtDC,IAAa,gBAAAF;AAAA,EACxB;AACF,GCDAG,IAAe;AAAA,EACb,aAAa,CAACC,MACZ,oBAAoBA,EAAK,QAAQ;AACrC,GCHAC,IAAe;AAAA,EACb,aAAa,CAACD,MACZ,kBAAkBA,EAAK,QAAQ;AACnC,GCHAE,IAAe;AAAA,EACb,aAAa,CAACF,MACZ,yBAAyBA,EAAK,QAAQ;AAC1C,GCHAG,IAAe;AAAA,EACb,aAAa,CAACH,MACZ,uBAAuBA,EAAK,QAAQ;AACxC,GCHAI,IAAe;AAAA,EACb,aAAa,CAACJ,MACZ,eAAeA,EAAK,QAAQ;AAChC,GCcaK,IACX;AAAA,EACE,IAAI,gBAAAC,EAAkBP,CAAiB;AAAA,EACvC,IAAI,gBAAAO,EAAkBL,CAAiB;AAAA,EACvC,IAAI,gBAAAK,EAAkBJ,CAAiB;AAAA,EACvC,SAAS,gBAAAI,EAAkBH,CAAiB;AAAA,EAC5C,SAAS,gBAAAG,EAAkBF,CAAiB;AAC9C;ACvBF,SAASG,EAAYC,GAAmBC,GAAkB;AACxD,SACED,EAAU,MAAM,EAAE,EAAE,CAAC,EAAE,gBAAgBC,EAAS,MAAM,EAAE,EAAE,CAAC,EAAE,YAAA;AAEjE;AAwBO,MAAMC,IAAS,CAACC,MAAuB;AAC5C,QAAMC,IAAMC,EAA4BR,CAAqB,GACvD,EAAE,KAAAS,GAAK,WAAAN,GAAW,UAAAC,GAAU,KAAAM,GAAK,KAAAC,GAAK,GAAGC,MAASN,GAClD,CAACO,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9C,CAACC,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAE5CG,IAAW,GAAGf,CAAS,IAAIC,CAAQ,IAMnCe,IAAc;AAAA,IAClB,cALkBZ,EAAI,OAAO,eAAe;AAAA,MAC5C,UAAAW;AAAA,IAAA,CACD;AAAA,IAIC,KAAAT;AAAA,IACA,GAAGG;AAAA,EAAA,GAGCQ,IAAS,MAAM;AACnB,IAAAN,EAAe,EAAI,GACnBG,EAAc,EAAK;AAAA,EACrB,GAEMI,IAAU,MAAM;AACpB,IAAAP,EAAe,EAAK,GACpBG,EAAc,EAAI;AAAA,EACpB;AAKA,SACE,gBAAAK,EAAC7B,GAAA,EAAY,GAAG0B,GACb,UAAA;AAAA,IAJsB,CAACT,KAAO,CAACG,KAAeG,IAIzBd,EAAYC,GAAWC,CAAQ,IAAI;AAAA,IAExDM,KACC,gBAAAa;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAd;AAAA,QACA,KAAKC,KAAOO;AAAA,QACZ,QAAAE;AAAA,QACA,SAAAC;AAAA,QACA,SAASR,KAAe,CAACG,IAAa,UAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAClD,GAEJ;AAEJ;AAEAX,EAAO,cAAc;"}

package/dist/chunks/card-B6WOaP1W.es.js

@@ -1,114 +0,0 @@
-import { jsx as a, jsxs as p } from "react/jsx-runtime";
-import { useState as C, useMemo as N, createContext as b, useContext as u, useEffect as m } from "react";
-import { createSlotRecipeContext as k, useSlotRecipe as E } from "@chakra-ui/react/styled-system";
-import { S as $ } from "./stack-CoNreM7B.es.js";
-import { e as c } from "./extract-style-props-D_NsrT_t.es.js";
-const { withProvider: j, withContext: f } = /* @__PURE__ */ k({
-  key: "nimbusCard"
-}), w = /* @__PURE__ */ j("div", "root"), V = /* @__PURE__ */ f("div", "header"), g = /* @__PURE__ */ f("div", "content"), d = /* @__PURE__ */ b(
-  void 0
-), x = ({ ref: e, children: r, ...t }) => {
-  const o = E({ key: "nimbusCard" }), [n, s] = o.splitVariantProps(t), [v, H] = c(s), [R, i] = C(null), [S, l] = C(null), h = N(
-    () => ({
-      setHeader: i,
-      setContent: l
-    }),
-    [i, l]
-  );
-  return /* @__PURE__ */ a(d.Provider, { value: h, children: /* @__PURE__ */ p(
-    w,
-    {
-      ref: e,
-      ...n,
-      ...v,
-      ...H,
-      children: [
-        /* @__PURE__ */ p($, { direction: "column", gap: "200", children: [
-          R,
-          S
-        ] }),
-        r
-      ]
-    }
-  ) });
-};
-x.displayName = "Card.Root";
-const P = ({ children: e, ...r }) => {
-  const t = u(d), [o, n] = c(r);
-  return m(() => {
-    if (t) {
-      const s = /* @__PURE__ */ a(V, { ...o, ...n, children: e });
-      return t.setHeader(s), () => t.setHeader(null);
-    }
-  }, [e, o, n, t]), null;
-};
-P.displayName = "Card.Header";
-const y = ({ children: e, ...r }) => {
-  const t = u(d), [o, n] = c(r);
-  return m(() => {
-    if (t) {
-      const s = /* @__PURE__ */ a(g, { ...o, ...n, children: e });
-      return t.setContent(s), () => t.setContent(null);
-    }
-  }, [e, o, n, t]), null;
-};
-y.displayName = "Card.Content";
-const D = {
-  /**
-   * # Card.Root
-   *
-   * The root component that provides context and styling for the card.
-   * Must wrap all card parts (Header, Content) to coordinate their behavior.
-   * Accepts styling variants for padding, border, elevation, and background.
-   *
-   * @example
-   * ```tsx
-   * <Card.Root cardPadding="md" borderStyle="outlined" elevation="elevated">
-   *   <Card.Header>Title</Card.Header>
-   *   <Card.Content>Content</Card.Content>
-   * </Card.Root>
-   * ```
-   */
-  Root: x,
-  /**
-   * # Card.Header
-   *
-   * The header section of the card, typically containing the card title
-   * or primary heading. Automatically positioned above the card content
-   * in a consistent layout.
-   *
-   * @example
-   * ```tsx
-   * <Card.Root>
-   *   <Card.Header>Card Title</Card.Header>
-   *   <Card.Content>Content here</Card.Content>
-   * </Card.Root>
-   * ```
-   */
-  Header: P,
-  /**
-   * # Card.Content
-   *
-   * The main content area of the card. Contains the primary information,
-   * body text, or interactive elements. Automatically positioned below
-   * the card header in a consistent layout.
-   *
-   * @example
-   * ```tsx
-   * <Card.Root>
-   *   <Card.Header>Title</Card.Header>
-   *   <Card.Content>
-   *     <Text>This is the main card content.</Text>
-   *   </Card.Content>
-   * </Card.Root>
-   * ```
-   */
-  Content: y
-};
-export {
-  D as C,
-  y as a,
-  P as b,
-  x as c
-};
-//# sourceMappingURL=card-B6WOaP1W.es.js.map