@auvyx/ui 0.0.0-stage → 0.1.0

package/dist/types/elements.d.ts

@@ -0,0 +1,262 @@
+// Generated from packages/elements/api.mjs by packages/ui/tools/types.mjs. Do not edit.
+
+export interface AuvyxToastOptions {
+  category?: 'success' | 'error' | 'info' | 'warning';
+  title?: string;
+  description?: string;
+  /** Treat title, description and labels as HTML instead of text. */
+  html?: boolean;
+  action?: { label: string; href?: string; onclick?: string };
+  cancel?: { label: string; onclick?: string };
+  /** Milliseconds before it closes (default 3000, 5000 for errors); -1 keeps it open. */
+  duration?: number;
+  /** SVG markup replacing the category icon (inserted as is). */
+  icon?: string;
+}
+
+/** <auvyx-tabs>: Tabs; wraps the HTML edition markup (.tabs). */
+export interface AuvyxTabsEventMap extends Omit<HTMLElementEventMap, "change"> {
+  /** The user selected a tab */
+  "change": CustomEvent<{ value: string | null }>;
+}
+export interface AuvyxTabsElement extends HTMLElement {
+  /** The selected tab's data-value or id */
+  value: string | null;
+  addEventListener<K extends keyof AuvyxTabsEventMap>(type: K, listener: (this: AuvyxTabsElement, ev: AuvyxTabsEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof AuvyxTabsEventMap>(type: K, listener: (this: AuvyxTabsElement, ev: AuvyxTabsEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+
+/** <auvyx-select>: Select; wraps the HTML edition markup (.select). */
+export interface AuvyxSelectEventMap extends Omit<HTMLElementEventMap, "change"> {
+  /** The user picked an option */
+  "change": CustomEvent<{ value: string | string[] | null }>;
+}
+export interface AuvyxSelectElement extends HTMLElement {
+  /** The selected option's data-value (an array when multiple) */
+  value: string | string[] | null;
+  addEventListener<K extends keyof AuvyxSelectEventMap>(type: K, listener: (this: AuvyxSelectElement, ev: AuvyxSelectEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof AuvyxSelectEventMap>(type: K, listener: (this: AuvyxSelectElement, ev: AuvyxSelectEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+
+/** <auvyx-combobox>: Combobox; wraps the HTML edition markup (.combobox). */
+export interface AuvyxComboboxEventMap extends Omit<HTMLElementEventMap, "change"> {
+  /** The user picked an option */
+  "change": CustomEvent<{ value: string | string[] | null }>;
+}
+export interface AuvyxComboboxElement extends HTMLElement {
+  /** The selected option's data-value (an array when multiple) */
+  value: string | string[] | null;
+  addEventListener<K extends keyof AuvyxComboboxEventMap>(type: K, listener: (this: AuvyxComboboxElement, ev: AuvyxComboboxEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof AuvyxComboboxEventMap>(type: K, listener: (this: AuvyxComboboxElement, ev: AuvyxComboboxEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+
+/** <auvyx-command>: Command menu; wraps the HTML edition markup (.command). */
+export interface AuvyxCommandEventMap extends Omit<HTMLElementEventMap, "select"> {
+  /** The user activated an item; detail.value is its data-value or text */
+  "select": CustomEvent<{ value: string }>;
+}
+export interface AuvyxCommandElement extends HTMLElement {
+  addEventListener<K extends keyof AuvyxCommandEventMap>(type: K, listener: (this: AuvyxCommandElement, ev: AuvyxCommandEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof AuvyxCommandEventMap>(type: K, listener: (this: AuvyxCommandElement, ev: AuvyxCommandEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+
+/** <auvyx-dropdown-menu>: Dropdown menu; wraps the JS markup or the native popover variant (.dropdown-menu). */
+export interface AuvyxDropdownMenuEventMap extends Omit<HTMLElementEventMap, "toggle" | "select"> {
+  /** The menu opened or closed */
+  "toggle": CustomEvent<{ open: boolean }>;
+  /** The user activated an item; detail.value is its data-value or text */
+  "select": CustomEvent<{ value: string }>;
+}
+export interface AuvyxDropdownMenuElement extends HTMLElement {
+  /** Whether the menu is shown */
+  open: boolean;
+  addEventListener<K extends keyof AuvyxDropdownMenuEventMap>(type: K, listener: (this: AuvyxDropdownMenuElement, ev: AuvyxDropdownMenuEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof AuvyxDropdownMenuEventMap>(type: K, listener: (this: AuvyxDropdownMenuElement, ev: AuvyxDropdownMenuEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+
+/** <auvyx-popover>: Popover; wraps the JS markup or the native popover variant (.popover). */
+export interface AuvyxPopoverEventMap extends Omit<HTMLElementEventMap, "toggle"> {
+  /** The panel opened or closed */
+  "toggle": CustomEvent<{ open: boolean }>;
+}
+export interface AuvyxPopoverElement extends HTMLElement {
+  /** Whether the panel is shown */
+  open: boolean;
+  addEventListener<K extends keyof AuvyxPopoverEventMap>(type: K, listener: (this: AuvyxPopoverElement, ev: AuvyxPopoverEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof AuvyxPopoverEventMap>(type: K, listener: (this: AuvyxPopoverElement, ev: AuvyxPopoverEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+
+/** <auvyx-accordion>: Accordion; wraps the HTML edition markup (.accordion). */
+export interface AuvyxAccordionEventMap extends Omit<HTMLElementEventMap, "change"> {
+  /** The user opened or closed an item */
+  "change": CustomEvent<{ value: string | string[] | null }>;
+}
+export interface AuvyxAccordionElement extends HTMLElement {
+  /** The open item's data-value, id or position (an array with data-multiple) */
+  value: string | string[] | null;
+  addEventListener<K extends keyof AuvyxAccordionEventMap>(type: K, listener: (this: AuvyxAccordionElement, ev: AuvyxAccordionEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof AuvyxAccordionEventMap>(type: K, listener: (this: AuvyxAccordionElement, ev: AuvyxAccordionEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+
+/** <auvyx-sidebar>: Sidebar; wraps the HTML edition markup (.sidebar). */
+export interface AuvyxSidebarEventMap extends Omit<HTMLElementEventMap, "toggle"> {
+  /** The sidebar expanded or collapsed */
+  "toggle": CustomEvent<{ open: boolean }>;
+}
+export interface AuvyxSidebarElement extends HTMLElement {
+  /** Whether the sidebar is expanded */
+  open: boolean;
+  addEventListener<K extends keyof AuvyxSidebarEventMap>(type: K, listener: (this: AuvyxSidebarElement, ev: AuvyxSidebarEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof AuvyxSidebarEventMap>(type: K, listener: (this: AuvyxSidebarElement, ev: AuvyxSidebarEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+
+/** <auvyx-toaster>: Toaster; wraps the HTML edition toaster (.toaster). */
+export interface AuvyxToasterEventMap extends Omit<HTMLElementEventMap, never> {
+}
+export interface AuvyxToasterElement extends HTMLElement {
+  /** Show a toast; same options as the HTML edition */
+  toast(options: AuvyxToastOptions): void;
+  addEventListener<K extends keyof AuvyxToasterEventMap>(type: K, listener: (this: AuvyxToasterElement, ev: AuvyxToasterEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof AuvyxToasterEventMap>(type: K, listener: (this: AuvyxToasterElement, ev: AuvyxToasterEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+
+/** <auvyx-slider>: Slider; wraps the HTML edition <input type="range">. */
+export interface AuvyxSliderEventMap extends Omit<HTMLElementEventMap, "input" | "change"> {
+  /** The value is changing */
+  "input": CustomEvent<{ value: string }>;
+  /** The user finished changing it */
+  "change": CustomEvent<{ value: string }>;
+}
+export interface AuvyxSliderElement extends HTMLElement {
+  /** The input's value */
+  value: string;
+  addEventListener<K extends keyof AuvyxSliderEventMap>(type: K, listener: (this: AuvyxSliderElement, ev: AuvyxSliderEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof AuvyxSliderEventMap>(type: K, listener: (this: AuvyxSliderElement, ev: AuvyxSliderEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+
+/** <auvyx-drawer>: Drawer; wraps the HTML edition <dialog class="drawer">. */
+export interface AuvyxDrawerEventMap extends Omit<HTMLElementEventMap, "toggle"> {
+  /** The drawer opened or closed */
+  "toggle": CustomEvent<{ open: boolean }>;
+}
+export interface AuvyxDrawerElement extends HTMLElement {
+  /** Whether the drawer is shown */
+  open: boolean;
+  addEventListener<K extends keyof AuvyxDrawerEventMap>(type: K, listener: (this: AuvyxDrawerElement, ev: AuvyxDrawerEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof AuvyxDrawerEventMap>(type: K, listener: (this: AuvyxDrawerElement, ev: AuvyxDrawerEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+
+/** <auvyx-calendar>: Date grid with keyboard navigation. */
+export interface AuvyxCalendarEventMap extends Omit<HTMLElementEventMap, "change"> {
+  /** The user picked a date */
+  "change": CustomEvent<{ value: string; dates: Date[]; complete: boolean }>;
+}
+export interface AuvyxCalendarElement extends HTMLElement {
+  /** "YYYY-MM-DD" (single), "start/end" (range) or "d1,d2,…" (multiple) */
+  value: string;
+  /** Selected dates */
+  readonly dates: Date[];
+  /** Extra HTML inside each day */
+  renderDay: ((date: Date) => string | null) | undefined;
+  /** Show the month containing date */
+  goTo(date: Date | string): void;
+  /** Focus the selected or current day */
+  focusDate(): void;
+  addEventListener<K extends keyof AuvyxCalendarEventMap>(type: K, listener: (this: AuvyxCalendarElement, ev: AuvyxCalendarEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof AuvyxCalendarEventMap>(type: K, listener: (this: AuvyxCalendarElement, ev: AuvyxCalendarEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+
+/** <auvyx-date-picker>: Progressive enhancement of <input type="date"> with a calendar popover. */
+export interface AuvyxDatePickerEventMap extends Omit<HTMLElementEventMap, "change"> {
+  /** A date was picked */
+  "change": CustomEvent<{ value: string }>;
+}
+export interface AuvyxDatePickerElement extends HTMLElement {
+  /** "YYYY-MM-DD", or "start/end" in range mode */
+  readonly value: string;
+  addEventListener<K extends keyof AuvyxDatePickerEventMap>(type: K, listener: (this: AuvyxDatePickerElement, ev: AuvyxDatePickerEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof AuvyxDatePickerEventMap>(type: K, listener: (this: AuvyxDatePickerElement, ev: AuvyxDatePickerEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+
+/** <auvyx-data-table>: Sorting, filtering, selection, column visibility and pagination over a server-rendered table. */
+export interface AuvyxDataTableEventMap extends Omit<HTMLElementEventMap, "selectionchange"> {
+  /** Row selection changed */
+  "selectionchange": CustomEvent<{ rows: HTMLTableRowElement[] }>;
+}
+export interface AuvyxDataTableElement extends HTMLElement {
+  addEventListener<K extends keyof AuvyxDataTableEventMap>(type: K, listener: (this: AuvyxDataTableElement, ev: AuvyxDataTableEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof AuvyxDataTableEventMap>(type: K, listener: (this: AuvyxDataTableElement, ev: AuvyxDataTableEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+
+/** <auvyx-resizable>: Drag or arrow-key the separators between panels. */
+export interface AuvyxResizableEventMap extends Omit<HTMLElementEventMap, "resize"> {
+  /** Panel sizes changed (percent) */
+  "resize": CustomEvent<{ sizes: number[] }>;
+}
+export interface AuvyxResizableElement extends HTMLElement {
+  addEventListener<K extends keyof AuvyxResizableEventMap>(type: K, listener: (this: AuvyxResizableElement, ev: AuvyxResizableEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof AuvyxResizableEventMap>(type: K, listener: (this: AuvyxResizableElement, ev: AuvyxResizableEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+
+/** <auvyx-context-menu>: Opens a native menu popover at the pointer. */
+export interface AuvyxContextMenuEventMap extends Omit<HTMLElementEventMap, never> {
+}
+export interface AuvyxContextMenuElement extends HTMLElement {
+  /** Open the menu at viewport coordinates */
+  openAt(x: number, y: number): void;
+  addEventListener<K extends keyof AuvyxContextMenuEventMap>(type: K, listener: (this: AuvyxContextMenuElement, ev: AuvyxContextMenuEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof AuvyxContextMenuEventMap>(type: K, listener: (this: AuvyxContextMenuElement, ev: AuvyxContextMenuEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "auvyx-tabs": AuvyxTabsElement;
+    "auvyx-select": AuvyxSelectElement;
+    "auvyx-combobox": AuvyxComboboxElement;
+    "auvyx-command": AuvyxCommandElement;
+    "auvyx-dropdown-menu": AuvyxDropdownMenuElement;
+    "auvyx-popover": AuvyxPopoverElement;
+    "auvyx-accordion": AuvyxAccordionElement;
+    "auvyx-sidebar": AuvyxSidebarElement;
+    "auvyx-toaster": AuvyxToasterElement;
+    "auvyx-slider": AuvyxSliderElement;
+    "auvyx-drawer": AuvyxDrawerElement;
+    "auvyx-calendar": AuvyxCalendarElement;
+    "auvyx-date-picker": AuvyxDatePickerElement;
+    "auvyx-data-table": AuvyxDataTableElement;
+    "auvyx-resizable": AuvyxResizableElement;
+    "auvyx-context-menu": AuvyxContextMenuElement;
+  }
+}

package/dist/types/react.d.ts

@@ -0,0 +1,181 @@
+// Generated from packages/elements/api.mjs by packages/ui/tools/types.mjs. Do not edit.
+// React 19 JSX types for <auvyx-*> elements: add  import type {} from "@auvyx/ui/types/react";  once.
+import type { HTMLAttributes, Ref, ReactNode, SyntheticEvent } from 'react';
+import type { AuvyxTabsElement, AuvyxSelectElement, AuvyxComboboxElement, AuvyxCommandElement, AuvyxDropdownMenuElement, AuvyxPopoverElement, AuvyxAccordionElement, AuvyxSidebarElement, AuvyxToasterElement, AuvyxSliderElement, AuvyxDrawerElement, AuvyxCalendarElement, AuvyxDatePickerElement, AuvyxDataTableElement, AuvyxResizableElement, AuvyxContextMenuElement } from './elements';
+
+type AuvyxBase<E> = Omit<HTMLAttributes<E>, 'onChange' | 'onInput' | 'onToggle' | 'onSelect'> & {
+  ref?: Ref<E>;
+  class?: string;
+  children?: ReactNode;
+  /** @deprecated React's onToggle never fires for custom elements. Use the lowercase `ontoggle`. */
+  onToggle?: never;
+  /** @deprecated React's onSelect never fires for custom elements. Use the lowercase `onselect`. */
+  onSelect?: never;
+};
+
+export type AuvyxTabsProps = AuvyxBase<AuvyxTabsElement> & {
+  /** The selected tab's data-value or id */
+  "value"?: string;
+  /** The user selected a tab. Read event.currentTarget.value. */
+  onChange?: (event: SyntheticEvent<AuvyxTabsElement, CustomEvent<{ value: string | null }>>) => void;
+};
+
+export type AuvyxSelectProps = AuvyxBase<AuvyxSelectElement> & {
+  /** The selected option's data-value (an array when multiple) */
+  "value"?: string | string[];
+  /** The user picked an option. Read event.currentTarget.value. */
+  onChange?: (event: SyntheticEvent<AuvyxSelectElement, CustomEvent<{ value: string | string[] | null }>>) => void;
+};
+
+export type AuvyxComboboxProps = AuvyxBase<AuvyxComboboxElement> & {
+  /** The selected option's data-value (an array when multiple) */
+  "value"?: string | string[];
+  /** The user picked an option. Read event.currentTarget.value. */
+  onChange?: (event: SyntheticEvent<AuvyxComboboxElement, CustomEvent<{ value: string | string[] | null }>>) => void;
+};
+
+export type AuvyxCommandProps = AuvyxBase<AuvyxCommandElement> & {
+  /** The user activated an item; detail.value is its data-value or text. Receives the native event. */
+  "onselect"?: (event: CustomEvent<{ value: string }> & { currentTarget: AuvyxCommandElement }) => void;
+};
+
+export type AuvyxDropdownMenuProps = AuvyxBase<AuvyxDropdownMenuElement> & {
+  /** Whether the menu is shown */
+  "open"?: boolean;
+  /** The menu opened or closed. Receives the native event. */
+  "ontoggle"?: (event: CustomEvent<{ open: boolean }> & { currentTarget: AuvyxDropdownMenuElement }) => void;
+  /** The user activated an item; detail.value is its data-value or text. Receives the native event. */
+  "onselect"?: (event: CustomEvent<{ value: string }> & { currentTarget: AuvyxDropdownMenuElement }) => void;
+};
+
+export type AuvyxPopoverProps = AuvyxBase<AuvyxPopoverElement> & {
+  /** Whether the panel is shown */
+  "open"?: boolean;
+  /** The panel opened or closed. Receives the native event. */
+  "ontoggle"?: (event: CustomEvent<{ open: boolean }> & { currentTarget: AuvyxPopoverElement }) => void;
+};
+
+export type AuvyxAccordionProps = AuvyxBase<AuvyxAccordionElement> & {
+  /** The open item's data-value, id or position (an array with data-multiple) */
+  "value"?: string | string[];
+  /** The user opened or closed an item. Read event.currentTarget.value. */
+  onChange?: (event: SyntheticEvent<AuvyxAccordionElement, CustomEvent<{ value: string | string[] | null }>>) => void;
+};
+
+export type AuvyxSidebarProps = AuvyxBase<AuvyxSidebarElement> & {
+  /** Whether the sidebar is expanded */
+  "open"?: boolean;
+  /** The sidebar expanded or collapsed. Receives the native event. */
+  "ontoggle"?: (event: CustomEvent<{ open: boolean }> & { currentTarget: AuvyxSidebarElement }) => void;
+};
+
+export type AuvyxToasterProps = AuvyxBase<AuvyxToasterElement> & {
+};
+
+export type AuvyxSliderProps = AuvyxBase<AuvyxSliderElement> & {
+  /** The input's value */
+  "value"?: string;
+  /** The value is changing. Read event.currentTarget.value. */
+  onInput?: (event: SyntheticEvent<AuvyxSliderElement, CustomEvent<{ value: string }>>) => void;
+  /** The user finished changing it. Read event.currentTarget.value. */
+  onChange?: (event: SyntheticEvent<AuvyxSliderElement, CustomEvent<{ value: string }>>) => void;
+};
+
+export type AuvyxDrawerProps = AuvyxBase<AuvyxDrawerElement> & {
+  /** Whether the drawer is shown */
+  "open"?: boolean;
+  /** The drawer opened or closed. Receives the native event. */
+  "ontoggle"?: (event: CustomEvent<{ open: boolean }> & { currentTarget: AuvyxDrawerElement }) => void;
+};
+
+export type AuvyxCalendarProps = AuvyxBase<AuvyxCalendarElement> & {
+  /** "YYYY-MM-DD" (single), "start/end" (range) or "d1,d2,…" (multiple) */
+  "value"?: string;
+  /** Selection mode (default single) */
+  "mode"?: 'single' | 'range' | 'multiple';
+  /** How many months to show side by side */
+  "months"?: string;
+  /** First displayed month, "YYYY-MM" */
+  "month"?: string;
+  /** Earliest selectable day, "YYYY-MM-DD" */
+  "min"?: string;
+  /** Latest selectable day, "YYYY-MM-DD" */
+  "max"?: string;
+  /** Comma-separated days or "start/end" ranges */
+  "disabled-dates"?: string;
+  /** Weekdays to disable, "0,6" = weekends */
+  "disabled-days"?: string;
+  /** Like disabled-dates, styled as taken */
+  "booked"?: string;
+  /** Shortest range in days (range mode) */
+  "min-days"?: string;
+  /** Longest range in days (range mode) */
+  "max-days"?: string;
+  /** Month caption: label or month/year selects */
+  "caption"?: 'label' | 'dropdown';
+  /** Show ISO week numbers */
+  "week-numbers"?: boolean;
+  /** Keep a hidden input in sync for forms */
+  "name"?: string;
+  /** The user picked a date. Read event.currentTarget.value. */
+  onChange?: (event: SyntheticEvent<AuvyxCalendarElement, CustomEvent<{ value: string; dates: Date[]; complete: boolean }>>) => void;
+};
+
+export type AuvyxDatePickerProps = AuvyxBase<AuvyxDatePickerElement> & {
+  /** Two inputs for a range */
+  "mode"?: 'single' | 'range';
+  /** Months shown in the calendar */
+  "months"?: string;
+  /** Passed to the calendar */
+  "caption"?: 'label' | 'dropdown';
+  /** Passed to the calendar */
+  "week-numbers"?: boolean;
+  /** Passed to the calendar */
+  "disabled-days"?: string;
+  /** Passed to the calendar */
+  "disabled-dates"?: string;
+  /** Passed to the calendar */
+  "booked"?: string;
+  /** Passed to the calendar (range mode) */
+  "min-days"?: string;
+  /** Passed to the calendar (range mode) */
+  "max-days"?: string;
+  /** A date was picked. Read event.currentTarget.value. */
+  onChange?: (event: SyntheticEvent<AuvyxDatePickerElement, CustomEvent<{ value: string }>>) => void;
+};
+
+export type AuvyxDataTableProps = AuvyxBase<AuvyxDataTableElement> & {
+  /** Row selection changed. Receives the native event. */
+  "onselectionchange"?: (event: CustomEvent<{ rows: HTMLTableRowElement[] }> & { currentTarget: AuvyxDataTableElement }) => void;
+};
+
+export type AuvyxResizableProps = AuvyxBase<AuvyxResizableElement> & {
+  /** Panel sizes changed (percent). Receives the native event. */
+  "onresize"?: (event: CustomEvent<{ sizes: number[] }> & { currentTarget: AuvyxResizableElement }) => void;
+};
+
+export type AuvyxContextMenuProps = AuvyxBase<AuvyxContextMenuElement> & {
+};
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      "auvyx-tabs": AuvyxTabsProps;
+      "auvyx-select": AuvyxSelectProps;
+      "auvyx-combobox": AuvyxComboboxProps;
+      "auvyx-command": AuvyxCommandProps;
+      "auvyx-dropdown-menu": AuvyxDropdownMenuProps;
+      "auvyx-popover": AuvyxPopoverProps;
+      "auvyx-accordion": AuvyxAccordionProps;
+      "auvyx-sidebar": AuvyxSidebarProps;
+      "auvyx-toaster": AuvyxToasterProps;
+      "auvyx-slider": AuvyxSliderProps;
+      "auvyx-drawer": AuvyxDrawerProps;
+      "auvyx-calendar": AuvyxCalendarProps;
+      "auvyx-date-picker": AuvyxDatePickerProps;
+      "auvyx-data-table": AuvyxDataTableProps;
+      "auvyx-resizable": AuvyxResizableProps;
+      "auvyx-context-menu": AuvyxContextMenuProps;
+    }
+  }
+}

package/dist/types/vue.d.ts

@@ -0,0 +1,155 @@
+// Generated from packages/elements/api.mjs by packages/ui/tools/types.mjs. Do not edit.
+// Vue 3 template types for <auvyx-*> elements: add  import type {} from "@auvyx/ui/types/vue";  once,
+// and set app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('auvyx-').
+import type { DefineComponent } from 'vue';
+import type { AuvyxTabsElement, AuvyxSelectElement, AuvyxComboboxElement, AuvyxCommandElement, AuvyxDropdownMenuElement, AuvyxPopoverElement, AuvyxAccordionElement, AuvyxSidebarElement, AuvyxToasterElement, AuvyxSliderElement, AuvyxDrawerElement, AuvyxCalendarElement, AuvyxDatePickerElement, AuvyxDataTableElement, AuvyxResizableElement, AuvyxContextMenuElement } from './elements';
+
+type AuvyxTabsVueProps = {
+  /** The selected tab's data-value or id */
+  "value"?: string;
+  /** The user selected a tab */
+  "onChange"?: (event: CustomEvent<{ value: string | null }> & { target: AuvyxTabsElement }) => void;
+};
+type AuvyxSelectVueProps = {
+  /** The selected option's data-value (an array when multiple) */
+  "value"?: string | string[];
+  /** The user picked an option */
+  "onChange"?: (event: CustomEvent<{ value: string | string[] | null }> & { target: AuvyxSelectElement }) => void;
+};
+type AuvyxComboboxVueProps = {
+  /** The selected option's data-value (an array when multiple) */
+  "value"?: string | string[];
+  /** The user picked an option */
+  "onChange"?: (event: CustomEvent<{ value: string | string[] | null }> & { target: AuvyxComboboxElement }) => void;
+};
+type AuvyxCommandVueProps = {
+  /** The user activated an item; detail.value is its data-value or text */
+  "onSelect"?: (event: CustomEvent<{ value: string }> & { target: AuvyxCommandElement }) => void;
+};
+type AuvyxDropdownMenuVueProps = {
+  /** Whether the menu is shown */
+  "open"?: boolean;
+  /** The menu opened or closed */
+  "onToggle"?: (event: CustomEvent<{ open: boolean }> & { target: AuvyxDropdownMenuElement }) => void;
+  /** The user activated an item; detail.value is its data-value or text */
+  "onSelect"?: (event: CustomEvent<{ value: string }> & { target: AuvyxDropdownMenuElement }) => void;
+};
+type AuvyxPopoverVueProps = {
+  /** Whether the panel is shown */
+  "open"?: boolean;
+  /** The panel opened or closed */
+  "onToggle"?: (event: CustomEvent<{ open: boolean }> & { target: AuvyxPopoverElement }) => void;
+};
+type AuvyxAccordionVueProps = {
+  /** The open item's data-value, id or position (an array with data-multiple) */
+  "value"?: string | string[];
+  /** The user opened or closed an item */
+  "onChange"?: (event: CustomEvent<{ value: string | string[] | null }> & { target: AuvyxAccordionElement }) => void;
+};
+type AuvyxSidebarVueProps = {
+  /** Whether the sidebar is expanded */
+  "open"?: boolean;
+  /** The sidebar expanded or collapsed */
+  "onToggle"?: (event: CustomEvent<{ open: boolean }> & { target: AuvyxSidebarElement }) => void;
+};
+type AuvyxToasterVueProps = {
+};
+type AuvyxSliderVueProps = {
+  /** The input's value */
+  "value"?: string;
+  /** The value is changing */
+  "onInput"?: (event: CustomEvent<{ value: string }> & { target: AuvyxSliderElement }) => void;
+  /** The user finished changing it */
+  "onChange"?: (event: CustomEvent<{ value: string }> & { target: AuvyxSliderElement }) => void;
+};
+type AuvyxDrawerVueProps = {
+  /** Whether the drawer is shown */
+  "open"?: boolean;
+  /** The drawer opened or closed */
+  "onToggle"?: (event: CustomEvent<{ open: boolean }> & { target: AuvyxDrawerElement }) => void;
+};
+type AuvyxCalendarVueProps = {
+  /** "YYYY-MM-DD" (single), "start/end" (range) or "d1,d2,…" (multiple) */
+  "value"?: string;
+  /** Selection mode (default single) */
+  "mode"?: 'single' | 'range' | 'multiple';
+  /** How many months to show side by side */
+  "months"?: string;
+  /** First displayed month, "YYYY-MM" */
+  "month"?: string;
+  /** Earliest selectable day, "YYYY-MM-DD" */
+  "min"?: string;
+  /** Latest selectable day, "YYYY-MM-DD" */
+  "max"?: string;
+  /** Comma-separated days or "start/end" ranges */
+  "disabled-dates"?: string;
+  /** Weekdays to disable, "0,6" = weekends */
+  "disabled-days"?: string;
+  /** Like disabled-dates, styled as taken */
+  "booked"?: string;
+  /** Shortest range in days (range mode) */
+  "min-days"?: string;
+  /** Longest range in days (range mode) */
+  "max-days"?: string;
+  /** Month caption: label or month/year selects */
+  "caption"?: 'label' | 'dropdown';
+  /** Show ISO week numbers */
+  "week-numbers"?: boolean;
+  /** Keep a hidden input in sync for forms */
+  "name"?: string;
+  /** The user picked a date */
+  "onChange"?: (event: CustomEvent<{ value: string; dates: Date[]; complete: boolean }> & { target: AuvyxCalendarElement }) => void;
+};
+type AuvyxDatePickerVueProps = {
+  /** Two inputs for a range */
+  "mode"?: 'single' | 'range';
+  /** Months shown in the calendar */
+  "months"?: string;
+  /** Passed to the calendar */
+  "caption"?: 'label' | 'dropdown';
+  /** Passed to the calendar */
+  "week-numbers"?: boolean;
+  /** Passed to the calendar */
+  "disabled-days"?: string;
+  /** Passed to the calendar */
+  "disabled-dates"?: string;
+  /** Passed to the calendar */
+  "booked"?: string;
+  /** Passed to the calendar (range mode) */
+  "min-days"?: string;
+  /** Passed to the calendar (range mode) */
+  "max-days"?: string;
+  /** A date was picked */
+  "onChange"?: (event: CustomEvent<{ value: string }> & { target: AuvyxDatePickerElement }) => void;
+};
+type AuvyxDataTableVueProps = {
+  /** Row selection changed */
+  "onSelectionchange"?: (event: CustomEvent<{ rows: HTMLTableRowElement[] }> & { target: AuvyxDataTableElement }) => void;
+};
+type AuvyxResizableVueProps = {
+  /** Panel sizes changed (percent) */
+  "onResize"?: (event: CustomEvent<{ sizes: number[] }> & { target: AuvyxResizableElement }) => void;
+};
+type AuvyxContextMenuVueProps = {
+};
+
+declare module 'vue' {
+  interface GlobalComponents {
+    "auvyx-tabs": DefineComponent<AuvyxTabsVueProps>;
+    "auvyx-select": DefineComponent<AuvyxSelectVueProps>;
+    "auvyx-combobox": DefineComponent<AuvyxComboboxVueProps>;
+    "auvyx-command": DefineComponent<AuvyxCommandVueProps>;
+    "auvyx-dropdown-menu": DefineComponent<AuvyxDropdownMenuVueProps>;
+    "auvyx-popover": DefineComponent<AuvyxPopoverVueProps>;
+    "auvyx-accordion": DefineComponent<AuvyxAccordionVueProps>;
+    "auvyx-sidebar": DefineComponent<AuvyxSidebarVueProps>;
+    "auvyx-toaster": DefineComponent<AuvyxToasterVueProps>;
+    "auvyx-slider": DefineComponent<AuvyxSliderVueProps>;
+    "auvyx-drawer": DefineComponent<AuvyxDrawerVueProps>;
+    "auvyx-calendar": DefineComponent<AuvyxCalendarVueProps>;
+    "auvyx-date-picker": DefineComponent<AuvyxDatePickerVueProps>;
+    "auvyx-data-table": DefineComponent<AuvyxDataTableVueProps>;
+    "auvyx-resizable": DefineComponent<AuvyxResizableVueProps>;
+    "auvyx-context-menu": DefineComponent<AuvyxContextMenuVueProps>;
+  }
+}