@dashforge/tw 1.1.0 → 1.2.0

package/src/components/Button/button.types.ts

@@ -1,110 +0,0 @@
-import type { ButtonHTMLAttributes } from 'react';
-import type { Engine } from '@dashforge/ui-core';
-import type { AccessRequirement } from '@dashforge/rbac';
-import type { ButtonVariants } from './button.variants.js';
-
-/**
- * Props for the Dashforge TW `<Button>` component.
- *
- * Extends the native `<button>` attributes (so `onClick`, `type`,
- * `aria-*`, `data-*` etc. all flow through), narrowed in two places:
- *
- *   - `disabled` is kept (combines with RBAC + loading via OR)
- *   - `className` is omitted — use `sx` instead. This keeps the
- *     override path **single and explicit**: `sx` is the escape hatch
- *     for adding utility classes, and `tailwind-merge` (via `cn()`)
- *     guarantees it wins over any conflicting variant class.
- *
- * Plus the variant axes from `tailwind-variants` and Dashforge-specific
- * additions:
- *
- *   - `access` — RBAC requirement (hide / disable / readonly)
- *   - `asChild` — Radix Slot polymorphism: when `true`, renders the
- *     immediate child element with the Button's class merged in, so
- *     `<Button asChild><a href="/x">Go</a></Button>` produces a styled
- *     `<a>` with no extra wrapper DOM
- */
-export interface ButtonProps
-  // `color` is omitted from the native `<button>` attributes because
-  // HTML's legacy `color` attribute (string) collides with our variant
-  // axis (`'primary' | 'secondary' | …`). The Picked variant version
-  // is the canonical one.
-  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'color'>,
-    Pick<ButtonVariants, 'variant' | 'color' | 'size' | 'fullWidth' | 'loading'> {
-  /**
-   * RBAC access control requirement.
-   *
-   * Controls button visibility and interaction based on user
-   * permissions:
-   *   - `onUnauthorized: 'hide'`     → button does not render
-   *   - `onUnauthorized: 'disable'`  → button renders disabled
-   *   - `onUnauthorized: 'readonly'` → button renders disabled
-   *     (buttons do not support true readonly semantics; disabled is
-   *     used as fallback)
-   *
-   * Combines with `disabled` and `loading` props via OR logic.
-   */
-  access?: AccessRequirement;
-
-  /**
-   * Reactive visibility predicate. Re-evaluated on every engine state
-   * change when the button is mounted inside a `<DashForm>`; outside
-   * a form, evaluated as a plain predicate (the consumer captures
-   * any external state in the closure).
-   *
-   * When the predicate returns `false`, the component renders `null`.
-   *
-   * **Added in 1.1.0 (Sprint 4.4 alignment)** — extends the
-   * engine-reactive visibility pattern previously available only on
-   * form fields + `<Alert>` to every interactive component in the
-   * Dashforge TW catalog (Button, IconButton, Chip, …).
-   *
-   * Note: `visibleWhen` is for **state-driven** hide. For
-   * **permission-driven** hide, use `access` with
-   * `onUnauthorized: 'hide'` — it's the semantically correct path
-   * and provides better error messages in RBAC dev tools.
-   *
-   * @example
-   * ```tsx
-   * // Inside a DashForm — reactive on engine state
-   * <Button
-   *   visibleWhen={(engine) =>
-   *     engine.getNode('plan')?.value === 'premium'
-   *   }
-   * >
-   *   Upgrade extras
-   * </Button>
-   *
-   * // Outside a form — closure over external React state
-   * <Button visibleWhen={() => itemCount > 0}>Bulk delete</Button>
-   * ```
-   */
-  visibleWhen?: (engine: Engine) => boolean;
-
-  /**
-   * When `true`, the immediate child element is rendered with the
-   * Button's classes merged in (via `@radix-ui/react-slot`). The
-   * Button DOM element is not emitted.
-   *
-   * Common pattern: render a router `Link` with Button styling.
-   *
-   * @example
-   * ```tsx
-   * <Button asChild variant="solid">
-   *   <Link to="/dashboard">Dashboard</Link>
-   * </Button>
-   * ```
-   */
-  asChild?: boolean;
-
-  /**
-   * Tailwind utility classes appended **after** the variant classes,
-   * so they win on any conflict via `tailwind-merge`.
-   *
-   * @example
-   * ```tsx
-   * <Button sx="md:w-1/2 shadow-xl">Save</Button>
-   * ```
-   */
-  sx?: string;
-}

package/src/components/Button/button.variants.ts

