@vireo-ai/trellis-ui 0.1.9 → 0.1.10

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

@@ -1,30 +1,29 @@
-import { type PropState } from '../../runtime';
+import { type SchemaToProps } from '../../runtime';
 import { type LayoutAs } from '../layout';
 declare const CONTAINER_DISPLAYS: readonly ["block", "inline-block", "none"];
 declare const CONTAINER_SIZES: readonly ["none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "prose"];
 declare const CONTAINER_ALIGNS: readonly ["left", "center", "right"];
 declare const containerSchema: {
-    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" | "inline-block">;
-    size: import("../../runtime/codecs").OneOfCodec<"none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "prose" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl">;
+    size: import("../../runtime/codecs").OneOfCodec<"none" | "xs" | "sm" | "md" | "lg" | "xl" | "prose" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl">;
     align: import("../../runtime/codecs").OneOfCodec<"left" | "right" | "center">;
 };
 type ContainerDisplay = typeof CONTAINER_DISPLAYS[number];
 type ContainerSize = typeof CONTAINER_SIZES[number];
 type ContainerAlign = typeof CONTAINER_ALIGNS[number];
-type ContainerProps = PropState<typeof containerSchema>;
+type ContainerProps = SchemaToProps<typeof containerSchema>;
 export { CONTAINER_ALIGNS, CONTAINER_DISPLAYS, CONTAINER_SIZES, containerSchema, };
 export type { ContainerAlign, ContainerDisplay, ContainerProps, ContainerSize, LayoutAs as ContainerAs, };

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

@@ -1,21 +1,23 @@
-import { type PropState } from '../../runtime';
-import { type Alignment, type ComponentRadius, type Position } from '../common';
+import { type SchemaToProps } from '../../runtime';
+import { type Alignment, type ComponentRadius, type ElevationReference, type Position, type SurfaceReference } 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_CLOSE: readonly ["auto", "confirm"];
 declare const DATE_PICKER_COLORS: readonly ["neutral", "accent"];
 declare const DATE_PICKER_RADII: readonly ["none", "xs", "sm", "md", "lg", "full"];
 declare const DATE_PICKER_PRESETS_POSITIONS: readonly ["left", "right", "top", "bottom"];
+declare const DATE_PICKER_SURFACES: readonly ["inherit", "0", "1", "2", "3", "4", "5", "6", "7", "8", "+1", "+2", "+3", "+4", "+5", "+6", "+7", "+8"];
+declare const DATE_PICKER_ELEVATIONS: readonly ["none", "match", "1", "2", "3", "4", "5", "6", "7", "8"];
 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 DatePickerRadius = ComponentRadius;
 type DatePickerPresetsPosition = typeof DATE_PICKER_PRESETS_POSITIONS[number];
 type DatePickerSide = Position;
 type DatePickerAlign = Alignment;
+type DatePickerSurface = SurfaceReference;
+type DatePickerElevation = ElevationReference;
 type DatePickerPreset = {
     value: string;
     label: string;
@@ -38,6 +40,8 @@ declare const datePickerSchema: {
     months: import("../../runtime/codecs").NumberCodec;
     firstDayOfWeek: import("../../runtime/codecs").NumberCodec;
     locale: import("../../runtime/codecs").StringCodec;
+    format: import("../../runtime/codecs").StringCodec;
+    rangeSeparator: import("../../runtime/codecs").StringCodec;
     showOutsideDays: import("../../runtime/codecs").BoolCodec;
     showWeekNumbers: import("../../runtime/codecs").BoolCodec;
     fixedWeeks: import("../../runtime/codecs").BoolCodec;
@@ -48,17 +52,18 @@ declare const datePickerSchema: {
     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">;
+    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;
-    mobile: import("../../runtime/codecs").OneOfCodec<"popover" | "modal" | "native">;
     variant: import("../../runtime/codecs").OneOfCodec<"enhanced" | "native">;
     color: import("../../runtime/codecs").OneOfCodec<"accent" | "neutral">;
     radius: import("../../runtime/codecs").OneOfCodec<"none" | "xs" | "sm" | "md" | "lg" | "full">;
-    close: import("../../runtime/codecs").OneOfCodec<"select" | "confirm">;
+    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">;
+    close: import("../../runtime/codecs").OneOfCodec<"auto" | "confirm">;
     presets: import("../../runtime/codecs").JsonCodec<DatePickerPreset[]>;
-    presetsPosition: import("../../runtime/codecs").OneOfCodec<"bottom" | "left" | "right" | "top">;
+    presetsPosition: import("../../runtime/codecs").OneOfCodec<"top" | "bottom" | "left" | "right">;
     preset: import("../../runtime/codecs").StringCodec;
     presetName: import("../../runtime/codecs").StringCodec;
     triggerClass: import("../../runtime/codecs").StringCodec;
@@ -79,11 +84,11 @@ declare const datePickerPresetSchema: {
     class: import("../../runtime/codecs").StringCodec;
 };
 declare const datePickerPresetsSchema: {
-    position: import("../../runtime/codecs").OneOfCodec<"bottom" | "left" | "right" | "top">;
+    position: import("../../runtime/codecs").OneOfCodec<"top" | "bottom" | "left" | "right">;
     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_RADII, DATE_PICKER_VARIANTS, datePickerPresetSchema, datePickerPresetsSchema, datePickerSchema, };
-export type { DatePickerAlign, DatePickerClose, DatePickerColor, DatePickerMobile, DatePickerMode, DatePickerPreset, DatePickerPresetProps, DatePickerPresetsPosition, DatePickerPresetsProps, DatePickerProps, DatePickerRadius, DatePickerSide, DatePickerVariant, };
+type DatePickerProps = SchemaToProps<typeof datePickerSchema>;
+type DatePickerPresetProps = SchemaToProps<typeof datePickerPresetSchema>;
+type DatePickerPresetsProps = SchemaToProps<typeof datePickerPresetsSchema>;
+export { DATE_PICKER_CLOSE, DATE_PICKER_COLORS, DATE_PICKER_ELEVATIONS, DATE_PICKER_MODES, DATE_PICKER_PRESETS_POSITIONS, DATE_PICKER_RADII, DATE_PICKER_SURFACES, DATE_PICKER_VARIANTS, datePickerPresetSchema, datePickerPresetsSchema, datePickerSchema, };
+export type { DatePickerAlign, DatePickerClose, DatePickerColor, DatePickerElevation, DatePickerMode, DatePickerPreset, DatePickerPresetProps, DatePickerPresetsPosition, DatePickerPresetsProps, DatePickerProps, DatePickerRadius, DatePickerSide, DatePickerSurface, DatePickerVariant, };

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

@@ -1,71 +1,49 @@
 import type Alpine from 'alpinejs';
-import { type AnchoredPopover, type BindingObject, type Machine, 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 = {
+import 'cally';
+import { type AlpineMachine, type TrellisAlpineComponent } from '../../runtime';
+import { type BindingObject } from '../../runtime/merge-bindings';
+import { type DatePickerProps } from './contract';
+import { type DatePickerContext, datePickerHooks } from './machine';
+/**
+ * Public Alpine API for `ui.datePicker`.
+ *
+ * @public
+ */
+interface UiDatePickerApi {
+    /** Whether the picker is opening or fully open. */
     readonly isOpen: boolean;
-    value: string;
-    pendingValue: string;
-    presetValue: string;
-    triggerId: string;
-    popoverId: string;
-    liveMessage: string;
-    props: DatePickerProps;
-    machine: Machine<Record<string, never>>;
-    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;
+    /** Whether the user is editing an uncommitted value. */
+    readonly isEditing: boolean;
+    /** Canonical ISO date or ISO date range. */
+    readonly value: string;
+    /** Canonical value currently staged in confirm mode. */
+    readonly pendingValue: string;
+    /** Identifier of the selected preset, when one matches. */
+    readonly preset: string;
+    /** Opens the calendar unless the picker is disabled or readonly. */
     open(event?: Event): void;
+    /** Closes the calendar and restores focus after keyboard dismissal. */
     close(event?: Event): void;
+    /** Reverses the current disclosure lifecycle. */
     toggle(event?: Event): void;
+    /** Selects a canonical ISO date or ISO range. */
+    select(value: string, event?: Event): void;
+    /** Selects the preset identified by its stable value. */
+    selectPreset(value: string, event?: Event): void;
+    /** Selects the configured today value. */
+    selectToday(event?: Event): void;
+    /** Clears the committed date, preset, and submitted controls. */
     clear(event?: Event): void;
+    /** Discards a pending confirm-mode selection and closes the calendar. */
     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;
+}
+type DatePickerData = AlpineMachine<DatePickerContext, DatePickerProps, typeof datePickerHooks> & UiDatePickerApi & {
+    readonly root: BindingObject;
+    effectivePlaceholder(): string;
+    init(): void;
+    destroy(): void;
 };
 declare const UiDatePicker: () => TrellisAlpineComponent<DatePickerData>;
 declare const registerDatePicker: (AlpineInstance: Alpine.Alpine) => void;
 export { registerDatePicker, UiDatePicker };
-export type { DatePickerData };
+export type { DatePickerData, UiDatePickerApi };