@scalewing/react 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @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
+
+- f35314a: Add Box `as="a"` for layout links and Field (label wrapping a native control, token gap) after fantasy-football. Press actions stay on Button; do not use Box as a button.
+- f35314a: Add Button (primary, secondary, ghost, danger; sm and md) for DOM and React Native after FutMas and coach-platform requested the same control. Includes onAccent/onDanger, 44px md hit target, focus ring, and disabled opacity tokens.
+- f35314a: Shift the default visual language to a quiet glass canvas: Apple-like neutrals and type, frosted Card, pill buttons, and generated document styles so links and native text controls are not user-agent chrome.
+
+### Patch Changes
+
+- Updated dependencies [f35314a]
+- Updated dependencies [f35314a]
+  - @scalewing/tokens@0.2.0
+
 ## 0.1.0
 
 ### Minor Changes

package/README.md

@@ -4,13 +4,34 @@ DOM components plus the generated Scalewing stylesheet.
 
 ```ts
 import '@scalewing/react/styles.css';
-import { Card, Stack, Text, ThemeProvider } from '@scalewing/react';
+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. `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

@@ -1,14 +1,14 @@
 import { type RadiusStep, type SemanticColorKey } from '@scalewing/tokens';
-import { type HTMLAttributes } from 'react';
+import { type AnchorHTMLAttributes, type HTMLAttributes } from 'react';
 import { type SpacingProps } from '../spacing-classes.js';
-export type BoxElement = 'div' | 'section' | 'article' | 'header' | 'footer' | 'main' | 'nav' | 'aside' | 'span';
-export type BoxProps = SpacingProps & HTMLAttributes<HTMLElement> & {
+export type BoxElement = 'div' | 'section' | 'article' | 'header' | 'footer' | 'main' | 'nav' | 'aside' | 'span' | 'a' | 'label';
+export type BoxProps = SpacingProps & HTMLAttributes<HTMLElement> & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'download' | 'href' | 'rel' | 'target'> & {
     as?: BoxElement;
     background?: Extract<SemanticColorKey, 'background' | 'surface'>;
     radius?: RadiusStep;
     border?: boolean;
 };
-export declare const Box: import("react").ForwardRefExoticComponent<SpacingProps & HTMLAttributes<HTMLElement> & {
+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/Box.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, } from 'react';
 import { cx } from '../class-names.js';
 import { spacingClassNames } from '../spacing-classes.js';
 export const Box = forwardRef(function Box({ as = 'div', background, border, className, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, radius, style, ...rest }, ref) {

package/dist/components/Button.d.ts

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

package/dist/components/Button.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { buttonClassNames, } from '@scalewing/tokens';
+import { forwardRef } from 'react';
+import { cx } from '../class-names.js';
+export const Button = forwardRef(function Button({ children, className, disabled = false, onPress, size = 'md', type = 'button', variant = 'primary', ...rest }, ref) {
+    return (_jsx("button", { ref: ref, className: cx(...buttonClassNames({ size, variant }), className), disabled: disabled, type: type, ...rest, onClick: onPress, children: children }));
+});

package/dist/components/Card.d.ts

@@ -1,6 +1,6 @@
-import { type SpacingStep } from '@scalewing/tokens';
+import { type SpacingStep, type CardVariant } from '@scalewing/tokens';
 import { type BoxProps } from './Box.js';
-export type CardVariant = 'outlined' | 'elevated';
+export type { CardVariant };
 export type CardProps = Omit<BoxProps, 'as'> & {
     padding?: SpacingStep;
     variant?: CardVariant;

package/dist/components/Card.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../class-names.js';
 import { Box } from './Box.js';
-export function Card({ className, padding = 4, variant = 'outlined', ...rest }) {
-    return (_jsx(Box, { as: "section", className: cx('sw-card', variant === 'elevated' && 'sw-card-elevated', className), padding: padding, ...rest }));
+export function Card({ className, padding = 4, variant = 'glass', ...rest }) {
+    return (_jsx(Box, { as: "section", className: cx('sw-card', `sw-card-${variant}`, className), padding: padding, ...rest }));
 }

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

@@ -0,0 +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, labelVisuallyHidden, size, }: FieldProps): import("react").JSX.Element;

package/dist/components/Field.js

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