iryx-ui 0.5.0 → 0.7.0

package/README.md

@@ -197,6 +197,24 @@ For a static re-brand, plain CSS works too — tokens are just variables:
 }
 ```
 
+### Typeface
+
+The library ships **no webfont** — that would put font files, a licence and a
+network request into every app whether it wanted them or not. It reads one
+variable, defaulting to the system stack. Point it at your own family and
+everything follows, including Tailwind's `font-sans`:
+
+```css
+@import "@fontsource-variable/instrument-sans"; /* or a <link>, or self-hosted */
+
+:root {
+  --iryx-font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
+}
+```
+
+Unlike the colour tokens, this one is not mode-specific — there is no `.dark`
+counterpart to keep in sync.
+
 Available tokens, each usable as a Tailwind color (`bg-primary`,
 `text-muted-foreground`, …):
 
@@ -270,9 +288,12 @@ app.use(createIryxUi({ unstyled: true }))
 | --- | --- |
 | `IForm` | Validating form wrapper — any Standard Schema validator, or your own function |
 | `IFormField` | Label, description, hint, help and error text around a control |
-| `IInput` | Text field with `sm`/`md`/`lg` sizes, `invalid` state, `v-model` |
+| `IInput` | Text field with `sm`/`md`/`lg` sizes, `invalid` state, `v-model`, `leading`/`trailing` slots, `clearable`, `loading`, `debounce` |
 | `INumberInput` | Decimal-safe numeric field — the model is a **string**, with `min`/`max`/`step`, `precision` and locale-aware display |
-| `ITextarea` | Multi-line field with matching sizes and `invalid` state |
+| `IDatePicker` | Calendar in a popover; the model is an ISO `YYYY-MM-DD` **string** |
+| `IDateRangePicker` | Two-month range calendar; the model is `{ start, end }` ISO strings |
+| `IPasswordInput` | Masked field with a show/hide toggle and an optional strength meter |
+| `ITextarea` | Multi-line field with matching sizes, `invalid` state and optional `autosize` |
 | `ILabel` | Field label with optional `required` asterisk |
 | `ICheckbox` | Tri-state checkbox (`true` / `false` / `'indeterminate'`), optional `label` + `description` |
 | `ISelect` | Listbox with keyboard nav and typeahead, driven by an `items` array, with optional groups |
@@ -292,8 +313,9 @@ app.use(createIryxUi({ unstyled: true }))
 
 | Component | Description |
 | --- | --- |
-| `IAlert` | Inline banner in four variants, with a variant icon and optional dismiss |
-| `IBadge` | Status pill — five variants × `soft`/`solid` tones × three sizes, optional `dot` |
+| `IAlert` | Inline, contextual message in four variants — variant icon, `actions` slot, optional dismiss |
+| `IBanner` | Page-level announcement — full-bleed, six variants, sticky top or fixed bottom |
+| `IBadge` | Status pill — five variants × three sizes; `dot` moves the colour onto a leading dot |
 | `IToaster` | Host for `useToast()`; six viewport positions, stacking, action buttons |
 | `IDialog` | Modal with header/body/footer slots, `dismissible` and `showClose` |
 | `IConfirmDialog` | Host for `useConfirm()` — renders the promise-based confirmation |
@@ -308,9 +330,10 @@ app.use(createIryxUi({ unstyled: true }))
 | --- | --- |
 | `ITabs` | `solid` or `line` variants with an animated indicator, horizontal or vertical |
 | `IBreadcrumb` | Trail from an `items` array; the last crumb is marked as the current page |
-| `IPagination` | Page list with ellipsis, edge pages and prev/next controls |
+| `IPagination` | Page list with ellipsis, edge pages and prev/next controls; `align` places it, `size` sets the button scale |
 | `IStepper` | Multi-step progress, horizontal or vertical, optional `linear` ordering |
 | `IStat` | KPI tile — label, value, signed delta with trend colour, and a hint |
+| `ITable` | Data table — sorting, selection, expansion and per-cell slots, client- or server-driven |
 
 Every component supports `unstyled` and a `class` override; multi-part ones take a `ui` prop for per-slot classes.
 
@@ -414,6 +437,151 @@ const framework = ref('vue')
 </template>
 ```
 
