@dashforge/tw 0.5.0-beta → 0.7.0-beta

package/src/components/Table/cells/RenderButton.tsx

@@ -0,0 +1,23 @@
+import type { MouseEvent, ReactNode } from 'react';
+import { Button } from '../../Button/Button.js';
+import type { ButtonProps } from '../../Button/button.types.js';
+
+export interface RenderButtonProps
+  extends Pick<ButtonProps, 'variant' | 'color' | 'size' | 'disabled' | 'access'> {
+  label: ReactNode;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+
+/**
+ * Inline button cell renderer. Thin wrapper over `<Button>` with
+ * the size narrowed to `sm` by default (table density expects compact
+ * controls).
+ */
+export function RenderButton(props: RenderButtonProps) {
+  const { label, onClick, variant = 'ghost', size = 'sm', ...rest } = props;
+  return (
+    <Button variant={variant} size={size} onClick={onClick} {...rest}>
+      {label}
+    </Button>
+  );
+}

package/src/components/Table/cells/RenderChip.tsx

@@ -0,0 +1,103 @@
+import type { ReactNode } from 'react';
+import { tv, type VariantProps } from 'tailwind-variants';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * Internal mini-chip used by the cell renderer library. Not exported
+ * from `@dashforge/tw` as a standalone component (per Sprint 4.1
+ * scope decision — a standalone `<Chip>` may ship in Sprint 5 if
+ * demand emerges).
+ *
+ * Variants:
+ *  - `color`: 7 intents (neutral / primary / success / warning /
+ *    danger / info / secondary)
+ *  - `variant`: `soft` (default) / `solid` / `outline`
+ *  - `size`: `sm` / `md`
+ */
+const chipVariants = tv({
+  base: [
+    'inline-flex items-center gap-1 rounded-full font-medium',
+    'whitespace-nowrap',
+  ],
+  variants: {
+    color: {
+      neutral: '',
+      primary: '',
+      success: '',
+      warning: '',
+      danger: '',
+      info: '',
+      secondary: '',
+    },
+    variant: {
+      soft: '',
+      solid: '',
+      outline: '',
+    },
+    size: {
+      sm: 'h-5 px-2 text-xs',
+      md: 'h-6 px-2.5 text-xs',
+    },
+  },
+  compoundVariants: [
+    // soft = subtle bg + dark text.
+    // Neutral row uses NO `dark:` variants — the dashforgePreset()
+    // CSS-var swap auto-inverts the neutral palette already.
+    // Color rows below KEEP `dark:` variants because color palettes
+    // don't auto-invert: the `dark:` shift is an intentional design
+    // choice (darker bg + lighter text in dark mode for visual cohesion).
+    { variant: 'soft', color: 'neutral',   class: 'bg-neutral-100 text-neutral-700' },
+    { variant: 'soft', color: 'primary',   class: 'bg-primary-100 dark:bg-primary-950 text-primary-700 dark:text-primary-300' },
+    { variant: 'soft', color: 'success',   class: 'bg-success-100 dark:bg-success-950 text-success-700 dark:text-success-300' },
+    { variant: 'soft', color: 'warning',   class: 'bg-warning-100 dark:bg-warning-950 text-warning-700 dark:text-warning-300' },
+    { variant: 'soft', color: 'danger',    class: 'bg-danger-100 dark:bg-danger-950 text-danger-700 dark:text-danger-300' },
+    { variant: 'soft', color: 'info',      class: 'bg-info-100 dark:bg-info-950 text-info-700 dark:text-info-300' },
+    { variant: 'soft', color: 'secondary', class: 'bg-secondary-100 dark:bg-secondary-950 text-secondary-700 dark:text-secondary-300' },
+    // solid = full bg + light text
+    // solid neutral: bg + text both anchored to neutral palette
+    // (auto-inverts). `text-white` would not invert and would break
+    // contrast in light mode against a `bg-neutral-700` dark bg, so
+    // we stick to `text-neutral-50` (light text in light mode, dark
+    // in dark — wait, that's wrong too). Actually `text-neutral-50`
+    // auto-inverts: light text in light mode (against dark bg) is
+    // what we want; in dark mode `bg-neutral-700` becomes light AND
+    // `text-neutral-50` becomes dark — contrast preserved.
+    { variant: 'solid', color: 'neutral',   class: 'bg-neutral-700 text-neutral-50' },
+    { variant: 'solid', color: 'primary',   class: 'bg-primary-500 text-white' },
+    { variant: 'solid', color: 'success',   class: 'bg-success-500 text-white' },
+    { variant: 'solid', color: 'warning',   class: 'bg-warning-500 text-white' },
+    { variant: 'solid', color: 'danger',    class: 'bg-danger-500 text-white' },
+    { variant: 'solid', color: 'info',      class: 'bg-info-500 text-white' },
+    { variant: 'solid', color: 'secondary', class: 'bg-secondary-500 text-white' },
+    // outline = border + colored text
+    // outline neutral: both border + text auto-invert via CSS-var swap.
+    { variant: 'outline', color: 'neutral',   class: 'border border-neutral-300 text-neutral-700' },
+    { variant: 'outline', color: 'primary',   class: 'border border-primary-500 text-primary-700 dark:text-primary-300' },
+    { variant: 'outline', color: 'success',   class: 'border border-success-500 text-success-700 dark:text-success-300' },
+    { variant: 'outline', color: 'warning',   class: 'border border-warning-500 text-warning-700 dark:text-warning-300' },
+    { variant: 'outline', color: 'danger',    class: 'border border-danger-500 text-danger-700 dark:text-danger-300' },
+    { variant: 'outline', color: 'info',      class: 'border border-info-500 text-info-700 dark:text-info-300' },
+    { variant: 'outline', color: 'secondary', class: 'border border-secondary-500 text-secondary-700 dark:text-secondary-300' },
+  ],
+  defaultVariants: {
+    color: 'neutral',
+    variant: 'soft',
+    size: 'sm',
+  },
+});
+
+type ChipVariants = VariantProps<typeof chipVariants>;
+
+export interface RenderChipProps extends ChipVariants {
+  children: ReactNode;
+  className?: string;
+}
+
+export function RenderChip(props: RenderChipProps) {
+  const { children, color, variant, size, className } = props;
+  return (
+    <span className={cn(chipVariants({ color, variant, size }), className)}>
+      {children}
+    </span>
+  );
+}

package/src/components/Table/cells/RenderText.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+import { cn } from '../../../utils/cn.js';
+
+export interface RenderTextProps {
+  value: ReactNode;
+  /** Truncate to one line with ellipsis on overflow. @default false */
+  truncate?: boolean;
+  /** Secondary text color (less prominent). @default false */
+  muted?: boolean;
+  /** Extra class merged via `tailwind-merge`. */
+  className?: string;
+}
+
+/**
+ * Plain text cell renderer. Wraps the value in a `<span>` and
+ * optionally truncates on overflow. Use this for the most common
+ * case: render a single string value.
+ *
+ * The Table component does NOT use this by default for plain
+ * string columns — it just renders `{value}` directly. Use
+ * `RenderText` when you need the truncate / muted styling.
+ */
+export function RenderText(props: RenderTextProps) {
+  const { value, truncate, muted, className } = props;
+  return (
+    <span
+      className={cn(
+        truncate && 'block max-w-full truncate',
+        // Neutral palette auto-inverts via dashforgePreset() CSS-var swap.
+        muted && 'text-neutral-500',
+        className,
+      )}
+    >
+      {value}
+    </span>
+  );
+}

package/src/components/Table/cells/RenderTwoLine.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import { cn } from '../../../utils/cn.js';
+
+export interface RenderTwoLineProps {
+  primary: ReactNode;
+  secondary: ReactNode;
+  className?: string;
+}
+
+/**
+ * Two-line cell renderer: a bold primary line stacked above a muted
+ * secondary line. Useful for `Name + email`, `Title + ID`, etc.
+ *
+ * Replaces the MUI-side `RenderTwoLineCell` without the magic-number
+ * vertical-align fudges (`mt: 0.8 / 0.2`) — flexbox handles the
+ * vertical layout cleanly.
+ *
+ * Dashforge identity rule: text colors auto-invert via the
+ * `dashforgePreset()` CSS-variable swap. No `dark:` variants needed
+ * on neutral palette.
+ */
+export function RenderTwoLine(props: RenderTwoLineProps) {
+  const { primary, secondary, className } = props;
+  return (
+    <div className={cn('flex flex-col leading-tight', className)}>
+      <span className="font-medium text-neutral-900">
+        {primary}
+      </span>
+      <span className="text-xs text-neutral-500 mt-0.5">
+        {secondary}
+      </span>
+    </div>
+  );
+}

package/src/components/Table/cells/RowActionsMenu.tsx

@@ -0,0 +1,147 @@
+import { useState, type ReactNode } from 'react';
+import type { AccessRequirement } from '@dashforge/rbac';
+import { Popover } from '../../Popover/Popover.js';
+import { useAccessState } from '../../../hooks/useAccessState.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * Single action definition for `<RowActionsMenu>`.
+ *
+ * `access` (optional) gates the action via RBAC:
+ *  - `onUnauthorized: 'hide'`     → action not rendered
+ *  - `onUnauthorized: 'disable'`  → action visible, disabled
+ *  - `onUnauthorized: 'readonly'` → action visible, disabled
+ */
+export interface TableRowAction<T> {
+  label: ReactNode;
+  onClick: (row: T) => void;
+  icon?: ReactNode;
+  color?: 'default' | 'danger' | 'warning';
+  disabled?: boolean;
+  access?: AccessRequirement;
+}
+
+export interface RowActionsMenuProps<T> {
+  row: T;
+  actions: TableRowAction<T>[];
+  /** Custom trigger element. Defaults to a ⋮ icon button. */
+  trigger?: ReactNode;
+  /** Aria-label for the default trigger. */
+  ariaLabel?: string;
+}
+
+/**
+ * 3-dot row actions menu. Renders a trigger button that opens a
+ * Popover (Sprint 3 component) with a list of action menu items.
+ *
+ * Replaces the MUI-side `RowActions.tsx` (IconButton + Menu) with
+ * the TW equivalents. Per-action RBAC honored: hidden actions are
+ * filtered out, disabled actions render disabled.
+ */
+export function RowActionsMenu<T>(props: RowActionsMenuProps<T>) {
+  const { row, actions, trigger, ariaLabel = 'Row actions' } = props;
+  const [open, setOpen] = useState(false);
+
+  // Filter actions by RBAC (hidden actions removed entirely)
+  const visibleActions = actions.filter((action) => {
+    if (!action.access) return true;
+    return action.access.onUnauthorized !== 'hide';
+  });
+
+  if (visibleActions.length === 0) return null;
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={setOpen}
+      side="bottom"
+      align="end"
+      content={
+        <ul className="flex flex-col gap-0.5 min-w-[140px]" role="menu">
+          {visibleActions.map((action, idx) => (
+            <RowActionMenuItem
+              key={idx}
+              action={action}
+              row={row}
+              onClose={() => setOpen(false)}
+            />
+          ))}
+        </ul>
+      }
+    >
+      {trigger ?? (
+        <button
+          type="button"
+          aria-label={ariaLabel}
+          aria-haspopup="menu"
+          aria-expanded={open}
+          className={cn(
+            'inline-flex items-center justify-center h-8 w-8 rounded-md',
+            // Neutral palette auto-inverts via the dashforgePreset()
+            // CSS-var swap — no `dark:` variant needed.
+            'text-neutral-500 hover:text-neutral-900',
+            'hover:bg-neutral-100',
+            'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+            'transition-colors motion-reduce:transition-none',
+          )}
+        >
+          <svg
+            width="1em"
+            height="1em"
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <circle cx="8" cy="3"  r="1.4" />
+            <circle cx="8" cy="8"  r="1.4" />
+            <circle cx="8" cy="13" r="1.4" />
+          </svg>
+        </button>
+      )}
+    </Popover>
+  );
+}
+
+function RowActionMenuItem<T>(props: {
+  action: TableRowAction<T>;
+  row: T;
+  onClose: () => void;
+}) {
+  const { action, row, onClose } = props;
+  const accessState = useAccessState(action.access);
+  const isDisabled = action.disabled || accessState.disabled || accessState.readonly;
+
+  return (
+    <li role="none">
+      <button
+        type="button"
+        role="menuitem"
+        disabled={isDisabled}
+        onClick={() => {
+          onClose();
+          action.onClick(row);
+        }}
+        className={cn(
+          'flex items-center gap-2 w-full text-left',
+          'px-3 py-1.5 rounded-md text-sm',
+          // Neutral palette auto-inverts; danger/warning are color
+          // palettes (no auto-invert) so they keep their `dark:` shift
+          // intentionally — design choice, not a bug.
+          'hover:bg-neutral-100',
+          'focus:outline-none focus-visible:bg-neutral-100',
+          'transition-colors motion-reduce:transition-none',
+          'disabled:opacity-50 disabled:pointer-events-none',
+          action.color === 'danger' && 'text-danger-700 dark:text-danger-300',
+          action.color === 'warning' && 'text-warning-700 dark:text-warning-300',
+        )}
+      >
+        {action.icon && (
+          <span className="inline-flex shrink-0" aria-hidden="true">
+            {action.icon}
+          </span>
+        )}
+        <span>{action.label}</span>
+      </button>
+    </li>
+  );
+}

package/src/components/Table/cells/index.ts

@@ -0,0 +1,14 @@
+export { RenderText } from './RenderText.js';
+export type { RenderTextProps } from './RenderText.js';
+
+export { RenderTwoLine } from './RenderTwoLine.js';
+export type { RenderTwoLineProps } from './RenderTwoLine.js';
+
+export { RenderChip } from './RenderChip.js';
+export type { RenderChipProps } from './RenderChip.js';
+
+export { RenderButton } from './RenderButton.js';
+export type { RenderButtonProps } from './RenderButton.js';
+
+export { RowActionsMenu } from './RowActionsMenu.js';
+export type { RowActionsMenuProps, TableRowAction } from './RowActionsMenu.js';