@dashforge/tw 1.1.0 → 1.2.0

package/src/components/Accordion/Accordion.tsx

@@ -1,97 +0,0 @@
-import * as RadixAccordion from '@radix-ui/react-accordion';
-import { cn } from '../../utils/cn.js';
-import { accordionVariants } from './accordion.variants.js';
-import type {
-  AccordionProps,
-  AccordionItem,
-  AccordionSlotProps,
-} from './accordion.types.js';
-
-/**
- * Dashforge TW `<Accordion>` — collapsible section list.
- *
- * Built on `@radix-ui/react-accordion`:
- *  - APG accordion pattern: `role="region"` on content, header
- *    button with `aria-expanded` and `aria-controls` linked to
- *    the panel.
- *  - Keyboard support: Space / Enter toggle, ArrowDown / ArrowUp
- *    move focus between triggers, Home / End to extremes.
- *  - Two modes:
- *    - `type="single"` — at most one section open at a time;
- *      `collapsible` allows clicking the open section to close it
- *      (default true).
- *    - `type="multiple"` — multiple sections open simultaneously.
- *
- * The trigger renders a chevron that flips 180° via CSS
- * (`data-state=open` selector) — no React state, no JS animation.
- */
-export function Accordion(props: AccordionProps) {
-  const v = accordionVariants();
-  const { items, sx, slotProps } = props;
-
-  const renderItems = (items: AccordionItem[], slotProps?: AccordionSlotProps) =>
-    items.map((item) => (
-      <RadixAccordion.Item
-        key={item.value}
-        value={item.value}
-        disabled={item.disabled}
-        className={cn(v.item(), slotProps?.item?.className)}
-      >
-        <RadixAccordion.Header
-          className={cn(v.header(), slotProps?.header?.className)}
-        >
-          <RadixAccordion.Trigger
-            className={cn(v.trigger(), slotProps?.trigger?.className)}
-          >
-            {item.header}
-            <svg
-              className={cn(v.chevron(), slotProps?.chevron?.className)}
-              width="1em"
-              height="1em"
-              viewBox="0 0 16 16"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              aria-hidden="true"
-            >
-              <path d="M4 6l4 4 4-4" />
-            </svg>
-          </RadixAccordion.Trigger>
-        </RadixAccordion.Header>
-        <RadixAccordion.Content
-          className={cn(v.content(), slotProps?.content?.className)}
-        >
-          <div className="pb-3 pt-0">{item.content}</div>
-        </RadixAccordion.Content>
-      </RadixAccordion.Item>
-    ));
-
-  if (props.type === 'multiple') {
-    return (
-      <RadixAccordion.Root
-        type="multiple"
-        value={props.value}
-        defaultValue={props.defaultValue}
-        onValueChange={props.onValueChange}
-        className={cn(v.root(), sx, slotProps?.root?.className)}
-      >
-        {renderItems(items, slotProps)}
-      </RadixAccordion.Root>
-    );
-  }
-
-  return (
-    <RadixAccordion.Root
-      type="single"
-      collapsible={props.collapsible ?? true}
-      value={props.value}
-      defaultValue={props.defaultValue}
-      onValueChange={props.onValueChange}
-      className={cn(v.root(), sx, slotProps?.root?.className)}
-    >
-      {renderItems(items, slotProps)}
-    </RadixAccordion.Root>
-  );
-}

package/src/components/Accordion/accordion.types.ts

@@ -1,66 +0,0 @@
-import type { ReactNode } from 'react';
-
-export interface AccordionSlotProps {
-  root?: { className?: string };
-  item?: { className?: string };
-  header?: { className?: string };
-  trigger?: { className?: string };
-  content?: { className?: string };
-  chevron?: { className?: string };
-}
-
-/**
- * Single accordion section — paired `{ value, header, content }`.
- * The `value` is the canonical id (used in `value` / `defaultValue`
- * to control which sections are expanded).
- */
-export interface AccordionItem {
-  value: string;
-  /** Trigger label (clickable to expand / collapse). */
-  header: ReactNode;
-  /** Section body, revealed when this item is expanded. */
-  content: ReactNode;
-  /** Per-item disabled flag. */
-  disabled?: boolean;
-}
-
-interface AccordionBaseProps {
-  items: AccordionItem[];
-  /** Root className shortcut. */
-  sx?: string;
-  /** Per-slot overrides. */
-  slotProps?: AccordionSlotProps;
-}
-
-/**
- * Single-mode props — at most one section open at a time.
- * `collapsible: true` (default) lets the user close the open
- * section by clicking it again.
- */
-export interface AccordionSingleProps extends AccordionBaseProps {
-  type?: 'single';
-  value?: string;
-  defaultValue?: string;
-  onValueChange?: (value: string) => void;
-  /** @default true */
-  collapsible?: boolean;
-}
-
-/**
- * Multiple-mode props — any number of sections open simultaneously.
- */
-export interface AccordionMultipleProps extends AccordionBaseProps {
-  type: 'multiple';
-  value?: string[];
-  defaultValue?: string[];
-  onValueChange?: (value: string[]) => void;
-}
-
-/**
- * Props for `<Accordion>`.
- *
- * Built on `@radix-ui/react-accordion`. Discriminated by `type`:
- *  - `type="single"` (default) — `value` is `string`.
- *  - `type="multiple"` — `value` is `string[]`.
- */
-export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;

