@ngrr/ds 0.1.29 → 0.1.32

package/README.md

@@ -1 +1,50 @@
-# DSN
+# DS-Nagarro
+
+AI-first React component library.
+
+---
+
+## For AI agents
+
+Read `node_modules/@ngrr/ds/AI.md` before writing any code.
+That file contains all the rules for using this design system correctly — layout, tokens, patterns, and component usage guidelines.
+
+Add this to your project's `.cursorrules` to load it automatically:
+
+```
+Read node_modules/@ngrr/ds/AI.md before writing any code.
+```
+
+---
+
+## Setup
+
+```bash
+npm install @ngrr/ds --legacy-peer-deps
+```
+
+```tsx
+// main.tsx — before everything else
+import '@ngrr/ds/style.css'
+import '@ngrr/ds/tokens.css'
+```
+
+```css
+/* index.css */
+html, body { margin: 0; height: 100%; }
+#root { height: 100%; display: flex; flex-direction: column; box-sizing: border-box; }
+```
+
+---
+
+## Resources
+
+- **Storybook:** https://699f3dfd3540c3f346868d55-kmskdmltrn.chromatic.com/
+- **Usage rules:** `node_modules/@ngrr/ds/AI.md`
+- **Contributing:** `AGENTS.md` in the source repository
+
+---
+
+## Stack
+
+React 18+ · TypeScript · Styled Components v6 · Vite

package/dist/components/atoms/Avatar/Avatar.d.ts

@@ -1,10 +1,10 @@
 import { default as React } from 'react';
 import { LucideIcon } from 'lucide-react';
-export type AvatarSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type AvatarSize = 'xxs' | 'xs' | 'sm' | 'lg' | 'xl' | 'xxl';
 export type AvatarVariant = 'profile' | 'organization';
 export type AvatarFill = 'picture' | 'initials' | 'icon';
 export interface AvatarProps {
-    /** Visual size of the avatar. Default: `'md'` (40×40px). */
+    /** Visual size of the avatar. Default: `'sm'` (32×32px). */
     size?: AvatarSize;
     /** Shape: circle for a person, rounded square for an org. Default: `'profile'`. */
     variant?: AvatarVariant;

package/dist/components/atoms/Badge/Badge.d.ts

@@ -1,11 +1,11 @@
-export type BadgeSize = 'sm' | 'lg' | 'dot';
+export type BadgeSize = 'sm' | 'dot';
 export type BadgeVariant = 'highlight-soft' | 'highlight-strong' | 'informative' | 'inverted' | 'critical';
 export interface BadgeProps {
     /**
      * Visual size of the badge.
-     * - `sm`  — 16 × 16 px minimum; shows count text.
-     * - `lg`  — 24 × 24 px minimum; shows count text.
-     * - `dot` — 8 × 8 px circle; no text; use for presence/status signals only.
+     * - `sm`  — 16px visual pill (--size-16) inside a transparent wrapper with
+     *           4px padding-block (--inset-tiny), giving a 24px total footprint.
+     * - `dot` — 8px circle (--size-8); no text; use for presence signals only.
      * @default 'sm'
      */
     size?: BadgeSize;

package/dist/ds-nagarro.es.js

@@ -662,7 +662,7 @@ function qe({ size: e = "md", variant: t = "secondary", children: n, leadingIcon
 }
 //#endregion
 //#region src/components/atoms/Avatar/Avatar.tsx
-function Je({ size: e = "md", variant: t = "profile", fill: n = "initials", src: r, initials: i, icon: a, name: o, alt: s, className: c, style: l }) {
+function Je({ size: e = "sm", variant: t = "profile", fill: n = "initials", src: r, initials: i, icon: a, name: o, alt: s, className: c, style: l }) {
 	let u = ["dsn-avatar", c].filter(Boolean).join(" "), d = o ?? void 0, f = o ? void 0 : !0, p = i ? i.trim().slice(0, 2).toUpperCase() : void 0;
 	return /* @__PURE__ */ g("div", {
 		className: u,
@@ -717,15 +717,27 @@ function Ye({ size: e = "sm", avatars: t, maxVisible: n = 5, className: r, "aria
 //#endregion
 //#region src/components/atoms/Badge/Badge.tsx
 function Xe({ size: e = "sm", variant: t = "highlight-soft", count: n, className: r, "aria-label": i }) {
-	let a = e === "dot", o = a || n === void 0 ? void 0 : n > 99 ? "99+" : String(n);
-	return /* @__PURE__ */ h("span", {
-		className: ["dsn-badge", r].filter(Boolean).join(" "),
+	let a = e === "dot", o = a || n === void 0 ? void 0 : n > 99 ? "99+" : String(n), s = ["dsn-badge", r].filter(Boolean).join(" ");
+	return a ? /* @__PURE__ */ h("span", {
+		className: s,
+		"data-size": e,
+		"data-variant": t,
+		"aria-label": i,
+		role: i ? "img" : void 0,
+		"aria-hidden": i ? void 0 : !0
+	}) : /* @__PURE__ */ h("span", {
+		className: s,
 		"data-size": e,
 		"data-variant": t,
 		"aria-label": i,
 		role: i ? "img" : void 0,
-		"aria-hidden": a && !i ? !0 : void 0,
-		children: o
+		children: /* @__PURE__ */ h("span", {
+			className: "dsn-badge__pill",
+			children: /* @__PURE__ */ h("span", {
+				className: "dsn-badge__label",
+				children: o
+			})
+		})
 	});
 }
 //#endregion
@@ -6433,9 +6445,12 @@ function jr({ variant: e = "inline", severity: t = "default", title: n, descript
 		onMouseLeave: w,
 		children: [
 			/* @__PURE__ */ h("span", {
-				className: "dsn-toast-icon",
+				className: "dsn-toast-icon-wrapper",
 				"aria-hidden": "true",
-				children: d ?? Ar(t)
+				children: /* @__PURE__ */ h("span", {
+					className: "dsn-toast-icon",
+					children: d ?? Ar(t)
+				})
 			}),
 			/* @__PURE__ */ g("div", {
 				className: "dsn-toast-content",