@@ -1,159 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-/**
- * Tailwind-variants recipe for `<Button>`.
- *
- * Three independent axes plus two booleans:
- *   - `variant`: visual treatment (solid / outline / ghost / link)
- *   - `color`:   semantic intent role (primary / secondary / success /
- *                warning / danger)
- *   - `size`:    sm / md / lg
- *   - `fullWidth`: stretches to container width
- *   - `loading`:   visually + functionally disabled, used together with
- *                  an inline spinner rendered by the component
- *
- * Color × variant combinations are expressed via `compoundVariants` so
- * each pair owns its bg / text / border / hover / focus quartet without
- * a `dark:` variant explosion. Dark mode swap is delegated entirely to
- * the runtime CSS-vars from `@dashforge/tw-theme` — the same class
- * resolves to a different value when `data-dash-tw-theme="dark"` flips.
- *
- * Token references:
- *   - Surface bg / border / text   →  `*-primary-*`, `*-danger-*`, etc.
- *                                     (resolved via `dashforgePreset()`)
- *   - Hover / focus / active states→  one tone deeper on the same scale
- *                                     (`primary-600` from `primary-500`)
- *   - Disabled                     →  opacity drop + no pointer-events
- */
-export const buttonVariants = tv({
-  base: [
-    'inline-flex items-center justify-center gap-2',
-    'font-medium',
-    'rounded-md',
-    'select-none whitespace-nowrap',
-    'transition-colors',
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
-    'disabled:opacity-50 disabled:pointer-events-none',
-  ],
-  variants: {
-    variant: {
-      solid: 'border border-transparent text-white',
-      outline: 'bg-transparent border',
-      ghost: 'bg-transparent border border-transparent',
-      link: 'bg-transparent border-0 underline-offset-4 hover:underline px-0',
-    },
-    color: {
-      primary: '',
-      secondary: '',
-      success: '',
-      warning: '',
-      danger: '',
-    },
-    size: {
-      sm: 'h-8 px-3 text-sm',
-      md: 'h-10 px-4 text-base',
-      lg: 'h-12 px-6 text-lg',
-    },
-    fullWidth: {
-      true: 'w-full',
-    },
-    loading: {
-      true: 'cursor-wait',
-    },
-  },
-  compoundVariants: [
-    // ───── solid × color ─────
-    {
-      variant: 'solid',
-      color: 'primary',
-      class: 'bg-primary-500 hover:bg-primary-600 active:bg-primary-700 focus-visible:ring-primary-500',
-    },
-    {
-      variant: 'solid',
-      color: 'secondary',
-      class: 'bg-secondary-500 hover:bg-secondary-600 active:bg-secondary-700 focus-visible:ring-secondary-500',
-    },
-    {
-      variant: 'solid',
-      color: 'success',
-      class: 'bg-success-500 hover:bg-success-600 active:bg-success-700 focus-visible:ring-success-500',
-    },
-    {
-      variant: 'solid',
-      color: 'warning',
-      class: 'bg-warning-500 hover:bg-warning-600 active:bg-warning-700 focus-visible:ring-warning-500',
-    },
-    {
-      variant: 'solid',
-      color: 'danger',
-      class: 'bg-danger-500 hover:bg-danger-600 active:bg-danger-700 focus-visible:ring-danger-500',
-    },
-    // ───── outline × color ─────
-    {
-      variant: 'outline',
-      color: 'primary',
-      class: 'border-primary-500 text-primary-700 hover:bg-primary-50 focus-visible:ring-primary-500',
-    },
-    {
-      variant: 'outline',
-      color: 'secondary',
-      class: 'border-secondary-500 text-secondary-700 hover:bg-secondary-50 focus-visible:ring-secondary-500',
-    },
-    {
-      variant: 'outline',
-      color: 'success',
-      class: 'border-success-500 text-success-700 hover:bg-success-50 focus-visible:ring-success-500',
-    },
-    {
-      variant: 'outline',
-      color: 'warning',
-      class: 'border-warning-500 text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500',
-    },
-    {
-      variant: 'outline',
-      color: 'danger',
-      class: 'border-danger-500 text-danger-700 hover:bg-danger-50 focus-visible:ring-danger-500',
-    },
-    // ───── ghost × color ─────
-    {
-      variant: 'ghost',
-      color: 'primary',
-      class: 'text-primary-700 hover:bg-primary-50 focus-visible:ring-primary-500',
-    },
-    {
-      variant: 'ghost',
-      color: 'secondary',
-      class: 'text-secondary-700 hover:bg-secondary-50 focus-visible:ring-secondary-500',
-    },
-    {
-      variant: 'ghost',
-      color: 'success',
-      class: 'text-success-700 hover:bg-success-50 focus-visible:ring-success-500',
-    },
-    {
-      variant: 'ghost',
-      color: 'warning',
-      class: 'text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500',
-    },
-    {
-      variant: 'ghost',
-      color: 'danger',
-      class: 'text-danger-700 hover:bg-danger-50 focus-visible:ring-danger-500',
-    },
-    // ───── link × color ─────
-    { variant: 'link', color: 'primary', class: 'text-primary-700 hover:text-primary-800' },
-    { variant: 'link', color: 'secondary', class: 'text-secondary-700 hover:text-secondary-800' },
-    { variant: 'link', color: 'success', class: 'text-success-700 hover:text-success-800' },
-    { variant: 'link', color: 'warning', class: 'text-warning-700 hover:text-warning-800' },
-    { variant: 'link', color: 'danger', class: 'text-danger-700 hover:text-danger-800' },
-  ],
-  defaultVariants: {
-    variant: 'solid',
-    color: 'primary',
-    size: 'md',
-    fullWidth: false,
-    loading: false,
-  },
-});
-
-export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/src/components/Calendar/Calendar.test.tsx

