@surflane/ui 0.0.0-stage → 0.1.0

package/dist/forms.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useComponentSize } from "./sizing.js";
+import { Field as BaseField } from "@base-ui/react/field";
+import { Fieldset as BaseFieldset } from "@base-ui/react/fieldset";
+import { Form as BaseForm } from "@base-ui/react/form";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+const ChoiceResetPaint = React.createContext(0);
+import { skin, part } from "./parts.js";
+const FieldRoot = part(BaseField.Root, "pui-field");
+const FieldLabel = part(BaseField.Label, "pui-field-label");
+const FieldControl = part(BaseField.Control, "pui-input");
+const FieldDescription = part(BaseField.Description, "pui-field-description");
+const FieldError = part(BaseField.Error, "pui-field-error");
+const FieldItem = part(BaseField.Item, "pui-field-item");
+export const Field = {
+    ...BaseField,
+    Root: FieldRoot,
+    Label: FieldLabel,
+    Control: FieldControl,
+    Description: FieldDescription,
+    Error: FieldError,
+    Item: FieldItem,
+};
+export const Fieldset = {
+    ...BaseFieldset,
+    Root: part(BaseFieldset.Root, "pui-fieldset"),
+    Legend: part(BaseFieldset.Legend, "pui-fieldset-legend"),
+};
+export function Form({ className, ...props }) {
+    return (_jsx(BaseForm, { ...props, className: skin("pui-form", className) }));
+}
+export const Textarea = React.forwardRef(function Textarea({ className, size, ...props }, ref) {
+    const scheme = useComponentSize(size);
+    return (_jsx("textarea", { "data-ui-size": scheme, ...props, ref: ref, className: ["pui-input pui-textarea", className]
+            .filter(Boolean)
+            .join(" ") }));
+});
+import { useRootRef, useResetValue } from "./form-state.js";
+const CheckboxRoot = React.forwardRef(function CheckboxRoot({ checked, defaultChecked = false, onCheckedChange, className, form, ...props }, ref) {
+    React.useContext(ChoiceResetPaint);
+    const [element, attach] = useRootRef(ref);
+    const [selected, setSelected] = useResetValue(checked, defaultChecked, element, form);
+    return (_jsx(BaseCheckbox.Root, { ...props, form: form, ref: attach, checked: selected, className: skin("pui-checkbox", className), onCheckedChange: (next, event) => {
+            onCheckedChange?.(next, event);
+            if (checked === undefined && !event.isCanceled)
+                setSelected(next);
+        } }));
+});
+const CheckboxIndicator = React.forwardRef(function CheckboxIndicator({ className, children, ...props }, ref) {
+    return (_jsx(BaseCheckbox.Indicator, { ...props, ref: ref, className: skin("pui-checkbox-indicator", className), children: children ?? (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [_jsx("path", { className: "pui-checkbox-check", d: "m4 10 4 4 8-8" }), _jsx("path", { className: "pui-checkbox-mixed", d: "M4 10h12" })] })) }));
+});
+export const Checkbox = {
+    ...BaseCheckbox,
+    Root: CheckboxRoot,
+    Indicator: CheckboxIndicator,
+};
+export const CheckboxGroup = React.forwardRef(function CheckboxGroup({ value, defaultValue = [], onValueChange, className, ...props }, ref) {
+    const [element, attach] = useRootRef(ref);
+    const [selected, setSelected, revision] = useResetValue(value, defaultValue, element);
+    return (_jsx(ChoiceResetPaint.Provider, { value: revision, children: _jsx(BaseCheckboxGroup, { ...props, ref: attach, value: selected, className: skin("pui-choice-group", className), onValueChange: (next, event) => {
+                onValueChange?.(next, event);
+                if (value === undefined && !event.isCanceled)
+                    setSelected(next);
+            } }) }));
+});
+export function RadioGroup({ value, defaultValue, onValueChange, className, form, ref, ...props }) {
+    const [element, attach] = useRootRef(ref);
+    const [selected, setSelected, revision] = useResetValue(value, defaultValue ?? null, element, form);
+    return (_jsx(ChoiceResetPaint.Provider, { value: revision, children: _jsx(BaseRadioGroup, { ...props, form: form, ref: attach, value: selected, className: skin("pui-choice-group", className), onValueChange: (next, event) => {
+                onValueChange?.(next, event);
+                if (value === undefined && !event.isCanceled)
+                    setSelected(next);
+            } }) }));
+}
+const RadioRoot = React.forwardRef(function RadioRoot({ className, ...props }, ref) {
+    React.useContext(ChoiceResetPaint);
+    return (_jsx(BaseRadio.Root, { ...props, ref: ref, className: skin("pui-radio", className) }));
+});
+export const Radio = {
+    ...BaseRadio,
+    Root: RadioRoot,
+    Indicator: part(BaseRadio.Indicator, "pui-radio-indicator"),
+};
+const SwitchRoot = React.forwardRef(function SwitchRoot({ checked, defaultChecked = false, onCheckedChange, className, form, ...props }, ref) {
+    const [element, attach] = useRootRef(ref);
+    const [selected, setSelected] = useResetValue(checked, defaultChecked, element, form);
+    return (_jsx(BaseSwitch.Root, { ...props, form: form, ref: attach, checked: selected, className: skin("pui-switch", className), onCheckedChange: (next, event) => {
+            onCheckedChange?.(next, event);
+            if (checked === undefined && !event.isCanceled)
+                setSelected(next);
+        } }));
+});
+export const Switch = {
+    ...BaseSwitch,
+    Root: SwitchRoot,
+    Thumb: part(BaseSwitch.Thumb, "pui-switch-thumb"),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { CheckboxIndicator, CheckboxRoot, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldRoot, RadioRoot, SwitchRoot, };
+export const { Validity: FieldValidity } = Field;
+export const { Legend: FieldsetLegend, Root: FieldsetRoot } = Fieldset;
+export const { Indicator: RadioIndicator } = Radio;
+export const { Thumb: SwitchThumb } = Switch;

package/dist/foundations.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+export type Space = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20;
+export declare const Container: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    width?: "workspace" | "reading" | "wide" | "full";
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Stack: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    gap?: Space;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Inline: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    gap?: Space;
+    justify?: "start" | "between" | "end";
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Grid: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    gap?: Space;
+    /** Extend inline edges by the matching child content inset (card padding or table cell inset). The parent
+     * must reserve this space for the card surface and focus outline. */
+    bleed?: Space;
+    columns?: 1 | 2 | 3 | 4 | "layout";
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** Spans are explicit at each viewport breakpoint; placement follows DOM order. */
+export declare const GridItem: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    mediumSpan?: 1 | 2 | 3 | 4 | 5 | 6;
+    smallSpan?: 1 | 2 | 3 | 4;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Surface: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    tone?: "canvas" | "subtle";
+    padding?: Space;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function Heading({ level, size, className, ...props }: React.HTMLAttributes<HTMLHeadingElement> & {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    size?: "display" | "title" | "page" | "section" | "subsection" | "workspace" | "document";
+}): React.JSX.Element;
+export declare function Text({ as: Tag, variant, color, weight, className, ...props }: React.HTMLAttributes<HTMLElement> & {
+    as?: "p" | "span" | "div";
+    variant?: "body" | "reading" | "table" | "caption" | "label" | "mono" | "metric";
+    color?: "primary" | "secondary" | "muted";
+    weight?: "regular" | "medium";
+}): React.JSX.Element;
+export declare function PageHeader({ as: Root, headingProps, actionsLabel, title, description, breadcrumb, actions, level, size, className, ...props }: Omit<React.ComponentProps<"div">, "title"> & {
+    as?: "div" | "header";
+    headingProps?: Omit<React.HTMLAttributes<HTMLHeadingElement>, "children" | "dangerouslySetInnerHTML">;
+    actionsLabel?: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    breadcrumb?: React.ReactNode;
+    actions?: React.ReactNode;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    size?: "title" | "page" | "workspace" | "document";
+}): React.JSX.Element;
+export declare const Prose: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/foundations.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+const cx = (...values) => values.filter(Boolean).join(" ");
+const gapStyle = (gap, style) => ({
+    ...(gap === undefined ? {} : { "--layout-gap": `var(--space-${gap})` }),
+    ...style,
+});
+export const Container = React.forwardRef(function Container({ width = "workspace", className, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: cx("pui-container", className), "data-width": width }));
+});
+export const Stack = React.forwardRef(function Stack({ gap, className, style, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: cx("pui-stack", className), style: gapStyle(gap, style) }));
+});
+export const Inline = React.forwardRef(function Inline({ gap, justify = "start", className, style, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: cx("pui-inline", className), "data-justify": justify, style: gapStyle(gap, style) }));
+});
+export const Grid = React.forwardRef(function Grid({ gap, bleed = 0, columns = 3, className, style, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: cx("pui-grid", className), "data-columns": columns, style: gapStyle(gap, {
+            "--grid-inline-bleed": `var(--space-${bleed})`,
+            ...style,
+        }) }));
+});
+/** Spans are explicit at each viewport breakpoint; placement follows DOM order. */
+export const GridItem = React.forwardRef(function GridItem({ span, mediumSpan, smallSpan, className, style, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: cx("pui-grid-item", className), style: {
+            "--grid-item-span": span,
+            "--grid-item-span-medium": mediumSpan,
+            "--grid-item-span-small": smallSpan,
+            ...style,
+        } }));
+});
+export const Surface = React.forwardRef(function Surface({ tone = "subtle", padding, className, style, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: cx("pui-surface", className), "data-tone": tone, style: {
+            ...(padding === undefined
+                ? {}
+                : { "--surface-padding": `var(--space-${padding})` }),
+            ...style,
+        } }));
+});
+export function Heading({ level = 2, size = "section", className, ...props }) {
+    const Tag = `h${level}`;
+    return (_jsx(Tag, { ...props, className: cx("pui-heading", className), "data-size": size }));
+}
+export function Text({ as: Tag = "p", variant = "body", color = "primary", weight = "regular", className, ...props }) {
+    return (_jsx(Tag, { ...props, className: cx("pui-text", className), "data-variant": variant, "data-color": color, "data-weight": weight }));
+}
+export function PageHeader({ as: Root = "div", headingProps, actionsLabel, title, description, breadcrumb, actions, level = 1, size = "title", className, ...props }) {
+    return (_jsxs(Root, { ...props, className: cx("pui-page-header", className), children: [breadcrumb != null && breadcrumb !== false && breadcrumb !== "" && (_jsx("div", { className: "pui-page-header-breadcrumb", children: breadcrumb })), _jsxs("div", { className: "pui-page-header-content", children: [_jsxs("div", { className: "pui-page-header-copy", children: [_jsx(Heading, { ...headingProps, level: level, size: size, children: title }), description != null &&
+                                description !== false &&
+                                description !== "" && (_jsx(Text, { color: "secondary", className: "pui-page-header-description", children: description }))] }), actions != null && actions !== false && actions !== "" && (_jsx("div", { className: "pui-page-header-actions", role: actionsLabel ? "group" : undefined, "aria-label": actionsLabel, children: actions }))] })] }));
+}
+export const Prose = React.forwardRef(function Prose({ className, ...props }, ref) {
+    return _jsx("div", { ...props, ref: ref, className: cx("pui-prose", className) });
+});

