@vireo-ai/trellis-ui 0.1.0

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

@@ -0,0 +1,92 @@
+import type Alpine from 'alpinejs';
+import { type AnchoredPopover, type BindingObject, type TrellisAlpineComponent } from '../../runtime';
+import type { PresenceLifecycle } from '../../motion';
+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 = {
+    isOpen: boolean;
+    search: string;
+    selectedValues: string[];
+    selectedLabels: string[];
+    activeValue: string;
+    inputSearching: boolean;
+    buttonId: string;
+    inputId: string;
+    listboxId: string;
+    props: SelectProps;
+    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'];
+    selectedSummary(): string;
+    openSelect(event?: Event): void;
+    closeSelect(event?: Event): void;
+    toggle(event?: Event): void;
+    clear(event?: Event): void;
+    select(valueOrOption: string | SelectOption, event?: Event): void;
+    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;
+    syncOptions(): void;
+    syncChips(): void;
+    syncHiddenInputs(): void;
+    mount(): void;
+    unmount(): 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;
+};
+declare const UiSelect: () => TrellisAlpineComponent<SelectData>;
+declare const registerSelect: (AlpineInstance: Alpine.Alpine) => void;
+export { registerSelect, UiSelect };
+export type { SelectData, SelectOption };

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

@@ -0,0 +1,7 @@
+import { type Orientation } from '../common';
+declare const SEPARATOR_ORIENTATION_VALUES: readonly ["vertical", "horizontal"];
+declare const SEPARATOR_VARIANTS: readonly ["default", "subtle"];
+type SeparatorOrientation = Orientation;
+type SeparatorVariant = typeof SEPARATOR_VARIANTS[number];
+export { SEPARATOR_ORIENTATION_VALUES, SEPARATOR_VARIANTS };
+export type { SeparatorOrientation, SeparatorVariant };

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

