@scalewing/react 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @scalewing/react
 
+## 0.7.0
+
+### Minor Changes
+
+- 630bed9: Add wrapping, accessible FilterChips for long single-choice filter sets.
+- fad8f45: Add an accessible React ActionMenu with generated token styling for independent commands.
+- 1d69e34: Add a controlled date-only DateField with native calendar behavior and generated styling.
+- 05e23f5: Add stable hint, error, and required semantics to Field with generated invalid styling.
+- b718519: Add supplementary Tooltip help for labelled triggers with keyboard, pointer, and touch access.
+- 9e47362: Add a controlled native Checkbox with generated token styling, validation copy, and accessible form semantics.
+- 6dac120: Add a controlled React Switch with native checkbox semantics and generated token styling.
+- 39a85a4: Add an accessible indeterminate Spinner with generated animation, size variants, and reduced-motion styling.
+- de943eb: Add measured Progress with native progressbar semantics and generated tone styling.
+- b0ce196: Add a controlled native RadioGroup with token-generated styling and long-label form choices.
+- 944f7ef: Add semantic and decorative horizontal or vertical separators with generated token styling.
+
+### Patch Changes
+
+- Updated dependencies [630bed9]
+- Updated dependencies [fad8f45]
+- Updated dependencies [1d69e34]
+- Updated dependencies [05e23f5]
+- Updated dependencies [b718519]
+- Updated dependencies [9e47362]
+- Updated dependencies [6dac120]
+- Updated dependencies [39a85a4]
+- Updated dependencies [de943eb]
+- Updated dependencies [b0ce196]
+- Updated dependencies [944f7ef]
+  - @scalewing/tokens@0.7.0
+
+## 0.6.1
+
+### Patch Changes
+
+- Keep public package versions aligned with the native TabBar accessibility
+  correction. No DOM renderer API changed.
+- Updated dependencies
+  - @scalewing/tokens@0.6.1
+
 ## 0.6.0
 
 ### Minor Changes

package/README.md

