@surflane/ui 0.3.0 → 0.5.0

package/dist/parts.js

@@ -1,22 +1,55 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ComponentSizeContext, useComponentSize, } from './sizing.js';
+import { ComponentSizeContext, normalizeSize, useComponentSize, } from './sizing.js';
 import * as React from 'react';
+/** Joins class names, skipping empty ones. */
+export function cx(...classes) {
+    return classes.filter(Boolean).join(' ');
+}
+/** The data-size value: a short alias (sm, md, lg) renders as its full name, so both
+ * spellings meet the same CSS; other values such as xs or icon pass through. */
+export function sizeName(size) {
+    return size === 'sm' || size === 'md' || size === 'lg'
+        ? normalizeSize(size)
+        : size;
+}
 /** Preserve Base UI's state-dependent className contract when adding a skin. */
 export function skin(base, custom) {
     if (typeof custom === 'function')
-        return (state) => [base, custom(state)].filter(Boolean).join(' ');
-    return [base, custom].filter(Boolean).join(' ');
+        return (state) => cx(base, custom(state));
+    return cx(base, custom);
 }
-export function part(Component, base) {
+/** A styled Base UI part or element. A portal part renders outside the tree that sets
+ * data-ui-size, so it always carries the size scheme; other parts carry it only when
+ * size is set. */
+export function part(Component, base, { portal = false } = {}) {
     return React.forwardRef(function ThemedPart(props, ref) {
         const { className, size, ...rest } = props;
         const scheme = useComponentSize(size);
-        const portal = /positioner|popup|^pui-menu$|navigation-menu-viewport/.test(base);
         const classes = typeof className === 'function'
-            ? (state) => [base, className(state)].filter(Boolean).join(' ')
-            : [base, className].filter(Boolean).join(' ');
+            ? (state) => cx(base, className(state))
+            : cx(base, className);
         const element = (_jsx(Component, { ...rest, ref: ref, className: classes, "data-ui-size": size ? scheme : portal ? scheme : undefined }));
         // Keep the React subtree stable when size changes from omitted to explicit.
         return (_jsx(ComponentSizeContext.Provider, { value: scheme, children: element }));
     });
 }
+/** True inside a namespace's own Portal, so a Content that brings its portal adds no
+ * second one. Each Content resets it, so a nested popup portals itself. */
+const PortalScope = /* @__PURE__ */ React.createContext(false);
+/** A namespace Portal that marks its subtree as already portalled. */
+export function scopedPortal(BasePortal) {
+    const Scoped = React.forwardRef(function Portal(props, ref) {
+        return (_jsx(PortalScope.Provider, { value: true, children: React.createElement(BasePortal, { ...props, ref }) }));
+    });
+    return Scoped;
+}
+/** Renders a Content's positioner in its portal, unless a namespace Portal holds it. */
+export function OwnPortal({ portal: BasePortal, children, }) {
+    const inside = React.useContext(PortalScope);
+    const content = (_jsx(PortalScope.Provider, { value: false, children: children }));
+    return inside ? content : _jsx(BasePortal, { children: content });
+}
+/** Drops undefined entries, so explicit placement props override defaults only when set. */
+export function defined(props) {
+    return Object.fromEntries(Object.entries(props).filter(([, value]) => value !== undefined));
+}

package/dist/popover.d.ts

@@ -1,21 +1,38 @@
 import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
 import { Popover as BasePopover } from '@base-ui/react/popover';
-declare function PopoverContent({ side, align, sideOffset, collisionPadding, className, ...props }: React.ComponentProps<typeof BasePopover.Popup> & Pick<React.ComponentProps<typeof BasePopover.Positioner>, 'side' | 'align' | 'sideOffset' | 'collisionPadding'>): React.JSX.Element;
+declare function PopoverContent({ size, side, align, sideOffset, collisionPadding, className, ...props }: React.ComponentProps<typeof BasePopover.Popup> & Pick<React.ComponentProps<typeof BasePopover.Positioner>, 'side' | 'align' | 'sideOffset' | 'collisionPadding'> & {
+    /** Width and density: small 240px, default 320px, large 480px. Unset, the
+     * popover keeps the default width and takes the surrounding density. */
+    size?: ComponentSizeAlias;
+}): React.JSX.Element;
+declare const PopoverTitle: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/popover").PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLHeadingElement>>;
+declare const PopoverDescription: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/popover").PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLParagraphElement>>;
+/** Content brings its own portal; Portal stays for wrapping it, or raw parts. */
+declare const PopoverPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const Popover: {
+    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Content: typeof PopoverContent;
+    Title: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/popover").PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/popover").PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLParagraphElement>>;
     Root: typeof BasePopover.Root;
     Trigger: BasePopover.Trigger;
-    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Positioner: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Popup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Arrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Title: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
     Close: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
     Viewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     createHandle: typeof BasePopover.createHandle;
     Handle: typeof BasePopover.Handle;
 };
