@mechane-ai/elements 0.0.0-stage → 0.4.1

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

@@ -0,0 +1,66 @@
+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 label: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+    }>;
+    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 error: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+    }>;
+    readonly input: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "block">;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        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 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";
+            readonly outlineColor: stylex.StyleXVar<string>;
+            readonly outlineOffset: 1;
+        }>;
+        readonly ':is([data-invalid], [aria-invalid="true"])': stylex.StyleXClassNameFor<":is([data-invalid], [aria-invalid=\"true\"])", {
+            readonly borderColor: stylex.StyleXVar<string>;
+        }>;
+        readonly ':disabled': stylex.StyleXClassNameFor<":disabled", {
+            readonly color: stylex.StyleXVar<string>;
+            readonly backgroundColor: stylex.StyleXVar<string>;
+            readonly cursor: "not-allowed";
+        }>;
+        readonly '::placeholder': stylex.StyleXClassNameFor<"::placeholder", {
+            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>;
+    }>;
+}>;

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

@@ -0,0 +1,81 @@
+import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';
+import { Input as BaseInput } from '@base-ui/react/input';
+import { NumberField as BaseNumberField } from '@base-ui/react/number-field';
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import type { ComponentProps, ReactNode } from 'react';
+import type { ReadOnlyValueProperties, ValueStateProperties } from '../../foundations/src/control-state.ts';
+import type { PlacementStyle } from '../../foundations/src/style-composition.ts';
+import type { InputProps } from './forms.tsx';
+type FieldsetRootProps = ComponentProps<typeof BaseFieldset.Root> & {
+    readonly xstyle?: PlacementStyle;
+};
+type FieldsetLegendProps = ComponentProps<typeof BaseFieldset.Legend>;
+type InputGroupRootProps = ComponentProps<'div'> & {
+    readonly xstyle?: PlacementStyle;
+};
+type InputGroupAddonProps = ComponentProps<'span'>;
+type NumberFieldRootProps = Omit<ComponentProps<typeof BaseNumberField.Root>, 'value' | 'defaultValue' | 'onValueChange' | 'locale'> & (ValueStateProperties<number | null, NonNullable<BaseNumberField.Root.Props['onValueChange']>, number> | ReadOnlyValueProperties<number | null, NonNullable<BaseNumberField.Root.Props['onValueChange']>>) & {
+    readonly locale: string;
+    readonly xstyle?: PlacementStyle;
+};
+type NumberFieldGroupProps = ComponentProps<typeof BaseNumberField.Group>;
+type NumberFieldInputProps = ComponentProps<typeof BaseNumberField.Input>;
+type NumberFieldIncrementProps = ComponentProps<typeof BaseNumberField.Increment>;
+type NumberFieldDecrementProps = ComponentProps<typeof BaseNumberField.Decrement>;
+type SliderRootProps<Value extends number | ReadonlyArray<number>> = Omit<BaseSlider.Root.Props<Value>, 'value' | 'defaultValue' | 'onValueChange' | 'locale'> & ValueStateProperties<Value, NonNullable<BaseSlider.Root.Props<Value>['onValueChange']>> & {
+    readonly locale: string;
+    readonly xstyle?: PlacementStyle;
+};
+type SliderControlProps = ComponentProps<typeof BaseSlider.Control>;
+type SliderTrackProps = ComponentProps<typeof BaseSlider.Track>;
+type SliderIndicatorProps = ComponentProps<typeof BaseSlider.Indicator>;
+type SliderThumbProps = ComponentProps<typeof BaseSlider.Thumb>;
+type SliderLabelProps = ComponentProps<typeof BaseSlider.Label>;
+type SliderValueProps = ComponentProps<typeof BaseSlider.Value>;
+type FilePickerProps = Omit<ComponentProps<typeof BaseInput>, 'type' | 'value' | 'defaultValue' | 'onValueChange'> & {
+    readonly xstyle?: PlacementStyle;
+};
+declare function FieldsetRoot({ className, style, xstyle, ...props }: FieldsetRootProps): ReactNode;
+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, ...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;
+declare function NumberFieldIncrement({ children, 'aria-label': label, className, style, ...props }: NumberFieldIncrementProps): ReactNode;
+declare function NumberFieldDecrement({ children, 'aria-label': label, className, style, ...props }: NumberFieldDecrementProps): ReactNode;
+declare function SliderRoot<Value extends number | ReadonlyArray<number>>({ className, style, xstyle, ...props }: SliderRootProps<Value>): ReactNode;
+declare function SliderControl({ className, style, ...props }: SliderControlProps): ReactNode;
+declare function SliderTrack({ className, style, ...props }: SliderTrackProps): ReactNode;
+declare function SliderIndicator({ className, style, ...props }: SliderIndicatorProps): ReactNode;
+declare function SliderThumb({ className, style, ...props }: SliderThumbProps): ReactNode;
+declare function SliderLabel({ className, style, ...props }: SliderLabelProps): ReactNode;
+declare function SliderValue({ className, style, ...props }: SliderValueProps): ReactNode;
+export declare function FilePicker({ className, style, xstyle, ...props }: FilePickerProps): ReactNode;
+export declare const Fieldset: {
+    Root: typeof FieldsetRoot;
+    Legend: typeof FieldsetLegend;
+};
+export declare const InputGroup: {
+    Root: typeof InputGroupRoot;
+    Addon: typeof InputGroupAddon;
+    Input: typeof InputGroupInput;
+};
+export declare const NumberField: {
+    Root: typeof NumberFieldRoot;
+    Group: typeof NumberFieldGroup;
+    Input: typeof NumberFieldInput;
+    Increment: typeof NumberFieldIncrement;
+    Decrement: typeof NumberFieldDecrement;
+};
+export declare const Slider: {
+    Root: typeof SliderRoot;
+    Label: typeof SliderLabel;
+    Value: typeof SliderValue;
+    Control: typeof SliderControl;
+    Track: typeof SliderTrack;
+    Indicator: typeof SliderIndicator;
+    Thumb: typeof SliderThumb;
+};
+export {};

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

