@surflane/ui 0.1.0 → 0.2.0

package/dist/content.js

@@ -1,65 +1,103 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { Surface } from "./foundations.js";
-import { part } from "./parts.js";
-import { Button } from "./button.js";
-import { SyntaxHighlighter } from "./syntax-highlighter.js";
-import { ScrollArea } from "./scroll-area.js";
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Surface } from './foundations.js';
+import { part } from './parts.js';
+import { Button } from './button.js';
+import { SyntaxHighlighter } from './syntax-highlighter.js';
+import { ScrollArea } from './scroll-area.js';
 const CardRoot = React.forwardRef(function CardRoot({ className, padding, ...props }, ref) {
-    return (_jsx(Surface, { ...props, padding: padding, ref: ref, className: ["pui-card", className].filter(Boolean).join(" ") }));
+    return (_jsx(Surface, { ...props, padding: padding, ref: ref, className: ['pui-card', className].filter(Boolean).join(' ') }));
 });
 const CardTitle = React.forwardRef(function CardTitle({ level = 3, className, ...props }, ref) {
     return React.createElement(`h${level}`, {
         ...props,
         ref,
-        className: ["pui-card-title", className].filter(Boolean).join(" "),
+        className: ['pui-card-title', className].filter(Boolean).join(' '),
     });
 });
 export const Card = {
     Root: CardRoot,
-    Header: part("div", "pui-card-header"),
+    Header: part('div', 'pui-card-header'),
     Title: CardTitle,
-    Description: part("p", "pui-card-description"),
-    Body: part("div", "pui-card-body"),
-    Footer: part("div", "pui-card-footer"),
+    Description: part('p', 'pui-card-description'),
+    Body: part('div', 'pui-card-body'),
+    Footer: part('div', 'pui-card-footer'),
 };
