@mechane-ai/elements 0.11.0 → 0.12.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-DOzle5d4.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/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/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,11 +1,11 @@
 import type { ReactNode } from 'react';
-type ColumnAlignment = 'start' | 'end';
 type RowSizing = 'fixed' | 'content';
+export type DataTableColumnRole = 'primary' | 'text' | 'status' | 'number' | 'timestamp' | 'actions';
 export type DataTableColumn<Row> = {
     readonly id: string;
     readonly label: string;
+    readonly role: DataTableColumnRole;
     readonly cell: (row: Row) => ReactNode;
-    readonly align?: ColumnAlignment;
     readonly width?: number;
     readonly secondary?: boolean;
     readonly truncate?: boolean;
@@ -15,8 +15,9 @@ export type DataTableTextProps = {
     readonly children: string;
     readonly secondary?: string | undefined;
     readonly leading?: ReactNode;
+    readonly trailing?: ReactNode;
 };
-export declare function DataTableText({ children, secondary, leading }: DataTableTextProps): ReactNode;
+export declare function DataTableText({ children, secondary, leading, trailing }: DataTableTextProps): ReactNode;
 export type DataTableSort = {
     readonly columnId: string;
     readonly direction: 'ascending' | 'descending';
@@ -71,5 +72,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,6 +1,6 @@
 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 type { DataTableColumn, DataTableColumnRole, DataTableSort, DataTableWindow, DataTableProps, DataTableRowAction, DataTableTextProps, } from './data-table.tsx';
 export { DataTable, DataTableText } from './data-table.tsx';
 export type { CollectionEndProps, CollectionScrollProps } from './collection-scroll.tsx';
 export { CollectionEnd, CollectionScroll } from './collection-scroll.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/control-placeholders.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { PlacementStyle } from '../../foundations/src/style-composition.ts';
+export type ButtonPlaceholderProps = {
+    readonly width?: number | string;
+    readonly xstyle?: PlacementStyle;
+};
+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, xstyle }: ButtonPlaceholderProps): ReactNode;
+export declare function FieldPlaceholder({ label, hint, multiline, rows, width, xstyle, }: FieldPlaceholderProps): ReactNode;

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

@@ -1,4 +1,6 @@
 export { EmptyState, Notice } from './feedback.tsx';
+export type { ButtonPlaceholderProps, FieldPlaceholderProps } from './control-placeholders.tsx';
+export { ButtonPlaceholder, FieldPlaceholder } from './control-placeholders.tsx';
 export { Loading } from './loading.tsx';
 export type { ProgressProps, MeterProps } from './progress.tsx';
 export { Progress, Meter } from './progress.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>;

package/dist/packages/foundations/src/control-styles.d.ts

@@ -0,0 +1,101 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const controlStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", string>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 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 fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+    }>;
+    readonly button: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "100%">;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
+        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "center">;
+    }>;
+    readonly field: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "block">;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+    }>;
+    readonly fieldRoot: 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 textarea: Readonly<{
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", 144>;
+        readonly resize: stylex.StyleXClassNameFor<"resize", "vertical">;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+    }>;
+    readonly group: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "stretch">;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly '::after': stylex.StyleXClassNameFor<"::after", {
+            readonly content: "\"\"";
+            readonly position: "absolute";
+            readonly inset: 0;
+            readonly pointerEvents: "none";
+            readonly borderWidth: 1;
+            readonly borderStyle: "solid";
+            readonly borderColor: stylex.StyleXVar<string>;
+            readonly borderRadius: stylex.StyleXVar<string>;
+        }>;
+        readonly ':has(input[aria-invalid="true"])': stylex.StyleXClassNameFor<":has(input[aria-invalid=\"true\"])", {
+            readonly '::after': {
+                borderColor: stylex.StyleXVar<string>;
+            };
+        }>;
+    }>;
+    readonly embedded: Readonly<{
+        readonly flex: stylex.StyleXClassNameFor<"flex", 1>;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly width: stylex.StyleXClassNameFor<"width", 0>;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "transparent">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly ':is([data-invalid], [aria-invalid="true"])': stylex.StyleXClassNameFor<":is([data-invalid], [aria-invalid=\"true\"])", {
+            readonly borderColor: "transparent";
+        }>;
+        readonly ':focus-visible': stylex.StyleXClassNameFor<":focus-visible", {
+            readonly outlineOffset: `calc(0px - ${stylex.StyleXVar<string>})`;
+        }>;
+    }>;
+}>;