@@ -0,0 +1,32 @@
+import { Field as BaseField } from '@base-ui/react/field';
+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';
+type FieldRootProps = ComponentProps<typeof BaseField.Root> & {
+    readonly xstyle?: PlacementStyle;
+};
+type FieldLabelProps = ComponentProps<typeof BaseField.Label>;
+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'> & TextValueProperties<NonNullable<BaseInputProps['value']>, NonNullable<BaseInputProps['onChange']>, NonNullable<BaseInputProps['onValueChange']>> & {
+    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;
+};
+declare function FieldRoot({ className, style, xstyle, ...props }: FieldRootProps): ReactNode;
+declare function FieldLabel({ className, style, ...props }: FieldLabelProps): ReactNode;
+declare function FieldDescription({ className, style, ...props }: FieldDescriptionProps): ReactNode;
+declare function FieldError({ className, style, ...props }: FieldErrorProps): ReactNode;
+export declare const Field: {
+    Root: typeof FieldRoot;
+    Label: typeof FieldLabel;
+    Description: typeof FieldDescription;
+    Error: typeof FieldError;
+};
+export declare function Input({ className, style, xstyle, ...props }: InputProps): ReactNode;
+export declare function Textarea({ value, defaultValue, onValueChange, name, disabled, readOnly, required, className, style, xstyle, ...props }: TextareaProps): ReactNode;
+export {};

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

@@ -0,0 +1,7 @@
+export { Combobox } from './combobox.tsx';
+export { FilePicker, Fieldset, InputGroup, NumberField, Slider } from './form-controls.tsx';
+export { Field, Input, Textarea } from './forms.tsx';
+export { Select } from './select.tsx';
+export { Checkbox, RadioGroup, Switch, ToggleGroup } from './selection.tsx';
+export type { SettingsRowProps } from './settings-row.tsx';
+export { SettingsRow } from './settings-row.tsx';

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

