@vireo-ai/trellis-ui 0.1.0

package/types/components/combobox/index.d.ts

@@ -0,0 +1,74 @@
+import type Alpine from 'alpinejs';
+import { type AnchoredPopover, type BindingObject, type TrellisAlpineComponent } from '../../runtime';
+import type { PresenceLifecycle } from '../../motion';
+import { type ComboboxProps } from './contract';
+type PopoverElement = HTMLElement & {
+    showPopover?: () => void;
+    hidePopover?: () => void;
+};
+type ComboboxOption = {
+    el: HTMLElement;
+    id: string;
+    value: string;
+    label: string;
+    disabled: boolean;
+    selected: boolean;
+    visible: boolean;
+};
+type ComboboxData = {
+    isOpen: boolean;
+    query: string;
+    selectedValues: string[];
+    selectedLabels: string[];
+    activeValue: string;
+    inputId: string;
+    listboxId: string;
+    props: ComboboxProps;
+    popover: AnchoredPopover | null;
+    listboxMotion: PresenceLifecycle | null;
+    listeners: Array<() => void>;
+    observer: MutationObserver | null;
+    renderedChipsKey: string;
+    renderedHiddenInputsKey: string;
+    root: BindingObject;
+    control(): HTMLElement;
+    input(): HTMLInputElement;
+    listbox(): PopoverElement;
+    chipsEl(): HTMLElement | null;
+    hiddenInputsEl(): HTMLElement | null;
+    options(): ComboboxOption[];
+    enabledVisibleOptions(): ComboboxOption[];
+    hasSelection(): boolean;
+    hasClearValue(): boolean;
+    open(event?: Event): void;
+    close(event?: Event): void;
+    toggle(event?: Event): void;
+    clear(event?: Event): void;
+    removeValue(value: string): void;
+    selectOption(option: ComboboxOption, event?: Event): void;
+    setActive(option: ComboboxOption | null): void;
+    moveActive(delta: 1 | -1): void;
+    focusFirst(): void;
+    focusLast(): void;
+    handleInput(event: Event): void;
+    handleKeydown(event: KeyboardEvent): void;
+    handleFocusout(event: FocusEvent): void;
+    removeLastValue(event?: Event): void;
+    sync(): void;
+    syncOptions(): void;
+    syncInput(): void;
+    syncControl(): void;
+    syncListbox(): void;
+    syncHiddenInputs(): void;
+    syncChips(): void;
+    syncPosition(): void;
+    mount(): void;
+    unmount(): void;
+    setup(): void;
+    resolveOptionLabel(el: HTMLElement): string;
+    optionValue(el: HTMLElement, label: string): string;
+};
+declare const UiCombobox: () => TrellisAlpineComponent<ComboboxData>;
+declare const registerCombobox: (AlpineInstance: Alpine.Alpine) => void;
+export { registerCombobox, UiCombobox };
+export type { ComboboxData, ComboboxOption };

package/types/components/common.d.ts

