@vireo-ai/trellis-ui 0.1.8 → 0.1.10

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

@@ -1,7 +1,10 @@
 import type Alpine from 'alpinejs';
-import { type BindingObject, type CleanupStack, type Machine, type PropState, type TrellisAlpineComponent } from '../../runtime';
-import type { PresenceLifecycle, PresencePhase } from '../../motion';
+import { type AlpineMachine, type TrellisAlpineComponent } from '../../runtime';
+import { type SchemaToProps } from '../../runtime/codecs';
+import { type BindingObject } from '../../runtime/merge-bindings';
+import { type MotionHandle, type MotionTransitionSubject } from '../../motion';
 import { type SidebarProps, type SidebarToggleAction } from './contract';
+import { sidebarHooks, type SidebarContext, type SidebarMode } from './machine';
 type SidebarController = {
     readonly id: string;
     isExpanded(): boolean;
@@ -10,104 +13,64 @@ type SidebarController = {
 };
 declare const togglePropsSchema: {
     target: import("../../runtime/codecs").StringCodec;
-    action: import("../../runtime/codecs").OneOfCodec<"close" | "toggle" | "open" | "stash" | "expand">;
+    action: import("../../runtime/codecs").OneOfCodec<"close" | "toggle" | "open" | "expand" | "stash">;
     class: import("../../runtime/codecs").StringCodec;
 };
-type SidebarToggleProps = PropState<typeof togglePropsSchema>;
-declare const edgePropsSchema: {
-    target: import("../../runtime/codecs").StringCodec;
-    action: import("../../runtime/codecs").OneOfCodec<"close" | "toggle" | "open" | "stash" | "expand">;
-    class: import("../../runtime/codecs").StringCodec;
-};
-type SidebarEdgeProps = PropState<typeof edgePropsSchema>;
-type SidebarMachineContext = {
-    desktopStashed: boolean;
-};
-type SidebarData = SidebarController & {
-    props: SidebarProps;
-    machine: Machine<SidebarMachineContext>;
-    readonly mobileOpen: boolean;
-    readonly desktopStashed: boolean;
-    readonly desktopDrawerOpen: boolean;
-    readonly drawerExiting: boolean;
-    readonly sidebarExiting: boolean;
-    sidebarExitFreezeCleanup: (() => void) | null;
-    drawerMotionRun: number;
-    readonly drawerMotionPhase: PresencePhase | null;
-    desktopMode: boolean;
-    renderedExpanded: boolean;
-    renderedDrawerOpen: boolean;
-    lastPointer: {
-        clientX: number;
-        clientY: number;
-    } | null;
-    activeTrigger: HTMLElement | null;
-    currentWidth: string;
-    cleanup: CleanupStack;
-    drawerMotion: PresenceLifecycle | null;
-    backdropMotion: PresenceLifecycle | null;
-    hasScrollLock: boolean;
-    mediaQuery: MediaQueryList | null;
-    mediaQueryCleanup: (() => void) | null;
-    root: BindingObject;
-    setupMediaQuery(): void;
-    applyProps(changedKeys?: string[]): void;
-    isDesktop(): boolean;
-    isMobileCollapsible(): boolean;
-    isDesktopCollapsible(): boolean;
-    hasOpenDrawer(): boolean;
-    isExpanded(): boolean;
+type SidebarToggleProps = SchemaToProps<typeof togglePropsSchema>;
+type SidebarEdgeProps = SidebarToggleProps;
+/** Public Alpine API for `ui.sidebar`. @public */
+interface UiSidebarApi {
+    /** Sidebar id used by external controls. */
+    readonly id: string;
+    /** Whether the sidebar is fully open or currently opening. */
+    readonly isOpen: boolean;
+    /** Whether the observed shell is at or above the theme-generated shell breakpoint. */
+    readonly isDesktop: boolean;
+    /** Whether side placement is persistently stashed on desktop. */
+    readonly isStashed: boolean;
+    /** Current side-placement track width. */
+    readonly width: string;
+    /** Current top-placement track height. */
+    readonly height: string;
+    /** Opens the responsive drawer or temporarily reveals a stashed desktop sidebar. */
+    open(event?: Event): void;
+    /** Closes the responsive drawer or stashes an expanded desktop sidebar. */
+    close(event?: Event): void;
+    /** Reverses the current visibility intent, including an in-flight transition. */
+    toggle(event?: Event): void;
+    /** Permanently removes side placement from the desktop layout track. */
+    stash(event?: Event): void;
+    /** Permanently restores side placement to the desktop layout track. */
+    expand(event?: Event): void;
+}
+type SidebarData = AlpineMachine<SidebarContext, SidebarProps, typeof sidebarHooks> & UiSidebarApi & {
+    readonly root: BindingObject;
+    init(): void;
+    destroy(): void;
     perform(action: SidebarToggleAction, trigger?: HTMLElement | null): void;
-    open(trigger?: HTMLElement | null): void;
-    close(trigger?: HTMLElement | null): void;
-    closeTemporaryDrawer(trigger?: HTMLElement | null, event?: MouseEvent): void;
-    handleBreakpointChange(): void;
-    handlePointerMove(event: Event): void;
-    pointerWithinEdge(event: MouseEvent): boolean;
-    pointerWithinRevealArea(event: MouseEvent): boolean;
-    pointerWithinDrawer(pointer: {
-        clientX: number;
-        clientY: number;
-    }): boolean;
-    toggle(trigger?: HTMLElement | null): void;
-    syncAll(): void;
-    syncApp(): void;
-    syncRoot(): void;
-    syncBackdrop(): void;
-    syncEdge(): void;
     syncToggles(): void;
-    syncStateIcons(): void;
-    animateDrawerEnter(): void;
-    animateDrawerExit(run: number): void;
-    animateSidebarEnter(run: number): void;
-    animateSidebarExit(run: number, freezeCleanup?: (() => void) | null, withBackdrop?: boolean): void;
-    finishSidebarExit(run: number, freezeCleanup?: (() => void) | null): void;
-    freezeSidebarForExit(): (() => void) | null;
-    clearSidebarExitFreeze(freezeCleanup?: (() => void) | null): void;
-    handleResize(event: Event): void;
-    setupGroups(): void;
-    appEl(): HTMLElement | null;
-    backdropEl(): HTMLElement | null;
-    edgeEls(): HTMLElement[];
-    focusRestoreTarget(trigger?: HTMLElement | null): HTMLElement | null;
-    moveFocusBeforeHide(target: HTMLElement | null): void;
-    storageKey(): string;
-    storedStashed(): boolean | null;
-    persistStashed(): void;
+    isExpanded(): boolean;
+    transitionSidebar(transition: SidebarMotionTransition): MotionHandle;
 };
+type SidebarMotionTransition = MotionTransitionSubject & Readonly<{
+    data: {
+        mode: SidebarMode;
+        presentation: 'drawer' | 'layout';
+    };
+    to: string;
+}>;
 declare const UiSidebar: () => TrellisAlpineComponent<SidebarData>;
 declare const UiSidebarToggle: () => TrellisAlpineComponent<{
     props: SidebarToggleProps;
-    root: BindingObject;
-    targetId(): string;
+    readonly root: BindingObject;
     trigger(event?: Event): void;
 }>;
 declare const UiSidebarEdge: () => TrellisAlpineComponent<{
     props: SidebarEdgeProps;
-    root: BindingObject;
-    targetId(): string;
+    readonly root: BindingObject;
     trigger(event?: Event): void;
+    leave(event?: Event): void;
 }>;
 declare const registerSidebar: (AlpineInstance: Alpine.Alpine) => void;
-export { registerSidebar, UiSidebar, UiSidebarEdge, UiSidebarToggle, };
-export type { SidebarController, SidebarData };
+export { registerSidebar, UiSidebar, UiSidebarEdge, UiSidebarToggle };
+export type { SidebarController, SidebarData, UiSidebarApi };

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

@@ -0,0 +1,100 @@
+import { type Machine } from '../../runtime/state-machine';
+import type { SidebarProps } from './contract';
+type SidebarMode = 'mobile' | 'desktop';
+type SidebarPresentation = 'drawer' | 'layout';
+type SidebarTarget = 'mobileClosed' | 'mobileOpen' | 'desktopExpanded' | 'desktopStashed' | 'desktopDrawer' | 'desktopTop';
+type SidebarContext = {
+    responsive: {
+        mode: SidebarMode;
+    };
+    layout: {
+        desktopStashed: boolean;
+        desktopDrawerOpen: boolean;
+        width: string;
+        height: string;
+    };
+    transition: {
+        target: SidebarTarget;
+        presentation: SidebarPresentation;
+    };
+};
+type SidebarMachineEffects = {
+    prepareOpen(): void;
+    finishOpen(): void;
+    prepareClose(): void;
+    finishClose(): void;
+    sync(): void;
+    syncProps(): void;
+};
+type CreateSidebarMachineOptions = {
+    props: SidebarProps;
+    mode: SidebarMode;
+    desktopStashed: boolean;
+    effects: SidebarMachineEffects;
+};
+declare const sidebarHooks: 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<SidebarContext>;
+        props: Readonly<unknown>;
+        generations: Readonly<Record<string, number>>;
+    }>) => {
+        mode: SidebarMode;
+        presentation: SidebarPresentation;
+        width: string;
+        height: string;
+    };
+    projectEach?: (snapshot: Readonly<{
+        value: import("../..").MachineStateValue;
+        tags: readonly string[];
+        context: Readonly<SidebarContext>;
+        props: Readonly<unknown>;
+        generations: Readonly<Record<string, number>>;
+    }>) => readonly {
+        mode: SidebarMode;
+        presentation: SidebarPresentation;
+        width: string;
+        height: string;
+    }[];
+}>, 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<SidebarContext>;
+        props: Readonly<unknown>;
+        generations: Readonly<Record<string, number>>;
+    }>) => {
+        mode: SidebarMode;
+        presentation: SidebarPresentation;
+        width: string;
+        height: string;
+    };
+    projectEach?: (snapshot: Readonly<{
+        value: import("../..").MachineStateValue;
+        tags: readonly string[];
+        context: Readonly<SidebarContext>;
+        props: Readonly<unknown>;
+        generations: Readonly<Record<string, number>>;
+    }>) => readonly {
+        mode: SidebarMode;
+        presentation: SidebarPresentation;
+        width: string;
+        height: string;
+    }[];
+}>];
+declare const createSidebarMachine: ({ props, mode, desktopStashed, effects }: CreateSidebarMachineOptions) => Machine<SidebarContext, SidebarProps>;
+export { createSidebarMachine, sidebarHooks };
+export type { CreateSidebarMachineOptions, SidebarContext, SidebarMachineEffects, SidebarMode, SidebarPresentation, SidebarTarget };

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

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

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

