@vireo-ai/trellis-ui 0.1.9 → 0.1.10

package/packages/client/types/components/dropdown/index.d.ts

@@ -1,55 +1,30 @@
 import type Alpine from 'alpinejs';
-import { type AnchoredPopover, type BindingObject, type CollectionNavigation, type Machine, type TrellisAlpineComponent } from '../../runtime';
-import type { PresenceLifecycle } from '../../motion';
+import { type AlpineMachine, type TrellisAlpineComponent } from '../../runtime';
+import { type BindingObject } from '../../runtime/merge-bindings';
 import { type DropdownProps } from './contract';
-type PopoverElement = HTMLElement & {
-    showPopover(): void;
-    hidePopover(): void;
-};
-type DropdownData = {
+import { dropdownHooks, type DropdownContext } from './machine';
+/**
+ * Public Alpine API for `ui.dropdown`.
+ *
+ * @public
+ */
+interface UiDropdownApi {
+    /** Whether the dropdown is opening or fully open. */
     readonly isOpen: boolean;
-    machine: Machine<Record<string, never>>;
-    menuMotion: PresenceLifecycle | null;
-    triggerId: string;
-    menuId: string;
-    props: DropdownProps;
-    collection: CollectionNavigation | null;
-    popover: AnchoredPopover | null;
-    triggerCleanup: Array<() => void>;
-    menuCleanup: Array<() => void>;
+    /** Opens the dropdown unless it is disabled. */
     open(event?: Event): void;
+    /** Closes the dropdown. Keyboard dismissal restores focus to the trigger. */
     close(event?: Event): void;
+    /** Reverses the current dropdown lifecycle, including an in-flight transition. */
     toggle(event?: Event): void;
-    focusNext(): void;
-    focusPrevious(): void;
-    focusFirst(): void;
-    focusLast(): void;
-    activateItem(el: HTMLElement): void;
-    clearActiveItem(): void;
-    root: BindingObject;
-    menu(el: HTMLElement): BindingObject;
-    menuItem(el: HTMLElement): BindingObject;
-    triggerEl(): HTMLElement;
-    menuEl(): PopoverElement;
-    allItemEls(): HTMLElement[];
-    itemEls(): HTMLElement[];
-    mount(): void;
-    unmount(): void;
-    applyProps(changedKeys?: string[]): void;
-    syncFromPopover(event: ToggleEvent): void;
-    syncPosition(): void;
-    syncMenuAttributes(): void;
-    syncTriggerAttributes(): void;
-    finishClose(): void;
-    setupMenu(): void;
-    setupTrigger(): void;
-    teardownTrigger(): void;
-    teardownMenu(): void;
-    selectItem(el: HTMLElement, event: Event): void;
-    focusItem(el: HTMLElement): void;
-    collectionNav(): CollectionNavigation;
+}
+type DropdownData = AlpineMachine<DropdownContext, DropdownProps, typeof dropdownHooks> & UiDropdownApi & {
+    readonly root: BindingObject;
+    readonly menu: BindingObject;
+    init(): void;
+    destroy(): void;
 };
 declare const UiDropdown: () => TrellisAlpineComponent<DropdownData>;
 declare const registerDropdown: (AlpineInstance: Alpine.Alpine) => void;
 export { registerDropdown, UiDropdown };
-export type { DropdownData };
+export type { DropdownData, UiDropdownApi };

package/packages/client/types/components/dropdown/machine.d.ts

@@ -0,0 +1,93 @@
+import { type Machine } from '../../runtime/state-machine';
+import type { DropdownProps } from './contract';
+type DropdownContext = Record<string, never>;
+type DropdownFocus = 'menu' | 'first';
+type DropdownMachineEffects = {
+    prepareOpen(focus: DropdownFocus): void;
+    finishOpen(): void;
+    prepareClose(restoreFocus: boolean): void;
+    finishClose(): void;
+    syncProps(): void;
+};
+type CreateDropdownMachineOptions = {
+    props: DropdownProps;
+    effects: DropdownMachineEffects;
+};
+declare const dropdownHooks: readonly [Readonly<{
+    name: "opening";
+    state: string;
+    onDone: string;
+    onError: string;
+    required?: boolean;
+    sends?: Record<string, import("../..").TransitionEventCreator>;
+    project?: (snapshot: Readonly<{
+        value: import("../..").MachineStateValue;
+        tags: readonly string[];
+        context: Readonly<DropdownContext>;
+        props: Readonly<import("../..").SchemaToProps<{
+            side: import("../../runtime/codecs").OneOfCodec<"top" | "bottom" | "left" | "right">;
+            align: import("../../runtime/codecs").OneOfCodec<"start" | "center" | "end">;
+            offset: import("../../runtime/codecs").NumberCodec;
+            gap: import("../../runtime/codecs").NumberCodec;
+            open: import("../../runtime/codecs").BoolCodec;
+            disabled: import("../../runtime/codecs").BoolCodec;
+            class: import("../../runtime/codecs").StringCodec;
+        }>>;
+        generations: Readonly<Record<string, number>>;
+    }>) => Record<string, never>;
+    projectEach?: (snapshot: Readonly<{
+        value: import("../..").MachineStateValue;
+        tags: readonly string[];
+        context: Readonly<DropdownContext>;
+        props: Readonly<import("../..").SchemaToProps<{
+            side: import("../../runtime/codecs").OneOfCodec<"top" | "bottom" | "left" | "right">;
+            align: import("../../runtime/codecs").OneOfCodec<"start" | "center" | "end">;
+            offset: import("../../runtime/codecs").NumberCodec;
+            gap: import("../../runtime/codecs").NumberCodec;
+            open: import("../../runtime/codecs").BoolCodec;
+            disabled: import("../../runtime/codecs").BoolCodec;
+            class: import("../../runtime/codecs").StringCodec;
+        }>>;
+        generations: Readonly<Record<string, number>>;
+    }>) => readonly Record<string, never>[];
+}>, Readonly<{
+    name: "closing";
+    state: string;
+    onDone: string;
+    onError: string;
+    required?: boolean;
+    sends?: Record<string, import("../..").TransitionEventCreator>;
+    project?: (snapshot: Readonly<{
+        value: import("../..").MachineStateValue;
+        tags: readonly string[];
+        context: Readonly<DropdownContext>;
+        props: Readonly<import("../..").SchemaToProps<{
+            side: import("../../runtime/codecs").OneOfCodec<"top" | "bottom" | "left" | "right">;
+            align: import("../../runtime/codecs").OneOfCodec<"start" | "center" | "end">;
+            offset: import("../../runtime/codecs").NumberCodec;
+            gap: import("../../runtime/codecs").NumberCodec;
+            open: import("../../runtime/codecs").BoolCodec;
+            disabled: import("../../runtime/codecs").BoolCodec;
+            class: import("../../runtime/codecs").StringCodec;
+        }>>;
+        generations: Readonly<Record<string, number>>;
+    }>) => Record<string, never>;
+    projectEach?: (snapshot: Readonly<{
+        value: import("../..").MachineStateValue;
+        tags: readonly string[];
+        context: Readonly<DropdownContext>;
+        props: Readonly<import("../..").SchemaToProps<{
+            side: import("../../runtime/codecs").OneOfCodec<"top" | "bottom" | "left" | "right">;
+            align: import("../../runtime/codecs").OneOfCodec<"start" | "center" | "end">;
+            offset: import("../../runtime/codecs").NumberCodec;
+            gap: import("../../runtime/codecs").NumberCodec;
+            open: import("../../runtime/codecs").BoolCodec;
+            disabled: import("../../runtime/codecs").BoolCodec;
+            class: import("../../runtime/codecs").StringCodec;
+        }>>;
+        generations: Readonly<Record<string, number>>;
+    }>) => readonly Record<string, never>[];
+}>];
+declare const createDropdownMachine: ({ props, effects, }: CreateDropdownMachineOptions) => Machine<DropdownContext, DropdownProps>;
+export { createDropdownMachine, dropdownHooks };
+export type { CreateDropdownMachineOptions, DropdownContext, DropdownFocus, DropdownMachineEffects, };

package/packages/client/types/components/dropdown/runtime-docs.d.ts

@@ -0,0 +1,2 @@
+declare const dropdownRuntimeDocs: import("../../docs/transition-docs").ComponentTransitionDocs;
+export { dropdownRuntimeDocs };

package/packages/client/types/components/field/contract.d.ts

@@ -1,4 +1,4 @@
-import { type PropState } from '../../runtime';
+import { type SchemaToProps } from '../../runtime';
 import { type Orientation } from '../common';
 declare const FIELD_LAYOUTS: readonly ["stack", "grid", "inline"];
 declare const FIELD_GROUP_LAYOUTS: readonly ["stack", "row", "grid"];
@@ -60,8 +60,12 @@ declare const fieldsetLegendSchema: {
     required: import("../../runtime/codecs").BoolCodec;
     class: import("../../runtime/codecs").StringCodec;
 };
-type FieldProps = PropState<typeof fieldSchema>;
-type FieldGroupProps = PropState<typeof fieldGroupSchema>;
-type FieldsetProps = PropState<typeof fieldsetSchema>;
-export { FIELD_GROUP_LAYOUTS, FIELD_LAYOUTS, FIELD_ORIENTATIONS, fieldDescriptionSchema, fieldErrorSchema, fieldGroupSchema, fieldLabelSchema, fieldSchema, fieldsetLegendSchema, fieldsetSchema, };
-export type { FieldGroupLayout, FieldGroupProps, FieldLayout, FieldOrientation, FieldProps, FieldsetProps };
+declare const fieldRuntimeSchema: {
+    invalid: import("../..").CodecFn<boolean>;
+};
+type FieldProps = SchemaToProps<typeof fieldSchema>;
+type FieldGroupProps = SchemaToProps<typeof fieldGroupSchema>;
+type FieldRuntimeProps = SchemaToProps<typeof fieldRuntimeSchema>;
+type FieldsetProps = SchemaToProps<typeof fieldsetSchema>;
+export { FIELD_GROUP_LAYOUTS, FIELD_LAYOUTS, FIELD_ORIENTATIONS, fieldDescriptionSchema, fieldErrorSchema, fieldGroupSchema, fieldLabelSchema, fieldRuntimeSchema, fieldSchema, fieldsetLegendSchema, fieldsetSchema, };
+export type { FieldGroupLayout, FieldGroupProps, FieldLayout, FieldOrientation, FieldProps, FieldRuntimeProps, FieldsetProps };

package/packages/client/types/components/field/index.d.ts

@@ -1,11 +1,11 @@
 import type Alpine from 'alpinejs';
-import { type CleanupStack, type TrellisAlpineComponent } from '../../runtime';
-type FieldData = {
-    observer: MutationObserver | null;
-    listeners: CleanupStack;
-    sync(): void;
+import { type AlpineMachine, type TrellisAlpineComponent } from '../../runtime';
+import { type FieldRuntimeProps } from './contract';
+import { fieldHooks, type FieldContext } from './machine';
+type FieldData = AlpineMachine<FieldContext, FieldRuntimeProps, typeof fieldHooks> & {
+    init(): void;
+    destroy(): void;
 };
 declare const UiField: () => TrellisAlpineComponent<FieldData>;
 declare const registerField: (AlpineInstance: Alpine.Alpine) => void;
 export { registerField, UiField };
-export type { FieldData };

package/packages/client/types/components/field/machine.d.ts

@@ -0,0 +1,13 @@
+import { type Machine, type MachineScope } from '../../runtime/state-machine';
+import type { FieldRuntimeProps } from './contract';
+type FieldContext = Record<string, never>;
+type FieldEffects = {
+    sync(scope: MachineScope<FieldContext, FieldRuntimeProps>): void;
+};
+declare const fieldHooks: readonly [];
+declare const createFieldMachine: ({ props, effects }: {
+    props: FieldRuntimeProps;
+    effects: FieldEffects;
+}) => Machine<FieldContext, FieldRuntimeProps>;
+export { createFieldMachine, fieldHooks };
+export type { FieldContext, FieldEffects };

package/packages/client/types/components/field/runtime-docs.d.ts

@@ -0,0 +1,2 @@
+declare const fieldRuntimeDocs: import("../../docs/transition-docs").ComponentTransitionDocs;
+export { fieldRuntimeDocs };

package/packages/client/types/components/file-upload/contract.d.ts

@@ -1,10 +1,12 @@
-import { type PropState } from '../../runtime';
+import { type SchemaToProps } from '../../runtime';
 declare const FILE_UPLOAD_LAYOUTS: readonly ["stack", "inline"];
 declare const FILE_UPLOAD_PREVIEWS: readonly ["auto", "image", "none"];
 declare const FILE_UPLOAD_SIZES: readonly ["sm", "md", "lg"];
+declare const FILE_UPLOAD_TRANSPORTS: readonly ["native", "direct"];
 type FileUploadLayout = (typeof FILE_UPLOAD_LAYOUTS)[number];
 type FileUploadPreview = (typeof FILE_UPLOAD_PREVIEWS)[number];
 type FileUploadSize = (typeof FILE_UPLOAD_SIZES)[number];
+type FileUploadTransport = (typeof FILE_UPLOAD_TRANSPORTS)[number];
 declare const fileUploadSchema: {
     name: import("../../runtime/codecs").StringCodec;
     accept: import("../../runtime/codecs").StringCodec;
@@ -22,6 +24,7 @@ declare const fileUploadSchema: {
     empty: import("../../runtime/codecs").StringCodec;
     maxItems: import("../../runtime/codecs").NumberCodec;
     clearable: import("../../runtime/codecs").BoolCodec;
+    transport: import("../../runtime/codecs").OneOfCodec<"native" | "direct">;
     rootClass: import("../../runtime/codecs").StringCodec;
     dropzoneClass: import("../../runtime/codecs").StringCodec;
     listClass: import("../../runtime/codecs").StringCodec;
@@ -55,6 +58,6 @@ declare const fileUploadRemoveSchema: {
     label: import("../../runtime/codecs").StringCodec;
     class: import("../../runtime/codecs").StringCodec;
 };
-type FileUploadProps = PropState<typeof fileUploadSchema>;
-export { FILE_UPLOAD_LAYOUTS, FILE_UPLOAD_PREVIEWS, FILE_UPLOAD_SIZES, fileUploadDropzoneSchema, fileUploadItemSchema, fileUploadListSchema, fileUploadRemoveSchema, fileUploadSchema, };
-export type { FileUploadLayout, FileUploadPreview, FileUploadProps, FileUploadSize, };
+type FileUploadProps = SchemaToProps<typeof fileUploadSchema>;
+export { FILE_UPLOAD_LAYOUTS, FILE_UPLOAD_PREVIEWS, FILE_UPLOAD_SIZES, FILE_UPLOAD_TRANSPORTS, fileUploadDropzoneSchema, fileUploadItemSchema, fileUploadListSchema, fileUploadRemoveSchema, fileUploadSchema, };
+export type { FileUploadLayout, FileUploadPreview, FileUploadProps, FileUploadSize, FileUploadTransport, };

package/packages/client/types/components/file-upload/index.d.ts

@@ -1,36 +1,39 @@
 import type Alpine from 'alpinejs';
-import { type CleanupStack, type TrellisAlpineComponent } from '../../runtime';
+import { type AlpineMachine, type TrellisAlpineComponent } from '../../runtime';
 import { type FileUploadProps } from './contract';
-type PendingFile = {
-    id: string;
-    file: File;
-    name: string;
-    size: string;
-    type: string;
-    previewUrl: string;
-};
-type FileUploadData = {
-    props: FileUploadProps;
-    listeners: CleanupStack;
-    files: PendingFile[];
-    limitReached: boolean;
-    emptyInputChangeClears: boolean;
-    root(): HTMLElement;
-    input(): HTMLInputElement;
-    dropzone(): HTMLElement | null;
-    list(): HTMLElement | null;
-    isInputUnavailable(): boolean;
-    sync(): void;
-    syncFormEncoding(): void;
-    syncInputAttributes(): void;
-    syncFromInput(): void;
-    addFiles(files: File[]): void;
-    removePending(index: number): void;
-    clearExisting(button: HTMLElement): void;
-    renderFiles(): void;
-    setDragging(value: boolean): void;
+import { fileUploadHooks, type FileTransferStatus, type FileUploadContext, type FileUploadMetadata, type FileUploadRecord } from './machine';
+/**
+ * Public Alpine API for `ui.file-upload`.
+ *
+ * @public
+ */
+interface UiFileUploadApi {
+    /** Serializable metadata for the current pending or transferred files. */
+    readonly files: readonly FileUploadRecord[];
+    /** Whether pending or existing file content is present. */
+    readonly hasFiles: boolean;
+    /** Whether an external file is over the drop target. */
+    readonly isDragging: boolean;
+    /** Whether the direct transport hook is pending. */
+    readonly isUploading: boolean;
+    /** Whether the configured client-side item limit is full. */
+    readonly isLimitReached: boolean;
+    /** Opens the native file picker when interaction is available. */
+    browse(): void;
+    /** Removes a pending file by its stable record id. */
+    remove(id: string): void;
+    /** Retries failed or canceled direct-upload records. */
+    retry(): void;
+    /** Cancels the active direct-upload batch. */
+    cancel(): void;
+    /** Returns the original browser File for transport code without cloning it. */
+    file(id: string): File | null;
+}
+type FileUploadData = AlpineMachine<FileUploadContext, FileUploadProps, typeof fileUploadHooks> & UiFileUploadApi & {
+    init(): void;
+    destroy(): void;
 };
 declare const UiFileUpload: () => TrellisAlpineComponent<FileUploadData>;
 declare const registerFileUpload: (AlpineInstance: Alpine.Alpine) => void;
-export { registerFileUpload, UiFileUpload, };
-export type { FileUploadData, PendingFile };
+export { registerFileUpload, UiFileUpload };
+export type { FileTransferStatus, FileUploadData, FileUploadMetadata, FileUploadRecord, UiFileUploadApi };

package/packages/client/types/components/file-upload/machine.d.ts

@@ -0,0 +1,127 @@
+import { type Machine, type MachineScope } from '../../runtime/state-machine';
+import type { FileUploadProps } from './contract';
+type FileSelectionSource = 'picker' | 'drop' | 'remove' | 'props' | 'clear';
+type FileTransferStatus = 'selected' | 'uploading' | 'complete' | 'failed' | 'canceled';
+type FileUploadMetadata = {
+    id: string;
+    name: string;
+    bytes: number;
+    size: string;
+    type: string;
+};
+type FileUploadRecord = FileUploadMetadata & {
+    status: FileTransferStatus;
+    progress: number;
+};
+type FileUploadContext = {
+    selection: {
+        files: FileUploadMetadata[];
+        limitReached: boolean;
+        rejectedCount: number;
+        limitRejectedCount: number;
+        source: FileSelectionSource;
+    };
+    existing: {
+        present: boolean;
+        cleared: boolean;
+    };
+    transfer: {
+        status: 'native' | 'idle' | 'uploading' | 'complete' | 'failed' | 'canceled';
+        activeIds: string[];
+        progress: Record<string, number>;
+        results: Record<string, Exclude<FileTransferStatus, 'selected' | 'uploading'>>;
+        error: string;
+    };
+};
+type FileUploadMachineEffects = {
+    commitSelection(scope: MachineScope<FileUploadContext, FileUploadProps>): void;
+    resetSelection(scope: MachineScope<FileUploadContext, FileUploadProps>): void;
+    syncProps(scope: MachineScope<FileUploadContext, FileUploadProps>): void;
+    syncDragging(scope: MachineScope<FileUploadContext, FileUploadProps>): void;
+    clearExisting(scope: MachineScope<FileUploadContext, FileUploadProps>): void;
+    syncTransfer(scope: MachineScope<FileUploadContext, FileUploadProps>): void;
+    emitComplete(scope: MachineScope<FileUploadContext, FileUploadProps>): void;
+    emitError(scope: MachineScope<FileUploadContext, FileUploadProps>): void;
+    emitCancel(scope: MachineScope<FileUploadContext, FileUploadProps>): void;
+};
+type CreateFileUploadMachineOptions = {
+    props: FileUploadProps;
+    context: FileUploadContext;
+    effects: FileUploadMachineEffects;
+};
+declare const fileUploadHooks: readonly [Readonly<{
+    name: "uploading";
+    state: string;
+    onDone: string;
+    onError: string;
+    required?: boolean;
+    sends?: Record<string, import("../..").TransitionEventCreator>;
+    project?: (snapshot: Readonly<{
+        value: import("../..").MachineStateValue;
+        tags: readonly string[];
+        context: Readonly<FileUploadContext>;
+        props: Readonly<import("../..").SchemaToProps<{
+            name: import("../../runtime/codecs").StringCodec;
+            accept: import("../../runtime/codecs").StringCodec;
+            capture: import("../../runtime/codecs").StringCodec;
+            multiple: import("../../runtime/codecs").BoolCodec;
+            required: import("../../runtime/codecs").BoolCodec;
+            disabled: import("../../runtime/codecs").BoolCodec;
+            invalid: import("../../runtime/codecs").BoolCodec;
+            preview: import("../../runtime/codecs").OneOfCodec<"image" | "none" | "auto">;
+            layout: import("../../runtime/codecs").OneOfCodec<"stack" | "inline">;
+            size: import("../../runtime/codecs").OneOfCodec<"sm" | "md" | "lg">;
+            heading: import("../../runtime/codecs").StringCodec;
+            text: import("../../runtime/codecs").StringCodec;
+            browseLabel: import("../../runtime/codecs").StringCodec;
+            empty: import("../../runtime/codecs").StringCodec;
+            maxItems: import("../../runtime/codecs").NumberCodec;
+            clearable: import("../../runtime/codecs").BoolCodec;
+            transport: import("../../runtime/codecs").OneOfCodec<"native" | "direct">;
+            rootClass: import("../../runtime/codecs").StringCodec;
+            dropzoneClass: import("../../runtime/codecs").StringCodec;
+            listClass: import("../../runtime/codecs").StringCodec;
+            itemClass: import("../../runtime/codecs").StringCodec;
+            class: import("../../runtime/codecs").StringCodec;
+        }>>;
+        generations: Readonly<Record<string, number>>;
+    }>) => {
+        files: FileUploadMetadata[];
+    };
+    projectEach?: (snapshot: Readonly<{
+        value: import("../..").MachineStateValue;
+        tags: readonly string[];
+        context: Readonly<FileUploadContext>;
+        props: Readonly<import("../..").SchemaToProps<{
+            name: import("../../runtime/codecs").StringCodec;
+            accept: import("../../runtime/codecs").StringCodec;
+            capture: import("../../runtime/codecs").StringCodec;
+            multiple: import("../../runtime/codecs").BoolCodec;
+            required: import("../../runtime/codecs").BoolCodec;
+            disabled: import("../../runtime/codecs").BoolCodec;
+            invalid: import("../../runtime/codecs").BoolCodec;
+            preview: import("../../runtime/codecs").OneOfCodec<"image" | "none" | "auto">;
+            layout: import("../../runtime/codecs").OneOfCodec<"stack" | "inline">;
+            size: import("../../runtime/codecs").OneOfCodec<"sm" | "md" | "lg">;
+            heading: import("../../runtime/codecs").StringCodec;
+            text: import("../../runtime/codecs").StringCodec;
+            browseLabel: import("../../runtime/codecs").StringCodec;
+            empty: import("../../runtime/codecs").StringCodec;
+            maxItems: import("../../runtime/codecs").NumberCodec;
+            clearable: import("../../runtime/codecs").BoolCodec;
+            transport: import("../../runtime/codecs").OneOfCodec<"native" | "direct">;
+            rootClass: import("../../runtime/codecs").StringCodec;
+            dropzoneClass: import("../../runtime/codecs").StringCodec;
+            listClass: import("../../runtime/codecs").StringCodec;
+            itemClass: import("../../runtime/codecs").StringCodec;
+            class: import("../../runtime/codecs").StringCodec;
+        }>>;
+        generations: Readonly<Record<string, number>>;
+    }>) => readonly {
+        files: FileUploadMetadata[];
+    }[];
+}>];
+declare const createFileUploadMachine: ({ props, context, effects }: CreateFileUploadMachineOptions) => Machine<FileUploadContext, FileUploadProps>;
+declare const recordsFromSnapshot: (context: Readonly<FileUploadContext>) => FileUploadRecord[];
+export { createFileUploadMachine, fileUploadHooks, recordsFromSnapshot };
+export type { CreateFileUploadMachineOptions, FileSelectionSource, FileTransferStatus, FileUploadContext, FileUploadMachineEffects, FileUploadMetadata, FileUploadRecord, };

package/packages/client/types/components/file-upload/runtime-docs.d.ts

@@ -0,0 +1,2 @@
+declare const fileUploadRuntimeDocs: import("../../docs/transition-docs").ComponentTransitionDocs;
+export { fileUploadRuntimeDocs };

package/packages/client/types/components/flex/contract.d.ts

@@ -1,35 +1,34 @@
-import { type PropState } from '../../runtime';
+import { type SchemaToProps } from '../../runtime';
 import { type LayoutAlign, type LayoutAs, type LayoutJustify, type LayoutSpace } from '../layout';
 declare const FLEX_DISPLAYS: readonly ["flex", "inline-flex", "none"];
 declare const FLEX_DIRECTIONS: readonly ["row", "column", "row-reverse", "column-reverse"];
 declare const FLEX_WRAPS: readonly ["nowrap", "wrap", "wrap-reverse"];
 declare const flexSchema: {
-    padding: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">;
-    paddingX: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">;
-    paddingY: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">;
-    margin: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">;
-    marginX: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">;
-    marginY: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">;
-    surface: import("../../runtime/codecs").OneOfCodec<"none" | "subtle" | "accent" | "app" | "chrome" | "panel" | "raised" | "overlay" | "inverse">;
-    tone: import("../../runtime/codecs").OneOfCodec<"solid" | "alpha">;
+    padding: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    paddingX: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    paddingY: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    margin: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    marginX: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    marginY: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    surface: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "inherit" | "3" | "4" | "5" | "6" | "7" | "8" | "+1" | "+2" | "+3" | "+4" | "+5" | "+6" | "+7" | "+8">;
     radius: import("../../runtime/codecs").OneOfCodec<"none" | "xs" | "sm" | "md" | "lg" | "full">;
-    elevation: import("../../runtime/codecs").OneOfCodec<"1" | "none" | "2" | "3" | "4" | "5" | "6">;
+    elevation: import("../../runtime/codecs").OneOfCodec<"1" | "match" | "2" | "none" | "3" | "4" | "5" | "6" | "7" | "8">;
     width: import("../../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "full" | "auto" | "xl" | "prose">;
     height: import("../../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "full" | "auto" | "xl">;
     class: import("../../runtime/codecs").StringCodec;
-    align: import("../../runtime/codecs").OneOfCodec<"end" | "center" | "start" | "stretch" | "baseline">;
-    justify: import("../../runtime/codecs").OneOfCodec<"end" | "center" | "start" | "between">;
-    gap: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">;
-    gapX: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">;
-    gapY: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">;
+    align: import("../../runtime/codecs").OneOfCodec<"start" | "center" | "end" | "stretch" | "baseline">;
+    justify: import("../../runtime/codecs").OneOfCodec<"start" | "center" | "end" | "between">;
+    gap: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    gapX: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    gapY: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
     as: import("../../runtime/codecs").OneOfCodec<"article" | "aside" | "div" | "footer" | "form" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul">;
-    display: import("../../runtime/codecs").OneOfCodec<"flex" | "none" | "inline-flex">;
+    display: import("../../runtime/codecs").OneOfCodec<"none" | "flex" | "inline-flex">;
     direction: import("../../runtime/codecs").OneOfCodec<"row" | "column" | "row-reverse" | "column-reverse">;
     wrap: import("../../runtime/codecs").OneOfCodec<"nowrap" | "wrap" | "wrap-reverse">;
 };
 type FlexDisplay = typeof FLEX_DISPLAYS[number];
 type FlexDirection = typeof FLEX_DIRECTIONS[number];
 type FlexWrap = typeof FLEX_WRAPS[number];
-type FlexProps = PropState<typeof flexSchema>;
+type FlexProps = SchemaToProps<typeof flexSchema>;
 export { FLEX_DIRECTIONS, FLEX_DISPLAYS, FLEX_WRAPS, flexSchema, };
 export type { FlexDirection, FlexDisplay, FlexProps, FlexWrap, LayoutAlign as FlexAlign, LayoutAs as FlexAs, LayoutJustify as FlexJustify, LayoutSpace as FlexSpace, };