package/dist/icon.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+declare const shapes: {
+    search: React.JSX.Element;
+    plus: React.JSX.Element;
+    close: React.JSX.Element;
+    check: React.JSX.Element;
+    info: React.JSX.Element;
+    alert: React.JSX.Element;
+    warning: React.JSX.Element;
+    menu: React.JSX.Element;
+    sun: React.JSX.Element;
+    moon: React.JSX.Element;
+    monitor: React.JSX.Element;
+    "chevron-down": React.JSX.Element;
+    "chevron-forward": React.JSX.Element;
+    "arrow-back": React.JSX.Element;
+    "external-link": React.JSX.Element;
+    copy: React.JSX.Element;
+    play: React.JSX.Element;
+    settings: React.JSX.Element;
+};
+export type IconName = keyof typeof shapes;
+export declare const iconNames: readonly IconName[];
+type Semantics = {
+    decorative?: true;
+    label?: never;
+} | {
+    decorative: false;
+    label: string;
+};
+export type IconProps = Omit<React.ComponentPropsWithoutRef<"svg">, "children" | "name" | "role" | "aria-label" | "aria-labelledby" | "aria-hidden" | "tabIndex" | "focusable" | "width" | "height" | "viewBox" | "strokeWidth" | "fill" | "stroke" | "title"> & Semantics & {
+    name: IconName;
+    size?: "sm" | "md" | "lg";
+};
+/** Static SVG only. Actions, focus, accessible button names and hit targets belong to the parent control. */
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
+export {};

