@dashforge/tw 0.3.0-beta → 0.5.0-beta

package/src/components/Tabs/tabs.variants.ts

@@ -0,0 +1,58 @@
+import { tv, type VariantProps } from 'tailwind-variants';
+
+export const tabsVariants = tv({
+  slots: {
+    root: 'flex',
+    list: 'inline-flex items-center gap-1',
+    trigger: [
+      'inline-flex items-center justify-center whitespace-nowrap',
+      'text-sm font-medium transition-colors',
+      'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+      'disabled:opacity-50 disabled:pointer-events-none',
+      'motion-reduce:transition-none',
+    ],
+    content: [
+      'mt-3 focus:outline-none',
+      'data-[state=inactive]:hidden',
+    ],
+  },
+  variants: {
+    variant: {
+      underline: {
+        list: 'border-b border-neutral-200 dark:border-neutral-800',
+        trigger: [
+          'px-3 py-2 border-b-2 border-transparent text-neutral-600 dark:text-neutral-400',
+          'hover:text-neutral-900 dark:hover:text-neutral-50',
+          'data-[state=active]:border-primary-500 data-[state=active]:text-primary-700',
+          'dark:data-[state=active]:text-primary-400',
+        ],
+      },
+      pill: {
+        list: 'rounded-lg bg-neutral-100 dark:bg-neutral-800 p-1',
+        trigger: [
+          'px-3 py-1.5 rounded-md text-neutral-600 dark:text-neutral-400',
+          'hover:text-neutral-900 dark:hover:text-neutral-50',
+          'data-[state=active]:bg-white dark:data-[state=active]:bg-neutral-900',
+          'data-[state=active]:text-neutral-900 dark:data-[state=active]:text-neutral-50',
+          'data-[state=active]:shadow-sm',
+        ],
+      },
+    },
+    orientation: {
+      horizontal: {
+        root: 'flex-col',
+        list: 'flex-row',
+      },
+      vertical: {
+        root: 'flex-row gap-4',
+        list: 'flex-col items-stretch',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'underline',
+    orientation: 'horizontal',
+  },
+});
+
+export type TabsVariants = VariantProps<typeof tabsVariants>;

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,62 @@ 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';
+
+// F12 utilities: loading placeholder + pagination control.
+
+export { Skeleton } from './components/Skeleton/Skeleton.js';
+export type {
+  SkeletonProps,
+  SkeletonSlotProps,
+} from './components/Skeleton/skeleton.types.js';
+export { skeletonVariants } from './components/Skeleton/skeleton.variants.js';
+
+export { Pagination } from './components/Pagination/Pagination.js';
+export type {
+  PaginationProps,
+  PaginationSlotProps,
+  PaginationLabels,
+} from './components/Pagination/pagination.types.js';
+export { paginationVariants } from './components/Pagination/pagination.variants.js';
+
 // ───── Hooks ─────
 export { useAccessState } from './hooks/useAccessState.js';
 
@@ -237,4 +293,4 @@ export type { VariantProps } from 'tailwind-variants';
 /**
  * Package version (synced with `package.json` at publish time).
  */
-export const VERSION = '0.3.0-beta';
+export const VERSION = '0.5.0-beta';