@alfadocs/ui-kit 0.0.20 → 0.1.0

package/dist/_chunks/{avatar-BsV7vRA6.js → avatar-BAhxbDEu.js}

@@ -1,12 +1,12 @@
-import { jsxs as C, jsx as a } from "react/jsx-runtime";
+import { jsxs as C, jsx as t } from "react/jsx-runtime";
 import { forwardRef as y, useRef as j, useState as w, useEffect as A, useLayoutEffect as I } from "react";
 import { c as N } from "./index-D2ZczOXr.js";
 import { useTranslation as E } from "react-i18next";
 import { c as B } from "./compose-refs-C0k0tdqF.js";
-function R(o) {
+function R(s) {
   let e = 5381;
-  for (let r = 0; r < o.length; r++)
-    e = (e << 5) + e ^ o.charCodeAt(r), e = e >>> 0;
+  for (let o = 0; o < s.length; o++)
+    e = (e << 5) + e ^ s.charCodeAt(o), e = e >>> 0;
   return e;
 }
 const n = [
@@ -27,75 +27,75 @@ const n = [
   "bg-[var(--color-blue-700)]",
   "bg-[var(--color-grey-900)]"
 ];
-function S(o) {
-  return n[R(o) % n.length];
+function S(s) {
+  return n[R(s) % n.length];
 }
-function L(o) {
-  const e = o.trim().split(/\s+/).filter(Boolean);
+function L(s) {
+  const e = s.trim().split(/\s+/).filter(Boolean);
   return e.length === 0 ? "" : e.length === 1 ? e[0].slice(0, 2).toUpperCase() : (e[0][0] + e[e.length - 1][0]).toUpperCase();
 }
 const T = N(
   [
-    "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-[var(--radius-full)]",
+    "ds:relative ds:inline-flex ds:shrink-0 ds:select-none ds:items-center ds:justify-center ds:overflow-hidden ds:rounded-[var(--radius-full)]",
     // Focus ring — uses design-system tokens so theme overrides (accessible: 3px) apply automatically.
     // The ring renders when Avatar is placed inside a focusable ancestor (e.g. a <button>).
-    "focus-visible:outline-solid",
-    "focus-visible:outline-[length:var(--focus-ring-width)]",
-    "focus-visible:outline-ring",
-    "focus-visible:outline-offset-[length:var(--focus-ring-offset)]"
+    "ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)]",
+    "ds:focus-visible:outline-ring",
+    "ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]"
   ].join(" "),
   {
     variants: {
       size: {
         // text-[var(--font-size-xs)] = 0.75rem (12px) — smallest available token
-        xs: "size-6 text-[var(--font-size-xs)] font-semibold leading-none",
-        sm: "size-8 text-[var(--font-size-xs)] font-semibold leading-none",
-        md: "size-10 text-[var(--font-size-xs)] font-semibold leading-none",
-        lg: "size-12 text-[var(--font-size-sm)] font-semibold leading-none",
-        xl: "size-16 text-[var(--font-size-base)] font-semibold leading-none"
+        xs: "ds:size-6 ds:text-[var(--font-size-xs)] ds:font-semibold ds:leading-none",
+        sm: "ds:size-8 ds:text-[var(--font-size-xs)] ds:font-semibold ds:leading-none",
+        md: "ds:size-10 ds:text-[var(--font-size-xs)] ds:font-semibold ds:leading-none",
+        lg: "ds:size-12 ds:text-[var(--font-size-sm)] ds:font-semibold ds:leading-none",
+        xl: "ds:size-16 ds:text-[var(--font-size-base)] ds:font-semibold ds:leading-none"
       }
     },
     defaultVariants: { size: "md" }
   }
 ), U = y(
-  ({ src: o, name: e, color: r, size: c, className: f, ...v }, u) => {
-    const { t: g } = E(), l = j(null), d = B(u, l), [b, i] = w(!1);
+  ({ src: s, name: e, color: o, size: d, className: c, ...f }, v) => {
+    const { t: u } = E(), l = j(null), g = B(v, l), [b, i] = w(!1);
     A(() => {
       i(!1);
-    }, [o]), I(() => {
-      const s = l.current;
-      s && (r ? s.style.setProperty("--avatar-color-override", r) : s.style.removeProperty("--avatar-color-override"));
-    }, [r]);
-    const t = !!o && !b, m = !t && !!e, p = !t && !e, h = r ? "bg-[var(--avatar-color-override)]" : e ? S(e) : "bg-muted", x = T({
-      size: c,
-      className: [h, r || e ? "text-[var(--primary-foreground)]" : "text-muted-foreground", f].filter(Boolean).join(" ")
-    }), z = e ?? g("ui.avatar.placeholder", "User avatar");
+    }, [s]), I(() => {
+      const a = l.current;
+      a && (o ? a.style.setProperty("--avatar-color-override", o) : a.style.removeProperty("--avatar-color-override"));
+    }, [o]);
+    const r = !!s && !b, m = !r && !!e, p = !r && !e, h = o ? "bg-[var(--avatar-color-override)]" : e ? S(e) : "bg-muted", x = T({
+      size: d,
+      className: [h, o || e ? "text-[var(--primary-foreground)]" : "text-muted-foreground", c].filter(Boolean).join(" ")
+    }), z = e ?? u("ui.avatar.placeholder", "User avatar");
     return /* @__PURE__ */ C(
       "span",
       {
-        ref: d,
+        ref: g,
         role: "img",
         "aria-label": z,
         className: x,
-        ...v,
+        ...f,
         children: [
-          (m || t) && !!e && /* @__PURE__ */ a("span", { "aria-hidden": "true", children: L(e) }),
-          p && /* @__PURE__ */ a(
+          (m || r) && !!e && /* @__PURE__ */ t("span", { "aria-hidden": "true", children: L(e) }),
+          p && /* @__PURE__ */ t(
             "svg",
             {
               "aria-hidden": "true",
               viewBox: "0 0 24 24",
-              className: "size-[58%] fill-current",
-              children: /* @__PURE__ */ a("path", { d: "M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-3.33 0-10 1.67-10 5v2h20v-2c0-3.33-6.67-5-10-5z" })
+              className: "ds:size-[58%] ds:fill-current",
+              children: /* @__PURE__ */ t("path", { d: "M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-3.33 0-10 1.67-10 5v2h20v-2c0-3.33-6.67-5-10-5z" })
             }
           ),
-          t && /* @__PURE__ */ a(
+          r && /* @__PURE__ */ t(
             "img",
             {
-              src: o,
+              src: s,
               alt: "",
               "aria-hidden": "true",
-              className: "absolute inset-0 size-full object-cover",
+              className: "ds:absolute ds:inset-0 ds:size-full ds:object-cover",
               onError: () => i(!0)
             }
           )
@@ -110,4 +110,4 @@ export {
   L as g,
   S as n
 };
-//# sourceMappingURL=avatar-BsV7vRA6.js.map
+//# sourceMappingURL=avatar-BAhxbDEu.js.map

package/dist/_chunks/avatar-BAhxbDEu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-BAhxbDEu.js","sources":["../../src/components/avatar/avatar.tsx"],"sourcesContent":["import { forwardRef, useEffect, useLayoutEffect, useRef, useState, type HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { composeRefs } from '../_shared/compose-refs';\n\n// ── Hash ──────────────────────────────────────────────────────────────────────\n\n/** djb2 hash — fast, unsigned 32-bit, stable across calls. */\nfunction djb2(str: string): number {\n  let hash = 5381;\n  for (let i = 0; i < str.length; i++) {\n    hash = ((hash << 5) + hash) ^ str.charCodeAt(i);\n    hash = hash >>> 0; // coerce to unsigned 32-bit integer\n  }\n  return hash;\n}\n\n/**\n * 16 brand hues — all verified ≥ 4.5 : 1 contrast against white\n * (var(--primary-foreground)) using the WCAG 2.x relative-luminance formula.\n * Spans four distinct hue families for good visual distribution.\n *\n *  Index | Token                  | Contrast  | Visual character\n *  0     | --color-violet-500     | 4.74 : 1  | bright violet\n *  1     | --color-violet-600     | 5.53 : 1  | medium violet\n *  2     | --color-violet-700     | 7.29 : 1  | dark violet\n *  3     | --color-violet-800     | 9.57 : 1  | deep violet\n *  4     | --color-violet-900     | 12.06 : 1 | midnight violet\n *  5     | --color-purple-700     | 5.21 : 1  | medium purple\n *  6     | --color-purple-800     | 7.52 : 1  | dark purple\n *  7     | --color-purple-900     | 10.40 : 1 | deep purple\n *  8     | --color-magenta-700    | 6.01 : 1  | vivid magenta\n *  9     | --color-magenta-800    | 8.05 : 1  | dark magenta\n *  10    | --color-magenta-900    | 11.20 : 1 | deep magenta\n *  11    | --color-blue-300       | 4.64 : 1  | slate / steel blue\n *  12    | --color-blue-400       | 6.95 : 1  | medium slate\n *  13    | --color-blue-500       | 13.00 : 1 | deep navy\n *  14    | --color-blue-700       | 17.82 : 1 | midnight navy\n *  15    | --color-grey-900       | 5.78 : 1  | warm charcoal\n */\nconst INITIALS_BG_CLASSES = [\n  'bg-[var(--color-violet-500)]',\n  'bg-[var(--color-violet-600)]',\n  'bg-[var(--color-violet-700)]',\n  'bg-[var(--color-violet-800)]',\n  'bg-[var(--color-violet-900)]',\n  'bg-[var(--color-purple-700)]',\n  'bg-[var(--color-purple-800)]',\n  'bg-[var(--color-purple-900)]',\n  'bg-[var(--color-magenta-700)]',\n  'bg-[var(--color-magenta-800)]',\n  'bg-[var(--color-magenta-900)]',\n  'bg-[var(--color-blue-300)]',\n  'bg-[var(--color-blue-400)]',\n  'bg-[var(--color-blue-500)]',\n  'bg-[var(--color-blue-700)]',\n  'bg-[var(--color-grey-900)]',\n] as const;\n\n/** Deterministically maps a name string to one of 16 brand-hue Tailwind classes. Same name always produces the same class. */\nexport function nameToColorClass(name: string): string {\n  return INITIALS_BG_CLASSES[djb2(name) % INITIALS_BG_CLASSES.length];\n}\n\n/**\n * Extracts 1–2 uppercase initials:\n * - Single-word name: first two characters  (\"John\" → \"JO\")\n * - Multi-word name: first char of first word + first char of last word  (\"John Doe\" → \"JD\")\n */\nexport function getInitials(name: string): string {\n  const words = name.trim().split(/\\s+/).filter(Boolean);\n  if (words.length === 0) return '';\n  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();\n  return (words[0][0] + words[words.length - 1][0]).toUpperCase();\n}\n\n// ── CVA ───────────────────────────────────────────────────────────────────────\n\nconst avatarVariants = cva(\n  [\n    'ds:relative ds:inline-flex ds:shrink-0 ds:select-none ds:items-center ds:justify-center ds:overflow-hidden ds:rounded-[var(--radius-full)]',\n    // Focus ring — uses design-system tokens so theme overrides (accessible: 3px) apply automatically.\n    // The ring renders when Avatar is placed inside a focusable ancestor (e.g. a <button>).\n    'ds:focus-visible:outline-solid',\n    'ds:focus-visible:outline-[length:var(--focus-ring-width)]',\n    'ds:focus-visible:outline-ring',\n    'ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n  ].join(' '),\n  {\n    variants: {\n      size: {\n        // text-[var(--font-size-xs)] = 0.75rem (12px) — smallest available token\n        xs: 'ds:size-6 ds:text-[var(--font-size-xs)] ds:font-semibold ds:leading-none',\n        sm: 'ds:size-8 ds:text-[var(--font-size-xs)] ds:font-semibold ds:leading-none',\n        md: 'ds:size-10 ds:text-[var(--font-size-xs)] ds:font-semibold ds:leading-none',\n        lg: 'ds:size-12 ds:text-[var(--font-size-sm)] ds:font-semibold ds:leading-none',\n        xl: 'ds:size-16 ds:text-[var(--font-size-base)] ds:font-semibold ds:leading-none',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n);\n\n// ── Props ─────────────────────────────────────────────────────────────────────\n\nexport interface AvatarProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'>,\n    VariantProps<typeof avatarVariants> {\n  /** Image source URL. When provided and loads successfully, the image is displayed. */\n  src?: string;\n  /** Display name — drives initials extraction and deterministic background colour. */\n  name?: string;\n  /**\n   * Override the auto-generated background with any CSS colour string\n   * (e.g. `\"var(--color-violet-700)\"`).\n   * Applied via a CSS custom property so no `style` attribute is added to the JSX element.\n   * Caller is responsible for WCAG AA contrast (≥4.5:1) against white text.\n   */\n  color?: string;\n}\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n  ({ src, name, color, size, className, ...props }, ref) => {\n    const { t } = useTranslation();\n\n    const innerRef = useRef<HTMLSpanElement>(null);\n    const composedRef = composeRefs(ref, innerRef);\n\n    // Track only image errors. The image renders immediately as an overlay;\n    // before it loads the browser paints nothing (transparent), showing the\n    // background colour + initials behind it. On error we remove the img and\n    // the initials/fallback remain permanently visible.\n    const [imgError, setImgError] = useState(false);\n\n    // Reset error flag whenever src changes\n    useEffect(() => {\n      setImgError(false);\n    }, [src]);\n\n    // Apply color override via CSS custom property — avoids style={{…}} on JSX.\n    // Mirrors the pattern used by the Progress component for imperative CSS property injection.\n    useLayoutEffect(() => {\n      const el = innerRef.current;\n      if (!el) return;\n      if (color) {\n        el.style.setProperty('--avatar-color-override', color);\n      } else {\n        el.style.removeProperty('--avatar-color-override');\n      }\n    }, [color]);\n\n    // Image is \"active\" when provided and not errored\n    const imgActive = !!src && !imgError;\n\n    // Initials and fallback icon are shown when no usable image\n    const showInitials = !imgActive && !!name;\n    const showIcon = !imgActive && !name;\n\n    // Background — always rendered (serves as loading placeholder when image is fetching)\n    const fallbackBgClass = color\n      ? 'bg-[var(--avatar-color-override)]'\n      : name\n        ? nameToColorClass(name)\n        : 'bg-muted';\n\n    // Always white text against brand hues / color override; muted-foreground for icon\n    const contentColorClass =\n      color || name\n        ? 'text-[var(--primary-foreground)]'\n        : 'text-muted-foreground';\n\n    const rootClassName = avatarVariants({\n      size,\n      className: [fallbackBgClass, contentColorClass, className]\n        .filter(Boolean)\n        .join(' '),\n    });\n\n    // Accessible label — name takes priority, then the localised placeholder\n    const ariaLabel = name ?? t('ui.avatar.placeholder', 'User avatar');\n\n    return (\n      <span\n        ref={composedRef}\n        role=\"img\"\n        aria-label={ariaLabel}\n        className={rootClassName}\n        {...props}\n      >\n        {/* Initials — rendered behind the image; visible while image is loading\n            or permanently when no src / src errors */}\n        {(showInitials || imgActive) && !!name && (\n          <span aria-hidden=\"true\">{getInitials(name)}</span>\n        )}\n\n        {/* Fallback icon — shown when neither image nor name is available */}\n        {showIcon && (\n          <svg\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            className=\"ds:size-[58%] ds:fill-current\"\n          >\n            <path d=\"M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-3.33 0-10 1.67-10 5v2h20v-2c0-3.33-6.67-5-10-5z\" />\n          </svg>\n        )}\n\n        {/* Image — absolutely positioned overlay. Renders transparently until the\n            browser paints the decoded pixels, then covers the initials behind it.\n            Removed from DOM on error so initials remain permanently visible. */}\n        {imgActive && (\n          <img\n            src={src}\n            alt=\"\"\n            aria-hidden=\"true\"\n            className=\"ds:absolute ds:inset-0 ds:size-full ds:object-cover\"\n            onError={() => setImgError(true)}\n          />\n        )}\n      </span>\n    );\n  },\n);\n\nAvatar.displayName = 'Avatar';\n"],"names":["djb2","str","hash","i","INITIALS_BG_CLASSES","nameToColorClass","name","getInitials","words","avatarVariants","cva","Avatar","forwardRef","src","color","size","className","props","ref","t","useTranslation","innerRef","useRef","composedRef","composeRefs","imgError","setImgError","useState","useEffect","useLayoutEffect","el","imgActive","showInitials","showIcon","fallbackBgClass","rootClassName","ariaLabel","jsxs","jsx"],"mappings":"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"}

package/dist/_chunks/badge-zDghajh8.js

@@ -0,0 +1,104 @@
+import { jsxs as u, jsx as e, Fragment as x } from "react/jsx-runtime";
+import { forwardRef as w } from "react";
+import { c as a } from "./index-D2ZczOXr.js";
+import { useTranslation as h } from "react-i18next";
+import { T as y } from "./tooltip-Dp3u8jGz.js";
+const z = a(
+  [
+    "ds:inline-flex ds:items-center ds:gap-1",
+    // Typography comes from the eyebrow role: Medium 500 + uppercase + expanded tracking.
+    // CVA size variants below override just `--type-eyebrow-size` so weight/transform/
+    // tracking/line-height stay role-owned — same chip-family pattern as Tag.
+    "type-eyebrow",
+    "ds:whitespace-nowrap",
+    "ds:focus-visible:outline-none",
+    "ds:focus-visible:ring-[length:var(--focus-ring-width)]",
+    "ds:focus-visible:ring-[color:var(--ring)]",
+    "ds:focus-visible:ring-offset-[length:var(--focus-ring-offset)]"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        neutral: "ds:bg-muted/20 ds:text-muted-foreground",
+        info: "ds:bg-info/15 ds:text-[var(--info-foreground)]",
+        success: "ds:bg-success/15 ds:text-[var(--success-foreground)]",
+        warning: "ds:bg-warning/15 ds:text-[var(--warning-foreground)]",
+        error: "ds:bg-destructive/15 ds:text-[var(--error-foreground)]"
+      },
+      size: {
+        sm: "ds:h-4 ds:ps-1 ds:pe-1 ds:[--type-eyebrow-size:var(--font-size-2xs)]",
+        md: "ds:h-5 ds:ps-1.5 ds:pe-1.5 ds:[--type-eyebrow-size:var(--font-size-2xs)]",
+        lg: "ds:h-6 ds:ps-2 ds:pe-2 ds:[--type-eyebrow-size:var(--font-size-xs)]"
+      },
+      shape: {
+        pill: "ds:rounded-[var(--radius-full)]",
+        rectangular: "ds:rounded-[var(--radius-sm)]"
+      }
+    },
+    defaultVariants: {
+      variant: "neutral",
+      size: "md",
+      shape: "pill"
+    }
+  }
+), N = a("ds:text-[var(--font-size-dot)] ds:leading-none ds:shrink-0", {
+  variants: {
+    variant: {
+      neutral: "ds:text-muted-foreground",
+      info: "ds:text-info",
+      success: "ds:text-success",
+      warning: "ds:text-warning",
+      error: "ds:text-destructive"
+    }
+  },
+  defaultVariants: { variant: "neutral" }
+}), V = a("ds:shrink-0 ds:[&>svg]:block", {
+  variants: {
+    size: {
+      // Icons shrink with the compact Badge scale: sm badge is 16 px tall, so
+      // a 10 px glyph leaves room for the 1 px internal padding.
+      sm: "ds:[&>svg]:size-2.5",
+      md: "ds:[&>svg]:size-3",
+      lg: "ds:[&>svg]:size-3.5"
+    }
+  },
+  defaultVariants: { size: "md" }
+}), j = w(
+  ({
+    variant: t = "neutral",
+    size: n = "md",
+    shape: f = "pill",
+    leading: d,
+    withDot: c = !1,
+    truncate: i = !1,
+    className: g,
+    children: s,
+    "aria-label": o,
+    ...p
+  }, v) => {
+    const { t: m } = h(), r = !s && !!o, b = typeof s == "number", l = /* @__PURE__ */ u(
+      "span",
+      {
+        ref: v,
+        className: z({ variant: t, size: n, shape: f, className: g }),
+        role: r ? "img" : void 0,
+        "aria-label": r ? o : void 0,
+        ...p,
+        children: [
+          c && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: N({ variant: t }), children: "●" }),
+          d && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: V({ size: n }), children: d }),
+          !r && (b ? /* @__PURE__ */ u(x, { children: [
+            /* @__PURE__ */ e("span", { "aria-hidden": "true", children: s }),
+            /* @__PURE__ */ e("span", { className: "ds:sr-only", children: m("ui.badge.notifications", { count: s }) })
+          ] }) : i ? /* @__PURE__ */ e("span", { className: "ds:max-w-[var(--badge-truncate-max-width)] ds:overflow-hidden ds:text-ellipsis ds:whitespace-nowrap", children: s }) : s)
+        ]
+      }
+    );
+    return i && typeof s == "string" ? /* @__PURE__ */ e(y, { label: s, children: l }) : l;
+  }
+);
+j.displayName = "Badge";
+export {
+  j as B
+};
+//# sourceMappingURL=badge-zDghajh8.js.map

package/dist/_chunks/badge-zDghajh8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-zDghajh8.js","sources":["../../src/components/badge/badge.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { Tooltip } from '../tooltip';\n\n/* ------------------------------------------------------------------ */\n/* CVA — badge root                                                     */\n/* ------------------------------------------------------------------ */\n\nconst badgeVariants = cva(\n  [\n    'ds:inline-flex ds:items-center ds:gap-1',\n    // Typography comes from the eyebrow role: Medium 500 + uppercase + expanded tracking.\n    // CVA size variants below override just `--type-eyebrow-size` so weight/transform/\n    // tracking/line-height stay role-owned — same chip-family pattern as Tag.\n    'type-eyebrow',\n    'ds:whitespace-nowrap',\n    'ds:focus-visible:outline-none',\n    'ds:focus-visible:ring-[length:var(--focus-ring-width)]',\n    'ds:focus-visible:ring-[color:var(--ring)]',\n    'ds:focus-visible:ring-offset-[length:var(--focus-ring-offset)]',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        neutral: 'ds:bg-muted/20 ds:text-muted-foreground',\n        info: 'ds:bg-info/15 ds:text-[var(--info-foreground)]',\n        success: 'ds:bg-success/15 ds:text-[var(--success-foreground)]',\n        warning: 'ds:bg-warning/15 ds:text-[var(--warning-foreground)]',\n        error: 'ds:bg-destructive/15 ds:text-[var(--error-foreground)]',\n      },\n      size: {\n        sm: 'ds:h-4 ds:ps-1 ds:pe-1 ds:[--type-eyebrow-size:var(--font-size-2xs)]',\n        md: 'ds:h-5 ds:ps-1.5 ds:pe-1.5 ds:[--type-eyebrow-size:var(--font-size-2xs)]',\n        lg: 'ds:h-6 ds:ps-2 ds:pe-2 ds:[--type-eyebrow-size:var(--font-size-xs)]',\n      },\n      shape: {\n        pill: 'ds:rounded-[var(--radius-full)]',\n        rectangular: 'ds:rounded-[var(--radius-sm)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'neutral',\n      size: 'md',\n      shape: 'pill',\n    },\n  },\n);\n\n/* ------------------------------------------------------------------ */\n/* CVA — leading dot                                                    */\n/* ------------------------------------------------------------------ */\n\nconst dotVariants = cva('ds:text-[var(--font-size-dot)] ds:leading-none ds:shrink-0', {\n  variants: {\n    variant: {\n      neutral: 'ds:text-muted-foreground',\n      info: 'ds:text-info',\n      success: 'ds:text-success',\n      warning: 'ds:text-warning',\n      error: 'ds:text-destructive',\n    },\n  },\n  defaultVariants: { variant: 'neutral' },\n});\n\n/* ------------------------------------------------------------------ */\n/* CVA — leading icon wrapper                                           */\n/* ------------------------------------------------------------------ */\n\nconst iconWrapperVariants = cva('ds:shrink-0 ds:[&>svg]:block', {\n  variants: {\n    size: {\n      // Icons shrink with the compact Badge scale: sm badge is 16 px tall, so\n      // a 10 px glyph leaves room for the 1 px internal padding.\n      sm: 'ds:[&>svg]:size-2.5',\n      md: 'ds:[&>svg]:size-3',\n      lg: 'ds:[&>svg]:size-3.5',\n    },\n  },\n  defaultVariants: { size: 'md' },\n});\n\n/* ------------------------------------------------------------------ */\n/* BadgeProps                                                           */\n/* ------------------------------------------------------------------ */\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof badgeVariants> {\n  /** Leading icon — renders before the label */\n  leading?: ReactNode;\n  /** Show a leading dot indicator (● shape) for colour-blind accessibility */\n  withDot?: boolean;\n  /** Truncate long text with ellipsis + tooltip showing full text */\n  truncate?: boolean;\n  /** For icon-only badges — provides the accessible name */\n  'aria-label'?: string;\n}\n\n/* ------------------------------------------------------------------ */\n/* Badge                                                                */\n/* ------------------------------------------------------------------ */\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  (\n    {\n      variant = 'neutral',\n      size = 'md',\n      shape = 'pill',\n      leading,\n      withDot = false,\n      truncate = false,\n      className,\n      children,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n\n    const isIconOnly = !children && !!ariaLabel;\n    const isCount = typeof children === 'number';\n\n    const badge = (\n      <span\n        ref={ref}\n        className={badgeVariants({ variant, size, shape, className })}\n        role={isIconOnly ? 'img' : undefined}\n        aria-label={isIconOnly ? ariaLabel : undefined}\n        {...props}\n      >\n        {withDot && (\n          <span aria-hidden=\"true\" className={dotVariants({ variant })}>\n            ●\n          </span>\n        )}\n        {leading && (\n          <span aria-hidden=\"true\" className={iconWrapperVariants({ size })}>\n            {leading}\n          </span>\n        )}\n        {!isIconOnly && (\n          isCount ? (\n            <>\n              <span aria-hidden=\"true\">{children}</span>\n              <span className=\"ds:sr-only\">\n                {t('ui.badge.notifications', { count: children })}\n              </span>\n            </>\n          ) : truncate ? (\n            <span className=\"ds:max-w-[var(--badge-truncate-max-width)] ds:overflow-hidden ds:text-ellipsis ds:whitespace-nowrap\">\n              {children}\n            </span>\n          ) : (\n            children\n          )\n        )}\n      </span>\n    );\n\n    if (truncate && typeof children === 'string') {\n      return <Tooltip label={children}>{badge}</Tooltip>;\n    }\n\n    return badge;\n  },\n);\n\nBadge.displayName = 'Badge';\n"],"names":["badgeVariants","cva","dotVariants","iconWrapperVariants","Badge","forwardRef","variant","size","shape","leading","withDot","truncate","className","children","ariaLabel","props","ref","t","useTranslation","isIconOnly","isCount","badge","jsxs","jsx","Fragment","Tooltip"],"mappings":"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"}