+#### Input affixes, clearing, loading and debounce
+
+`IInput` renders its chrome on a wrapper element, so `leading` and `trailing`
+slot content sits *inside* the field and takes real space — a long value is
+truncated by the affix rather than sliding underneath it.
+
+```vue
+<IInput v-model="search" clearable placeholder="Search invoices…">
+  <template #leading>
+    <HugeiconsIcon :icon="Search01Icon" />
+  </template>
+</IInput>
+
+<IInput v-model="team" placeholder="your-team">
+  <template #trailing>
+    <span class="text-sm">.example.com</span>
+  </template>
+</IInput>
+
+<!-- Spinner in the trailing area; the field stays editable. -->
+<IInput v-model="slug" :loading="checking" />
+
+<!-- The model updates 500ms after the last keystroke. -->
+<IInput v-model="query" :debounce="500" clearable />
+```
+
+| Prop | Effect |
+| --- | --- |
+| `clearable` | Clear button in the trailing area whenever the field is non-empty |
+| `loading` | Spinner in the trailing area. Does **not** disable the field |
+| `debounce` | Milliseconds to wait after the last keystroke before the model updates. `0` (default) updates on every keystroke |
+| `clearLabel` | Accessible name for the clear button, for non-English apps |
+
+The displayed text always updates on the keystroke — only the model lags. Blur
+and Enter flush a pending update immediately, so a submit never reads a stale
+value, and an external write (a reset or prefill) cancels whatever is queued.
+
+`class` lands on the wrapper, since that is the element carrying the field
+chrome; use `ui` to reach the parts (`root`, `input`, `leading`, `trailing`,
+`clear`). Stray attributes like `name`, `autocomplete` and `maxlength` are
+forwarded to the `<input>` itself. `ref` exposes the element as `.input` for
+focus management.
+
+#### Dates
+
+The model is an ISO `YYYY-MM-DD` **string**, never a `Date`.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const issuedOn = ref<string | null>('2026-08-15')
+const period = ref({ start: '2026-08-01', end: '2026-08-31' })
+</script>
+
+<template>
+  <IDatePicker v-model="issuedOn" clearable />
+  <IDateRangePicker v-model="period" clearable />
+</template>
+```
+
+A `Date` is a timestamp, so it always carries a time zone. `new Date('2026-08-15')`
+parses as UTC midnight, and a user west of Greenwich formatting it locally sees
+the 14th — which silently moves a record into the wrong reporting period. A
+calendar date has no zone, so it stays the day you picked. Internally the
+components use `@internationalized/date`; that never reaches your model, so
+formatting the string with `dayjs` or anything else on the way out is fine.
+
+| Prop | Effect |
+| --- | --- |
+| `min` / `max` | Selectable bounds, as ISO strings |
+| `locale` | Month names, weekday initials, and the trigger's text |
+| `format` | `Intl.DateTimeFormatOptions` for the trigger, e.g. `{ dateStyle: 'full' }` |
+| `weekStartsOn` | `0` is Sunday. Defaults to the locale's convention |
+| `clearable` | Adds a clear action to the footer |
+| `months` | Range picker only — months side by side, default `2` |
+| `separator` | Range picker only — text between the two dates |
+
+Navigation and footer labels (`todayLabel`, `clearLabel`, `previousLabel`,
+`nextLabel`) are all props, so nothing bakes in English.
+
+Both render their calendar at a fixed six weeks, so a short month cannot stretch
+its rows to match a taller neighbour and the popover does not resize as you page
+through it. The range picker draws only the committed range — the days between
+the endpoints take a flat tint while the two ends take the solid fill, so a long
+span still shows where it begins and ends.
+
+The helpers behind them are exported, for formatting the same values elsewhere:
+
+```ts
+import { formatIsoDate, isoToday, toCalendarDate, toIsoDate } from 'iryx-ui'
+
+formatIsoDate('2026-08-15', 'en-GB', { dateStyle: 'long' }) // '15 August 2026'
+formatIsoDate('nonsense') // '' — malformed input is "no selection", not a crash
+```
+
+#### Passwords
+
+`IPasswordInput` is `IInput` with a reveal toggle in the trailing area, plus an
+optional four-segment strength meter.
+
+```vue
+<IPasswordInput v-model="password" strength />
+
+<!-- Toggle only, no meter -->
+<IPasswordInput v-model="password" />
+
+<!-- No toggle either -->
+<IPasswordInput v-model="password" :toggle="false" />
+```
+
+The score counts length (8 and 12 characters), mixed case, a digit and a
+symbol, capped at four. It is a deliberately transparent nudge toward better
+passwords, **not** a security control — enforce real policy in the `IForm`
+validator, where it can actually reject a value.
+
+Every string is overridable, since components must not bake in English:
+
+```vue
+<IPasswordInput
+  v-model="password"
+  strength
+  show-label="Afficher le mot de passe"
+  hide-label="Masquer le mot de passe"
+  :strength-labels="['Faible', 'Moyen', 'Bon', 'Fort']"
+/>
+```
+
+`class` lands on the wrapper that stacks the field above the meter; `ui` reaches
+`root`, `input`, `toggle`, `meter`, `track`, `segment` and `label`.
+
+#### Autosizing textareas
+
+```vue
+<!-- Grows without limit -->
+<ITextarea v-model="note" autosize />
+
+<!-- Between 2 and 8 rows, then scrolls -->
+<ITextarea v-model="note" :autosize="{ min: 2, max: 8 }" />
+```
+
+`autosize` overrides `rows` and drops the drag handle, since the measured
+height is the point. The field shrinks as well as grows, and re-measures when
+the model changes from outside — a reset or a prefill resizes correctly.
+
 `ISelect` and `IRadioGroup` accept plain strings or `{ label, value, disabled }` objects. Both also take a default slot if you'd rather compose the Reka primitives yourself.
 
 `ISelect` also takes groups — an entry with its own `items` becomes a labelled
@@ -607,6 +775,188 @@ The control inside a field automatically inherits its `id`, invalid styling and
 
 Use the `#label` / `#description` slots instead of the props when you need markup (a link, a badge) inside the text.
 
