iryx-ui 0.16.0 → 0.17.0

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 ["Accordion", "Alert", "App", "AppShell", "AspectRatio", "Avatar", "AvatarGroup", "Badge", "BarChart", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Card", "ChartLegend", "Checkbox", "ColorPicker", "Combobox", "Collapsible", "CommandPalette", "Container", "ConfirmDialog", "ContextMenu", "DatePicker", "DateRangePicker", "Dialog", "DonutChart", "Drawer", "DropdownMenu", "EmptyState", "FileUpload", "Form", "FormField", "Icon", "Input", "Kbd", "Label", "LineChart", "NavigationMenu", "NumberInput", "Menubar", "PageHeader", "Pagination", "PasswordInput", "PinInput", "Popover", "Progress", "RadioGroup", "ScrollArea", "ScrollFade", "Select", "Separator", "Sidebar", "SignaturePad", "Skeleton", "Slider", "Sparkline", "Splitter", "Stat", "Stepper", "Switch", "Table", "Tabs", "TagsInput", "Textarea", "Toaster", "Toggle", "ToggleGroup", "TimeField", "Timeline", "Toolbar", "Tooltip", "Tree"];
+export declare const componentNames: readonly ["Accordion", "Alert", "App", "AppShell", "AspectRatio", "Avatar", "AvatarGroup", "Badge", "BarChart", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Calendar", "Card", "ChartLegend", "Checkbox", "ColorPicker", "Combobox", "Collapsible", "CommandPalette", "Container", "ConfirmDialog", "ContextMenu", "DateField", "DatePicker", "DateRangePicker", "Dialog", "DonutChart", "Drawer", "DropdownMenu", "Editable", "EmptyState", "FileUpload", "Form", "FormField", "HoverCard", "Icon", "Input", "Kbd", "Label", "LineChart", "NavigationMenu", "NumberInput", "Menubar", "PageHeader", "Pagination", "PasswordInput", "PinInput", "Popover", "Progress", "RadioGroup", "ScrollArea", "ScrollFade", "Select", "Separator", "Sidebar", "SignaturePad", "Skeleton", "Slider", "Sparkline", "Splitter", "Stat", "Stepper", "Switch", "Table", "Tabs", "TagsInput", "Textarea", "Toaster", "Toggle", "ToggleGroup", "TimeField", "Timeline", "Toolbar", "Tooltip", "Tree"];
 export type ComponentName = (typeof componentNames)[number];

package/dist/component-names.js

@@ -1,4 +1,4 @@
 //#region src/component-names.ts
-var e = /* @__PURE__ */ "Accordion.Alert.App.AppShell.AspectRatio.Avatar.AvatarGroup.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Card.ChartLegend.Checkbox.ColorPicker.Combobox.Collapsible.CommandPalette.Container.ConfirmDialog.ContextMenu.DatePicker.DateRangePicker.Dialog.DonutChart.Drawer.DropdownMenu.EmptyState.FileUpload.Form.FormField.Icon.Input.Kbd.Label.LineChart.NavigationMenu.NumberInput.Menubar.PageHeader.Pagination.PasswordInput.PinInput.Popover.Progress.RadioGroup.ScrollArea.ScrollFade.Select.Separator.Sidebar.SignaturePad.Skeleton.Slider.Sparkline.Splitter.Stat.Stepper.Switch.Table.Tabs.TagsInput.Textarea.Toaster.Toggle.ToggleGroup.TimeField.Timeline.Toolbar.Tooltip.Tree".split(".");
+var e = /* @__PURE__ */ "Accordion.Alert.App.AppShell.AspectRatio.Avatar.AvatarGroup.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Calendar.Card.ChartLegend.Checkbox.ColorPicker.Combobox.Collapsible.CommandPalette.Container.ConfirmDialog.ContextMenu.DateField.DatePicker.DateRangePicker.Dialog.DonutChart.Drawer.DropdownMenu.Editable.EmptyState.FileUpload.Form.FormField.HoverCard.Icon.Input.Kbd.Label.LineChart.NavigationMenu.NumberInput.Menubar.PageHeader.Pagination.PasswordInput.PinInput.Popover.Progress.RadioGroup.ScrollArea.ScrollFade.Select.Separator.Sidebar.SignaturePad.Skeleton.Slider.Sparkline.Splitter.Stat.Stepper.Switch.Table.Tabs.TagsInput.Textarea.Toaster.Toggle.ToggleGroup.TimeField.Timeline.Toolbar.Tooltip.Tree".split(".");
 //#endregion
 export { e as componentNames };

package/dist/components/Calendar.js

@@ -0,0 +1,5 @@
+import e from "./Calendar.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/Calendar.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,69 @@
+export interface CalendarProps {
+    /** 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 and weekday initials. */
+    locale?: string;
+    /** 0 is Sunday. Defaults to the locale's own convention. */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** How the weekday headings read — `narrow` is `M`, `short` is `Mon`. */
+    weekdayFormat?: 'narrow' | 'short' | 'long';
+    /** Months shown side by side. */
+    months?: number;
+    /** Page a month at a time rather than a full view. Only matters past one month. */
+    pagedNavigation?: boolean;
+    /**
+     * Keep every month six rows tall. On by default: without it the calendar
+     * changes height as you page through, which moves everything below it.
+     */
+    fixedWeeks?: boolean;
+    /** Grey out the days that belong to the neighbouring months. */
+    disableDaysOutsideCurrentView?: boolean;
+    disabled?: boolean;
+    /** Selectable but not changeable. */
+    readonly?: boolean;
+    /** Move focus to the selected day, or today, on mount. */
+    initialFocus?: boolean;
+    /**
+     * Refuse a date — a taken slot, a closed day. Given an ISO `YYYY-MM-DD`
+     * string. Unavailable days are struck through rather than hidden, so the
+     * reader can see the day exists and is spoken for.
+     */
+    isUnavailable?: (date: string) => boolean;
+    /** Keep a date selected when it is clicked a second time. */
+    preventDeselect?: boolean;
+    /** Names the whole calendar for a screen reader. */
+    label?: string;
+    /** Navigation labels — override for non-English apps. */
+    previousLabel?: string;
+    nextLabel?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ cellTrigger: 'rounded-full' }`. */
+    ui?: Partial<Record<'root' | 'header' | 'heading' | 'nav' | 'months' | 'grid' | 'headCell' | 'cell' | 'cellTrigger', string>>;
+}
+/**
+ * A month grid that is always on screen, for the cases a popover is wrong for:
+ * a booking page, an availability view, a date beside the thing it applies to.
+ * [`IDatePicker`](/components/date-picker) is this same grid behind a field.
+ */
+type __VLS_Props = CalendarProps;
+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;
+    fixedWeeks: boolean;
+    previousLabel: string;
+    nextLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/Calendar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,168 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Icon.js";
+import { isoToday as n, toCalendarDate as r, toIsoDate as i } from "../composables/date.js";
+import { calendarTheme as a } from "../theme/calendar.js";
+import { Fragment as o, computed as s, createBlock as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, mergeModels as m, normalizeClass as h, openBlock as g, renderList as _, toDisplayString as v, unref as y, useModel as b, withCtx as x } from "vue";
+import { ArrowLeft01Icon as S, ArrowRight01Icon as C } from "@hugeicons/core-free-icons";
+import { CalendarCell as w, CalendarCellTrigger as T, CalendarGrid as E, CalendarGridBody as D, CalendarGridHead as O, CalendarGridRow as k, CalendarHeadCell as A, CalendarHeader as j, CalendarHeading as M, CalendarNext as N, CalendarPrev as P, CalendarRoot as F } from "reka-ui";
+//#region src/components/Calendar.vue?vue&type=script&setup=true&lang.ts
+var I = /*@__PURE__*/ p({
+	__name: "Calendar",
+	props: /*@__PURE__*/ m({
+		min: {},
+		max: {},
+		locale: {},
+		weekStartsOn: {},
+		weekdayFormat: {},
+		months: {},
+		pagedNavigation: { type: Boolean },
+		fixedWeeks: {
+			type: Boolean,
+			default: !0
+		},
+		disableDaysOutsideCurrentView: { type: Boolean },
+		disabled: { type: Boolean },
+		readonly: { type: Boolean },
+		initialFocus: { type: Boolean },
+		isUnavailable: {},
+		preventDeselect: { type: Boolean },
+		label: {},
+		previousLabel: { default: "Previous month" },
+		nextLabel: { default: "Next month" },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(p) {
+		let m = p, I = b(p, "modelValue"), L = e(), R = s(() => m.unstyled ?? L.unstyled), z = s({
+			get: () => r(I.value),
+			set: (e) => {
+				I.value = i(e);
+			}
+		}), B = s(() => r(m.min)), V = s(() => r(m.max)), H = s(() => {
+			let e = n();
+			if (m.min && e < m.min) return r(m.min);
+			if (m.max && e > m.max) return r(m.max);
+		}), U = s(() => {
+			let e = m.isUnavailable;
+			if (e) return (t) => {
+				let n = i(t);
+				return n ? e(n) : !1;
+			};
+		}), W = s(() => a());
+		function G(e, t) {
+			let n = m.ui?.[e];
+			return R.value ? [n, t] : W.value[e]({ class: [n, t] });
+		}
+		return (e, n) => (g(), c(y(F), {
+			modelValue: z.value,
+			"onUpdate:modelValue": n[0] ||= (e) => z.value = e,
+			"min-value": B.value,
+			"max-value": V.value,
+			locale: m.locale,
+			"week-starts-on": m.weekStartsOn,
+			"weekday-format": m.weekdayFormat,
+			"number-of-months": m.months,
+			"paged-navigation": m.pagedNavigation,
+			"fixed-weeks": m.fixedWeeks,
+			"disable-days-outside-current-view": m.disableDaysOutsideCurrentView,
+			disabled: m.disabled,
+			readonly: m.readonly,
+			"initial-focus": m.initialFocus,
+			"default-placeholder": H.value,
+			"is-date-unavailable": U.value,
+			"prevent-deselect": m.preventDeselect,
+			"calendar-label": m.label,
+			class: h(G("root", m.class))
+		}, {
+			default: x(({ grid: e, weekDays: n }) => [f(y(j), { class: h(G("header")) }, {
+				default: x(() => [
+					f(y(P), {
+						"aria-label": m.previousLabel,
+						class: h(G("nav"))
+					}, {
+						default: x(() => [f(t, { icon: y(S) }, null, 8, ["icon"])]),
+						_: 1
+					}, 8, ["aria-label", "class"]),
+					f(y(M), { class: h(G("heading")) }, null, 8, ["class"]),
+					f(y(N), {
+						"aria-label": m.nextLabel,
+						class: h(G("nav"))
+					}, {
+						default: x(() => [f(t, { icon: y(C) }, null, 8, ["icon"])]),
+						_: 1
+					}, 8, ["aria-label", "class"])
+				]),
+				_: 1
+			}, 8, ["class"]), u("div", { class: h(G("months")) }, [(g(!0), l(o, null, _(e, (e) => (g(), c(y(E), {
+				key: e.value.toString(),
+				class: h(G("grid"))
+			}, {
+				default: x(() => [f(y(O), null, {
+					default: x(() => [f(y(k), null, {
+						default: x(() => [(g(!0), l(o, null, _(n, (e) => (g(), c(y(A), {
+							key: e,
+							class: h(G("headCell"))
+						}, {
+							default: x(() => [d(v(e), 1)]),
+							_: 2
+						}, 1032, ["class"]))), 128))]),
+						_: 2
+					}, 1024)]),
+					_: 2
+				}, 1024), f(y(D), null, {
+					default: x(() => [(g(!0), l(o, null, _(e.rows, (t, n) => (g(), c(y(k), { key: `week-${n}` }, {
+						default: x(() => [(g(!0), l(o, null, _(t, (t) => (g(), c(y(w), {
+							key: t.toString(),
+							date: t,
+							class: h(G("cell"))
+						}, {
+							default: x(() => [f(y(T), {
+								day: t,
+								month: e.value,
+								class: h(G("cellTrigger"))
+							}, null, 8, [
+								"day",
+								"month",
+								"class"
+							])]),
+							_: 2
+						}, 1032, ["date", "class"]))), 128))]),
+						_: 2
+					}, 1024))), 128))]),
+					_: 2
+				}, 1024)]),
+				_: 2
+			}, 1032, ["class"]))), 128))], 2)]),
+			_: 1
+		}, 8, [
+			"modelValue",
+			"min-value",
+			"max-value",
+			"locale",
+			"week-starts-on",
+			"weekday-format",
+			"number-of-months",
+			"paged-navigation",
+			"fixed-weeks",
+			"disable-days-outside-current-view",
+			"disabled",
+			"readonly",
+			"initial-focus",
+			"default-placeholder",
+			"is-date-unavailable",
+			"prevent-deselect",
+			"calendar-label",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { I as default };

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

@@ -75,26 +75,26 @@ export interface ComboboxProps extends ComboboxRootProps {
         groupLabel?: string;
     };
 }
-declare var __VLS_16: {
+declare var __VLS_28: {
     option: ComboboxItemOption;
     remove: () => void;
-}, __VLS_70: {
+}, __VLS_107: {
     query: string;
-}, __VLS_78: {
+}, __VLS_115: {
     query: string;
-}, __VLS_80: {}, __VLS_159: {
+}, __VLS_117: {}, __VLS_196: {
     query: string;
 };
 type __VLS_Slots = {} & {
-    tag?: (props: typeof __VLS_16) => any;
+    tag?: (props: typeof __VLS_28) => any;
 } & {
-    empty?: (props: typeof __VLS_70) => any;
+    empty?: (props: typeof __VLS_107) => any;
 } & {
-    empty?: (props: typeof __VLS_78) => any;
+    empty?: (props: typeof __VLS_115) => any;
 } & {
-    default?: (props: typeof __VLS_80) => any;
+    default?: (props: typeof __VLS_117) => any;
 } & {
-    create?: (props: typeof __VLS_159) => any;
+    create?: (props: typeof __VLS_196) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: AcceptableValue) => any;