iryx-ui 0.6.0 → 0.7.0

package/README.md

@@ -288,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 |
@@ -434,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

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", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Card", "Checkbox", "Combobox", "ConfirmDialog", "Dialog", "DropdownMenu", "EmptyState", "Form", "FormField", "Input", "Label", "NumberInput", "Pagination", "Progress", "RadioGroup", "Select", "Separator", "Skeleton", "Stat", "Stepper", "Switch", "Table", "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/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;

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

@@ -0,0 +1,60 @@
+/** Both ends are ISO `YYYY-MM-DD` strings, and either may be absent. */
+export interface DateRange {
+    start: string | null;
+    end: string | null;
+}
+export interface DateRangePickerProps {
+    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 each end of the range 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;
+    /** Months shown side by side. Two makes picking a span across a boundary sane. */
+    months?: number;
+    /** Offer a "clear" action in the footer. */
+    clearable?: boolean;
+    /** Separator between the two dates on the trigger. */
+    separator?: string;
+    /** Footer and navigation labels — override for non-English apps. */
+    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 = DateRangePickerProps;
+type __VLS_ModelProps = {
+    modelValue?: DateRange;
+};
+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: DateRange) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DateRange) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    separator: string;
+    placeholder: string;
+    invalid: boolean;
+    months: number;
+    clearLabel: string;
+    previousLabel: string;
+    nextLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -7,16 +7,46 @@ export interface InputProps {
     /** Mark the field as invalid — styles the border and ring red. */
     invalid?: boolean;
     id?: string;
+    /** Show a clear button in the trailing area while the field has a value. */
+    clearable?: boolean;
+    /** Show a spinner in the trailing area. Does not disable the field. */
+    loading?: boolean;
+    /**
+     * Milliseconds to wait after the last keystroke before the model updates.
+     * `0` (the default) updates on every keystroke. Blur and Enter flush a
+     * pending update immediately, so a submit never reads a stale value.
+     */
+    debounce?: number;
+    /** Accessible name for the clear button — override for non-English apps. */
+    clearLabel?: string;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
+    /** Applied to the outer field, which is the element carrying the chrome. */
     class?: string;
+    /** Override classes per slot, e.g. `{ input: 'text-right' }`. */
+    ui?: {
+        root?: string;
+        input?: string;
+        leading?: string;
+        trailing?: string;
+        clear?: string;
+    };
 }
 type __VLS_Props = InputProps;
 type __VLS_ModelProps = {
     modelValue?: string | number | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_1) => any;
+} & {
+    trailing?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** The underlying element, for focus management by the caller. */
+    input: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | number | null | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | number | null | undefined) => any) | undefined;
@@ -24,6 +54,14 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     unstyled: boolean;
     type: string;
     invalid: boolean;
+    clearLabel: string;
+    debounce: number;
 }, {}, {}, {}, 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/Pagination.vue.d.ts