package/dist/packages/foundations/src/style-composition.d.ts

@@ -1,12 +1,10 @@
 import type { StyleXStyles } from '@stylexjs/stylex';
 import type { CSSProperties } from 'react';
 type PlacementProperties = Pick<CSSProperties, 'alignSelf' | 'flex' | 'flexGrow' | 'flexShrink' | 'gridArea' | 'gridColumn' | 'gridRow' | 'margin' | 'marginBlock' | 'marginInline' | 'marginBlockStart' | 'marginBlockEnd' | 'marginInlineStart' | 'marginInlineEnd' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'width' | 'maxWidth' | 'minWidth'>;
-type ControlGeometry = Pick<CSSProperties, 'height' | 'minHeight' | 'maxHeight' | 'padding' | 'paddingBlock' | 'paddingInline' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'borderRadius' | 'justifyContent' | 'alignItems' | 'gap'>;
 type DefinedProperties<Properties> = {
     readonly [Key in keyof Properties]?: Exclude<Properties[Key], undefined>;
 };
 export type PlacementStyle = StyleXStyles<DefinedProperties<PlacementProperties>>;
-export type ControlStyle = StyleXStyles<DefinedProperties<PlacementProperties & ControlGeometry>>;
 type StyleProperties<State> = {
     readonly className?: string | ((state: State) => string | undefined) | undefined;
     readonly style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined;

package/dist/packages/foundations/src/tokens.stylex.d.ts

@@ -158,8 +158,7 @@ export declare const typography: stylex.VarGroup<Readonly<{
     headingTracking: string;
 }>, symbol>;
 export declare const controls: stylex.VarGroup<Readonly<{
-    smHeight: string;
-    mdHeight: string;
+    height: string;
     coarseTarget: string;
     iconSize: string;
     paddingInline: string;
@@ -168,6 +167,11 @@ export declare const controls: stylex.VarGroup<Readonly<{
     focusWidth: string;
     disabledOpacity: string;
 }>, symbol>;
+export declare const pageGeometry: stylex.VarGroup<Readonly<{
+    inset: string;
+    toolbarHeight: string;
+    sectionGap: string;
+}>, symbol>;
 export declare const radii: stylex.VarGroup<Readonly<{
     sm: string;
     md: string;
@@ -180,11 +184,13 @@ export declare const motion: stylex.VarGroup<Readonly<{
 }>, symbol>;
 export declare const shadows: stylex.VarGroup<Readonly<{
     popup: string;
+    selection: string;
 }>, symbol>;
 export declare const darkShadows: {
     popup: string;
 };
 export declare const layers: {
+    sticky: string;
     backdrop: string;
     dialog: string;
     popup: string;

package/dist/packages/layout/src/frame.stylex.d.ts

@@ -1,7 +1,6 @@
 import * as stylex from '@stylexjs/stylex';
 export declare const frame: stylex.VarGroup<Readonly<{
     sidebarWidth: string;
-    toolbarHeight: string;
     navigationHeight: string;
     navigationInset: string;
     navigationPadding: string;

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

@@ -4,6 +4,8 @@ export { FocusPage } from './focus-page.tsx';
 export { Workbench, WorkbenchScroll, WorkbenchFooter } from './workbench.tsx';
 export { ViewStack } from './view-stack.tsx';
 export { PageToolbar, ToolbarAction } from './page-toolbar.tsx';
+export type { PageContentProps } from './page-content.tsx';
+export { PageContent } from './page-content.tsx';
 export type { RecordPageRootProps, RecordPageToolbarProps, RecordPageBodyProps, RecordPageHeaderProps, RecordPageContentProps, RecordPageAsideProps, } from './record-page.tsx';
 export { RecordPage } from './record-page.tsx';
 export type { ResizableRootProps, ResizablePaneProps, ResizableHandleProps } from './resizable.tsx';

package/dist/packages/layout/src/page-content.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export type PageContentProps = {
+    readonly children: ReactNode;
+};
+export declare function PageContent({ children }: PageContentProps): ReactNode;

package/dist/packages/layout/src/page-toolbar.d.ts

@@ -8,7 +8,7 @@ type PageToolbarProps = {
     readonly views?: ReactNode;
     readonly leading?: ReactNode;
 };
-type ToolbarActionProps = Omit<ComponentProps<typeof Button>, 'variant' | 'size' | 'xstyle'> & {
+type ToolbarActionProps = Omit<ComponentProps<typeof Button>, 'variant' | 'xstyle'> & {
     readonly icon?: ReactNode;
 };
 export declare function PageToolbar({ title, actions, breadcrumb, navigation, views, leading, }: PageToolbarProps): ReactNode;

package/dist/packages/layout/src/sidebar.d.ts

@@ -1,5 +1,5 @@
+import { Button as BaseButton } from '@base-ui/react/button';
 import type { ComponentProps, ReactNode, RefObject } from 'react';
-import { Button } from '../../core/src/index.ts';
 import { Drawer } from '../../overlays/src/index.ts';
 type SidebarState = {
     readonly isExpanded: boolean;
@@ -21,7 +21,7 @@ type NavigationProps = {
     readonly children: ReactNode;
     readonly label?: string;
 };
-type NavigationItemProps = Omit<ComponentProps<typeof Button>, 'variant' | 'tone' | 'size' | 'xstyle'> & {
+type NavigationItemProps = ComponentProps<typeof BaseButton> & {
     readonly icon?: ReactNode;
     readonly selected?: boolean;
 };
@@ -45,7 +45,7 @@ export declare function NavigationSection({ children, label, }: {
     readonly children: ReactNode;
     readonly label: string;
 }): ReactNode;
-export declare function NavigationItem({ children, icon, selected, onClick, ...props }: NavigationItemProps): ReactNode;
+export declare function NavigationItem({ children, icon, selected, onClick, className, style, ...props }: NavigationItemProps): ReactNode;
 export declare function NavigationLink({ children, icon, selected, onClick, className, style, ...props }: NavigationLinkProps): ReactNode;
 export declare function SidebarLabel({ children, grow }: SidebarLabelProps): ReactNode;
 export declare function SidebarFooter({ children, layout }: SidebarFooterProps): ReactNode;

package/dist/{pierre-diff--zsiHCCB.js → pierre-diff-sUAU-xeL.js}

@@ -1,4 +1,4 @@
-import { n as e, t } from "./pierre-theme-D9hnHv3Z.js";
+import { n as e, t } from "./pierre-theme-CBAncKdH.js";
 import { t as n } from "./viewer-styles-CpHqp5Qv.js";
 import * as r from "@stylexjs/stylex";
 import { useCallback as i, useState as a } from "react";

package/dist/{pierre-theme-D9hnHv3Z.js → pierre-theme-CBAncKdH.js}

@@ -62,7 +62,7 @@ var o = {
 pre { font-family: ${a.monoFamily}; font-size: ${a.captionSize}; line-height: ${a.bodyLineHeight}; }
 [data-line-number] { color: ${e.muted}; }
 [data-diffs-header] {
-  min-height: ${n.mdHeight};
+  min-height: ${n.height};
   padding-block: ${r.sm};
   padding-inline: ${r.md};
   border-bottom: 1px solid ${e.line};

package/dist/{pierre-tree-D47uA7lb.js → pierre-tree-DKN2eGlZ.js}

@@ -1,7 +1,7 @@
-import { c as e } from "./src-D05isEh_.js";
-import { l as t } from "./src-C_heP5kL.js";
+import { c as e } from "./src-3gzujMhN.js";
+import { l as t } from "./src-DOzle5d4.js";
 import { conditions as n } from "./tokens.js";
-import { r } from "./pierre-theme-D9hnHv3Z.js";
+import { r } from "./pierre-theme-CBAncKdH.js";
 import * as i from "@stylexjs/stylex";
 import { useEffect as a, useId as o, useRef as s, useState as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";