-export const CodeBlock = React.forwardRef(function CodeBlock({ code, label = "Code", language, wrap = false, copyLabel = "Copy code", copiedLabel = "Code copied.", copyErrorLabel = "Copy unavailable. Select the code and copy it manually.", onCopy, className, ...props }, ref) {
-    const [result, setResult] = React.useState(""), [busy, setBusy] = React.useState(false);
-    const revision = React.useRef(0), mounted = React.useRef(false);
+const copyIcons = {
+    idle: (_jsxs(_Fragment, { children: [_jsx("rect", { x: '8', y: '8', width: '12', height: '12', rx: '2' }), _jsx("path", { d: 'M16 8V4H4v12h4' })] })),
+    copied: _jsx("path", { d: 'm5 12.5 4.5 4.5L19 7.5' }),
+    failed: (_jsx("path", { d: 'M12 7v6m0 4v.01M4.5 12a7.5 7.5 0 1 0 15 0 7.5 7.5 0 0 0-15 0' })),
+};
+// Feedback stays inside the copy button and returns to the action after this long.
+const copyFeedbackDuration = 2000;
+export const CodeBlock = React.forwardRef(function CodeBlock({ code, label = 'Code', language, wrap = false, copyLabel = 'Copy code', copiedLabel = 'Copied', copyErrorLabel = 'Copy unavailable', onCopy, className, ...props }, ref) {
+    const [state, setState] = React.useState('idle');
+    // After the first copy, each change of label fades in; the first render does not.
+    const [used, setUsed] = React.useState(false);
+    const revision = React.useRef(0), mounted = React.useRef(false), timer = React.useRef(undefined);
+    const button = React.useRef(null), source = React.useRef(null);
     React.useEffect(() => {
         mounted.current = true;
         return () => {
             mounted.current = false;
             revision.current++;
+            clearTimeout(timer.current);
         };
     }, []);
     React.useEffect(() => {
         revision.current++;
-        setResult("");
-        setBusy(false);
+        clearTimeout(timer.current);
+        setState('idle');
     }, [code]);
+    // The button keeps its resting width, so the feedback never moves the toolbar.
+    React.useLayoutEffect(() => {
+        const element = button.current;
+        if (!element || state !== 'idle')
+            return;
+        const measure = () => {
+            element.style.minInlineSize = '';
+            element.style.minInlineSize = `${element.getBoundingClientRect().width}px`;
+        };
+        measure();
+        document.fonts?.ready.then(() => {
+            if (mounted.current)
+                measure();
+        });
+    }, [copyLabel, state]);
     async function copy() {
         const request = ++revision.current;
-        setBusy(true);
-        setResult("");
+        clearTimeout(timer.current);
+        setUsed(true);
+        setState('busy');
         let outcome;
         try {
             if (onCopy)
                 await onCopy(code);
             else
                 await navigator.clipboard.writeText(code);
-            outcome = copiedLabel;
+            outcome = 'copied';
         }
         catch {
-            outcome = copyErrorLabel;
-        }
-        if (mounted.current && request === revision.current) {
-            setResult(outcome);
-            setBusy(false);
+            outcome = 'failed';
         }
+        if (!mounted.current || request !== revision.current)
+            return;
+        setState(outcome);
+        // A failed copy selects the source, so the keyboard copy shortcut works next.
+        if (outcome === 'failed' && source.current)
+            window.getSelection()?.selectAllChildren(source.current);
+        timer.current = setTimeout(() => {
+            if (mounted.current && request === revision.current)
+                setState('idle');
+        }, copyFeedbackDuration);
     }
-    return (_jsxs("div", { ...props, ref: ref, "data-wrap": wrap || undefined, className: ["pui-code-block", className].filter(Boolean).join(" "), children: [_jsxs("div", { className: "pui-code-toolbar", children: [_jsxs("span", { className: "pui-code-label", children: [label, language && _jsx("span", { className: "pui-code-language", children: language })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: copy, disabled: busy, "aria-busy": busy || undefined, children: [_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", "aria-hidden": "true", children: [_jsx("rect", { x: "8", y: "8", width: "12", height: "12", rx: "2" }), _jsx("path", { d: "M16 8V4H4v12h4" })] }), copyLabel] })] }), _jsx(ScrollArea, { label: label, orientation: "horizontal", children: _jsx("pre", { className: "pui-code-text", children: _jsx(SyntaxHighlighter, { code: code, language: language, inline: true }) }) }), _jsx("span", { className: "pui-code-result", role: "status", children: result })] }));
+    const icon = state === 'copied' || state === 'failed' ? state : 'idle';
+    return (_jsxs("div", { ...props, ref: ref, "data-wrap": wrap || undefined, className: ['pui-code-block', className].filter(Boolean).join(' '), children: [_jsxs("div", { className: 'pui-code-toolbar', children: [_jsxs("span", { className: 'pui-code-label', children: [label, language && _jsx("span", { className: 'pui-code-language', children: language })] }), _jsxs(Button, { ref: button, type: 'button', variant: 'outline', size: 'sm', className: 'pui-code-copy', onClick: copy, disabled: state === 'busy', "aria-busy": state === 'busy' || undefined, "data-copy-state": icon === 'idle' ? undefined : icon, "data-copy-used": used || undefined, children: [_jsx("svg", { className: 'pui-code-copy-icon', width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', strokeLinecap: 'round', strokeLinejoin: 'round', "aria-hidden": 'true', children: copyIcons[icon] }, icon), _jsx("span", { "aria-live": 'polite', children: _jsx("span", { className: 'pui-code-copy-label', children: state === 'copied'
+                                        ? copiedLabel
+                                        : state === 'failed'
+                                            ? copyErrorLabel
+                                            : copyLabel }, icon) })] })] }), _jsx(ScrollArea, { label: label, orientation: 'horizontal', children: _jsx("pre", { ref: source, className: 'pui-code-text', children: _jsx(SyntaxHighlighter, { code: code, language: language, inline: true }) }) })] }));
 });
 // Flat names for React Server Components, which cannot dot into client exports.
 export { CardRoot, CardTitle };

package/dist/context-overlays.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+import * as React from 'react';
+import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
+import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
 /** Same menu anatomy and styling, with the context-specific cursor positioner. */
 export declare const ContextMenu: {
     Trigger: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {

package/dist/context-overlays.js

@@ -1,18 +1,18 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
-import { Menu } from "./menu.js";
-import { part, skin } from "./parts.js";
-const ContextPositioner = part(BaseContextMenu.Positioner, "pui-positioner");
+import * as React from 'react';
+import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
+import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
+import { Menu } from './menu.js';
+import { part, skin } from './parts.js';
+const ContextPositioner = part(BaseContextMenu.Positioner, 'pui-positioner');
 const ContextContent = React.forwardRef(function ContextContent({ positionerProps, ...props }, ref) {
     return (_jsx(ContextPositioner, { ...positionerProps, children: _jsx(Menu.Popup, { ...props, ref: ref }) }));
 });
 /** Same menu anatomy and styling, with the context-specific cursor positioner. */
 export const ContextMenu = {
     ...BaseContextMenu,
-    Trigger: part(BaseContextMenu.Trigger, "pui-context-trigger"),
+    Trigger: part(BaseContextMenu.Trigger, 'pui-context-trigger'),
     Positioner: ContextPositioner,
     Content: ContextContent,
     Popup: Menu.Popup,
@@ -26,14 +26,14 @@ export const ContextMenu = {
     Separator: Menu.Separator,
     SubmenuTrigger: Menu.SubmenuTrigger,
 };
-const PreviewPositioner = part(BasePreviewCard.Positioner, "pui-positioner");
+const PreviewPositioner = part(BasePreviewCard.Positioner, 'pui-positioner');
 // The preview is visual enhancement; its destination is the accessible interface.
 const PreviewPopup = React.forwardRef(function PreviewPopup({ className, ...props }, ref) {
-    return (_jsx(BasePreviewCard.Popup, { ...props, ref: ref, "aria-hidden": "true", className: skin("pui-preview-card", className) }));
+    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) }));
+    return (_jsx(BasePreviewCard.Trigger, { ...rest, className: skin('pui-link pui-preview-trigger', className) }));
 }
 const PreviewContent = React.forwardRef(function PreviewContent({ positionerProps, ...props }, ref) {
     return (_jsx(PreviewPositioner, { sideOffset: 8, collisionPadding: 12, ...positionerProps, children: _jsx(PreviewPopup, { ...props, ref: ref }) }));

package/dist/data.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 declare const TableContainer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     label?: string;
     rootClassName?: string;

package/dist/data.js

@@ -1,38 +1,38 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { part } from "./parts.js";
-import { ScrollArea } from "./scroll-area.js";
+import * as React from 'react';
+import { part } from './parts.js';
+import { ScrollArea } from './scroll-area.js';
 const TableContainer = React.forwardRef(function TableContainer(props, ref) {
     return _jsx(ScrollArea, { ...props, ref: ref });
 });
 const TableRow = React.forwardRef(function TableRow({ selected, className, ...props }, ref) {
-    return (_jsx("tr", { ...props, ref: ref, "data-selected": selected || undefined, className: ["pui-table-row", className].filter(Boolean).join(" ") }));
+    return (_jsx("tr", { ...props, ref: ref, "data-selected": selected || undefined, className: ['pui-table-row', className].filter(Boolean).join(' ') }));
 });
 export const Table = {
     Container: TableContainer,
-    Root: part("table", "pui-table"),
-    Caption: part("caption", "pui-table-caption"),
-    Head: part("thead", "pui-table-head"),
-    Body: part("tbody", "pui-table-body"),
-    Foot: part("tfoot", "pui-table-foot"),
+    Root: part('table', 'pui-table'),
+    Caption: part('caption', 'pui-table-caption'),
+    Head: part('thead', 'pui-table-head'),
+    Body: part('tbody', 'pui-table-body'),
+    Foot: part('tfoot', 'pui-table-foot'),
     Row: TableRow,
-    HeaderCell: part("th", "pui-table-cell pui-table-header"),
-    Cell: part("td", "pui-table-cell"),
+    HeaderCell: part('th', 'pui-table-cell pui-table-header'),
+    Cell: part('td', 'pui-table-cell'),
 };
 const ListRoot = React.forwardRef(function ListRoot({ className, ...props }, ref) {
-    return (_jsx("ul", { role: "list", ...props, ref: ref, className: ["pui-list", className].filter(Boolean).join(" ") }));
+    return (_jsx("ul", { role: 'list', ...props, ref: ref, className: ['pui-list', className].filter(Boolean).join(' ') }));
 });
 const ListItem = React.forwardRef(function ListItem({ selected, className, ...props }, ref) {
-    return (_jsx("li", { ...props, ref: ref, "data-selected": selected || undefined, className: ["pui-list-item", className].filter(Boolean).join(" ") }));
+    return (_jsx("li", { ...props, ref: ref, "data-selected": selected || undefined, className: ['pui-list-item', className].filter(Boolean).join(' ') }));
 });
 export const List = {
     Root: ListRoot,
     Item: ListItem,
-    Content: part("div", "pui-list-content"),
-    Title: part("div", "pui-list-title"),
-    Description: part("p", "pui-list-description"),
-    Actions: part("div", "pui-list-actions"),
+    Content: part('div', 'pui-list-content'),
+    Title: part('div', 'pui-list-title'),
+    Description: part('p', 'pui-list-description'),
+    Actions: part('div', 'pui-list-actions'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export { ListRoot, ListItem, TableContainer, TableRow };

package/dist/date-picker.d.ts

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { type DatePickerProps as AriaDatePickerProps, type DateValue, type ValidationResult } from "react-aria-components/DatePicker";
-import { type DateRangePickerProps as AriaDateRangePickerProps } from "react-aria-components/DateRangePicker";
-import { type TimeFieldProps as AriaTimeFieldProps, type TimeValue } from "react-aria-components/TimeField";
-export { I18nProvider as DateLocaleProvider } from "react-aria-components/I18nProvider";
+import * as React from 'react';
+import { type DatePickerProps as AriaDatePickerProps, type DateValue, type ValidationResult } from 'react-aria-components/DatePicker';
+import { type DateRangePickerProps as AriaDateRangePickerProps } from 'react-aria-components/DateRangePicker';
+import { type TimeFieldProps as AriaTimeFieldProps, type TimeValue } from 'react-aria-components/TimeField';
+export { I18nProvider as DateLocaleProvider } from 'react-aria-components/I18nProvider';
 export type { DateValue, TimeValue };
 type FieldContent = {
     label: string;
@@ -13,9 +13,9 @@ type FieldContent = {
 type CalendarContent = {
     calendarLabel?: string;
 };
-export type DatePickerProps<T extends DateValue> = Omit<AriaDatePickerProps<T>, "children"> & FieldContent & CalendarContent;
-export type DateRangePickerProps<T extends DateValue> = Omit<AriaDateRangePickerProps<T>, "children"> & FieldContent & CalendarContent;
-export type TimeFieldProps<T extends TimeValue> = Omit<AriaTimeFieldProps<T>, "children"> & FieldContent;
+export type DatePickerProps<T extends DateValue> = Omit<AriaDatePickerProps<T>, 'children'> & FieldContent & CalendarContent;
+export type DateRangePickerProps<T extends DateValue> = Omit<AriaDateRangePickerProps<T>, 'children'> & FieldContent & CalendarContent;
+export type TimeFieldProps<T extends TimeValue> = Omit<AriaTimeFieldProps<T>, 'children'> & FieldContent;
 /** Locale-aware segmented entry with a keyboard and touch calendar. DateValue
  * retains calendar/time-zone semantics; conversion to an instant is caller-owned. */
 export declare function DatePicker<T extends DateValue>({ label, description, errorMessage, calendarLabel, className, ...props }: DatePickerProps<T>): React.JSX.Element;

package/dist/date-picker.js

@@ -1,39 +1,39 @@
-"use client";
+'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useComponentSize } from "./sizing.js";
-import { DatePicker as AriaDatePicker, DateInput, DateSegment, Group, Label, Text, FieldError, Calendar, CalendarGrid, CalendarGridHeader, CalendarGridBody, CalendarHeaderCell, CalendarCell, Button, Popover, } from "react-aria-components/DatePicker";
-import { DateRangePicker as AriaDateRangePicker, RangeCalendar, } from "react-aria-components/DateRangePicker";
-import { TimeField as AriaTimeField, } from "react-aria-components/TimeField";
-import { Heading } from "react-aria-components/Heading";
-import { Dialog } from "react-aria-components/Dialog";
-import { skin } from "./parts.js";
-import { useLocale } from "react-aria-components/I18nProvider";
-export { I18nProvider as DateLocaleProvider } from "react-aria-components/I18nProvider";
+import { useComponentSize } from './sizing.js';
+import { DatePicker as AriaDatePicker, DateInput, DateSegment, Group, Label, Text, FieldError, Calendar, CalendarGrid, CalendarGridHeader, CalendarGridBody, CalendarHeaderCell, CalendarCell, Button, Popover, } from 'react-aria-components/DatePicker';
+import { DateRangePicker as AriaDateRangePicker, RangeCalendar, } from 'react-aria-components/DateRangePicker';
+import { TimeField as AriaTimeField, } from 'react-aria-components/TimeField';
+import { Heading } from 'react-aria-components/Heading';
+import { Dialog } from 'react-aria-components/Dialog';
+import { skin } from './parts.js';
+import { useLocale } from 'react-aria-components/I18nProvider';
+export { I18nProvider as DateLocaleProvider } from 'react-aria-components/I18nProvider';
 function Segments({ slot }) {
-    return (_jsx(DateInput, { slot: slot, className: "pui-date-input", children: (segment) => (_jsx(DateSegment, { segment: segment, className: "pui-date-segment" })) }));
+    return (_jsx(DateInput, { slot: slot, className: 'pui-date-input', children: (segment) => (_jsx(DateSegment, { segment: segment, className: 'pui-date-segment' })) }));
 }
 function FieldHelp({ description, errorMessage, }) {
-    return (_jsxs(_Fragment, { children: [description && (_jsx(Text, { slot: "description", className: "pui-field-description", children: description })), _jsx(FieldError, { className: "pui-field-error", children: errorMessage })] }));
+    return (_jsxs(_Fragment, { children: [description && (_jsx(Text, { slot: 'description', className: 'pui-field-description', children: description })), _jsx(FieldError, { className: 'pui-field-error', children: errorMessage })] }));
 }
 function CalendarButton() {
-    return (_jsx(Button, { className: "pui-date-trigger", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "5", width: "18", height: "16", rx: "3" }), _jsx("path", { d: "M7 3v4m10-4v4M3 11h18m-12 4h2" })] }) }));
+    return (_jsx(Button, { className: 'pui-date-trigger', children: _jsxs("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: [_jsx("rect", { x: '3', y: '5', width: '18', height: '16', rx: '3' }), _jsx("path", { d: 'M7 3v4m10-4v4M3 11h18m-12 4h2' })] }) }));
 }
 function CalendarContents() {
     const { locale } = useLocale();
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "pui-calendar-header", children: [_jsx(Button, { slot: "previous", className: "pui-calendar-nav", children: _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: "m15 6-6 6 6 6" }) }) }), _jsx(Heading, { className: "pui-calendar-heading" }), _jsx(Button, { slot: "next", className: "pui-calendar-nav", children: _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: "m9 6 6 6-6 6" }) }) })] }), _jsxs(CalendarGrid, { className: "pui-calendar-grid", weekdayStyle: "short", children: [_jsx(CalendarGridHeader, { children: (day) => (_jsx(CalendarHeaderCell, { className: "pui-calendar-weekday", children: day })) }), _jsx(CalendarGridBody, { children: (date) => (_jsx(CalendarCell, { date: date, className: "pui-calendar-day", children: ({ formattedDate }) => locale.startsWith("ko") ? `${formattedDate}일` : formattedDate })) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'pui-calendar-header', children: [_jsx(Button, { slot: 'previous', className: 'pui-calendar-nav', children: _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: 'm15 6-6 6 6 6' }) }) }), _jsx(Heading, { className: 'pui-calendar-heading' }), _jsx(Button, { slot: 'next', className: 'pui-calendar-nav', children: _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: 'm9 6 6 6-6 6' }) }) })] }), _jsxs(CalendarGrid, { className: 'pui-calendar-grid', weekdayStyle: 'short', children: [_jsx(CalendarGridHeader, { children: (day) => (_jsx(CalendarHeaderCell, { className: 'pui-calendar-weekday', children: day })) }), _jsx(CalendarGridBody, { children: (date) => (_jsx(CalendarCell, { date: date, className: 'pui-calendar-day', children: ({ formattedDate }) => locale.startsWith('ko') ? `${formattedDate}일` : formattedDate })) })] })] }));
 }
 function CalendarPopup({ label, range }) {
     const scheme = useComponentSize();
-    return (_jsx(Popover, { "data-ui-size": scheme, className: "pui-date-popover", offset: 8, placement: "bottom start", children: _jsx(Dialog, { "aria-label": label, className: "pui-date-dialog", children: range ? (_jsx(RangeCalendar, { className: "pui-calendar", children: _jsx(CalendarContents, {}) })) : (_jsx(Calendar, { className: "pui-calendar", children: _jsx(CalendarContents, {}) })) }) }));
+    return (_jsx(Popover, { "data-ui-size": scheme, className: 'pui-date-popover', offset: 8, placement: 'bottom start', children: _jsx(Dialog, { "aria-label": label, className: 'pui-date-dialog', children: range ? (_jsx(RangeCalendar, { className: 'pui-calendar', children: _jsx(CalendarContents, {}) })) : (_jsx(Calendar, { className: 'pui-calendar', children: _jsx(CalendarContents, {}) })) }) }));
 }
 /** Locale-aware segmented entry with a keyboard and touch calendar. DateValue
  * retains calendar/time-zone semantics; conversion to an instant is caller-owned. */
 export function DatePicker({ label, description, errorMessage, calendarLabel, className, ...props }) {
-    return (_jsxs(AriaDatePicker, { ...props, className: skin("pui-date-picker", className), children: [_jsx(Label, { className: "pui-field-label", children: label }), _jsxs(Group, { className: "pui-date-group", children: [_jsx(Segments, {}), _jsx(CalendarButton, {})] }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage }), _jsx(CalendarPopup, { label: calendarLabel ?? label })] }));
+    return (_jsxs(AriaDatePicker, { ...props, className: skin('pui-date-picker', className), children: [_jsx(Label, { className: 'pui-field-label', children: label }), _jsxs(Group, { className: 'pui-date-group', children: [_jsx(Segments, {}), _jsx(CalendarButton, {})] }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage }), _jsx(CalendarPopup, { label: calendarLabel ?? label })] }));
 }
 export function DateRangePicker({ label, description, errorMessage, calendarLabel, className, ...props }) {
-    return (_jsxs(AriaDateRangePicker, { ...props, className: skin("pui-date-picker pui-date-range-picker", className), children: [_jsx(Label, { className: "pui-field-label", children: label }), _jsxs(Group, { className: "pui-date-group", children: [_jsxs("div", { className: "pui-date-range-inputs", children: [_jsx(Segments, { slot: "start" }), _jsx("span", { "aria-hidden": "true", className: "pui-date-range-separator", children: "\u2013" }), _jsx(Segments, { slot: "end" })] }), _jsx(CalendarButton, {})] }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage }), _jsx(CalendarPopup, { label: calendarLabel ?? label, range: true })] }));
+    return (_jsxs(AriaDateRangePicker, { ...props, className: skin('pui-date-picker pui-date-range-picker', className), children: [_jsx(Label, { className: 'pui-field-label', children: label }), _jsxs(Group, { className: 'pui-date-group', children: [_jsxs("div", { className: 'pui-date-range-inputs', children: [_jsx(Segments, { slot: 'start' }), _jsx("span", { "aria-hidden": 'true', className: 'pui-date-range-separator', children: "\u2013" }), _jsx(Segments, { slot: 'end' })] }), _jsx(CalendarButton, {})] }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage }), _jsx(CalendarPopup, { label: calendarLabel ?? label, range: true })] }));
 }
 export function TimeField({ label, description, errorMessage, className, ...props }) {
-    return (_jsxs(AriaTimeField, { ...props, className: skin("pui-time-field", className), children: [_jsx(Label, { className: "pui-field-label", children: label }), _jsx("div", { className: "pui-date-group", children: _jsx(Segments, {}) }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage })] }));
+    return (_jsxs(AriaTimeField, { ...props, className: skin('pui-time-field', className), children: [_jsx(Label, { className: 'pui-field-label', children: label }), _jsx("div", { className: 'pui-date-group', children: _jsx(Segments, {}) }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage })] }));
 }