@@ -0,0 +1,61 @@
+declare const CONTROL_SIZES: readonly ["xs", "sm", "md", "lg", "xlg"];
+declare const CONTROL_VARIANTS: readonly ["outline", "filled"];
+declare const ICON_VARIANTS: readonly ["outline", "solid", "mini", "micro"];
+declare const BUTTON_TYPES: readonly ["button", "submit", "reset"];
+declare const ALIGNMENTS: readonly ["start", "center", "end"];
+declare const POSITIONS: readonly ["bottom", "top", "left", "right"];
+declare const EDGE_POSITIONS: readonly ["top", "right", "bottom", "left"];
+declare const ORIENTATIONS: readonly ["vertical", "horizontal"];
+declare const INDICATOR_PLACEMENTS: readonly ["leading", "trailing", "center", "top-leading", "top-trailing", "bottom-leading", "bottom-trailing"];
+declare const DEFAULT_VARIANTS: readonly ["default"];
+declare const HEADING_LEVELS: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
+declare const CONTROL_ROOT_CLASSES: string[];
+declare const CONTROL_MULTILINE_ROOT_CLASSES: string[];
+declare const CONTROL_OPEN_CLASSES: string[];
+declare const CONTROL_SIZE_CLASSES: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xlg: string;
+};
+declare const CONTROL_MIN_SIZE_CLASSES: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xlg: string;
+};
+declare const CONTROL_MULTILINE_SIZE_CLASSES: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xlg: string;
+};
+declare const CONTROL_VARIANT_CLASSES: {
+    outline: string;
+    filled: string;
+};
+declare const CONTROL_INPUT_CLASSES: string[];
+declare const CONTROL_ACTION_CLASSES: string[];
+declare const CONTROL_NATIVE_CLASSES: string[];
+declare const POPOVER_SURFACE_CLASSES: string[];
+declare const INTERACTIVE_ITEM_CLASSES: string[];
+declare const INTERACTIVE_SURFACE_CLASSES: string[];
+declare const OPTION_ITEM_CLASSES: (string | string[])[];
+declare const OPTION_ICON_CLASSES = "size-icon shrink-0 fill-current text-current opacity-70";
+declare const OPTION_INDICATOR_CLASSES = "ml-auto size-icon shrink-0 fill-current text-current opacity-0 data-selected:opacity-100";
+type ControlSize = typeof CONTROL_SIZES[number];
+type ControlVariant = typeof CONTROL_VARIANTS[number];
+type IconVariant = typeof ICON_VARIANTS[number];
+type CommonButtonType = typeof BUTTON_TYPES[number];
+type Alignment = typeof ALIGNMENTS[number];
+type Position = typeof POSITIONS[number];
+type EdgePosition = typeof EDGE_POSITIONS[number];
+type Orientation = typeof ORIENTATIONS[number];
+type IndicatorPlacement = typeof INDICATOR_PLACEMENTS[number];
+type DefaultVariant = typeof DEFAULT_VARIANTS[number];
+type HeadingLevel = typeof HEADING_LEVELS[number];
+export { ALIGNMENTS, BUTTON_TYPES, CONTROL_ACTION_CLASSES, CONTROL_INPUT_CLASSES, CONTROL_MIN_SIZE_CLASSES, CONTROL_MULTILINE_ROOT_CLASSES, CONTROL_MULTILINE_SIZE_CLASSES, CONTROL_NATIVE_CLASSES, CONTROL_OPEN_CLASSES, CONTROL_ROOT_CLASSES, CONTROL_SIZES, CONTROL_SIZE_CLASSES, CONTROL_VARIANT_CLASSES, CONTROL_VARIANTS, DEFAULT_VARIANTS, EDGE_POSITIONS, HEADING_LEVELS, ICON_VARIANTS, INDICATOR_PLACEMENTS, INTERACTIVE_ITEM_CLASSES, INTERACTIVE_SURFACE_CLASSES, OPTION_ICON_CLASSES, OPTION_INDICATOR_CLASSES, OPTION_ITEM_CLASSES, ORIENTATIONS, POPOVER_SURFACE_CLASSES, POSITIONS, };
+export type { Alignment, CommonButtonType, ControlSize, ControlVariant, DefaultVariant, EdgePosition, HeadingLevel, IconVariant, IndicatorPlacement, Orientation, Position, };

package/types/components/date-picker/contract.d.ts

