@dashforge/tw 1.0.0 → 1.1.0

package/dist/src/components/Avatar/avatar.variants.d.ts

@@ -0,0 +1,208 @@
+import { type VariantProps } from 'tailwind-variants';
+/**
+ * Tailwind-variants recipe for `<Avatar>`.
+ *
+ * Axes:
+ *   - `size`   — 5 steps (xs/sm/md/lg/xl), maps to w/h spacing tokens
+ *                + matching text-size for the initials inside.
+ *   - `radius` — 7 steps (none/sm/md/lg/xl/2xl/full), same scale as
+ *                `<Box rounded>`. `shape` prop in the component maps
+ *                semantically: circle → full, rounded → lg, square → none.
+ *   - `color`  — 7 intents. Drives the FALLBACK bg+text only (image
+ *                surface is independent of color).
+ *
+ * The `color` × `tone` combo is resolved at render time in
+ * `Avatar.tsx` via compound lookup — see the SOFT_TINT and TONE
+ * tables there. We do NOT expand the matrix exhaustively in this TV
+ * recipe (it would be 7 colors × 10 tones × 5 sizes = 350 rules; the
+ * runtime resolver keeps the recipe slim).
+ */
+export declare const avatarVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            root: string;
+            initials: string;
+        };
+        sm: {
+            root: string;
+            initials: string;
+        };
+        md: {
+            root: string;
+            initials: string;
+        };
+        lg: {
+            root: string;
+            initials: string;
+        };
+        xl: {
+            root: string;
+            initials: string;
+        };
+    };
+    radius: {
+        none: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        '2xl': {
+            root: string;
+        };
+        full: {
+            root: string;
+        };
+    };
+}, {
+    /** Outer wrapper — sets dimensions + radius + ring + alignment. */
+    root: string[];
+    /** `<img>` slot — fills the root, object-cover for crop-to-square. */
+    img: string;
+    /** Initials text slot. */
+    initials: string;
+    /** Generic user icon SVG fallback. */
+    icon: string;
+}, undefined, {
+    size: {
+        xs: {
+            root: string;
+            initials: string;
+        };
+        sm: {
+            root: string;
+            initials: string;
+        };
+        md: {
+            root: string;
+            initials: string;
+        };
+        lg: {
+            root: string;
+            initials: string;
+        };
+        xl: {
+            root: string;
+            initials: string;
+        };
+    };
+    radius: {
+        none: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        '2xl': {
+            root: string;
+        };
+        full: {
+            root: string;
+        };
+    };
+}, {
+    /** Outer wrapper — sets dimensions + radius + ring + alignment. */
+    root: string[];
+    /** `<img>` slot — fills the root, object-cover for crop-to-square. */
+    img: string;
+    /** Initials text slot. */
+    initials: string;
+    /** Generic user icon SVG fallback. */
+    icon: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            root: string;
+            initials: string;
+        };
+        sm: {
+            root: string;
+            initials: string;
+        };
+        md: {
+            root: string;
+            initials: string;
+        };
+        lg: {
+            root: string;
+            initials: string;
+        };
+        xl: {
+            root: string;
+            initials: string;
+        };
+    };
+    radius: {
+        none: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        '2xl': {
+            root: string;
+        };
+        full: {
+            root: string;
+        };
+    };
+}, {
+    /** Outer wrapper — sets dimensions + radius + ring + alignment. */
+    root: string[];
+    /** `<img>` slot — fills the root, object-cover for crop-to-square. */
+    img: string;
+    /** Initials text slot. */
+    initials: string;
+    /** Generic user icon SVG fallback. */
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type AvatarVariants = VariantProps<typeof avatarVariants>;
+/**
+ * Default "soft" fallback treatment per intent — what you get when
+ * `tone` is omitted. Light tinted bg + dark text for legibility.
+ * Neutral row uses no `dark:` because the dashforgePreset() CSS-var
+ * swap auto-inverts neutral; color rows keep `dark:` for the
+ * intentional palette shift (palette colors don't auto-invert).
+ */
+export declare const AVATAR_SOFT_FALLBACK: Record<string, string>;
+/**
+ * Specific-tone resolver — when the consumer sets `tone={500}` (or
+ * any other value), this lookup builds the matching bg + text class.
+ *
+ * Text color logic:
+ *   - tones 50-400  → dark text (uses the 900 step)
+ *   - tones 500-900 → light text (uses the 50 step)
+ *
+ * Tailwind JIT requires literal class strings, so we enumerate them
+ * explicitly here. The bundle cost is ~70 lines, acceptable for the
+ * type-safety win of letting consumers pick any palette shade.
+ */
+export declare const AVATAR_TONE_FALLBACK: Record<string, Record<number, string>>;
+//# sourceMappingURL=avatar.variants.d.ts.map

package/dist/src/components/Avatar/avatar.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/avatar.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEvB,mEAAmE;;IASnE,sEAAsE;;IAEtE,0BAA0B;;IAE1B,sCAAsC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAbtC,mEAAmE;;IASnE,sEAAsE;;IAEtE,0BAA0B;;IAE1B,sCAAsC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAbtC,mEAAmE;;IASnE,sEAAsE;;IAEtE,0BAA0B;;IAE1B,sCAAsC;;2CAwCxC,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAEjE;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAQvD,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAqFvE,CAAC"}

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

@@ -0,0 +1,63 @@
+import type { BadgeProps } from './badge.types.js';
+/**
+ * `<Badge>` — anchored indicator overlaying an anchor element.
+ *
+ * Common patterns:
+ *   - Notification count on a bell IconButton
+ *   - Presence dot on an Avatar
+ *   - "NEW" label on a Card or feature tile
+ *   - Unsaved-changes indicator on a save button
+ *
+ * For inline standalone pills (status labels, tags, removable
+ * chips), use `<Chip>` instead — Chip and Badge are complementary
+ * primitives. Chip is interactive (`onClick`, `onDelete`,
+ * `selected`); Badge is passive overlay.
+ *
+ * Bridge integration (Sprint 4.4):
+ *   - `access` — hide the badge for unauthorized subjects (anchor
+ *     stays visible; wrap anchor in a separate Box `access` to gate
+ *     it too)
+ *   - `visibleWhen` — engine-reactive predicate
+ *
+ * The wrapped anchor element ALWAYS renders; only the floating
+ * badge dot/count is gated by `access`, `visibleWhen`, `invisible`,
+ * and content-resolution logic.
+ *
+ * @example
+ * ```tsx
+ * // Notification count on bell
+ * <Badge content={unreadCount}>
+ *   <IconButton aria-label="Notifications" variant="ghost">
+ *     <BellIcon />
+ *   </IconButton>
+ * </Badge>
+ *
+ * // Presence dot on avatar
+ * <Badge dot color="success" overlap="circular">
+ *   <Avatar name="Maya Rodriguez" />
+ * </Badge>
+ *
+ * // Overflow
+ * <Badge content={1284} max={999}>
+ *   <IconButton aria-label="Messages"><MailIcon /></IconButton>
+ * </Badge>
+ *
+ * // RBAC-gated
+ * <Badge
+ *   content={adminQueueCount}
+ *   access={{ resource: 'admin', action: 'read', onUnauthorized: 'hide' }}
+ * >
+ *   <IconButton aria-label="Admin queue"><SettingsIcon /></IconButton>
+ * </Badge>
+ *
+ * // Engine-reactive
+ * <Badge
+ *   dot color="warning"
+ *   visibleWhen={(engine) => !!engine.getNode('unsavedChanges')?.value}
+ * >
+ *   <IconButton aria-label="Save"><SaveIcon /></IconButton>
+ * </Badge>
+ * ```
+ */
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=Badge.d.ts.map

package/dist/src/components/Badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAqCnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,eAAO,MAAM,KAAK,wGAqEhB,CAAC"}

package/dist/src/components/Badge/badge.types.d.ts

@@ -0,0 +1,124 @@
+import type { ReactNode } from 'react';
+import type { ClassValue } from 'tailwind-variants';
+import type { Engine } from '@dashforge/ui-core';
+import type { AccessRequirement } from '@dashforge/rbac';
+/**
+ * Intent color — drives the badge background. Default is `danger`
+ * because the most common notification UX expects a red dot/count
+ * for "needs attention" affordance.
+ */
+export type BadgeColor = 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+/** 4 corner positions for the floating badge. */
+export type BadgePlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+/**
+ * Anchor shape:
+ *   - `'rectangular'` (default) — badge sits at the bounding-box
+ *     corner. Use for square-ish anchors like IconButton, Card.
+ *   - `'circular'` — badge offset to align with the circular edge.
+ *     Use for round anchors like Avatar.
+ */
+export type BadgeOverlap = 'rectangular' | 'circular';
+/**
+ * Per-slot className overrides for `<Badge>`.
+ */
+export interface BadgeSlotProps {
+    /** Outer wrapper (relative-positioned, contains the anchor + badge). */
+    root?: {
+        className?: string;
+    };
+    /** The floating badge pill / dot itself. */
+    badge?: {
+        className?: string;
+    };
+}
+/**
+ * Props for `<Badge>` — anchored indicator (count / dot / short text).
+ *
+ * Wrapper-only mode: `<Badge>` always wraps an anchor element passed
+ * as `children`. For standalone inline pills (status labels, tags),
+ * use `<Chip>` — Badge and Chip are complementary, not interchangeable.
+ *
+ * Relationship with Chip:
+ *   - `<Chip>` = inline pill (interactive — `onClick`, `onDelete`,
+ *     `selected`). Standalone, no anchor.
+ *   - `<Badge>` = anchored indicator (passive — small count / dot
+ *     overlaid on top of another element).
+ */
+export interface BadgeProps {
+    /** The anchor element (Avatar / IconButton / button / Card / custom). */
+    children: ReactNode;
+    /**
+     * Numeric or string content to display inside the badge.
+     *   - `number` → formatted via `max` (overflow renders as `"N+"`)
+     *   - `string` → rendered verbatim (e.g., `"NEW"`)
+     *   - omitted + `dot=false` → no badge rendered (or only at zero if
+     *     `showZero=true`)
+     */
+    content?: number | string;
+    /**
+     * Dot-only mode — small circle without content. When `true`,
+     * `content` and `max` are ignored.
+     */
+    dot?: boolean;
+    /**
+     * Overflow threshold for numeric `content`. Values above render
+     * as `{max}+`. Set to `-1` to disable overflow (always raw number).
+     * @default 99
+     */
+    max?: number;
+    /**
+     * Whether to render the badge when numeric `content` is `0`.
+     * Hidden by default — the typical notification UX is "no badge =
+     * nothing to see".
+     * @default false
+     */
+    showZero?: boolean;
+    /**
+     * Imperative hide — keeps the badge in the DOM but applies
+     * `display: none`. Use for opacity/scale fade animations without
+     * unmounting.
+     * @default false
+     */
+    invisible?: boolean;
+    /** @default 'danger' — typical "needs attention" notification color. */
+    color?: BadgeColor;
+    /** @default 'top-right' */
+    placement?: BadgePlacement;
+    /**
+     * Anchor shape — controls badge offset.
+     * - `'rectangular'` (default) sits at the bounding-box corner
+     * - `'circular'` offsets to align with the circular anchor edge
+     *   (use with `<Avatar shape="circle">`)
+     * @default 'rectangular'
+     */
+    overlap?: BadgeOverlap;
+    /**
+     * White/neutral ring around the badge — visually separates from
+     * the anchor surface. Token-driven via `ring-neutral-50` which
+     * auto-inverts via the dashforgePreset CSS-var swap (no `dark:`
+     * needed).
+     * @default true
+     */
+    withRing?: boolean;
+    /**
+     * RBAC requirement — hides the badge for unauthorized subjects.
+     * The wrapped anchor element remains visible (use Box `access`
+     * to gate the anchor too).
+     *
+     * Use case: admin-only notification count, role-gated indicators.
+     */
+    access?: AccessRequirement;
+    /**
+     * Reactive visibility predicate. When `false`, the badge dot/count
+     * is not rendered (children always render). Use for state-driven
+     * indicators tied to engine values.
+     */
+    visibleWhen?: (engine: Engine) => boolean;
+    /** Root-element class shortcut. */
+    sx?: ClassValue;
+    /** Standard className — appended to the root via `cn()`. */
+    className?: string;
+    /** Per-slot overrides — root + badge. */
+    slotProps?: BadgeSlotProps;
+}
+//# sourceMappingURL=badge.types.d.ts.map

package/dist/src/components/Badge/badge.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,CAAC;AAEX,iDAAiD;AACjD,MAAM,MAAM,cAAc,GACtB,WAAW,GACX,UAAU,GACV,cAAc,GACd,aAAa,CAAC;AAElB;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG,aAAa,GAAG,UAAU,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,4CAA4C;IAC5C,KAAK,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAChC;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,UAAU;IAEzB,yEAAyE;IACzE,QAAQ,EAAE,SAAS,CAAC;IAGpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE1B;;;OAGG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IAEd;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAGpB,wEAAwE;IACxE,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IAG1C,mCAAmC;IACnC,EAAE,CAAC,EAAE,UAAU,CAAC;IAEhB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,cAAc,CAAC;CAC5B"}

package/dist/src/components/Badge/badge.variants.d.ts

@@ -0,0 +1,262 @@
+import { type VariantProps } from 'tailwind-variants';
+/**
+ * Tailwind-variants recipe for `<Badge>`.
+ *
+ * Slot layout:
+ *   - `root`  — outer span (relative-positioned wrapper around the
+ *               anchor). `inline-flex` so the wrapper shrinks to fit
+ *               the anchor element.
+ *   - `badge` — the floating absolute-positioned pill / dot. Two
+ *               variants (`dot=true` → tiny circle, `dot=false` →
+ *               pill with min-width to fit content).
+ *
+ * Color axis emits the `badge` background + text classes. The 7
+ * intents map to:
+ *   - solid bg: `bg-{intent}-500` (vivid, attention-grabbing for
+ *     notifications — different from Chip which uses 600 for solid
+ *     because chip surface is larger; small badge needs the brighter
+ *     mid-tone)
+ *   - text: `text-white` for primary/secondary/success/warning/danger/
+ *     info; `text-neutral-50` for neutral (auto-inverts via CSS-var
+ *     swap, no `dark:` needed)
+ *
+ * Placement axis emits absolute-position + translate utilities:
+ *   - top-right (default): `top-0 right-0 -translate-y-1/2 translate-x-1/2`
+ *   - top-left:    `top-0 left-0 -translate-y-1/2 -translate-x-1/2`
+ *   - bottom-right: `bottom-0 right-0 translate-y-1/2 translate-x-1/2`
+ *   - bottom-left:  `bottom-0 left-0 translate-y-1/2 -translate-x-1/2`
+ *
+ * Overlap axis adds an extra inset for circular anchors so the
+ * badge sits along the round edge instead of the bounding box corner.
+ */
+export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+    /**
+     * `dot=true` → tiny circle (8px), no content. The badge slot
+     * collapses to a fixed-size circle without the pill min-width.
+     */
+    dot: {
+        true: {
+            badge: string;
+        };
+        false: {
+            badge: string;
+        };
+    };
+    /** Whether the floating badge is hidden via `display: none`. */
+    invisible: {
+        true: {
+            badge: string;
+        };
+    };
+    /** Halo ring for visual separation from the anchor surface. */
+    withRing: {
+        true: {
+            badge: string;
+        };
+    };
+    /** 7 intents — drives the badge background + text colour. */
+    color: {
+        neutral: {
+            badge: string;
+        };
+        primary: {
+            badge: string;
+        };
+        secondary: {
+            badge: string;
+        };
+        success: {
+            badge: string;
+        };
+        warning: {
+            badge: string;
+        };
+        danger: {
+            badge: string;
+        };
+        info: {
+            badge: string;
+        };
+    };
+    placement: {
+        'top-right': {
+            badge: string;
+        };
+        'top-left': {
+            badge: string;
+        };
+        'bottom-right': {
+            badge: string;
+        };
+        'bottom-left': {
+            badge: string;
+        };
+    };
+    /**
+     * `overlap='circular'` adds an inward inset so the badge sits
+     * along the circular anchor edge instead of the bounding-box
+     * corner. The 14% offset is empirically tuned to match the
+     * standard avatar / round-button geometry (matches MUI's value).
+     */
+    overlap: {
+        rectangular: {};
+        circular: {};
+    };
+}, {
+    root: string;
+    badge: string[];
+}, undefined, {
+    /**
+     * `dot=true` → tiny circle (8px), no content. The badge slot
+     * collapses to a fixed-size circle without the pill min-width.
+     */
+    dot: {
+        true: {
+            badge: string;
+        };
+        false: {
+            badge: string;
+        };
+    };
+    /** Whether the floating badge is hidden via `display: none`. */
+    invisible: {
+        true: {
+            badge: string;
+        };
+    };
+    /** Halo ring for visual separation from the anchor surface. */
+    withRing: {
+        true: {
+            badge: string;
+        };
+    };
+    /** 7 intents — drives the badge background + text colour. */
+    color: {
+        neutral: {
+            badge: string;
+        };
+        primary: {
+            badge: string;
+        };
+        secondary: {
+            badge: string;
+        };
+        success: {
+            badge: string;
+        };
+        warning: {
+            badge: string;
+        };
+        danger: {
+            badge: string;
+        };
+        info: {
+            badge: string;
+        };
+    };
+    placement: {
+        'top-right': {
+            badge: string;
+        };
+        'top-left': {
+            badge: string;
+        };
+        'bottom-right': {
+            badge: string;
+        };
+        'bottom-left': {
+            badge: string;
+        };
+    };
+    /**
+     * `overlap='circular'` adds an inward inset so the badge sits
+     * along the circular anchor edge instead of the bounding-box
+     * corner. The 14% offset is empirically tuned to match the
+     * standard avatar / round-button geometry (matches MUI's value).
+     */
+    overlap: {
+        rectangular: {};
+        circular: {};
+    };
+}, {
+    root: string;
+    badge: string[];
+}, import("tailwind-variants").TVReturnType<{
+    /**
+     * `dot=true` → tiny circle (8px), no content. The badge slot
+     * collapses to a fixed-size circle without the pill min-width.
+     */
+    dot: {
+        true: {
+            badge: string;
+        };
+        false: {
+            badge: string;
+        };
+    };
+    /** Whether the floating badge is hidden via `display: none`. */
+    invisible: {
+        true: {
+            badge: string;
+        };
+    };
+    /** Halo ring for visual separation from the anchor surface. */
+    withRing: {
+        true: {
+            badge: string;
+        };
+    };
+    /** 7 intents — drives the badge background + text colour. */
+    color: {
+        neutral: {
+            badge: string;
+        };
+        primary: {
+            badge: string;
+        };
+        secondary: {
+            badge: string;
+        };
+        success: {
+            badge: string;
+        };
+        warning: {
+            badge: string;
+        };
+        danger: {
+            badge: string;
+        };
+        info: {
+            badge: string;
+        };
+    };
+    placement: {
+        'top-right': {
+            badge: string;
+        };
+        'top-left': {
+            badge: string;
+        };
+        'bottom-right': {
+            badge: string;
+        };
+        'bottom-left': {
+            badge: string;
+        };
+    };
+    /**
+     * `overlap='circular'` adds an inward inset so the badge sits
+     * along the circular anchor edge instead of the bounding-box
+     * corner. The 14% offset is empirically tuned to match the
+     * standard avatar / round-button geometry (matches MUI's value).
+     */
+    overlap: {
+        rectangular: {};
+        circular: {};
+    };
+}, {
+    root: string;
+    badge: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type BadgeVariants = VariantProps<typeof badgeVariants>;
+//# sourceMappingURL=badge.variants.d.ts.map

package/dist/src/components/Badge/badge.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/badge.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,aAAa;IAkBtB;;;OAGG;;;;;;;;;IAWH,gEAAgE;;;;;;IAMhE,+DAA+D;;;;;;IAQ/D,6DAA6D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4B7D;;;;;OAKG;;;;;;;;;IA7DH;;;OAGG;;;;;;;;;IAWH,gEAAgE;;;;;;IAMhE,+DAA+D;;;;;;IAQ/D,6DAA6D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4B7D;;;;;OAKG;;;;;;;;;IA7DH;;;OAGG;;;;;;;;;IAWH,gEAAgE;;;;;;IAMhE,+DAA+D;;;;;;IAQ/D,6DAA6D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4B7D;;;;;OAKG;;;;;;;;2CA+CL,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist/src/components/Box/Box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,GAAG,kGAyCf,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,GAAG,kGAoEf,CAAC"}