package/dist/dialog-focus.js

@@ -1,5 +1,5 @@
-"use client";
-import * as React from "react";
+'use client';
+import * as React from 'react';
 /** Base UI 1.9 exposes WebKit's focus guards as buttons for VoiceOver.
  * Give those boundaries a name without hiding or changing their focus behavior.
  * Scope observation to this portal and disconnect it on React ref cleanup.
@@ -11,8 +11,8 @@ export function useDialogFocusBoundary(label) {
         const owned = new Set();
         const nameBoundaries = () => {
             for (const guard of portal.querySelectorAll(':scope > [data-base-ui-focus-guard][role="button"]')) {
-                if (!guard.hasAttribute("aria-label")) {
-                    guard.setAttribute("aria-label", label);
+                if (!guard.hasAttribute('aria-label')) {
+                    guard.setAttribute('aria-label', label);
                     owned.add(guard);
                 }
             }
@@ -23,13 +23,13 @@ export function useDialogFocusBoundary(label) {
             childList: true,
             subtree: true,
             attributes: true,
-            attributeFilter: ["role"],
+            attributeFilter: ['role'],
         });
         return () => {
             observer.disconnect();
             for (const guard of owned)
-                if (guard.getAttribute("aria-label") === label)
-                    guard.removeAttribute("aria-label");
+                if (guard.getAttribute('aria-label') === label)
+                    guard.removeAttribute('aria-label');
         };
     }, [label]);
 }

package/dist/dialog.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { Dialog as BaseDialog } from "@base-ui/react/dialog";
-import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import * as React from 'react';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
 /** Visible icon close action; inherits Dialog focus and dismissal behavior. */
 declare const DialogCloseButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref">, "children"> & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
