@dashforge/tw 0.11.0-beta → 1.1.0

package/src/components/_shared/severity/severityVariants.ts

@@ -0,0 +1,115 @@
+import type { Severity, SeverityClasses, SeverityVariant } from './severity.types.js';
+
+/**
+ * The 3×4 severity color matrix.
+ *
+ * Every class is a Tailwind utility that resolves through
+ * `dashforgePreset()` to a CSS variable on the host — patchable at
+ * runtime via `patchTheme({ <severity>: { …scale } })` without
+ * recompiling. **Zero hardcoded hex values, zero `dark:` variants**:
+ * the dashforge preset auto-inverts the neutral surface ladder via CSS
+ * variable swap; the severity scales themselves do NOT auto-invert
+ * (they read the same scale in light + dark, which is the desired
+ * behaviour for semantic colors).
+ *
+ * The matrix is indexed `[variant][severity]` so a consumer-facing
+ * `<Alert variant="filled" severity="warning">` resolves with a single
+ * lookup.
+ */
+const SEVERITY_MATRIX: Record<SeverityVariant, Record<Severity, SeverityClasses>> = {
+  standard: {
+    info: {
+      surface: 'bg-info-50 text-info-900',
+      border: 'border-info-100',
+      icon: 'text-info-600',
+    },
+    success: {
+      surface: 'bg-success-50 text-success-900',
+      border: 'border-success-100',
+      icon: 'text-success-600',
+    },
+    warning: {
+      surface: 'bg-warning-50 text-warning-900',
+      border: 'border-warning-100',
+      icon: 'text-warning-600',
+    },
+    danger: {
+      surface: 'bg-danger-50 text-danger-900',
+      border: 'border-danger-100',
+      icon: 'text-danger-600',
+    },
+  },
+  filled: {
+    info: {
+      surface: 'bg-info-600 text-info-50',
+      border: 'border-info-700',
+      icon: 'text-info-50',
+    },
+    success: {
+      surface: 'bg-success-600 text-success-50',
+      border: 'border-success-700',
+      icon: 'text-success-50',
+    },
+    warning: {
+      surface: 'bg-warning-600 text-warning-50',
+      border: 'border-warning-700',
+      icon: 'text-warning-50',
+    },
+    danger: {
+      surface: 'bg-danger-600 text-danger-50',
+      border: 'border-danger-700',
+      icon: 'text-danger-50',
+    },
+  },
+  outlined: {
+    info: {
+      surface: 'bg-transparent text-info-700',
+      border: 'border-info-300',
+      icon: 'text-info-600',
+    },
+    success: {
+      surface: 'bg-transparent text-success-700',
+      border: 'border-success-300',
+      icon: 'text-success-600',
+    },
+    warning: {
+      surface: 'bg-transparent text-warning-700',
+      border: 'border-warning-300',
+      icon: 'text-warning-600',
+    },
+    danger: {
+      surface: 'bg-transparent text-danger-700',
+      border: 'border-danger-300',
+      icon: 'text-danger-600',
+    },
+  },
+};
+
+/**
+ * Resolve the Tailwind classes for one (variant, severity) pair.
+ *
+ * @example
+ * const { surface, border, icon } = getSeverityClasses('standard', 'warning');
+ * // surface: 'bg-warning-50 text-warning-900'
+ * // border:  'border-warning-100'
+ * // icon:    'text-warning-600'
+ */
+export function getSeverityClasses(
+  variant: SeverityVariant,
+  severity: Severity
+): SeverityClasses {
+  return SEVERITY_MATRIX[variant][severity];
+}
+
+/**
+ * ARIA role for a severity. Follows the W3C WAI-ARIA spec:
+ * - `alert` for assertive states (warning / danger) — interrupts the
+ *   screen-reader announcement queue.
+ * - `status` for polite states (info / success) — queued behind other
+ *   announcements.
+ *
+ * Consumers can override via an explicit `role` prop.
+ */
+export function getSeverityRole(severity: Severity): 'alert' | 'status' {
+  return severity === 'warning' || severity === 'danger' ? 'alert' : 'status';
+}

package/src/index.ts

@@ -201,11 +201,173 @@ export type {
   SnackbarOptions,
   SnackbarRecord,
   SnackbarSeverity,
+  SnackbarVariant,
   SnackbarPosition,
   SnackbarSlotProps,
 } from './components/Snackbar/snackbar.types.js';
 export { snackbarVariants } from './components/Snackbar/snackbar.variants.js';
 
