@scalewing/react 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @scalewing/react
 
+## 0.3.0
+
+### Minor Changes
+
+- 247f158: Adds Accordion, a web disclosure on native details/summary, so in-flow panels can expand without a modal or an always-open Card.
+- 247f158: Adds web page chrome: `AppHeader` (sticky glass), `Nav` (label-size link cluster, current page via `aria-current`), compact `Field` (`size="xs"`, `labelVisuallyHidden`), native `select` chevrons, and accent `:focus-visible` on text controls so selects do not keep the user-agent blue ring.
+- 247f158: Adds Dialog, a web modal on the native `<dialog>` top layer, so info surfaces can leave nested page flow.
+- 247f158: Adds a horizontal BarChart for labeled factor contributions, compact table density (`density="compact"`) with a selected-row marker, and compact Badge chicklets.
+- 247f158: Default accent is electric indigo, and glass fill is derived from the merged accent so ThemeProvider overlays retint frost.
+
+  Adds opt-in density (`xs` controls, `data` type, `sw-tabular`) and web `Badge`, `SegmentedControl`, and `Table`. Pin the previous teal with `colors={{ accent: '#0B615E', onAccent: '#FFFFFF' }}` (dark: `#7EDAD6` / `#101214`).
+
+- 247f158: Adds a named palette catalog so products pick a reviewed light/dark overlay instead of copying hex. Apply with ThemeProvider `palette`, `data-palette` on the generated canvas, or `import '@scalewing/react/palette/<id>.css'` after styles.css. Default remains indigo. `colors` still wins over a named palette and may be `{ light, dark }` so end users can switch scheme without the product swapping hex.
+- 247f158: Adds Select, a web labeled listbox menu, so a compact choice can open with canvas glass instead of the operating system picker.
+- 247f158: Adds Split, a web start pane with a labeled separator, so a column can be resized up to a max width and hidden when dragged too small.
+- 247f158: Adds Toast, a web auto-dismiss confirmation on the popover layer that does not trap focus. Optional `anchor` and `target` send it from a press to a destination, then it vanishes. Ghost buttons with `aria-pressed="false"` use quiet opacity so a selected press stays full color.
+
+### Patch Changes
+
+- 247f158: Adds Select action, a last listbox command that does not become the displayed value.
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+  - @scalewing/tokens@0.3.0
+
 ## 0.2.0
 
 ### Minor Changes

package/README.md

@@ -4,23 +4,34 @@ DOM components plus the generated Scalewing stylesheet.
 
 ```ts
 import '@scalewing/react/styles.css';
+import '@scalewing/react/palette/cerulean.css';
 import {
+  Accordion,
+  BarChart,
   Box,
   Button,
   Card,
   Field,
+  Select,
+  Split,
   Stack,
   Text,
   ThemeProvider,
 } from '@scalewing/react';
+
+<ThemeProvider colorScheme="system" palette="cerulean">
+  {children}
+</ThemeProvider>
 ```
 
+`colorScheme` is `"light"`, `"dark"`, or `"system"` so product users can switch. Each named palette already has a light pair and a dark pair. Brand overlays may be a flat `colors` map or `{ light, dark }` so both schemes are declared once.
+
 ```html
 <div class="sw-padding-top-4 sw-padding-x-4"></div>
 ```
 
-Import the CSS once at the application entry. Do not copy it into your source tree.
+Import the CSS once at the application entry. Do not copy it into your source tree. Optional: import one `@scalewing/react/palette/<id>.css` file after it, or set `data-palette` on the `data-theme` node. React apps can set `palette` on `ThemeProvider` instead.
 
-`Box as="a"` is a layout link. Use `Button` for press actions. `Field` wraps a native `<input>` or `<select>` with a label and token gap; native text controls inherit the generated document canvas.
+`Box as="a"` is a layout link. Use `Button` for press actions. `Field` wraps a native `<input>` or `<select>` with a label and token gap; native text controls inherit the generated document canvas. `Select` is a labeled listbox menu when the open list must match the canvas.
 
 React is a peer dependency. Rationale: the host app already owns the React runtime.