@@ -1,75 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-
-import { Calendar } from './Calendar.js';
-
-describe('Calendar', () => {
-  it('renders a labelled month grid', () => {
-    render(<Calendar today="2026-05-20" />);
-    expect(screen.queryByRole('grid', { name: 'Calendar' })).not.toBeNull();
-    expect(screen.queryByText('May 2026')).not.toBeNull();
-    expect(screen.getAllByRole('columnheader')).toHaveLength(7);
-  });
-
-  it('renders a fixed 42-cell grid', () => {
-    render(<Calendar today="2026-05-20" />);
-    expect(screen.getAllByRole('gridcell')).toHaveLength(42);
-  });
-
-  it('fires onChange when a day is clicked', () => {
-    const onChange = vi.fn();
-    render(<Calendar today="2026-05-20" onChange={onChange} />);
-    fireEvent.click(screen.getByRole('button', { name: /May 15, 2026/ }));
-    expect(onChange).toHaveBeenCalledWith('2026-05-15');
-  });
-
-  it('marks the controlled selected day as pressed', () => {
-    render(<Calendar today="2026-05-20" value="2026-05-10" />);
-    expect(
-      screen
-        .getByRole('button', { name: /May 10, 2026/ })
-        .getAttribute('aria-pressed'),
-    ).toBe('true');
-  });
-
-  it('navigates to the next and previous month', () => {
-    render(<Calendar today="2026-05-20" />);
-    fireEvent.click(screen.getByRole('button', { name: 'Next month' }));
-    expect(screen.queryByText('June 2026')).not.toBeNull();
-    fireEvent.click(screen.getByRole('button', { name: 'Previous month' }));
-    expect(screen.queryByText('May 2026')).not.toBeNull();
-  });
-
-  it('moves roving focus with the arrow keys', () => {
-    render(<Calendar today="2026-05-20" />);
-    const grid = screen.getByRole('grid');
-    expect(
-      screen
-        .getByRole('button', { name: /May 20, 2026/ })
-        .getAttribute('tabindex'),
-    ).toBe('0');
-    fireEvent.keyDown(grid, { key: 'ArrowRight' });
-    expect(
-      screen
-        .getByRole('button', { name: /May 21, 2026/ })
-        .getAttribute('tabindex'),
-    ).toBe('0');
-    expect(
-      screen
-        .getByRole('button', { name: /May 20, 2026/ })
-        .getAttribute('tabindex'),
-    ).toBe('-1');
-  });
-
-  it('does not select a disabled date', () => {
-    const onChange = vi.fn();
-    render(
-      <Calendar today="2026-05-20" minDate="2026-05-15" onChange={onChange} />,
-    );
-    const blocked = screen.getByRole('button', { name: /May 10, 2026/ });
-    expect(blocked.getAttribute('aria-disabled')).toBe('true');
-    fireEvent.click(blocked);
-    expect(onChange).not.toHaveBeenCalled();
-  });
-});

package/src/components/Calendar/Calendar.tsx