@@ -0,0 +1,44 @@
+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';
+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;
+};
+type SelectValueProps = ComponentProps<typeof BaseSelect.Value> & {
+    readonly xstyle?: PlacementStyle;
+};
+type SelectIconProps = ComponentProps<typeof BaseSelect.Icon>;
+type SelectPositionerProps = ComponentProps<typeof BaseSelect.Positioner> & {
+    readonly xstyle?: PlacementStyle;
+};
+type SelectPopupProps = ComponentProps<typeof BaseSelect.Popup>;
+type SelectItemProps = ComponentProps<typeof BaseSelect.Item>;
+type SelectItemTextProps = ComponentProps<typeof BaseSelect.ItemText>;
+type SelectItemIndicatorProps = ComponentProps<typeof BaseSelect.ItemIndicator>;
+declare function SelectRoot<Value, Multiple extends boolean | undefined = false>(props: SelectRootProps<Value, Multiple>): ReactNode;
+declare function SelectTrigger({ variant, className, style, xstyle, ...props }: SelectTriggerProps): ReactNode;
+declare function SelectValue({ className, style, xstyle, ...props }: SelectValueProps): ReactNode;
+declare function SelectIcon({ className, style, ...props }: SelectIconProps): ReactNode;
+declare function SelectPositioner({ className, style, xstyle, sideOffset, alignItemWithTrigger, ...props }: SelectPositionerProps): ReactNode;
+declare function SelectPopup({ className, style, ...props }: SelectPopupProps): ReactNode;
+declare function SelectItem({ className, style, ...props }: SelectItemProps): ReactNode;
+declare function SelectItemText({ className, style, ...props }: SelectItemTextProps): ReactNode;
+declare function SelectItemIndicator({ className, style, ...props }: SelectItemIndicatorProps): ReactNode;
+export declare const Select: {
+    Root: typeof SelectRoot;
+    Trigger: typeof SelectTrigger;
+    Value: typeof SelectValue;
+    Icon: typeof SelectIcon;
+    Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: typeof SelectPositioner;
+    Popup: typeof SelectPopup;
+    List: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: typeof SelectItem;
+    ItemText: typeof SelectItemText;
+    ItemIndicator: typeof SelectItemIndicator;
+};
+export {};

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

@@ -0,0 +1,110 @@
+import * as stylex from '@stylexjs/stylex';
+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 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">;
+        readonly ':hover:not([data-disabled])': stylex.StyleXClassNameFor<":hover:not([data-disabled])", {
+            readonly backgroundColor: {
+                readonly [conditions.hoverPointer]: stylex.StyleXVar<string>;
+            };
+        }>;
+        readonly ':is([data-disabled])': stylex.StyleXClassNameFor<":is([data-disabled])", {
+            readonly opacity: stylex.StyleXVar<string>;
+            readonly cursor: "default";
+        }>;
+        readonly ':is([data-invalid])': stylex.StyleXClassNameFor<":is([data-invalid])", {
+            readonly borderColor: stylex.StyleXVar<string>;
+        }>;
+        readonly ':focus-visible': stylex.StyleXClassNameFor<":focus-visible", {
+            readonly outlineWidth: stylex.StyleXVar<string>;
+            readonly outlineStyle: "solid";
+            readonly outlineColor: stylex.StyleXVar<string>;
+            readonly outlineOffset: `calc(0px - ${stylex.StyleXVar<string>})`;
+        }>;
+    }>;
+    readonly outlined: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+    }>;
+    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>;
+        readonly flex: stylex.StyleXClassNameFor<"flex", 1>;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+        readonly textOverflow: stylex.StyleXClassNameFor<"textOverflow", "ellipsis">;
+        readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
+    }>;
+    readonly icon: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+        readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    }>;
+    readonly positioner: Readonly<{
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", string>;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", "var(--anchor-width)">;
+        readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "calc(100vw - 16px)">;
+    }>;
+    readonly popup: Readonly<{
+        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 padding: stylex.StyleXClassNameFor<"padding", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", string>;
+        readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "var(--available-height)">;
+        readonly overflowY: stylex.StyleXClassNameFor<"overflowY", "auto">;
+        readonly overscrollBehavior: stylex.StyleXClassNameFor<"overscrollBehavior", "contain">;
+    }>;
+    readonly option: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+        readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 0>;
+        readonly ':is([data-highlighted])': stylex.StyleXClassNameFor<":is([data-highlighted])", {
+            readonly backgroundColor: stylex.StyleXVar<string>;
+        }>;
+        readonly ':is([data-disabled])': stylex.StyleXClassNameFor<":is([data-disabled])", {
+            readonly color: stylex.StyleXVar<string>;
+            readonly cursor: "default";
+        }>;
+    }>;
+    readonly optionText: Readonly<{
+        readonly flex: stylex.StyleXClassNameFor<"flex", 1>;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
+    }>;
+}>;

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

