@comfyorg/design-system 1.1.0 → 1.2.0

package/dist/multi-select/MultiSelectTrigger.vue.js

@@ -0,0 +1,2 @@
+import { t as MultiSelectTrigger_default } from "../shared/MultiSelectTrigger-lmuXqETa.js";
+export { MultiSelectTrigger_default as default };

package/dist/multi-select/types.d.ts

@@ -0,0 +1,35 @@
+import { StyleValue } from 'vue';
+import { SelectOption } from '@comfyorg/design-system/lib/select/types';
+export type MultiSelectProps = MultiSelectBaseProps & ({
+    showSearchBox?: false;
+    searchLabel?: string;
+} | {
+    showSearchBox: boolean;
+    searchLabel: string;
+}) & ({
+    showClearButton?: false;
+    clearAllLabel?: string;
+} | {
+    showClearButton: boolean;
+    clearAllLabel: string;
+}) & ({
+    showSelectedCount?: false;
+    formatSelectedCount?: (count: number) => string;
+} | {
+    showSelectedCount: boolean;
+    formatSelectedCount: (count: number) => string;
+});
+export interface MultiSelectBaseProps {
+    accessibleLabel: string;
+    emptyText: string;
+    label?: string;
+    options?: SelectOption[];
+    size?: 'lg' | 'md';
+    disabled?: boolean;
+    actionsPlacement?: 'header' | 'footer';
+    searchPlaceholder?: string;
+    listMaxHeight?: string;
+    popoverMinWidth?: string;
+    popoverMaxWidth?: string;
+    contentStyle?: StyleValue;
+}

package/dist/navigation/NavTitle.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    title: string;
+    modelValue?: boolean;
+    collapsible?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/navigation/NavTitle.vue.js

@@ -0,0 +1,42 @@
+import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "vue";
+//#region src/components/navigation/NavTitle.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "m-0 text-xs font-bold text-muted-foreground uppercase" };
+//#endregion
+//#region src/components/navigation/NavTitle.vue
+var NavTitle_default = /* @__PURE__ */ defineComponent({
+	__name: "NavTitle",
+	props: {
+		title: {},
+		modelValue: {
+			type: Boolean,
+			default: false
+		},
+		collapsible: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const isCollapsed = computed({
+			get: () => __props.modelValue,
+			set: (value) => emit("update:modelValue", value)
+		});
+		const toggleCollapse = () => {
+			isCollapsed.value = !isCollapsed.value;
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(cn)("m-0 flex items-center justify-between px-3 py-0 pt-5", __props.collapsible && "cursor-pointer select-none")),
+				onClick: _cache[0] || (_cache[0] = ($event) => __props.collapsible && toggleCollapse())
+			}, [createElementVNode("h3", _hoisted_1, toDisplayString(__props.title), 1), __props.collapsible ? (openBlock(), createElementBlock("i", {
+				key: 0,
+				class: normalizeClass(unref(cn)("size-3 text-muted-foreground transition-transform duration-200", isCollapsed.value ? "icon-[lucide--chevron-right]" : "icon-[lucide--chevron-down]"))
+			}, null, 2)) : createCommentVNode("", true)], 2);
+		};
+	}
+});
+//#endregion
+export { NavTitle_default as default };

package/dist/navigation/SidebarTopArea.vue.d.ts

@@ -0,0 +1,15 @@
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    actions?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, 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/navigation/SidebarTopArea.vue.js

@@ -0,0 +1,16 @@
+import { t as _plugin_vue_export_helper_default } from "../shared/_plugin-vue_export-helper-BOaGB7Aw.js";
+import { createCommentVNode, createElementBlock, createElementVNode, openBlock, renderSlot } from "vue";
+//#region src/components/navigation/SidebarTopArea.vue
+var _sfc_main = {};
+var _hoisted_1 = { class: "flex items-center gap-2 px-4 py-2" };
+var _hoisted_2 = { class: "min-w-0 flex-1" };
+var _hoisted_3 = {
+	key: 0,
+	class: "flex shrink-0 items-center gap-2"
+};
+function _sfc_render(_ctx, _cache) {
+	return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")]), _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true)]);
+}
+var SidebarTopArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
+//#endregion
+export { SidebarTopArea_default as default };