package/dist/components/Accordion.d.ts

@@ -0,0 +1,8 @@
+import { type DetailsHTMLAttributes, type ReactNode } from 'react';
+export type AccordionProps = Omit<DetailsHTMLAttributes<HTMLDetailsElement>, 'onToggle' | 'open' | 'title' | 'children'> & {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    children: ReactNode;
+};
+export declare function Accordion({ children, className, onOpenChange, open, title, ...rest }: AccordionProps): import("react").JSX.Element;

package/dist/components/Accordion.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../class-names.js';
+import { spacingClassNames } from '../spacing-classes.js';
+import { Stack } from './Stack.js';
+import { Text } from './Text.js';
+export function Accordion({ children, className, onOpenChange, open, title, ...rest }) {
+    return (_jsxs("details", { ...rest, className: cx('sw-accordion', className), open: open, onToggle: (event) => {
+            const next = event.currentTarget.open;
+            if (next !== open) {
+                onOpenChange(next);
+            }
+        }, children: [_jsx("summary", { className: cx('sw-accordion-summary', ...spacingClassNames({ padding: 4 })), children: _jsx(Text, { as: "span", variant: "title", children: title }) }), _jsx(Stack, { gap: 4, padding: 4, paddingTop: 0, children: children })] }));
+}

package/dist/components/AppHeader.d.ts

@@ -0,0 +1,5 @@
+import { type BoxProps } from './Box.js';
+export type AppHeaderProps = Omit<BoxProps, 'as'> & {
+    sticky?: boolean;
+};
+export declare function AppHeader({ className, padding, sticky, ...rest }: AppHeaderProps): import("react").JSX.Element;

package/dist/components/AppHeader.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../class-names.js';
+import { Box } from './Box.js';
+export function AppHeader({ className, padding = 4, sticky = true, ...rest }) {
+    return (_jsx(Box, { as: "header", className: cx('sw-app-header', sticky && 'sw-app-header-sticky', className), padding: padding, ...rest }));
+}

package/dist/components/Badge.d.ts

@@ -0,0 +1,13 @@
+import { type BadgeSize, type BadgeTone } from '@scalewing/tokens';
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type { BadgeSize, BadgeTone };
+export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
+    children: ReactNode;
+    size?: BadgeSize;
+    tone?: BadgeTone;
+};
+export declare const Badge: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & {
+    children: ReactNode;
+    size?: BadgeSize;
+    tone?: BadgeTone;
+} & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/Badge.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { badgeClassNames, } from '@scalewing/tokens';
+import { forwardRef } from 'react';
+import { cx } from '../class-names.js';
+export const Badge = forwardRef(function Badge({ children, className, size = 'md', tone = 'neutral', ...rest }, ref) {
+    return (_jsx("span", { ref: ref, className: cx(...badgeClassNames(tone, size), className), ...rest, children: children }));
+});

package/dist/components/BarChart.d.ts

@@ -0,0 +1,16 @@
+import { type HTMLAttributes } from 'react';
+export type BarChartItem = {
+    label: string;
+    value: number;
+    valueLabel?: string;
+};
+export type BarChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    'aria-label': string;
+    items: readonly BarChartItem[];
+    max?: number;
+};
+export declare const BarChart: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    'aria-label': string;
+    items: readonly BarChartItem[];
+    max?: number;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/BarChart.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { barChartFillRatio, barChartScaleMax, formatBarChartValue, } from '@scalewing/tokens';
+import { forwardRef } from 'react';
+import { cx } from '../class-names.js';
+export const BarChart = forwardRef(function BarChart({ 'aria-label': ariaLabel, className, items, max, style, ...rest }, ref) {
+    const scaleMax = barChartScaleMax(items.map((item) => item.value), max);
+    return (_jsxs("div", { ref: ref, className: cx('sw-bar-chart', className), style: style, ...rest, children: [_jsx("ul", { "aria-label": ariaLabel, className: "sw-bar-chart-plot", children: items.map((item, index) => {
+                    const ratio = barChartFillRatio(item.value, scaleMax);
+                    return (_jsxs("li", { className: "sw-bar-chart-row", children: [_jsx("span", { className: "sw-bar-chart-label", children: item.label }), _jsx("span", { className: "sw-bar-chart-track", children: _jsx("span", { className: cx('sw-bar-chart-fill', item.value < 0 && 'sw-bar-chart-fill-negative'), style: {
+                                        '--sw-bar-fill': ratio,
+                                    } }) }), _jsx("span", { className: "sw-bar-chart-value", children: item.valueLabel ?? formatBarChartValue(item.value) })] }, `${item.label}-${index}`));
+                }) }), _jsxs("div", { "aria-hidden": "true", className: "sw-bar-chart-axis", children: [_jsx("span", {}), _jsxs("span", { className: "sw-bar-chart-axis-track", children: [_jsx("span", { children: "0" }), _jsx("span", { children: formatBarChartValue(scaleMax) })] }), _jsx("span", {})] })] }));
+});