@@ -8,9 +8,9 @@ declare const DialogContent: React.ForwardRefExoticComponent<Omit<Omit<import("@
     closeDisabled?: boolean;
     focusBoundaryLabel?: string;
 } & React.RefAttributes<HTMLDivElement>>;
-declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare const DialogBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 export declare const Dialog: {
     Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
         closeLabel?: string;

package/dist/dialog.js

@@ -1,28 +1,28 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { useDialogFocusBoundary } from "./dialog-focus.js";
-import { useComponentSize } from "./sizing.js";
-import { Dialog as BaseDialog } from "@base-ui/react/dialog";
-import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
-const cx = (...v) => v.filter(Boolean).join(" ");
+import * as React from 'react';
+import { useDialogFocusBoundary } from './dialog-focus.js';
+import { useComponentSize } from './sizing.js';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
+const cx = (...v) => v.filter(Boolean).join(' ');
 /** Visible icon close action; inherits Dialog focus and dismissal behavior. */
-const DialogCloseButton = React.forwardRef(function DialogCloseButton({ className, "aria-label": label = "Close dialog", ...props }, ref) {
-    return (_jsx(BaseDialog.Close, { ...props, ref: ref, "aria-label": label, className: cx("pui-icon-button pui-dialog-close", typeof className === "string" && className), children: _jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", "aria-hidden": "true", children: _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) }) }));
+const DialogCloseButton = React.forwardRef(function DialogCloseButton({ className, 'aria-label': label = 'Close dialog', ...props }, ref) {
+    return (_jsx(BaseDialog.Close, { ...props, ref: ref, "aria-label": label, className: cx('pui-icon-button pui-dialog-close', typeof className === 'string' && className), children: _jsx("svg", { width: '18', height: '18', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 6 12 12M18 6 6 18' }) }) }));
 });
-const DialogContent = React.forwardRef(function DialogContent({ className, children, closeLabel = "Close dialog", closeDisabled, focusBoundaryLabel = "Continue dialog navigation", ...props }, ref) {
+const DialogContent = React.forwardRef(function DialogContent({ className, children, closeLabel = 'Close dialog', closeDisabled, focusBoundaryLabel = 'Continue dialog navigation', ...props }, ref) {
     const scheme = useComponentSize();
     const portalRef = useDialogFocusBoundary(focusBoundaryLabel);
-    return (_jsxs(BaseDialog.Portal, { ref: portalRef, children: [_jsx(BaseDialog.Backdrop, { className: "pui-dialog-backdrop" }), _jsxs(BaseDialog.Popup, { "data-ui-size": scheme, ...props, ref: ref, className: cx("pui-dialog-popup pui-dialog-content", typeof className === "string" && className), children: [_jsx(DialogCloseButton, { "aria-label": closeLabel, disabled: closeDisabled }), children] })] }));
+    return (_jsxs(BaseDialog.Portal, { ref: portalRef, children: [_jsx(BaseDialog.Backdrop, { className: 'pui-dialog-backdrop' }), _jsxs(BaseDialog.Popup, { "data-ui-size": scheme, ...props, ref: ref, className: cx('pui-dialog-popup pui-dialog-content', typeof className === 'string' && className), children: [_jsx(DialogCloseButton, { "aria-label": closeLabel, disabled: closeDisabled }), children] })] }));
 });
 function DialogHeader({ className, ...props }) {
-    return _jsx("div", { ...props, className: cx("pui-dialog-header", className) });
+    return _jsx("div", { ...props, className: cx('pui-dialog-header', className) });
 }
 const DialogBody = React.forwardRef(function DialogBody({ className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: cx("pui-dialog-body", className) }));
+    return (_jsx("div", { ...props, ref: ref, className: cx('pui-dialog-body', className) }));
 });
 function DialogFooter({ className, ...props }) {
-    return _jsx("div", { ...props, className: cx("pui-dialog-footer", className) });
+    return _jsx("div", { ...props, className: cx('pui-dialog-footer', className) });
 }
 export const Dialog = {
     ...BaseDialog,
@@ -32,10 +32,10 @@ export const Dialog = {
     Footer: DialogFooter,
     CloseButton: DialogCloseButton,
 };
-const AlertDialogContent = React.forwardRef(function AlertDialogContent({ className, focusBoundaryLabel = "Continue dialog navigation", ...props }, ref) {
+const AlertDialogContent = React.forwardRef(function AlertDialogContent({ className, focusBoundaryLabel = 'Continue dialog navigation', ...props }, ref) {
     const scheme = useComponentSize();
     const portalRef = useDialogFocusBoundary(focusBoundaryLabel);
-    return (_jsxs(BaseAlertDialog.Portal, { ref: portalRef, children: [_jsx(BaseAlertDialog.Backdrop, { className: "pui-dialog-backdrop" }), _jsx(BaseAlertDialog.Popup, { "data-ui-size": scheme, ...props, ref: ref, className: cx("pui-dialog-popup pui-dialog-content pui-confirm-content", typeof className === "string" && className) })] }));
+    return (_jsxs(BaseAlertDialog.Portal, { ref: portalRef, children: [_jsx(BaseAlertDialog.Backdrop, { className: 'pui-dialog-backdrop' }), _jsx(BaseAlertDialog.Popup, { "data-ui-size": scheme, ...props, ref: ref, className: cx('pui-dialog-popup pui-dialog-content pui-confirm-content', typeof className === 'string' && className) })] }));
 });
 export const AlertDialog = {
     ...BaseAlertDialog,

package/dist/feedback.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { type ComponentSizeAlias } from "./sizing.js";
+import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
 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;
@@ -34,7 +34,7 @@ export declare const Meter: {
         size?: import("./sizing.js").ComponentSize;
     } & React.RefAttributes<HTMLDivElement>>;
 };
-export type SpinnerProps = Omit<React.ComponentPropsWithoutRef<"span">, "children"> & {
+export type SpinnerProps = Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {
     label?: string;
     decorative?: boolean;
     size?: ComponentSizeAlias;
@@ -45,8 +45,8 @@ export declare const Spinner: React.ForwardRefExoticComponent<Omit<Omit<React.De
     decorative?: boolean;
     size?: ComponentSizeAlias;
 } & React.RefAttributes<HTMLSpanElement>>;
-export type SkeletonProps = Omit<React.ComponentPropsWithoutRef<"span">, "children"> & {
-    shape?: "text" | "block" | "circle";
+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"> & {

package/dist/feedback.js

@@ -1,34 +1,34 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { useComponentSize } from "./sizing.js";
-import { Progress as BaseProgress } from "@base-ui/react/progress";
-import { Meter as BaseMeter } from "@base-ui/react/meter";
-import { part } from "./parts.js";
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { Progress as BaseProgress } from '@base-ui/react/progress';
+import { Meter as BaseMeter } from '@base-ui/react/meter';
+import { part } from './parts.js';
 export const Progress = {
     ...BaseProgress,
-    Root: part(BaseProgress.Root, "pui-gauge pui-progress"),
-    Label: part(BaseProgress.Label, "pui-gauge-label"),
-    Value: part(BaseProgress.Value, "pui-gauge-value"),
-    Track: part(BaseProgress.Track, "pui-gauge-track"),
-    Indicator: part(BaseProgress.Indicator, "pui-gauge-indicator"),
+    Root: part(BaseProgress.Root, 'pui-gauge pui-progress'),
+    Label: part(BaseProgress.Label, 'pui-gauge-label'),
+    Value: part(BaseProgress.Value, 'pui-gauge-value'),
+    Track: part(BaseProgress.Track, 'pui-gauge-track'),
+    Indicator: part(BaseProgress.Indicator, 'pui-gauge-indicator'),
 };
 export const Meter = {
     ...BaseMeter,
-    Root: part(BaseMeter.Root, "pui-gauge pui-meter"),
-    Label: part(BaseMeter.Label, "pui-gauge-label"),
-    Value: part(BaseMeter.Value, "pui-gauge-value"),
-    Track: part(BaseMeter.Track, "pui-gauge-track"),
-    Indicator: part(BaseMeter.Indicator, "pui-gauge-indicator"),
+    Root: part(BaseMeter.Root, 'pui-gauge pui-meter'),
+    Label: part(BaseMeter.Label, 'pui-gauge-label'),
+    Value: part(BaseMeter.Value, 'pui-gauge-value'),
+    Track: part(BaseMeter.Track, 'pui-gauge-track'),
+    Indicator: part(BaseMeter.Indicator, 'pui-gauge-indicator'),
 };
 /** Use decorative within a loading region that already owns the announcement. */
-export const Spinner = React.forwardRef(function Spinner({ label = "Loading", decorative = false, size, className, ...props }, ref) {
+export const Spinner = React.forwardRef(function Spinner({ label = 'Loading', decorative = false, size, className, ...props }, ref) {
     const scheme = useComponentSize(size);
-    return (_jsxs("span", { ...props, ref: ref, className: ["pui-spinner", className].filter(Boolean).join(" "), "data-size": 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 })] }));
+    return (_jsxs("span", { ...props, ref: ref, className: ['pui-spinner', className].filter(Boolean).join(' '), "data-size": 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 })] }));
 });
 /** Decorative placeholder; the owning region provides aria-busy and loading text. */
-export const Skeleton = React.forwardRef(function Skeleton({ shape = "text", className, ...props }, ref) {
-    return (_jsx("span", { ...props, ref: ref, className: ["pui-skeleton", className].filter(Boolean).join(" "), "data-shape": shape, "aria-hidden": "true" }));
+export const Skeleton = React.forwardRef(function Skeleton({ shape = 'text', className, ...props }, ref) {
+    return (_jsx("span", { ...props, ref: ref, className: ['pui-skeleton', className].filter(Boolean).join(' '), "data-shape": shape, "aria-hidden": 'true' }));
 });
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Indicator: MeterIndicator, Label: MeterLabel, Root: MeterRoot, Track: MeterTrack, Value: MeterValue, } = Meter;