@@ -1,264 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import type { KeyboardEvent } from 'react';
-import {
-  formatLongDate,
-  resolveCalendarKey,
-  useCalendar,
-} from '@dashforge/calendar-core';
-import type { ISODate } from '@dashforge/calendar-core';
-import { cn } from '../../utils/cn.js';
-import { calendarDayVariants, calendarVariants } from './calendar.variants.js';
-import type { CalendarProps } from './calendar.types.js';
-
-// Inline 16×16 stroke chevrons — no icon dependency (tw convention).
-function ChevronLeftIcon() {
-  return (
-    <svg
-      width="1em"
-      height="1em"
-      viewBox="0 0 16 16"
-      fill="none"
-      aria-hidden="true"
-    >
-      <path
-        d="M10 4 6 8l4 4"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-function ChevronRightIcon() {
-  return (
-    <svg
-      width="1em"
-      height="1em"
-      viewBox="0 0 16 16"
-      fill="none"
-      aria-hidden="true"
-    >
-      <path
-        d="m6 4 4 4-4 4"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-/**
- * `<Calendar>` — a standalone, inline month-grid date picker.
- *
- * The Tailwind presentation layer over the headless `useCalendar` engine
- * from `@dashforge/calendar-core` (the same engine the MUI `@dashforge/ui`
- * calendar consumes — only the skin differs). Implements the WCAG grid
- * pattern with roving tab-index focus.
- *
- * It is a primitive: no form-bridge / RBAC integration — use `<DatePicker>`
- * for a form-bound date field.
- */
-export function Calendar(props: CalendarProps) {
-  const {
-    value,
-    defaultValue,
-    onChange,
-    month,
-    year,
-    defaultMonth,
-    defaultYear,
-    onMonthChange,
-    minDate,
-    maxDate,
-    disabledDates,
-    isDateDisabled,
-    weekStartDay,
-    locale,
-    today,
-    disabled = false,
-    autoFocus = false,
-    sx,
-    slotProps,
-    testId,
-    'aria-label': ariaLabel = 'Calendar',
-  } = props;
-
-  const isValueControlled = value !== undefined;
-  const [internalValue, setInternalValue] = useState<ISODate | null>(
-    defaultValue ?? null,
-  );
-  const selectedValue: ISODate | null = isValueControlled
-    ? value
-    : internalValue;
-
-  const handleSelect = useCallback(
-    (iso: ISODate) => {
-      if (!isValueControlled) {
-        setInternalValue(iso);
-      }
-      onChange?.(iso);
-    },
-    [isValueControlled, onChange],
-  );
-
-  const calendar = useCalendar({
-    selected: selectedValue,
-    month,
-    year,
-    defaultMonth,
-    defaultYear,
-    onMonthChange,
-    minDate,
-    maxDate,
-    disabledDates,
-    isDateDisabled,
-    weekStartDay,
-    locale,
-    today,
-    onSelect: handleSelect,
-  });
-
-  // Roving focus: the active day cell holds DOM focus; it is moved only
-  // after a keyboard interaction (or on mount when `autoFocus`). `focus`
-  // uses `preventScroll` so opening the calendar inside a popup never
-  // scroll-jumps the page before the popup is positioned.
-  const focusedCellRef = useRef<HTMLButtonElement | null>(null);
-  const shouldFocusRef = useRef(autoFocus);
-
-  useEffect(() => {
-    if (shouldFocusRef.current && focusedCellRef.current) {
-      focusedCellRef.current.focus({ preventScroll: true });
-      shouldFocusRef.current = false;
-    }
-  }, [calendar.focusedDate]);
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
-      if (disabled) {
-        return;
-      }
-      const action = resolveCalendarKey(event.key);
-      if (action === null) {
-        return;
-      }
-      event.preventDefault();
-      shouldFocusRef.current = true;
-      switch (action) {
-        case 'select':
-          calendar.selectDate(calendar.focusedDate);
-          break;
-        case 'monthForward':
-          calendar.goToNextMonth();
-          break;
-        case 'monthBackward':
-          calendar.goToPreviousMonth();
-          break;
-        default:
-          calendar.navigate(action);
-      }
-    },
-    [disabled, calendar],
-  );
-
-  const resolvedLocale = locale ?? 'en-US';
-  const v = calendarVariants({ disabled });
-
-  return (
-    <div
-      data-testid={testId}
-      className={cn(v.root(), sx, slotProps?.root?.className)}
-    >
-      {/* Header: month navigation + label */}
-      <div className={cn(v.header(), slotProps?.header?.className)}>
-        <button
-          type="button"
-          className={v.navButton()}
-          disabled={disabled}
-          aria-label="Previous month"
-          onClick={() => {
-            calendar.goToPreviousMonth();
-          }}
-        >
-          <ChevronLeftIcon />
-        </button>
-        <span aria-live="polite" className={v.monthLabel()}>
-          {calendar.monthLabel}
-        </span>
-        <button
-          type="button"
-          className={v.navButton()}
-          disabled={disabled}
-          aria-label="Next month"
-          onClick={() => {
-            calendar.goToNextMonth();
-          }}
-        >
-          <ChevronRightIcon />
-        </button>
-      </div>
-
-      {/* Grid */}
-      <div
-        role="grid"
-        aria-label={ariaLabel}
-        onKeyDown={handleKeyDown}
-        className={cn(v.grid(), slotProps?.grid?.className)}
-      >
-        <div role="row" className={v.weekdayRow()}>
-          {calendar.weekdayNames.map((dayName, index) => (
-            <span
-              key={`weekday-${String(index)}`}
-              role="columnheader"
-              className={v.weekday()}
-            >
-              {dayName}
-            </span>
-          ))}
-        </div>
-
-        {calendar.weeks.map((week) => (
-          <div key={week.key} role="row" className={v.weekRow()}>
-            {week.days.map((day) => {
-              const isActiveCell = day.iso === calendar.focusedDate;
-              return (
-                <span key={day.iso} role="gridcell" className="flex">
-                  <button
-                    type="button"
-                    ref={isActiveCell ? focusedCellRef : null}
-                    tabIndex={isActiveCell ? 0 : -1}
-                    disabled={disabled}
-                    aria-label={formatLongDate(
-                      { year: day.year, month: day.month, day: day.day },
-                      resolvedLocale,
-                    )}
-                    aria-current={day.isToday ? 'date' : undefined}
-                    aria-pressed={day.isSelected}
-                    aria-disabled={day.isDisabled}
-                    onClick={() => {
-                      calendar.selectDate(day.iso);
-                    }}
-                    className={cn(
-                      calendarDayVariants({
-                        siblingMonth: day.isSiblingMonth,
-                        today: day.isToday,
-                        selected: day.isSelected,
-                        disabled: day.isDisabled,
-                      }),
-                      slotProps?.day?.className,
-                    )}
-                  >
-                    {day.day}
-                  </button>
-                </span>
-              );
-            })}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/components/Calendar/calendar.types.ts

@@ -1,65 +0,0 @@
-import type { ISODate, WeekDay } from '@dashforge/calendar-core';
-
-/** Per-slot `className` overrides for `<Calendar>`. */
-export interface CalendarSlotProps {
-  root?: { className?: string };
-  header?: { className?: string };
-  grid?: { className?: string };
-  /** Applied to every day-cell button. */
-  day?: { className?: string };
-}
-
-/**
- * Props for the `<Calendar>` primitive — a standalone, inline month grid.
- *
- * `Calendar` is NOT a form field (no bridge / RBAC integration). It is the
- * low-level building block used inside `<DatePicker>`. For a form-bound date
- * input use `<DatePicker>`.
- *
- * Dates are ISO `YYYY-MM-DD` strings throughout. The headless date engine is
- * `@dashforge/calendar-core` — shared with the MUI `@dashforge/ui` calendar.
- */
-export interface CalendarProps {
-  /** Selected date (controlled). */
-  value?: ISODate | null;
-  /** Initial selected date (uncontrolled). */
-  defaultValue?: ISODate | null;
-  /** Fired when a day is chosen. */
-  onChange?: (value: ISODate) => void;
-  /** Controlled displayed month (1-indexed). Pair with `year`. */
-  month?: number;
-  /** Controlled displayed year. Pair with `month`. */
-  year?: number;
-  /** Initial displayed month (1-indexed, uncontrolled). */
-  defaultMonth?: number;
-  /** Initial displayed year (uncontrolled). */
-  defaultYear?: number;
-  /** Fired when the displayed month changes. */
-  onMonthChange?: (month: number, year: number) => void;
-  /** Earliest selectable date (inclusive). */
-  minDate?: ISODate;
-  /** Latest selectable date (inclusive). */
-  maxDate?: ISODate;
-  /** Explicit list of disabled dates. */
-  disabledDates?: readonly ISODate[];
-  /** Predicate marking arbitrary dates disabled. */
-  isDateDisabled?: (date: ISODate) => boolean;
-  /** Weekday of the grid's first column (`0` = Sunday). Default `0`. */
-  weekStartDay?: WeekDay;
-  /** BCP-47 locale for month/weekday names. Default `"en-US"`. */
-  locale?: string;
-  /** Overrides "today" (ISO `YYYY-MM-DD`), mainly for testing. */
-  today?: ISODate;
-  /** Disables the whole calendar. */
-  disabled?: boolean;
-  /** Moves DOM focus to the active day cell on mount. */
-  autoFocus?: boolean;
-  /** Accessible label for the grid. Default `"Calendar"`. */
-  'aria-label'?: string;
-  /** Root-level Tailwind class override. */
-  sx?: string;
-  /** Per-slot `className` overrides. */
-  slotProps?: CalendarSlotProps;
-  /** Test id applied to the root element. */
-  testId?: string;
-}