+// Alert — inline persistent status surface (companion to Snackbar's
+// transient toast). Full MUI Alert API parity (`severity`, `variant`,
+// `icon`, `onClose`, `action`, `role`, `<AlertTitle>` sub-component);
+// `severity="danger"` (not MUI `"error"`) for token-palette alignment.
+// Shares the 3×4 color matrix in `_shared/severity/` with the
+// refactored Snackbar (Sprint 4.4).
+export { Alert, AlertTitle } from './components/Alert/Alert.js';
+export type {
+  AlertProps,
+  AlertTitleProps,
+  AlertSlotProps,
+} from './components/Alert/alert.types.js';
+export { alertVariants } from './components/Alert/alert.variants.js';
+
+// IconButton — square, icon-only variant of <Button>. Reuses
+// `buttonVariants` 1:1 (variant × color × size × loading); adds square
+// geometry (w-N + px-0 + aspect-square) and a TS-enforced `aria-label`.
+// access RBAC integration mirrors <Button>; no `visibleWhen` /
+// `slotProps` by design (icon-only buttons are single-DOM-element
+// action triggers, not content surfaces).
+export { IconButton } from './components/IconButton/IconButton.js';
+export type { IconButtonProps } from './components/IconButton/iconButton.types.js';
+export {
+  ICON_BUTTON_BASE,
+  ICON_BUTTON_SIZE_OVERRIDES,
+} from './components/IconButton/iconButton.variants.js';
+
+// Menu family — compound action menu built on
+// `@radix-ui/react-dropdown-menu` (purpose-built menu primitive
+// with full WAI-ARIA menu pattern + keyboard nav + type-ahead +
+// lazy portal mount). Atlaskit-inspired: item-level memo, lazy
+// portal mount, MenuSkeleton for fetch-while-open patterns.
+//   • <Menu>           — root provider (open state, closeOnItemClick)
+//   • <MenuTrigger>    — asChild trigger wrapper
+//   • <MenuContent>    — floating panel (portal, lazy mount)
+//   • <MenuItem>       — clickable row (memoized, access + visibleWhen)
+//   • <MenuLabel>      — non-interactive section heading
+//   • <MenuSeparator>  — divider
+//   • <MenuSkeleton>   — Atlaskit-style loading placeholder
+// Sub-menus + controlled selection mode are out of scope for v1.
+export {
+  Menu,
+  MenuTrigger,
+  MenuContent,
+  MenuItem,
+  MenuLabel,
+  MenuSeparator,
+  MenuSkeleton,
+} from './components/Menu/Menu.js';
+export type {
+  MenuProps,
+  MenuTriggerProps,
+  MenuContentProps,
+  MenuItemProps,
+  MenuLabelProps,
+  MenuSeparatorProps,
+  MenuSkeletonProps,
+  MenuPlacement,
+  MenuItemColor,
+} from './components/Menu/menu.types.js';
+export { menuVariants } from './components/Menu/menu.variants.js';
+
+// Badge — anchored indicator (count / dot / short text overlay).
+// Wrapper-only mode: <Badge>{anchor}</Badge>. For standalone inline
+// pills (status labels, removable tags), use <Chip> — Badge and Chip
+// are complementary. content + max overflow ("99+"), showZero gate,
+// dot mode, invisible toggle. placement 4 corners + overlap
+// rectangular/circular for round anchors (Avatar). withRing default
+// for visual separation. access + visibleWhen — gate the badge
+// (anchor always renders).
+export { Badge } from './components/Badge/Badge.js';
+export type {
+  BadgeProps,
+  BadgeColor,
+  BadgePlacement,
+  BadgeOverlap,
+  BadgeSlotProps,
+} from './components/Badge/badge.types.js';
+export { badgeVariants } from './components/Badge/badge.variants.js';
+export type { BadgeVariants } from './components/Badge/badge.variants.js';
+
+// Spinner — rotating-arc loading indicator. SVG + animate-spin
+// (pure CSS, GPU-accelerated, motion-reduce-safe). Color via
+// currentColor by default (inherits parent text color — works inside
+// any container), or explicit 7-intent color. Optional `withTrack`
+// renders a ghost ring behind the arc (Stripe / Vercel / Linear
+// premium look). `delay` prop suppresses the spinner for the first
+// N ms (Atlassian-style anti-flash for sub-N-ms operations).
+// visibleWhen bridge integration; no access (display only). Refactor:
+// Button + IconButton internal loading state now reuse this Spinner
+// (single source of truth).
+export { Spinner } from './components/Spinner/Spinner.js';
+export type {
+  SpinnerProps,
+  SpinnerSize,
+  SpinnerColor,
+  SpinnerThickness,
+} from './components/Spinner/spinner.types.js';
+export {
+  spinnerVariants,
+  SPINNER_STROKE_WIDTH,
+  SPINNER_TRACK_OPACITY,
+  SPINNER_COLORS,
+} from './components/Spinner/spinner.variants.js';
+
+// Avatar — image / initials / icon visual identity.
+//   • <Avatar>       — single avatar, src + auto-initials from name
+//                      (Mantine-style), shape + radius (Box token
+//                      scale), size enum xs/sm/md/lg/xl, color × tone
+//                      (TS-safe palette access), fallbackIcon escape.
+//   • <AvatarGroup>  — thin horizontal wrapper with negative-margin
+//                      overlap, max + overflow indicator, optional
+//                      ring halo. Size propagates to children.
+// No access / visibleWhen — Avatar is display-only by category.
+// Wrap in <Box> if visibility gating is needed.
+export { Avatar, AvatarGroup } from './components/Avatar/Avatar.js';
+export type {
+  AvatarProps,
+  AvatarGroupProps,
+  AvatarSize,
+  AvatarShape,
+  AvatarColor,
+  AvatarTone,
+} from './components/Avatar/avatar.types.js';
+export {
+  avatarVariants,
+  AVATAR_SOFT_FALLBACK,
+  AVATAR_TONE_FALLBACK,
+} from './components/Avatar/avatar.variants.js';
+
+// Card family — opinionated surface preset over <Box>.
+//   • <Card>           — thin Box alias with card-shaped defaults
+//                        (variant=outlined, rounded=lg, elevation=1,
+//                        no padding). Inherits access + visibleWhen
+//                        from Box (Sprint 4.4 surface alignment).
+//   • <CardContent>    — padded inner section (semantic alias for
+//                        Box with default p=4).
+//   • <CardActionArea> — clickable wrapper with focus ring + hover +
+//                        asChild polymorphism (router Link patterns).
+//                        Carries access + visibleWhen + selected
+//                        (for option-card / filter-card toggle).
+export { Card, CardContent, CardActionArea } from './components/Card/Card.js';
+export type {
+  CardProps,
+  CardContentProps,
+  CardActionAreaProps,
+} from './components/Card/card.types.js';
+
+// Chip — status / filter / tag pill. Promoted from the internal
+// `Table/cells/RenderChip` (Sprint 4.4): the 3 × 7 (variant × color)
+// matrix is now the single source of truth, consumed by both the
+// public <Chip> and (via thin wrapper) the legacy RenderChip.
+// Variant axis: `soft | solid | outline` (Dashforge chip vocabulary —
+// distinct from Button's and Alert's by design, see CHANGELOG).
+// access RBAC integration; selected for filter-pill patterns;
+// onDelete for removable tags.
+export { Chip } from './components/Chip/Chip.js';
+export type { ChipProps } from './components/Chip/chip.types.js';
+export { chipVariants } from './components/Chip/chip.variants.js';
+export type { ChipVariants } from './components/Chip/chip.variants.js';
+
 // F9 foundation: typography + layout primitives. These sit BENEATH
 // every other component (Button's label, TextField's helper text, the
 // surface of an AppShell card) and are what app-level code reaches for