+### Alerts and banners
+
+They look similar and do different jobs, so they're separate components.
+
+**`IAlert` is contextual.** It sits in the flow next to the thing it's about —
+a failed upload, a form that won't submit — boxed, with an icon and a title.
+Danger and warning variants take `role="alert"` so a screen reader interrupts,
+because the user caused it and needs to know now.
+
+**`IBanner` is page-level.** It spans the full width and announces something
+that isn't about any one element: a trial ending, scheduled maintenance. It's a
+labelled `role="region"`, never an alert — it's ambient, so interrupting
+someone mid-task would be wrong.
+
+```vue
+<IBanner
+  v-model:open="showTrial"
+  variant="primary"
+  position="top"
+  title="Trial ends in 3 days."
+  description="Upgrade to keep your data."
+  closable
+  label="Trial notice"
+>
+  <template #actions>
+    <IButton size="sm" variant="outline">Upgrade</IButton>
+  </template>
+</IBanner>
+```
+
+`position` is `static` (in flow), `top` (sticky) or `bottom` (fixed to the
+viewport, with the rule moved to its top edge). `contained` keeps the text at a
+readable measure while the fill still spans the window.
+
+Both dismiss through `v-model:open`, so the usual case is one binding instead
+of a `close` handler plus a `v-if`. `close` still fires if you need to persist
+or confirm first:
+
+```vue
+<IAlert v-model:open="visible" variant="danger" title="Upload failed" closable>
+  The file was larger than 10 MB.
+  <template #actions>
+    <IButton size="sm" @click="retry()">Retry</IButton>
+  </template>
+</IAlert>
+```
+
+### Tables
+
+`ITable` takes `rows` and `columns` and renders a real `<table>`. Columns are
+plain objects — no render functions — and anything beyond the raw value is a
+slot:
+
+```vue
+<script setup>
+const columns = [
+  { key: 'number', label: 'Invoice', sortable: true },
+  { key: 'customer.name', label: 'Customer', sortable: true, sortKey: 'customer_name' },
+  { key: 'total', label: 'Total', sortable: true, numeric: true },
+  { key: 'status', label: 'Status' },
+]
+</script>
+
+<template>
+  <ITable :rows="invoices" :columns="columns" label="Invoices">
+    <template #cell-total="{ value }">
+      {{ formatMoney(value) }}
+    </template>
+    <template #cell-status="{ row }">
+      <IBadge :variant="row.paid ? 'success' : 'warning'">
+        {{ row.paid ? 'Paid' : 'Due' }}
+      </IBadge>
+    </template>
+  </ITable>
+</template>
+```
+
+`key` doubles as the accessor (dot-notation reaches nested values) and the slot
+suffix, so `#cell-customer.name` targets that column. `#header-<key>` replaces a
+header the same way.
+
+`numeric` gives a column tabular figures and end alignment, so amounts line up
+digit-for-digit down the column instead of wandering with each glyph's width.
+Set `align` alongside it to keep the figures but place the column differently.
+
+#### Client or server
+
+**The table never fetches.** It renders what you give it and emits what the
+user did, so caching, cancellation and auth stay in your data layer.
+
+Which mode it runs in is decided by one prop. Omit `total` and it sorts and
+paginates `rows` itself. Provide `total` and it does neither — the rows you
+passed are already the page the server returned, so it only reflects state and
+emits changes:
+
+```vue
+<ITable
+  v-model:sort="sort"
+  v-model:page="page"
+  :rows="data.rows"
+  :columns="columns"
+  :total="data.total"
+  :loading="pending"
+/>
+```
+
+Watch those models and refetch. Sorting a column resets `page` to 1, since the
+old page number means nothing against a reordered list.
+
+#### State ownership
+
+Every model is optional. Bind one and you own that state — put it in the URL, a
+store, or `useState`. Leave it unbound and the table keeps it internally, so the
+simple case needs no wiring:
+
+| Model | Type |
+| --- | --- |
+| `v-model:sort` | `{ key, order } \| null` — `null` is "unsorted", distinct from never-sorted |
+| `v-model:page` | `number`, 1-indexed |
+| `v-model:perPage` | `number` |
+| `v-model:selection` | `(string \| number)[]` of row keys |
+| `v-model:expanded` | `(string \| number)[]` of row keys |
+
+#### Selection and expansion
+
+`selectable` adds a checkbox column whose header is tri-state over the rows on
+screen. Selection is held as **row keys** (`rowKey`, default `'id'`), and
+select-all only touches the current page, so selections made on other pages
+survive. `isRowSelectable` vetoes a row — its checkbox is hidden and the header
+skips it.
+
+`expandable` adds a disclosure column and renders the `#expanded` slot beneath
+an open row; `canExpandRow` vetoes it per row.
+
+```vue
+<ITable
+  v-model:selection="selected"
+  :rows="rows"
+  :columns="columns"
+  selectable
+  expandable
+  :is-row-selectable="row => !row.locked"
+>
+  <template #expanded="{ row }">
+    <div class="p-4">{{ row.notes }}</div>
+  </template>
+</ITable>
+```
+
+#### States and props
+
+`loading` sets `aria-busy` and, when there is nothing to show yet, renders
+`loadingRows` skeleton rows instead of the empty message. With rows already on
+screen it leaves them in place, so a refetch doesn't blank the table. Otherwise
+`emptyText` — or the `#empty` slot — takes over.
+
+| Prop | What it does |
+| --- | --- |
+| `rowKey` | Field identifying a row. Default `'id'` |
+| `clickableRows` | Emits `rowClick` and shows a pointer cursor |
+| `striped` / `hoverable` / `stickyHeader` | Row and header treatment |
+| `size` | `sm` / `md` / `lg` row density |
+| `label` / `caption` | Accessible name, and an optional visible caption |
+
+Headers are real `<button>`s, sorted columns carry `aria-sort`, and the table is
+a plain `<table>`, so screen readers and keyboard users get the semantics for
+free. Give it a `label` (or a `caption`) — a table with no accessible name is
+hard to place when tabbing through a page.
+
+#### Without the markup
+
+`useDataTable()` holds the whole state machine — sorting, paging, selection,
+expansion — and renders nothing, if you want the logic under your own markup:
+
+```ts
+const table = useDataTable({
+  rows: () => rows.value,
+  columns: () => columns,
+})
+// table.pageRows, table.toggleSort, table.headerSelection, …
+```
+
 ## License
 
 [MIT](https://github.com/therok1/iryx-ui/blob/main/LICENSE)

package/dist/component-names.d.ts

@@ -3,5 +3,5 @@
  * Consumed by the Vue plugin (global registration) and the Nuxt module
  * (auto-imports). Keep in sync with `src/components/index.ts`.
  */
-export declare const componentNames: readonly ["Alert", "App", "Badge", "Breadcrumb", "Button", "ButtonGroup", "Card", "Checkbox", "Combobox", "ConfirmDialog", "Dialog", "DropdownMenu", "EmptyState", "Form", "FormField", "Input", "Label", "NumberInput", "Pagination", "Progress", "RadioGroup", "Select", "Separator", "Skeleton", "Stat", "Stepper", "Switch", "Tabs", "Textarea", "Toaster", "Tooltip"];
+export declare const componentNames: readonly ["Alert", "App", "Badge", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Card", "Checkbox", "Combobox", "ConfirmDialog", "DatePicker", "DateRangePicker", "Dialog", "DropdownMenu", "EmptyState", "Form", "FormField", "Input", "Label", "NumberInput", "Pagination", "PasswordInput", "Progress", "RadioGroup", "Select", "Separator", "Skeleton", "Stat", "Stepper", "Switch", "Table", "Tabs", "Textarea", "Toaster", "Tooltip"];
 export type ComponentName = (typeof componentNames)[number];

package/dist/components/Alert.vue.d.ts

@@ -26,10 +26,21 @@ export interface AlertProps {
         content?: string;
         title?: string;
         description?: string;
+        actions?: string;
         close?: string;
     };
 }
-declare var __VLS_8: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {};
+type __VLS_Props = AlertProps;
+type __VLS_ModelProps = {
+    /**
+     * Dismissal as a model, so the common case is one binding rather than a
+     * `close` handler plus a `v-if` in every consumer. `close` still fires, for
+     * callers that want to confirm or persist before it goes.
+     */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {}, __VLS_21: {};
 type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_8) => any;
 } & {
@@ -37,12 +48,16 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_17) => any;
 } & {
-    close?: (props: typeof __VLS_19) => any;
+    actions?: (props: typeof __VLS_19) => any;
+} & {
+    close?: (props: typeof __VLS_21) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
-}, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     icon: IconLike | false;
     as: string;

