@paul-portfolio/react 0.1.14 → 0.2.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.d.ts

@@ -0,0 +1,8 @@
+type AvatarProps = {
+    src?: string;
+    alt?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    fallback?: string;
+};
+export declare function Avatar({ src, alt, size, fallback }: AvatarProps): import("react").JSX.Element;
+export {};

package/dist/Avatar.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from './cx';
+export function Avatar({ src, alt, size, 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/Badge.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+type BadgeProps = {
+    variant?: 'success' | 'warning' | 'error' | 'info';
+    dot?: boolean;
+    children?: ReactNode;
+};
+export declare function Badge({ variant, dot, children }: BadgeProps): import("react").JSX.Element;
+export {};

package/dist/Badge.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from './cx';
+export function Badge({ variant, dot, children }) {
+    return (_jsx("span", { className: cx('badge', variant && `badge--${variant}`, dot && 'badge--dot'), children: children }));
+}

package/dist/Button.d.ts

@@ -0,0 +1,19 @@
+import { type ButtonHTMLAttributes, type AnchorHTMLAttributes, type ReactNode } from 'react';
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+type BaseProps = {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    disabled?: boolean;
+    children: ReactNode;
+};
+type ButtonAsButton = BaseProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps> & {
+    href?: never;
+};
+type ButtonAsAnchor = BaseProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseProps> & {
+    href: string;
+};
+type ButtonProps = ButtonAsButton | ButtonAsAnchor;
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export {};

package/dist/Button.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from 'react';
+import { cx } from './cx';
+export const Button = forwardRef(function Button({ variant, size, loading, disabled, className, children, ...props }, ref) {
+    const classes = cx('btn', variant && `btn--${variant}`, size && size !== 'md' && `btn--${size}`, className);
+    if ('href' in props && props.href) {
+        return (_jsx("a", { ref: ref, className: classes, "aria-disabled": disabled || loading || undefined, ...props, children: children }));
+    }
+    const { href: _, ...buttonProps } = props;
+    return (_jsx("button", { ref: ref, className: classes, disabled: disabled || loading, "aria-disabled": disabled || loading || undefined, "aria-busy": loading || undefined, ...buttonProps, onClick: disabled || loading ? undefined : buttonProps.onClick, children: children }));
+});

package/dist/Card.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode, type HTMLAttributes } from 'react';
+type CardVariant = 'elevated' | 'interactive';
+declare function Header({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function Body({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function Footer({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare const Card: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    variant?: CardVariant;
+    children: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+    Header: typeof Header;
+    Body: typeof Body;
+    Footer: typeof Footer;
+};
+export {};

package/dist/Card.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from './cx';
+const CardRoot = forwardRef(function Card({ variant, className, children, ...props }, ref) {
+    return (_jsx("div", { ref: ref, className: cx('card', variant && `card--${variant}`, className), ...props, children: children }));
+});
+function Header({ className, children, ...props }) {
+    return _jsx("div", { className: cx('card__header', className), ...props, children: children });
+}
+function Body({ className, children, ...props }) {
+    return _jsx("div", { className: cx('card__body', className), ...props, children: children });
+}
+function Footer({ className, children, ...props }) {
+    return _jsx("div", { className: cx('card__footer', className), ...props, children: children });
+}
+export const Card = Object.assign(CardRoot, { Header, Body, Footer });

package/dist/Chip.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+type ChipProps = HTMLAttributes<HTMLSpanElement> & {
+    label: string;
+    size?: 'sm' | 'md';
+    clickable?: boolean;
+    removable?: boolean;
+    onRemove?: () => void;
+};
+export declare function Chip({ label, size, clickable, removable, onClick, onRemove, className, ...props }: ChipProps): import("react").JSX.Element;
+export {};

package/dist/Chip.js

@@ -0,0 +1,8 @@
+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?.();
+                } }))] }));
+}

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,13 @@
+type InfoTipProps = {
+    /** The explanatory text shown in the tooltip. */
+    content: string;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /** Accessible name for the trigger. Defaults to "More information". */
+    label?: string;
+};
+/**
+ * A small "i" glyph that reveals a tooltip on hover or focus. A convenience
+ * wrapper over Tooltip for the very common "explain this label" case.
+ */
+export declare function InfoTip({ content, side, label }: InfoTipProps): import("react").JSX.Element;
+export {};

package/dist/InfoTip.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from './Tooltip';
+/**
+ * A small "i" glyph that reveals a tooltip on hover or focus. A convenience
+ * wrapper over Tooltip for the very common "explain this label" case.
+ */
+export function InfoTip({ content, side = 'top', label = 'More information' }) {
+    return (_jsx(Tooltip, { content: content, side: side, children: _jsx("span", { className: "info-tip", role: "img", "aria-label": label, tabIndex: 0, children: "i" }) }));
+}

package/dist/Input.d.ts