package/src/components/Accordion/accordion.variants.ts

@@ -1,32 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-export const accordionVariants = tv({
-  slots: {
-    root: 'w-full',
-    // Neutral palette auto-inverts via the dashforgePreset() CSS-var
-    // swap — no `dark:` variant needed (would double-invert).
-    item: 'border-b border-neutral-200',
-    header: 'flex',
-    trigger: [
-      'flex flex-1 items-center justify-between py-3 text-left',
-      'text-sm font-medium text-neutral-900',
-      'transition-all hover:underline',
-      'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:rounded',
-      '[&[data-state=open]>svg]:rotate-180',
-      'disabled:opacity-50 disabled:pointer-events-none',
-      'motion-reduce:transition-none',
-    ],
-    content: [
-      'overflow-hidden text-sm text-neutral-700',
-      'data-[state=open]:animate-accordion-down',
-      'data-[state=closed]:animate-accordion-up',
-      'motion-reduce:animate-none',
-    ],
-    chevron: [
-      'h-4 w-4 shrink-0 text-neutral-500 transition-transform duration-200',
-      'motion-reduce:transition-none motion-reduce:duration-0',
-    ],
-  },
-});
-
-export type AccordionVariants = VariantProps<typeof accordionVariants>;

package/src/components/Alert/Alert.test.tsx