@@ -0,0 +1,57 @@
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+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';
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import type { ComponentProps, ReactNode } from 'react';
+import type { CheckedStateProperties, ReadOnlyValueProperties, ValueStateProperties } from '../../foundations/src/control-state.ts';
+import type { PlacementStyle } from '../../foundations/src/style-composition.ts';
+type CheckboxRootProps = Omit<ComponentProps<typeof BaseCheckbox.Root>, 'checked' | 'defaultChecked' | 'onCheckedChange' | 'readOnly'> & CheckedStateProperties<NonNullable<BaseCheckbox.Root.Props['onCheckedChange']>> & {
+    readonly xstyle?: PlacementStyle;
+};
+type CheckboxIndicatorProps = ComponentProps<typeof BaseCheckbox.Indicator>;
+type RadioGroupRootProps<Value> = Omit<BaseRadioGroup.Props<Value>, 'value' | 'defaultValue' | 'onValueChange'> & (ValueStateProperties<Value, NonNullable<BaseRadioGroup.Props<Value>['onValueChange']>> | ReadOnlyValueProperties<Value, NonNullable<BaseRadioGroup.Props<Value>['onValueChange']>>) & {
+    readonly xstyle?: PlacementStyle;
+};
+type RadioItemProps<Value> = BaseRadio.Root.Props<Value> & {
+    readonly xstyle?: PlacementStyle;
+};
+type RadioIndicatorProps = ComponentProps<typeof BaseRadio.Indicator>;
+type SwitchRootProps = Omit<ComponentProps<typeof BaseSwitch.Root>, 'checked' | 'defaultChecked' | 'onCheckedChange' | 'readOnly'> & CheckedStateProperties<NonNullable<BaseSwitch.Root.Props['onCheckedChange']>> & {
+    readonly xstyle?: PlacementStyle;
+};
+type SwitchThumbProps = ComponentProps<typeof BaseSwitch.Thumb>;
+type ToggleGroupRootProps<Value extends string> = Omit<BaseToggleGroup.Props<Value>, 'value' | 'defaultValue' | 'onValueChange'> & ValueStateProperties<ReadonlyArray<Value>, NonNullable<BaseToggleGroup.Props<Value>['onValueChange']>> & {
+    readonly xstyle?: PlacementStyle;
+};
+type ToggleItemProps<Value extends string> = Omit<BaseToggle.Props<Value>, 'value' | 'pressed' | 'defaultPressed' | 'onPressedChange'> & {
+    readonly value: Value;
+};
+declare function CheckboxRoot({ className, style, xstyle, ...props }: CheckboxRootProps): ReactNode;
+declare function CheckboxIndicator({ children, className, style, ...props }: CheckboxIndicatorProps): ReactNode;
+declare function RadioGroupRoot<Value>({ className, style, xstyle, ...props }: RadioGroupRootProps<Value>): ReactNode;
+declare function RadioItem<Value>({ className, style, xstyle, ...props }: RadioItemProps<Value>): ReactNode;
+declare function RadioIndicator({ className, style, ...props }: RadioIndicatorProps): ReactNode;
+declare function SwitchRoot({ className, style, xstyle, ...props }: SwitchRootProps): ReactNode;
+declare function SwitchThumb({ className, style, ...props }: SwitchThumbProps): ReactNode;
+declare function ToggleGroupRoot<Value extends string>({ className, style, xstyle, ...props }: ToggleGroupRootProps<Value>): ReactNode;
+declare function ToggleItem<Value extends string>({ className, style, ...props }: ToggleItemProps<Value>): ReactNode;
+export declare const Checkbox: {
+    Root: typeof CheckboxRoot;
+    Indicator: typeof CheckboxIndicator;
+};
+export declare const RadioGroup: {
+    Root: typeof RadioGroupRoot;
+    Item: typeof RadioItem;
+    Indicator: typeof RadioIndicator;
+};
+export declare const Switch: {
+    Root: typeof SwitchRoot;
+    Thumb: typeof SwitchThumb;
+};
+export declare const ToggleGroup: {
+    Root: typeof ToggleGroupRoot;
+    Item: typeof ToggleItem;
+};
+export {};