package/dist/icon.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+const shapes = {
+    search: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "10.5", cy: "10.5", r: "6.5" }), _jsx("path", { d: "m16 16 4 4" })] })),
+    plus: _jsx("path", { d: "M12 5v14M5 12h14" }),
+    close: _jsx("path", { d: "m6 6 12 12M18 6 6 18" }),
+    check: _jsx("path", { d: "m5 12 4 4L19 6" }),
+    info: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M12 11v6m0-10v1" })] })),
+    alert: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M12 7v6m0 3v1" })] })),
+    warning: (_jsxs(_Fragment, { children: [_jsx("path", { d: "m12 3 10 18H2L12 3Z" }), _jsx("path", { d: "M12 9v4m0 3v1" })] })),
+    menu: _jsx("path", { d: "M4 6h16M4 12h16M4 18h16" }),
+    sun: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "4" }), _jsx("path", { d: "M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5" })] })),
+    moon: _jsx("path", { d: "M20.5 13.2A8.5 8.5 0 0 1 10.8 3.5 8.5 8.5 0 1 0 20.5 13.2Z" }),
+    monitor: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "13", rx: "2" }), _jsx("path", { d: "M8 21h8m-4-4v4" })] })),
+    "chevron-down": _jsx("path", { d: "m7 10 5 5 5-5" }),
+    "chevron-forward": _jsx("path", { d: "m9 6 6 6-6 6" }),
+    "arrow-back": _jsx("path", { d: "M20 12H4m7-7-7 7 7 7" }),
+    "external-link": (_jsx(_Fragment, { children: _jsx("path", { d: "M14 3h7v7m0-7L10 14M10 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5" }) })),
+    copy: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "8", y: "8", width: "12", height: "13", rx: "2" }), _jsx("path", { d: "M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" })] })),
+    play: _jsx("path", { d: "m7 3 14 9-14 9V3Z" }),
+    settings: (_jsx(_Fragment, { children: _jsx("path", { d: "M4 6h16M4 12h16M4 18h16M9 3v6m6 0v6m-6 0v6" }) })),
+};
+export const iconNames = Object.keys(shapes);
+/** Static SVG only. Actions, focus, accessible button names and hit targets belong to the parent control. */
+export const Icon = React.forwardRef(function Icon({ name, size = "sm", decorative = true, label, className, ...props }, ref) {
+    return (_jsx("svg", { ...props, ref: ref, className: ["pui-icon", className].filter(Boolean).join(" "), "data-size": size, "data-directional": name === "chevron-forward" || name === "arrow-back" ? "true" : undefined, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", focusable: "false", "aria-hidden": decorative ? true : undefined, role: decorative ? undefined : "img", "aria-label": decorative ? undefined : label, children: shapes[name] }));
+});

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+export { SizeProvider, type ComponentSize, type ComponentSizeAlias, } from "./sizing.js";
+export { Button, type ButtonVariant, type ButtonSize, type ButtonProps, } from "./button.js";
+export { Slot } from "./slot.js";
+export { Input } from "./input.js";
+export { Select, NativeSelect, NativeSelectOption, NativeSelectOptGroup, type SelectOption, type SelectProps, } from "./select.js";
+export { Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverHandle, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, PopoverViewport, PopoverContent, } from "./popover.js";
+export { Tooltip, TooltipProvider } from "./tooltip.js";
+export { Dialog, AlertDialog, DialogBackdrop, DialogClose, DialogDescription, DialogHandle, DialogPopup, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, DialogViewport, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogCloseButton, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogHandle, AlertDialogPopup, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, } from "./dialog.js";
+export { Menu, MenuArrow, MenuBackdrop, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuClear, MenuEmpty, MenuFilterProvider, MenuGroup, MenuGroupLabel, MenuHandle, MenuInput, MenuItem, MenuLinkItem, MenuList, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuRoot, MenuSeparator, MenuSubmenuRoot, MenuSubmenuTrigger, MenuTrigger, MenuViewport, MenuContent, } from "./menu.js";
+export { ScrollArea } from "./scroll-area.js";
+export { Sheet, Drawer, type PanelSide, SheetBackdrop, SheetClose, SheetDescription, SheetHandle, SheetPopup, SheetPortal, SheetRoot, SheetTitle, SheetTrigger, SheetViewport, SheetContent, SheetHeader, SheetBody, SheetFooter, DrawerBackdrop, DrawerClose, DrawerContent, DrawerDescription, DrawerHandle, DrawerIndent, DrawerIndentBackground, DrawerPopup, DrawerPortal, DrawerProvider, DrawerRoot, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerViewport, DrawerVirtualKeyboardProvider, DrawerPrimitiveContent, DrawerHeader, DrawerBody, DrawerFooter, } from "./panels.js";
+export { Container, Stack, Inline, Grid, GridItem, Surface, Heading, Text, PageHeader, Prose, type Space, } from "./foundations.js";
+export { Field, Fieldset, Form, Textarea, Checkbox, CheckboxGroup, Radio, RadioGroup, Switch, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldRoot, FieldValidity, FieldsetLegend, FieldsetRoot, CheckboxIndicator, CheckboxRoot, RadioIndicator, RadioRoot, SwitchRoot, SwitchThumb, } from "./forms.js";
+export { Tabs, Accordion, Collapsible, Avatar, Separator, Link, Breadcrumbs, TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger, AvatarFallback, AvatarImage, AvatarRoot, AvatarStatus, BreadcrumbsRoot, BreadcrumbsList, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsSeparator, BreadcrumbsCurrent, } from "./navigation.js";
+export { Badge, StatusBadge, type BadgeProps, type StatusTone, } from "./status.js";
+export { Progress, Meter, Spinner, Skeleton, type SpinnerProps, type SkeletonProps, ProgressIndicator, ProgressLabel, ProgressRoot, ProgressTrack, ProgressValue, MeterIndicator, MeterLabel, MeterRoot, MeterTrack, MeterValue, } from "./feedback.js";
+export { Table, List, TableContainer, TableRoot, TableCaption, TableHead, TableBody, TableFoot, TableRow, TableHeaderCell, TableCell, ListRoot, ListItem, ListContent, ListTitle, ListDescription, ListActions, } from "./data.js";
+export { InlineMessage, EmptyState, InlineMessageRoot, InlineMessageIcon, InlineMessageContent, InlineMessageTitle, InlineMessageDescription, InlineMessageActions, EmptyStateRoot, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, } from "./messages.js";
+export { Card, CodeBlock, type CodeBlockProps, CardRoot, CardHeader, CardTitle, CardDescription, CardBody, CardFooter, } from "./content.js";
+export { Pagination, type PaginationProps } from "./pagination.js";
+export { Combobox, NumberField, ComboboxArrow, ComboboxBackdrop, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxIcon, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxList, ComboboxPopup, ComboboxPortal, ComboboxPositioner, ComboboxRoot, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, ComboboxContent, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, NumberFieldScrubArea, NumberFieldScrubAreaCursor, } from "./advanced-forms.js";
+export { Autocomplete, Slider, AutocompleteArrow, AutocompleteBackdrop, AutocompleteClear, AutocompleteCollection, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteIcon, AutocompleteInput, AutocompleteInputGroup, AutocompleteItem, AutocompleteList, AutocompletePopup, AutocompletePortal, AutocompletePositioner, AutocompleteRoot, AutocompleteRow, AutocompleteSeparator, AutocompleteStatus, AutocompleteTrigger, AutocompleteValue, AutocompleteContent, SliderControl, SliderIndicator, SliderLabel, SliderRoot, SliderThumb, SliderTrack, SliderValue, } from "./input-extensions.js";
+export { DirectionProvider } from "@base-ui/react/direction-provider";
+export { Toggle, ToggleGroup, Toolbar, Menubar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarRoot, ToolbarSeparator, } from "./commands.js";
+export { ContextMenu, PreviewCard, ContextMenuArrow, ContextMenuBackdrop, ContextMenuCheckboxItem, ContextMenuCheckboxItemIndicator, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuLinkItem, ContextMenuPopup, ContextMenuPortal, ContextMenuPositioner, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRadioItemIndicator, ContextMenuRoot, ContextMenuSeparator, ContextMenuSubmenuRoot, ContextMenuSubmenuTrigger, ContextMenuTrigger, ContextMenuContent, PreviewCardArrow, PreviewCardBackdrop, PreviewCardHandle, PreviewCardPopup, PreviewCardPortal, PreviewCardPositioner, PreviewCardRoot, PreviewCardTrigger, PreviewCardViewport, PreviewCardContent, } from "./context-overlays.js";
+export { NavigationMenu, NavigationMenuArrow, NavigationMenuBackdrop, NavigationMenuContent, NavigationMenuIcon, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPopup, NavigationMenuPortal, NavigationMenuPositioner, NavigationMenuRoot, NavigationMenuTrigger, NavigationMenuViewport, } from "./navigation-menu.js";
+export { OTPField, OTPFieldInput, OTPFieldRoot, OTPFieldSeparator, OTPFieldGroup, } from "./otp-field.js";
+export { Toast, type ToastRootProps, type ToastViewportProps, ToastAction, ToastArrow, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastPositioner, ToastProvider, ToastRoot, ToastTitle, ToastViewport, ToastIcon, ToastText, } from "./toast.js";
+export { FileUpload, type FileUploadProps, type UploadTransport, type FileUploadLabels, type FileChangeDetails, type FileRejection, type UploadState, } from "./file-upload.js";
+export { Icon, iconNames, type IconName, type IconProps } from "./icon.js";
+export { FilterBar, FilterBarRoot, FilterBarControls, FilterBarField, FilterBarActions, FilterBarSummary, } from "./filter-bar.js";
+export { AppShell, AppShellRoot, AppShellHeader, AppShellSidebar, AppShellContent, AppShellFooter, AppShellLabel, AppShellLink, } from "./app-shell.js";
+export { Tree, type TreeNode, type TreeProps } from "./tree.js";
+export { DatePicker, DateRangePicker, TimeField, DateLocaleProvider, type DatePickerProps, type DateRangePickerProps, type TimeFieldProps, type DateValue, type TimeValue, } from "./date-picker.js";
+export { Chart, type ChartDatum, type ChartSeries, type ChartProps, } from "./chart.js";
+export { SyntaxHighlighter, syntaxLanguages, type SyntaxHighlighterProps, } from "./syntax-highlighter.js";
+export { Markdown, type MarkdownProps } from "./markdown.js";

package/dist/index.js

@@ -0,0 +1,38 @@
+"use client";
+export { SizeProvider, } from "./sizing.js";
+export { Button, } from "./button.js";
+export { Slot } from "./slot.js";
+export { Input } from "./input.js";
+export { Select, NativeSelect, NativeSelectOption, NativeSelectOptGroup, } from "./select.js";
+export { Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverHandle, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, PopoverViewport, PopoverContent, } from "./popover.js";
+export { Tooltip, TooltipProvider } from "./tooltip.js";
+export { Dialog, AlertDialog, DialogBackdrop, DialogClose, DialogDescription, DialogHandle, DialogPopup, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, DialogViewport, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogCloseButton, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogHandle, AlertDialogPopup, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, } from "./dialog.js";
+export { Menu, MenuArrow, MenuBackdrop, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuClear, MenuEmpty, MenuFilterProvider, MenuGroup, MenuGroupLabel, MenuHandle, MenuInput, MenuItem, MenuLinkItem, MenuList, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuRoot, MenuSeparator, MenuSubmenuRoot, MenuSubmenuTrigger, MenuTrigger, MenuViewport, MenuContent, } from "./menu.js";
+export { ScrollArea } from "./scroll-area.js";
+export { Sheet, Drawer, SheetBackdrop, SheetClose, SheetDescription, SheetHandle, SheetPopup, SheetPortal, SheetRoot, SheetTitle, SheetTrigger, SheetViewport, SheetContent, SheetHeader, SheetBody, SheetFooter, DrawerBackdrop, DrawerClose, DrawerContent, DrawerDescription, DrawerHandle, DrawerIndent, DrawerIndentBackground, DrawerPopup, DrawerPortal, DrawerProvider, DrawerRoot, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerViewport, DrawerVirtualKeyboardProvider, DrawerPrimitiveContent, DrawerHeader, DrawerBody, DrawerFooter, } from "./panels.js";
+export { Container, Stack, Inline, Grid, GridItem, Surface, Heading, Text, PageHeader, Prose, } from "./foundations.js";
+export { Field, Fieldset, Form, Textarea, Checkbox, CheckboxGroup, Radio, RadioGroup, Switch, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldRoot, FieldValidity, FieldsetLegend, FieldsetRoot, CheckboxIndicator, CheckboxRoot, RadioIndicator, RadioRoot, SwitchRoot, SwitchThumb, } from "./forms.js";
+export { Tabs, Accordion, Collapsible, Avatar, Separator, Link, Breadcrumbs, TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger, AvatarFallback, AvatarImage, AvatarRoot, AvatarStatus, BreadcrumbsRoot, BreadcrumbsList, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsSeparator, BreadcrumbsCurrent, } from "./navigation.js";
+export { Badge, StatusBadge, } from "./status.js";
+export { Progress, Meter, Spinner, Skeleton, ProgressIndicator, ProgressLabel, ProgressRoot, ProgressTrack, ProgressValue, MeterIndicator, MeterLabel, MeterRoot, MeterTrack, MeterValue, } from "./feedback.js";
+export { Table, List, TableContainer, TableRoot, TableCaption, TableHead, TableBody, TableFoot, TableRow, TableHeaderCell, TableCell, ListRoot, ListItem, ListContent, ListTitle, ListDescription, ListActions, } from "./data.js";
+export { InlineMessage, EmptyState, InlineMessageRoot, InlineMessageIcon, InlineMessageContent, InlineMessageTitle, InlineMessageDescription, InlineMessageActions, EmptyStateRoot, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, } from "./messages.js";
+export { Card, CodeBlock, CardRoot, CardHeader, CardTitle, CardDescription, CardBody, CardFooter, } from "./content.js";
+export { Pagination } from "./pagination.js";
+export { Combobox, NumberField, ComboboxArrow, ComboboxBackdrop, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxIcon, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxList, ComboboxPopup, ComboboxPortal, ComboboxPositioner, ComboboxRoot, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, ComboboxContent, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, NumberFieldScrubArea, NumberFieldScrubAreaCursor, } from "./advanced-forms.js";
+export { Autocomplete, Slider, AutocompleteArrow, AutocompleteBackdrop, AutocompleteClear, AutocompleteCollection, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteIcon, AutocompleteInput, AutocompleteInputGroup, AutocompleteItem, AutocompleteList, AutocompletePopup, AutocompletePortal, AutocompletePositioner, AutocompleteRoot, AutocompleteRow, AutocompleteSeparator, AutocompleteStatus, AutocompleteTrigger, AutocompleteValue, AutocompleteContent, SliderControl, SliderIndicator, SliderLabel, SliderRoot, SliderThumb, SliderTrack, SliderValue, } from "./input-extensions.js";
+export { DirectionProvider } from "@base-ui/react/direction-provider";
+export { Toggle, ToggleGroup, Toolbar, Menubar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarRoot, ToolbarSeparator, } from "./commands.js";
+export { ContextMenu, PreviewCard, ContextMenuArrow, ContextMenuBackdrop, ContextMenuCheckboxItem, ContextMenuCheckboxItemIndicator, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuLinkItem, ContextMenuPopup, ContextMenuPortal, ContextMenuPositioner, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRadioItemIndicator, ContextMenuRoot, ContextMenuSeparator, ContextMenuSubmenuRoot, ContextMenuSubmenuTrigger, ContextMenuTrigger, ContextMenuContent, PreviewCardArrow, PreviewCardBackdrop, PreviewCardHandle, PreviewCardPopup, PreviewCardPortal, PreviewCardPositioner, PreviewCardRoot, PreviewCardTrigger, PreviewCardViewport, PreviewCardContent, } from "./context-overlays.js";
+export { NavigationMenu, NavigationMenuArrow, NavigationMenuBackdrop, NavigationMenuContent, NavigationMenuIcon, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPopup, NavigationMenuPortal, NavigationMenuPositioner, NavigationMenuRoot, NavigationMenuTrigger, NavigationMenuViewport, } from "./navigation-menu.js";
+export { OTPField, OTPFieldInput, OTPFieldRoot, OTPFieldSeparator, OTPFieldGroup, } from "./otp-field.js";
+export { Toast, ToastAction, ToastArrow, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastPositioner, ToastProvider, ToastRoot, ToastTitle, ToastViewport, ToastIcon, ToastText, } from "./toast.js";
+export { FileUpload, } from "./file-upload.js";
+export { Icon, iconNames } from "./icon.js";
+export { FilterBar, FilterBarRoot, FilterBarControls, FilterBarField, FilterBarActions, FilterBarSummary, } from "./filter-bar.js";
+export { AppShell, AppShellRoot, AppShellHeader, AppShellSidebar, AppShellContent, AppShellFooter, AppShellLabel, AppShellLink, } from "./app-shell.js";
+export { Tree } from "./tree.js";
+export { DatePicker, DateRangePicker, TimeField, DateLocaleProvider, } from "./date-picker.js";
+export { Chart, } from "./chart.js";
+export { SyntaxHighlighter, syntaxLanguages, } from "./syntax-highlighter.js";
+export { Markdown } from "./markdown.js";

package/dist/input-extensions.d.ts

@@ -0,0 +1,117 @@
+import * as React from "react";
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+declare const AutocompleteRoot: typeof BaseAutocomplete.Root;
+export declare const Autocomplete: {
+    Root: typeof BaseAutocomplete.Root;
+    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        positionerProps?: React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Positioner>;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Popup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Positioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Input: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLInputElement>>;
+    List: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Empty: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Status: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    GroupLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Clear: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    InputGroup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteInputGroupProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteItemProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Separator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Value: typeof BaseAutocomplete.Value;
+    Icon: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompletePortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Arrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Row: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteRowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Collection: typeof BaseAutocomplete.Collection;
+    useFilter: typeof import("@base-ui/react/internals/filter").getFilter;
+    useFilteredItems: typeof BaseAutocomplete.useFilteredItems;
+};
+declare function SliderRoot<Value extends number | readonly number[]>({ value, defaultValue, onValueChange, ref, className, form, thumbAlignment, ...props }: BaseSlider.Root.Props<Value> & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+export declare const Slider: {
+    Root: typeof SliderRoot;
+    Label: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Value: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderValueProps, "ref"> & React.RefAttributes<HTMLOutputElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLOutputElement>>;
+    Control: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderControlProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Track: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Thumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+};
+export { AutocompleteRoot, SliderRoot };
+export declare const AutocompleteArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AutocompleteBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AutocompleteClear: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>, AutocompleteCollection: typeof BaseAutocomplete.Collection, AutocompleteEmpty: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, AutocompleteGroup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, AutocompleteGroupLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, AutocompleteIcon: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>, AutocompleteInput: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLInputElement>>, AutocompleteInputGroup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteInputGroupProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, AutocompleteItem: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteItemProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, AutocompleteList: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, AutocompletePopup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, AutocompletePortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompletePortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AutocompletePositioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, AutocompleteRow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteRowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AutocompleteSeparator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, AutocompleteStatus: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, AutocompleteTrigger: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>, AutocompleteValue: typeof BaseAutocomplete.Value, AutocompleteContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    positionerProps?: React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Positioner>;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const SliderControl: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderControlProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, SliderIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, SliderLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, SliderThumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, SliderTrack: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, SliderValue: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderValueProps, "ref"> & React.RefAttributes<HTMLOutputElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLOutputElement>>;

package/dist/input-extensions.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import { Combobox } from "./advanced-forms.js";
+import { skin, part } from "./parts.js";
+import { useResetValue, useRootRef } from "./form-state.js";
+const AutocompleteRoot = function AutocompleteRoot({ children, form, value, defaultValue, onValueChange, ...props }) {
+    const anchor = React.useRef(null);
+    const [query, setQuery, revision] = useResetValue(value, defaultValue ?? "", anchor, form);
+    return (_jsxs(BaseAutocomplete.Root, { ...props, form: form, value: query, onValueChange: (next, event) => {
+            onValueChange?.(next, event);
+            if (value === undefined && !event.isCanceled)
+                setQuery(next);
+        }, children: [_jsx("span", { hidden: true, ref: anchor }), children] }, revision));
+};
+const AutoTrigger = React.forwardRef(function AutoTrigger({ className, children, ...props }, ref) {
+    return (_jsx(BaseAutocomplete.Trigger, { "aria-label": "Show suggestions", ...props, ref: ref, className: skin("pui-combobox-action", 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" }) })) }));
+});
+const AutoClear = React.forwardRef(function AutoClear(props, ref) {
+    return _jsx(Combobox.Clear, { "aria-label": "Clear input", ...props, ref: ref });
+});
+export const Autocomplete = {
+    ...BaseAutocomplete,
+    Root: AutocompleteRoot,
+    Content: Combobox.Content,
+    Popup: Combobox.Popup,
+    Positioner: Combobox.Positioner,
+    Input: Combobox.Input,
+    List: Combobox.List,
+    Empty: Combobox.Empty,
+    Status: Combobox.Status,
+    Group: Combobox.Group,
+    GroupLabel: Combobox.GroupLabel,
+    Clear: AutoClear,
+    Trigger: AutoTrigger,
+    InputGroup: part(BaseAutocomplete.InputGroup, "pui-combobox-group"),
+    Item: part(BaseAutocomplete.Item, "pui-combobox-item"),
+    Separator: part(BaseAutocomplete.Separator, "pui-combobox-separator"),
+};
+function SliderRoot({ value, defaultValue, onValueChange, ref, className, form, thumbAlignment = "edge", ...props }) {
+    const [element, attach] = useRootRef(ref);
+    const [selected, setSelected] = useResetValue(value, (defaultValue ?? props.min ?? 0), element, form);
+    return (_jsx(BaseSlider.Root, { ...props, form: form, ref: attach, value: selected, thumbAlignment: thumbAlignment, className: skin("pui-slider", className), onValueChange: (next, event) => {
+            onValueChange?.(next, event);
+            if (value === undefined && !event.isCanceled)
+                setSelected(next);
+        } }));
+}
+export const Slider = {
+    ...BaseSlider,
+    Root: SliderRoot,
+    Label: part(BaseSlider.Label, "pui-slider-label"),
+    Value: part(BaseSlider.Value, "pui-slider-value"),
+    Control: part(BaseSlider.Control, "pui-slider-control"),
+    Track: part(BaseSlider.Track, "pui-slider-track"),
+    Indicator: part(BaseSlider.Indicator, "pui-slider-indicator"),
+    Thumb: part(BaseSlider.Thumb, "pui-slider-thumb"),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { AutocompleteRoot, SliderRoot };
+export const { Arrow: AutocompleteArrow, Backdrop: AutocompleteBackdrop, Clear: AutocompleteClear, Collection: AutocompleteCollection, Empty: AutocompleteEmpty, Group: AutocompleteGroup, GroupLabel: AutocompleteGroupLabel, Icon: AutocompleteIcon, Input: AutocompleteInput, InputGroup: AutocompleteInputGroup, Item: AutocompleteItem, List: AutocompleteList, Popup: AutocompletePopup, Portal: AutocompletePortal, Positioner: AutocompletePositioner, Row: AutocompleteRow, Separator: AutocompleteSeparator, Status: AutocompleteStatus, Trigger: AutocompleteTrigger, Value: AutocompleteValue, Content: AutocompleteContent, } = Autocomplete;
+export const { Control: SliderControl, Indicator: SliderIndicator, Label: SliderLabel, Thumb: SliderThumb, Track: SliderTrack, Value: SliderValue, } = Slider;

package/dist/input.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { type ComponentSizeAlias } from "./sizing.js";
+export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size"> & {
+    size?: number | ComponentSizeAlias;
+    leadingIcon?: React.ReactNode;
+    wrapperClassName?: string;
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/input.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useComponentSize } from "./sizing.js";
+import { Input as BaseInput } from "@base-ui/react/input";
+const cx = (...v) => v.filter(Boolean).join(" ");
+export const Input = React.forwardRef(function Input({ className, leadingIcon, wrapperClassName, size, ...props }, ref) {
+    const scheme = useComponentSize(typeof size === "string" ? size : undefined);
+    return (_jsxs("span", { "data-ui-size": scheme, className: cx("pui-control", wrapperClassName), "data-leading-icon": leadingIcon ? "" : undefined, "data-disabled": props.disabled || undefined, children: [leadingIcon && (_jsx("span", { className: "pui-control-icon control-icon", "aria-hidden": "true", children: leadingIcon })), _jsx(BaseInput, { ...props, size: typeof size === "number" ? size : undefined, ref: ref, className: cx("pui-input", className) })] }));
+});