package/dist/components/Box.d.ts

@@ -8,7 +8,7 @@ export type BoxProps = SpacingProps & HTMLAttributes<HTMLElement> & Pick<AnchorH
     radius?: RadiusStep;
     border?: boolean;
 };
-export declare const Box: import("react").ForwardRefExoticComponent<SpacingProps & HTMLAttributes<HTMLElement> & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "rel" | "download" | "href" | "target"> & {
+export declare const Box: import("react").ForwardRefExoticComponent<SpacingProps & HTMLAttributes<HTMLElement> & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "download" | "href" | "rel" | "target"> & {
     as?: BoxElement;
     background?: Extract<SemanticColorKey, "background" | "surface">;
     radius?: RadiusStep;

package/dist/components/Button.d.ts

@@ -8,7 +8,7 @@ export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick
     type?: 'button' | 'submit' | 'reset';
     variant?: ButtonVariant;
 };
-export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "type"> & {
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick"> & {
     children: ReactNode;
     onPress: () => void;
     size?: ButtonSize;

package/dist/components/Dialog.d.ts

@@ -0,0 +1,8 @@
+import { type DialogHTMLAttributes, type ReactNode } from 'react';
+export type DialogProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose' | 'open' | 'title' | 'children'> & {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    children: ReactNode;
+};
+export declare function Dialog({ children, className, onClose, open, title, ...rest }: DialogProps): import("react").JSX.Element;

package/dist/components/Dialog.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, } from 'react';
+import { cx } from '../class-names.js';
+import { spacingClassNames } from '../spacing-classes.js';
+import { Stack } from './Stack.js';
+import { Text } from './Text.js';
+export function Dialog({ children, className, onClose, open, title, ...rest }) {
+    const nodeRef = useRef(null);
+    const titleId = useId();
+    useEffect(() => {
+        const node = nodeRef.current;
+        if (!node) {
+            return;
+        }
+        if (open) {
+            if (!node.open) {
+                node.showModal();
+            }
+            return;
+        }
+        if (node.open) {
+            node.close();
+        }
+    }, [open]);
+    return (_jsx("dialog", { ...rest, ref: nodeRef, "aria-labelledby": titleId, className: cx('sw-dialog', ...spacingClassNames({ padding: 5 }), className), onClose: onClose, onPointerDown: (event) => {
+            const rect = event.currentTarget.getBoundingClientRect();
+            const inside = event.clientX >= rect.left &&
+                event.clientX <= rect.right &&
+                event.clientY >= rect.top &&
+                event.clientY <= rect.bottom;
+            if (!inside) {
+                onClose();
+            }
+        }, children: _jsxs(Stack, { gap: 4, children: [_jsx(Text, { id: titleId, variant: "title", children: title }), children] }) }));
+}

package/dist/components/Field.d.ts

@@ -1,8 +1,11 @@
 import { type SpacingStep } from '@scalewing/tokens';
 import { type ReactNode } from 'react';
+export type FieldSize = 'xs' | 'md';
 export type FieldProps = {
     children: ReactNode;
     gap?: SpacingStep;
     label: string;
+    labelVisuallyHidden?: boolean;
+    size?: FieldSize;
 };