package/dist/packages/forms/src/settings-row.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export type SettingsRowProps = {
+    readonly label: string;
+    readonly description?: string;
+    readonly controlId: string;
+    readonly children: ReactNode;
+};
+export declare function SettingsRow({ label, description, controlId, children }: SettingsRowProps): ReactNode;

package/dist/packages/foundations/src/accessibility.d.ts

@@ -0,0 +1,14 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const accessibility: Readonly<{
+    readonly hidden: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "absolute">;
+        readonly width: stylex.StyleXClassNameFor<"width", 1>;
+        readonly height: stylex.StyleXClassNameFor<"height", 1>;
+        readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
+        readonly margin: stylex.StyleXClassNameFor<"margin", -1>;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+        readonly clipPath: stylex.StyleXClassNameFor<"clipPath", "inset(50%)">;
+        readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
+    }>;
+}>;

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

@@ -0,0 +1,67 @@
+import type { Dialog } from '@base-ui/react/dialog';
+import type { ComponentProps } from 'react';
+export type OpenStateProperties<Change> = {
+    readonly open: NonNullable<Dialog.Root.Props['open']>;
+    readonly defaultOpen?: never;
+    readonly onOpenChange: Change;
+} | {
+    readonly open?: never;
+    readonly defaultOpen?: Dialog.Root.Props['defaultOpen'];
+    readonly onOpenChange?: Change;
+};
+export type ValueStateProperties<Value, Change, DefaultValue = Value> = {
+    readonly value: Value;
+    readonly defaultValue?: never;
+    readonly onValueChange: Change;
+} | {
+    readonly value?: never;
+    readonly defaultValue?: DefaultValue;
+    readonly onValueChange?: Change;
+};
+export type ReadOnlyValueProperties<Value, Change> = {
+    readonly value: Value;
+    readonly defaultValue?: never;
+    readonly onValueChange?: Change;
+    readonly readOnly: true;
+};
+export type CheckedStateProperties<Change> = {
+    readonly checked: boolean;
+    readonly defaultChecked?: never;
+    readonly onCheckedChange: Change;
+    readonly readOnly?: boolean;
+} | {
+    readonly checked: boolean;
+    readonly defaultChecked?: never;
+    readonly onCheckedChange?: Change;
+    readonly readOnly: true;
+} | {
+    readonly checked?: never;
+    readonly defaultChecked?: boolean;
+    readonly onCheckedChange?: Change;
+    readonly readOnly?: boolean;
+};
+export type TextValueProperties<Value, Change, ValueChange> = {
+    readonly value: Value;
+    readonly defaultValue?: never;
+    readonly onChange: Change;
+    readonly onValueChange?: ValueChange;
+    readonly readOnly?: ComponentProps<'input'>['readOnly'];
+} | {
+    readonly value: Value;
+    readonly defaultValue?: never;
+    readonly onChange?: Change;
+    readonly onValueChange: ValueChange;
+    readonly readOnly?: ComponentProps<'input'>['readOnly'];
+} | {
+    readonly value: Value;
+    readonly defaultValue?: never;
+    readonly onChange?: Change;
+    readonly onValueChange?: ValueChange;
+    readonly readOnly: true;
+} | {
+    readonly value?: never;
+    readonly defaultValue?: Value;
+    readonly onChange?: Change;
+    readonly onValueChange?: ValueChange;
+    readonly readOnly?: ComponentProps<'input'>['readOnly'];
+};

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