@@ -1,4 +1,4 @@
-import { type PropState } from '../../runtime';
+import { type SchemaToProps } from '../../runtime';
 import { type ControlSize, type DefaultVariant, type Orientation } from '../common';
 declare const SLIDER_SIZES: readonly ["xs", "sm", "md", "lg", "xlg"];
 declare const SLIDER_VARIANTS: readonly ["default"];
@@ -50,7 +50,7 @@ declare const sliderTickSchema: {
     label: import("../../runtime/codecs").StringCodec;
     class: import("../../runtime/codecs").StringCodec;
 };
-type SliderProps = PropState<typeof sliderSchema>;
-type SliderTickProps = PropState<typeof sliderTickSchema>;
+type SliderProps = SchemaToProps<typeof sliderSchema>;
+type SliderTickProps = SchemaToProps<typeof sliderTickSchema>;
 export { SLIDER_FORMATS, SLIDER_ORIENTATIONS, SLIDER_SIZES, SLIDER_VARIANTS, sliderSchema, sliderTickSchema, };
 export type { SliderFormat, SliderOrientation, SliderProps, SliderSize, SliderTickProps, SliderVariant, };

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

@@ -1,7 +1,7 @@
 import type Alpine from 'alpinejs';
-import { type CleanupStack, type TrellisAlpineComponent } from '../../runtime';
+import { type AlpineMachine, type TrellisAlpineComponent } from '../../runtime';
 import { type SliderProps } from './contract';