-export declare function Field({ children, gap, label }: FieldProps): import("react").JSX.Element;
+export declare function Field({ children, gap, label, labelVisuallyHidden, size, }: FieldProps): import("react").JSX.Element;

package/dist/components/Field.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack } from './Stack.js';
 import { Text } from './Text.js';
-export function Field({ children, gap = 1, label }) {
-    return (_jsxs(Stack, { as: "label", gap: gap, children: [_jsx(Text, { as: "span", variant: "label", children: label }), children] }));
+export function Field({ children, gap = 1, label, labelVisuallyHidden = false, size = 'md', }) {
+    return (_jsxs(Stack, { as: "label", className: size === 'xs' ? 'sw-field-xs' : undefined, gap: labelVisuallyHidden ? 0 : gap, children: [_jsx(Text, { as: "span", className: labelVisuallyHidden ? 'sw-sr-only' : undefined, variant: size === 'xs' ? 'caption' : 'label', children: label }), children] }));
 }

package/dist/components/Nav.d.ts

@@ -0,0 +1,3 @@
+import { type BoxProps } from './Box.js';
+export type NavProps = Omit<BoxProps, 'as'>;
+export declare function Nav({ className, ...rest }: NavProps): import("react").JSX.Element;

package/dist/components/Nav.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../class-names.js';
+import { Box } from './Box.js';
+export function Nav({ className, ...rest }) {
+    return _jsx(Box, { as: "nav", className: cx('sw-nav', className), ...rest });
+}

package/dist/components/SegmentedControl.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+export type SegmentedItem = {
+    id: string;
+    label: ReactNode;
+};
+type SegmentedLabel = {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+} | {
+    'aria-label'?: never;
+    'aria-labelledby': string;
+};
+export type SegmentedControlProps = SegmentedLabel & {
+    items: readonly SegmentedItem[];
+    onChange: (id: string) => void;
+    value: string;
+};
+export declare const SegmentedControl: import("react").ForwardRefExoticComponent<SegmentedControlProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/SegmentedControl.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../class-names.js';
+export const SegmentedControl = forwardRef(function SegmentedControl({ items, onChange, value, ...labelProps }, ref) {
+    function onKeyDown(event) {
+        if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {
+            return;
+        }
+        const index = items.findIndex((item) => item.id === value);
+        if (index < 0) {
+            return;
+        }
+        event.preventDefault();
+        const delta = event.key === 'ArrowRight' ? 1 : -1;
+        const next = items[(index + delta + items.length) % items.length];
+        if (next) {
+            onChange(next.id);
+        }
+    }
+    return (_jsx("div", { ref: ref, className: "sw-segmented", onKeyDown: onKeyDown, role: "radiogroup", ...labelProps, children: items.map((item) => {
+            const selected = item.id === value;
+            return (_jsx("button", { "aria-checked": selected, className: cx('sw-segmented-item', selected && 'sw-segmented-item-selected'), onClick: () => {
+                    if (!selected) {
+                        onChange(item.id);
+                    }
+                }, role: "radio", type: "button", children: item.label }, item.id));
+        }) }));
+});

package/dist/components/Select.d.ts

@@ -0,0 +1,17 @@
+import { type SelectOption } from '../select-list.js';
+import { type FieldSize } from './Field.js';
+export type { SelectOption };
+export type SelectAction = {
+    label: string;
+    onPress: () => void;
+};
+export type SelectProps = {
+    action?: SelectAction;
+    label: string;
+    labelVisuallyHidden?: boolean;
+    onChange: (value: string) => void;
+    options: readonly SelectOption[];
+    size?: FieldSize;
+    value: string;
+};
+export declare function Select({ action, label, labelVisuallyHidden, onChange, options, size, value, }: SelectProps): import("react").JSX.Element;

package/dist/components/Select.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState, } from 'react';
+import { cx } from '../class-names.js';
+import { selectIndexForKey, selectedSelectIndex, } from '../select-list.js';
+import { Stack } from './Stack.js';
+import { Text } from './Text.js';
+function SelectListOption({ action = false, active, children, id, onCommit, onHighlight, selected, }) {
+    return (_jsx("div", { "aria-selected": selected, className: cx('sw-select-option', action && 'sw-select-action'), "data-active": active ? 'true' : undefined, id: id, onClick: onCommit, onPointerDown: (event) => {
+            event.preventDefault();
+        }, onPointerMove: onHighlight, role: "option", children: children }));
+}
+export function Select({ action, label, labelVisuallyHidden = false, onChange, options, size = 'md', value, }) {
+    const labelId = useId();
+    const triggerId = useId();
+    const listId = useId();
+    const optionIdPrefix = useId();
+    const rootRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [highlight, setHighlight] = useState(0);
+    const selectedIndex = selectedSelectIndex(options, value);
+    const selected = options[selectedIndex];
+    const actionIndex = options.length;
+    const itemCount = action ? actionIndex + 1 : actionIndex;
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        function onPointerDown(event) {
+            if (!rootRef.current?.contains(event.target)) {
+                setOpen(false);
+            }
+        }
+        document.addEventListener('pointerdown', onPointerDown);
+        return () => {
+            document.removeEventListener('pointerdown', onPointerDown);
+        };
+    }, [open]);
+    function openList() {
+        if (itemCount === 0) {
+            return;
+        }
+        setHighlight(selectedIndex);
+        setOpen(true);
+    }
+    function commit(index) {
+        if (action && index === actionIndex) {
+            action.onPress();
+            setOpen(false);
+            return;
+        }
+        const option = options[index];
+        if (option && option.value !== value) {
+            onChange(option.value);
+        }
+        setOpen(false);
+    }
+    function onTriggerKeyDown(event) {
+        if (event.key === 'Escape' && open) {
+            event.preventDefault();
+            event.stopPropagation();
+            setOpen(false);
+            return;
+        }
+        if (!open) {
+            if (event.key === 'ArrowDown' ||
+                event.key === 'ArrowUp' ||
+                event.key === 'Enter' ||
+                event.key === ' ') {
+                event.preventDefault();
+                openList();
+            }
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            commit(highlight);
+            return;
+        }
+        const next = selectIndexForKey(event.key, highlight, itemCount);
+        if (next !== null) {
+            event.preventDefault();
+            setHighlight(next);
+        }
+    }
+    return (_jsx("div", { ref: rootRef, className: cx('sw-select', size === 'xs' && 'sw-select-xs'), children: _jsxs(Stack, { gap: labelVisuallyHidden ? 0 : 1, children: [_jsx(Text, { as: "label", className: labelVisuallyHidden ? 'sw-sr-only' : undefined, htmlFor: triggerId, id: labelId, variant: size === 'xs' ? 'caption' : 'label', children: label }), _jsxs("div", { className: "sw-select-control", children: [_jsx("button", { "aria-activedescendant": open ? `${optionIdPrefix}-${highlight}` : undefined, "aria-controls": open ? listId : undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-labelledby": labelId, className: "sw-select-trigger", id: triggerId, onBlur: (event) => {
+                                const next = event.relatedTarget;
+                                if (next instanceof Node && rootRef.current?.contains(next)) {
+                                    return;
+                                }
+                                setOpen(false);
+                            }, onClick: () => {
+                                if (open) {
+                                    setOpen(false);
+                                    return;
+                                }
+                                openList();
+                            }, onKeyDown: onTriggerKeyDown, role: "combobox", type: "button", children: selected?.label ?? '' }), open ? (_jsxs("div", { "aria-labelledby": labelId, className: "sw-select-list", id: listId, role: "listbox", children: [options.map((option, index) => (_jsx(SelectListOption, { active: index === highlight, id: `${optionIdPrefix}-${index}`, onCommit: () => {
+                                        commit(index);
+                                    }, onHighlight: () => {
+                                        setHighlight(index);
+                                    }, selected: option.value === value, children: option.label }, option.value))), action ? (_jsx(SelectListOption, { action: true, active: highlight === actionIndex, id: `${optionIdPrefix}-${actionIndex}`, onCommit: () => {
+                                        commit(actionIndex);
+                                    }, onHighlight: () => {
+                                        setHighlight(actionIndex);
+                                    }, selected: false, children: action.label })) : null] })) : null] })] }) }));
+}

