@mechane-ai/elements 0.11.0 → 0.13.0

package/dist/navigation/commands.js

@@ -1,5 +1,5 @@
-import { l as e } from "../src-C_heP5kL.js";
-import { s as t } from "../src-Cs0dRc4X.js";
+import { l as e } from "../src-DMsnWyru.js";
+import { s as t } from "../src-CVlgjAlw.js";
 import { n } from "../navigation-D2_sGy3C.js";
 import "@stylexjs/stylex";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
@@ -57,7 +57,7 @@ function u({ open: n, onOpenChange: o, title: s, commands: c, trigger: u, placeh
 							children: (e) => /* @__PURE__ */ i(a.Item, {
 								value: e,
 								disabled: e.disabled,
-								className: "x78zum5 x9f619 x6s0dn4 xaml1ju x1uey4wk xwu7q15 xn9t2bk x5g2kb4 x1ok0vyi xbixft xpvm0e4 x1hz01jw xj57cvi xtqrqnz x1778rvt x1ypdohk xf2ykmf x1480za7 xd12npn xwj21n9 x1m8qfh3",
+								className: "x78zum5 x9f619 x6s0dn4 xaml1ju x17tes2r xwu7q15 xn9t2bk x5g2kb4 x1ok0vyi xbixft xpvm0e4 x1hz01jw xj57cvi xtqrqnz x1778rvt x1ypdohk xf2ykmf x1480za7 xd12npn xwj21n9 x1m8qfh3",
 								onClick: () => {
 									o(!1), e.onSelect();
 								},

package/dist/navigation.js

@@ -5,7 +5,21 @@ import "@stylexjs/stylex";
 import { jsx as i } from "react/jsx-runtime";
 import { Tabs as a } from "@base-ui/react/tabs";
 // packages/navigation/src/page-navigation.tsx
-function o({ items: e, selectedId: t, onNavigate: n, label: r = "Page sections", embedded: a = !1 }) {
+function o({ items: e, embedded: t = !1 }) {
+	return /* @__PURE__ */ i("div", {
+		"aria-hidden": !0,
+		inert: !0,
+		...{
+			0: { className: "x78zum5 xxhr3t xeuugli xw2csxc xso031l x1q0q8m5 x1qndepd x1hz01jw xtqrqnz xj57cvi x1778rvt xvmahel x13qnu6 x9v5kkp x19rmrnh x1bqaal" },
+			1: { className: "x78zum5 xxhr3t xeuugli xw2csxc x1q0q8m5 x1qndepd x1hz01jw xtqrqnz xj57cvi x1778rvt xvmahel x13qnu6 x9v5kkp x19rmrnh x1bqaal x1qhh985" }
+		}[!!t | 0],
+		children: e.map((e) => /* @__PURE__ */ i("span", {
+			className: "x1n2onr6 x9f619 x3nfvp2 x6s0dn4 x2lah0s xid9utz xn9t2bk x1doqdfy xkrqix3 xuxw1ft x153jb6y x1mkgjtd x1s9zmfe x1kl8fbi x1s928wv x1j6awrg x1ccaobo x1xrz1ek x3cntg4 xyhc2n1 x13qnu6 x9v5kkp x19rmrnh x1bqaal",
+			children: e.label
+		}, e.id))
+	});
+}
+function s({ items: e, selectedId: t, onNavigate: n, label: r = "Page sections", embedded: a = !1 }) {
 	return /* @__PURE__ */ i("nav", {
 		"aria-label": r,
 		tabIndex: 0,
@@ -30,11 +44,11 @@ function o({ items: e, selectedId: t, onNavigate: n, label: r = "Page sections",
 	});
 }
 // packages/navigation/src/skip-link.tsx
-function s(e) {
+function c(e) {
 	return /* @__PURE__ */ i("a", { ...r({ className: "xixxii4 x1ridm32 x12hha37 xkwijxb x174j0rr x1mvvolr x9f619 xvv7f4i xj0a0fe x1ok0vyi xpvm0e4 xbixft x1hz01jw xk4h15q xtqrqnz x1778rvt xvmahel xujl8zx x1wfrlr2 x1tkds87 x1de710j x1gnsi0 x1cm8ssg" }, e) });
 }
 // packages/navigation/src/tabs.tsx
-function c({ className: e, style: t, ...r }) {
+function l({ className: e, style: t, ...r }) {
 	return /* @__PURE__ */ i(a.Root, {
 		...r,
 		...n({
@@ -44,7 +58,7 @@ function c({ className: e, style: t, ...r }) {
 		})
 	});
 }
-function l({ className: e, style: t, ...r }) {
+function u({ className: e, style: t, ...r }) {
 	return /* @__PURE__ */ i(a.List, {
 		...r,
 		...n({
@@ -54,7 +68,7 @@ function l({ className: e, style: t, ...r }) {
 		})
 	});
 }
-function u({ className: e, style: t, ...r }) {
+function d({ className: e, style: t, ...r }) {
 	return /* @__PURE__ */ i(a.Tab, {
 		...r,
 		...n({
@@ -64,7 +78,7 @@ function u({ className: e, style: t, ...r }) {
 		})
 	});
 }
-function d({ className: e, style: t, ...r }) {
+function f({ className: e, style: t, ...r }) {
 	return /* @__PURE__ */ i(a.Panel, {
 		...r,
 		...n({
@@ -74,10 +88,10 @@ function d({ className: e, style: t, ...r }) {
 		})
 	});
 }
-var f = {
-	Root: c,
-	List: l,
-	Tab: u,
-	Panel: d
+var p = {
+	Root: l,
+	List: u,
+	Tab: d,
+	Panel: f
 };
-export { t as Breadcrumb, e as Kbd, o as PageNavigation, s as SkipLink, f as Tabs };
+export { t as Breadcrumb, e as Kbd, s as PageNavigation, o as PageNavigationPlaceholder, c as SkipLink, p as Tabs };

package/dist/overlays.js

@@ -1 +1 @@
-export { o as AlertDialog, s as Dialog, a as Drawer, i as Menu, r as Popover, n as Preview, t as Tooltip } from "./src-Cs0dRc4X.js";
+export { o as AlertDialog, s as Dialog, a as Drawer, i as Menu, r as Popover, n as Preview, t as Tooltip } from "./src-CVlgjAlw.js";

package/dist/packages/ai/src/index.d.ts

@@ -8,7 +8,7 @@ export type { MessageActionProps } from './message-action.tsx';
 export { MessageAction } from './message-action.tsx';
 export type { MessageBoundaryProps } from './message-boundary.tsx';
 export { MessageBoundary } from './message-boundary.tsx';
-export type { PromptInputProps } from './prompt-input.tsx';
-export { PromptInput } from './prompt-input.tsx';
+export type { PromptInputProps, PromptInputPlaceholderProps } from './prompt-input.tsx';
+export { PromptInput, PromptInputPlaceholder } from './prompt-input.tsx';
 export type { Source, SourcesProps, InlineCitationProps } from './sources.tsx';
 export { Sources, InlineCitation } from './sources.tsx';

package/dist/packages/ai/src/prompt-input.d.ts

@@ -1,4 +1,8 @@
 import type { ComponentProps, ReactNode } from 'react';
+export type PromptInputPlaceholderProps = {
+    readonly compact?: boolean;
+};
+export declare function PromptInputPlaceholder({ compact }: PromptInputPlaceholderProps): ReactNode;
 export type PromptInputProps = {
     readonly label: string;
     readonly value: string;

package/dist/packages/collections/src/collection-controls.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 export type CollectionToolbarProps = {
     readonly label: string;
-    readonly children: ReactNode;
+    readonly children?: ReactNode;
     readonly actions?: ReactNode;
 };
 export declare function CollectionToolbar({ label, children, actions }: CollectionToolbarProps): ReactNode;

package/dist/packages/collections/src/data-table.d.ts

@@ -1,22 +1,40 @@
 import type { ReactNode } from 'react';
-type ColumnAlignment = 'start' | 'end';
+type TableSizing = 'content' | 'fill';
 type RowSizing = 'fixed' | 'content';
-export type DataTableColumn<Row> = {
+export type DataTableColumnRole = 'primary' | 'text' | 'status' | 'number' | 'timestamp' | 'actions';
+export type DataTableColumnLayout = {
     readonly id: string;
     readonly label: string;
-    readonly cell: (row: Row) => ReactNode;
-    readonly align?: ColumnAlignment;
+    readonly role: DataTableColumnRole;
     readonly width?: number;
     readonly secondary?: boolean;
+};
+export type DataTableColumn<Row> = DataTableColumnLayout & {
+    readonly cell: (row: Row) => ReactNode;
     readonly truncate?: boolean;
     readonly sortable?: boolean;
 };
+export type DataTablePlaceholderProps = {
+    readonly columns: ReadonlyArray<DataTableColumnLayout & {
+        readonly placeholder?: ReactNode;
+    }>;
+    readonly sizing?: TableSizing;
+    readonly rowSizing?: RowSizing;
+    readonly hideHeaders?: boolean;
+};
+export declare function DataTablePlaceholder({ columns: suppliedColumns, sizing, rowSizing, hideHeaders, }: DataTablePlaceholderProps): ReactNode;
 export type DataTableTextProps = {
     readonly children: string;
     readonly secondary?: string | undefined;
     readonly leading?: ReactNode;
+    readonly trailing?: ReactNode;
+};
+export type DataTableTextPlaceholderProps = {
+    readonly leading?: ReactNode;
+    readonly secondary?: boolean;
 };
-export declare function DataTableText({ children, secondary, leading }: DataTableTextProps): ReactNode;
+export declare function DataTableText({ children, secondary, leading, trailing }: DataTableTextProps): ReactNode;
+export declare function DataTableTextPlaceholder({ leading, secondary }: DataTableTextPlaceholderProps): ReactNode;
 export type DataTableSort = {
     readonly columnId: string;
     readonly direction: 'ascending' | 'descending';
@@ -71,5 +89,5 @@ export type DataTableProps<Row> = SortProperties<Row> & OptionalSelection<Row> &
     readonly onEndReached?: () => void;
     readonly footer?: ReactNode;
 };
-export declare function DataTable<Row extends object>({ rows, columns, getRowId, caption, empty, sort, onSortChange, selectedIds, onSelectionChange, selectionLabel, rowAction, activeRowId, focusRowId, hideCaption, hideHeaders, rowSizing, window, endContent, onEndReached, footer, }: DataTableProps<Row>): ReactNode;
+export declare function DataTable<Row extends object>({ rows, columns: suppliedColumns, getRowId, caption, empty, sort, onSortChange, selectedIds, onSelectionChange, selectionLabel, rowAction, activeRowId, focusRowId, hideCaption, hideHeaders, rowSizing, window, endContent, onEndReached, footer, }: DataTableProps<Row>): ReactNode;
 export {};

package/dist/packages/collections/src/index.d.ts

@@ -1,7 +1,7 @@
 export type { CollectionToolbarProps, FilterChip, FilterChipsProps, ColumnChoice, ColumnControlsProps, CollectionPaginationProps, } from './collection-controls.tsx';
 export { CollectionToolbar, FilterChips, ColumnControls, CollectionPagination } from './collection-controls.tsx';
-export type { DataTableColumn, DataTableSort, DataTableWindow, DataTableProps, DataTableRowAction, DataTableTextProps, } from './data-table.tsx';
-export { DataTable, DataTableText } from './data-table.tsx';
+export type { DataTableColumn, DataTableColumnLayout, DataTablePlaceholderProps, DataTableColumnRole, DataTableSort, DataTableWindow, DataTableProps, DataTableRowAction, DataTableTextProps, DataTableTextPlaceholderProps, } from './data-table.tsx';
+export { DataTable, DataTableText, DataTablePlaceholder, DataTableTextPlaceholder } from './data-table.tsx';
 export type { CollectionEndProps, CollectionScrollProps } from './collection-scroll.tsx';
 export { CollectionEnd, CollectionScroll } from './collection-scroll.tsx';
 export type { InspectorProps } from './inspector.tsx';

package/dist/packages/core/src/actions.d.ts

@@ -1,10 +1,9 @@
 import { Button as BaseButton } from '@base-ui/react/button';
 import { useRender } from '@base-ui/react/use-render';
 import type { ComponentProps, ReactNode } from 'react';
-import type { ControlStyle, PlacementStyle } from '../../foundations/src/style-composition.ts';
+import type { PlacementStyle } from '../../foundations/src/style-composition.ts';
 type ButtonVariant = 'solid' | 'outline' | 'ghost';
 type ButtonTone = 'neutral' | 'danger';
-type ControlSize = 'sm' | 'md';
 type PendingProps = {
     readonly pending?: boolean;
     readonly pendingLabel?: string | undefined;
@@ -12,15 +11,13 @@ type PendingProps = {
 type ButtonProps = ComponentProps<typeof BaseButton> & PendingProps & {
     readonly variant?: ButtonVariant;
     readonly tone?: ButtonTone;
-    readonly size?: ControlSize;
-    readonly xstyle?: ControlStyle;
+    readonly xstyle?: PlacementStyle;
 };
 type IconButtonProps = Omit<ButtonProps, 'aria-label' | 'pendingLabel'> & {
     readonly 'aria-label': string;
 };
 type IconLinkProps = Omit<useRender.ComponentProps<'a'>, 'aria-label'> & {
     readonly 'aria-label': string;
-    readonly 'size'?: ControlSize;
     readonly 'xstyle'?: PlacementStyle;
 };
 type TextButtonProps = ComponentProps<typeof BaseButton> & PendingProps & {
@@ -30,9 +27,9 @@ type TextButtonProps = ComponentProps<typeof BaseButton> & PendingProps & {
 type TextLinkProps = ComponentProps<'a'> & {
     readonly xstyle?: PlacementStyle;
 };
-export declare function Button({ variant, tone, size, pending, pendingLabel, children, className, style, xstyle, disabled, ...props }: ButtonProps): ReactNode;
-export declare function IconButton({ size, children, xstyle, ...props }: IconButtonProps): ReactNode;
+export declare function Button(props: ButtonProps): ReactNode;
+export declare function IconButton({ children, ...props }: IconButtonProps): ReactNode;
 export declare function TextButton({ tone, pending, pendingLabel, children, className, style, xstyle, disabled, ...props }: TextButtonProps): ReactNode;
 export declare function TextLink({ xstyle, ...props }: TextLinkProps): ReactNode;
-export declare function IconLink({ size, children, xstyle, render, ref, ...props }: IconLinkProps): ReactNode;
+export declare function IconLink({ children, xstyle, render, ref, ...props }: IconLinkProps): ReactNode;
 export {};

package/dist/packages/feedback/src/async-region.d.ts

@@ -1,17 +1,23 @@
 import type { ReactNode } from 'react';
+export type LoadingScopeProps = {
+    readonly identity: string | number;
+    readonly children: ReactNode;
+};
+export declare function LoadingScope({ identity, children }: LoadingScopeProps): ReactNode;
 export type ContentRevealProps = {
     readonly enter: boolean;
-    readonly fill?: boolean | undefined;
     readonly children: ReactNode;
 };
-export declare function ContentReveal({ enter, fill, children }: ContentRevealProps): ReactNode;
+export declare function ContentReveal({ enter, children }: ContentRevealProps): ReactNode;
+export type AsyncRegionState = 'pending' | 'ready' | 'failed';
 export type AsyncRegionProps = {
-    readonly pending: boolean;
     readonly label: string;
     readonly placeholder: ReactNode;
-    readonly children?: ReactNode;
-    readonly fill?: boolean | undefined;
-    readonly startedAt?: number | undefined;
-    readonly delayMs?: number | undefined;
-};
-export declare function AsyncRegion({ pending, label, placeholder, children, fill, startedAt, delayMs, }: AsyncRegionProps): ReactNode;
+} & ({
+    readonly state: 'pending';
+    readonly children?: never;
+} | {
+    readonly state: 'ready' | 'failed';
+    readonly children: ReactNode;
+});
+export declare function AsyncRegion(props: AsyncRegionProps): ReactNode;

package/dist/packages/feedback/src/control-placeholders.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import type { PlacementStyle } from '../../foundations/src/style-composition.ts';
+export type ButtonPlaceholderProps = {
+    readonly xstyle?: PlacementStyle;
+} & ({
+    readonly icon: true;
+    readonly width?: never;
+} | {
+    readonly icon?: false;
+    readonly width?: number | string;
+});
+export type FieldPlaceholderProps = {
+    readonly label?: string;
+    readonly hint?: string;
+    readonly multiline?: boolean;
+    readonly rows?: number;
+    readonly width?: number | string;
+    readonly xstyle?: PlacementStyle;
+};
+export declare function ButtonPlaceholder({ width, icon, xstyle }: ButtonPlaceholderProps): ReactNode;
+export declare function FieldPlaceholder({ label, hint, multiline, rows, width, xstyle, }: FieldPlaceholderProps): ReactNode;

package/dist/packages/feedback/src/index.d.ts

@@ -1,5 +1,6 @@
 export { EmptyState, Notice } from './feedback.tsx';
-export { Loading } from './loading.tsx';
+export type { ButtonPlaceholderProps, FieldPlaceholderProps } from './control-placeholders.tsx';
+export { ButtonPlaceholder, FieldPlaceholder } from './control-placeholders.tsx';
 export type { ProgressProps, MeterProps } from './progress.tsx';
 export { Progress, Meter } from './progress.tsx';
 export type { SkeletonProps, SkeletonTextProps, SpinnerProps } from './skeleton.tsx';
@@ -8,5 +9,5 @@ export type { ExternalToast as ToastOptions } from 'sonner';
 export { toast } from 'sonner';
 export type { ToasterProps } from './toast.tsx';
 export { Toaster } from './toast.tsx';
-export type { AsyncRegionProps, ContentRevealProps } from './async-region.tsx';
-export { AsyncRegion, ContentReveal } from './async-region.tsx';
+export type { AsyncRegionProps, AsyncRegionState, ContentRevealProps, LoadingScopeProps } from './async-region.tsx';
+export { AsyncRegion, ContentReveal, LoadingScope } from './async-region.tsx';

package/dist/packages/forms/src/field-styles.d.ts

@@ -1,29 +1,5 @@
 import * as stylex from '@stylexjs/stylex';
 export declare const fieldStyles: Readonly<{
-    readonly root: Readonly<{
-        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
-        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
-        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
-        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
-        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
-        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
-        readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
-    }>;
-    readonly label: Readonly<{
-        readonly color: stylex.StyleXClassNameFor<"color", string>;
-        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
-        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
-        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
-        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
-        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
-    }>;
-    readonly description: Readonly<{
-        readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
-        readonly color: stylex.StyleXClassNameFor<"color", string>;
-        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
-        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
-        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
-    }>;
     readonly error: Readonly<{
         readonly color: stylex.StyleXClassNameFor<"color", string>;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
@@ -31,24 +7,6 @@ export declare const fieldStyles: Readonly<{
         readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
     }>;
     readonly input: Readonly<{
-        readonly display: stylex.StyleXClassNameFor<"display", "block">;
-        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
-        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
-        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
-        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", string>;
-        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
-        readonly color: stylex.StyleXClassNameFor<"color", string>;
-        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 1>;
-        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
-        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
-        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
-        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
-        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
-        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
-        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
-        readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
-        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
-        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
         readonly ':focus-visible': stylex.StyleXClassNameFor<":focus-visible", {
             readonly outlineWidth: stylex.StyleXVar<string>;
             readonly outlineStyle: "solid";
@@ -67,40 +25,10 @@ export declare const fieldStyles: Readonly<{
             readonly color: stylex.StyleXVar<string>;
         }>;
     }>;
-    readonly textarea: Readonly<{
-        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", 144>;
-        readonly resize: stylex.StyleXClassNameFor<"resize", "vertical">;
-        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
-    }>;
     readonly compactTextarea: Readonly<{
         readonly minHeight: stylex.StyleXClassNameFor<"minHeight", 80>;
         readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "30dvh">;
     }>;
 }>;
-export declare const textareaAppearanceStyles: Readonly<{
-    readonly field: {};
-    readonly plain: Readonly<{
-        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", string>;
-        readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "30dvh">;
-        readonly fieldSizing: stylex.StyleXClassNameFor<"fieldSizing", "content">;
-        readonly resize: stylex.StyleXClassNameFor<"resize", "none">;
-        readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
-        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
-        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 0>;
-        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
-        readonly ':focus-visible': stylex.StyleXClassNameFor<":focus-visible", {
-            readonly outlineStyle: "none";
-        }>;
-        readonly ':disabled': stylex.StyleXClassNameFor<":disabled", {
-            readonly backgroundColor: "transparent";
-        }>;
-    }>;
-}>;
-export declare const inputSizeStyles: Readonly<{
-    readonly sm: Readonly<{
-        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", string>;
-        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
-        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
-    }>;
-    readonly md: {};
-}>;
+export type TextareaAppearance = 'field' | 'plain';
+export declare const textareaAppearanceStyles: Readonly<Record<TextareaAppearance, stylex.StyleXStyles>>;

package/dist/packages/forms/src/form-actions.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { PlacementStyle } from '../../foundations/src/style-composition.ts';
+type FormActionsAlignment = 'start' | 'end';
+export type FormActionsProps = {
+    readonly children: ReactNode;
+    readonly align?: FormActionsAlignment;
+    readonly separated?: boolean;
+    readonly xstyle?: PlacementStyle;
+};
+export declare function FormActions({ children, align, separated, xstyle }: FormActionsProps): ReactNode;
+export {};

package/dist/packages/forms/src/form-controls.d.ts

@@ -39,7 +39,7 @@ declare function FieldsetRoot({ className, style, xstyle, ...props }: FieldsetRo
 declare function FieldsetLegend({ className, style, ...props }: FieldsetLegendProps): ReactNode;
 declare function InputGroupRoot({ xstyle, ...props }: InputGroupRootProps): ReactNode;
 declare function InputGroupAddon(props: InputGroupAddonProps): ReactNode;
-declare function InputGroupInput({ className, style, xstyle, size, ...props }: InputProps): ReactNode;
+declare function InputGroupInput({ className, style, xstyle, ...props }: InputProps): ReactNode;
 declare function NumberFieldRoot({ className, style, xstyle, ...props }: NumberFieldRootProps): ReactNode;
 declare function NumberFieldGroup({ className, style, ...props }: NumberFieldGroupProps): ReactNode;
 declare function NumberFieldInput({ className, style, ...props }: NumberFieldInputProps): ReactNode;

package/dist/packages/forms/src/forms.d.ts

@@ -3,6 +3,7 @@ import { Input as BaseInput } from '@base-ui/react/input';
 import type { ComponentProps, ReactNode } from 'react';
 import type { TextValueProperties } from '../../foundations/src/control-state.ts';
 import type { PlacementStyle } from '../../foundations/src/style-composition.ts';
+import type { TextareaAppearance } from './field-styles.ts';
 type FieldRootProps = ComponentProps<typeof BaseField.Root> & {
     readonly xstyle?: PlacementStyle;
 };
@@ -11,14 +12,13 @@ type FieldDescriptionProps = ComponentProps<typeof BaseField.Description>;
 type FieldErrorProps = ComponentProps<typeof BaseField.Error>;
 type BaseInputProps = ComponentProps<typeof BaseInput>;
 export type InputProps = Omit<BaseInputProps, 'value' | 'defaultValue' | 'onChange' | 'onValueChange' | 'readOnly' | 'size'> & TextValueProperties<NonNullable<BaseInputProps['value']>, NonNullable<BaseInputProps['onChange']>, NonNullable<BaseInputProps['onValueChange']>> & {
-    readonly size?: 'sm' | 'md';
     readonly xstyle?: PlacementStyle;
 };
 type NativeTextareaProps = ComponentProps<'textarea'>;
 type TextareaProps = Omit<NativeTextareaProps, 'value' | 'defaultValue' | 'onChange' | 'readOnly'> & TextValueProperties<NonNullable<NativeTextareaProps['value']>, NonNullable<NativeTextareaProps['onChange']>, NonNullable<BaseInputProps['onValueChange']>> & {
     readonly xstyle?: PlacementStyle;
     readonly compact?: boolean;
-    readonly appearance?: 'field' | 'plain';
+    readonly appearance?: TextareaAppearance;
 };
 declare function FieldRoot({ className, style, xstyle, ...props }: FieldRootProps): ReactNode;
 declare function FieldLabel({ className, style, ...props }: FieldLabelProps): ReactNode;
@@ -30,6 +30,6 @@ export declare const Field: {
     Description: typeof FieldDescription;
     Error: typeof FieldError;
 };
-export declare function Input({ className, style, xstyle, size, ...props }: InputProps): ReactNode;
+export declare function Input({ className, style, xstyle, ...props }: InputProps): ReactNode;
 export declare function Textarea({ compact, appearance, value, defaultValue, onValueChange, name, disabled, readOnly, required, className, style, xstyle, ...props }: TextareaProps): ReactNode;
 export {};

package/dist/packages/forms/src/index.d.ts

@@ -2,6 +2,8 @@ export { Combobox } from './combobox.tsx';
 export type { AgentAvatarPickerProps } from './agent-avatar-picker.tsx';
 export { AgentAvatarPicker } from './agent-avatar-picker.tsx';
 export { FilePicker, Fieldset, InputGroup, NumberField, Slider } from './form-controls.tsx';
+export type { FormActionsProps } from './form-actions.tsx';
+export { FormActions } from './form-actions.tsx';
 export { Field, Input, Textarea } from './forms.tsx';
 export { Select } from './select.tsx';
 export { Checkbox, RadioGroup, Switch, ToggleGroup } from './selection.tsx';

package/dist/packages/forms/src/select.d.ts

@@ -1,12 +1,12 @@
 import { Select as BaseSelect } from '@base-ui/react/select';
 import type { ComponentProps, ReactNode } from 'react';
 import type { OpenStateProperties, ReadOnlyValueProperties, ValueStateProperties } from '../../foundations/src/control-state.ts';
-import type { ControlStyle, PlacementStyle } from '../../foundations/src/style-composition.ts';
+import type { PlacementStyle } from '../../foundations/src/style-composition.ts';
 type SelectVariant = 'outline' | 'ghost';
 type SelectRootProps<Value, Multiple extends boolean | undefined> = Omit<BaseSelect.Root.Props<Value, Multiple>, 'value' | 'defaultValue' | 'onValueChange' | 'open' | 'defaultOpen' | 'onOpenChange'> & OpenStateProperties<NonNullable<BaseSelect.Root.Props<Value, Multiple>['onOpenChange']>> & (ValueStateProperties<Exclude<BaseSelect.Root.Props<Value, Multiple>['value'], undefined>, NonNullable<BaseSelect.Root.Props<Value, Multiple>['onValueChange']>> | ReadOnlyValueProperties<Exclude<BaseSelect.Root.Props<Value, Multiple>['value'], undefined>, NonNullable<BaseSelect.Root.Props<Value, Multiple>['onValueChange']>>);
 type SelectTriggerProps = ComponentProps<typeof BaseSelect.Trigger> & {
     readonly variant?: SelectVariant;
-    readonly xstyle?: ControlStyle;
+    readonly xstyle?: PlacementStyle;
 };
 type SelectValueProps = ComponentProps<typeof BaseSelect.Value> & {
     readonly xstyle?: PlacementStyle;

package/dist/packages/forms/src/selection-styles.d.ts

@@ -3,22 +3,10 @@ import { conditions } from '../../foundations/src/tokens.stylex.ts';
 export declare const selectionStyles: Readonly<{
     readonly trigger: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
-        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
         readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
         readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "space-between">;
         readonly gap: stylex.StyleXClassNameFor<"gap", string>;
-        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", string>;
-        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
-        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
         readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
-        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 1>;
-        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
-        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
-        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
-        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
-        readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
-        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
-        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
         readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "left">;
         readonly color: stylex.StyleXClassNameFor<"color", string>;
         readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
@@ -51,7 +39,6 @@ export declare const selectionStyles: Readonly<{
     readonly ghost: Readonly<{
         readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
         readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "transparent">;
-        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
     }>;
     readonly value: Readonly<{
         readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;