@surflane/ui 0.9.0 → 0.10.1

package/dist/css/rules/tooltip.css

@@ -3,28 +3,28 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-tooltip-positioner {
-    z-index: var(--layer-tooltip);
+  .surf-tooltip-positioner {
+    z-index: var(--surf-layer-tooltip);
   }
-  .pui-tooltip {
+  .surf-tooltip {
     border: 0;
-    background: var(--tooltip-background);
-    color: var(--tooltip-foreground);
-    padding: var(--space-2) var(--space-3);
+    background: var(--surf-tooltip-background);
+    color: var(--surf-tooltip-foreground);
+    padding: var(--surf-space-2) var(--surf-space-3);
     max-width: 256px;
-    font-size: var(--type-caption-size);
-    letter-spacing: var(--type-caption-tracking);
-    line-height: var(--type-caption-leading);
+    font-size: var(--surf-type-caption-size);
+    letter-spacing: var(--surf-type-caption-tracking);
+    line-height: var(--surf-type-caption-leading);
   }
   /* The shortcut follows the label in the same face, a step quieter. */
-  .pui-tooltip-shortcut {
-    margin-inline-start: var(--space-2);
+  .surf-tooltip-shortcut {
+    margin-inline-start: var(--surf-space-2);
     font: inherit;
     font-variant-numeric: tabular-nums;
     opacity: 0.72;
   }
   @media (forced-colors: active) {
-    .pui-tooltip {
+    .surf-tooltip {
       background: CanvasText;
       color: Canvas;
       forced-color-adjust: none;
@@ -32,7 +32,7 @@
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *).pui-tooltip {
-    padding: var(--ui-tooltip-padding-y) var(--ui-tooltip-padding-x);
+  :where([data-ui-size], [data-ui-size] *).surf-tooltip {
+    padding: var(--surf-ui-tooltip-padding-y) var(--surf-ui-tooltip-padding-x);
   }
 }

package/dist/css/rules/tree.css

@@ -3,96 +3,96 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-tree-scroll {
+  .surf-tree-scroll {
     min-inline-size: 0;
   }
-  .pui-tree-viewport {
+  .surf-tree-viewport {
     block-size: 100%;
   }
-  .pui-tree {
+  .surf-tree {
     position: relative;
     min-inline-size: 0;
   }
-  .pui-tree-item {
+  .surf-tree-item {
     display: flex;
     align-items: center;
-    gap: var(--space-1);
-    padding-inline-end: var(--space-2);
-    border-radius: var(--radius-md);
-    color: var(--ink);
+    gap: var(--surf-space-1);
+    padding-inline-end: var(--surf-space-2);
+    border-radius: var(--surf-radius-md);
+    color: var(--surf-ink);
     cursor: default;
-    outline-offset: var(--focus-ring-inset);
-    transition: background-color var(--duration-fast) var(--ease-out);
+    outline-offset: var(--surf-focus-ring-inset);
+    transition: background-color var(--surf-duration-fast) var(--surf-ease-out);
   }
-  .pui-tree-item:hover {
-    background: var(--interaction-hover-bg);
+  .surf-tree-item:hover {
+    background: var(--surf-interaction-hover-bg);
   }
-  .pui-tree-item[aria-selected='true'] {
-    background: var(--selected);
+  .surf-tree-item[aria-selected='true'] {
+    background: var(--surf-selected);
   }
-  .pui-tree-item:focus-visible {
-    outline: var(--focus-ring-width) solid var(--interaction-focus);
+  .surf-tree-item:focus-visible {
+    outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
   }
-  .pui-tree-item[aria-disabled='true'] {
-    color: var(--ink-muted);
+  .surf-tree-item[aria-disabled='true'] {
+    color: var(--surf-ink-muted);
   }
-  .pui-tree-toggle,
-  .pui-tree-leaf {
+  .surf-tree-toggle,
+  .surf-tree-leaf {
     inline-size: 32px;
     block-size: 32px;
     flex: 0 0 32px;
   }
-  .pui-tree-toggle {
+  .surf-tree-toggle {
     display: grid;
     place-items: center;
     padding: 0;
     border: 0;
-    border-radius: var(--radius-full);
+    border-radius: var(--surf-radius-pill);
     background: transparent;
     color: inherit;
   }
-  .pui-tree-toggle:hover:not(:disabled) {
-    background: var(--interaction-hover-bg);
+  .surf-tree-toggle:hover:not(:disabled) {
+    background: var(--surf-interaction-hover-bg);
   }
-  .pui-tree-toggle:active:not(:disabled) {
-    background: var(--interaction-active-bg);
+  .surf-tree-toggle:active:not(:disabled) {
+    background: var(--surf-interaction-active-bg);
   }
-  .pui-tree-toggle svg[data-expanded] {
+  .surf-tree-toggle svg[data-expanded] {
     rotate: 90deg;
   }
-  .pui-tree:dir(rtl) .pui-tree-toggle svg[data-expanded] {
+  .surf-tree:dir(rtl) .surf-tree-toggle svg[data-expanded] {
     rotate: -90deg;
   }
-  .pui-tree-label {
+  .surf-tree-label {
     min-inline-size: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .pui-tree-empty {
-    padding: var(--space-4);
-    color: var(--ink-muted);
+  .surf-tree-empty {
+    padding: var(--surf-space-4);
+    color: var(--surf-ink-muted);
   }
   @media (prefers-reduced-motion: reduce) {
-    .pui-tree-item {
+    .surf-tree-item {
       transition: none;
     }
   }
   @media (forced-colors: active) {
-    .pui-tree-item[aria-selected='true'] {
+    .surf-tree-item[aria-selected='true'] {
       background: Highlight;
       color: HighlightText;
     }
-    .pui-tree-item[aria-disabled='true'] {
+    .surf-tree-item[aria-disabled='true'] {
       color: GrayText;
     }
-    .pui-tree-item:focus-visible {
+    .surf-tree-item:focus-visible {
       outline-color: Highlight;
     }
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *).pui-tree-item {
-    font-size: var(--ui-font);
+  :where([data-ui-size], [data-ui-size] *).surf-tree-item {
+    font-size: var(--surf-ui-font);
   }
 }

package/dist/css/scroll-area.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/scroll-area.css';

package/dist/css/select.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/field-control.css';
 @import './rules/sizing.css';

package/dist/css/separator.css

@@ -2,8 +2,8 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
-@import '@surflane/design-tokens/presentation/separator.css';
+@import '@surflane/css/presentation/separator.css';
 @import './rules/separator.css';

package/dist/css/sheet.css

@@ -2,10 +2,10 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/icon.css';
-@import '@surflane/design-tokens/controls.css';
+@import '@surflane/css/controls.css';
 @import './rules/panel.css';
 @import './rules/sheet.css';

package/dist/css/sizing.css

@@ -2,6 +2,6 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';

package/dist/css/skeleton.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/skeleton.css';

package/dist/css/slider.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/slider.css';

package/dist/css/sparkline.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/sparkline.css';

package/dist/css/spinner.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/spinner.css';

package/dist/css/stat.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/icon.css';

package/dist/css/styles.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/field-control.css';
 @import './rules/sizing.css';
@@ -16,7 +16,7 @@
 @import './rules/button.css';
 @import './rules/menu.css';
 @import './rules/scroll-area.css';
-@import '@surflane/design-tokens/controls.css';
+@import '@surflane/css/controls.css';
 @import './rules/dialog.css';
 @import './rules/panel.css';
 @import './rules/drawer.css';
@@ -26,7 +26,7 @@
 @import './rules/fieldset.css';
 @import './rules/choice.css';
 @import './rules/textarea.css';
-@import '@surflane/design-tokens/presentation/table.css';
+@import '@surflane/css/presentation/table.css';
 @import './rules/table.css';
 @import './rules/checkbox.css';
 @import './rules/radio-group.css';
@@ -49,13 +49,13 @@
 @import './rules/toolbar.css';
 @import './rules/menubar.css';
 @import './rules/context-menu.css';
-@import '@surflane/design-tokens/presentation/link.css';
+@import '@surflane/css/presentation/link.css';
 @import './rules/link.css';
 @import './rules/preview-card.css';
 @import './rules/navigation-menu.css';
 @import './rules/otp-field.css';
 @import './rules/toast.css';
-@import '@surflane/design-tokens/presentation/badge.css';
+@import '@surflane/css/presentation/badge.css';
 @import './rules/badge.css';
 @import './rules/file-upload.css';
 @import './rules/filter-bar.css';
@@ -63,34 +63,34 @@
 @import './rules/tree.css';
 @import './rules/date-picker.css';
 @import './rules/chart.css';
-@import '@surflane/design-tokens/foundations/layout.css';
+@import '@surflane/css/foundations/layout.css';
 @import './rules/layout.css';
-@import '@surflane/design-tokens/presentation/card.css';
+@import '@surflane/css/presentation/card.css';
 @import './rules/card.css';
-@import '@surflane/design-tokens/presentation/avatar.css';
+@import '@surflane/css/presentation/avatar.css';
 @import './rules/avatar.css';
-@import '@surflane/design-tokens/presentation/list.css';
+@import '@surflane/css/presentation/list.css';
 @import './rules/list.css';
 @import './rules/stat.css';
 @import './rules/sparkline.css';
-@import '@surflane/design-tokens/presentation/inline-message.css';
+@import '@surflane/css/presentation/inline-message.css';
 @import './rules/inline-message.css';
 @import './rules/syntax-highlighter.css';
-@import '@surflane/design-tokens/presentation/code.css';
+@import '@surflane/css/presentation/code.css';
 @import './rules/code.css';
-@import '@surflane/design-tokens/presentation/empty-state.css';
+@import '@surflane/css/presentation/empty-state.css';
 @import './rules/empty-state.css';
-@import '@surflane/design-tokens/presentation/breadcrumbs.css';
+@import '@surflane/css/presentation/breadcrumbs.css';
 @import './rules/breadcrumbs.css';
-@import '@surflane/design-tokens/foundations/typography.css';
+@import '@surflane/css/foundations/typography.css';
 @import './rules/typography.css';
 @import './rules/markdown.css';
-@import '@surflane/design-tokens/presentation/separator.css';
+@import '@surflane/css/presentation/separator.css';
 @import './rules/separator.css';
-@import '@surflane/design-tokens/presentation/pagination.css';
+@import '@surflane/css/presentation/pagination.css';
 @import './rules/pagination.css';
 @import './rules/bottom-navigation.css';
-@import '@surflane/design-tokens/foundations/page-header.css';
+@import '@surflane/css/foundations/page-header.css';
 @import './rules/page-header.css';
 @import './rules/native-select.css';
 @import './rules/autocomplete.css';

package/dist/css/switch.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/choice.css';

package/dist/css/syntax-highlighter.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/scroll-area.css';

package/dist/css/table.css

@@ -2,11 +2,11 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/icon.css';
 @import './rules/button.css';
 @import './rules/scroll-area.css';
-@import '@surflane/design-tokens/presentation/table.css';
+@import '@surflane/css/presentation/table.css';
 @import './rules/table.css';

package/dist/css/tabs.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/tabs.css';

package/dist/css/textarea.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/field-control.css';
 @import './rules/sizing.css';

package/dist/css/toast.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/popup.css';

package/dist/css/toggle-group.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/bar.css';

package/dist/css/toggle.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/button.css';

package/dist/css/toolbar.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/field-control.css';
 @import './rules/sizing.css';

package/dist/css/tooltip.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/popup.css';

package/dist/css/tree.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/icon.css';

package/dist/css/typography.css

@@ -2,8 +2,8 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
-@import '@surflane/design-tokens/foundations/typography.css';
+@import '@surflane/css/foundations/typography.css';
 @import './rules/typography.css';

package/dist/date-picker.js

@@ -11,30 +11,50 @@ 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: 'surf-date-input', children: (segment) => (_jsx(DateSegment, { segment: segment, className: 'surf-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: 'surf-field-description', children: description })), _jsx(FieldError, { className: 'surf-field-error', children: errorMessage })] }));
 }
 function CalendarButton() {
-    return (_jsx(Button, { className: 'pui-date-trigger', children: _jsx(Icon, { name: 'calendar' }) }));
+    return (_jsx(Button, { className: 'surf-date-trigger', children: _jsx(Icon, { name: 'calendar' }) }));
 }
 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(Icon, { name: 'chevron-back' }) }), _jsx(Heading, { className: 'pui-calendar-heading' }), _jsx(Button, { slot: 'next', className: 'pui-calendar-nav', children: _jsx(Icon, { name: 'chevron-forward' }) })] }), _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: 'surf-calendar-header', children: [_jsx(Button, { slot: 'previous', className: 'surf-calendar-nav', children: _jsx(Icon, { name: 'chevron-back' }) }), _jsx(Heading, { className: 'surf-calendar-heading' }), _jsx(Button, { slot: 'next', className: 'surf-calendar-nav', children: _jsx(Icon, { name: 'chevron-forward' }) })] }), _jsxs(CalendarGrid, { className: 'surf-calendar-grid', weekdayStyle: 'short', children: [_jsx(CalendarGridHeader, { children: (day) => (_jsx(CalendarHeaderCell, { className: 'surf-calendar-weekday', children: day })) }), _jsx(CalendarGridBody, { children: (date) => (_jsx(CalendarCell, { date: date, className: 'surf-calendar-day', children: ({ formattedDate }) => {
+                                const [before, after] = dayAffixes(locale);
+                                return `${before}${formattedDate}${after}`;
+                            } })) })] })] }));
+}
+// The words a locale writes around a day number, such as 일 in Korean or 日 in
+// Japanese. react-aria gives the number alone.
+const affixes = new Map();
+function dayAffixes(locale) {
+    let pair = affixes.get(locale);
+    if (!pair) {
+        const parts = new Intl.DateTimeFormat(locale, {
+            day: 'numeric',
+            timeZone: 'UTC',
+        }).formatToParts(Date.UTC(2026, 0, 1));
+        const day = parts.findIndex((part) => part.type === 'day');
+        const join = (list) => list.map((part) => part.value).join('');
+        pair = [join(parts.slice(0, day)), join(parts.slice(day + 1))];
+        affixes.set(locale, pair);
+    }
+    return pair;
 }
 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: 'surf-date-popover', offset: 8, placement: 'bottom start', children: _jsx(Dialog, { "aria-label": label, className: 'surf-date-dialog', children: range ? (_jsx(RangeCalendar, { className: 'surf-calendar', children: _jsx(CalendarContents, {}) })) : (_jsx(Calendar, { className: 'surf-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('surf-date-picker', className), children: [_jsx(Label, { className: 'surf-field-label', children: label }), _jsxs(Group, { className: 'surf-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('surf-date-picker surf-date-range-picker', className), children: [_jsx(Label, { className: 'surf-field-label', children: label }), _jsxs(Group, { className: 'surf-date-group', children: [_jsxs("div", { className: 'surf-date-range-inputs', children: [_jsx(Segments, { slot: 'start' }), _jsx("span", { "aria-hidden": 'true', className: 'surf-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('surf-time-field', className), children: [_jsx(Label, { className: 'surf-field-label', children: label }), _jsx("div", { className: 'surf-date-group', children: _jsx(Segments, {}) }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage })] }));
 }

package/dist/dialog.d.ts

@@ -2,29 +2,41 @@ import * as React from 'react';
 import { type ComponentSizeAlias } from './sizing.js';
 import { Dialog as BaseDialog } from '@base-ui/react/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"> & {
+declare const DialogCloseButton: ({ className, "aria-label": label, ref, ...props }: Omit<React.ComponentPropsWithoutRef<typeof BaseDialog.Close>, "children"> & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.JSX.Element;
+declare const DialogContent: ({ size, className, children, closeLabel, closeDisabled, focusBoundaryLabel, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseDialog.Popup> & {
     /** Width and density: small 420px, default 640px, large 840px. */
     size?: ComponentSizeAlias;
     closeLabel?: string;
     closeDisabled?: boolean;
     focusBoundaryLabel?: string;
-} & React.RefAttributes<HTMLDivElement>>;
+} & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => 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 const DialogBody: ({ className, ref, ...props }: React.ComponentProps<"div"> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => 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"> & {
+    Content: ({ size, className, children, closeLabel, closeDisabled, focusBoundaryLabel, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseDialog.Popup> & {
         /** Width and density: small 420px, default 640px, large 840px. */
         size?: ComponentSizeAlias;
         closeLabel?: string;
         closeDisabled?: boolean;
         focusBoundaryLabel?: string;
-    } & React.RefAttributes<HTMLDivElement>>;
+    } & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
     Header: typeof DialogHeader;
-    Body: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Body: ({ className, ref, ...props }: React.ComponentProps<"div"> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
     Footer: typeof DialogFooter;
-    CloseButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref">, "children"> & React.RefAttributes<HTMLButtonElement>>;
+    CloseButton: ({ className, "aria-label": label, ref, ...props }: Omit<React.ComponentPropsWithoutRef<typeof BaseDialog.Close>, "children"> & {
+        ref?: React.Ref<HTMLButtonElement>;
+    }) => React.JSX.Element;
     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>>;
     Description: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;