@dashforge/tw 0.3.0-beta → 0.4.0-beta

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.3.0-beta';
+export const VERSION = '0.4.0-beta';