@surflane/ui 0.1.0 → 0.2.0

package/dist/markdown.js

@@ -1,27 +1,27 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import { CodeBlock } from "./content.js";
-import { Table } from "./data.js";
+import * as React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { CodeBlock } from './content.js';
+import { Table } from './data.js';
 function text(node) {
-    return "value" in node
+    return 'value' in node
         ? node.value
-        : "children" in node
-            ? node.children.map((child) => text(child)).join("")
-            : "";
+        : 'children' in node
+            ? node.children.map((child) => text(child)).join('')
+            : '';
 }
 function visit(node, callback) {
-    if (node.type === "element")
+    if (node.type === 'element')
         callback(node);
-    if ("children" in node)
+    if ('children' in node)
         node.children.forEach((child) => visit(child, callback));
 }
 /** CommonMark + GFM. HTML stays disabled, URLs use react-markdown's safe default.
  * Fetching, permissions, frontmatter, MDX and script execution are caller concerns. */
-export const Markdown = React.forwardRef(function Markdown({ source, label = "Markdown content", headingLevel = 2, codeWrap = false, className, ...props }, ref) {
-    const prefix = `md-${React.useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+export const Markdown = React.forwardRef(function Markdown({ source, label = 'Markdown content', headingLevel = 2, codeWrap = false, className, ...props }, ref) {
+    const prefix = `md-${React.useId().replace(/[^a-zA-Z0-9_-]/g, '')}`;
     const headings = React.useMemo(() => () => (tree) => {
         const counts = new Map();
         const anchors = new Map();
@@ -30,43 +30,43 @@ export const Markdown = React.forwardRef(function Markdown({ source, label = "Ma
             if (!/^h[1-6]$/.test(node.tagName))
                 return;
             const slug = text(node)
-                .normalize("NFKC")
+                .normalize('NFKC')
                 .toLowerCase()
-                .replace(/[^\p{L}\p{N}\s_-]/gu, "")
+                .replace(/[^\p{L}\p{N}\s_-]/gu, '')
                 .trim()
-                .replace(/\s+/g, "-") || "section";
+                .replace(/\s+/g, '-') || 'section';
             const count = counts.get(slug) ?? 0;
             counts.set(slug, count + 1);
             const key = count ? `${slug}-${count}` : slug;
             const id = `${prefix}-${key}`;
-            if (typeof node.properties.id === "string")
+            if (typeof node.properties.id === 'string')
                 previousIds.set(node.properties.id, id);
             node.properties.id = id;
             anchors.set(key, id);
         });
         visit(tree, (node) => {
-            if (node.tagName === "li" &&
-                String(node.properties.className ?? "").includes("task-list-item")) {
-                const taskLabel = text(node).trim() || "Task list item";
+            if (node.tagName === 'li' &&
+                String(node.properties.className ?? '').includes('task-list-item')) {
+                const taskLabel = text(node).trim() || 'Task list item';
                 visit(node, (child) => {
-                    if (child.tagName === "input" &&
-                        child.properties.type === "checkbox")
+                    if (child.tagName === 'input' &&
+                        child.properties.type === 'checkbox')
                         child.properties.ariaLabel = taskLabel;
                 });
             }
-            for (const property of ["ariaDescribedBy", "ariaLabelledBy"]) {
+            for (const property of ['ariaDescribedBy', 'ariaLabelledBy']) {
                 const references = node.properties[property];
                 if (Array.isArray(references))
                     node.properties[property] = references.map((value) => previousIds.get(String(value)) ?? value);
-                else if (typeof references === "string")
+                else if (typeof references === 'string')
                     node.properties[property] = references
                         .split(/\s+/)
                         .map((value) => previousIds.get(value) ?? value)
-                        .join(" ");
+                        .join(' ');
             }
-            if (node.tagName !== "a" ||
-                typeof node.properties.href !== "string" ||
-                !node.properties.href.startsWith("#"))
+            if (node.tagName !== 'a' ||
+                typeof node.properties.href !== 'string' ||
+                !node.properties.href.startsWith('#'))
                 return;
             try {
                 const target = anchors.get(decodeURIComponent(node.properties.href.slice(1)));
@@ -91,31 +91,31 @@ export const Markdown = React.forwardRef(function Markdown({ source, label = "Ma
                 const child = React.Children.toArray(children)[0];
                 if (!React.isValidElement(child))
                     return _jsx("pre", { children: children });
-                const language = /(?:^|\s)language-([^\s]+)/.exec(child.props.className ?? "")?.[1] ?? "text";
-                const code = String(child.props.children ?? "").replace(/\n$/, "");
+                const language = /(?:^|\s)language-([^\s]+)/.exec(child.props.className ?? '')?.[1] ?? 'text';
+                const code = String(child.props.children ?? '').replace(/\n$/, '');
                 return (_jsx(CodeBlock, { code: code, language: language, wrap: codeWrap, label: `${label}: code at line ${node?.position?.start.line ?? 1}` }));
             },
             code({ node: _node, ...codeProps }) {
-                return _jsx("code", { ...codeProps, className: "pui-markdown-inline-code" });
+                return _jsx("code", { ...codeProps, className: 'pui-markdown-inline-code' });
             },
             table({ node, children, ...tableProps }) {
-                return (_jsx(Table.Container, { label: `${label}: table at line ${node?.position?.start.line ?? 1}`, orientation: "horizontal", children: _jsx("table", { ...tableProps, className: "pui-table", children: children }) }));
+                return (_jsx(Table.Container, { label: `${label}: table at line ${node?.position?.start.line ?? 1}`, orientation: 'horizontal', children: _jsx("table", { ...tableProps, className: 'pui-table', children: children }) }));
             },
             th({ node: _node, ...cellProps }) {
-                return (_jsx("th", { ...cellProps, scope: "col", className: "pui-table-cell pui-table-header" }));
+                return (_jsx("th", { ...cellProps, scope: 'col', className: 'pui-table-cell pui-table-header' }));
             },
             td({ node: _node, ...cellProps }) {
-                return _jsx("td", { ...cellProps, className: "pui-table-cell" });
+                return _jsx("td", { ...cellProps, className: 'pui-table-cell' });
             },
             a({ node: _node, href, children, ...linkProps }) {
                 return href ? (_jsx("a", { ...linkProps, href: href, children: children })) : (_jsx("span", { children: children }));
             },
             img({ node: _node, src, alt, ...imageProps }) {
-                return src ? (_jsx("img", { ...imageProps, src: src, alt: alt ?? "", loading: "lazy" })) : (_jsx("span", { children: alt }));
+                return src ? (_jsx("img", { ...imageProps, src: src, alt: alt ?? '', loading: 'lazy' })) : (_jsx("span", { children: alt }));
             },
         };
     }, [headingLevel, label, codeWrap]);
-    return (_jsx("div", { ...props, ref: ref, role: "article", className: ["pui-prose pui-markdown", className]
+    return (_jsx("div", { ...props, ref: ref, role: 'article', className: ['pui-prose pui-markdown', className]
             .filter(Boolean)
-            .join(" "), "aria-label": label, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [headings], remarkRehypeOptions: { clobberPrefix: `${prefix}-` }, skipHtml: true, components: components, children: source }) }));
+            .join(' '), "aria-label": label, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [headings], remarkRehypeOptions: { clobberPrefix: `${prefix}-` }, skipHtml: true, components: components, children: source }) }));
 });

package/dist/menu.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { Menu as BaseMenu } from "@base-ui/react/menu";
+import * as React from 'react';
+import { Menu as BaseMenu } from '@base-ui/react/menu';
 declare const MenuPopup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/menu.js

@@ -1,26 +1,26 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-import { skin, part } from "./parts.js";
-const MenuPopup = part(BaseMenu.Popup, "pui-menu");
-const MenuPositioner = part(BaseMenu.Positioner, "pui-positioner");
-const MenuContent = React.forwardRef(function MenuContent({ align = "end", sideOffset = 6, side, collisionPadding, className, ...props }, ref) {
+import * as React from 'react';
+import { Menu as BaseMenu } from '@base-ui/react/menu';
+import { skin, part } from './parts.js';
+const MenuPopup = part(BaseMenu.Popup, 'pui-menu');
+const MenuPositioner = part(BaseMenu.Positioner, 'pui-positioner');
+const MenuContent = React.forwardRef(function MenuContent({ align = 'end', sideOffset = 6, side, collisionPadding, className, ...props }, ref) {
     return (_jsx(MenuPositioner, { align: align, side: side, sideOffset: sideOffset, collisionPadding: collisionPadding, children: _jsx(MenuPopup, { ...props, ref: ref, className: className }) }));
 });
 const MenuTrigger = React.forwardRef(function MenuTrigger({ className, ...props }, ref) {
-    return (_jsx(BaseMenu.Trigger, { "data-variant": "ghost", ...props, ref: ref, className: skin("pui-button pui-menu-trigger", className) }));
+    return (_jsx(BaseMenu.Trigger, { "data-variant": 'ghost', ...props, ref: ref, className: skin('pui-button pui-menu-trigger', className) }));
 });
 const CheckboxIndicator = React.forwardRef(function CheckboxIndicator({ className, children, ...props }, ref) {
-    return (_jsx(BaseMenu.CheckboxItemIndicator, { keepMounted: true, ...props, ref: ref, className: skin("pui-menu-indicator", className), children: children ?? (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", "aria-hidden": "true", children: _jsx("path", { d: "m5 12 4 4L19 6" }) })) }));
+    return (_jsx(BaseMenu.CheckboxItemIndicator, { keepMounted: true, ...props, ref: ref, className: skin('pui-menu-indicator', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm5 12 4 4L19 6' }) })) }));
 });
 const RadioIndicator = React.forwardRef(function RadioIndicator({ className, children, ...props }, ref) {
-    return (_jsx(BaseMenu.RadioItemIndicator, { keepMounted: true, ...props, ref: ref, className: skin("pui-menu-indicator", className), children: children ?? (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: _jsx("circle", { cx: "12", cy: "12", r: "4" }) })) }));
+    return (_jsx(BaseMenu.RadioItemIndicator, { keepMounted: true, ...props, ref: ref, className: skin('pui-menu-indicator', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'currentColor', "aria-hidden": 'true', children: _jsx("circle", { cx: '12', cy: '12', r: '4' }) })) }));
 });
 const SubmenuTrigger = React.forwardRef(function SubmenuTrigger({ className, children, indicator, ...props }, ref) {
-    return (_jsxs(BaseMenu.SubmenuTrigger, { ...props, ref: ref, className: skin("pui-menu-item pui-menu-submenu-trigger", className), children: [children, indicator === false
+    return (_jsxs(BaseMenu.SubmenuTrigger, { ...props, ref: ref, className: skin('pui-menu-item pui-menu-submenu-trigger', className), children: [children, indicator === false
                 ? null
-                : (indicator ?? (_jsx("svg", { className: "pui-submenu-arrow", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", "aria-hidden": "true", children: _jsx("path", { d: "m9 6 6 6-6 6" }) })))] }));
+                : (indicator ?? (_jsx("svg", { className: 'pui-submenu-arrow', width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm9 6 6 6-6 6' }) })))] }));
 });
 export const Menu = {
     ...BaseMenu,
@@ -31,13 +31,13 @@ export const Menu = {
     CheckboxItemIndicator: CheckboxIndicator,
     RadioItemIndicator: RadioIndicator,
     SubmenuTrigger,
-    Item: part(BaseMenu.Item, "pui-menu-item"),
-    LinkItem: part(BaseMenu.LinkItem, "pui-menu-item"),
-    CheckboxItem: part(BaseMenu.CheckboxItem, "pui-menu-item pui-menu-check-item"),
-    RadioItem: part(BaseMenu.RadioItem, "pui-menu-item pui-menu-check-item"),
-    GroupLabel: part(BaseMenu.GroupLabel, "pui-menu-group-label"),
-    Separator: part(BaseMenu.Separator, "pui-menu-separator"),
-    Input: part(BaseMenu.Input, "pui-input"),
+    Item: part(BaseMenu.Item, 'pui-menu-item'),
+    LinkItem: part(BaseMenu.LinkItem, 'pui-menu-item'),
+    CheckboxItem: part(BaseMenu.CheckboxItem, 'pui-menu-item pui-menu-check-item'),
+    RadioItem: part(BaseMenu.RadioItem, 'pui-menu-item pui-menu-check-item'),
+    GroupLabel: part(BaseMenu.GroupLabel, 'pui-menu-group-label'),
+    Separator: part(BaseMenu.Separator, 'pui-menu-separator'),
+    Input: part(BaseMenu.Input, 'pui-input'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export { MenuPopup, MenuPositioner, MenuTrigger, MenuContent };

package/dist/messages.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { type StatusTone } from "./status.js";
+import * as React from 'react';
+import { type StatusTone } from './status.js';
 export declare const InlineMessage: {
     Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         tone?: StatusTone;

package/dist/messages.js

@@ -1,37 +1,37 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { useToneTransition } from "./tone-transition.js";
-import { part } from "./parts.js";
-import { StatusIcon } from "./status.js";
-const MessageRoot = React.forwardRef(function MessageRoot({ tone = "neutral", className, ...props }, ref) {
+import * as React from 'react';
+import { useToneTransition } from './tone-transition.js';
+import { part } from './parts.js';
+import { StatusIcon } from './status.js';
+const MessageRoot = React.forwardRef(function MessageRoot({ tone = 'neutral', className, ...props }, ref) {
     const elementRef = useToneTransition(tone, ref);
-    return (_jsx("div", { ...props, ref: elementRef, "data-tone": tone, className: ["pui-message", className].filter(Boolean).join(" ") }));
+    return (_jsx("div", { ...props, ref: elementRef, "data-tone": tone, className: ['pui-message', className].filter(Boolean).join(' ') }));
 });
-const MessageIcon = React.forwardRef(function MessageIcon({ tone = "neutral", children, className, ...props }, ref) {
-    return (_jsx("span", { ...props, ref: ref, "aria-hidden": "true", className: ["pui-message-icon", className].filter(Boolean).join(" "), children: children ?? _jsx(StatusIcon, { tone: tone }) }));
+const MessageIcon = React.forwardRef(function MessageIcon({ tone = 'neutral', children, className, ...props }, ref) {
+    return (_jsx("span", { ...props, ref: ref, "aria-hidden": 'true', className: ['pui-message-icon', className].filter(Boolean).join(' '), children: children ?? _jsx(StatusIcon, { tone: tone }) }));
 });
 export const InlineMessage = {
     Root: MessageRoot,
     Icon: MessageIcon,
-    Content: part("div", "pui-message-content"),
-    Title: part("strong", "pui-message-title"),
-    Description: part("p", "pui-message-description"),
-    Actions: part("div", "pui-message-actions"),
+    Content: part('div', 'pui-message-content'),
+    Title: part('strong', 'pui-message-title'),
+    Description: part('p', 'pui-message-description'),
+    Actions: part('div', 'pui-message-actions'),
 };
 const EmptyTitle = React.forwardRef(function EmptyTitle({ level = 3, className, ...props }, ref) {
     return React.createElement(`h${level}`, {
         ...props,
         ref,
-        className: ["pui-empty-title", className].filter(Boolean).join(" "),
+        className: ['pui-empty-title', className].filter(Boolean).join(' '),
     });
 });
 export const EmptyState = {
-    Root: part("div", "pui-empty"),
-    Icon: part("div", "pui-empty-icon"),
+    Root: part('div', 'pui-empty'),
+    Icon: part('div', 'pui-empty-icon'),
     Title: EmptyTitle,
-    Description: part("p", "pui-empty-description"),
-    Actions: part("div", "pui-empty-actions"),
+    Description: part('p', 'pui-empty-description'),
+    Actions: part('div', 'pui-empty-actions'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Root: EmptyStateRoot, Icon: EmptyStateIcon, Title: EmptyStateTitle, Description: EmptyStateDescription, Actions: EmptyStateActions, } = EmptyState;

package/dist/navigation-menu.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+import * as React from 'react';
+import { NavigationMenu as BaseNavigationMenu } from '@base-ui/react/navigation-menu';
 declare function Root<Value>(props: BaseNavigationMenu.Root.Props<Value>): React.JSX.Element;
 export declare const NavigationMenu: {
     Root: typeof Root;

package/dist/navigation-menu.js

@@ -1,30 +1,30 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
-import { part, skin } from "./parts.js";
+import * as React from 'react';
+import { NavigationMenu as BaseNavigationMenu } from '@base-ui/react/navigation-menu';
+import { part, skin } from './parts.js';
 function Root(props) {
-    const { className, orientation = "horizontal", ...rest } = props;
-    return (_jsx(BaseNavigationMenu.Root, { ...rest, orientation: orientation, "data-orientation": orientation, className: skin("pui-navigation-menu", className) }));
+    const { className, orientation = 'horizontal', ...rest } = props;
+    return (_jsx(BaseNavigationMenu.Root, { ...rest, orientation: orientation, "data-orientation": orientation, className: skin('pui-navigation-menu', className) }));
 }
 const Trigger = React.forwardRef(function Trigger({ className, children, indicator, ...props }, ref) {
-    return (_jsxs(BaseNavigationMenu.Trigger, { "data-variant": "ghost", ...props, ref: ref, className: skin("pui-button pui-navigation-trigger", className), children: [children, indicator === false
+    return (_jsxs(BaseNavigationMenu.Trigger, { "data-variant": 'ghost', ...props, ref: ref, className: skin('pui-button pui-navigation-trigger', className), children: [children, indicator === false
                 ? null
-                : (indicator ?? (_jsx(BaseNavigationMenu.Icon, { className: "pui-navigation-icon", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", "aria-hidden": "true", children: _jsx("path", { d: "m6 9 6 6 6-6" }) }) })))] }));
+                : (indicator ?? (_jsx(BaseNavigationMenu.Icon, { className: 'pui-navigation-icon', children: _jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 9 6 6 6-6' }) }) })))] }));
 });
 export const NavigationMenu = {
     ...BaseNavigationMenu,
     Root,
     Trigger,
-    List: part(BaseNavigationMenu.List, "pui-navigation-list"),
-    Item: part(BaseNavigationMenu.Item, "pui-navigation-item"),
-    Link: part(BaseNavigationMenu.Link, "pui-navigation-link"),
-    Content: part(BaseNavigationMenu.Content, "pui-navigation-content"),
-    Positioner: part(BaseNavigationMenu.Positioner, "pui-positioner pui-navigation-positioner"),
-    Popup: part(BaseNavigationMenu.Popup, "pui-navigation-popup"),
-    Viewport: part(BaseNavigationMenu.Viewport, "pui-navigation-viewport"),
+    List: part(BaseNavigationMenu.List, 'pui-navigation-list'),
+    Item: part(BaseNavigationMenu.Item, 'pui-navigation-item'),
+    Link: part(BaseNavigationMenu.Link, 'pui-navigation-link'),
+    Content: part(BaseNavigationMenu.Content, 'pui-navigation-content'),
+    Positioner: part(BaseNavigationMenu.Positioner, 'pui-positioner pui-navigation-positioner'),
+    Popup: part(BaseNavigationMenu.Popup, 'pui-navigation-popup'),
+    Viewport: part(BaseNavigationMenu.Viewport, 'pui-navigation-viewport'),
     Icon: React.forwardRef(function Icon({ children, className, ...props }, ref) {
-        return (_jsx(BaseNavigationMenu.Icon, { ...props, ref: ref, className: skin("pui-navigation-icon", className), children: children ?? (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", "aria-hidden": "true", children: _jsx("path", { d: "m6 9 6 6 6-6" }) })) }));
+        return (_jsx(BaseNavigationMenu.Icon, { ...props, ref: ref, className: skin('pui-navigation-icon', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 9 6 6 6-6' }) })) }));
     }),
 };
 // Flat names for React Server Components, which cannot dot into client exports.

package/dist/navigation.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { type ComponentSizeAlias } from "./sizing.js";
-import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
 export declare const Tabs: {
     Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
@@ -69,8 +69,8 @@ export declare const Separator: React.ForwardRefExoticComponent<Omit<Omit<import
     inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export declare const Link: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-declare function BreadcrumbSeparator({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
-declare function BreadcrumbCurrent({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function BreadcrumbSeparator({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+declare function BreadcrumbCurrent({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
 export declare const Breadcrumbs: {
     Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
     List: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;

package/dist/navigation.js

@@ -1,95 +1,95 @@
-"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 { Tabs as BaseTabs } from "@base-ui/react/tabs";
-import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
-import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
-import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
-import { Separator as BaseSeparator } from "@base-ui/react/separator";
-import { skin, part } from "./parts.js";
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
+import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
+import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
+import { skin, part } from './parts.js';
 export const Tabs = {
     ...BaseTabs,
-    Root: part(BaseTabs.Root, "pui-tabs"),
-    List: part(BaseTabs.List, "pui-tabs-list"),
-    Tab: part(BaseTabs.Tab, "pui-tabs-tab"),
-    Panel: part(BaseTabs.Panel, "pui-tabs-panel"),
-    Indicator: part(BaseTabs.Indicator, "pui-tabs-indicator"),
+    Root: part(BaseTabs.Root, 'pui-tabs'),
+    List: part(BaseTabs.List, 'pui-tabs-list'),
+    Tab: part(BaseTabs.Tab, 'pui-tabs-tab'),
+    Panel: part(BaseTabs.Panel, 'pui-tabs-panel'),
+    Indicator: part(BaseTabs.Indicator, 'pui-tabs-indicator'),
 };
 function Chevron() {
-    return (_jsx("svg", { className: "pui-disclosure-chevron", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { d: "m9 6 6 6-6 6" }) }));
+    return (_jsx("svg", { className: 'pui-disclosure-chevron', width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.5', "aria-hidden": 'true', children: _jsx("path", { d: 'm9 6 6 6-6 6' }) }));
 }
 function AccordionRoot({ className, ...props }) {
-    return (_jsx(BaseAccordion.Root, { ...props, className: skin("pui-accordion", className) }));
+    return (_jsx(BaseAccordion.Root, { ...props, className: skin('pui-accordion', className) }));
 }
 const AccordionTrigger = React.forwardRef(function AccordionTrigger({ className, children, indicator, ...props }, ref) {
-    return (_jsxs(BaseAccordion.Trigger, { ...props, ref: ref, className: skin("pui-disclosure-trigger", className), children: [_jsx("span", { className: "pui-disclosure-label", children: children }), indicator === undefined ? _jsx(Chevron, {}) : indicator] }));
+    return (_jsxs(BaseAccordion.Trigger, { ...props, ref: ref, className: skin('pui-disclosure-trigger', className), children: [_jsx("span", { className: 'pui-disclosure-label', children: children }), indicator === undefined ? _jsx(Chevron, {}) : indicator] }));
 });
 const AccordionPanel = React.forwardRef(function AccordionPanel({ className, children, render, ...props }, ref) {
-    return (_jsx(BaseAccordion.Panel, { ...props, ref: ref, className: skin("pui-accordion-panel", className), render: render ??
-            ((panelProps, state) => (_jsx("div", { ...panelProps, inert: state.transitionStatus === "ending" || undefined, "aria-hidden": state.transitionStatus === "ending" || undefined }))), children: _jsx("div", { className: "pui-disclosure-body", children: children }) }));
+    return (_jsx(BaseAccordion.Panel, { ...props, ref: ref, className: skin('pui-accordion-panel', className), render: render ??
+            ((panelProps, state) => (_jsx("div", { ...panelProps, inert: state.transitionStatus === 'ending' || undefined, "aria-hidden": state.transitionStatus === 'ending' || undefined }))), children: _jsx("div", { className: 'pui-disclosure-body', children: children }) }));
 });
 export const Accordion = {
     ...BaseAccordion,
     Root: AccordionRoot,
-    Item: part(BaseAccordion.Item, "pui-accordion-item"),
-    Header: part(BaseAccordion.Header, "pui-accordion-header"),
+    Item: part(BaseAccordion.Item, 'pui-accordion-item'),
+    Header: part(BaseAccordion.Header, 'pui-accordion-header'),
     Trigger: AccordionTrigger,
     Panel: AccordionPanel,
 };
 const CollapsibleTrigger = React.forwardRef(function CollapsibleTrigger({ className, children, indicator, ...props }, ref) {
-    return (_jsxs(BaseCollapsible.Trigger, { ...props, ref: ref, className: skin("pui-disclosure-trigger", className), children: [_jsx("span", { className: "pui-disclosure-label", children: children }), indicator === undefined ? _jsx(Chevron, {}) : indicator] }));
+    return (_jsxs(BaseCollapsible.Trigger, { ...props, ref: ref, className: skin('pui-disclosure-trigger', className), children: [_jsx("span", { className: 'pui-disclosure-label', children: children }), indicator === undefined ? _jsx(Chevron, {}) : indicator] }));
 });
 const CollapsiblePanel = React.forwardRef(function CollapsiblePanel({ className, children, ...props }, ref) {
-    return (_jsx(BaseCollapsible.Panel, { ...props, ref: ref, className: skin("pui-collapsible-panel", className), children: _jsx("div", { className: "pui-disclosure-body", children: children }) }));
+    return (_jsx(BaseCollapsible.Panel, { ...props, ref: ref, className: skin('pui-collapsible-panel', className), children: _jsx("div", { className: 'pui-disclosure-body', children: children }) }));
 });
 export const Collapsible = {
     ...BaseCollapsible,
-    Root: part(BaseCollapsible.Root, "pui-collapsible"),
+    Root: part(BaseCollapsible.Root, 'pui-collapsible'),
     Trigger: CollapsibleTrigger,
     Panel: CollapsiblePanel,
 };
 const AvatarRoot = React.forwardRef(function AvatarRoot({ size, className, ...props }, ref) {
     const scheme = useComponentSize(size);
-    return (_jsx(BaseAvatar.Root, { ...props, ref: ref, "data-size": size, "data-ui-size": scheme, className: skin("pui-avatar", className) }));
+    return (_jsx(BaseAvatar.Root, { ...props, ref: ref, "data-size": size, "data-ui-size": scheme, className: skin('pui-avatar', className) }));
 });
 function Person() {
-    return (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "8", r: "4" }), _jsx("path", { d: "M4 21v-2a8 8 0 0 1 16 0v2" })] }));
+    return (_jsxs("svg", { width: '18', height: '18', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.5', "aria-hidden": 'true', children: [_jsx("circle", { cx: '12', cy: '8', r: '4' }), _jsx("path", { d: 'M4 21v-2a8 8 0 0 1 16 0v2' })] }));
 }
 const AvatarFallback = React.forwardRef(function AvatarFallback({ children, className, ...props }, ref) {
-    return (_jsx(BaseAvatar.Fallback, { ...props, ref: ref, className: skin("pui-avatar-fallback", className), children: children ?? _jsx(Person, {}) }));
+    return (_jsx(BaseAvatar.Fallback, { ...props, ref: ref, className: skin('pui-avatar-fallback', className), children: children ?? _jsx(Person, {}) }));
 });
 export const Avatar = {
     ...BaseAvatar,
     Root: AvatarRoot,
-    Status: part("span", "pui-avatar-status"),
+    Status: part('span', 'pui-avatar-status'),
     Fallback: AvatarFallback,
-    Image: part(BaseAvatar.Image, "pui-avatar-image"),
+    Image: part(BaseAvatar.Image, 'pui-avatar-image'),
 };
 export const Separator = React.forwardRef(function Separator({ inset = false, className, ...props }, ref) {
-    return (_jsx(BaseSeparator, { ...props, ref: ref, "data-inset": inset || undefined, className: skin("pui-separator", className) }));
+    return (_jsx(BaseSeparator, { ...props, ref: ref, "data-inset": inset || undefined, className: skin('pui-separator', className) }));
 });
 export const Link = React.forwardRef(function Link({ className, ...props }, ref) {
-    return (_jsx("a", { ...props, ref: ref, className: ["pui-link", className].filter(Boolean).join(" ") }));
+    return (_jsx("a", { ...props, ref: ref, className: ['pui-link', className].filter(Boolean).join(' ') }));
 });
-const BreadcrumbRoot = React.forwardRef(function BreadcrumbRoot({ className, "aria-label": label = "Breadcrumb", ...props }, ref) {
-    return (_jsx("nav", { ...props, ref: ref, "aria-label": label, className: ["pui-breadcrumbs", className].filter(Boolean).join(" ") }));
+const BreadcrumbRoot = React.forwardRef(function BreadcrumbRoot({ className, 'aria-label': label = 'Breadcrumb', ...props }, ref) {
+    return (_jsx("nav", { ...props, ref: ref, "aria-label": label, className: ['pui-breadcrumbs', className].filter(Boolean).join(' ') }));
 });
-const BreadcrumbList = React.forwardRef(function BreadcrumbList({ className, role = "list", ...props }, ref) {
-    return (_jsx("ol", { ...props, role: role, ref: ref, className: ["pui-breadcrumb-list", className].filter(Boolean).join(" ") }));
+const BreadcrumbList = React.forwardRef(function BreadcrumbList({ className, role = 'list', ...props }, ref) {
+    return (_jsx("ol", { ...props, role: role, ref: ref, className: ['pui-breadcrumb-list', className].filter(Boolean).join(' ') }));
 });
 const BreadcrumbItem = React.forwardRef(function BreadcrumbItem({ className, ...props }, ref) {
-    return (_jsx("li", { ...props, ref: ref, className: ["pui-breadcrumb-item", className].filter(Boolean).join(" ") }));
+    return (_jsx("li", { ...props, ref: ref, className: ['pui-breadcrumb-item', className].filter(Boolean).join(' ') }));
 });
 function BreadcrumbSeparator({ className, ...props }) {
-    return (_jsx("span", { ...props, className: ["pui-breadcrumb-separator", className]
+    return (_jsx("span", { ...props, className: ['pui-breadcrumb-separator', className]
             .filter(Boolean)
-            .join(" "), "aria-hidden": "true", children: _jsx(Chevron, {}) }));
+            .join(' '), "aria-hidden": 'true', children: _jsx(Chevron, {}) }));
 }
 function BreadcrumbCurrent({ className, ...props }) {
-    return (_jsx("span", { ...props, className: ["pui-breadcrumb-current", className]
+    return (_jsx("span", { ...props, className: ['pui-breadcrumb-current', className]
             .filter(Boolean)
-            .join(" "), "aria-current": "page" }));
+            .join(' '), "aria-current": 'page' }));
 }
 export const Breadcrumbs = {
     Root: BreadcrumbRoot,

package/dist/otp-field.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export declare const OTPField: {
     Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/otp-field").OTPFieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Input: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/otp-field").OTPFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/otp-field.js

@@ -1,45 +1,45 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { useRender } from "@base-ui/react/use-render";
-import { OTPField as BaseOTPField } from "@base-ui/react/otp-field";
-import { part, skin } from "./parts.js";
-import { useResetValue, useRootRef } from "./form-state.js";
-const Root = React.forwardRef(function Root({ value, defaultValue = "", form, onValueChange, className, ...props }, forwardedRef) {
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { OTPField as BaseOTPField } from '@base-ui/react/otp-field';
+import { part, skin } from './parts.js';
+import { useResetValue, useRootRef } from './form-state.js';
+const Root = React.forwardRef(function Root({ value, defaultValue = '', form, onValueChange, className, ...props }, forwardedRef) {
     const [element, ref] = useRootRef(forwardedRef);
     const [local, setLocal, revision] = useResetValue(value, defaultValue, element, form);
-    return (_jsx(BaseOTPField.Root, { ...props, ref: ref, form: form, value: local, className: skin("pui-otp-field", className), onValueChange: (next, event) => {
+    return (_jsx(BaseOTPField.Root, { ...props, ref: ref, form: form, value: local, className: skin('pui-otp-field', className), onValueChange: (next, event) => {
             onValueChange?.(next, event);
             if (value === undefined && !event.isCanceled)
                 setLocal(next);
         } }, revision));
 });
 const Separator = React.forwardRef(function Separator({ className, ...props }, ref) {
-    return (_jsx(BaseOTPField.Separator, { "aria-hidden": "true", ...props, ref: ref, className: skin("pui-otp-separator", className) }));
+    return (_jsx(BaseOTPField.Separator, { "aria-hidden": 'true', ...props, ref: ref, className: skin('pui-otp-separator', className) }));
 });
 // Preserve Base UI's DOM refs and user render composition while fixing native-validation ARIA.
 function SlotElement({ domProps, state, render, }) {
     const { ref, ...props } = domProps;
     return useRender({
-        defaultTagName: "input",
+        defaultTagName: 'input',
         ref,
-        render: typeof render === "function"
+        render: typeof render === 'function'
             ? (nextProps) => render(nextProps, state)
             : render,
         props: {
             ...props,
-            "aria-invalid": !state.disabled && state.valid === false ? true : props["aria-invalid"],
+            'aria-invalid': !state.disabled && state.valid === false ? true : props['aria-invalid'],
         },
     });
 }
 const Input = React.forwardRef(function Input({ render, className, ...props }, ref) {
-    return (_jsx(BaseOTPField.Input, { ...props, ref: ref, className: skin("pui-input pui-otp-input", className), render: (domProps, state) => (_jsx(SlotElement, { domProps: domProps, state: state, render: render })) }));
+    return (_jsx(BaseOTPField.Input, { ...props, ref: ref, className: skin('pui-input pui-otp-input', className), render: (domProps, state) => (_jsx(SlotElement, { domProps: domProps, state: state, render: render })) }));
 });
 export const OTPField = {
     ...BaseOTPField,
     Root,
     Input,
-    Group: part("div", "pui-otp-group"),
+    Group: part('div', 'pui-otp-group'),
     Separator,
 };
 // Flat names for React Server Components, which cannot dot into client exports.

package/dist/pagination.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-type CommonPaginationProps = Omit<React.ComponentPropsWithoutRef<"nav">, "children"> & {
+import * as React from 'react';
+type CommonPaginationProps = Omit<React.ComponentPropsWithoutRef<'nav'>, 'children'> & {
     page: number;
     pageCount: number;
     siblings?: 0 | 1 | 2;