package/dist/components/Badge.vue.d.ts

@@ -4,10 +4,11 @@ export interface BadgeProps {
     /** Merge props onto the immediate child instead of rendering an element. */
     asChild?: boolean;
     variant?: 'neutral' | 'success' | 'warning' | 'danger' | 'info';
-    /** `soft` is a tinted background; `solid` is a filled block of colour. */
-    tone?: 'soft' | 'solid';
     size?: 'sm' | 'md' | 'lg';
-    /** Show a small leading dot in the current text colour. */
+    /**
+     * Show a leading status dot. This also switches the look: the badge goes
+     * neutral and the dot alone carries the variant's colour.
+     */
     dot?: boolean;
     /** Text content. Ignored when the default slot is used. */
     label?: string;

package/dist/components/Banner.vue.d.ts

@@ -0,0 +1,81 @@
+import type { IconLike } from '../composables/icon';
+export interface BannerProps {
+    /** Render as a different element or component. */
+    as?: string;
+    variant?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'primary';
+    /**
+     * `static` sits in the flow, `top` sticks to the top of the scroll
+     * container, `bottom` pins to the bottom of the viewport.
+     */
+    position?: 'static' | 'top' | 'bottom';
+    /** Bold lead-in before the message. */
+    title?: string;
+    /** Message text. Ignored when the default slot is used. */
+    description?: string;
+    /** Leading icon. None by default — a banner is ambient, not a status report. */
+    icon?: IconLike;
+    /** Constrain the text to a readable measure while the fill still spans full width. */
+    contained?: boolean;
+    align?: 'start' | 'center';
+    /** Render a dismiss button. */
+    closable?: boolean;
+    /** Accessible name for the dismiss button — override for non-English apps. */
+    closeLabel?: string;
+    /**
+     * Accessible name for the landmark. A banner is a region rather than an
+     * alert: it is ambient, so it must not interrupt a screen reader mid-task.
+     */
+    label?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ container: 'max-w-3xl' }`. */
+    ui?: {
+        root?: string;
+        container?: string;
+        icon?: string;
+        content?: string;
+        title?: string;
+        actions?: string;
+        close?: string;
+    };
+}
+type __VLS_Props = BannerProps;
+type __VLS_ModelProps = {
+    /** Dismissal as a model, matching IAlert — bind it, or let the banner hide itself. */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {}, __VLS_21: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_8) => any;
+} & {
+    title?: (props: typeof __VLS_15) => any;
+} & {
+    default?: (props: typeof __VLS_17) => any;
+} & {
+    actions?: (props: typeof __VLS_19) => any;
+} & {
+    close?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    as: string;
+    closeLabel: string;
+    unstyled: boolean;
+    label: string;
+    contained: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Combobox.vue.d.ts

@@ -74,23 +74,24 @@ type __VLS_Slots = {} & {
     create?: (props: typeof __VLS_139) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
     "update:modelValue": (value: AcceptableValue) => any;
     create: (query: string) => any;
     highlight: (payload: {
         ref: HTMLElement;
         value: AcceptableValue;
     } | undefined) => any;
-    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<ComboboxProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((value: AcceptableValue) => any) | undefined;
     onCreate?: ((query: string) => any) | undefined;
     onHighlight?: ((payload: {
         ref: HTMLElement;
         value: AcceptableValue;
     } | undefined) => any) | undefined;
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     unstyled: boolean;
+    open: boolean;
     disabled: boolean;
     invalid: boolean;
     emptyText: string;
@@ -99,7 +100,6 @@ declare const __VLS_base: import("vue").DefineComponent<ComboboxProps, {}, {}, {
     virtual: boolean;
     estimateSize: number;
     overscan: number;
-    open: boolean;
     defaultOpen: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/DatePicker.vue.d.ts

@@ -0,0 +1,52 @@
+export interface DatePickerProps {
+    size?: 'sm' | 'md' | 'lg';
+    placeholder?: string;
+    disabled?: boolean;
+    /** Mark the field as invalid — styles the border and ring red. */
+    invalid?: boolean;
+    id?: string;
+    /** Earliest selectable date, as an ISO `YYYY-MM-DD` string. */
+    min?: string;
+    /** Latest selectable date, as an ISO `YYYY-MM-DD` string. */
+    max?: string;
+    /** Locale for the month names, weekday initials and the trigger's text. */
+    locale?: string;
+    /** How the selected date reads on the trigger. */
+    format?: Intl.DateTimeFormatOptions;
+    /** 0 is Sunday. Defaults to the locale's own convention. */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** Offer a "clear" action in the footer. */
+    clearable?: boolean;
+    /** Footer and navigation labels — override for non-English apps. */
+    todayLabel?: string;
+    clearLabel?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    /** Applied to the trigger, which is the element carrying the field chrome. */
+    class?: string;
+    /** Override classes per slot, e.g. `{ content: 'p-4' }`. */
+    ui?: Partial<Record<'trigger' | 'placeholder' | 'content' | 'header' | 'heading' | 'nav' | 'months' | 'grid' | 'headCell' | 'cell' | 'cellTrigger' | 'footer' | 'action', string>>;
+}
+type __VLS_Props = DatePickerProps;
+type __VLS_ModelProps = {
+    /** ISO `YYYY-MM-DD`, never a `Date`. See `composables/date.ts` for why. */
+    modelValue?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    placeholder: string;
+    invalid: boolean;
+    todayLabel: string;
+    clearLabel: string;
+    previousLabel: string;
+    nextLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;