@@ -0,0 +1,86 @@
+import { type PropState } from '../../runtime';
+import { type Alignment, type Position } from '../common';
+declare const DATE_PICKER_MODES: readonly ["single", "range"];
+declare const DATE_PICKER_VARIANTS: readonly ["enhanced", "native"];
+declare const DATE_PICKER_MOBILE: readonly ["popover", "modal", "native"];
+declare const DATE_PICKER_CLOSE: readonly ["select", "confirm"];
+declare const DATE_PICKER_COLORS: readonly ["neutral", "accent"];
+declare const DATE_PICKER_PRESETS_POSITIONS: readonly ["left", "right", "top", "bottom"];
+type DatePickerMode = typeof DATE_PICKER_MODES[number];
+type DatePickerVariant = typeof DATE_PICKER_VARIANTS[number];
+type DatePickerMobile = typeof DATE_PICKER_MOBILE[number];
+type DatePickerClose = typeof DATE_PICKER_CLOSE[number];
+type DatePickerColor = typeof DATE_PICKER_COLORS[number];
+type DatePickerPresetsPosition = typeof DATE_PICKER_PRESETS_POSITIONS[number];
+type DatePickerSide = Position;
+type DatePickerAlign = Alignment;
+type DatePickerPreset = {
+    value: string;
+    label: string;
+    start: string;
+    end: string;
+    disabled?: boolean;
+};
+declare const datePickerSchema: {
+    name: import("../../runtime/codecs").StringCodec;
+    value: import("../../runtime/codecs").StringCodec;
+    startName: import("../../runtime/codecs").StringCodec;
+    endName: import("../../runtime/codecs").StringCodec;
+    mode: import("../../runtime/codecs").OneOfCodec<"single" | "range">;
+    placeholder: import("../../runtime/codecs").StringCodec;
+    min: import("../../runtime/codecs").StringCodec;
+    max: import("../../runtime/codecs").StringCodec;
+    today: import("../../runtime/codecs").StringCodec;
+    openTo: import("../../runtime/codecs").StringCodec;
+    forceOpenTo: import("../../runtime/codecs").BoolCodec;
+    months: import("../../runtime/codecs").NumberCodec;
+    firstDayOfWeek: import("../../runtime/codecs").NumberCodec;
+    locale: import("../../runtime/codecs").StringCodec;
+    showOutsideDays: import("../../runtime/codecs").BoolCodec;
+    showWeekNumbers: import("../../runtime/codecs").BoolCodec;
+    fixedWeeks: import("../../runtime/codecs").BoolCodec;
+    selectableHeader: import("../../runtime/codecs").BoolCodec;
+    withToday: import("../../runtime/codecs").BoolCodec;
+    clearable: import("../../runtime/codecs").BoolCodec;
+    disabled: import("../../runtime/codecs").BoolCodec;
+    readonly: import("../../runtime/codecs").BoolCodec;
+    required: import("../../runtime/codecs").BoolCodec;
+    invalid: import("../../runtime/codecs").BoolCodec;
+    side: import("../../runtime/codecs").OneOfCodec<"bottom" | "left" | "right" | "top">;
+    align: import("../../runtime/codecs").OneOfCodec<"end" | "center" | "start">;
+    offset: import("../../runtime/codecs").NumberCodec;
+    gap: import("../../runtime/codecs").NumberCodec;
+    mobile: import("../../runtime/codecs").OneOfCodec<"popover" | "modal" | "native">;
+    variant: import("../../runtime/codecs").OneOfCodec<"enhanced" | "native">;
+    color: import("../../runtime/codecs").OneOfCodec<"neutral" | "accent">;
+    close: import("../../runtime/codecs").OneOfCodec<"select" | "confirm">;
+    presets: import("../../runtime/codecs").JsonCodec<DatePickerPreset[]>;
+    presetsPosition: import("../../runtime/codecs").OneOfCodec<"bottom" | "left" | "right" | "top">;
+    preset: import("../../runtime/codecs").StringCodec;
+    presetName: import("../../runtime/codecs").StringCodec;
+    triggerClass: import("../../runtime/codecs").StringCodec;
+    inputClass: import("../../runtime/codecs").StringCodec;
+    popoverClass: import("../../runtime/codecs").StringCodec;
+    calendarClass: import("../../runtime/codecs").StringCodec;
+    presetsClass: import("../../runtime/codecs").StringCodec;
+    presetClass: import("../../runtime/codecs").StringCodec;
+    class: import("../../runtime/codecs").StringCodec;
+    form: import("../../runtime/codecs").StringCodec;
+};
+declare const datePickerPresetSchema: {
+    value: import("../../runtime/codecs").StringCodec;
+    label: import("../../runtime/codecs").StringCodec;
+    start: import("../../runtime/codecs").StringCodec;
+    end: import("../../runtime/codecs").StringCodec;
+    disabled: import("../../runtime/codecs").BoolCodec;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const datePickerPresetsSchema: {
+    position: import("../../runtime/codecs").OneOfCodec<"bottom" | "left" | "right" | "top">;
+    class: import("../../runtime/codecs").StringCodec;
+};
+type DatePickerProps = PropState<typeof datePickerSchema>;
+type DatePickerPresetProps = PropState<typeof datePickerPresetSchema>;
+type DatePickerPresetsProps = PropState<typeof datePickerPresetsSchema>;
+export { DATE_PICKER_CLOSE, DATE_PICKER_COLORS, DATE_PICKER_MOBILE, DATE_PICKER_MODES, DATE_PICKER_PRESETS_POSITIONS, DATE_PICKER_VARIANTS, datePickerPresetSchema, datePickerPresetsSchema, datePickerSchema, };
+export type { DatePickerAlign, DatePickerClose, DatePickerColor, DatePickerMobile, DatePickerMode, DatePickerPreset, DatePickerPresetProps, DatePickerPresetsPosition, DatePickerPresetsProps, DatePickerProps, DatePickerSide, DatePickerVariant, };

package/types/components/date-picker/index.d.ts

@@ -0,0 +1,70 @@
+import type Alpine from 'alpinejs';
+import { type AnchoredPopover, type BindingObject, type TrellisAlpineComponent } from '../../runtime';
+import type { PresenceLifecycle } from '../../motion';
+import { type DatePickerPreset, type DatePickerProps } from './contract';
+type CalendarElement = HTMLElement & {
+    readonly value: string;
+    focus: (options?: FocusOptions & {
+        target?: 'day' | 'next' | 'previous';
+    }) => void;
+};
+type PopoverElement = HTMLElement & {
+    showPopover?: () => void;
+    hidePopover?: () => void;
+};
+type DatePickerData = {
+    isOpen: boolean;
+    value: string;
+    pendingValue: string;
+    presetValue: string;
+    triggerId: string;
+    popoverId: string;
+    liveMessage: string;
+    props: DatePickerProps;
+    popover: AnchoredPopover | null;
+    popoverMotion: PresenceLifecycle | null;
+    listeners: Array<() => void>;
+    hiddenInputsKey: string;
+    presetInputKey: string;
+    root: BindingObject;
+    trigger(): HTMLElement;
+    input(): HTMLInputElement;
+    toggleButton(): HTMLButtonElement | null;
+    popoverEl(): PopoverElement;
+    calendar(): CalendarElement | null;
+    hiddenInputsEl(): HTMLElement | null;
+    presetInputsEl(): HTMLElement | null;
+    presetItems(): DatePickerPreset[];
+    isRange(): boolean;
+    closeMode(): 'select' | 'confirm';
+    displayValue(): string;
+    effectivePlaceholder(): string;
+    effectiveMonths(): number;
+    open(event?: Event): void;
+    close(event?: Event): void;
+    toggle(event?: Event): void;
+    clear(event?: Event): void;
+    cancel(event?: Event): void;
+    apply(event?: Event): void;
+    commitValue(value: string): void;
+    selectToday(event?: Event): void;
+    selectPreset(el: HTMLElement, event?: Event): void;
+    handleInput(event: Event): void;
+    handleKeydown(event: KeyboardEvent): void;
+    handleCalendarChange(event: Event): void;
+    handleCalendarFocus(event: Event): void;
+    sync(): void;
+    syncControl(): void;
+    syncCalendar(): void;
+    syncCalendarHeading(focusedDate?: string): void;
+    syncTodayButton(): void;
+    syncHiddenInputs(): void;
+    syncPresetInput(): void;
+    syncPresets(): void;
+    syncPosition(): void;
+    setup(): void;
+};
+declare const UiDatePicker: () => TrellisAlpineComponent<DatePickerData>;
+declare const registerDatePicker: (AlpineInstance: Alpine.Alpine) => void;
+export { registerDatePicker, UiDatePicker };
+export type { DatePickerData };

package/types/components/dropdown/contract.d.ts

@@ -0,0 +1,18 @@
+import { type PropState } from '../../runtime';
+import { type Alignment, type Position } from '../common';
+declare const DROPDOWN_SIDES: readonly ["bottom", "top", "left", "right"];
+declare const DROPDOWN_ALIGNS: readonly ["start", "center", "end"];
+type DropdownSide = Position;
+type DropdownAlign = Alignment;
+declare const dropdownSchema: {
+    side: import("../../runtime/codecs").OneOfCodec<"bottom" | "left" | "right" | "top">;
+    align: import("../../runtime/codecs").OneOfCodec<"end" | "center" | "start">;
+    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;
+};
+type DropdownProps = PropState<typeof dropdownSchema>;
+export { DROPDOWN_ALIGNS, DROPDOWN_SIDES, dropdownSchema, };
+export type { DropdownAlign, DropdownSide, DropdownProps };

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

@@ -0,0 +1,53 @@
+import type Alpine from 'alpinejs';
+import { type AnchoredPopover, type BindingObject, type CollectionNavigation, type TrellisAlpineComponent } from '../../runtime';
+import type { PresenceLifecycle } from '../../motion';
+import { type DropdownProps } from './contract';
+type PopoverElement = HTMLElement & {
+    showPopover(): void;
+    hidePopover(): void;
+};
+type DropdownData = {
+    isOpen: boolean;
+    menuMotion: PresenceLifecycle | null;
+    triggerId: string;
+    menuId: string;
+    props: DropdownProps;
+    collection: CollectionNavigation | null;
+    popover: AnchoredPopover | null;
+    triggerCleanup: Array<() => void>;
+    menuCleanup: Array<() => void>;
+    open(event?: Event): void;
+    close(event?: Event): void;
+    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;
+    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;
+};
+declare const UiDropdown: () => TrellisAlpineComponent<DropdownData>;
+declare const registerDropdown: (AlpineInstance: Alpine.Alpine) => void;
+export { registerDropdown, UiDropdown };
+export type { DropdownData };

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

@@ -0,0 +1,67 @@
+import { type PropState } from '../../runtime';
+import { type Orientation } from '../common';
+declare const FIELD_LAYOUTS: readonly ["stack", "grid", "inline"];
+declare const FIELD_GROUP_LAYOUTS: readonly ["stack", "row", "grid"];
+declare const FIELD_ORIENTATIONS: readonly ["vertical", "horizontal"];
+type FieldLayout = typeof FIELD_LAYOUTS[number];
+type FieldGroupLayout = typeof FIELD_GROUP_LAYOUTS[number];
+type FieldOrientation = Orientation;
+declare const fieldSchema: {
+    name: import("../../runtime/codecs").StringCodec;
+    controlId: import("../../runtime/codecs").StringCodec;
+    label: import("../../runtime/codecs").StringCodec;
+    description: import("../../runtime/codecs").StringCodec;
+    descriptionTrailing: import("../../runtime/codecs").StringCodec;
+    error: import("../../runtime/codecs").StringCodec;
+    errors: import("../../runtime/codecs").StringCodec;
+    badge: import("../../runtime/codecs").StringCodec;
+    orientation: import("../../runtime/codecs").OneOfCodec<"vertical" | "horizontal">;
+    layout: import("../../runtime/codecs").OneOfCodec<"grid" | "stack" | "inline">;
+    disabled: import("../../runtime/codecs").BoolCodec;
+    required: import("../../runtime/codecs").BoolCodec;
+    invalid: import("../../runtime/codecs").BoolCodec;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const fieldLabelSchema: {
+    controlId: import("../../runtime/codecs").StringCodec;
+    badge: import("../../runtime/codecs").StringCodec;
+    required: import("../../runtime/codecs").BoolCodec;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const fieldDescriptionSchema: {
+    id: import("../../runtime/codecs").StringCodec;
+    placement: import("../../runtime/codecs").OneOfCodec<"default" | "trailing">;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const fieldErrorSchema: {
+    id: import("../../runtime/codecs").StringCodec;
+    message: import("../../runtime/codecs").StringCodec;
+    errors: import("../../runtime/codecs").StringCodec;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const fieldGroupSchema: {
+    layout: import("../../runtime/codecs").OneOfCodec<"grid" | "stack" | "row">;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const fieldsetSchema: {
+    name: import("../../runtime/codecs").StringCodec;
+    legend: import("../../runtime/codecs").StringCodec;
+    description: import("../../runtime/codecs").StringCodec;
+    error: import("../../runtime/codecs").StringCodec;
+    errors: import("../../runtime/codecs").StringCodec;
+    layout: import("../../runtime/codecs").OneOfCodec<"grid" | "stack" | "inline">;
+    disabled: import("../../runtime/codecs").BoolCodec;
+    required: import("../../runtime/codecs").BoolCodec;
+    invalid: import("../../runtime/codecs").BoolCodec;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const fieldsetLegendSchema: {
+    badge: import("../../runtime/codecs").StringCodec;
+    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 };

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

@@ -0,0 +1,11 @@
+import type Alpine from 'alpinejs';
+import { type CleanupStack, type TrellisAlpineComponent } from '../../runtime';
+type FieldData = {
+    observer: MutationObserver | null;
+    listeners: CleanupStack;
+    sync(): void;
+};
+declare const UiField: () => TrellisAlpineComponent<FieldData>;
+declare const registerField: (AlpineInstance: Alpine.Alpine) => void;
+export { registerField, UiField };
+export type { FieldData };

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

@@ -0,0 +1,60 @@
+import { type PropState } 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"];
+type FileUploadLayout = (typeof FILE_UPLOAD_LAYOUTS)[number];
+type FileUploadPreview = (typeof FILE_UPLOAD_PREVIEWS)[number];
+type FileUploadSize = (typeof FILE_UPLOAD_SIZES)[number];
+declare const fileUploadSchema: {
+    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;
+    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;
+};
+declare const fileUploadDropzoneSchema: {
+    heading: import("../../runtime/codecs").StringCodec;
+    text: import("../../runtime/codecs").StringCodec;
+    icon: import("../../runtime/codecs").StringCodec;
+    layout: import("../../runtime/codecs").OneOfCodec<"stack" | "inline">;
+    size: import("../../runtime/codecs").OneOfCodec<"sm" | "md" | "lg">;
+    disabled: import("../../runtime/codecs").BoolCodec;
+    invalid: import("../../runtime/codecs").BoolCodec;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const fileUploadListSchema: {
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const fileUploadItemSchema: {
+    filename: import("../../runtime/codecs").StringCodec;
+    filesize: import("../../runtime/codecs").StringCodec;
+    mime: import("../../runtime/codecs").StringCodec;
+    preview: import("../../runtime/codecs").StringCodec;
+    icon: import("../../runtime/codecs").StringCodec;
+    invalid: import("../../runtime/codecs").BoolCodec;
+    error: import("../../runtime/codecs").StringCodec;
+    class: import("../../runtime/codecs").StringCodec;
+};
+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, };

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

@@ -0,0 +1,35 @@
+import type Alpine from 'alpinejs';
+import { type CleanupStack, 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;
+    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;
+};
+declare const UiFileUpload: () => TrellisAlpineComponent<FileUploadData>;
+declare const registerFileUpload: (AlpineInstance: Alpine.Alpine) => void;
+export { registerFileUpload, UiFileUpload, };
+export type { FileUploadData, PendingFile };

package/types/components/frame/contract.d.ts

@@ -0,0 +1,60 @@
+import { type PropState } from '../../runtime';
+declare const FRAME_AS_VALUES: readonly ["div", "section", "article", "aside", "main", "nav", "form"];
+declare const FRAME_REGION_AS_VALUES: readonly ["div", "header", "footer", "section", "nav", "form"];
+declare const FRAME_BODY_AS_VALUES: readonly ["div", "section", "main", "form"];
+declare const FRAME_LAYOUTS: readonly ["regions", "stack"];
+declare const FRAME_REGION_LAYOUTS: readonly ["block", "row", "stack", "cluster"];
+declare const FRAME_SPACES: readonly ["0", "1", "2", "3", "4", "5", "6"];
+declare const FRAME_SURFACES: readonly ["none", "app", "subtle", "surface", "raised"];
+declare const FRAME_BORDERS: readonly ["none", "default"];
+declare const FRAME_RADII: readonly ["none", "sm", "md", "lg"];
+declare const FRAME_SHADOWS: readonly ["none", "border", "sm", "md", "lg"];
+declare const FRAME_WIDTHS: readonly ["auto", "full", "xs", "sm", "md", "lg", "xl", "prose"];
+declare const FRAME_HEIGHTS: readonly ["auto", "full", "xs", "sm", "md", "lg", "xl", "prose"];
+declare const FRAME_ALIGNS: readonly ["start", "center", "end", "stretch"];
+declare const FRAME_JUSTIFIES: readonly ["start", "center", "end", "between"];
+declare const frameSchema: {
+    as: import("../../runtime/codecs").OneOfCodec<"article" | "aside" | "div" | "form" | "main" | "nav" | "section">;
+    layout: import("../../runtime/codecs").OneOfCodec<"stack" | "regions">;
+    gap: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6">;
+    surface: import("../../runtime/codecs").OneOfCodec<"none" | "subtle" | "surface" | "app" | "raised">;
+    border: import("../../runtime/codecs").OneOfCodec<"default" | "none">;
+    radius: import("../../runtime/codecs").OneOfCodec<"none" | "sm" | "md" | "lg">;
+    shadow: import("../../runtime/codecs").OneOfCodec<"border" | "none" | "sm" | "md" | "lg">;
+    width: import("../../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "auto" | "xl" | "full" | "prose">;
+    height: import("../../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "auto" | "xl" | "full" | "prose">;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const frameRegionSchema: {
+    as: import("../../runtime/codecs").OneOfCodec<"div" | "footer" | "form" | "header" | "nav" | "section">;
+    padding: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6">;
+    layout: import("../../runtime/codecs").OneOfCodec<"stack" | "block" | "row" | "cluster">;
+    align: import("../../runtime/codecs").OneOfCodec<"end" | "center" | "start" | "stretch">;
+    justify: import("../../runtime/codecs").OneOfCodec<"end" | "center" | "start" | "between">;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const frameBodySchema: {
+    as: import("../../runtime/codecs").OneOfCodec<"div" | "form" | "main" | "section">;
+    padding: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6">;
+    scroll: import("../../runtime/codecs").BoolCodec;
+    class: import("../../runtime/codecs").StringCodec;
+};
+type FrameAs = typeof FRAME_AS_VALUES[number];
+type FrameRegionAs = typeof FRAME_REGION_AS_VALUES[number];
+type FrameBodyAs = typeof FRAME_BODY_AS_VALUES[number];
+type FrameLayout = typeof FRAME_LAYOUTS[number];
+type FrameRegionLayout = typeof FRAME_REGION_LAYOUTS[number];
+type FrameSpace = typeof FRAME_SPACES[number];
+type FrameSurface = typeof FRAME_SURFACES[number];
+type FrameBorder = typeof FRAME_BORDERS[number];
+type FrameRadius = typeof FRAME_RADII[number];
+type FrameShadow = typeof FRAME_SHADOWS[number];
+type FrameWidth = typeof FRAME_WIDTHS[number];
+type FrameHeight = typeof FRAME_HEIGHTS[number];
+type FrameAlign = typeof FRAME_ALIGNS[number];
+type FrameJustify = typeof FRAME_JUSTIFIES[number];
+type FrameProps = PropState<typeof frameSchema>;
+type FrameRegionProps = PropState<typeof frameRegionSchema>;
+type FrameBodyProps = PropState<typeof frameBodySchema>;
+export { FRAME_ALIGNS, FRAME_AS_VALUES, FRAME_BODY_AS_VALUES, FRAME_BORDERS, FRAME_HEIGHTS, FRAME_JUSTIFIES, FRAME_LAYOUTS, FRAME_RADII, FRAME_REGION_AS_VALUES, FRAME_REGION_LAYOUTS, FRAME_SHADOWS, FRAME_SPACES, FRAME_SURFACES, FRAME_WIDTHS, frameBodySchema, frameRegionSchema, frameSchema, };
+export type { FrameAlign, FrameAs, FrameBodyAs, FrameBodyProps, FrameBorder, FrameHeight, FrameJustify, FrameLayout, FrameProps, FrameRadius, FrameRegionAs, FrameRegionLayout, FrameRegionProps, FrameShadow, FrameSpace, FrameSurface, FrameWidth, };

package/types/components/frame/index.d.ts

@@ -0,0 +1,2 @@
+export { FRAME_ALIGNS, FRAME_AS_VALUES, FRAME_BODY_AS_VALUES, FRAME_BORDERS, FRAME_HEIGHTS, FRAME_JUSTIFIES, FRAME_LAYOUTS, FRAME_RADII, FRAME_REGION_AS_VALUES, FRAME_REGION_LAYOUTS, FRAME_SHADOWS, FRAME_SPACES, FRAME_SURFACES, FRAME_WIDTHS, frameBodySchema, frameRegionSchema, frameSchema, } from './contract';
+export type { FrameAlign, FrameAs, FrameBodyAs, FrameBodyProps, FrameBorder, FrameHeight, FrameJustify, FrameLayout, FrameProps, FrameRadius, FrameRegionAs, FrameRegionLayout, FrameRegionProps, FrameShadow, FrameSpace, FrameSurface, FrameWidth, } from './contract';

package/types/components/heading/contract.d.ts

@@ -0,0 +1,8 @@
+declare const HEADING_AS_VALUES: readonly ["div", "h1", "h2", "h3", "h4", "h5", "h6"];
+declare const HEADING_SIZE_VALUES: readonly ["base", "lg", "xl"];
+declare const HEADING_COLOR_VALUES: readonly ["default", "muted", "accent", "inherit"];
+type HeadingAs = typeof HEADING_AS_VALUES[number];
+type HeadingSize = typeof HEADING_SIZE_VALUES[number];
+type HeadingColor = typeof HEADING_COLOR_VALUES[number];
+export { HEADING_AS_VALUES, HEADING_COLOR_VALUES, HEADING_SIZE_VALUES, };
+export type { HeadingAs, HeadingColor, HeadingSize };

package/types/components/image/contract.d.ts

@@ -0,0 +1,19 @@
+import { type PropState } from '../../runtime';
+declare const IMAGE_FITS: readonly ["cover", "contain", "fill", "none", "scale-down"];
+declare const IMAGE_LOADINGS: readonly ["lazy", "eager"];
+declare const IMAGE_DECODINGS: readonly ["async", "sync", "auto"];
+declare const imageSchema: {
+    src: import("../../runtime/codecs").StringCodec;
+    alt: import("../../runtime/codecs").StringCodec;
+    fit: import("../../runtime/codecs").OneOfCodec<"contain" | "fill" | "none" | "cover" | "scale-down">;
+    loading: import("../../runtime/codecs").OneOfCodec<"eager" | "lazy">;
+    decoding: import("../../runtime/codecs").OneOfCodec<"sync" | "auto" | "async">;
+    class: import("../../runtime/codecs").StringCodec;
+    imageClass: import("../../runtime/codecs").StringCodec;
+};
+type ImageFit = typeof IMAGE_FITS[number];
+type ImageLoading = typeof IMAGE_LOADINGS[number];
+type ImageDecoding = typeof IMAGE_DECODINGS[number];
+type ImageProps = PropState<typeof imageSchema>;
+export { IMAGE_DECODINGS, IMAGE_FITS, IMAGE_LOADINGS, imageSchema, };
+export type { ImageDecoding, ImageFit, ImageLoading, ImageProps, };

package/types/components/image/index.d.ts

@@ -0,0 +1 @@
+export { imageSchema } from './contract';