@vireo-ai/trellis-ui 0.1.9 → 0.1.10

package/packages/client/types/components/scroll-area/index.d.ts

@@ -1,16 +1,7 @@
 import type Alpine from 'alpinejs';
-import { type BindingObject, type CleanupStack, type TrellisAlpineComponent } from '../../runtime';
+import { type AlpineMachine, type BindingObject, type TrellisAlpineComponent } from '../../runtime';
 import { type ScrollAreaProps } from './contract';
-type ScrollAxis = 'x' | 'y';
-type DragState = {
-    axis: ScrollAxis;
-    pointerId: number;
-    startPointer: number;
-    startScroll: number;
-    trackLength: number;
-    thumbLength: number;
-    maxScroll: number;
-};
+import { type ScrollAreaContext, scrollAreaHooks } from './machine';
 type ScrollAreaElements = {
     root: HTMLElement;
     viewport: HTMLElement;
@@ -21,48 +12,31 @@ type ScrollAreaElements = {
     horizontalThumb: HTMLElement | null;
     corner: HTMLElement | null;
 };
-type AxisGeometry = {
-    trackLength: number;
-    thumbLength: number;
-    maxOffset: number;
-    maxScroll: number;
-};
-type ScrollAreaData = {
-    props: ScrollAreaProps;
-    listeners: CleanupStack;
-    resizeObserver: ResizeObserver | null;
-    mutationObserver: MutationObserver | null;
-    frame: number;
-    positionFrame: number;
-    fadeTimer: number;
-    isHovered: boolean;
-    isFocused: boolean;
-    isScrolling: boolean;
-    dragging: DragState | null;
-    overflowX: boolean;
-    overflowY: boolean;
-    verticalGeometry: AxisGeometry | null;
-    horizontalGeometry: AxisGeometry | null;
-    root: BindingObject;
+/**
+ * Public Alpine API for `ui.scroll-area`.
+ *
+ * @public
+ */
+interface UiScrollAreaApi {
+    /** Whether content currently overflows the horizontal axis. */
+    readonly overflowX: boolean;
+    /** Whether content currently overflows the vertical axis. */
+    readonly overflowY: boolean;
+    /** Whether the native viewport is in an active scroll session. */
+    readonly isScrolling: boolean;
+    /** Whether a custom scrollbar thumb is being dragged. */
+    readonly isDragging: boolean;
+}
+type ScrollAreaData = AlpineMachine<ScrollAreaContext, ScrollAreaProps, typeof scrollAreaHooks> & UiScrollAreaApi & {
+    readonly root: BindingObject;
+    init(): void;
+    destroy(): void;
     viewport(el: HTMLElement): BindingObject;
     scrollbar(el: HTMLElement): BindingObject;
     thumb(el: HTMLElement): BindingObject;
     corner(el: HTMLElement): BindingObject;
-    elements(): ScrollAreaElements;
-    scheduleSync(): void;
-    schedulePositionSync(): void;
-    sync(): void;
-    updateGeometry(elements: ScrollAreaElements): void;
-    updateThumbPositions(elements: ScrollAreaElements): void;
-    updateVisibility(elements: ScrollAreaElements): void;
-    startFadeTimer(): void;
-    clearFadeTimer(): void;
-    onScroll(): void;
-    onPointerDown(event: PointerEvent, axis: ScrollAxis): void;
-    onPointerMove(event: PointerEvent): void;
-    onPointerUp(event: PointerEvent): void;
 };
 declare const UiScrollArea: () => TrellisAlpineComponent<ScrollAreaData>;
 declare const registerScrollArea: (AlpineInstance: Alpine.Alpine) => void;
-export { registerScrollArea, UiScrollArea, };
-export type { ScrollAreaData, ScrollAreaElements };
+export { registerScrollArea, UiScrollArea };
+export type { ScrollAreaData, ScrollAreaElements, UiScrollAreaApi };

package/packages/client/types/components/scroll-area/machine.d.ts

@@ -0,0 +1,21 @@
+import { type Machine, type MachineScope } from '../../runtime/state-machine';
+import type { ScrollAreaProps } from './contract';
+type ScrollAxis = 'x' | 'y';
+type ScrollAreaContext = {
+    overflow: {
+        x: boolean;
+        y: boolean;
+    };
+};
+type ScrollAreaMachineEffects = {
+    sync(scope: MachineScope<ScrollAreaContext, ScrollAreaProps>): void;
+};
+type CreateScrollAreaMachineOptions = {
+    props: ScrollAreaProps;
+    context: ScrollAreaContext;
+    effects: ScrollAreaMachineEffects;
+};
+declare const scrollAreaHooks: readonly [];
+declare const createScrollAreaMachine: ({ props, context, effects, }: CreateScrollAreaMachineOptions) => Machine<ScrollAreaContext, ScrollAreaProps>;
+export { createScrollAreaMachine, scrollAreaHooks };
+export type { CreateScrollAreaMachineOptions, ScrollAreaContext, ScrollAreaMachineEffects, ScrollAxis, };

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

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

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

@@ -1,27 +1,26 @@
-import { type PropState } from '../../runtime';
+import { type SchemaToProps } from '../../runtime';
 import { type LayoutAs } from '../layout';
 declare const SECTION_DISPLAYS: readonly ["block", "none"];
-declare const SECTION_SIZES: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+declare const SECTION_SIZES: readonly ["0", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "4.5", "5", "5.5", "6", "6.5", "7", "7.5", "8", "8.5", "9", "9.5", "10", "10.5", "11", "11.5", "12"];
 declare const sectionSchema: {
-    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;
     as: import("../../runtime/codecs").OneOfCodec<"article" | "aside" | "div" | "footer" | "form" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul">;
     display: import("../../runtime/codecs").OneOfCodec<"none" | "block">;
-    size: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">;
+    size: 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">;
 };
 type SectionDisplay = typeof SECTION_DISPLAYS[number];
 type SectionSize = typeof SECTION_SIZES[number];
-type SectionProps = PropState<typeof sectionSchema>;
+type SectionProps = SchemaToProps<typeof sectionSchema>;
 export { SECTION_DISPLAYS, SECTION_SIZES, sectionSchema, };
 export type { LayoutAs as SectionAs, SectionDisplay, SectionProps, SectionSize, };

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

@@ -1,5 +1,5 @@
-import { type PropState } from '../../runtime';
-import { type Alignment, type ComponentRadius, type ControlSize, type ControlVariant, type IconVariant, type Position } from '../common';
+import { type SchemaToProps } from '../../runtime';
+import { type Alignment, type ComponentRadius, type ControlSize, type ControlVariant, type ElevationReference, type IconVariant, type Position, type SurfaceReference } from '../common';
 import { BADGE_COLORS, BADGE_VARIANTS, type BadgeColor, type BadgeVariant } from '../badge/contract';
 declare const SELECT_MODES: readonly ["listbox", "combobox", "pillbox", "native"];
 declare const SELECT_VARIANTS: readonly ["outline", "filled"];
@@ -10,6 +10,8 @@ declare const SELECT_ALIGNS: readonly ["start", "center", "end"];
 declare const SELECT_ICON_VARIANTS: readonly ["outline", "solid", "mini", "micro"];
 declare const SELECT_CLEARS: readonly ["stay", "close"];
 declare const SELECT_MARKS: readonly ["check", "checkbox", "none"];
+declare const SELECT_SURFACES: readonly ["inherit", "0", "1", "2", "3", "4", "5", "6", "7", "8", "+1", "+2", "+3", "+4", "+5", "+6", "+7", "+8"];
+declare const SELECT_ELEVATIONS: readonly ["none", "match", "1", "2", "3", "4", "5", "6", "7", "8"];
 type SelectMode = typeof SELECT_MODES[number];
 type SelectVariant = ControlVariant;
 type SelectSize = ControlSize;
@@ -19,21 +21,24 @@ type SelectAlign = Alignment;
 type SelectIconVariant = IconVariant;
 type SelectClear = typeof SELECT_CLEARS[number];
 type SelectMark = typeof SELECT_MARKS[number];
+type SelectSurface = SurfaceReference;
+type SelectElevation = ElevationReference;
 type SelectChipVariant = BadgeVariant;
 type SelectChipColor = BadgeColor;
 declare const selectSchema: {
     name: import("../../runtime/codecs").StringCodec;
     value: import("../../runtime/codecs").StringCodec;
-    values: import("../../runtime/codecs").StringCodec;
+    values: import("../../runtime/codecs").JsonCodec<string[]>;
     placeholder: import("../../runtime/codecs").StringCodec;
-    mode: import("../../runtime/codecs").OneOfCodec<"listbox" | "combobox" | "native" | "pillbox">;
+    mode: import("../../runtime/codecs").OneOfCodec<"native" | "listbox" | "combobox" | "pillbox">;
     multiple: import("../../runtime/codecs").BoolCodec;
     searchable: import("../../runtime/codecs").BoolCodec;
+    creatable: import("../../runtime/codecs").BoolCodec;
     filter: import("../../runtime/codecs").BoolCodec;
     clearable: import("../../runtime/codecs").BoolCodec;
     clear: import("../../runtime/codecs").OneOfCodec<"close" | "stay">;
     suffix: import("../../runtime/codecs").StringCodec;
-    mark: import("../../runtime/codecs").OneOfCodec<"none" | "checkbox" | "check">;
+    mark: import("../../runtime/codecs").OneOfCodec<"none" | "check" | "checkbox">;
     open: import("../../runtime/codecs").BoolCodec;
     disabled: import("../../runtime/codecs").BoolCodec;
     readonly: import("../../runtime/codecs").BoolCodec;
@@ -45,19 +50,18 @@ declare const selectSchema: {
     size: import("../../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "xlg">;
     variant: import("../../runtime/codecs").OneOfCodec<"outline" | "filled">;
     radius: import("../../runtime/codecs").OneOfCodec<"none" | "xs" | "sm" | "md" | "lg" | "full">;
-    side: import("../../runtime/codecs").OneOfCodec<"bottom" | "left" | "right" | "top">;
-    align: import("../../runtime/codecs").OneOfCodec<"end" | "center" | "start">;
+    surface: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "inherit" | "3" | "4" | "5" | "6" | "7" | "8" | "+1" | "+2" | "+3" | "+4" | "+5" | "+6" | "+7" | "+8">;
+    elevation: import("../../runtime/codecs").OneOfCodec<"1" | "match" | "2" | "none" | "3" | "4" | "5" | "6" | "7" | "8">;
+    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;
     empty: import("../../runtime/codecs").StringCodec;
-    searchPlaceholder: import("../../runtime/codecs").StringCodec;
-    searchIcon: import("../../runtime/codecs").StringCodec;
     icon: import("../../runtime/codecs").StringCodec;
     iconTrailing: import("../../runtime/codecs").StringCodec;
     iconVariant: import("../../runtime/codecs").OneOfCodec<"outline" | "solid" | "mini" | "micro">;
     buttonClass: import("../../runtime/codecs").StringCodec;
     inputClass: import("../../runtime/codecs").StringCodec;
-    searchClass: import("../../runtime/codecs").StringCodec;
     listboxClass: import("../../runtime/codecs").StringCodec;
     optionClass: import("../../runtime/codecs").StringCodec;
     chipVariant: import("../../runtime/codecs").OneOfCodec<"outline" | "solid" | "soft" | "surface">;
@@ -86,8 +90,8 @@ declare const selectCreateOptionSchema: {
     value: import("../../runtime/codecs").StringCodec;
     class: import("../../runtime/codecs").StringCodec;
 };
-type SelectProps = PropState<typeof selectSchema>;
-type SelectOptionProps = PropState<typeof selectOptionSchema>;
-type SelectCreateOptionProps = PropState<typeof selectCreateOptionSchema>;
-export { SELECT_ALIGNS, SELECT_CLEARS, BADGE_COLORS as SELECT_CHIP_COLORS, BADGE_VARIANTS as SELECT_CHIP_VARIANTS, SELECT_ICON_VARIANTS, SELECT_MARKS, SELECT_MODES, SELECT_RADII, SELECT_SIDES, SELECT_SIZES, SELECT_VARIANTS, selectCreateOptionSchema, selectOptionSchema, selectSchema, };
-export type { SelectAlign, SelectClear, SelectChipColor, SelectChipVariant, SelectCreateOptionProps, SelectIconVariant, SelectMark, SelectOptionProps, SelectSide, SelectProps, SelectRadius, SelectSize, SelectMode, SelectVariant, };
+type SelectProps = SchemaToProps<typeof selectSchema>;
+type SelectOptionProps = SchemaToProps<typeof selectOptionSchema>;
+type SelectCreateOptionProps = SchemaToProps<typeof selectCreateOptionSchema>;
+export { SELECT_ALIGNS, SELECT_CLEARS, SELECT_ELEVATIONS, BADGE_COLORS as SELECT_CHIP_COLORS, BADGE_VARIANTS as SELECT_CHIP_VARIANTS, SELECT_ICON_VARIANTS, SELECT_MARKS, SELECT_MODES, SELECT_RADII, SELECT_SIDES, SELECT_SIZES, SELECT_SURFACES, SELECT_VARIANTS, selectCreateOptionSchema, selectOptionSchema, selectSchema, };
+export type { SelectAlign, SelectClear, SelectChipColor, SelectChipVariant, SelectCreateOptionProps, SelectElevation, SelectIconVariant, SelectMark, SelectOptionProps, SelectSide, SelectProps, SelectRadius, SelectSize, SelectSurface, SelectMode, SelectVariant, };

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

@@ -1,98 +1,51 @@
 import type Alpine from 'alpinejs';
-import { type AnchoredPopover, type BindingObject, 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 SelectProps } from './contract';
-type PopoverElement = HTMLElement & {
-    showPopover?: () => void;
-    hidePopover?: () => void;
-};
-type SelectOption = {
-    el: HTMLElement;
-    id: string;
-    value: string;
-    label: string;
-    selectedLabel: string;
-    disabled: boolean;
-    selected: boolean;
-    visible: boolean;
-    create: boolean;
-};
-type SelectData = {
+import { type SelectContext, selectHooks } from './machine';
+/**
+ * Public Alpine API for `ui.select`.
+ *
+ * @public
+ */
+interface UiSelectApi {
+    /** Whether the select is opening or fully open. */
     readonly isOpen: boolean;
-    search: string;
-    selectedValues: string[];
-    selectedLabels: string[];
-    activeValue: string;
-    inputSearching: boolean;
-    buttonId: string;
-    inputId: string;
-    listboxId: string;
-    props: SelectProps;
-    machine: Machine<Record<string, never>>;
-    popover: AnchoredPopover | null;
-    popoverMotion: PresenceLifecycle | null;
-    listeners: Array<() => void>;
-    observer: MutationObserver | null;
-    renderedChipsKey: string;
-    renderedHiddenInputsKey: string;
-    root: BindingObject;
-    control(): HTMLElement;
-    trigger(): HTMLElement;
-    input(): HTMLInputElement | null;
-    searchInput(): HTMLInputElement | null;
-    popoverEl(): PopoverElement;
-    listbox(): HTMLElement;
-    chipsEl(): HTMLElement | null;
-    hiddenInputsEl(): HTMLElement | null;
-    options(): SelectOption[];
-    enabledVisibleOptions(): SelectOption[];
-    hasSelection(): boolean;
-    hasClearValue(): boolean;
-    isPillbox(): boolean;
-    controlLayoutMode(): SelectProps['mode'];
-    valuesFromProps(): string[];
-    applyProps(changedKeys?: string[]): void;
-    selectedSummary(): string;
-    openSelect(event?: Event): void;
-    closeSelect(event?: Event): void;
+    /** Whether a searching transition hook is pending. */
+    readonly isSearching: boolean;
+    /** First selected value, or an empty string. */
+    readonly value: string;
+    /** Selected values in committed order. */
+    readonly values: readonly string[];
+    /** Display labels corresponding to the selected values. */
+    readonly selectedLabels: readonly string[];
+    /** Current search query. */
+    readonly search: string;
+    /** Value of the currently highlighted option. */
+    readonly activeValue: string;
+    /** Opens the listbox unless the select is disabled or readonly. */
+    open(event?: Event): void;
+    /** Closes the listbox. Keyboard dismissal restores focus to the trigger. */
+    close(event?: Event): void;
+    /** Reverses the current disclosure lifecycle. */
     toggle(event?: Event): void;
-    clear(event?: Event): void;
-    select(valueOrOption: string | SelectOption, event?: Event): void;
+    /** Selects the rendered option with this value. */
+    select(value: string, event?: Event): void;
+    /** Removes a selected value. */
     deselect(value: string, event?: Event): void;
-    removeLastValue(event?: Event): void;
-    setSearch(value: string): void;
-    refreshOptions(): void;
-    selectOption(option: SelectOption, event?: Event): void;
-    setActive(option: SelectOption | null): void;
-    moveActive(delta: 1 | -1): void;
-    focusFirst(): void;
-    focusLast(): void;
-    handleSearchInput(event: Event): void;
-    handleInput(event: Event): void;
-    handleKeydown(event: KeyboardEvent): void;
-    handleFocusout(event: FocusEvent): void;
-    sync(): void;
-    syncRoot(): void;
-    syncControl(): void;
-    syncTrigger(): void;
-    syncInputs(): void;
-    syncListbox(): void;
-    syncClosedState(): void;
-    syncOptions(): void;
-    syncChips(): void;
-    syncHiddenInputs(): void;
-    mount(): void;
-    unmount(): void;
-    exitPopover(): void;
-    finishClose(): void;
-    setup(): void;
-    selectedOption(): SelectOption | null;
-    selectedContent(option: SelectOption): DocumentFragment;
-    resolveOptionLabel(el: HTMLElement): string;
-    resolveSelectedLabel(el: HTMLElement, label: string): string;
-    optionValue(el: HTMLElement, label: string): string;
+    /** Selects every rendered, visible, enabled option in multiple mode. */
+    selectAll(event?: Event): void;
+    /** Clears search, selection, highlight, and submitted values. */
+    clear(event?: Event): void;
+    /** Sets the query and enters the searching feature state. */
+    setSearch(query: string): void;
+}
+type SelectData = AlpineMachine<SelectContext, SelectProps, typeof selectHooks> & UiSelectApi & {
+    readonly root: BindingObject;
+    init(): void;
+    destroy(): void;
 };
 declare const UiSelect: () => TrellisAlpineComponent<SelectData>;
 declare const registerSelect: (AlpineInstance: Alpine.Alpine) => void;
 export { registerSelect, UiSelect };
-export type { SelectData, SelectOption };
+export type { SelectData, UiSelectApi };