@paul-portfolio/react 0.1.17 → 0.3.0

package/README.md

@@ -0,0 +1,166 @@
+# @paul-portfolio/react
+
+React components for the Paul Design System. Thin, accessible components styled
+by [`@paul-portfolio/css`](https://www.npmjs.com/package/@paul-portfolio/css) —
+the components render semantic markup with class names, and the CSS package
+supplies the looks via design tokens.
+
+## Install
+
+```bash
+npm install @paul-portfolio/react @paul-portfolio/css @paul-portfolio/tokens
+```
+
+`@paul-portfolio/css` and `@paul-portfolio/tokens` are peer dependencies, along
+with `react` and `react-dom` (>=18).
+
+## Setup
+
+Import the token variables and the component styles once, near the root of your
+app:
+
+```ts
+import "@paul-portfolio/tokens/tokens.css";
+import "@paul-portfolio/css/components.css";
+```
+
+Then use the components:
+
+```tsx
+import { Button } from "@paul-portfolio/react";
+
+export function Example() {
+  return <Button variant="primary">Save</Button>;
+}
+```
+
+## Components
+
+### Button
+
+Variants (`primary`, `secondary`, `outline`, `ghost`, `danger`), sizes (`xs`,
+`sm`, `md`, `lg`), `loading`, and an `href` form that renders an `<a>`.
+
+```tsx
+<Button variant="outline" size="sm" onClick={save}>Save</Button>
+<Button href="/docs" variant="ghost">Docs</Button>
+```
+
+### IconButton
+
+A square, icon-only button. Requires `aria-label` since there's no visible text.
+Sizes `sm` and `md`.
+
+```tsx
+<IconButton aria-label="Close" onClick={close}>✕</IconButton>
+```
+
+### Input / Textarea
+
+Labelled fields with `error` and `helper` text. `Input` takes a `size`
+(`sm`/`md`); `Textarea` resizes vertically.
+
+```tsx
+<Input label="Email" type="email" error={emailError} />
+<Textarea label="Bio" helper="Max 200 characters" />
+```
+
+### Switch
+
+An on/off toggle. Controlled via `checked` + `onCheckedChange`. Give it an
+`aria-label`.
+
+```tsx
+<Switch checked={on} onCheckedChange={setOn} aria-label="Notifications" />
+```
+
+### Chip
+
+A compact tag, optionally removable and colorable.
+
+```tsx
+<Chip label="Design" onRemove={() => remove("design")} />
+```
+
+### Modal
+
+An accessible dialog with focus trap, Escape-to-close, and a backdrop. Controlled
+via `open` + `onClose`.
+
+```tsx
+<Modal open={open} onClose={close} aria-label="Settings">
+  <h2>Settings</h2>
+</Modal>
+```
+
+### Tooltip / InfoTip
+
+`Tooltip` wraps any element and shows text on hover. `InfoTip` is the common
+"small i that explains a label" shortcut, built on `Tooltip`.
+
+```tsx
+<Tooltip content="Copied to clipboard"><IconButton aria-label="Copy">⧉</IconButton></Tooltip>
+<InfoTip content="We never share your email." />
+```
+
+### Card
+
+A surface with optional `Card.Header`, `Card.Body`, and `Card.Footer`.
+
+```tsx
+<Card>
+  <Card.Header>Plan</Card.Header>
+  <Card.Body>Pro — $12/mo</Card.Body>
+</Card>
+```
+
+### Badge / Avatar / Skeleton / Spinner
+
+- **Badge** — a small status label.
+- **Avatar** — a rounded user image with initials fallback.
+- **Skeleton** — a shimmer placeholder for content that's still loading.
+- **Spinner** — an indeterminate loading spinner (`sm`/`md`/`lg`), announced as a
+  status region.
+
+```tsx
+<Badge>New</Badge>
+<Avatar name="Ada Lovelace" src={url} />
+<Skeleton width="12rem" />
+<Spinner label="Loading results" />
+```
+
+### Divider
+
+A thin separator rule, `horizontal` (default) or `vertical`.
+
+```tsx
+<Divider />
+<Divider orientation="vertical" />
+```
+
+### VisuallyHidden
+
+Renders content that's available to screen readers but hidden visually.
+
+```tsx
+<VisuallyHidden>Loading</VisuallyHidden>
+```
+
+### cx
+
+A tiny classname joiner used internally, exported for convenience.
+
+```ts
+cx("card", isActive && "card--active"); // "card card--active"
+```
+
+## Accessibility
+
+Every component ships with an axe test in the package's suite. Components that
+have no visible text (IconButton, Switch, Spinner) require or default an
+accessible name, and interactive components expose the right roles and ARIA
+state.
+
+## License
+
+MIT © Paul Sumido

package/dist/Avatar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from './cx';
-export function Avatar({ src, alt, size, fallback }) {
+export function Avatar({ src, alt, size = 'md', fallback }) {
     return (_jsx("div", { className: cx('avatar', size && `avatar--${size}`), children: src ? (_jsx("img", { src: src, alt: alt })) : (_jsx("span", { className: "avatar--fallback", children: fallback })) }));
 }

package/dist/Chip.d.ts

@@ -1,10 +1,17 @@
-import type { HTMLAttributes } from 'react';
-type ChipProps = HTMLAttributes<HTMLSpanElement> & {
+import type { HTMLAttributes, MouseEvent } from 'react';
+type ChipProps = Omit<HTMLAttributes<HTMLSpanElement>, 'onClick'> & {
     label: string;
+    /** Background color (any CSS color). Text flips to white when set. */
+    color?: string;
     size?: 'sm' | 'md';
+    /** Stretch to fill the container (e.g. a grid cell). */
+    fullWidth?: boolean;
     clickable?: boolean;
     removable?: boolean;
+    /** When set, the label becomes a real button. */
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
     onRemove?: () => void;
+    title?: string;
 };
-export declare function Chip({ label, size, clickable, removable, onClick, onRemove, className, ...props }: ChipProps): import("react").JSX.Element;
+export declare function Chip({ label, color, size, fullWidth, clickable, removable, onClick, onRemove, title, className, ...props }: ChipProps): import("react").JSX.Element;
 export {};

package/dist/Chip.js

@@ -1,8 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from './cx';
-export function Chip({ label, size, clickable, removable, onClick, onRemove, className, ...props }) {
-    return (_jsxs("span", { className: cx('chip', size && size !== 'md' && `chip--${size}`, clickable && 'chip--clickable', removable && 'chip--removable', className), onClick: onClick, ...props, children: [label, removable && (_jsx("button", { type: "button", className: "chip__remove", "aria-label": "Remove", onClick: (e) => {
-                    e.stopPropagation();
-                    onRemove?.();
-                } }))] }));
+export function Chip({ label, color, size, fullWidth, clickable, removable, onClick, onRemove, title, className, ...props }) {
+    const showRemove = removable || !!onRemove;
+    const interactive = clickable || !!onClick;
+    const classes = cx('chip', size && size !== 'md' && `chip--${size}`, interactive && 'chip--clickable', showRemove && 'chip--removable', fullWidth && 'chip--full-width', className);
+    const style = color
+        ? { backgroundColor: color, color: '#fff' }
+        : undefined;
+    const remove = showRemove ? (_jsx("button", { type: "button", className: "chip__remove", "aria-label": `Remove ${label}`, onClick: (e) => {
+            e.stopPropagation();
+            onRemove?.();
+        }, children: _jsx("span", { "aria-hidden": "true", children: "\u00D7" }) })) : null;
+    // A clickable chip puts the label in its own button so it's keyboard
+    // reachable, with the remove button as a sibling (no button-in-button).
+    if (onClick) {
+        return (_jsxs("span", { className: classes, style: style, title: title, ...props, children: [_jsx("button", { type: "button", className: "chip__label", onClick: onClick, children: label }), remove] }));
+    }
+    return (_jsxs("span", { className: classes, style: style, title: title, ...props, children: [label, remove] }));
 }

package/dist/Divider.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes } from 'react';
+type DividerProps = HTMLAttributes<HTMLHRElement> & {
+    orientation?: 'horizontal' | 'vertical';
+};
+/**
+ * A thin rule that separates content. Renders an <hr> (implicit
+ * role="separator"); pass orientation="vertical" for use inside a flex row.
+ */
+export declare function Divider({ orientation, className, ...props }: DividerProps): import("react").JSX.Element;
+export {};

package/dist/Divider.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from './cx';
+/**
+ * A thin rule that separates content. Renders an <hr> (implicit
+ * role="separator"); pass orientation="vertical" for use inside a flex row.
+ */
+export function Divider({ orientation = 'horizontal', className, ...props }) {
+    return (_jsx("hr", { className: cx('divider', orientation === 'vertical' && 'divider--vertical', className), "aria-orientation": orientation, ...props }));
+}

package/dist/IconButton.d.ts

@@ -0,0 +1,12 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+/**
+ * A square, icon-only button. Always needs an aria-label because there's no
+ * visible text to name it.
+ */
+export declare const IconButton: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** Required: describes the action for screen readers, since the button
+     *  holds only an icon. */
+    'aria-label': string;
+    size?: 'sm' | 'md';
+    children: ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/IconButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from './cx';
+/**
+ * A square, icon-only button. Always needs an aria-label because there's no
+ * visible text to name it.
+ */
+export const IconButton = forwardRef(function IconButton({ size, className, children, type, ...props }, ref) {
+    return (_jsx("button", { ref: ref, type: type ?? 'button', className: cx('icon-btn', size && size !== 'md' && `icon-btn--${size}`, className), ...props, children: children }));
+});

package/dist/InfoTip.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+type InfoTipProps = {
+    /** The explanation shown in the popover. Text or rich nodes. */
+    content: ReactNode;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /** Accessible name for the trigger. Defaults to "More information". */
+    label?: string;
+    /** Max width of the popover in px. */
+    maxWidth?: number;
+    /** Delay before showing, in ms. */
+    delay?: number;
+};
+/**
+ * A small "i" glyph that reveals a popover on hover or focus. Built on Tooltip,
+ * so it renders at a fixed position (never clipped) and accepts rich content —
+ * the common "explain this label" case, with room for a few lines of detail.
+ */
+export declare function InfoTip({ content, side, label, maxWidth, delay, }: InfoTipProps): import("react").JSX.Element;
+export {};

package/dist/InfoTip.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from './Tooltip';
+/**
+ * A small "i" glyph that reveals a popover on hover or focus. Built on Tooltip,
+ * so it renders at a fixed position (never clipped) and accepts rich content —
+ * the common "explain this label" case, with room for a few lines of detail.
+ */
+export function InfoTip({ content, side = 'top', label = 'More information', maxWidth, delay, }) {
+    return (_jsx(Tooltip, { content: content, side: side, maxWidth: maxWidth, delay: delay, children: _jsx("span", { className: "info-tip", role: "img", "aria-label": label, tabIndex: 0, children: "i" }) }));
+}

package/dist/Modal.d.ts

@@ -3,6 +3,13 @@ type ModalProps = {
     open: boolean;
     onClose: () => void;
     title?: string;
+    /** Accessible name when there's no title to point at. */
+    'aria-label'?: string;
+    /** Id of an element that labels the dialog (wins over title). */
+    'aria-labelledby'?: string;
+    /** Id of an element that describes the dialog. */
+    'aria-describedby'?: string;
+    className?: string;
     children: ReactNode;
 };
 declare function Header({ children }: {
@@ -14,7 +21,7 @@ declare function Body({ children }: {
 declare function Footer({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;
-export declare function Modal({ open, onClose, title, children }: ModalProps): import("react").ReactPortal | null;
+export declare function Modal({ open, onClose, title, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, }: ModalProps): import("react").ReactPortal | null;
 export declare namespace Modal {
     export { Header };
     export { Body };

package/dist/Modal.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId } from 'react';
+import { useEffect, useId, useRef } from 'react';
 import { createPortal } from 'react-dom';
+import { cx } from './cx';
 function Header({ children }) {
     return _jsx("div", { className: "modal__header", children: children });
 }
@@ -10,21 +11,51 @@ function Body({ children }) {
 function Footer({ children }) {
     return _jsx("div", { className: "modal__footer", children: children });
 }
-export function Modal({ open, onClose, title, children }) {
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+export function Modal({ open, onClose, title, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, }) {
     const titleId = useId();
+    const dialogRef = useRef(null);
+    // Move focus into the dialog on open and restore it on close, and trap Tab
+    // so keyboard focus can't wander behind the modal.
     useEffect(() => {
         if (!open)
             return;
+        const previouslyFocused = document.activeElement;
+        const dialog = dialogRef.current;
+        dialog?.focus();
         function handleKey(e) {
-            if (e.key === 'Escape')
+            if (e.key === 'Escape') {
                 onClose();
+                return;
+            }
+            if (e.key !== 'Tab' || !dialog)
+                return;
+            const focusables = Array.from(dialog.querySelectorAll(FOCUSABLE));
+            if (focusables.length === 0) {
+                e.preventDefault();
+                return;
+            }
+            const first = focusables[0];
+            const last = focusables[focusables.length - 1];
+            if (e.shiftKey && document.activeElement === first) {
+                e.preventDefault();
+                last.focus();
+            }
+            else if (!e.shiftKey && document.activeElement === last) {
+                e.preventDefault();
+                first.focus();
+            }
         }
         document.addEventListener('keydown', handleKey);
-        return () => document.removeEventListener('keydown', handleKey);
+        return () => {
+            document.removeEventListener('keydown', handleKey);
+            previouslyFocused?.focus?.();
+        };
     }, [open, onClose]);
     if (!open)
         return null;
-    return createPortal(_jsx("div", { className: "modal__backdrop", onClick: onClose, children: _jsxs("div", { role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, className: "modal", onClick: (e) => e.stopPropagation(), children: [title && (_jsx("div", { id: titleId, className: "modal__title", children: title })), children] }) }), document.body);
+    const labelledby = ariaLabelledby ?? (title ? titleId : undefined);
+    return createPortal(_jsx("div", { className: "modal__backdrop", onClick: onClose, children: _jsxs("div", { ref: dialogRef, role: "dialog", "aria-modal": "true", "aria-label": !labelledby ? ariaLabel : undefined, "aria-labelledby": labelledby, "aria-describedby": ariaDescribedby, tabIndex: -1, className: cx('modal__content', className), onClick: (e) => e.stopPropagation(), children: [title && (_jsx("div", { id: titleId, className: "modal__header", children: title })), children] }) }), document.body);
 }
 Modal.Header = Header;
 Modal.Body = Body;

package/dist/Skeleton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from './cx';
 export function Skeleton({ variant, width, height }) {
-    const style = variant === 'rect'
+    const style = width || height
         ? {
             '--skeleton-w': width,
             '--skeleton-h': height,

package/dist/Spinner.d.ts

@@ -0,0 +1,12 @@
+import { type HTMLAttributes } from 'react';
+type SpinnerProps = HTMLAttributes<HTMLSpanElement> & {
+    size?: 'sm' | 'md' | 'lg';
+    /** Accessible name announced to screen readers. Defaults to "Loading". */
+    label?: string;
+};
+/**
+ * An indeterminate loading spinner. Renders as a live status region so
+ * assistive tech announces that something is loading.
+ */
+export declare function Spinner({ size, label, className, ...props }: SpinnerProps): import("react").JSX.Element;
+export {};

package/dist/Spinner.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from './cx';
+/**
+ * An indeterminate loading spinner. Renders as a live status region so
+ * assistive tech announces that something is loading.
+ */
+export function Spinner({ size, label = 'Loading', className, ...props }) {
+    return (_jsx("span", { role: "status", "aria-label": label, className: cx('spinner', size && size !== 'md' && `spinner--${size}`, className), ...props }));
+}

package/dist/Switch.d.ts

@@ -0,0 +1,13 @@
+import { type ButtonHTMLAttributes } from 'react';
+/**
+ * An on/off toggle. Controlled via `checked` + `onCheckedChange`. Exposes
+ * role="switch" with aria-checked so assistive tech reads its state. Give it
+ * an aria-label (or aria-labelledby) since it has no text of its own.
+ */
+export declare const Switch: import("react").ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
+    /** Whether the switch is on. Controlled. */
+    checked: boolean;
+    /** Called with the next value when toggled. */
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/Switch.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from './cx';
+/**
+ * An on/off toggle. Controlled via `checked` + `onCheckedChange`. Exposes
+ * role="switch" with aria-checked so assistive tech reads its state. Give it
+ * an aria-label (or aria-labelledby) since it has no text of its own.
+ */
+export const Switch = forwardRef(function Switch({ checked, onCheckedChange, disabled, className, ...props }, ref) {
+    return (_jsx("button", { ref: ref, type: "button", role: "switch", "aria-checked": checked, disabled: disabled, onClick: () => onCheckedChange?.(!checked), className: cx('switch', checked && 'switch--on', className), ...props, children: _jsx("span", { className: "switch__thumb" }) }));
+});

package/dist/Textarea.d.ts

@@ -0,0 +1,16 @@
+import { type TextareaHTMLAttributes } from 'react';
+/**
+ * Multi-line text field. Mirrors Input's label/error/helper API, and adds an
+ * optional hidden label, a required marker, and a live character counter when
+ * paired with maxLength.
+ */
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    label?: string;
+    error?: string;
+    helper?: string;
+    /** Visually hide the label while keeping it available to screen readers. */
+    hideLabel?: boolean;
+    /** Show a live "used / max" character count. Needs maxLength to be set. */
+    showCount?: boolean;
+    disabled?: boolean;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/Textarea.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState, } from 'react';
+import { cx } from './cx';
+/**
+ * Multi-line text field. Mirrors Input's label/error/helper API, and adds an
+ * optional hidden label, a required marker, and a live character counter when
+ * paired with maxLength.
+ */
+export const Textarea = forwardRef(function Textarea({ label, error, helper, hideLabel = false, showCount = false, required, disabled, maxLength, value, defaultValue, onChange, className, ...props }, ref) {
+    const id = useId();
+    const helperId = `${id}-helper`;
+    const countId = `${id}-count`;
+    const helperText = error || helper;
+    // Count is derived from a controlled value, or tracked locally otherwise.
+    const controlled = value !== undefined;
+    const [localCount, setLocalCount] = useState(() => String(defaultValue ?? '').length);
+    const count = controlled ? String(value ?? '').length : localCount;
+    const withCount = showCount && maxLength != null;
+    const describedBy = [helperText ? helperId : null, withCount ? countId : null]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    return (_jsxs("div", { className: "input__wrapper", children: [label && (_jsxs("label", { className: hideLabel ? 'sr-only' : 'input__label', htmlFor: id, children: [label, required && (_jsx("span", { "aria-hidden": "true", children: " *" }))] })), _jsx("textarea", { ref: ref, id: id, className: cx('textarea', error && 'textarea--error', className), disabled: disabled, required: required, maxLength: maxLength, value: value, defaultValue: defaultValue, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, onChange: (e) => {
+                    if (!controlled)
+                        setLocalCount(e.target.value.length);
+                    onChange?.(e);
+                }, ...props }), withCount && (_jsxs("span", { id: countId, className: "textarea__count", "aria-live": "polite", children: [count, " / ", maxLength] })), helperText && (_jsx("span", { id: helperId, className: cx('input__helper', error && 'input__helper--error'), children: helperText }))] }));
+});

package/dist/Tooltip.d.ts

@@ -1,8 +1,19 @@
 import { type ReactNode } from 'react';
+type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
 type TooltipProps = {
-    content: string;
-    side?: 'top' | 'bottom' | 'left' | 'right';
+    /** Content shown in the floating label. Text or rich nodes. */
+    content: ReactNode;
+    side?: TooltipSide;
+    /** Delay before showing, in ms. Avoids flashing on a quick mouse pass. */
+    delay?: number;
+    /** Max width of the bubble in px. */
+    maxWidth?: number;
     children: ReactNode;
 };
-export declare function Tooltip({ content, side, children }: TooltipProps): import("react").JSX.Element;
+/**
+ * A tooltip that renders at a fixed screen position, so it's never clipped by
+ * an overflow:hidden ancestor (grids, cards, chips) and needs no portal. Shows
+ * on hover and focus after `delay` ms; Escape dismisses it.
+ */
+export declare function Tooltip({ content, side, delay, maxWidth, children }: TooltipProps): import("react").JSX.Element;
 export {};

package/dist/Tooltip.js

@@ -1,8 +1,63 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useId } from 'react';
+import { useState, useRef, useCallback, useId, } from 'react';
 import { cx } from './cx';
-export function Tooltip({ content, side = 'top', children }) {
-    const [visible, setVisible] = useState(false);
+const GAP = 8;
+/**
+ * A tooltip that renders at a fixed screen position, so it's never clipped by
+ * an overflow:hidden ancestor (grids, cards, chips) and needs no portal. Shows
+ * on hover and focus after `delay` ms; Escape dismisses it.
+ */
+export function Tooltip({ content, side = 'top', delay = 500, maxWidth, children }) {
     const id = useId();
-    return (_jsxs("span", { onMouseEnter: () => setVisible(true), onMouseLeave: () => setVisible(false), "aria-describedby": id, style: { position: 'relative', display: 'inline-block' }, children: [children, _jsx("span", { id: id, role: "tooltip", className: cx('tooltip', `tooltip--${side}`, visible && 'tooltip--visible'), children: content })] }));
+    const [visible, setVisible] = useState(false);
+    const [rect, setRect] = useState(null);
+    const timer = useRef(null);
+    const show = useCallback((el) => {
+        setRect(el.getBoundingClientRect());
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = setTimeout(() => setVisible(true), delay);
+    }, [delay]);
+    const hide = useCallback(() => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        setVisible(false);
+    }, []);
+    const style = rect
+        ? { position: 'fixed', ...place(rect, side), maxWidth }
+        : undefined;
+    return (_jsxs("span", { className: "tooltip__anchor", style: { display: 'inline-flex' }, onMouseEnter: (e) => show(e.currentTarget), onMouseLeave: hide, onFocus: (e) => show(e.currentTarget), onBlur: hide, onKeyDown: (e) => {
+            if (e.key === 'Escape' && visible)
+                hide();
+        }, "aria-describedby": visible ? id : undefined, children: [children, visible && rect && (_jsx("span", { id: id, role: "tooltip", className: cx('tooltip', `tooltip--${side}`, 'tooltip--visible'), style: style, children: content }))] }));
+}
+/** Screen coordinates + transform to anchor the bubble on a side of the rect. */
+function place(rect, side) {
+    switch (side) {
+        case 'bottom':
+            return {
+                left: rect.left + rect.width / 2,
+                top: rect.bottom + GAP,
+                transform: 'translateX(-50%)',
+            };
+        case 'left':
+            return {
+                left: rect.left - GAP,
+                top: rect.top + rect.height / 2,
+                transform: 'translate(-100%, -50%)',
+            };
+        case 'right':
+            return {
+                left: rect.right + GAP,
+                top: rect.top + rect.height / 2,
+                transform: 'translateY(-50%)',
+            };
+        case 'top':
+        default:
+            return {
+                left: rect.left + rect.width / 2,
+                top: rect.top - GAP,
+                transform: 'translate(-50%, -100%)',
+            };
+    }
 }

package/dist/index.d.ts

@@ -1,11 +1,17 @@
 export { Button } from './Button';
+export { IconButton } from './IconButton';
 export { Card } from './Card';
 export { Chip } from './Chip';
 export { Input } from './Input';
+export { Textarea } from './Textarea';
+export { Switch } from './Switch';
 export { Modal } from './Modal';
 export { Tooltip } from './Tooltip';
+export { InfoTip } from './InfoTip';
 export { Avatar } from './Avatar';
 export { Badge } from './Badge';
 export { Skeleton } from './Skeleton';
+export { Spinner } from './Spinner';
+export { Divider } from './Divider';
 export { VisuallyHidden } from './VisuallyHidden';
 export { cx } from './cx';

package/dist/index.js

@@ -1,11 +1,17 @@
 export { Button } from './Button';
+export { IconButton } from './IconButton';
 export { Card } from './Card';
 export { Chip } from './Chip';
 export { Input } from './Input';
+export { Textarea } from './Textarea';
+export { Switch } from './Switch';
 export { Modal } from './Modal';
 export { Tooltip } from './Tooltip';
+export { InfoTip } from './InfoTip';
 export { Avatar } from './Avatar';
 export { Badge } from './Badge';
 export { Skeleton } from './Skeleton';
+export { Spinner } from './Spinner';
+export { Divider } from './Divider';
 export { VisuallyHidden } from './VisuallyHidden';
 export { cx } from './cx';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paul-portfolio/react",
-  "version": "0.1.17",
+  "version": "0.3.0",
   "description": "React components for the Paul Design System",
   "license": "MIT",
   "repository": {