@@ -7,12 +7,22 @@ import '@scalewing/react/styles.css';
 import '@scalewing/react/palette/cerulean.css';
 import {
   Accordion,
+  ActionMenu,
   BarChart,
   Box,
   Button,
   Card,
+  Checkbox,
+  RadioGroup,
+  Spinner,
+  Progress,
+  Tooltip,
+  Separator,
+  FilterChips,
+  DateField,
   Field,
   Select,
+  Switch,
   Split,
   Stack,
   Text,
@@ -32,6 +42,57 @@ import {
 
 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.
+`Box as="a"` is a layout link. Use `Button` for press actions. `Field` associates 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.
+
+`Field` supports optional `description`, `error`, and `required` on one native input, select, or textarea child. It preserves an existing `aria-describedby`, appends a stable message ID, and replaces the hint with an alert when an error is supplied. `error` sets `aria-invalid` and token-owned invalid styling. The consumer owns validation and localized messages.
+
+`ActionMenu` opens independent commands from a labelled button. Provide localized command labels and callbacks; use `disabled` for unavailable commands and `destructive` for a dangerous command's presentation. Escape returns focus to the trigger, and outside interaction dismisses the menu.
+
+`Switch` is a controlled on/off input. It keeps native checkbox keyboard behavior and exposes switch semantics. Provide the current `checked` value and update it in `onCheckedChange`.
+
+`Checkbox` is a controlled native checkbox for one independent form or confirmation choice. `checked` and `onCheckedChange` own its state. The consumer supplies `error` after validation to announce and style an invalid choice; `required` retains native form semantics.
+
+`RadioGroup` is a controlled fieldset of native radio choices. Supply a unique nonempty `value` for each option, one selected `value` or an empty value for no selection, a `legend`, and `onChange`. Long labels wrap in a vertical group. The consumer provides localized option labels and validation `error`; `required` keeps native form semantics.
+
+`Spinner` shows indeterminate loading in small, medium, or large sizes. Supply localized `label` for the one announced status in a loading region. Use `decorative` on additional indicators beside that status so screen readers do not hear the same message repeatedly. Reduced motion leaves a static accented ring.
+
+`Progress` shows a known value between zero and a positive maximum. It uses native progressbar semantics and displays the value and maximum beside the localized label. Invalid bounds throw instead of silently clamping. Optional `tone` is `accent`, `success`, or `danger`.
+
+`Tooltip` adds supplementary plain-text help to one labelled, focusable trigger. Supply localized `content` and an existing trigger element with its own accessible name. It opens on hover or focus, closes on pointer leave, blur, Escape, or outside touch, and toggles on touch. Keep required instructions visible outside the tooltip.
+
+`Separator` divides sections with a token-colored line. It is horizontal by default; use `orientation="vertical"` in a flex row. Set `decorative` when the line only supports layout so assistive technology ignores it.
+
+`FilterChips` presents a long, wrapping single-choice filter set. Provide a localized group `label`, controlled `value`, `onChange`, and options with stable values and localized labels. Counts belong in those labels. Native radios provide arrow and Space navigation; disabled options are skipped.
+
+`DateField` is a controlled native date input. Supply `value`, `min`, and `max` as valid `YYYY-MM-DD` dates; use an empty `value` for a blank field. Its callback returns a date-only string or an empty string, without timezone conversion. Invalid serialized dates and inverted bounds throw; a value outside the bounds remains visible with invalid styling. For a blank required field, supply `error` when form validation runs to show the message and invalid styling. The browser chooses the calendar and localized display.
+
+```tsx
+<DateField
+  label="Sighting date"
+  value={sightingDate}
+  onChange={setSightingDate}
+  min="2024-01-01"
+  max="2024-12-31"
+/>
+```
+
+```tsx
+<Switch
+  label="Active habitats only"
+  checked={activeOnly}
+  onCheckedChange={setActiveOnly}
+  description="Hide archived habitats"
+/>
+```
+
+```tsx
+<ActionMenu
+  label="Sighting actions"
+  items={[
+    { id: 'share', label: 'Share', onSelect: shareSighting },
+    { id: 'archive', label: 'Archive', onSelect: archiveSighting },
+  ]}
+/>
+```
 
 React is a peer dependency. Rationale: the host app already owns the React runtime.

package/dist/components/ActionMenu.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+export type ActionMenuItem = {
+    id: string;
+    label: string;
+    onSelect: () => void;
+    icon?: ReactNode;
+    disabled?: boolean;
+    destructive?: boolean;
+};
+export type ActionMenuProps = {
+    label: string;
+    items: readonly ActionMenuItem[];
+    trigger?: ReactNode;
+    disabled?: boolean;
+};
+export declare function ActionMenu({ label, items, trigger, disabled, }: ActionMenuProps): import("react").JSX.Element;

package/dist/components/ActionMenu.js

@@ -0,0 +1,142 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useRef, useState, } from 'react';
+import { cx } from '../class-names.js';
+function nextEnabled(items, current, direction) {
+    if (items.length === 0)
+        return -1;
+    for (let step = 1; step <= items.length; step += 1) {
+        const index = (current + direction * step + items.length) % items.length;
+        if (!items[index]?.disabled)
+            return index;
+    }
+    return -1;
+}
+export function ActionMenu({ label, items, trigger, disabled = false, }) {
+    const menuId = useId();
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+    const openRef = useRef(false);
+    const [open, setOpen] = useState(false);
+    const [focusIndex, setFocusIndex] = useState(-1);
+    const enabled = !disabled && items.some((item) => !item.disabled);
+    useLayoutEffect(() => {
+        if (!enabled && open)
+            close();
+    }, [enabled, open]);
+    function close(restoreFocus = false) {
+        openRef.current = false;
+        setOpen(false);
+        if (restoreFocus)
+            triggerRef.current?.focus();
+    }
+    function openMenu(last = false) {
+        if (!enabled)
+            return;
+        const index = last
+            ? nextEnabled(items, 0, -1)
+            : nextEnabled(items, items.length - 1, 1);
+        openRef.current = true;
+        setFocusIndex(index);
+        setOpen(true);
+    }
+    function positionMenu() {
+        const triggerNode = triggerRef.current;
+        const menuNode = menuRef.current;
+        if (!triggerNode || !menuNode)
+            return;
+        const rect = triggerNode.getBoundingClientRect();
+        const width = menuNode.offsetWidth;
+        const height = menuNode.offsetHeight;
+        menuNode.style.left = `${Math.max(0, Math.min(rect.left, window.innerWidth - width))}px`;
+        menuNode.style.top = `${Math.max(0, rect.bottom + height <= window.innerHeight ? rect.bottom : rect.top - height)}px`;
+    }
+    useLayoutEffect(() => {
+        const menuNode = menuRef.current;
+        if (!menuNode)
+            return;
+        const supportsPopover = typeof menuNode.showPopover === 'function';
+        if (supportsPopover)
+            menuNode.setAttribute('popover', 'manual');
+        if (!open) {
+            if (supportsPopover && menuNode.matches(':popover-open'))
+                menuNode.hidePopover();
+            return;
+        }
+        if (supportsPopover && !menuNode.matches(':popover-open'))
+            menuNode.showPopover();
+        positionMenu();
+        const commands = menuNode.querySelectorAll('[role="menuitem"]');
+        commands[focusIndex]?.focus();
+    }, [focusIndex, open]);
+    useLayoutEffect(() => {
+        if (!open)
+            return;
+        function onPointerDown(event) {
+            const target = event.target;
+            if (target instanceof Node && !rootRef.current?.contains(target))
+                close();
+        }
+        function onMove() {
+            positionMenu();
+        }
+        document.addEventListener('pointerdown', onPointerDown);
+        window.addEventListener('resize', onMove);
+        window.addEventListener('scroll', onMove, true);
+        return () => {
+            document.removeEventListener('pointerdown', onPointerDown);
+            window.removeEventListener('resize', onMove);
+            window.removeEventListener('scroll', onMove, true);
+        };
+    }, [open]);
+    function onTriggerKeyDown(event) {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            openMenu(event.key === 'ArrowUp');
+        }
+        else if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            if (open)
+                close(true);
+            else
+                openMenu();
+        }
+    }
+    function onMenuKeyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            close(true);
+            return;
+        }
+        let next = -1;
+        if (event.key === 'ArrowDown')
+            next = nextEnabled(items, focusIndex, 1);
+        else if (event.key === 'ArrowUp')
+            next = nextEnabled(items, focusIndex, -1);
+        else if (event.key === 'Home')
+            next = nextEnabled(items, items.length - 1, 1);
+        else if (event.key === 'End')
+            next = nextEnabled(items, 0, -1);
+        else if (event.key === 'Tab') {
+            close();
+            return;
+        }
+        if (next >= 0) {
+            event.preventDefault();
+            setFocusIndex(next);
+        }
+    }
+    function select(item) {
+        if (!openRef.current || !enabled || item.disabled)
+            return;
+        close();
+        item.onSelect();
+    }
+    return (_jsxs("div", { className: "sw-action-menu", ref: rootRef, children: [_jsx("button", { "aria-controls": open ? menuId : undefined, "aria-expanded": open, "aria-haspopup": "menu", "aria-label": label, className: "sw-action-menu-trigger", disabled: !enabled, onClick: () => (open ? close(true) : openMenu()), onKeyDown: onTriggerKeyDown, ref: triggerRef, type: "button", children: trigger ?? label }), _jsx("div", { "aria-label": label, className: "sw-action-menu-list", hidden: !open, id: menuId, onKeyDown: onMenuKeyDown, ref: menuRef, role: "menu", children: items.map((item, index) => (_jsxs("button", { className: cx('sw-action-menu-item', item.destructive && 'sw-action-menu-item-danger'), disabled: item.disabled, onClick: () => select(item), onFocus: () => setFocusIndex(index), onKeyDown: (event) => {
+                        if (event.key === 'Enter' || event.key === ' ') {
+                            event.preventDefault();
+                            select(item);
+                        }
+                    }, role: "menuitem", tabIndex: index === focusIndex ? 0 : -1, type: "button", children: [item.icon ? _jsx("span", { "aria-hidden": "true", children: item.icon }) : null, _jsx("span", { children: item.label })] }, item.id))) })] }));
+}

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>, "type" | "onClick"> & {
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "type"> & {
     children: ReactNode;
     onPress: () => void;
     size?: ButtonSize;

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,10 @@
+export type CheckboxProps = {
+    label: string;
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled?: boolean;
+    required?: boolean;
+    description?: string;
+    error?: string;
+};
+export declare function Checkbox({ label, checked, onCheckedChange, disabled, required, description, error, }: CheckboxProps): import("react").JSX.Element;

package/dist/components/Checkbox.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+export function Checkbox({ label, checked, onCheckedChange, disabled = false, required = false, description, error, }) {
+    const descriptionId = useId();
+    const errorId = useId();
+    const describedBy = [
+        description ? descriptionId : null,
+        error ? errorId : null,
+    ]
+        .filter((id) => id !== null)
+        .join(' ');
+    return (_jsxs("div", { className: "sw-checkbox", children: [_jsxs("label", { className: "sw-checkbox-label", children: [_jsxs("span", { className: "sw-checkbox-control", children: [_jsx("input", { "aria-describedby": describedBy || undefined, "aria-invalid": Boolean(error), checked: checked, className: "sw-checkbox-input", disabled: disabled, onChange: (event) => {
+                                    if (!disabled)
+                                        onCheckedChange(event.currentTarget.checked);
+                                }, required: required, type: "checkbox" }), _jsx("span", { "aria-hidden": "true", className: "sw-checkbox-mark" })] }), _jsx("span", { className: "sw-checkbox-text", children: label })] }), description ? (_jsx("span", { className: "sw-checkbox-description", id: descriptionId, children: description })) : null, error ? (_jsx("span", { className: "sw-checkbox-error", id: errorId, children: error })) : null] }));
+}

package/dist/components/DateField.d.ts

@@ -0,0 +1,12 @@
+export type DateFieldProps = {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    required?: boolean;
+    description?: string;
+    error?: string;
+};
+export declare function DateField({ label, value, onChange, min, max, disabled, required, description, error, }: DateFieldProps): import("react").JSX.Element;

package/dist/components/DateField.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { assertDateOnly, isDateOnly, isOutsideDateRange, } from '../date-only.js';
+export function DateField({ label, value, onChange, min, max, disabled = false, required = false, description, error, }) {
+    assertDateOnly('value', value, true);
+    if (min !== undefined)
+        assertDateOnly('min', min);
+    if (max !== undefined)
+        assertDateOnly('max', max);
+    if (min !== undefined && max !== undefined && min > max)
+        throw new RangeError('min must not be after max');
+    const inputId = useId();
+    const descriptionId = useId();
+    const errorId = useId();
+    const describedBy = [
+        description ? descriptionId : null,
+        error ? errorId : null,
+    ]
+        .filter((id) => id !== null)
+        .join(' ');
+    const invalid = Boolean(error) || isOutsideDateRange(value, min, max);
+    return (_jsxs("div", { className: "sw-date-field", children: [_jsx("label", { className: "sw-date-field-label", htmlFor: inputId, children: label }), _jsx("input", { "aria-describedby": describedBy || undefined, "aria-invalid": invalid, className: "sw-date-field-input", disabled: disabled, id: inputId, max: max, min: min, onChange: (event) => {
+                    const next = event.currentTarget.value;
+                    if (!disabled &&
+                        !event.currentTarget.validity.badInput &&
+                        (next === '' || isDateOnly(next)))
+                        onChange(next);
+                }, required: required, type: "date", value: value }), description ? (_jsx("span", { className: "sw-date-field-description", id: descriptionId, children: description })) : null, error ? (_jsx("span", { className: "sw-date-field-error", id: errorId, children: error })) : null] }));
+}

package/dist/components/Field.d.ts

@@ -7,5 +7,8 @@ export type FieldProps = {
     label: string;
     labelVisuallyHidden?: boolean;
     size?: FieldSize;
+    description?: string;
+    error?: string;
+    required?: boolean;
 };
-export declare function Field({ children, gap, label, labelVisuallyHidden, size, }: FieldProps): import("react").JSX.Element;
+export declare function Field({ children, gap, label, labelVisuallyHidden, size, description, error, required, }: FieldProps): import("react").JSX.Element;

package/dist/components/Field.js

@@ -1,6 +1,39 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useId } from 'react';
 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] }));