@@ -0,0 +1,66 @@
+import { type PropState } from '../../runtime';
+declare const SIDEBAR_SIDES: readonly ["left", "right"];
+declare const SIDEBAR_COLLAPSES: readonly ["none", "mobile", "desktop", "both"];
+declare const SIDEBAR_TOGGLE_ACTIONS: readonly ["toggle", "open", "close", "stash", "expand"];
+declare const SIDEBAR_ITEM_AS: readonly ["a", "button"];
+declare const SIDEBAR_ITEM_VARIANTS: readonly ["ghost", "surface"];
+declare const SIDEBAR_ITEM_COLORS: readonly ["neutral", "accent"];
+declare const sidebarSchema: {
+    id: import("../../runtime/codecs").StringCodec;
+    side: import("../../runtime/codecs").OneOfCodec<"left" | "right">;
+    sticky: import("../../runtime/codecs").BoolCodec;
+    collapse: import("../../runtime/codecs").OneOfCodec<"none" | "mobile" | "both" | "desktop">;
+    open: import("../../runtime/codecs").BoolCodec;
+    stashed: import("../../runtime/codecs").BoolCodec;
+    persist: import("../../runtime/codecs").BoolCodec;
+    width: import("../../runtime/codecs").StringCodec;
+    minWidth: import("../../runtime/codecs").StringCodec;
+    maxWidth: import("../../runtime/codecs").StringCodec;
+    mobile: import("../../runtime/codecs").StringCodec;
+    breakpoint: import("../../runtime/codecs").StringCodec;
+    edgeReveal: import("../../runtime/codecs").BoolCodec;
+    resizable: import("../../runtime/codecs").BoolCodec;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const sidebarItemSchema: {
+    as: import("../../runtime/codecs").OneOfCodec<"button" | "a">;
+    variant: import("../../runtime/codecs").OneOfCodec<"ghost" | "surface">;
+    color: import("../../runtime/codecs").OneOfCodec<"neutral" | "accent">;
+    href: import("../../runtime/codecs").StringCodec;
+    current: import("../../runtime/codecs").BoolCodec;
+    disabled: import("../../runtime/codecs").BoolCodec;
+    icon: import("../../runtime/codecs").StringCodec;
+    iconTrailing: import("../../runtime/codecs").StringCodec;
+    badge: import("../../runtime/codecs").StringCodec;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const sidebarGroupSchema: {
+    heading: import("../../runtime/codecs").StringCodec;
+    expandable: import("../../runtime/codecs").BoolCodec;
+    expanded: import("../../runtime/codecs").BoolCodec;
+    icon: import("../../runtime/codecs").StringCodec;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const sidebarToggleSchema: {
+    target: import("../../runtime/codecs").StringCodec;
+    icon: import("../../runtime/codecs").StringCodec;
+    label: import("../../runtime/codecs").StringCodec;
+    action: import("../../runtime/codecs").OneOfCodec<"close" | "toggle" | "open" | "stash" | "expand">;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const sidebarPanelSchema: {
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const sidebarNavSchema: {
+    label: import("../../runtime/codecs").StringCodec;
+    labelled: import("../../runtime/codecs").StringCodec;
+    class: import("../../runtime/codecs").StringCodec;
+};
+type SidebarProps = PropState<typeof sidebarSchema>;
+type SidebarToggleAction = typeof SIDEBAR_TOGGLE_ACTIONS[number];
+type SidebarCollapse = typeof SIDEBAR_COLLAPSES[number];
+type SidebarItemColor = typeof SIDEBAR_ITEM_COLORS[number];
+type SidebarItemVariant = typeof SIDEBAR_ITEM_VARIANTS[number];
+type SidebarSide = typeof SIDEBAR_SIDES[number];
+export { SIDEBAR_COLLAPSES, SIDEBAR_ITEM_AS, SIDEBAR_ITEM_COLORS, SIDEBAR_ITEM_VARIANTS, SIDEBAR_SIDES, SIDEBAR_TOGGLE_ACTIONS, sidebarGroupSchema, sidebarItemSchema, sidebarNavSchema, sidebarPanelSchema, sidebarSchema, sidebarToggleSchema, };
+export type { SidebarCollapse, SidebarItemColor, SidebarItemVariant, SidebarProps, SidebarSide, SidebarToggleAction };

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

@@ -0,0 +1,106 @@
+import type Alpine from 'alpinejs';
+import { type BindingObject, type CleanupStack, type PropState, type TrellisAlpineComponent } from '../../runtime';
+import type { PresenceLifecycle, PresencePhase } from '../../motion';
+import { type SidebarProps, type SidebarToggleAction } from './contract';
+type SidebarController = {
+    readonly id: string;
+    isExpanded(): boolean;
+    perform(action: SidebarToggleAction, trigger?: HTMLElement | null): void;
+    syncToggles(): void;
+};
+declare const togglePropsSchema: {
+    target: import("../../runtime/codecs").StringCodec;
+    action: import("../../runtime/codecs").OneOfCodec<"close" | "toggle" | "open" | "stash" | "expand">;
+    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 SidebarData = SidebarController & {
+    props: SidebarProps;
+    mobileOpen: boolean;
+    desktopStashed: boolean;
+    desktopDrawerOpen: boolean;
+    drawerExiting: boolean;
+    sidebarExiting: boolean;
+    sidebarExitFreezeCleanup: (() => void) | null;
+    drawerMotionRun: number;
+    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;
+    root: BindingObject;
+    isDesktop(): boolean;
+    isMobileCollapsible(): boolean;
+    isDesktopCollapsible(): boolean;
+    hasOpenDrawer(): boolean;
+    isExpanded(): boolean;
+    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;
+};
+declare const UiSidebar: () => TrellisAlpineComponent<SidebarData>;
+declare const UiSidebarToggle: () => TrellisAlpineComponent<{
+    props: SidebarToggleProps;
+    root: BindingObject;
+    targetId(): string;
+    trigger(event?: Event): void;
+}>;
+declare const UiSidebarEdge: () => TrellisAlpineComponent<{
+    props: SidebarEdgeProps;
+    root: BindingObject;
+    targetId(): string;
+    trigger(event?: Event): void;
+}>;
+declare const registerSidebar: (AlpineInstance: Alpine.Alpine) => void;
+export { registerSidebar, UiSidebar, UiSidebarEdge, UiSidebarToggle, };
+export type { SidebarController, SidebarData };

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

@@ -0,0 +1,56 @@
+import { type PropState } 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"];
+declare const SLIDER_ORIENTATIONS: readonly ["vertical", "horizontal"];
+declare const SLIDER_FORMATS: readonly ["number", "percent"];
+type SliderSize = ControlSize;
+type SliderVariant = DefaultVariant;
+type SliderOrientation = Orientation;
+type SliderFormat = typeof SLIDER_FORMATS[number];
+declare const sliderSchema: {
+    name: import("../../runtime/codecs").StringCodec;
+    value: import("../../runtime/codecs").StringCodec;
+    defaultValue: import("../../runtime/codecs").StringCodec;
+    min: import("../../runtime/codecs").NumberCodec;
+    max: import("../../runtime/codecs").NumberCodec;
+    step: import("../../runtime/codecs").NumberCodec;
+    bigStep: import("../../runtime/codecs").NumberCodec;
+    minStepsBetween: import("../../runtime/codecs").NumberCodec;
+    range: import("../../runtime/codecs").BoolCodec;
+    orientation: import("../../runtime/codecs").OneOfCodec<"vertical" | "horizontal">;
+    size: import("../../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "xlg">;
+    variant: import("../../runtime/codecs").OneOfCodec<"default">;
+    disabled: import("../../runtime/codecs").BoolCodec;
+    required: import("../../runtime/codecs").BoolCodec;
+    invalid: import("../../runtime/codecs").BoolCodec;
+    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;
+    valueText: import("../../runtime/codecs").StringCodec;
+    lowerLabel: import("../../runtime/codecs").StringCodec;
+    upperLabel: import("../../runtime/codecs").StringCodec;
+    lowerValueText: import("../../runtime/codecs").StringCodec;
+    upperValueText: import("../../runtime/codecs").StringCodec;
+    showValue: import("../../runtime/codecs").BoolCodec;
+    format: import("../../runtime/codecs").OneOfCodec<"number" | "percent">;
+    fieldClass: import("../../runtime/codecs").StringCodec;
+    rootClass: import("../../runtime/codecs").StringCodec;
+    trackClass: import("../../runtime/codecs").StringCodec;
+    rangeClass: import("../../runtime/codecs").StringCodec;
+    thumbClass: import("../../runtime/codecs").StringCodec;
+    tickClass: import("../../runtime/codecs").StringCodec;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const sliderTickSchema: {
+    value: import("../../runtime/codecs").NumberCodec;
+    label: import("../../runtime/codecs").StringCodec;
+    class: import("../../runtime/codecs").StringCodec;
+};
+type SliderProps = PropState<typeof sliderSchema>;
+type SliderTickProps = PropState<typeof sliderTickSchema>;
+export { SLIDER_FORMATS, SLIDER_ORIENTATIONS, SLIDER_SIZES, SLIDER_VARIANTS, sliderSchema, sliderTickSchema, };
+export type { SliderFormat, SliderOrientation, SliderProps, SliderSize, SliderTickProps, SliderVariant, };

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

@@ -0,0 +1,40 @@
+import type Alpine from 'alpinejs';
+import { type CleanupStack, type TrellisAlpineComponent } from '../../runtime';
+import { type SliderProps } from './contract';
+type SliderThumbName = 'single' | 'lower' | 'upper';
+type SliderElements = {
+    root: HTMLElement;
+    track: HTMLElement | null;
+    range: HTMLElement | null;
+    lowerInput: HTMLInputElement | null;
+    upperInput: HTMLInputElement | null;
+    singleInput: HTMLInputElement | null;
+    lowerThumb: HTMLElement | null;
+    upperThumb: HTMLElement | null;
+    singleThumb: HTMLElement | null;
+    value: HTMLElement | null;
+    hiddenInputs: HTMLElement | null;
+    ticks: HTMLElement[];
+};
+type SliderValues = {
+    lower: number;
+    upper: number;
+};
+type SliderData = {
+    props: SliderProps;
+    listeners: CleanupStack;
+    hiddenInputsKey: string;
+    draggingThumb: SliderThumbName | null;
+    elements(): SliderElements;
+    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;
+};
+declare const UiSlider: () => TrellisAlpineComponent<SliderData>;
+declare const registerSlider: (AlpineInstance: Alpine.Alpine) => void;
+export { registerSlider, UiSlider };
+export type { SliderData, SliderElements, SliderThumbName, SliderValues };

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

@@ -0,0 +1,57 @@
+import { type PropState } 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"];
+declare const SWITCH_VARIANTS: readonly ["default"];
+type SwitchPlacement = typeof SWITCH_PLACEMENTS[number];
+type SwitchSize = ControlSize;
+type SwitchVariant = DefaultVariant;
+declare const switchControlSchema: {
+    value: import("../../runtime/codecs").StringCodec;
+    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;
+    placement: import("../../runtime/codecs").OneOfCodec<"leading" | "trailing">;
+    variant: import("../../runtime/codecs").OneOfCodec<"default">;
+    size: import("../../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "xlg">;
+    inputClass: import("../../runtime/codecs").StringCodec;
+    trackClass: import("../../runtime/codecs").StringCodec;
+    thumbClass: import("../../runtime/codecs").StringCodec;
+    contentClass: import("../../runtime/codecs").StringCodec;
+    labelClass: import("../../runtime/codecs").StringCodec;
+    descriptionClass: import("../../runtime/codecs").StringCodec;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const switchSchema: {
+    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;
+    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;
+    placement: import("../../runtime/codecs").OneOfCodec<"leading" | "trailing">;
+    variant: import("../../runtime/codecs").OneOfCodec<"default">;
+    size: import("../../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "xlg">;
+    inputClass: import("../../runtime/codecs").StringCodec;
+    trackClass: import("../../runtime/codecs").StringCodec;
+    thumbClass: import("../../runtime/codecs").StringCodec;
+    contentClass: import("../../runtime/codecs").StringCodec;
+    labelClass: import("../../runtime/codecs").StringCodec;
+    descriptionClass: import("../../runtime/codecs").StringCodec;
+    class: import("../../runtime/codecs").StringCodec;
+};
+type SwitchControlProps = PropState<typeof switchControlSchema>;
+type SwitchProps = PropState<typeof switchSchema>;
+export { SWITCH_PLACEMENTS, SWITCH_SIZES, SWITCH_VARIANTS, switchControlSchema, switchSchema, };
+export type { SwitchPlacement, SwitchControlProps, SwitchProps, SwitchSize, SwitchVariant, };

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

@@ -0,0 +1,24 @@
+import type Alpine from 'alpinejs';
+import { type CleanupStack, 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;
+};
+declare const UiSwitch: () => TrellisAlpineComponent<SwitchData>;
+declare const registerSwitch: (AlpineInstance: Alpine.Alpine) => void;
+export { registerSwitch, UiSwitch };
+export type { SwitchData, SwitchItem };

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

@@ -0,0 +1,99 @@
+import { type PropState } from '../../runtime';
+declare const TABLE_LAYOUTS: readonly ["auto", "fixed"];
+declare const TABLE_DENSITIES: readonly ["compact", "default", "comfortable"];
+declare const TABLE_VARIANTS: readonly ["ghost", "surface"];
+declare const TABLE_BORDERS: readonly ["none", "row", "grid"];
+declare const TABLE_WIDTHS: readonly ["auto", "full"];
+declare const TABLE_ALIGNS: readonly ["start", "center", "end"];
+declare const TABLE_VALIGNS: readonly ["top", "middle", "bottom", "baseline"];
+declare const TABLE_SORTS: readonly ["none", "ascending", "descending", "other"];
+declare const TABLE_COLUMN_SCOPES: readonly ["col", "colgroup"];
+declare const TABLE_ROW_HEADER_SCOPES: readonly ["row", "rowgroup"];
+declare const TABLE_FILTER_AS_VALUES: readonly ["div", "form"];
+declare const tableSchema: {
+    layout: import("../../runtime/codecs").OneOfCodec<"fixed" | "auto">;
+    density: import("../../runtime/codecs").OneOfCodec<"default" | "compact" | "comfortable">;
+    variant: import("../../runtime/codecs").OneOfCodec<"ghost" | "surface">;
+    border: import("../../runtime/codecs").OneOfCodec<"grid" | "none" | "row">;
+    zebra: import("../../runtime/codecs").BoolCodec;
+    hover: import("../../runtime/codecs").BoolCodec;
+    stickyHeader: import("../../runtime/codecs").BoolCodec;
+    nowrap: import("../../runtime/codecs").BoolCodec;
+    width: import("../../runtime/codecs").OneOfCodec<"auto" | "full">;
+    class: import("../../runtime/codecs").StringCodec;
+    tableClass: import("../../runtime/codecs").StringCodec;
+};
+declare const tableCaptionSchema: {
+    side: import("../../runtime/codecs").OneOfCodec<"bottom" | "top">;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const tableSectionSchema: {
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const tableRowSchema: {
+    selected: import("../../runtime/codecs").BoolCodec;
+    current: import("../../runtime/codecs").BoolCodec;
+    disabled: import("../../runtime/codecs").BoolCodec;
+    interactive: import("../../runtime/codecs").BoolCodec;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const tableColumnSchema: {
+    align: import("../../runtime/codecs").OneOfCodec<"end" | "center" | "start">;
+    valign: import("../../runtime/codecs").OneOfCodec<"bottom" | "top" | "middle" | "baseline">;
+    key: import("../../runtime/codecs").StringCodec;
+    target: import("../../runtime/codecs").StringCodec;
+    width: import("../../runtime/codecs").StringCodec;
+    resizable: import("../../runtime/codecs").BoolCodec;
+    minWidth: import("../../runtime/codecs").StringCodec;
+    maxWidth: import("../../runtime/codecs").StringCodec;
+    sortable: import("../../runtime/codecs").BoolCodec;
+    sort: import("../../runtime/codecs").OneOfCodec<"none" | "ascending" | "descending" | "other">;
+    abbr: import("../../runtime/codecs").StringCodec;
+    scope: import("../../runtime/codecs").OneOfCodec<"col" | "colgroup">;
+    class: import("../../runtime/codecs").StringCodec;
+    contentClass: import("../../runtime/codecs").StringCodec;
+    resizeHandleClass: import("../../runtime/codecs").StringCodec;
+};
+declare const tableColumnFilterSchema: {
+    as: import("../../runtime/codecs").OneOfCodec<"div" | "form">;
+    id: import("../../runtime/codecs").StringCodec;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const tableRowHeaderSchema: {
+    align: import("../../runtime/codecs").OneOfCodec<"end" | "center" | "start">;
+    valign: import("../../runtime/codecs").OneOfCodec<"bottom" | "top" | "middle" | "baseline">;
+    scope: import("../../runtime/codecs").OneOfCodec<"row" | "rowgroup">;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const tableCellSchema: {
+    align: import("../../runtime/codecs").OneOfCodec<"end" | "center" | "start">;
+    valign: import("../../runtime/codecs").OneOfCodec<"bottom" | "top" | "middle" | "baseline">;
+    class: import("../../runtime/codecs").StringCodec;
+};
+declare const tableEmptySchema: {
+    colspan: import("../../runtime/codecs").StringCodec;
+    class: import("../../runtime/codecs").StringCodec;
+    cellClass: import("../../runtime/codecs").StringCodec;
+};
+type TableLayout = typeof TABLE_LAYOUTS[number];
+type TableDensity = typeof TABLE_DENSITIES[number];
+type TableVariant = typeof TABLE_VARIANTS[number];
+type TableBorder = typeof TABLE_BORDERS[number];
+type TableWidth = typeof TABLE_WIDTHS[number];
+type TableAlign = typeof TABLE_ALIGNS[number];
+type TableValign = typeof TABLE_VALIGNS[number];
+type TableSort = typeof TABLE_SORTS[number];
+type TableColumnScope = typeof TABLE_COLUMN_SCOPES[number];
+type TableRowHeaderScope = typeof TABLE_ROW_HEADER_SCOPES[number];
+type TableFilterAs = typeof TABLE_FILTER_AS_VALUES[number];
+type TableProps = PropState<typeof tableSchema>;
+type TableCaptionProps = PropState<typeof tableCaptionSchema>;
+type TableSectionProps = PropState<typeof tableSectionSchema>;
+type TableRowProps = PropState<typeof tableRowSchema>;
+type TableColumnProps = PropState<typeof tableColumnSchema>;
+type TableColumnFilterProps = PropState<typeof tableColumnFilterSchema>;
+type TableRowHeaderProps = PropState<typeof tableRowHeaderSchema>;
+type TableCellProps = PropState<typeof tableCellSchema>;
+type TableEmptyProps = PropState<typeof tableEmptySchema>;
+export { TABLE_ALIGNS, TABLE_BORDERS, TABLE_COLUMN_SCOPES, TABLE_DENSITIES, TABLE_FILTER_AS_VALUES, TABLE_LAYOUTS, TABLE_ROW_HEADER_SCOPES, TABLE_SORTS, TABLE_VALIGNS, TABLE_VARIANTS, TABLE_WIDTHS, tableCaptionSchema, tableCellSchema, tableColumnFilterSchema, tableColumnSchema, tableEmptySchema, tableRowHeaderSchema, tableRowSchema, tableSchema, tableSectionSchema, };
+export type { TableAlign, TableBorder, TableCaptionProps, TableCellProps, TableColumnFilterProps, TableColumnProps, TableColumnScope, TableDensity, TableEmptyProps, TableFilterAs, TableLayout, TableProps, TableRowHeaderProps, TableRowHeaderScope, TableRowProps, TableSectionProps, TableSort, TableValign, TableVariant, TableWidth, };

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

@@ -0,0 +1,2 @@
+export { TABLE_ALIGNS, TABLE_BORDERS, TABLE_COLUMN_SCOPES, TABLE_DENSITIES, TABLE_FILTER_AS_VALUES, TABLE_LAYOUTS, TABLE_ROW_HEADER_SCOPES, TABLE_SORTS, TABLE_VALIGNS, TABLE_VARIANTS, TABLE_WIDTHS, tableCaptionSchema, tableCellSchema, tableColumnFilterSchema, tableColumnSchema, tableEmptySchema, tableRowHeaderSchema, tableRowSchema, tableSchema, tableSectionSchema, } from './contract';
+export type { TableAlign, TableBorder, TableCaptionProps, TableCellProps, TableColumnFilterProps, TableColumnProps, TableColumnScope, TableDensity, TableEmptyProps, TableFilterAs, TableLayout, TableProps, TableRowHeaderProps, TableRowHeaderScope, TableRowProps, TableSectionProps, TableSort, TableValign, TableVariant, TableWidth, } from './contract';

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

@@ -0,0 +1,25 @@
+import { type PropState } from '../../runtime';
+import { type Orientation } from '../common';
+declare const TABS_ACTIVATIONS: readonly ["manual", "automatic"];
+declare const TABS_ORIENTATIONS: readonly ["vertical", "horizontal"];
+declare const TABS_LIST_ORIENTATIONS: readonly ["inherit", "vertical", "horizontal"];
+declare const TABS_VARIANTS: readonly ["subtle", "line", "segmented", "pills"];
+declare const TABS_SIZES: readonly ["sm", "md"];
+declare const tabsSchema: {
+    id: import("../../runtime/codecs").StringCodec;
+    defaultValue: import("../../runtime/codecs").StringCodec;
+    value: import("../../runtime/codecs").StringCodec;
+    activation: import("../../runtime/codecs").OneOfCodec<"manual" | "automatic">;
+    orientation: import("../../runtime/codecs").OneOfCodec<"vertical" | "horizontal">;
+    loop: import("../../runtime/codecs").BoolCodec;
+    panels: import("../../runtime/codecs").StringCodec;
+    class: import("../../runtime/codecs").StringCodec;
+};
+type TabsActivation = typeof TABS_ACTIVATIONS[number];
+type TabsOrientation = Orientation;
+type TabsListOrientation = typeof TABS_LIST_ORIENTATIONS[number];
+type TabsVariant = typeof TABS_VARIANTS[number];
+type TabsSize = typeof TABS_SIZES[number];
+type TabsProps = PropState<typeof tabsSchema>;
+export { TABS_ACTIVATIONS, TABS_LIST_ORIENTATIONS, TABS_ORIENTATIONS, TABS_SIZES, TABS_VARIANTS, tabsSchema, };
+export type { TabsActivation, TabsListOrientation, TabsOrientation, TabsProps, TabsSize, TabsVariant, };

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

@@ -0,0 +1,60 @@
+import type Alpine from 'alpinejs';
+import { type BindingObject, type CollectionNavigation, type TrellisAlpineComponent } from '../../runtime';
+import { type TabsOrientation, type TabsProps, type TabsVariant, type TabsSize } from './contract';
+type TabsTabElement = HTMLButtonElement | HTMLAnchorElement;
+type TabsItem = {
+    tab: TabsTabElement;
+    value: string;
+    isDisabled: boolean;
+    panel: HTMLElement | null;
+};
+type TabsChangeDetail = {
+    value: string;
+};
+type TabsActivateDetail = {
+    value: string;
+    panelId: string;
+};
+type TabsData = {
+    props: TabsProps;
+    activeValue: string;
+    collection: CollectionNavigation | null;
+    cleanup: Array<() => void>;
+    root: BindingObject;
+    owner(): string;
+    lists(): HTMLElement[];
+    primaryList(): HTMLElement | null;
+    listVariant(): TabsVariant;
+    listSize(): TabsSize;
+    listOrientation(list?: HTMLElement | null): TabsOrientation;
+    tabs(): TabsItem[];
+    panels(): HTMLElement[];
+    panelForValue(value: string): HTMLElement | null;
+    initialValue(): string;
+    fallbackValue(): string;
+    setActiveValue(value: string, tab?: TabsTabElement): void;
+    syncAll(): void;
+    syncRoot(): void;
+    syncList(list: HTMLElement): void;
+    syncTab(item: TabsItem): void;
+    syncPanel(panel: HTMLElement): void;
+    setupEvents(): void;
+    teardown(): void;
+    tabFromEvent(event: Event): TabsTabElement | null;
+    itemFromTab(tab: TabsTabElement): TabsItem | null;
+    collectionNav(): CollectionNavigation;
+    handleClick(event: Event): void;
+    handleFocus(event: Event): void;
+    handleKeydown(event: KeyboardEvent): void;
+    focusNext(): void;
+    focusPrevious(): void;
+    focusFirst(): void;
+    focusLast(): void;
+    activateFocused(): void;
+    dispatchChange(): void;
+    dispatchActivate(tab: TabsTabElement, panel: HTMLElement | null): void;
+};
+declare const UiTabs: () => TrellisAlpineComponent<TabsData>;
+declare const registerTabs: (AlpineInstance: Alpine.Alpine) => void;
+export { registerTabs, UiTabs, };
+export type { TabsActivateDetail, TabsChangeDetail, TabsData, TabsItem };