@@ -42,12 +42,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }>, {
     unstyled: boolean;
     label: string;
+    nextLabel: string;
     total: number;
     itemsPerPage: number;
     siblingCount: number;
     showEdges: boolean;
     prevLabel: string;
-    nextLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -0,0 +1,54 @@
+export interface PasswordInputProps {
+    size?: 'sm' | 'md' | 'lg';
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    /** Mark the field as invalid — styles the border and ring red. */
+    invalid?: boolean;
+    id?: string;
+    /** Show the reveal toggle in the trailing area. */
+    toggle?: boolean;
+    /** Render a four-segment strength meter under the field. */
+    strength?: boolean;
+    /** Accessible names for the reveal toggle — override for non-English apps. */
+    showLabel?: string;
+    hideLabel?: string;
+    /**
+     * Words for scores 1–4, weakest first. Score 0 shows nothing, so this takes
+     * exactly four entries. Override for non-English apps.
+     */
+    strengthLabels?: [string, string, string, string];
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    /** Applied to the outer wrapper, which stacks the field above the meter. */
+    class?: string;
+    /** Override classes per slot, e.g. `{ meter: 'mt-1' }`. */
+    ui?: {
+        root?: string;
+        input?: string;
+        toggle?: string;
+        meter?: string;
+        track?: string;
+        segment?: string;
+        label?: string;
+    };
+}
+type __VLS_Props = PasswordInputProps;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+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) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    invalid: boolean;
+    toggle: boolean;
+    showLabel: string;
+    hideLabel: string;
+    strengthLabels: [string, string, string, string];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,6 +1,18 @@
 export interface TextareaProps {
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Fixed height in rows. Ignored when `autosize` is set — pass the bounds
+     * through `autosize` instead.
+     */
     rows?: number;
+    /**
+     * Grow with the content. `true` grows without limit; `{ min, max }` bounds
+     * it in rows, and the field scrolls once it hits `max`.
+     */
+    autosize?: boolean | {
+        min?: number;
+        max?: number;
+    };
     placeholder?: string;
     disabled?: boolean;
     required?: boolean;
@@ -16,7 +28,10 @@ type __VLS_ModelProps = {
     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, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** The underlying element, for focus management by the caller. */
+    textarea: import("vue").Ref<HTMLTextAreaElement | undefined, HTMLTextAreaElement | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | null | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;

package/dist/components/index.d.ts

@@ -9,6 +9,8 @@ export { default as Card } from './Card.vue';
 export { default as Checkbox } from './Checkbox.vue';
 export { default as Combobox } from './Combobox.vue';
 export { default as ConfirmDialog } from './ConfirmDialog.vue';
+export { default as DatePicker } from './DatePicker.vue';
+export { default as DateRangePicker } from './DateRangePicker.vue';
 export { default as Dialog } from './Dialog.vue';
 export { default as DropdownMenu } from './DropdownMenu.vue';
 export { default as EmptyState } from './EmptyState.vue';
@@ -18,6 +20,7 @@ export { default as Input } from './Input.vue';
 export { default as Label } from './Label.vue';
 export { default as NumberInput } from './NumberInput.vue';
 export { default as Pagination } from './Pagination.vue';
+export { default as PasswordInput } from './PasswordInput.vue';
 export { default as Progress } from './Progress.vue';
 export { default as RadioGroup } from './RadioGroup.vue';
 export { default as Select } from './Select.vue';

package/dist/composables/date.d.ts

@@ -0,0 +1,21 @@
+import type { DateValue } from '@internationalized/date';
+import { CalendarDate } from '@internationalized/date';
+/**
+ * Parse an ISO date, or `undefined` if it is absent or malformed.
+ *
+ * Malformed input resolves to "no selection" rather than throwing: the value
+ * often comes from a URL or a stale draft, and a blank calendar is a better
+ * outcome for the user than a crashed render.
+ */
+export declare function toCalendarDate(iso: string | null | undefined): CalendarDate | undefined;
+/** Back to the canonical `YYYY-MM-DD`. */
+export declare function toIsoDate(date: DateValue | null | undefined): string | null;
+/** Today in the viewer's own zone, as an ISO date string. */
+export declare function isoToday(): string;
+/**
+ * Render an ISO date for display. Returns `''` for absent or malformed input
+ * so a caller can fall back to a placeholder.
+ */
+export declare function formatIsoDate(iso: string | null | undefined, locale?: string, options?: Intl.DateTimeFormatOptions): string;
+export { CalendarDate };
+export type { DateValue };

package/dist/index.d.ts

@@ -12,6 +12,8 @@ export type { CardProps } from './components/Card.vue';
 export type { CheckboxProps } from './components/Checkbox.vue';
 export type { ComboboxItemGroup, ComboboxItemOption, ComboboxItems, ComboboxProps } from './components/Combobox.vue';
 export type { ConfirmDialogProps } from './components/ConfirmDialog.vue';
+export type { DatePickerProps } from './components/DatePicker.vue';
+export type { DateRange, DateRangePickerProps } from './components/DateRangePicker.vue';
 export type { DialogProps } from './components/Dialog.vue';
 export type { DropdownMenuProps } from './components/DropdownMenu.vue';
 export type { EmptyStateProps } from './components/EmptyState.vue';
@@ -21,6 +23,7 @@ export type { InputProps } from './components/Input.vue';
 export type { LabelProps } from './components/Label.vue';
 export type { NumberInputProps } from './components/NumberInput.vue';
 export type { PaginationProps } from './components/Pagination.vue';
+export type { PasswordInputProps } from './components/PasswordInput.vue';
 export type { ProgressProps } from './components/Progress.vue';
 export type { RadioGroupItemOption, RadioGroupProps } from './components/RadioGroup.vue';
 export type { SelectItemGroup, SelectItemOption, SelectItems, SelectProps } from './components/Select.vue';
@@ -38,6 +41,7 @@ export * from './composables/appearance';
 export * from './composables/button-group';
 export * from './composables/confirm';
 export * from './composables/data-table';
+export * from './composables/date';
 export * from './composables/decimal';
 export * from './composables/dropdown-menu';
 export * from './composables/form';

package/dist/index.js

@@ -28,47 +28,54 @@ import { resolveConfirm as B, useConfirm as V, useConfirmState as H } from "./pa
 import { dialogTheme as U } from "./packages/iryx-ui/src/theme/dialog.js";
 import W from "./packages/iryx-ui/src/components/Dialog.js";
 import G from "./packages/iryx-ui/src/components/ConfirmDialog.js";
-import { dropdownMenuTheme as K } from "./packages/iryx-ui/src/theme/dropdown-menu.js";
-import { isSeparator as q, isSubmenu as J } from "./packages/iryx-ui/src/composables/dropdown-menu.js";
-import Y from "./packages/iryx-ui/src/components/DropdownMenu.js";
-import { emptyStateTheme as X } from "./packages/iryx-ui/src/theme/empty-state.js";
-import Z from "./packages/iryx-ui/src/components/EmptyState.js";
-import Q from "./packages/iryx-ui/src/components/Form.js";
-import { labelTheme as $ } from "./packages/iryx-ui/src/theme/label.js";
-import ee from "./packages/iryx-ui/src/components/Label.js";
-import te from "./packages/iryx-ui/src/components/FormField.js";
-import ne from "./packages/iryx-ui/src/components/Input.js";
-import { addDecimals as re, clampDecimal as ie, compareDecimals as ae, formatDecimal as oe, formatForLocale as se, isDecimal as ce, localeSeparators as le, parseDecimal as ue, parseFromLocale as de, roundDecimal as fe, toEditable as pe } from "./packages/iryx-ui/src/composables/decimal.js";
-import { numberInputTheme as me } from "./packages/iryx-ui/src/theme/number-input.js";
-import he from "./packages/iryx-ui/src/components/NumberInput.js";
-import { paginationTheme as ge } from "./packages/iryx-ui/src/theme/pagination.js";
-import _e from "./packages/iryx-ui/src/components/Pagination.js";
-import { progressTheme as ve } from "./packages/iryx-ui/src/theme/progress.js";
-import ye from "./packages/iryx-ui/src/components/Progress.js";
-import { radioGroupTheme as be } from "./packages/iryx-ui/src/theme/radio-group.js";
-import xe from "./packages/iryx-ui/src/components/RadioGroup.js";
-import { selectTheme as Se } from "./packages/iryx-ui/src/theme/select.js";
-import Ce from "./packages/iryx-ui/src/components/Select.js";
-import { separatorTheme as we } from "./packages/iryx-ui/src/theme/separator.js";
-import Te from "./packages/iryx-ui/src/components/Separator.js";
-import { skeletonTheme as Ee } from "./packages/iryx-ui/src/theme/skeleton.js";
-import De from "./packages/iryx-ui/src/components/Skeleton.js";
-import { statTheme as Oe } from "./packages/iryx-ui/src/theme/stat.js";
-import ke from "./packages/iryx-ui/src/components/Stat.js";
-import { stepperTheme as Ae } from "./packages/iryx-ui/src/theme/stepper.js";
-import je from "./packages/iryx-ui/src/components/Stepper.js";
-import { switchTheme as Me } from "./packages/iryx-ui/src/theme/switch.js";
-import Ne from "./packages/iryx-ui/src/components/Switch.js";
-import { getRowValue as Pe, useDataTable as Fe } from "./packages/iryx-ui/src/composables/data-table.js";
-import { tableTheme as Ie } from "./packages/iryx-ui/src/theme/table.js";
-import Le from "./packages/iryx-ui/src/components/Table.js";
-import { tabsTheme as Re } from "./packages/iryx-ui/src/theme/tabs.js";
-import ze from "./packages/iryx-ui/src/components/Tabs.js";
-import Be from "./packages/iryx-ui/src/components/Textarea.js";
-import { useToast as Ve, useToastState as He } from "./packages/iryx-ui/src/composables/toast.js";
-import { toastTheme as Ue } from "./packages/iryx-ui/src/theme/toast.js";
-import We from "./packages/iryx-ui/src/components/Toaster.js";
-import { tooltipTheme as Ge } from "./packages/iryx-ui/src/theme/tooltip.js";
-import Ke from "./packages/iryx-ui/src/components/Tooltip.js";
-import { IryxUi as qe, createIryxUi as Je } from "./packages/iryx-ui/src/plugin.js";
-export { a as Alert, d as App, p as Badge, h as Banner, _ as Breadcrumb, x as Button, C as ButtonGroup, T as Card, D as Checkbox, z as Combobox, G as ConfirmDialog, W as Dialog, Y as DropdownMenu, Z as EmptyState, Q as Form, te as FormField, ne as Input, qe as IryxUi, ee as Label, he as NumberInput, _e as Pagination, ye as Progress, xe as RadioGroup, Ce as Select, Te as Separator, De as Skeleton, ke as Stat, je as Stepper, Ne as Switch, Le as Table, ze as Tabs, Be as Textarea, We as Toaster, Ke as Tooltip, re as addDecimals, i as alertTheme, c as applyTheme, f as badgeTheme, m as bannerTheme, g as breadcrumbTheme, v as buttonGroupContextKey, S as buttonGroupTheme, b as buttonTheme, w as cardTheme, E as checkboxTheme, ie as clampDecimal, l as clearTheme, R as comboboxTheme, ae as compareDecimals, e as componentNames, Je as createIryxUi, t as defaultConfig, U as dialogTheme, K as dropdownMenuTheme, X as emptyStateTheme, F as fieldBase, O as formContextKey, k as formFieldContextKey, oe as formatDecimal, se as formatForLocale, A as getByPath, Pe as getRowValue, o as initAppearance, I as inputTheme, n as iryxUiConfigKey, ce as isDecimal, q as isSeparator, j as isStandardSchema, J as isSubmenu, M as issuePath, $ as labelTheme, le as localeSeparators, me as numberInputTheme, ge as paginationTheme, ue as parseDecimal, de as parseFromLocale, ve as progressTheme, be as radioGroupTheme, B as resolveConfirm, fe as roundDecimal, Se as selectTheme, we as separatorTheme, Ee as skeletonTheme, Oe as statTheme, Ae as stepperTheme, Me as switchTheme, Ie as tableTheme, Re as tabsTheme, L as textareaTheme, u as themes, pe as toEditable, Ue as toastTheme, Ge as tooltipTheme, s as useAppearance, y as useButtonGroup, V as useConfirm, H as useConfirmState, Fe as useDataTable, N as useForm, P as useFormField, r as useIryxUiConfig, Ve as useToast, He as useToastState };
+import { $2aaf608024c21ca1$export$99faa760c7908e4f as K } from "./node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/CalendarDate.js";
+import { formatIsoDate as q, isoToday as J, toCalendarDate as Y, toIsoDate as X } from "./packages/iryx-ui/src/composables/date.js";
+import { datePickerTheme as Z } from "./packages/iryx-ui/src/theme/date-picker.js";
+import Q from "./packages/iryx-ui/src/components/DatePicker.js";
+import $ from "./packages/iryx-ui/src/components/DateRangePicker.js";
+import { dropdownMenuTheme as ee } from "./packages/iryx-ui/src/theme/dropdown-menu.js";
+import { isSeparator as te, isSubmenu as ne } from "./packages/iryx-ui/src/composables/dropdown-menu.js";
+import re from "./packages/iryx-ui/src/components/DropdownMenu.js";
+import { emptyStateTheme as ie } from "./packages/iryx-ui/src/theme/empty-state.js";
+import ae from "./packages/iryx-ui/src/components/EmptyState.js";
+import oe from "./packages/iryx-ui/src/components/Form.js";
+import { labelTheme as se } from "./packages/iryx-ui/src/theme/label.js";
+import ce from "./packages/iryx-ui/src/components/Label.js";
+import le from "./packages/iryx-ui/src/components/FormField.js";
+import ue from "./packages/iryx-ui/src/components/Input.js";
+import { addDecimals as de, clampDecimal as fe, compareDecimals as pe, formatDecimal as me, formatForLocale as he, isDecimal as ge, localeSeparators as _e, parseDecimal as ve, parseFromLocale as ye, roundDecimal as be, toEditable as xe } from "./packages/iryx-ui/src/composables/decimal.js";
+import { numberInputTheme as Se } from "./packages/iryx-ui/src/theme/number-input.js";
+import Ce from "./packages/iryx-ui/src/components/NumberInput.js";
+import { paginationTheme as we } from "./packages/iryx-ui/src/theme/pagination.js";
+import Te from "./packages/iryx-ui/src/components/Pagination.js";
+import { passwordInputTheme as Ee } from "./packages/iryx-ui/src/theme/password-input.js";
+import De from "./packages/iryx-ui/src/components/PasswordInput.js";
+import { progressTheme as Oe } from "./packages/iryx-ui/src/theme/progress.js";
+import ke from "./packages/iryx-ui/src/components/Progress.js";
+import { radioGroupTheme as Ae } from "./packages/iryx-ui/src/theme/radio-group.js";
+import je from "./packages/iryx-ui/src/components/RadioGroup.js";
+import { selectTheme as Me } from "./packages/iryx-ui/src/theme/select.js";
+import Ne from "./packages/iryx-ui/src/components/Select.js";
+import { separatorTheme as Pe } from "./packages/iryx-ui/src/theme/separator.js";
+import Fe from "./packages/iryx-ui/src/components/Separator.js";
+import { skeletonTheme as Ie } from "./packages/iryx-ui/src/theme/skeleton.js";
+import Le from "./packages/iryx-ui/src/components/Skeleton.js";
+import { statTheme as Re } from "./packages/iryx-ui/src/theme/stat.js";
+import ze from "./packages/iryx-ui/src/components/Stat.js";
+import { stepperTheme as Be } from "./packages/iryx-ui/src/theme/stepper.js";
+import Ve from "./packages/iryx-ui/src/components/Stepper.js";
+import { switchTheme as He } from "./packages/iryx-ui/src/theme/switch.js";
+import Ue from "./packages/iryx-ui/src/components/Switch.js";
+import { getRowValue as We, useDataTable as Ge } from "./packages/iryx-ui/src/composables/data-table.js";
+import { tableTheme as Ke } from "./packages/iryx-ui/src/theme/table.js";
+import qe from "./packages/iryx-ui/src/components/Table.js";
+import { tabsTheme as Je } from "./packages/iryx-ui/src/theme/tabs.js";
+import Ye from "./packages/iryx-ui/src/components/Tabs.js";
+import Xe from "./packages/iryx-ui/src/components/Textarea.js";
+import { useToast as Ze, useToastState as Qe } from "./packages/iryx-ui/src/composables/toast.js";
+import { toastTheme as $e } from "./packages/iryx-ui/src/theme/toast.js";
+import et from "./packages/iryx-ui/src/components/Toaster.js";
+import { tooltipTheme as tt } from "./packages/iryx-ui/src/theme/tooltip.js";
+import nt from "./packages/iryx-ui/src/components/Tooltip.js";
+import { IryxUi as rt, createIryxUi as it } from "./packages/iryx-ui/src/plugin.js";
+export { a as Alert, d as App, p as Badge, h as Banner, _ as Breadcrumb, x as Button, C as ButtonGroup, K as CalendarDate, T as Card, D as Checkbox, z as Combobox, G as ConfirmDialog, Q as DatePicker, $ as DateRangePicker, W as Dialog, re as DropdownMenu, ae as EmptyState, oe as Form, le as FormField, ue as Input, rt as IryxUi, ce as Label, Ce as NumberInput, Te as Pagination, De as PasswordInput, ke as Progress, je as RadioGroup, Ne as Select, Fe as Separator, Le as Skeleton, ze as Stat, Ve as Stepper, Ue as Switch, qe as Table, Ye as Tabs, Xe as Textarea, et as Toaster, nt as Tooltip, de as addDecimals, i as alertTheme, c as applyTheme, f as badgeTheme, m as bannerTheme, g as breadcrumbTheme, v as buttonGroupContextKey, S as buttonGroupTheme, b as buttonTheme, w as cardTheme, E as checkboxTheme, fe as clampDecimal, l as clearTheme, R as comboboxTheme, pe as compareDecimals, e as componentNames, it as createIryxUi, Z as datePickerTheme, t as defaultConfig, U as dialogTheme, ee as dropdownMenuTheme, ie as emptyStateTheme, F as fieldBase, O as formContextKey, k as formFieldContextKey, me as formatDecimal, he as formatForLocale, q as formatIsoDate, A as getByPath, We as getRowValue, o as initAppearance, I as inputTheme, n as iryxUiConfigKey, ge as isDecimal, te as isSeparator, j as isStandardSchema, ne as isSubmenu, J as isoToday, M as issuePath, se as labelTheme, _e as localeSeparators, Se as numberInputTheme, we as paginationTheme, ve as parseDecimal, ye as parseFromLocale, Ee as passwordInputTheme, Oe as progressTheme, Ae as radioGroupTheme, B as resolveConfirm, be as roundDecimal, Me as selectTheme, Pe as separatorTheme, Ie as skeletonTheme, Re as statTheme, Be as stepperTheme, He as switchTheme, Ke as tableTheme, Je as tabsTheme, L as textareaTheme, u as themes, Y as toCalendarDate, xe as toEditable, X as toIsoDate, $e as toastTheme, tt as tooltipTheme, s as useAppearance, y as useButtonGroup, V as useConfirm, H as useConfirmState, Ge as useDataTable, N as useForm, P as useFormField, r as useIryxUiConfig, Ze as useToast, Qe as useToastState };