+export function Field({ children, gap = 1, label, labelVisuallyHidden = false, size = 'md', description, error, required = false, }) {
+    const controlId = useId();
+    const messageId = useId();
+    const message = error || description;
+    const needsControl = Boolean(message || required);
+    const className = [
+        'sw-field',
+        size === 'xs' && 'sw-field-xs',
+        error && 'sw-field-invalid',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const labelText = (_jsxs(Text, { as: "span", className: labelVisuallyHidden ? 'sw-sr-only' : undefined, variant: size === 'xs' ? 'caption' : 'label', children: [label, required ? (_jsxs("span", { "aria-hidden": "true", className: "sw-field-required", children: [' ', "*"] })) : null] }));
+    if (!isValidElement(children) ||
+        typeof children.type !== 'string' ||
+        !['input', 'select', 'textarea'].includes(children.type)) {
+        if (needsControl)
+            throw new TypeError('Field validation requires one native input, select, or textarea child');
+        return (_jsxs(Stack, { as: "label", className: className, gap: labelVisuallyHidden ? 0 : gap, children: [labelText, children] }));
+    }
+    const describedBy = [
+        children.props['aria-describedby'],
+        message ? messageId : null,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const control = cloneElement(children, {
+        id: children.props.id || controlId,
+        'aria-describedby': describedBy || undefined,
+        'aria-invalid': error ? true : children.props['aria-invalid'],
+        required: required || children.props.required,
+    });
+    return (_jsxs(Stack, { as: "div", className: className, gap: labelVisuallyHidden ? 0 : gap, children: [_jsx("label", { htmlFor: children.props.id || controlId, children: labelText }), control, message ? (_jsx("span", { className: error ? 'sw-field-error' : 'sw-field-description', id: messageId, role: error ? 'alert' : undefined, children: message })) : null] }));
 }

package/dist/components/FilterChips.d.ts

@@ -0,0 +1,12 @@
+export type FilterChipOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export type FilterChipsProps = {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    options: readonly FilterChipOption[];
+};
+export declare function FilterChips({ label, value, onChange, options, }: FilterChipsProps): import("react").JSX.Element;

package/dist/components/FilterChips.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+export function FilterChips({ label, value, onChange, options, }) {
+    const name = useId();
+    const values = options.map((option) => option.value);
+    if (!label.trim())
+        throw new RangeError('label must not be empty');
+    if (options.length === 0 ||
+        options.some((option) => !option.value.trim() || !option.label.trim()))
+        throw new RangeError('options must have nonempty values and labels');
+    if (new Set(values).size !== values.length)
+        throw new RangeError('options must have unique values');
+    if (!values.includes(value))
+        throw new RangeError('value must match an option');
+    return (_jsxs("fieldset", { className: "sw-filter-chips", children: [_jsx("legend", { className: "sw-filter-chips-legend", children: label }), _jsx("span", { className: "sw-filter-chips-options", children: options.map((option) => (_jsxs("label", { className: "sw-filter-chip", children: [_jsx("input", { checked: option.value === value, className: "sw-filter-chip-input", disabled: option.disabled, name: name, onChange: (event) => {
+                                if (event.currentTarget.checked && !option.disabled)
+                                    onChange(option.value);
+                            }, type: "radio", value: option.value }), _jsx("span", { className: "sw-filter-chip-face", children: option.label })] }, option.value))) })] }));
+}

package/dist/components/Progress.d.ts

@@ -0,0 +1,8 @@
+export type ProgressTone = 'accent' | 'success' | 'danger';
+export type ProgressProps = {
+    label: string;
+    value: number;
+    max: number;
+    tone?: ProgressTone;
+};
+export declare function Progress({ label, value, max, tone, }: ProgressProps): import("react").JSX.Element;

package/dist/components/Progress.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+export function Progress({ label, value, max, tone = 'accent', }) {
+    if (!label.trim())
+        throw new RangeError('label must not be empty');
+    if (!Number.isFinite(max) || max <= 0)
+        throw new RangeError('max must be a positive finite number');
+    if (!Number.isFinite(value) || value < 0 || value > max)
+        throw new RangeError('value must be finite and within 0..max');
+    const labelId = useId();
+    return (_jsxs("div", { className: `sw-progress sw-progress-${tone}`, children: [_jsxs("div", { className: "sw-progress-heading", children: [_jsx("span", { className: "sw-progress-label", id: labelId, children: label }), _jsxs("span", { "aria-hidden": "true", className: "sw-progress-count", children: [value, " / ", max] })] }), _jsx("progress", { "aria-labelledby": labelId, className: "sw-progress-bar", max: max, value: value })] }));
+}

package/dist/components/RadioGroup.d.ts

@@ -0,0 +1,16 @@
+export type RadioGroupOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export type RadioGroupProps = {
+    legend: string;
+    value: string;
+    onChange: (value: string) => void;
+    options: readonly RadioGroupOption[];
+    required?: boolean;
+    disabled?: boolean;
+    description?: string;
+    error?: string;
+};
+export declare function RadioGroup({ legend, value, onChange, options, required, disabled, description, error, }: RadioGroupProps): import("react").JSX.Element;

package/dist/components/RadioGroup.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+export function RadioGroup({ legend, value, onChange, options, required = false, disabled = false, description, error, }) {
+    const name = useId();
+    const descriptionId = useId();
+    const errorId = useId();
+    const describedBy = [
+        description ? descriptionId : null,
+        error ? errorId : null,
+    ]
+        .filter((id) => id !== null)
+        .join(' ');
+    const values = options.map((option) => option.value);
+    if (options.length === 0 || values.some((option) => option === ''))
+        throw new RangeError('options must have nonempty values');
+    if (new Set(values).size !== values.length)
+        throw new RangeError('options must have unique values');
+    if (value !== '' && !values.includes(value))
+        throw new RangeError('value must match an option or be empty');
+    return (_jsxs("fieldset", { "aria-describedby": describedBy || undefined, "aria-invalid": Boolean(error), className: "sw-radio-group", disabled: disabled, children: [_jsx("legend", { className: "sw-radio-group-legend", children: legend }), description ? (_jsx("span", { className: "sw-radio-group-description", id: descriptionId, children: description })) : null, _jsx("span", { className: "sw-radio-group-options", children: options.map((option) => (_jsxs("label", { className: "sw-radio-group-option", children: [_jsxs("span", { className: "sw-radio-group-control", children: [_jsx("input", { checked: value === option.value, className: "sw-radio-group-input", disabled: option.disabled, name: name, onChange: (event) => {
+                                        if (!disabled &&
+                                            !option.disabled &&
+                                            event.currentTarget.checked)
+                                            onChange(option.value);
+                                    }, required: required, type: "radio", value: option.value }), _jsx("span", { "aria-hidden": "true", className: "sw-radio-group-mark" })] }), _jsx("span", { className: "sw-radio-group-text", children: option.label })] }, option.value))) }), error ? (_jsx("span", { className: "sw-radio-group-error", id: errorId, children: error })) : null] }));
+}

package/dist/components/Separator.d.ts

@@ -0,0 +1,6 @@
+export type SeparatorOrientation = 'horizontal' | 'vertical';
+export type SeparatorProps = {
+    orientation?: SeparatorOrientation;
+    decorative?: boolean;
+};
+export declare function Separator({ orientation, decorative, }: SeparatorProps): import("react").JSX.Element;

package/dist/components/Separator.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Separator({ orientation = 'horizontal', decorative = false, }) {
+    return (_jsx("div", { "aria-hidden": decorative ? 'true' : undefined, "aria-orientation": decorative ? undefined : orientation, className: `sw-separator sw-separator-${orientation}`, role: decorative ? 'none' : 'separator' }));
+}

package/dist/components/Spinner.d.ts

@@ -0,0 +1,11 @@
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+export type SpinnerProps = {
+    label: string;
+    size?: SpinnerSize;
+    decorative?: false;
+} | {
+    label?: never;
+    size?: SpinnerSize;
+    decorative: true;
+};
+export declare function Spinner({ label, size, decorative, }: SpinnerProps): import("react").JSX.Element;

package/dist/components/Spinner.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Spinner({ label, size = 'md', decorative = false, }) {
+    const className = `sw-spinner sw-spinner-${size}`;
+    if (decorative)
+        return (_jsx("span", { "aria-hidden": "true", className: className, children: _jsx("span", { className: "sw-spinner-icon" }) }));
+    if (!label?.trim())
+        throw new RangeError('label must not be empty');
+    return (_jsxs("span", { className: className, role: "status", children: [_jsx("span", { "aria-hidden": "true", className: "sw-spinner-icon" }), _jsx("span", { className: "sw-sr-only", children: label })] }));
+}

package/dist/components/Switch.d.ts

@@ -0,0 +1,8 @@
+export type SwitchProps = {
+    label: string;
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled?: boolean;
+    description?: string;
+};
+export declare function Switch({ label, checked, onCheckedChange, disabled, description, }: SwitchProps): import("react").JSX.Element;

package/dist/components/Switch.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+export function Switch({ label, checked, onCheckedChange, disabled = false, description, }) {
+    const labelId = useId();
+    const descriptionId = useId();
+    return (_jsxs("label", { className: "sw-switch", children: [_jsxs("span", { className: "sw-switch-control", children: [_jsx("input", { "aria-checked": checked, "aria-describedby": description ? descriptionId : undefined, "aria-labelledby": labelId, checked: checked, className: "sw-switch-input", disabled: disabled, onChange: (event) => {
+                            if (!disabled)
+                                onCheckedChange(event.currentTarget.checked);
+                        }, role: "switch", type: "checkbox" }), _jsx("span", { "aria-hidden": "true", className: "sw-switch-track", children: _jsx("span", { className: "sw-switch-thumb" }) })] }), _jsxs("span", { className: "sw-switch-copy", children: [_jsx("span", { className: "sw-switch-label", id: labelId, children: label }), description ? (_jsx("span", { className: "sw-switch-description", id: descriptionId, children: description })) : null] })] }));
+}

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,8 @@
+import { type ReactElement } from 'react';
+export type TooltipProps = {
+    content: string;
+    trigger: ReactElement<{
+        'aria-describedby'?: string;
+    }>;
+};
+export declare function Tooltip({ content, trigger }: TooltipProps): import("react").JSX.Element;