package/dist/components/Split.d.ts

@@ -0,0 +1,8 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type SplitProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    children: ReactNode;
+    label: string;
+    collapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+};
+export declare function Split({ children, className, collapsed: collapsedProp, label, onCollapsedChange, ...rest }: SplitProps): import("react").JSX.Element;

package/dist/components/Split.js

@@ -0,0 +1,117 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { spacingScale } from '@scalewing/tokens';
+import { useCallback, useId, useLayoutEffect, useRef, useState, } from 'react';
+import { cx } from '../class-names.js';
+import { applySplitDrag, applySplitKey, cssLengthToPx, effectiveSplitMax, readSplitMetrics, splitPercent, } from '../split-size.js';
+function metricsFrom(node) {
+    const styles = getComputedStyle(node);
+    const remPx = cssLengthToPx(getComputedStyle(document.documentElement).fontSize) || 16;
+    return readSplitMetrics((name) => styles.getPropertyValue(name), remPx);
+}
+export function Split({ children, className, collapsed: collapsedProp, label, onCollapsedChange, ...rest }) {
+    const paneId = useId();
+    const splitRef = useRef(null);
+    const handleRef = useRef(null);
+    const dragRef = useRef(null);
+    const [width, setWidth] = useState(null);
+    const [range, setRange] = useState(null);
+    const [collapsedUncontrolled, setCollapsedUncontrolled] = useState(false);
+    const collapsed = collapsedProp ?? collapsedUncontrolled;
+    const setCollapsed = useCallback((next) => {
+        onCollapsedChange?.(next);
+        if (collapsedProp === undefined) {
+            setCollapsedUncontrolled(next);
+        }
+    }, [collapsedProp, onCollapsedChange]);
+    useLayoutEffect(() => {
+        const node = splitRef.current;
+        if (!node) {
+            return;
+        }
+        const measured = metricsFrom(node);
+        setRange({ min: measured.min, max: measured.max });
+        setWidth((current) => current ?? measured.defaultWidth);
+    }, []);
+    function dragMetrics() {
+        const split = splitRef.current;
+        const handle = handleRef.current;
+        if (!split) {
+            return { min: 0, max: 0, step: 16, defaultWidth: 0 };
+        }
+        const measured = metricsFrom(split);
+        const parentWidth = split.parentElement?.getBoundingClientRect().width ?? 0;
+        const handleWidth = handle?.getBoundingClientRect().width ?? 0;
+        return {
+            ...measured,
+            max: effectiveSplitMax(measured.max, parentWidth, handleWidth, measured.min),
+        };
+    }
+    function currentSnapshot() {
+        const measured = dragMetrics();
+        return {
+            collapsed,
+            width: width ?? measured.defaultWidth,
+        };
+    }
+    function applySnapshot(next) {
+        setWidth(next.width);
+        if (next.collapsed !== collapsed) {
+            setCollapsed(next.collapsed);
+        }
+    }
+    function onPointerDown(event) {
+        if (event.button !== 0 || !splitRef.current) {
+            return;
+        }
+        event.preventDefault();
+        event.currentTarget.focus();
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        dragRef.current = {
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            snapshot: currentSnapshot(),
+            metrics: dragMetrics(),
+            moved: false,
+        };
+    }
+    function onPointerMove(event) {
+        const drag = dragRef.current;
+        if (!drag || event.pointerId !== drag.pointerId) {
+            return;
+        }
+        const delta = event.clientX - drag.startX;
+        if (Math.abs(delta) >= spacingScale[1]) {
+            drag.moved = true;
+        }
+        applySnapshot(applySplitDrag(drag.snapshot, delta, drag.metrics));
+    }
+    function endDrag(event) {
+        const drag = dragRef.current;
+        if (!drag || event.pointerId !== drag.pointerId) {
+            return;
+        }
+        dragRef.current = null;
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+        if (!drag.moved && drag.snapshot.collapsed) {
+            setCollapsed(false);
+        }
+    }
+    function onKeyDown(event) {
+        if (!splitRef.current) {
+            return;
+        }
+        const next = applySplitKey(event.key, currentSnapshot(), dragMetrics());
+        if (!next) {
+            return;
+        }
+        event.preventDefault();
+        applySnapshot(next);
+    }
+    const valueNow = collapsed
+        ? 0
+        : range && width !== null
+            ? splitPercent(width, range.min, range.max)
+            : 0;
+    return (_jsxs("div", { ...rest, ref: splitRef, className: cx('sw-split', className), "data-collapsed": collapsed ? '' : undefined, children: [_jsx("div", { className: "sw-split-pane", id: paneId, "aria-hidden": collapsed || undefined, style: width === null ? undefined : { width: `${width}px` }, children: children }), _jsx("div", { ref: handleRef, "aria-controls": paneId, "aria-label": collapsed ? `Show ${label}` : `Resize ${label}`, "aria-orientation": "vertical", "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": valueNow, className: "sw-split-handle", onKeyDown: onKeyDown, onPointerCancel: endDrag, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, role: "separator", tabIndex: 0, children: _jsx("span", { "aria-hidden": "true", className: "sw-split-grip" }) })] }));
+}