package/dist/number-field/NumberField.vue.d.ts

@@ -0,0 +1,26 @@
+import { NumberFieldRootProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = NumberFieldRootProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_10: {
+    modelValue: number | undefined;
+    textValue: string;
+    readonly: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, 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/number-field/NumberField.vue.js

@@ -0,0 +1,75 @@
+import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { createBlock, createPropsRestProxy, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { NumberFieldRoot, useForwardProps } from "reka-ui";
+//#endregion
+//#region src/components/number-field/NumberField.vue
+var NumberField_default = /* @__PURE__ */ defineComponent({
+	__name: "NumberField",
+	props: {
+		defaultValue: {},
+		modelValue: {},
+		min: {},
+		max: {},
+		step: {},
+		stepSnapping: {
+			type: Boolean,
+			default: false
+		},
+		allowInvalid: { type: Boolean },
+		focusOnChange: { type: Boolean },
+		formatOptions: {},
+		locale: {},
+		disabled: { type: Boolean },
+		readonly: { type: Boolean },
+		disableWheelChange: {
+			type: Boolean,
+			default: true
+		},
+		invertWheelChange: { type: Boolean },
+		id: {},
+		startingValue: {},
+		asChild: { type: Boolean },
+		as: {},
+		name: {},
+		required: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const restProps = createPropsRestProxy(__props, [
+			"class",
+			"stepSnapping",
+			"disableWheelChange"
+		]);
+		const emits = __emit;
+		const forwarded = useForwardProps(restProps);
+		function updateModelValue(value) {
+			if (value === void 0 || value === restProps.modelValue) return;
+			emits("update:modelValue", value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(NumberFieldRoot), mergeProps(unref(forwarded), {
+				"data-slot": "number-field",
+				"step-snapping": __props.stepSnapping,
+				"disable-wheel-change": __props.disableWheelChange,
+				class: unref(cn)("flex h-10 w-full items-center rounded-lg bg-secondary text-foreground focus-within:ring-1 focus-within:ring-ring hover:bg-accent data-disabled:pointer-events-none data-disabled:opacity-50", __props.class),
+				"onUpdate:modelValue": updateModelValue
+			}), {
+				default: withCtx((slotProps) => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps)))]),
+				_: 3
+			}, 16, [
+				"step-snapping",
+				"disable-wheel-change",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { NumberField_default as default };

package/dist/number-field/NumberFieldDecrement.vue.d.ts

@@ -0,0 +1,18 @@
+import { NumberFieldDecrementProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = NumberFieldDecrementProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/number-field/NumberFieldDecrement.vue.js

@@ -0,0 +1,35 @@
+import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { createBlock, createElementVNode, createPropsRestProxy, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { NumberFieldDecrement, useForwardProps } from "reka-ui";
+//#endregion
+//#region src/components/number-field/NumberFieldDecrement.vue
+var NumberFieldDecrement_default = /* @__PURE__ */ defineComponent({
+	__name: "NumberFieldDecrement",
+	props: {
+		disabled: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(__props) {
+		const restProps = createPropsRestProxy(__props, ["class"]);
+		const forwarded = useForwardProps(restProps);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(NumberFieldDecrement), mergeProps(unref(forwarded), {
+				"data-slot": "number-field-decrement",
+				class: unref(cn)("flex h-full w-6 shrink-0 cursor-pointer items-center justify-center rounded-l-lg border-none bg-transparent text-muted-foreground hover:bg-accent focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset disabled:pointer-events-none disabled:opacity-30", __props.class)
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createElementVNode("i", { class: "icon-[lucide--minus]" }, null, -1))])]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+export { NumberFieldDecrement_default as default };

package/dist/number-field/NumberFieldIncrement.vue.d.ts

@@ -0,0 +1,18 @@
+import { NumberFieldIncrementProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = NumberFieldIncrementProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/number-field/NumberFieldIncrement.vue.js

@@ -0,0 +1,35 @@
+import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { createBlock, createElementVNode, createPropsRestProxy, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { NumberFieldIncrement, useForwardProps } from "reka-ui";
+//#endregion
+//#region src/components/number-field/NumberFieldIncrement.vue
+var NumberFieldIncrement_default = /* @__PURE__ */ defineComponent({
+	__name: "NumberFieldIncrement",
+	props: {
+		disabled: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(__props) {
+		const restProps = createPropsRestProxy(__props, ["class"]);
+		const forwarded = useForwardProps(restProps);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(NumberFieldIncrement), mergeProps(unref(forwarded), {
+				"data-slot": "number-field-increment",
+				class: unref(cn)("flex h-full w-6 shrink-0 cursor-pointer items-center justify-center rounded-r-lg border-none bg-transparent text-muted-foreground hover:bg-accent focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset disabled:pointer-events-none disabled:opacity-30", __props.class)
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createElementVNode("i", { class: "icon-[lucide--plus]" }, null, -1))])]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+export { NumberFieldIncrement_default as default };

package/dist/number-field/NumberFieldInput.vue.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/number-field/NumberFieldInput.vue.js

@@ -0,0 +1,25 @@
+import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { createBlock, defineComponent, normalizeClass, openBlock, unref } from "vue";
+import { NumberFieldInput } from "reka-ui";
+//#endregion
+//#region src/components/number-field/NumberFieldInput.vue
+var NumberFieldInput_default = /* @__PURE__ */ defineComponent({
+	__name: "NumberFieldInput",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(NumberFieldInput), {
+				"data-slot": "number-field-input",
+				class: normalizeClass(unref(cn)("min-w-0 flex-1 border-none bg-transparent text-center text-base focus-visible:outline-none", __props.class))
+			}, null, 8, ["class"]);
+		};
+	}
+});
+//#endregion
+export { NumberFieldInput_default as default };

package/dist/number-field/PropertyNumberField.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    label: string;
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    commit: (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCommit?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/number-field/PropertyNumberField.vue.js

@@ -0,0 +1,56 @@
+import { t as Input_default } from "../shared/Input-39RLwDr2.js";
+import { createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, openBlock, ref, toDisplayString, unref, watch } from "vue";
+//#region src/components/number-field/PropertyNumberField.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex min-w-0 flex-1 items-center gap-1 rounded-md border bg-secondary px-1.5 py-1" };
+var _hoisted_2 = { class: "shrink-0 text-xs text-muted-foreground" };
+//#endregion
+//#region src/components/number-field/PropertyNumberField.vue
+var PropertyNumberField_default = /* @__PURE__ */ defineComponent({
+	__name: "PropertyNumberField",
+	props: {
+		label: {},
+		value: {},
+		min: {},
+		max: {},
+		step: { default: 1 }
+	},
+	emits: ["commit"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const draft = ref(__props.value);
+		watch(() => __props.value, (next) => {
+			draft.value = next;
+		});
+		function onChange() {
+			const raw = draft.value;
+			const next = typeof raw === "string" && raw.trim() === "" ? NaN : Number(raw);
+			if (Number.isFinite(next)) {
+				const low = __props.min ?? -Infinity;
+				const high = __props.max ?? Infinity;
+				emit("commit", Math.min(high, Math.max(low, next)));
+			}
+			nextTick(() => {
+				draft.value = __props.value;
+			});
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("label", _hoisted_1, [createElementVNode("span", _hoisted_2, toDisplayString(__props.label), 1), createVNode(unref(Input_default), {
+				modelValue: draft.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => draft.value = $event),
+				type: "number",
+				min: __props.min,
+				max: __props.max,
+				step: __props.step,
+				class: "h-auto [appearance:textfield] rounded-none bg-transparent p-0 text-xs focus-visible:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+				onChange
+			}, null, 8, [
+				"modelValue",
+				"min",
+				"max",
+				"step"
+			])]);
+		};
+	}
+});
+//#endregion
+export { PropertyNumberField_default as default };

package/dist/pagination/Pagination.vue.d.ts

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    total: number;
+    itemsPerPageLabel: string;
+    previousLabel: string;
+    nextLabel: string;
+    formatPageLabel: (page: number) => string;
+    itemsPerPageOptions?: number[];
+};
+type __VLS_ModelProps = {
+    'page'?: number;
+    'itemsPerPage'?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:page": (value: number) => any;
+    "update:itemsPerPage": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+    "onUpdate:itemsPerPage"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/pagination/Pagination.vue.js

@@ -0,0 +1,140 @@
+import { t as Button_default } from "../shared/Button-CilmsOkY.js";
+import { t as Select_default } from "../shared/Select-CP3OZjtL.js";
+import { t as SelectContent_default } from "../shared/SelectContent-C8aNlcFf.js";
+import { t as SelectItem_default } from "../shared/SelectItem-tU4CIa5J.js";
+import { t as SelectTrigger_default } from "../shared/SelectTrigger-CCDiZW91.js";
+import { t as SelectValue_default } from "../shared/SelectValue-DFZFSiQp.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, toDisplayString, unref, useModel, withCtx } from "vue";
+import { PaginationEllipsis, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot } from "reka-ui";
+//#region src/components/pagination/Pagination.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex flex-wrap items-center justify-center gap-2" };
+var _hoisted_2 = {
+	key: 0,
+	class: "mr-2 flex items-center gap-2"
+};
+var _hoisted_3 = { class: "text-sm text-muted-foreground" };
+var ellipsisClass = "inline-flex size-8 items-center justify-center text-sm text-muted-foreground";
+//#endregion
+//#region src/components/pagination/Pagination.vue
+var Pagination_default = /* @__PURE__ */ defineComponent({
+	__name: "Pagination",
+	props: /*@__PURE__*/ mergeModels({
+		total: {},
+		itemsPerPageLabel: {},
+		previousLabel: {},
+		nextLabel: {},
+		formatPageLabel: { type: Function },
+		itemsPerPageOptions: {}
+	}, {
+		"page": { default: 1 },
+		"pageModifiers": {},
+		"itemsPerPage": { default: 10 },
+		"itemsPerPageModifiers": {}
+	}),
+	emits: ["update:page", "update:itemsPerPage"],
+	setup(__props) {
+		const page = useModel(__props, "page");
+		const itemsPerPage = useModel(__props, "itemsPerPage");
+		function updateItemsPerPage(value) {
+			if (typeof value !== "number") return;
+			itemsPerPage.value = value;
+			page.value = 1;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(PaginationRoot), {
+				page: page.value,
+				"onUpdate:page": _cache[0] || (_cache[0] = ($event) => page.value = $event),
+				total: __props.total,
+				"items-per-page": itemsPerPage.value,
+				"sibling-count": 1,
+				"show-edges": ""
+			}, {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [
+					__props.itemsPerPageOptions?.length ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(__props.itemsPerPageLabel), 1), createVNode(unref(Select_default), {
+						"model-value": itemsPerPage.value,
+						"onUpdate:modelValue": updateItemsPerPage
+					}, {
+						default: withCtx(() => [createVNode(unref(SelectTrigger_default), {
+							size: "md",
+							class: "w-20",
+							"aria-label": __props.itemsPerPageLabel
+						}, {
+							default: withCtx(() => [createVNode(unref(SelectValue_default))]),
+							_: 1
+						}, 8, ["aria-label"]), createVNode(unref(SelectContent_default), null, {
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.itemsPerPageOptions, (option) => {
+								return openBlock(), createBlock(unref(SelectItem_default), {
+									key: option,
+									value: option
+								}, {
+									default: withCtx(() => [createTextVNode(toDisplayString(option), 1)]),
+									_: 2
+								}, 1032, ["value"]);
+							}), 128))]),
+							_: 1
+						})]),
+						_: 1
+					}, 8, ["model-value"])])) : createCommentVNode("", true),
+					createVNode(unref(PaginationPrev), { "as-child": "" }, {
+						default: withCtx(() => [createVNode(unref(Button_default), {
+							variant: "muted-textonly",
+							size: "md",
+							class: "text-sm",
+							"aria-label": __props.previousLabel
+						}, {
+							default: withCtx(() => [_cache[1] || (_cache[1] = createElementVNode("i", { class: "icon-[lucide--chevron-left]" }, null, -1)), createTextVNode(" " + toDisplayString(__props.previousLabel), 1)]),
+							_: 1
+						}, 8, ["aria-label"])]),
+						_: 1
+					}),
+					createVNode(unref(PaginationList), { class: "flex items-center gap-1" }, {
+						default: withCtx(({ items }) => [(openBlock(true), createElementBlock(Fragment, null, renderList(items, (item, index) => {
+							return openBlock(), createElementBlock(Fragment, { key: index }, [item.type === "page" ? (openBlock(), createBlock(unref(PaginationListItem), {
+								key: 0,
+								value: item.value,
+								"as-child": ""
+							}, {
+								default: withCtx(() => [createVNode(unref(Button_default), {
+									variant: item.value === page.value ? "secondary" : "muted-textonly",
+									size: "icon",
+									"aria-label": __props.formatPageLabel(item.value)
+								}, {
+									default: withCtx(() => [createTextVNode(toDisplayString(item.value), 1)]),
+									_: 2
+								}, 1032, ["variant", "aria-label"])]),
+								_: 2
+							}, 1032, ["value"])) : (openBlock(), createBlock(unref(PaginationEllipsis), {
+								key: 1,
+								index,
+								class: normalizeClass(ellipsisClass)
+							}, {
+								default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" … ", -1)])]),
+								_: 1
+							}, 8, ["index"]))], 64);
+						}), 128))]),
+						_: 1
+					}),
+					createVNode(unref(PaginationNext), { "as-child": "" }, {
+						default: withCtx(() => [createVNode(unref(Button_default), {
+							variant: "muted-textonly",
+							size: "md",
+							class: "text-sm",
+							"aria-label": __props.nextLabel
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(__props.nextLabel) + " ", 1), _cache[3] || (_cache[3] = createElementVNode("i", { class: "icon-[lucide--chevron-right]" }, null, -1))]),
+							_: 1
+						}, 8, ["aria-label"])]),
+						_: 1
+					})
+				])]),
+				_: 1
+			}, 8, [
+				"page",
+				"total",
+				"items-per-page"
+			]);
+		};
+	}
+});
+//#endregion
+export { Pagination_default as default };

package/dist/popover/PopoverContent.vue.d.ts

@@ -0,0 +1,33 @@
+import { PopoverContentProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = PopoverContentProps & {
+    class?: HTMLAttributes['class'];
+    dismissOnViewportChange?: boolean;
+};
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    escapeKeyDown: (event: KeyboardEvent) => any;
+    pointerDownOutside: (event: import('reka-ui').PointerDownOutsideEvent) => any;
+    focusOutside: (event: import('reka-ui').FocusOutsideEvent) => any;
+    interactOutside: (event: import('reka-ui').PointerDownOutsideEvent | import('reka-ui').FocusOutsideEvent) => any;
+    closeAutoFocus: (event: Event) => any;
+    openAutoFocus: (event: Event) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onPointerDownOutside?: ((event: import('reka-ui').PointerDownOutsideEvent) => any) | undefined;
+    onFocusOutside?: ((event: import('reka-ui').FocusOutsideEvent) => any) | undefined;
+    onInteractOutside?: ((event: import('reka-ui').PointerDownOutsideEvent | import('reka-ui').FocusOutsideEvent) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+}>, {}, {}, {}, {}, 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;
+    };
+};