@surflane/ui 0.4.0 → 0.6.0

package/dist/progress.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export declare const Progress: {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLSpanElement>>;
+    Value: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLSpanElement>>;
+    Track: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+};
+export declare const ProgressIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, ProgressLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLSpanElement>>, ProgressRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, ProgressTrack: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, ProgressValue: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/progress.js

@@ -0,0 +1,13 @@
+'use client';
+import { Progress as BaseProgress } from '@base-ui/react/progress';
+import { part } from './parts.js';
+export const Progress = {
+    ...BaseProgress,
+    Root: /* @__PURE__ */ part(BaseProgress.Root, 'pui-gauge pui-progress'),
+    Label: /* @__PURE__ */ part(BaseProgress.Label, 'pui-gauge-label'),
+    Value: /* @__PURE__ */ part(BaseProgress.Value, 'pui-gauge-value'),
+    Track: /* @__PURE__ */ part(BaseProgress.Track, 'pui-gauge-track'),
+    Indicator: /* @__PURE__ */ part(BaseProgress.Indicator, 'pui-gauge-indicator'),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export const { Indicator: ProgressIndicator, Label: ProgressLabel, Root: ProgressRoot, Track: ProgressTrack, Value: ProgressValue, } = Progress;

package/dist/radio-group.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
+import { type ChoiceSize } from './choice.js';
+export declare function RadioGroup<Value = string>({ value, defaultValue, onValueChange, className, form, ref, ...props }: BaseRadioGroup.Props<Value>): React.JSX.Element;
+declare const RadioRoot: React.ForwardRefExoticComponent<Omit<BaseRadio.Root.Props<unknown>, "ref"> & ChoiceSize & React.RefAttributes<HTMLSpanElement>>;
+export declare const Radio: {
+    Root: React.ForwardRefExoticComponent<Omit<BaseRadio.Root.Props<unknown>, "ref"> & ChoiceSize & React.RefAttributes<HTMLSpanElement>>;
+    Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/radio").RadioIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLSpanElement>>;
+};
+export { RadioRoot };
+export declare const RadioIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/radio").RadioIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/radio-group.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
+import { skin, part } from './parts.js';
+import { useRootRef, useResetValue } from './form-state.js';
+import { ChoiceResetPaint } from './choice.js';
+export function RadioGroup({ value, defaultValue, onValueChange, className, form, ref, ...props }) {
+    const [element, attach] = useRootRef(ref);
+    const [selected, setSelected, revision] = useResetValue(value, defaultValue ?? null, element, form);
+    return (_jsx(ChoiceResetPaint.Provider, { value: revision, children: _jsx(BaseRadioGroup, { ...props, form: form, ref: attach, value: selected, className: skin('pui-choice-group', className), onValueChange: (next, event) => {
+                onValueChange?.(next, event);
+                if (value === undefined && !event.isCanceled)
+                    setSelected(next);
+            } }) }));
+}
+const RadioRoot = /* @__PURE__ */ React.forwardRef(function RadioRoot({ size, className, ...props }, ref) {
+    React.useContext(ChoiceResetPaint);
+    const scheme = useComponentSize(size);
+    return (_jsx(BaseRadio.Root, { ...props, "data-ui-size": size ? scheme : undefined, ref: ref, className: skin('pui-radio', className) }));
+});
+export const Radio = {
+    ...BaseRadio,
+    Root: RadioRoot,
+    Indicator: /* @__PURE__ */ part(BaseRadio.Indicator, 'pui-radio-indicator'),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { RadioRoot };
+export const { Indicator: RadioIndicator } = Radio;

package/dist/scroll-area.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
+import { cx } from './parts.js';
 export const ScrollArea = /* @__PURE__ */ React.forwardRef(function ScrollArea({ label, orientation = 'horizontal', scrollChain = 'auto', style, rootClassName, rootStyle, tabIndex = label ? 0 : undefined, role = label ? 'region' : undefined, className, children, ...props }, ref) {
     const dragPointer = React.useRef(null);
     const clearDrag = (event) => {
@@ -10,7 +11,7 @@ export const ScrollArea = /* @__PURE__ */ React.forwardRef(function ScrollArea({
         dragPointer.current = null;
         event.currentTarget.removeAttribute('data-scroll-dragging');
     };
-    return (_jsxs(BaseScrollArea.Root, { className: ['pui-scroll-root', rootClassName].filter(Boolean).join(' '), style: rootStyle, onPointerMoveCapture: (event) => {
+    return (_jsxs(BaseScrollArea.Root, { className: cx('pui-scroll-root', rootClassName), style: rootStyle, onPointerMoveCapture: (event) => {
             if (event.pointerType === 'touch')
                 return;
             const root = event.currentTarget;
@@ -27,9 +28,7 @@ export const ScrollArea = /* @__PURE__ */ React.forwardRef(function ScrollArea({
                 dragPointer.current = event.pointerId;
                 event.currentTarget.setAttribute('data-scroll-dragging', bar.getAttribute('data-orientation') ?? '');
             }
-        }, onPointerUpCapture: clearDrag, onPointerCancelCapture: clearDrag, onLostPointerCapture: clearDrag, children: [_jsx(BaseScrollArea.Viewport, { ...props, ref: ref, className: ['pui-scroll-viewport scroll-area', className]
-                    .filter(Boolean)
-                    .join(' '), role: role, "aria-label": label, tabIndex: tabIndex, "data-scroll-orientation": orientation, style: {
+        }, onPointerUpCapture: clearDrag, onPointerCancelCapture: clearDrag, onLostPointerCapture: clearDrag, children: [_jsx(BaseScrollArea.Viewport, { ...props, ref: ref, className: cx('pui-scroll-viewport', className), role: role, "aria-label": label, tabIndex: tabIndex, "data-scroll-orientation": orientation, style: {
                     overflowX: orientation === 'vertical' ? 'hidden' : 'auto',
                     overflowY: orientation === 'horizontal' ? 'hidden' : 'auto',
                     overscrollBehaviorX: orientation === 'vertical' ? 'auto' : scrollChain,

package/dist/select.d.ts

@@ -5,8 +5,13 @@ export type SelectOption = {
     label: React.ReactNode;
     disabled?: boolean;
 };
-export type SelectProps = {
+/** Options under a visible heading, like an HTML optgroup. */
+export type SelectGroup = {
+    label: React.ReactNode;
     options: SelectOption[];
+};
+export type SelectProps = {
+    options: (SelectOption | SelectGroup)[];
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
@@ -24,10 +29,5 @@ export type SelectProps = {
     'aria-describedby'?: string;
     'aria-invalid'?: React.AriaAttributes['aria-invalid'];
 };
-export declare function Select({ options, value, defaultValue, onValueChange, className, inputRef, triggerRef, size, ...props }: SelectProps): React.JSX.Element;
-/** Transitional HTML-option adapter. Submitted values use Base UI's native hidden input. */
-export declare const NativeSelect: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "size" | "multiple"> & {
-    size?: ComponentSizeAlias;
-} & React.RefAttributes<HTMLButtonElement>>;
-export declare function NativeSelectOption(props: React.ComponentProps<'option'>): React.JSX.Element;
-export declare function NativeSelectOptGroup(props: React.ComponentProps<'optgroup'>): React.JSX.Element;
+/** A single-choice list. The ref reaches the trigger button, as triggerRef does. */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/select.js

@@ -1,18 +1,24 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { Icon } from './icon.js';
 import { useComponentSize } from './sizing.js';
 import { Select as BaseSelect } from '@base-ui/react/select';
-import { sizeName } from './parts.js';
-const cx = (...v) => v.filter(Boolean).join(' ');
-function Chevron() {
-    return (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: _jsx("path", { d: 'm7 10 5 5 5-5' }) }));
-}
-function Check() {
-    return (_jsx("svg", { width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: _jsx("path", { d: 'm5 12 4 4L19 6' }) }));
-}
-export function Select({ options, value, defaultValue, onValueChange, className, inputRef, triggerRef, size, ...props }) {
+import { sizeName, cx } from './parts.js';
+const isGroup = (item) => 'options' in item;
+const flatten = (items) => items.flatMap((item) => (isGroup(item) ? item.options : [item]));
+/** A single-choice list. The ref reaches the trigger button, as triggerRef does. */
+export const Select = /* @__PURE__ */ React.forwardRef(function Select({ options: items, value, defaultValue, onValueChange, className, inputRef, triggerRef, size, ...props }, ref) {
     const scheme = useComponentSize(size);
+    const options = flatten(items);
+    // One stable callback, so the trigger ref is not detached on every render.
+    const setTrigger = React.useCallback((node) => {
+        for (const target of [ref, triggerRef])
+            if (typeof target === 'function')
+                target(node);
+            else if (target)
+                target.current = node;
+    }, [ref, triggerRef]);
     const [localValue, setLocalValue] = React.useState(defaultValue ?? options[0]?.value ?? '');
     const nativeInput = React.useRef(null);
     const initialValue = defaultValue ?? options[0]?.value ?? '';
@@ -41,7 +47,7 @@ export function Select({ options, value, defaultValue, onValueChange, className,
     }, [initialValue, props.form]);
     const selected = value ?? localValue;
     const { name, form, required, disabled, id, ...aria } = props;
-    return (_jsx("span", { className: cx('pui-select control-shell select-control', className), "data-size": sizeName(size), "data-ui-size": scheme, "data-disabled": disabled || undefined, children: _jsxs(BaseSelect.Root, { items: options, value: selected, onValueChange: (v) => {
+    return (_jsx("span", { className: cx('pui-select', className), "data-size": sizeName(size), "data-ui-size": scheme, "data-disabled": disabled || undefined, children: _jsxs(BaseSelect.Root, { items: options, value: selected, onValueChange: (v) => {
                 setLocalValue(v ?? '');
                 onValueChange?.(v ?? '');
             }, inputRef: (node) => {
@@ -50,49 +56,8 @@ export function Select({ options, value, defaultValue, onValueChange, className,
                     inputRef(node);
                 else if (inputRef)
                     inputRef.current = node;
-            }, name: name, form: form, required: required, disabled: disabled, id: id, children: [_jsxs(BaseSelect.Trigger, { ...aria, ref: triggerRef, className: 'pui-select-trigger form-control', "data-value": selected, children: [_jsx(BaseSelect.Value, {}), _jsx(BaseSelect.Icon, { className: 'pui-select-icon select-chevron', children: _jsx(Chevron, {}) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { className: 'pui-positioner', sideOffset: 6, alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: 'pui-select-popup', "data-ui-size": scheme, children: _jsx(BaseSelect.List, { children: options.map((o) => (_jsxs(BaseSelect.Item, { className: 'pui-select-item', value: o.value, "data-option-value": o.value, disabled: o.disabled, children: [_jsx(BaseSelect.ItemIndicator, { className: 'pui-select-check', children: _jsx(Check, {}) }), _jsx(BaseSelect.ItemText, { children: o.label })] }, o.value))) }) }) }) })] }) }));
-}
-function optionList(children) {
-    return React.Children.toArray(children).flatMap((child) => {
-        if (!React.isValidElement(child))
-            return [];
-        const p = child.props;
-        if (child.type === React.Fragment ||
-            child.type === 'optgroup' ||
-            child.type === NativeSelectOptGroup)
-            return optionList(p.children);
-        return [
-            {
-                value: String(p.value ?? p.children ?? ''),
-                label: p.label ?? p.children,
-                disabled: p.disabled,
-            },
-        ];
-    });
-}
-/** Transitional HTML-option adapter. Submitted values use Base UI's native hidden input. */
-export const NativeSelect = /* @__PURE__ */ React.forwardRef(function NativeSelect({ children, onChange, value, defaultValue, className, size, ...props }, ref) {
-    const input = React.useRef(null);
-    const options = optionList(children);
-    return (_jsx(Select, { options: options, value: value === undefined ? undefined : String(value), defaultValue: defaultValue === undefined ? undefined : String(defaultValue), className: className, size: size, inputRef: input, triggerRef: ref, name: props.name, form: props.form, disabled: props.disabled, required: props.required, id: props.id, "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-invalid": props['aria-invalid'], onValueChange: (next) => {
-            if (!onChange)
-                return;
-            const target = input.current;
-            if (!target)
-                return;
-            const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
-            setter?.call(target, next);
-            const event = new Event('change', { bubbles: true });
-            Object.defineProperties(event, {
-                target: { value: target },
-                currentTarget: { value: target },
-            });
-            onChange(event);
-        } }));
+            }, name: name, form: form, required: required, disabled: disabled, id: id, children: [_jsxs(BaseSelect.Trigger, { ...aria, ref: setTrigger, className: 'pui-select-trigger', "data-value": selected, children: [_jsx(BaseSelect.Value, {}), _jsx(BaseSelect.Icon, { className: 'pui-select-icon', children: _jsx(Icon, { name: 'chevron-down' }) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { className: 'pui-positioner', sideOffset: 6, alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: 'pui-select-popup', "data-ui-size": scheme, children: _jsx(BaseSelect.List, { children: items.map((item, index) => isGroup(item) ? (_jsxs(BaseSelect.Group, { className: 'pui-select-group', children: [_jsx(BaseSelect.GroupLabel, { className: 'pui-select-group-label', children: item.label }), item.options.map(renderOption)] }, index)) : (renderOption(item))) }) }) }) })] }) }));
 });
-export function NativeSelectOption(props) {
-    return _jsx("option", { ...props });
-}
-export function NativeSelectOptGroup(props) {
-    return _jsx("optgroup", { ...props });
+function renderOption(option) {
+    return (_jsxs(BaseSelect.Item, { className: 'pui-select-item', value: option.value, "data-option-value": option.value, disabled: option.disabled, children: [_jsx(BaseSelect.ItemIndicator, { className: 'pui-select-check', children: _jsx(Icon, { name: 'check' }) }), _jsx(BaseSelect.ItemText, { children: option.label })] }, option.value));
 }

package/dist/separator.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const Separator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/separator").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/separator.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
+import { skin } from './parts.js';
+export const Separator = /* @__PURE__ */ React.forwardRef(function Separator({ inset = false, className, ...props }, ref) {
+    return (_jsx(BaseSeparator, { ...props, ref: ref, "data-inset": inset || undefined, className: skin('pui-separator', className) }));
+});

package/dist/sheet.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { Footer, Header, type PanelOptions, type PanelSide } from './panel.js';
+declare function SheetRoot({ side, modal, ...props }: React.ComponentProps<typeof BaseDialog.Root> & {
+    side?: PanelSide;
+}): React.JSX.Element;
+declare const SheetContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & PanelOptions & React.RefAttributes<HTMLDivElement>>;
+declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof BaseDialog.Title>): React.JSX.Element;
+declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof BaseDialog.Description>): React.JSX.Element;
+export declare const Sheet: {
+    Root: typeof SheetRoot;
+    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & PanelOptions & React.RefAttributes<HTMLDivElement>>;
+    Header: typeof Header;
+    Body: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Footer: typeof Footer;
+    Title: typeof SheetTitle;
+    Description: typeof SheetDescription;
+    Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Popup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Viewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Trigger: BaseDialog.Trigger;
+    createHandle: typeof BaseDialog.createHandle;
+    Handle: typeof BaseDialog.Handle;
+};
+export { SheetDescription, SheetRoot, SheetTitle, SheetContent };
+export declare const SheetBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, SheetClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, SheetHandle: typeof BaseDialog.Handle, SheetPopup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, SheetPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, SheetTrigger: BaseDialog.Trigger, SheetViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>, SheetHeader: typeof Header, SheetBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, SheetFooter: typeof Footer;
+export type { PanelSide } from './panel.js';

package/dist/sheet.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Icon } from './icon.js';
+import { skin } from './parts.js';
+import { useComponentSize, normalizeSize } from './sizing.js';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { Body, Footer, Header, } from './panel.js';
+const SheetSide = /* @__PURE__ */ React.createContext({
+    side: 'right',
+    modal: true,
+});
+function SheetRoot({ side = 'right', modal = true, ...props }) {
+    return (_jsx(SheetSide.Provider, { value: { side, modal }, children: _jsx(BaseDialog.Root, { ...props, modal: modal }) }));
+}
+const SheetContent = /* @__PURE__ */ React.forwardRef(function SheetContent({ size, flush, closeLabel = 'Close panel', className, children, ...props }, ref) {
+    const scheme = useComponentSize(size);
+    const { side, modal } = React.useContext(SheetSide);
+    return (_jsx(BaseDialog.Portal, { children: _jsxs("div", { className: 'pui-panel-layer', "data-ui-size": scheme, children: [modal === true && (_jsx(BaseDialog.Backdrop, { className: 'pui-panel-backdrop' })), _jsx("div", { className: 'pui-panel-viewport', "data-side": side, "data-flush": flush || undefined, children: _jsxs(BaseDialog.Popup, { ...props, ref: ref, className: skin('pui-panel', className), "data-side": side, "data-size": normalizeSize(size) ?? 'default', "data-flush": flush || undefined, children: [_jsx(BaseDialog.Close, { className: 'pui-panel-close pui-icon-button', "aria-label": closeLabel, children: _jsx(Icon, { name: 'close' }) }), children] }) })] }) }));
+});
+function SheetTitle({ className, ...props }) {
+    return (_jsx(BaseDialog.Title, { ...props, className: skin('pui-panel-title', className) }));
+}
+function SheetDescription({ className, ...props }) {
+    return (_jsx(BaseDialog.Description, { ...props, className: skin('pui-panel-description', className) }));
+}
+export const Sheet = {
+    ...BaseDialog,
+    Root: SheetRoot,
+    Content: SheetContent,
+    Header,
+    Body,
+    Footer,
+    Title: SheetTitle,
+    Description: SheetDescription,
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { SheetDescription, SheetRoot, SheetTitle, SheetContent };
+export const { Backdrop: SheetBackdrop, Close: SheetClose, Handle: SheetHandle, Popup: SheetPopup, Portal: SheetPortal, Trigger: SheetTrigger, Viewport: SheetViewport, Header: SheetHeader, Body: SheetBody, Footer: SheetFooter, } = Sheet;

package/dist/skeleton.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export type SkeletonProps = Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {
+    shape?: 'text' | 'block' | 'circle';
+};
+/** Decorative placeholder; the owning region provides aria-busy and loading text. */
+export declare const Skeleton: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children"> & {
+    shape?: "text" | "block" | "circle";
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/skeleton.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cx } from './parts.js';
+/** Decorative placeholder; the owning region provides aria-busy and loading text. */
+export const Skeleton = /* @__PURE__ */ React.forwardRef(function Skeleton({ shape = 'text', className, ...props }, ref) {
+    return (_jsx("span", { ...props, ref: ref, className: cx('pui-skeleton', className), "data-shape": shape, "aria-hidden": 'true' }));
+});

package/dist/slider.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+declare function SliderRoot<Value extends number | readonly number[]>({ value, defaultValue, onValueChange, ref, className, form, thumbAlignment, ...props }: BaseSlider.Root.Props<Value> & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+export declare const Slider: {
+    Root: typeof SliderRoot;
+    Label: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Value: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderValueProps, "ref"> & React.RefAttributes<HTMLOutputElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLOutputElement>>;
+    Control: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderControlProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Track: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Thumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+};
+export { SliderRoot };
+export declare const SliderControl: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderControlProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, SliderIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, SliderLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, SliderThumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, SliderTrack: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, SliderValue: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderValueProps, "ref"> & React.RefAttributes<HTMLOutputElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLOutputElement>>;

package/dist/slider.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { part, skin } from './parts.js';
+import { useResetValue, useRootRef } from './form-state.js';
+function SliderRoot({ value, defaultValue, onValueChange, ref, className, form, thumbAlignment = 'edge', ...props }) {
+    const [element, attach] = useRootRef(ref);
+    const [selected, setSelected] = useResetValue(value, (defaultValue ?? props.min ?? 0), element, form);
+    return (_jsx(BaseSlider.Root, { ...props, form: form, ref: attach, value: selected, thumbAlignment: thumbAlignment, className: skin('pui-slider', className), onValueChange: (next, event) => {
+            onValueChange?.(next, event);
+            if (value === undefined && !event.isCanceled)
+                setSelected(next);
+        } }));
+}
+export const Slider = {
+    ...BaseSlider,
+    Root: SliderRoot,
+    Label: /* @__PURE__ */ part(BaseSlider.Label, 'pui-slider-label'),
+    Value: /* @__PURE__ */ part(BaseSlider.Value, 'pui-slider-value'),
+    Control: /* @__PURE__ */ part(BaseSlider.Control, 'pui-slider-control'),
+    Track: /* @__PURE__ */ part(BaseSlider.Track, 'pui-slider-track'),
+    Indicator: /* @__PURE__ */ part(BaseSlider.Indicator, 'pui-slider-indicator'),
+    Thumb: /* @__PURE__ */ part(BaseSlider.Thumb, 'pui-slider-thumb'),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { SliderRoot };
+export const { Control: SliderControl, Indicator: SliderIndicator, Label: SliderLabel, Thumb: SliderThumb, Track: SliderTrack, Value: SliderValue, } = Slider;

package/dist/sparkline.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import type { ComponentSizeAlias } from './sizing.js';
+export type SparklineTrend = 'auto' | 'up' | 'down' | 'flat' | 'neutral';
+export type SparklineProps = Omit<React.ComponentPropsWithoutRef<'svg'>, 'children' | 'role' | 'aria-label'> & {
+    /** Values in order. A missing value leaves a gap. */
+    data: readonly (number | null | undefined)[];
+    /** What the line shows and how it moved, such as "KOSPI, 30 days, up 2.3%". The
+     * line is an image; this is its name. */
+    label: string;
+    /** 24, 32 or 48px tall. Set --sparkline-height for another height. */
+    size?: ComponentSizeAlias;
+    /** A reference line: a value, the first value, or none. */
+    baseline?: number | 'first' | 'none';
+    /** Marks the last value with a dot. */
+    marker?: boolean;
+    /** The line's color. auto compares the last value with the baseline, or with the
+     * first value when there is none. */
+    trend?: SparklineTrend;
+    /** For measures where a fall is good: the colors swap. */
+    lowerIsBetter?: boolean;
+};
+/** A small trend line for cards and table cells: no axes, legend or tooltip. Use Chart
+ * when people need to read values. */
+export declare const Sparkline: React.ForwardRefExoticComponent<Omit<Omit<React.SVGProps<SVGSVGElement>, "ref">, "children" | "role" | "aria-label"> & {
+    /** Values in order. A missing value leaves a gap. */
+    data: readonly (number | null | undefined)[];
+    /** What the line shows and how it moved, such as "KOSPI, 30 days, up 2.3%". The
+     * line is an image; this is its name. */
+    label: string;
+    /** 24, 32 or 48px tall. Set --sparkline-height for another height. */
+    size?: ComponentSizeAlias;
+    /** A reference line: a value, the first value, or none. */
+    baseline?: number | "first" | "none";
+    /** Marks the last value with a dot. */
+    marker?: boolean;
+    /** The line's color. auto compares the last value with the baseline, or with the
+     * first value when there is none. */
+    trend?: SparklineTrend;
+    /** For measures where a fall is good: the colors swap. */
+    lowerIsBetter?: boolean;
+} & React.RefAttributes<SVGSVGElement>>;

package/dist/sparkline.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cx, sizeName } from './parts.js';
+const finite = (value) => typeof value === 'number' && Number.isFinite(value);
+/** A small trend line for cards and table cells: no axes, legend or tooltip. Use Chart
+ * when people need to read values. */
+export const Sparkline = /* @__PURE__ */ React.forwardRef(function Sparkline({ data, label, size, baseline = 'none', marker = true, trend = 'auto', lowerIsBetter = false, className, ...props }, ref) {
+    const values = data.filter(finite);
+    const first = values[0];
+    const last = values[values.length - 1];
+    const reference = baseline === 'first' ? first : baseline === 'none' ? undefined : baseline;
+    const bounds = finite(reference) ? [...values, reference] : values;
+    const min = Math.min(...bounds);
+    const max = Math.max(...bounds);
+    const span = max - min || 1;
+    // The line keeps clear of the edges by a tenth of the height.
+    const y = (value) => 95 - ((value - min) / span) * 90;
+    const x = (index) => data.length > 1 ? (index / (data.length - 1)) * 100 : 50;
+    let path = '';
+    let pen = false;
+    data.forEach((value, index) => {
+        if (!finite(value))
+            return void (pen = false);
+        path += `${pen ? 'L' : 'M'}${x(index)} ${y(value)}`;
+        pen = true;
+    });
+    const from = finite(reference) ? reference : first;
+    const way = trend !== 'auto'
+        ? trend
+        : !finite(last) || !finite(from)
+            ? 'neutral'
+            : last > from
+                ? 'up'
+                : last < from
+                    ? 'down'
+                    : 'flat';
+    const tone = lowerIsBetter && way === 'up'
+        ? 'down'
+        : lowerIsBetter && way === 'down'
+            ? 'up'
+            : way;
+    let end = data.length - 1;
+    while (end >= 0 && !finite(data[end]))
+        end--;
+    return (_jsxs("svg", { ...props, ref: ref, role: 'img', "aria-label": label, className: cx('pui-sparkline', className), "data-size": sizeName(size), "data-tone": tone, viewBox: '0 0 100 100', preserveAspectRatio: 'none', focusable: 'false', children: [finite(reference) && (_jsx("path", { className: 'pui-sparkline-baseline', d: `M0 ${y(reference)}H100`, vectorEffect: 'non-scaling-stroke' })), _jsx("path", { className: 'pui-sparkline-line', d: path, vectorEffect: 'non-scaling-stroke' }), marker && end >= 0 && (
+            // A zero-length segment with a round cap stays a circle however the
+            // line stretches.
+            _jsx("path", { className: 'pui-sparkline-marker', d: `M${x(end)} ${y(data[end])}h0`, vectorEffect: 'non-scaling-stroke' }))] }));
+});

package/dist/spinner.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
+export type SpinnerProps = Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {
+    label?: string;
+    decorative?: boolean;
+    size?: ComponentSizeAlias;
+};
+/** Use decorative within a loading region that already owns the announcement. */
+export declare const Spinner: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children"> & {
+    label?: string;
+    decorative?: boolean;
+    size?: ComponentSizeAlias;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/spinner.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { sizeName, cx } from './parts.js';
+/** Use decorative within a loading region that already owns the announcement. */
+export const Spinner = /* @__PURE__ */ React.forwardRef(function Spinner({ label = 'Loading', decorative = false, size, className, ...props }, ref) {
+    const scheme = useComponentSize(size);
+    return (_jsxs("span", { ...props, ref: ref, className: cx('pui-spinner', className), "data-size": sizeName(size), "data-ui-size": scheme, role: decorative ? undefined : 'status', "aria-hidden": decorative || undefined, children: [_jsxs("svg", { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', "aria-hidden": 'true', children: [_jsx("circle", { cx: '12', cy: '12', r: '9', opacity: '.2' }), _jsx("path", { d: 'M12 3a9 9 0 0 1 9 9', strokeLinecap: 'round' })] }), !decorative && _jsx("span", { className: 'pui-feedback-sr', children: label })] }));
+});