package/dist/components/Table.d.ts

@@ -0,0 +1,32 @@
+import { type HTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes } from 'react';
+export type TableDensity = 'comfortable' | 'compact';
+export type TableProps = HTMLAttributes<HTMLTableElement> & {
+    density?: TableDensity;
+    stickyHeader?: boolean;
+};
+export declare const Table: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & {
+    density?: TableDensity;
+    stickyHeader?: boolean;
+} & import("react").RefAttributes<HTMLTableElement>>;
+export type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
+export declare const TableHeader: import("react").ForwardRefExoticComponent<TableHeaderProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+export type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
+export declare const TableBody: import("react").ForwardRefExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+export type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
+    selected?: boolean;
+};
+export declare const TableRow: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & {
+    selected?: boolean;
+} & import("react").RefAttributes<HTMLTableRowElement>>;
+type TableCellAlign = 'start' | 'end';
+export type TableCellProps = ((TdHTMLAttributes<HTMLTableCellElement> & {
+    as?: 'td';
+}) | (ThHTMLAttributes<HTMLTableCellElement> & {
+    as: 'th';
+})) & {
+    align?: TableCellAlign;
+    numeric?: boolean;
+    truncate?: boolean;
+};
+export declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+export {};

package/dist/components/Table.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from 'react';
+import { cx } from '../class-names.js';
+export const Table = forwardRef(function Table({ children, className, density = 'comfortable', stickyHeader = true, ...rest }, ref) {
+    return (_jsx("div", { className: "sw-table-wrap", children: _jsx("table", { ref: ref, className: cx('sw-table', density === 'compact' && 'sw-table-compact', stickyHeader && 'sw-table-sticky', className), ...rest, children: children }) }));
+});
+export const TableHeader = forwardRef(function TableHeader({ className, ...rest }, ref) {
+    return _jsx("thead", { ref: ref, className: className, ...rest });
+});
+export const TableBody = forwardRef(function TableBody({ className, ...rest }, ref) {
+    return _jsx("tbody", { ref: ref, className: className, ...rest });
+});
+export const TableRow = forwardRef(function TableRow({ className, selected = false, ...rest }, ref) {
+    return (_jsx("tr", { ref: ref, "aria-selected": selected || undefined, className: cx(selected && 'sw-table-row-selected', className), ...rest }));
+});
+export const TableCell = forwardRef(function TableCell({ align = 'start', as = 'td', className, numeric = false, truncate = false, ...rest }, ref) {
+    const Component = as;
+    const alignmentClass = numeric
+        ? 'sw-table-numeric'
+        : align === 'end'
+            ? 'sw-table-end'
+            : undefined;
+    return (_jsx(Component, { ref: ref, className: cx(alignmentClass, truncate && 'sw-table-clip', className), ...rest }));
+});