@@ -0,0 +1,8 @@
+import { type InputHTMLAttributes } from 'react';
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    label?: string;
+    error?: string;
+    helper?: string;
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Input.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { cx } from './cx';
+export const Input = forwardRef(function Input({ label, error, helper, size, disabled, className, ...props }, ref) {
+    const id = useId();
+    const helperId = `${id}-helper`;
+    const helperText = error || helper;
+    return (_jsxs("div", { className: "input__wrapper", children: [label && _jsx("label", { className: "input__label", htmlFor: id, children: label }), _jsx("input", { ref: ref, id: id, className: cx('input', size && size !== 'md' && `input--${size}`, error && 'input--error', className), disabled: disabled, "aria-invalid": error ? true : undefined, "aria-describedby": helperText ? helperId : undefined, ...props }), helperText && (_jsx("span", { id: helperId, className: cx('input__helper', error && 'input__helper--error'), children: helperText }))] }));
+});

package/dist/Modal.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+type ModalProps = {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    children: ReactNode;
+};
+declare function Header({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+declare function Body({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+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 namespace Modal {
+    export { Header };
+    export { Body };
+    export { Footer };
+}
+export {};

package/dist/Modal.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId } from 'react';
+import { createPortal } from 'react-dom';
+function Header({ children }) {
+    return _jsx("div", { className: "modal__header", children: children });
+}
+function Body({ children }) {
+    return _jsx("div", { className: "modal__body", children: children });
+}
+function Footer({ children }) {
+    return _jsx("div", { className: "modal__footer", children: children });
+}
+export function Modal({ open, onClose, title, children }) {
+    const titleId = useId();
+    useEffect(() => {
+        if (!open)
+            return;
+        function handleKey(e) {
+            if (e.key === 'Escape')
+                onClose();
+        }
+        document.addEventListener('keydown', handleKey);
+        return () => document.removeEventListener('keydown', handleKey);
+    }, [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);
+}
+Modal.Header = Header;
+Modal.Body = Body;
+Modal.Footer = Footer;

package/dist/Skeleton.d.ts

@@ -0,0 +1,7 @@
+type SkeletonProps = {
+    variant?: 'text' | 'circle' | 'rect';
+    width?: string;
+    height?: string;
+};
+export declare function Skeleton({ variant, width, height }: SkeletonProps): import("react").JSX.Element;
+export {};

package/dist/Skeleton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from './cx';
+export function Skeleton({ variant, width, height }) {
+    const style = variant === 'rect'
+        ? {
+            '--skeleton-w': width,
+            '--skeleton-h': height,
+        }
+        : undefined;
+    return (_jsx("div", { className: cx('skeleton', variant && `skeleton--${variant}`), style: style }));
+}

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,11 @@
+import { type TextareaHTMLAttributes } from 'react';
+/**
+ * Multi-line text field. Mirrors Input's label/error/helper API so the two
+ * feel the same in a form.
+ */
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    label?: string;
+    error?: string;
+    helper?: string;
+    disabled?: boolean;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/Textarea.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { cx } from './cx';
+/**
+ * Multi-line text field. Mirrors Input's label/error/helper API so the two
+ * feel the same in a form.
+ */
+export const Textarea = forwardRef(function Textarea({ label, error, helper, disabled, className, ...props }, ref) {
+    const id = useId();
+    const helperId = `${id}-helper`;
+    const helperText = error || helper;
+    return (_jsxs("div", { className: "input__wrapper", children: [label && (_jsx("label", { className: "input__label", htmlFor: id, children: label })), _jsx("textarea", { ref: ref, id: id, className: cx('textarea', error && 'textarea--error', className), disabled: disabled, "aria-invalid": error ? true : undefined, "aria-describedby": helperText ? helperId : undefined, ...props }), helperText && (_jsx("span", { id: helperId, className: cx('input__helper', error && 'input__helper--error'), children: helperText }))] }));
+});

package/dist/Tooltip.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+type TooltipProps = {
+    content: string;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    children: ReactNode;
+};
+export declare function Tooltip({ content, side, children }: TooltipProps): import("react").JSX.Element;
+export {};

package/dist/Tooltip.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useId } from 'react';
+import { cx } from './cx';
+export function Tooltip({ content, side = 'top', children }) {
+    const [visible, setVisible] = useState(false);
+    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 })] }));
+}

package/dist/VisuallyHidden.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+type VisuallyHiddenProps = {
+    children: ReactNode;
+};
+export declare function VisuallyHidden({ children }: VisuallyHiddenProps): import("react").JSX.Element;
+export {};

package/dist/VisuallyHidden.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function VisuallyHidden({ children }) {
+    return _jsx("span", { className: "visually-hidden", children: children });
+}

package/dist/cx.d.ts

@@ -0,0 +1 @@
+export declare function cx(...classes: (string | false | null | undefined)[]): string;

package/dist/cx.js

@@ -0,0 +1,3 @@
+export function cx(...classes) {
+    return classes.filter(Boolean).join(' ');
+}

package/dist/index.d.ts

@@ -0,0 +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

@@ -0,0 +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.14",
+  "version": "0.2.0",
   "description": "React components for the Paul Design System",
   "license": "MIT",
   "repository": {