-type SliderThumbName = 'single' | 'lower' | 'upper';
+import { type SliderContext, sliderHooks, type SliderThumbName, type SliderValues } from './machine';
 type SliderElements = {
     root: HTMLElement;
     track: HTMLElement | null;
@@ -16,26 +16,22 @@ type SliderElements = {
     hiddenInputs: HTMLElement | null;
     ticks: HTMLElement[];
 };
-type SliderValues = {
-    lower: number;
-    upper: number;
-};
-type SliderData = {
-    props: SliderProps;
-    listeners: CleanupStack;
-    hiddenInputsKey: string;
-    draggingThumb: SliderThumbName | null;
-    elements(): SliderElements;
-    applyProps(changedKeys?: string[]): void;
-    sync(): void;
-    syncFromInput(event: Event): void;
-    commitFromInput(event: Event): void;
-    handleKeydown(event: KeyboardEvent): void;
-    handlePointerDown(event: PointerEvent): void;
-    handlePointerMove(event: PointerEvent): void;
-    handlePointerUp(event: PointerEvent): void;
+/**
+ * Public Alpine API for `ui.slider`.
+ *
+ * @public
+ */
+interface UiSliderApi {
+    /** Current normalized values: one item for single mode, lower and upper for range mode. */
+    readonly values: readonly number[];
+    /** Set and commit a normalized single value or lower/upper range. */
+    setValue(value: number | readonly [number, number]): void;
+}
+type SliderData = AlpineMachine<SliderContext, SliderProps, typeof sliderHooks> & UiSliderApi & {
+    init(): void;
+    destroy(): void;
 };
 declare const UiSlider: () => TrellisAlpineComponent<SliderData>;
 declare const registerSlider: (AlpineInstance: Alpine.Alpine) => void;
 export { registerSlider, UiSlider };
-export type { SliderData, SliderElements, SliderThumbName, SliderValues };
+export type { SliderData, SliderElements, SliderThumbName, SliderValues, UiSliderApi };

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

@@ -0,0 +1,37 @@
+import { type Machine, type MachineScope } from '../../runtime/state-machine';
+import type { SliderProps } from './contract';
+type SliderThumbName = 'single' | 'lower' | 'upper';
+type SliderValues = {
+    lower: number;
+    upper: number;
+};
+type SliderContext = {
+    value: SliderValues;
+    interaction: {
+        activeThumb: SliderThumbName | null;
+    };
+};
+type SliderMachineEffects = {
+    sync(scope: MachineScope<SliderContext, SliderProps>): void;
+    beginDrag(scope: MachineScope<SliderContext, SliderProps>): void;
+    endDrag(scope: MachineScope<SliderContext, SliderProps>): void;
+    emitInput(scope: MachineScope<SliderContext, SliderProps>): void;
+    emitChange(scope: MachineScope<SliderContext, SliderProps>): void;
+};
+type CreateSliderMachineOptions = {
+    props: SliderProps;
+    context: SliderContext;
+    effects: SliderMachineEffects;
+};
+declare const sliderHooks: readonly [];
+declare const sliderBounds: (props: SliderProps) => {
+    min: number;
+    max: number;
+    step: number;
+    bigStep: number;
+};
+declare const normalizeSliderValues: (props: SliderProps, values: SliderValues, changedThumb?: SliderThumbName | null) => SliderValues;
+declare const initialSliderValues: (props: SliderProps) => SliderValues;
+declare const createSliderMachine: ({ props, context, effects }: CreateSliderMachineOptions) => Machine<SliderContext, SliderProps>;
+export { createSliderMachine, initialSliderValues, normalizeSliderValues, sliderBounds, sliderHooks, };
+export type { CreateSliderMachineOptions, SliderContext, SliderMachineEffects, SliderThumbName, SliderValues, };

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

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

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

@@ -1,29 +1,28 @@
-import { type PropState } from '../../runtime';
+import { type SchemaToProps } from '../../runtime';
 import { type LayoutAlign, type LayoutAs, type LayoutJustify, type LayoutSpace } from '../layout';
 declare const STACK_DISPLAYS: readonly ["grid", "inline-grid", "none"];
 declare const stackSchema: {
-    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<"grid" | "none" | "inline-grid">;
+    display: import("../../runtime/codecs").OneOfCodec<"none" | "grid" | "inline-grid">;
 };
 type StackDisplay = typeof STACK_DISPLAYS[number];
-type StackProps = PropState<typeof stackSchema>;
+type StackProps = SchemaToProps<typeof stackSchema>;
 export { STACK_DISPLAYS, stackSchema, };
 export type { LayoutAlign as StackAlign, LayoutAs as StackAs, LayoutJustify as StackJustify, LayoutSpace as StackSpace, StackDisplay, StackProps, };

package/packages/client/types/components/surface-manifest.d.ts

@@ -0,0 +1,9 @@
+declare const GENERATED_SURFACE_TOKENS: {
+    name: string;
+    description: string;
+}[];
+declare const GENERATED_ELEVATION_TOKENS: {
+    name: string;
+    description: string;
+}[];
+export { GENERATED_ELEVATION_TOKENS, GENERATED_SURFACE_TOKENS };

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

@@ -1,4 +1,4 @@
-import { type PropState } from '../../runtime';
+import { type SchemaToProps } from '../../runtime';
 import { type ControlSize, type DefaultVariant } from '../common';
 declare const SWITCH_PLACEMENTS: readonly ["trailing", "leading"];
 declare const SWITCH_SIZES: readonly ["xs", "sm", "md", "lg", "xlg"];
@@ -11,10 +11,10 @@ declare const switchControlSchema: {
     name: import("../../runtime/codecs").StringCodec;
     label: import("../../runtime/codecs").StringCodec;
     description: import("../../runtime/codecs").StringCodec;
-    checked: import("../../runtime/codecs").BoolCodec;
-    disabled: import("../../runtime/codecs").BoolCodec;
-    required: import("../../runtime/codecs").BoolCodec;
-    invalid: import("../../runtime/codecs").BoolCodec;
+    checked: import("../..").CodecFn<boolean>;
+    disabled: import("../..").CodecFn<boolean>;
+    required: import("../..").CodecFn<boolean>;
+    invalid: import("../..").CodecFn<boolean>;
     placement: import("../../runtime/codecs").OneOfCodec<"leading" | "trailing">;
     variant: import("../../runtime/codecs").OneOfCodec<"default">;
     size: import("../../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "xlg">;
@@ -36,10 +36,10 @@ declare const switchSchema: {
     fieldClass: import("../../runtime/codecs").StringCodec;
     value: import("../../runtime/codecs").StringCodec;
     name: import("../../runtime/codecs").StringCodec;
-    checked: import("../../runtime/codecs").BoolCodec;
-    disabled: import("../../runtime/codecs").BoolCodec;
-    required: import("../../runtime/codecs").BoolCodec;
-    invalid: import("../../runtime/codecs").BoolCodec;
+    checked: import("../..").CodecFn<boolean>;
+    disabled: import("../..").CodecFn<boolean>;
+    required: import("../..").CodecFn<boolean>;
+    invalid: import("../..").CodecFn<boolean>;
     placement: import("../../runtime/codecs").OneOfCodec<"leading" | "trailing">;
     variant: import("../../runtime/codecs").OneOfCodec<"default">;
     size: import("../../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "xlg">;
@@ -51,7 +51,7 @@ declare const switchSchema: {
     descriptionClass: import("../../runtime/codecs").StringCodec;
     class: import("../../runtime/codecs").StringCodec;
 };
-type SwitchControlProps = PropState<typeof switchControlSchema>;
-type SwitchProps = PropState<typeof switchSchema>;
+type SwitchControlProps = SchemaToProps<typeof switchControlSchema>;
+type SwitchProps = SchemaToProps<typeof switchSchema>;
 export { SWITCH_PLACEMENTS, SWITCH_SIZES, SWITCH_VARIANTS, switchControlSchema, switchSchema, };
 export type { SwitchPlacement, SwitchControlProps, SwitchProps, SwitchSize, SwitchVariant, };

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

@@ -1,24 +1,19 @@
 import type Alpine from 'alpinejs';
-import { type CleanupStack, type TrellisAlpineComponent } from '../../runtime';
+import { type AlpineMachine, type TrellisAlpineComponent } from '../../runtime';
 import { type SwitchControlProps } from './contract';
-type SwitchItem = {
-    root: HTMLElement;
-    input: HTMLInputElement;
-    track: HTMLElement | null;
-    thumb: HTMLElement | null;
-    disabled: boolean;
-    required: boolean;
-    invalid: boolean;
-};
-type SwitchData = {
-    props: SwitchControlProps;
-    listeners: CleanupStack;
-    input(): HTMLInputElement;
-    item(): SwitchItem;
-    sync(): void;
-    toggleFromEnter(event: KeyboardEvent): void;
+import { switchHooks, type SwitchContext } from './machine';
+/** Public Alpine API for `ui.switch` and `ui.switch.control`. @public */
+interface UiSwitchApi {
+    /** Current settled checked state. */
+    readonly checked: boolean;
+    /** Set and commit the checked state. */
+    setChecked(checked: boolean): void;
+}
+type SwitchData = AlpineMachine<SwitchContext, SwitchControlProps, typeof switchHooks> & UiSwitchApi & {
+    init(): void;
+    destroy(): void;
 };
 declare const UiSwitch: () => TrellisAlpineComponent<SwitchData>;
 declare const registerSwitch: (AlpineInstance: Alpine.Alpine) => void;
 export { registerSwitch, UiSwitch };
-export type { SwitchData, SwitchItem };
+export type { SwitchData, UiSwitchApi };

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

@@ -0,0 +1,19 @@
+import { type Machine, type MachineScope } from '../../runtime/state-machine';
+import type { SwitchControlProps } from './contract';
+type SwitchContext = {
+    selection: {
+        checked: boolean;
+    };
+};
+type SwitchEffects = {
+    sync(scope: MachineScope<SwitchContext, SwitchControlProps>): void;
+    emitInput(scope: MachineScope<SwitchContext, SwitchControlProps>): void;
+    emitChange(scope: MachineScope<SwitchContext, SwitchControlProps>): void;
+};
+declare const switchHooks: readonly [];
+declare const createSwitchMachine: ({ props, effects }: {
+    props: SwitchControlProps;
+    effects: SwitchEffects;
+}) => Machine<SwitchContext, SwitchControlProps>;
+export { createSwitchMachine, switchHooks };
+export type { SwitchContext, SwitchEffects };

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

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