@@ -0,0 +1,46 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const overlayStyles: Readonly<{
+    readonly transition: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity, transform">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", string>;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", string>;
+    }>;
+    readonly backdrop: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "fixed">;
+        readonly top: stylex.StyleXClassNameFor<"top", 0>;
+        readonly right: stylex.StyleXClassNameFor<"right", 0>;
+        readonly bottom: stylex.StyleXClassNameFor<"bottom", 0>;
+        readonly left: stylex.StyleXClassNameFor<"left", 0>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", string>;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 1>;
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly ':is([data-starting-style], [data-ending-style])': stylex.StyleXClassNameFor<":is([data-starting-style], [data-ending-style])", {
+            readonly opacity: 0;
+        }>;
+    }>;
+    readonly title: Readonly<{
+        readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", 600>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly description: Readonly<{
+        readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
+    }>;
+    readonly content: 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>;
+    }>;
+}>;

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

@@ -0,0 +1,84 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const popupStyles: Readonly<{
+    readonly positioner: Readonly<{
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", string>;
+        readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 0>;
+    }>;
+    readonly surface: Readonly<{
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "min(360px, calc(100vw - 24px))">;
+        readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "var(--available-height)">;
+        readonly overflowY: stylex.StyleXClassNameFor<"overflowY", "auto">;
+        readonly overscrollBehavior: stylex.StyleXClassNameFor<"overscrollBehavior", "contain">;
+        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 boxShadow: stylex.StyleXClassNameFor<"boxShadow", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 0>;
+    }>;
+    readonly content: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly padding: stylex.StyleXClassNameFor<"padding", string>;
+    }>;
+    readonly menu: Readonly<{
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 192>;
+        readonly padding: stylex.StyleXClassNameFor<"padding", string>;
+    }>;
+    readonly item: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+        readonly textDecorationLine: stylex.StyleXClassNameFor<"textDecorationLine", "none">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 0>;
+        readonly ':is([data-highlighted])': stylex.StyleXClassNameFor<":is([data-highlighted])", {
+            readonly backgroundColor: stylex.StyleXVar<string>;
+        }>;
+        readonly ':is([data-disabled])': stylex.StyleXClassNameFor<":is([data-disabled])", {
+            readonly opacity: stylex.StyleXVar<string>;
+            readonly cursor: "default";
+        }>;
+        readonly ':focus-visible': stylex.StyleXClassNameFor<":focus-visible", {
+            readonly outlineWidth: stylex.StyleXVar<string>;
+            readonly outlineStyle: "solid";
+            readonly outlineColor: stylex.StyleXVar<string>;
+            readonly outlineOffset: "-2px";
+        }>;
+    }>;
+    readonly label: Readonly<{
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+    }>;
+    readonly separator: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", 1>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly marginBlock: stylex.StyleXClassNameFor<"marginBlock", string>;
+    }>;
+    readonly indicator: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", string>;
+        readonly height: stylex.StyleXClassNameFor<"height", string>;
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+    }>;
+}>;