@dashforge/tw 1.1.0 → 1.2.0

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

@@ -1,154 +0,0 @@
-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 {
-  // ─── Required ──────────────────────────────────────────────────
-  /** The anchor element (Avatar / IconButton / button / Card / custom). */
-  children: ReactNode;
-
-  // ─── Content ───────────────────────────────────────────────────
-  /**
-   * 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;
-
-  // ─── Visual ────────────────────────────────────────────────────
-  /** @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;
-
-  // ─── Bridge integration (Sprint 4.4) ───────────────────────────
-  /**
-   * 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;
-
-  // ─── Override ──────────────────────────────────────────────────
-  /** Root-element class shortcut. */
-  sx?: ClassValue;
-
-  /** Standard className — appended to the root via `cn()`. */
-  className?: string;
-
-  /** Per-slot overrides — root + badge. */
-  slotProps?: BadgeSlotProps;
-}

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

@@ -1,161 +0,0 @@
-import { tv, 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 const badgeVariants = tv({
-  slots: {
-    root: 'relative inline-flex shrink-0',
-    badge: [
-      // Absolute positioning is owned by the placement compound rules.
-      'absolute z-10',
-      // Layout / typography — pill defaults; dot mode overrides
-      // dimensions below.
-      'inline-flex items-center justify-center',
-      'rounded-full',
-      'text-[10px] font-medium leading-none',
-      'pointer-events-none select-none',
-      // Smooth show/hide for `invisible` toggle (consumer-side
-      // animation hook). Gated on motion-reduce per WCAG 2.3.3.
-      'transition-transform duration-150 motion-reduce:transition-none motion-reduce:duration-0',
-    ],
-  },
-  variants: {
-    /**
-     * `dot=true` → tiny circle (8px), no content. The badge slot
-     * collapses to a fixed-size circle without the pill min-width.
-     */
-    dot: {
-      true: {
-        badge: 'w-2 h-2 p-0',
-      },
-      false: {
-        // Content pill — 16px tall, padded inline, min-width so
-        // single-digit counts still read centered.
-        badge: 'min-w-4 h-4 px-1',
-      },
-    },
-    /** Whether the floating badge is hidden via `display: none`. */
-    invisible: {
-      true: {
-        badge: 'hidden',
-      },
-    },
-    /** Halo ring for visual separation from the anchor surface. */
-    withRing: {
-      true: {
-        // ring-neutral-50 auto-inverts via dashforgePreset CSS var
-        // swap (no `dark:` needed for the neutral palette).
-        badge: 'ring-2 ring-neutral-50',
-      },
-    },
-    /** 7 intents — drives the badge background + text colour. */
-    color: {
-      neutral: {
-        // Both classes on the neutral palette — auto-invert via CSS
-        // var swap. No `dark:` variants needed.
-        badge: 'bg-neutral-700 text-neutral-50',
-      },
-      primary: { badge: 'bg-primary-500 text-white' },
-      secondary: { badge: 'bg-secondary-500 text-white' },
-      success: { badge: 'bg-success-500 text-white' },
-      warning: { badge: 'bg-warning-500 text-white' },
-      danger: { badge: 'bg-danger-500 text-white' },
-      info: { badge: 'bg-info-500 text-white' },
-    },
-    placement: {
-      'top-right': {
-        badge: 'top-0 right-0 -translate-y-1/2 translate-x-1/2',
-      },
-      'top-left': {
-        badge: 'top-0 left-0 -translate-y-1/2 -translate-x-1/2',
-      },
-      'bottom-right': {
-        badge: 'bottom-0 right-0 translate-y-1/2 translate-x-1/2',
-      },
-      'bottom-left': {
-        badge: 'bottom-0 left-0 translate-y-1/2 -translate-x-1/2',
-      },
-    },
-    /**
-     * `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: {},
-    },
-  },
-  compoundVariants: [
-    // ─── overlap='circular' × placement — additional inset ─────────
-    // The inward shift is in addition to the placement translate,
-    // achieved via an extra `-{translate-corner}` adjustment.
-    {
-      overlap: 'circular',
-      placement: 'top-right',
-      class: {
-        badge: 'top-[14%] right-[14%] translate-x-1/2 -translate-y-1/2',
-      },
-    },
-    {
-      overlap: 'circular',
-      placement: 'top-left',
-      class: {
-        badge: 'top-[14%] left-[14%] -translate-x-1/2 -translate-y-1/2',
-      },
-    },
-    {
-      overlap: 'circular',
-      placement: 'bottom-right',
-      class: {
-        badge: 'bottom-[14%] right-[14%] translate-x-1/2 translate-y-1/2',
-      },
-    },
-    {
-      overlap: 'circular',
-      placement: 'bottom-left',
-      class: {
-        badge: 'bottom-[14%] left-[14%] -translate-x-1/2 translate-y-1/2',
-      },
-    },
-  ],
-  defaultVariants: {
-    dot: false,
-    invisible: false,
-    withRing: true,
-    color: 'danger',
-    placement: 'top-right',
-    overlap: 'rectangular',
-  },
-});
-
-export type BadgeVariants = VariantProps<typeof badgeVariants>;