@dashforge/tw 0.2.1-beta → 0.4.0-beta

package/src/components/TextField/textField.types.ts

@@ -6,9 +6,27 @@ import type { TextFieldVariants } from './textField.variants.js';
 /**
  * Per-slot overrides for `<TextField>`.
  *
- * Each slot accepts `{ className: string }` so the override path is
- * extensible (style / aria-* / data-* can be added without a breaking
- * change). Mirrors the MUI-side `slotProps` shape.
+ * Each slot accepts `{ className: string }` (and, for `prefix` /
+ * `suffix`, a `children` node) so the override path is extensible —
+ * extra fields like `style`, `aria-*`, `data-*` can be added without
+ * a breaking change. Mirrors the MUI-side `slotProps` shape.
+ *
+ * **`prefix` / `suffix`** are inline adornments rendered INSIDE the
+ * `inputWrapper`, before / after the `<input>` element. Typical use:
+ * currency symbols, units, status icons. Passing only `className`
+ * (no `children`) is allowed but renders an empty slot — usually
+ * you'll always pair the two.
+ *
+ *   ```tsx
+ *   <TextField
+ *     name="price"
+ *     type="number"
+ *     slotProps={{
+ *       prefix: { children: '$' },
+ *       suffix: { children: 'USD' },
+ *     }}
+ *   />
+ *   ```
  */
 export interface TextFieldSlotProps {
   root?: { className?: string };
@@ -18,6 +36,8 @@ export interface TextFieldSlotProps {
   input?: { className?: string };
   helperText?: { className?: string };
   errorText?: { className?: string };
+  prefix?: { children?: ReactNode; className?: string };
+  suffix?: { children?: ReactNode; className?: string };
 }
 
 /**

package/src/components/TextField/textField.variants.ts

@@ -34,6 +34,24 @@ export const textFieldVariants = tv({
     ],
     helperText: 'mt-1 text-sm text-neutral-600',
     errorText: 'mt-1 text-sm text-danger-600',
+    /*
+     * `prefix` / `suffix` slot — inline adornment rendered before /
+     * after the input INSIDE the inputWrapper. `shrink-0` keeps the
+     * adornment width fixed so it doesn't compete for space with the
+     * input; `select-none` + `pointer-events-none` avoids
+     * accidentally stealing focus from the input on click (the
+     * inputWrapper handles focus via `focus-within`).
+     */
+    prefix: [
+      'shrink-0 inline-flex items-center select-none pointer-events-none',
+      'text-neutral-500',
+      'mr-2',
+    ],
+    suffix: [
+      'shrink-0 inline-flex items-center select-none pointer-events-none',
+      'text-neutral-500',
+      'ml-2',
+    ],
   },
   variants: {
     size: {

package/src/components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,73 @@
+// @vitest-environment jsdom
+import * as React from 'react';
+import { describe, it, expect, afterEach, beforeAll } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import { Tooltip } from './Tooltip.js';
+
+void React;
+afterEach(() => cleanup());
+
+// jsdom doesn't implement ResizeObserver — Radix Floating UI requires it.
+// Shim with a noop before any test mounts a Tooltip.
+beforeAll(() => {
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+  }
+  if (typeof globalThis.DOMRect === 'undefined') {
+    (globalThis as unknown as { DOMRect: unknown }).DOMRect = class {
+      static fromRect(r?: DOMRectInit) {
+        return new (globalThis as unknown as { DOMRect: new (x: number, y: number, w: number, h: number) => unknown }).DOMRect(
+          r?.x ?? 0, r?.y ?? 0, r?.width ?? 0, r?.height ?? 0
+        );
+      }
+      constructor(public x = 0, public y = 0, public width = 0, public height = 0) {}
+    };
+  }
+});
+
+describe('Tooltip — rendering', () => {
+  it('renders the trigger (children) always', () => {
+    render(
+      <Tooltip content="Tip text">
+        <button>Trigger</button>
+      </Tooltip>
+    );
+    expect(screen.queryByRole('button', { name: 'Trigger' })).not.toBeNull();
+  });
+
+  it('renders content when controlled open=true', () => {
+    render(
+      <Tooltip content="Tip text" open onOpenChange={() => {}}>
+        <button>Trigger</button>
+      </Tooltip>
+    );
+    expect(screen.queryAllByText('Tip text').length).toBeGreaterThan(0);
+  });
+
+  it('does not render content when controlled open=false', () => {
+    render(
+      <Tooltip content="Tip text" open={false} onOpenChange={() => {}}>
+        <button>Trigger</button>
+      </Tooltip>
+    );
+    expect(screen.queryByText('Tip text')).toBeNull();
+  });
+});
+
+describe('Tooltip — placement props', () => {
+  it.each(['top', 'right', 'bottom', 'left'] as const)(
+    'renders side=%s without crashing',
+    (side) => {
+      render(
+        <Tooltip content="Tip" open side={side} onOpenChange={() => {}}>
+          <button>Trigger</button>
+        </Tooltip>
+      );
+      expect(screen.queryByRole('button', { name: 'Trigger' })).not.toBeNull();
+    }
+  );
+});

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,70 @@
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { cn } from '../../utils/cn.js';
+import { tooltipVariants } from './tooltip.variants.js';
+import type { TooltipProps } from './tooltip.types.js';
+
+/**
+ * Dashforge TW `<Tooltip>` — hoverable / focusable tooltip.
+ *
+ * Built on `@radix-ui/react-tooltip`:
+ *  - APG tooltip pattern: `role="tooltip"`, `aria-describedby` wired
+ *    to the trigger automatically (Radix manages the id linkage).
+ *  - Shows on hover OR keyboard focus.
+ *  - Dismissed on Escape or pointer leave.
+ *
+ * Wrap any single React node — it becomes the trigger via Radix's
+ * `asChild` slot. The trigger inherits `aria-describedby` so screen
+ * readers announce the tooltip content along with the trigger.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Delete this item">
+ *   <Button variant="ghost">
+ *     <TrashIcon />
+ *   </Button>
+ * </Tooltip>
+ * ```
+ *
+ * Each consumer can also wrap the entire app once in
+ * `<RadixTooltip.Provider>` to share delay/skip configuration; we
+ * include a per-component provider here for ease-of-use.
+ */
+export function Tooltip(props: TooltipProps) {
+  const {
+    children,
+    content,
+    side = 'top',
+    align = 'center',
+    hideArrow = false,
+    delayDuration = 200,
+    open,
+    onOpenChange,
+    sideOffset = 4,
+    slotProps,
+  } = props;
+
+  const v = tooltipVariants();
+
+  return (
+    <RadixTooltip.Provider delayDuration={delayDuration}>
+      <RadixTooltip.Root open={open} onOpenChange={onOpenChange}>
+        <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
+        <RadixTooltip.Portal>
+          <RadixTooltip.Content
+            side={side}
+            align={align}
+            sideOffset={sideOffset}
+            className={cn(v.content(), slotProps?.content?.className)}
+          >
+            {content}
+            {!hideArrow && (
+              <RadixTooltip.Arrow
+                className={cn(v.arrow(), slotProps?.arrow?.className)}
+              />
+            )}
+          </RadixTooltip.Content>
+        </RadixTooltip.Portal>
+      </RadixTooltip.Root>
+    </RadixTooltip.Provider>
+  );
+}

package/src/components/Tooltip/tooltip.types.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+
+export interface TooltipSlotProps {
+  content?: { className?: string };
+  arrow?: { className?: string };
+}
+
+/**
+ * Props for `<Tooltip>`.
+ *
+ * Built on `@radix-ui/react-tooltip`. Wrap any element with a tooltip
+ * that follows APG semantics (`role="tooltip"`, `aria-describedby`
+ * wired to the trigger).
+ *
+ * Renders an arrow by default. Three side options
+ * (top / right / bottom / left) with 'top' as default. Delay
+ * configurable via `delayDuration` (forwarded to Radix Provider).
+ */
+export interface TooltipProps {
+  /** The element that, when hovered/focused, shows the tooltip. */
+  children: ReactNode;
+  /** Tooltip body content. */
+  content: ReactNode;
+  /** Side of the trigger to show the tooltip on. @default 'top' */
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  /** Alignment along the perpendicular axis. @default 'center' */
+  align?: 'start' | 'center' | 'end';
+  /** Hide the arrow indicator. @default false (arrow shown) */
+  hideArrow?: boolean;
+  /** Delay before the tooltip shows on hover (ms). @default 200 */
+  delayDuration?: number;
+  /**
+   * Controlled open state. Use when the tooltip should be programmatic
+   * (e.g. revealed on a manual button press). Omit for default
+   * hover / focus behavior.
+   */
+  open?: boolean;
+  /** Called when the tooltip's open state changes. */
+  onOpenChange?: (open: boolean) => void;
+  /** Side offset in pixels from the trigger. @default 4 */
+  sideOffset?: number;
+  /** Per-slot overrides. */
+  slotProps?: TooltipSlotProps;
+}

package/src/components/Tooltip/tooltip.variants.ts

@@ -0,0 +1,18 @@
+import { tv, type VariantProps } from 'tailwind-variants';
+
+export const tooltipVariants = tv({
+  slots: {
+    content: [
+      'z-50 max-w-xs rounded-md px-3 py-1.5 text-xs font-medium',
+      'bg-neutral-900 text-neutral-50',
+      'dark:bg-neutral-50 dark:text-neutral-900',
+      'shadow-md',
+      'data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95',
+      'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+      'motion-reduce:transition-none motion-reduce:duration-0',
+    ],
+    arrow: 'fill-neutral-900 dark:fill-neutral-50',
+  },
+});
+
+export type TooltipVariants = VariantProps<typeof tooltipVariants>;

package/src/index.ts

@@ -223,6 +223,45 @@ export type { AspectRatioProps } from './components/AspectRatio/aspectRatio.type
 export { VisuallyHidden } from './components/VisuallyHidden/VisuallyHidden.js';
 export type { VisuallyHiddenProps } from './components/VisuallyHidden/visuallyHidden.types.js';
 
+// F11 tier-4: overlay + disclosure primitives.
+
+export { Dialog } from './components/Dialog/Dialog.js';
+export type {
+  DialogProps,
+  DialogSlotProps,
+} from './components/Dialog/dialog.types.js';
+export { dialogVariants } from './components/Dialog/dialog.variants.js';
+
+export { Tabs } from './components/Tabs/Tabs.js';
+export type {
+  TabsProps,
+  TabsSlotProps,
+  TabItem,
+} from './components/Tabs/tabs.types.js';
+export { tabsVariants } from './components/Tabs/tabs.variants.js';
+
+export { Tooltip } from './components/Tooltip/Tooltip.js';
+export type {
+  TooltipProps,
+  TooltipSlotProps,
+} from './components/Tooltip/tooltip.types.js';
+export { tooltipVariants } from './components/Tooltip/tooltip.variants.js';
+
+export { Popover } from './components/Popover/Popover.js';
+export type {
+  PopoverProps,
+  PopoverSlotProps,
+} from './components/Popover/popover.types.js';
+export { popoverVariants } from './components/Popover/popover.variants.js';
+
+export { Accordion } from './components/Accordion/Accordion.js';
+export type {
+  AccordionProps,
+  AccordionSlotProps,
+  AccordionItem,
+} from './components/Accordion/accordion.types.js';
+export { accordionVariants } from './components/Accordion/accordion.variants.js';
+
 // ───── Hooks ─────
 export { useAccessState } from './hooks/useAccessState.js';
 
@@ -237,4 +276,4 @@ export type { VariantProps } from 'tailwind-variants';
 /**
  * Package version (synced with `package.json` at publish time).
  */
-export const VERSION = '0.2.1-beta';
+export const VERSION = '0.4.0-beta';