@alfadocs/ui-kit-debug 0.1.8

package/dist/_chunks/badge-mrstWxve.js

@@ -0,0 +1,105 @@
+import { jsxs as u, jsx as e, Fragment as x } from "react/jsx-runtime";
+import { forwardRef as w } from "react";
+import { c as r } from "./index-D2ZczOXr.js";
+import { useTranslation as h } from "react-i18next";
+import { T as y } from "./tooltip-DHik5yRI.js";
+const z = r(
+  [
+    "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 = r("ds:text-[length: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 = r("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
+  }, m) => {
+    const { t: v } = h(), a = !s && !!o, b = typeof s == "number", l = /* @__PURE__ */ u(
+      "span",
+      {
+        ref: m,
+        className: z({ variant: t, size: n, shape: f, className: g }),
+        "data-component": "badge",
+        role: a ? "img" : void 0,
+        "aria-label": a ? 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 }),
+          !a && (b ? /* @__PURE__ */ u(x, { children: [
+            /* @__PURE__ */ e("span", { "aria-hidden": "true", children: s }),
+            /* @__PURE__ */ e("span", { className: "ds:sr-only", children: v("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-mrstWxve.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge-mrstWxve.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-[length: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        data-component=\"badge\"\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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"}