@@ -1,302 +0,0 @@
-// @vitest-environment jsdom
-import * as React from 'react';
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { render, screen, fireEvent, cleanup } from '@testing-library/react';
-import { Alert, AlertTitle } from './Alert.js';
-
-void React;
-afterEach(() => cleanup());
-
-/**
- * `<Alert>` unit tests. Covers:
- *   - severity × variant matrix (12 combinations) — token classes
- *     actually emitted, role auto-derived, no `dark:` leaks
- *   - icon control (default per severity, custom override, false → none)
- *   - close button (onClose triggers, custom closeText label)
- *   - action slot (replaces close button when both set)
- *   - AlertTitle sub-component rendering
- *   - sx / className / slotProps overrides
- *   - bridge integration: visibleWhen + access return null when false
- *
- * NB: visibleWhen + access deep integration is covered by the
- * underlying `useEngineVisibility` and `useAccessState` test suites;
- * here we just verify Alert wires them correctly (return null when
- * gated).
- */
-
-describe('<Alert>', () => {
-  describe('severity × variant matrix', () => {
-    const SEVERITIES = ['info', 'success', 'warning', 'danger'] as const;
-    const VARIANTS = ['standard', 'filled', 'outlined'] as const;
-
-    SEVERITIES.forEach((severity) => {
-      VARIANTS.forEach((variant) => {
-        it(`renders ${variant}/${severity} with token-driven utilities`, () => {
-          const { container } = render(
-            <Alert severity={severity} variant={variant}>
-              Body content
-            </Alert>
-          );
-          const root = container.firstChild as HTMLElement;
-          expect(root).toBeTruthy();
-          // Surface and border carry the severity name
-          const className = root.className;
-          expect(className).toContain(severity);
-          // No dark: variants — preset handles inversion via CSS vars
-          expect(className).not.toMatch(/\bdark:/);
-          // No hardcoded hex
-          expect(className).not.toMatch(/#[0-9a-fA-F]{3,8}/);
-        });
-      });
-    });
-
-    it('defaults to standard variant when omitted', () => {
-      const { container } = render(<Alert severity="info">x</Alert>);
-      const root = container.firstChild as HTMLElement;
-      // Standard variant emits bg-info-50 + text-info-900
-      expect(root.className).toContain('bg-info-50');
-      expect(root.className).toContain('text-info-900');
-    });
-  });
-
-  describe('ARIA role auto-derivation', () => {
-    it('uses role="alert" for warning', () => {
-      render(<Alert severity="warning">x</Alert>);
-      expect(screen.getByRole('alert')).toBeTruthy();
-    });
-
-    it('uses role="alert" for danger', () => {
-      render(<Alert severity="danger">x</Alert>);
-      expect(screen.getByRole('alert')).toBeTruthy();
-    });
-
-    it('uses role="status" for info', () => {
-      render(<Alert severity="info">x</Alert>);
-      expect(screen.getByRole('status')).toBeTruthy();
-    });
-
-    it('uses role="status" for success', () => {
-      render(<Alert severity="success">x</Alert>);
-      expect(screen.getByRole('status')).toBeTruthy();
-    });
-
-    it('allows explicit role override', () => {
-      render(
-        <Alert severity="danger" role="status">
-          downgraded to polite
-        </Alert>
-      );
-      // No "alert" role, only the overridden "status"
-      expect(screen.queryByRole('alert')).toBeFalsy();
-      expect(screen.getByRole('status')).toBeTruthy();
-    });
-  });
-
-  describe('icon prop — tristate behaviour', () => {
-    it('renders a default icon SVG when icon is omitted', () => {
-      const { container } = render(<Alert severity="warning">x</Alert>);
-      const svg = container.querySelector('svg');
-      expect(svg).toBeTruthy();
-      expect(svg?.getAttribute('aria-hidden')).toBe('true');
-    });
-
-    it('renders the consumer-provided icon when icon is a ReactNode', () => {
-      render(
-        <Alert severity="info" icon={<span data-testid="custom-icon">ᐅ</span>}>
-          x
-        </Alert>
-      );
-      expect(screen.getByTestId('custom-icon')).toBeTruthy();
-    });
-
-    it('renders no icon container when icon is false', () => {
-      const { container } = render(
-        <Alert severity="info" icon={false}>
-          x
-        </Alert>
-      );
-      // No SVG anywhere (the close button SVG only renders with onClose)
-      expect(container.querySelector('svg')).toBeNull();
-    });
-  });
-
-  describe('close button (onClose)', () => {
-    it('renders no close button when onClose is undefined', () => {
-      render(<Alert severity="info">x</Alert>);
-      expect(screen.queryByRole('button', { name: /close/i })).toBeNull();
-    });
-
-    it('renders a close button labelled "Close" by default when onClose is defined', () => {
-      const onClose = vi.fn();
-      render(
-        <Alert severity="warning" onClose={onClose}>
-          x
-        </Alert>
-      );
-      const btn = screen.getByRole('button', { name: /^close$/i });
-      expect(btn).toBeTruthy();
-    });
-
-    it('fires onClose on click', () => {
-      const onClose = vi.fn();
-      render(
-        <Alert severity="warning" onClose={onClose}>
-          x
-        </Alert>
-      );
-      fireEvent.click(screen.getByRole('button', { name: /close/i }));
-      expect(onClose).toHaveBeenCalledTimes(1);
-    });
-
-    it('respects custom closeText for the aria-label', () => {
-      const onClose = vi.fn();
-      render(
-        <Alert severity="warning" onClose={onClose} closeText="Dismiss alert">
-          x
-        </Alert>
-      );
-      expect(screen.getByRole('button', { name: /dismiss alert/i })).toBeTruthy();
-    });
-  });
-
-  describe('action slot', () => {
-    it('renders the action node when provided', () => {
-      render(
-        <Alert
-          severity="warning"
-          action={<button data-testid="renew-cta">Renew</button>}
-        >
-          Trial expires
-        </Alert>
-      );
-      expect(screen.getByTestId('renew-cta')).toBeTruthy();
-    });
-
-    it('action wins over onClose when both are provided (matches MUI)', () => {
-      const onClose = vi.fn();
-      render(
-        <Alert
-          severity="warning"
-          onClose={onClose}
-          action={<button data-testid="custom-action">Custom</button>}
-        >
-          x
-        </Alert>
-      );
-      // Custom action renders
-      expect(screen.getByTestId('custom-action')).toBeTruthy();
-      // No auto close button rendered alongside
-      expect(screen.queryByRole('button', { name: /^close$/i })).toBeNull();
-    });
-  });
-
-  describe('<AlertTitle>', () => {
-    it('renders title text', () => {
-      render(
-        <Alert severity="info">
-          <AlertTitle>Heads up</AlertTitle>
-          Body line below.
-        </Alert>
-      );
-      expect(screen.getByText('Heads up')).toBeTruthy();
-      expect(screen.getByText(/Body line below/i)).toBeTruthy();
-    });
-
-    it('AlertTitle accepts className override', () => {
-      const { container } = render(
-        <AlertTitle className="custom-title-class">Title</AlertTitle>
-      );
-      const node = container.firstChild as HTMLElement;
-      expect(node.className).toContain('custom-title-class');
-    });
-  });
-
-  describe('overrides — sx / className / slotProps', () => {
-    it('applies sx to the root', () => {
-      const { container } = render(
-        <Alert severity="info" sx="mt-8">
-          x
-        </Alert>
-      );
-      const root = container.firstChild as HTMLElement;
-      expect(root.className).toContain('mt-8');
-    });
-
-    it('appends className to the root', () => {
-      const { container } = render(
-        <Alert severity="info" className="my-custom-class">
-          x
-        </Alert>
-      );
-      const root = container.firstChild as HTMLElement;
-      expect(root.className).toContain('my-custom-class');
-    });
-
-    it('applies slotProps.root.className to the root', () => {
-      const { container } = render(
-        <Alert
-          severity="info"
-          slotProps={{ root: { className: 'slot-root-class' } }}
-        >
-          x
-        </Alert>
-      );
-      const root = container.firstChild as HTMLElement;
-      expect(root.className).toContain('slot-root-class');
-    });
-
-    it('applies slotProps.icon.className to the icon wrapper', () => {
-      const { container } = render(
-        <Alert
-          severity="warning"
-          slotProps={{ icon: { className: 'icon-custom' } }}
-        >
-          x
-        </Alert>
-      );
-      const iconSpan = container.querySelector('.icon-custom');
-      expect(iconSpan).toBeTruthy();
-    });
-
-    it('applies slotProps.closeButton.className to the close button', () => {
-      const onClose = vi.fn();
-      render(
-        <Alert
-          severity="warning"
-          onClose={onClose}
-          slotProps={{ closeButton: { className: 'close-custom' } }}
-        >
-          x
-        </Alert>
-      );
-      const btn = screen.getByRole('button', { name: /close/i });
-      expect(btn.className).toContain('close-custom');
-    });
-  });
-
-  describe('bridge integration — visibleWhen', () => {
-    it('renders when visibleWhen returns true (no DashForm context)', () => {
-      const { container } = render(
-        <Alert severity="info" visibleWhen={() => true}>
-          shown
-        </Alert>
-      );
-      expect(container.firstChild).toBeTruthy();
-      expect(screen.getByText('shown')).toBeTruthy();
-    });
-
-    it('returns null when visibleWhen returns false', () => {
-      const { container } = render(
-        <Alert severity="info" visibleWhen={() => false}>
-          hidden
-        </Alert>
-      );
-      expect(container.firstChild).toBeNull();
-    });
-
-    it('renders normally when visibleWhen is omitted', () => {
-      const { container } = render(<Alert severity="info">always</Alert>);
-      expect(container.firstChild).toBeTruthy();
-    });
-  });
-});

package/src/components/Alert/Alert.tsx

@@ -1,186 +0,0 @@
-import { useContext } from 'react';
-import { DashFormContext, useEngineVisibility } from '@dashforge/ui-core';
-import { cn } from '../../utils/cn.js';
-import { useAccessState } from '../../hooks/useAccessState.js';
-import {
-  getSeverityClasses,
-  getSeverityRole,
-} from '../_shared/severity/severityVariants.js';
-import { getDefaultSeverityIcon } from '../_shared/severity/severityIcons.js';
-import { alertVariants } from './alert.variants.js';
-import type { AlertProps, AlertTitleProps } from './alert.types.js';
-
-/**
- * `<AlertTitle>` — optional title block, rendered as the first child
- * of `<Alert>`. Pattern mirrors MUI exactly (sub-component, not a
- * prop), so the JSX shape ports 1:1 from `@mui/material`.
- *
- * @example
- * <Alert severity="warning">
- *   <AlertTitle>Subscription expires soon</AlertTitle>
- *   Renew before 2026-06-20 to keep access.
- * </Alert>
- */
-export function AlertTitle({ children, className }: AlertTitleProps) {
-  const { titleSlot } = alertVariants();
-  return (
-    <div className={cn(titleSlot(), className)}>
-      {children}
-    </div>
-  );
-}
-
-/**
- * `<Alert>` — inline persistent status surface.
- *
- * **API**: full MUI Alert parity (`severity`, `variant`, `icon`,
- * `onClose`, `action`, `role`, `<AlertTitle>` sub-component). One
- * deliberate divergence: `severity="danger"` instead of MUI's
- * `severity="error"` — aligned to the `danger.*` token palette.
- *
- * **Bridge integration** (Dashforge extras):
- *   - `visibleWhen` — engine-reactive predicate (re-evaluated on
- *     every engine state change when mounted inside a `<DashForm>`)
- *   - `access` — RBAC gating via `@dashforge/rbac`
- *
- * **Token-driven**: every color class flows from `dashforgePreset()`
- * via CSS variables. No hardcoded hex, no `dark:` variants. The
- * 3×4 color matrix lives in `_shared/severity/severityVariants.ts`
- * and is shared with the refactored `<Snackbar>` (and future Banner).
- *
- * **A11y**: `role="alert"` for assertive severities (warning, danger)
- * and `role="status"` for polite ones (info, success). Override via
- * the `role` prop. The icon is `aria-hidden` — the message text is
- * the semantic carrier.
- *
- * @example
- * // Default — soft tinted surface, default icon
- * <Alert severity="info">New feature: export to CSV is now in beta.</Alert>
- *
- * // With title (sub-component) + close button
- * <Alert severity="warning" onClose={dismiss}>
- *   <AlertTitle>Subscription expires soon</AlertTitle>
- *   Your Pro plan ends in 3 days.
- * </Alert>
- *
- * // Custom icon
- * import { Bell } from 'lucide-react';
- * <Alert severity="info" icon={<Bell size={20} />}>3 new notifications</Alert>
- *
- * // No icon — colored surface alone carries the severity
- * <Alert severity="success" icon={false}>Saved 2 minutes ago.</Alert>
- *
- * // Custom action — CTA replaces the auto-close button
- * <Alert severity="warning" action={<button onClick={renew}>Renew</button>}>
- *   Trial expires in 3 days.
- * </Alert>
- *
- * // Filled variant — for high-priority callouts
- * <Alert severity="danger" variant="filled">
- *   Couldn't save — 3 fields below contain validation errors.
- * </Alert>
- */
-export function Alert({
-  severity,
-  variant = 'standard',
-  children,
-  icon: iconProp,
-  onClose,
-  closeText = 'Close',
-  action,
-  role: roleProp,
-  visibleWhen,
-  access,
-  sx,
-  className,
-  slotProps,
-}: AlertProps) {
-  // Bridge — both hooks safely return defaults outside a DashForm /
-  // RbacProvider, matching the TextField pattern.
-  const bridge = useContext(DashFormContext);
-  const isVisible = useEngineVisibility(bridge?.engine, visibleWhen);
-  const accessState = useAccessState(access);
-
-  if (!isVisible || !accessState.visible) return null;
-
-  const v = alertVariants();
-  const severityClasses = getSeverityClasses(variant, severity);
-  const role = roleProp ?? getSeverityRole(severity);
-
-  // Icon resolution:
-  // - false → no icon
-  // - undefined → default per severity (lib's inline SVG)
-  // - ReactNode → consumer's custom icon
-  const renderedIcon =
-    iconProp === false
-      ? null
-      : iconProp !== undefined
-        ? iconProp
-        : getDefaultSeverityIcon(severity);
-
-  return (
-    <div
-      role={role}
-      className={cn(
-        v.root(),
-        severityClasses.surface,
-        severityClasses.border,
-        sx,
-        className,
-        slotProps?.root?.className
-      )}
-      {...slotProps?.root}
-    >
-      {renderedIcon !== null && (
-        <span
-          className={cn(
-            v.icon(),
-            severityClasses.icon,
-            slotProps?.icon?.className
-          )}
-          {...slotProps?.icon}
-        >
-          {renderedIcon}
-        </span>
-      )}
-
-      <div
-        className={cn(v.content(), slotProps?.content?.className)}
-        {...slotProps?.content}
-      >
-        {children}
-      </div>
-
-      {action ? (
-        <div
-          className={cn(v.action(), slotProps?.action?.className)}
-          {...slotProps?.action}
-        >
-          {action}
-        </div>
-      ) : onClose ? (
-        <button
-          type="button"
-          aria-label={closeText}
-          onClick={onClose}
-          className={cn(v.closeButton(), slotProps?.closeButton?.className)}
-          {...slotProps?.closeButton}
-        >
-          <svg
-            width="1em"
-            height="1em"
-            viewBox="0 0 20 20"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth={1.5}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            aria-hidden="true"
-          >
-            <path d="m6 6 8 8M14 6l-8 8" />
-          </svg>
-        </button>
-      ) : null}
-    </div>
-  );
-}