-export { PopoverContent };
-export declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, PopoverDescription: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>, PopoverHandle: typeof BasePopover.Handle, PopoverPopup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverPositioner: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverRoot: typeof BasePopover.Root, PopoverTitle: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>, PopoverTrigger: BasePopover.Trigger, PopoverViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { PopoverContent, PopoverTitle, PopoverDescription, PopoverPortal };
+export declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, PopoverHandle: typeof BasePopover.Handle, PopoverPopup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverPositioner: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverRoot: typeof BasePopover.Root, PopoverTrigger: BasePopover.Trigger, PopoverViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/popover.js

@@ -1,13 +1,23 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { OwnPortal, part, scopedPortal, sizeName, skin } from './parts.js';
 import { useComponentSize } from './sizing.js';
 import { Popover as BasePopover } from '@base-ui/react/popover';
-const cx = (...v) => v.filter(Boolean).join(' ');
-function PopoverContent({ side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 12, className, ...props }) {
-    const scheme = useComponentSize();
-    return (_jsx(BasePopover.Positioner, { side: side, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: 'pui-positioner', children: _jsx(BasePopover.Popup, { "data-ui-size": scheme, ...props, className: cx('pui-popover', typeof className === 'string' && className) }) }));
+function PopoverContent({ size, side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 12, className, ...props }) {
+    const scheme = useComponentSize(size);
+    return (_jsx(OwnPortal, { portal: BasePopover.Portal, children: _jsx(BasePopover.Positioner, { side: side, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: 'pui-positioner', children: _jsx(BasePopover.Popup, { "data-ui-size": scheme, "data-size": sizeName(size), ...props, className: skin('pui-popover', className) }) }) }));
 }
-export const Popover = { ...BasePopover, Content: PopoverContent };
+const PopoverTitle = /* @__PURE__ */ part(BasePopover.Title, 'pui-popover-title');
+const PopoverDescription = /* @__PURE__ */ part(BasePopover.Description, 'pui-popover-description');
+/** Content brings its own portal; Portal stays for wrapping it, or raw parts. */
+const PopoverPortal = /* @__PURE__ */ scopedPortal(BasePopover.Portal);
+export const Popover = {
+    ...BasePopover,
+    Portal: PopoverPortal,
+    Content: PopoverContent,
+    Title: PopoverTitle,
+    Description: PopoverDescription,
+};
 // Flat names for React Server Components, which cannot dot into client exports.
-export { PopoverContent };
-export const { Arrow: PopoverArrow, Backdrop: PopoverBackdrop, Close: PopoverClose, Description: PopoverDescription, Handle: PopoverHandle, Popup: PopoverPopup, Portal: PopoverPortal, Positioner: PopoverPositioner, Root: PopoverRoot, Title: PopoverTitle, Trigger: PopoverTrigger, Viewport: PopoverViewport, } = Popover;
+export { PopoverContent, PopoverTitle, PopoverDescription, PopoverPortal };
+export const { Arrow: PopoverArrow, Backdrop: PopoverBackdrop, Close: PopoverClose, Handle: PopoverHandle, Popup: PopoverPopup, Positioner: PopoverPositioner, Root: PopoverRoot, Trigger: PopoverTrigger, Viewport: PopoverViewport, } = Popover;

package/dist/preview-card.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
+import { type Placement } from './parts.js';
+declare function PreviewTrigger<Payload>(props: BasePreviewCard.Trigger.Props<Payload> & React.RefAttributes<HTMLElement>): React.JSX.Element;
+export declare const PreviewCard: {
+    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Trigger: typeof PreviewTrigger;
+    Positioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Popup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & Placement<React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>> & {
+        /** @deprecated Pass side, align, sideOffset and collisionPadding directly. */
+        positionerProps?: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Positioner>;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Root: <Payload>(props: BasePreviewCard.Root.Props<Payload>) => React.JSX.Element;
+    Arrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Viewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    createHandle: typeof BasePreviewCard.createHandle;
+    Handle: typeof BasePreviewCard.Handle;
+};
+export declare const PreviewCardArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardHandle: typeof BasePreviewCard.Handle, PreviewCardPopup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardPositioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, PreviewCardRoot: <Payload>(props: BasePreviewCard.Root.Props<Payload>) => React.JSX.Element, PreviewCardTrigger: typeof PreviewTrigger, PreviewCardViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & Placement<React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>> & {
+    /** @deprecated Pass side, align, sideOffset and collisionPadding directly. */
+    positionerProps?: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Positioner>;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/preview-card.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
+import { OwnPortal, defined, part, scopedPortal, skin, } from './parts.js';
+const PreviewPositioner = /* @__PURE__ */ part(BasePreviewCard.Positioner, 'pui-positioner', { portal: true });
+// The preview is visual enhancement; its destination is the accessible interface.
+const PreviewPopup = /* @__PURE__ */ React.forwardRef(function PreviewPopup({ className, ...props }, ref) {
+    return (_jsx(BasePreviewCard.Popup, { ...props, ref: ref, "aria-hidden": 'true', className: skin('pui-preview-card', className) }));
+});
+function PreviewTrigger(props) {
+    const { className, ...rest } = props;
+    return (_jsx(BasePreviewCard.Trigger, { ...rest, className: skin('pui-link pui-preview-trigger', className) }));
+}
+const PreviewContent = /* @__PURE__ */ React.forwardRef(function PreviewContent({ side, align, sideOffset, collisionPadding, positionerProps, ...props }, ref) {
+    return (_jsx(OwnPortal, { portal: BasePreviewCard.Portal, children: _jsx(PreviewPositioner, { sideOffset: 8, collisionPadding: 12, ...positionerProps, ...defined({ side, align, sideOffset, collisionPadding }), children: _jsx(PreviewPopup, { ...props, ref: ref }) }) }));
+});
+export const PreviewCard = {
+    ...BasePreviewCard,
+    Portal: /* @__PURE__ */ scopedPortal(BasePreviewCard.Portal),
+    Trigger: PreviewTrigger,
+    Positioner: PreviewPositioner,
+    Popup: PreviewPopup,
+    Content: PreviewContent,
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export const { Arrow: PreviewCardArrow, Backdrop: PreviewCardBackdrop, Handle: PreviewCardHandle, Popup: PreviewCardPopup, Portal: PreviewCardPortal, Positioner: PreviewCardPositioner, Root: PreviewCardRoot, Trigger: PreviewCardTrigger, Viewport: PreviewCardViewport, Content: PreviewCardContent, } = PreviewCard;

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,7 +2,8 @@
 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';
-export const ScrollArea = React.forwardRef(function ScrollArea({ label, orientation = 'horizontal', scrollChain = 'auto', style, rootClassName, rootStyle, tabIndex = label ? 0 : undefined, role = label ? 'region' : undefined, className, children, ...props }, ref) {
+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) => {
         if (dragPointer.current !== event.pointerId)
@@ -10,7 +11,7 @@ export const ScrollArea = React.forwardRef(function ScrollArea({ label, orientat
         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 = React.forwardRef(function ScrollArea({ label, orientat
                 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,17 +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';
-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 ?? '';
@@ -40,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": 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) => {
@@ -49,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 = 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/sizing.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-export const ComponentSizeContext = React.createContext(undefined);
+export const ComponentSizeContext = /* @__PURE__ */ React.createContext(undefined);
 export function normalizeSize(size) {
     return size === 'sm'
         ? 'small'

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' }));
+});