@alfadocs/ui-kit 0.0.12

package/dist/_chunks/badge--CmSr7ok.js

@@ -0,0 +1,104 @@
+import { jsxs as d, jsx as s, 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-DF6WjD1r.js";
+const z = a(
+  [
+    "inline-flex items-center 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",
+    "whitespace-nowrap",
+    "focus-visible:outline-none",
+    "focus-visible:ring-[length:var(--focus-ring-width)]",
+    "focus-visible:ring-[color:var(--ring)]",
+    "focus-visible:ring-offset-[length:var(--focus-ring-offset)]"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        neutral: "bg-muted/20 text-muted-foreground",
+        info: "bg-info/15 text-[var(--info-foreground)]",
+        success: "bg-success/15 text-[var(--success-foreground)]",
+        warning: "bg-warning/15 text-[var(--warning-foreground)]",
+        error: "bg-destructive/15 text-[var(--error-foreground)]"
+      },
+      size: {
+        sm: "h-4 ps-1 pe-1 [--type-eyebrow-size:var(--font-size-2xs)]",
+        md: "h-5 ps-1.5 pe-1.5 [--type-eyebrow-size:var(--font-size-2xs)]",
+        lg: "h-6 ps-2 pe-2 [--type-eyebrow-size:var(--font-size-xs)]"
+      },
+      shape: {
+        pill: "rounded-[var(--radius-full)]",
+        rectangular: "rounded-[var(--radius-sm)]"
+      }
+    },
+    defaultVariants: {
+      variant: "neutral",
+      size: "md",
+      shape: "pill"
+    }
+  }
+), N = a("text-[var(--font-size-dot)] leading-none shrink-0", {
+  variants: {
+    variant: {
+      neutral: "text-muted-foreground",
+      info: "text-info",
+      success: "text-success",
+      warning: "text-warning",
+      error: "text-destructive"
+    }
+  },
+  defaultVariants: { variant: "neutral" }
+}), V = a("shrink-0 [&>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: "[&>svg]:size-2.5",
+      md: "[&>svg]:size-3",
+      lg: "[&>svg]:size-3.5"
+    }
+  },
+  defaultVariants: { size: "md" }
+}), j = w(
+  ({
+    variant: t = "neutral",
+    size: n = "md",
+    shape: f = "pill",
+    leading: i,
+    withDot: c = !1,
+    truncate: o = !1,
+    className: g,
+    children: e,
+    "aria-label": l,
+    ...p
+  }, v) => {
+    const { t: m } = h(), r = !e && !!l, b = typeof e == "number", u = /* @__PURE__ */ d(
+      "span",
+      {
+        ref: v,
+        className: z({ variant: t, size: n, shape: f, className: g }),
+        role: r ? "img" : void 0,
+        "aria-label": r ? l : void 0,
+        ...p,
+        children: [
+          c && /* @__PURE__ */ s("span", { "aria-hidden": "true", className: N({ variant: t }), children: "●" }),
+          i && /* @__PURE__ */ s("span", { "aria-hidden": "true", className: V({ size: n }), children: i }),
+          !r && (b ? /* @__PURE__ */ d(x, { children: [
+            /* @__PURE__ */ s("span", { "aria-hidden": "true", children: e }),
+            /* @__PURE__ */ s("span", { className: "sr-only", children: m("ui.badge.notifications", { count: e }) })
+          ] }) : o ? /* @__PURE__ */ s("span", { className: "max-w-[var(--badge-truncate-max-width)] overflow-hidden text-ellipsis whitespace-nowrap", children: e }) : e)
+        ]
+      }
+    );
+    return o && typeof e == "string" ? /* @__PURE__ */ s(y, { label: e, children: u }) : u;
+  }
+);
+j.displayName = "Badge";
+export {
+  j as B
+};
+//# sourceMappingURL=badge--CmSr7ok.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge--CmSr7ok.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    'inline-flex items-center 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    'whitespace-nowrap',\n    'focus-visible:outline-none',\n    'focus-visible:ring-[length:var(--focus-ring-width)]',\n    'focus-visible:ring-[color:var(--ring)]',\n    'focus-visible:ring-offset-[length:var(--focus-ring-offset)]',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        neutral: 'bg-muted/20 text-muted-foreground',\n        info: 'bg-info/15 text-[var(--info-foreground)]',\n        success: 'bg-success/15 text-[var(--success-foreground)]',\n        warning: 'bg-warning/15 text-[var(--warning-foreground)]',\n        error: 'bg-destructive/15 text-[var(--error-foreground)]',\n      },\n      size: {\n        sm: 'h-4 ps-1 pe-1 [--type-eyebrow-size:var(--font-size-2xs)]',\n        md: 'h-5 ps-1.5 pe-1.5 [--type-eyebrow-size:var(--font-size-2xs)]',\n        lg: 'h-6 ps-2 pe-2 [--type-eyebrow-size:var(--font-size-xs)]',\n      },\n      shape: {\n        pill: 'rounded-[var(--radius-full)]',\n        rectangular: '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('text-[var(--font-size-dot)] leading-none shrink-0', {\n  variants: {\n    variant: {\n      neutral: 'text-muted-foreground',\n      info: 'text-info',\n      success: 'text-success',\n      warning: 'text-warning',\n      error: 'text-destructive',\n    },\n  },\n  defaultVariants: { variant: 'neutral' },\n});\n\n/* ------------------------------------------------------------------ */\n/* CVA — leading icon wrapper                                           */\n/* ------------------------------------------------------------------ */\n\nconst iconWrapperVariants = cva('shrink-0 [&>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: '[&>svg]:size-2.5',\n      md: '[&>svg]:size-3',\n      lg: '[&>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=\"sr-only\">\n                {t('ui.badge.notifications', { count: children })}\n              </span>\n            </>\n          ) : truncate ? (\n            <span className=\"max-w-[var(--badge-truncate-max-width)] overflow-hidden text-ellipsis 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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"}