@@ -385,4 +547,4 @@ export type { VariantProps } from 'tailwind-variants';
 /**
  * Package version (synced with `package.json` at publish time).
  */
-export const VERSION = '0.11.0-beta';
+export const VERSION = '1.1.0';

package/vite.config.ts

@@ -1,5 +1,6 @@
 /// <reference types='vitest' />
 import { defineConfig } from 'vite';
+import { configDefaults } from 'vitest/config';
 import react from '@vitejs/plugin-react';
 
 export default defineConfig(() => ({
@@ -16,6 +17,13 @@ export default defineConfig(() => ({
     globals: true,
     environment: 'node',
     include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    // Perf specs assert wall-clock budgets calibrated for a dev machine.
+    // Shared CI runners are slower, so they false-fail there — skip them
+    // when `CI` is set. They still run locally (`nx test @dashforge/tw`).
+    exclude: [
+      ...configDefaults.exclude,
+      ...(process.env.CI ? ['**/*.perf.test.*'] : []),
+    ],
     reporters: ['default'],
     coverage: {
       reportsDirectory: './test-output/vitest/coverage',

package/vitest.config.mts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vitest/config';
+import { defineConfig, configDefaults } from 'vitest/config';
 import react from '@vitejs/plugin-react';
 
 export default defineConfig(() => ({
@@ -13,6 +13,13 @@ export default defineConfig(() => ({
     // `// @vitest-environment jsdom` magic comment at file top.
     environment: 'node',
     include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    // Perf specs assert wall-clock budgets calibrated for a dev machine.
+    // Shared CI runners are slower, so they false-fail there — skip them
+    // when `CI` is set. They still run locally (`nx test @dashforge/tw`).
+    exclude: [
+      ...configDefaults.exclude,
+      ...(process.env.CI ? ['**/*.perf.test.*'] : []),
+    ],
     reporters: ['default'],
     coverage: {
       reportsDirectory: './test-output/vitest/coverage',

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 Dashforge
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.