iryx-ui 0.19.1 → 0.21.0

package/README.md

@@ -104,8 +104,8 @@ export default defineNuxtConfig({
 </ISection>
 ```
 
-Seven so far: `IHero`, `ISection`, `IPricingTable`, `IPricingCard`, `IFeatureCard`,
-`ITestimonialCard` and `IBrowserFrame`. Importing the subpath also declares
+Nine so far: `IHero`, `ISection`, `IPricingTable`, `IPricingCard`, `IFeatureCard`,
+`ITestimonialCard`, `IBrowserFrame`, `ISiteHeader` and `ISiteFooter`. Importing the subpath also declares
 them on Vue's `GlobalComponents`; a project that never imports it is untouched.
 
 ## Three ways to take the styling back

package/dist/component-names.d.ts

@@ -3,7 +3,7 @@
  * 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", "AuthProviders", "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 declare const componentNames: readonly ["Accordion", "Alert", "App", "AppShell", "AspectRatio", "AuthProviders", "Avatar", "AvatarGroup", "Badge", "BarChart", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Calendar", "Card", "Carousel", "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", "Rating", "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];
 /**
  * Names of every block exported from `iryx-ui/marketing`.
@@ -11,5 +11,5 @@ export type ComponentName = (typeof componentNames)[number];
  * runs at build time and must not pull `.vue` files into Node.
  * Keep in sync with `src/marketing/index.ts`.
  */
-export declare const marketingComponentNames: readonly ["BrowserFrame", "FeatureCard", "Hero", "PricingCard", "PricingTable", "Section", "TestimonialCard"];
+export declare const marketingComponentNames: readonly ["BrowserFrame", "FeatureCard", "Hero", "PricingCard", "PricingTable", "Section", "SiteFooter", "SiteHeader", "TestimonialCard"];
 export type MarketingComponentName = (typeof marketingComponentNames)[number];

package/dist/component-names.js

@@ -1,11 +1,13 @@
 //#region src/component-names.ts
-var e = /* @__PURE__ */ "Accordion.Alert.App.AppShell.AspectRatio.AuthProviders.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("."), t = [
+var e = /* @__PURE__ */ "Accordion.Alert.App.AppShell.AspectRatio.AuthProviders.Avatar.AvatarGroup.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Calendar.Card.Carousel.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.Rating.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("."), t = [
 	"BrowserFrame",
 	"FeatureCard",
 	"Hero",
 	"PricingCard",
 	"PricingTable",
 	"Section",
+	"SiteFooter",
+	"SiteHeader",
 	"TestimonialCard"
 ];
 //#endregion

package/dist/components/Carousel.js

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

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

@@ -0,0 +1,74 @@
+import type { ClassValue } from '../class-value';
+export interface CarouselProps<Item = unknown> {
+    /** What to lay out. Each one is rendered through the default slot. */
+    items?: Item[];
+    /**
+     * How many fit across, at the widest. Below `sm` it is always one, and
+     * `'auto'` leaves the width to the slide's own content.
+     */
+    perView?: 1 | 2 | 3 | 4 | 'auto';
+    gap?: 'none' | 'sm' | 'md' | 'lg';
+    /** Show the previous and next buttons. */
+    arrows?: boolean;
+    /**
+     * Let a mouse drag the track. Touch and trackpad pan it natively either way.
+     */
+    draggable?: boolean;
+    /**
+     * How far a drag has to travel before it moves on, as a fraction of a slide.
+     * A quarter by default: enough that a nudge does not count, little enough
+     * that the track goes where it was pushed. `1` demands a whole slide.
+     */
+    dragThreshold?: number;
+    /** Show the row of dots under the track. */
+    dots?: boolean;
+    /**
+     * Accessible name for the carousel — "Customer stories", "Screenshots".
+     * A carousel with no name is a scroll region a screen reader cannot place.
+     */
+    label?: string;
+    /** Accessible names for the buttons — override for non-English sites. */
+    previousLabel?: string;
+    nextLabel?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: ClassValue;
+    /** Override classes per element, e.g. `{ dot: 'size-3' }`. */
+    ui?: {
+        root?: string;
+        track?: string;
+        item?: string;
+        viewport?: string;
+        control?: string;
+        dots?: string;
+        dot?: string;
+    };
+}
+declare const __VLS_export: <Item>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(CarouselProps<Item> & {
+        active?: number;
+    }) & {
+        "onUpdate:active"?: ((value: number) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            item: Item;
+            index: number;
+            active: boolean;
+        }) => any;
+    };
+    emit: (event: "update:active", value: number) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/Carousel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,220 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Icon.js";
+import n from "./Button.js";
+import { useScrollEdges as r } from "../composables/scroll-fade.js";
+import { carouselTheme as i } from "../theme/carousel.js";
+import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeModels as f, nextTick as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as g, openBlock as _, ref as v, renderList as y, renderSlot as b, unref as x, useModel as S, watch as C, withCtx as w, withModifiers as ee } from "vue";
+import { ArrowLeft01Icon as te, ArrowRight01Icon as ne } from "@hugeicons/core-free-icons";
+//#region src/components/Carousel.vue?vue&type=script&setup=true&lang.ts
+var T = ["aria-label"], E = ["aria-label"], D = ["aria-label", "data-state"], O = [
+	"aria-label",
+	"aria-current",
+	"data-state",
+	"onClick"
+], k = /*@__PURE__*/ d({
+	__name: "Carousel",
+	props: /*@__PURE__*/ f({
+		items: {},
+		perView: { default: 1 },
+		gap: {},
+		arrows: {
+			type: Boolean,
+			default: void 0
+		},
+		draggable: {
+			type: Boolean,
+			default: void 0
+		},
+		dragThreshold: { default: .25 },
+		dots: {
+			type: Boolean,
+			default: void 0
+		},
+		label: { default: "Carousel" },
+		previousLabel: { default: "Previous" },
+		nextLabel: { default: "Next" },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
+		ui: {}
+	}, {
+		active: { default: 0 },
+		activeModifiers: {}
+	}),
+	emits: ["update:active"],
+	setup(d) {
+		let f = d, k = S(d, "active"), A = e(), j = o(() => f.unstyled ?? A.unstyled), M = o(() => i({ gap: f.gap }));
+		function N(e, t) {
+			return j.value ? [f.ui?.[e], t] : M.value[e]({ class: [f.ui?.[e], t] });
+		}
+		let P = v(), { atStart: re, atEnd: ie, overflowing: ae } = r(P, v("horizontal")), oe = o(() => ({
+			none: 0,
+			sm: .5,
+			md: 1,
+			lg: 1.5
+		})[f.gap ?? "md"]);
+		function F(e) {
+			let t = oe.value * (e - 1) / e;
+			return `calc(${100 / e}% - ${t}rem)`;
+		}
+		let I = o(() => {
+			if (f.perView !== "auto") return {
+				"--iryx-carousel-item": F(f.perView),
+				"--iryx-carousel-item-sm": F(Math.min(f.perView, 2))
+			};
+		}), L = o(() => f.items?.length ?? 0), R = v(), z = o(() => R.value ?? Math.max(L.value, 1)), B;
+		function V() {
+			let e = P.value;
+			if (!e) return;
+			if (!e.clientWidth) {
+				R.value = void 0;
+				return;
+			}
+			let t = e.scrollWidth - e.clientWidth + 1, n = [...e.children].filter((n) => n.offsetLeft - e.offsetLeft <= t).length;
+			R.value = Math.max(n, 1);
+		}
+		C(P, (e) => {
+			if (B?.disconnect(), B = void 0, e && (V(), !(typeof ResizeObserver > "u"))) {
+				B = new ResizeObserver(V), B.observe(e);
+				for (let t of e.children) B.observe(t);
+			}
+		}, { immediate: !0 }), C(L, () => p(V)), g(() => B?.disconnect());
+		let H = v(), U;
+		function W(e) {
+			let t = P.value, n = t?.children[e];
+			!t || !n || (H.value = e, k.value = e, t.scrollTo({ left: n.offsetLeft - t.offsetLeft }), clearTimeout(U), U = setTimeout(() => H.value = void 0, 1e3));
+		}
+		function G(e) {
+			W(Math.min(Math.max(k.value + e, 0), z.value - 1));
+		}
+		function K() {
+			let e = P.value;
+			if (!e) return k.value;
+			let t = [...e.children], n = e.scrollLeft + e.offsetLeft;
+			return t.reduce((e, r, i) => Math.abs(r.offsetLeft - n) < Math.abs(t[e].offsetLeft - n) ? i : e, 0);
+		}
+		C(k, (e) => {
+			H.value === void 0 && e !== K() && W(e);
+		});
+		function se() {
+			if (!P.value) return;
+			V();
+			let e = Math.min(K(), z.value - 1);
+			if (H.value !== void 0) {
+				e === H.value && (H.value = void 0, clearTimeout(U));
+				return;
+			}
+			k.value = e;
+		}
+		let q = v(!1), J = 0, Y = 0, X = 0, Z = 0;
+		function ce(e) {
+			let t = P.value;
+			!(f.draggable ?? !0) || e.pointerType === "touch" || !t || (q.value = !0, Z = 0, J = e.clientX, Y = t.scrollLeft, X = k.value, t.setPointerCapture(e.pointerId), t.style.scrollBehavior = "auto");
+		}
+		function Q(e) {
+			let t = [...e.children], n = (t[1]?.offsetLeft ?? 0) - (t[0]?.offsetLeft ?? 0);
+			if (n <= 0) return k.value;
+			let r = (e.scrollLeft - Y) / n, i = Math.trunc(r), a = Math.abs(r - i) >= Math.min(Math.max(f.dragThreshold, 0), 1) ? Math.sign(r) : 0;
+			return Math.min(Math.max(X + i + a, 0), z.value - 1);
+		}
+		function le(e) {
+			let t = P.value;
+			if (!q.value || !t) return;
+			let n = e.clientX - J;
+			Z = Math.max(Z, Math.abs(n)), t.scrollLeft = Y - n;
+		}
+		function $(e) {
+			let t = P.value;
+			if (!q.value || !t) return;
+			q.value = !1, t.releasePointerCapture(e.pointerId), t.style.scrollBehavior = "";
+			let n = Q(t);
+			p(() => W(n));
+		}
+		function ue(e) {
+			Z > 4 && (e.preventDefault(), e.stopPropagation(), Z = 0);
+		}
+		function de(e) {
+			e.key === "ArrowRight" ? (e.preventDefault(), G(1)) : e.key === "ArrowLeft" && (e.preventDefault(), G(-1));
+		}
+		let fe = o(() => (f.arrows ?? !0) && ae.value), pe = o(() => (f.dots ?? !0) && z.value > 1);
+		return (e, r) => (_(), c("div", {
+			role: "group",
+			"aria-roledescription": "carousel",
+			"aria-label": f.label,
+			class: m(N("root", f.class))
+		}, [l("div", { class: m(N("viewport")) }, [l("div", {
+			ref_key: "track",
+			ref: P,
+			tabindex: "0",
+			role: "group",
+			"aria-label": f.label,
+			class: m(N("track", q.value ? "snap-none scroll-auto cursor-grabbing select-none" : f.draggable ?? !0 ? "cursor-grab" : void 0)),
+			onScroll: se,
+			onKeydown: de,
+			onPointerdown: ce,
+			onPointermove: le,
+			onPointerup: $,
+			onPointercancel: $,
+			onClickCapture: ue,
+			onDragstart: r[0] ||= ee(() => {}, ["prevent"])
+		}, [(_(!0), c(a, null, y(f.items, (t, n) => (_(), c("div", {
+			key: n,
+			role: "group",
+			"aria-roledescription": "slide",
+			"aria-label": `${n + 1} of ${L.value}`,
+			"data-state": n === k.value ? "active" : "inactive",
+			style: h(I.value),
+			class: m(N("item", f.perView === "auto" ? "w-auto" : "w-full sm:w-[var(--iryx-carousel-item-sm)] lg:w-[var(--iryx-carousel-item)]"))
+		}, [b(e.$slots, "default", {
+			item: t,
+			index: n,
+			active: n === k.value
+		})], 14, D))), 128))], 42, E), fe.value ? (_(), c(a, { key: 0 }, [l("div", { class: m(N("control", "left-2")) }, [u(n, {
+			variant: "outline",
+			size: "sm",
+			square: "",
+			"aria-label": f.previousLabel,
+			disabled: x(re),
+			onClick: r[1] ||= (e) => G(-1)
+		}, {
+			default: w(() => [u(t, {
+				icon: x(te),
+				"data-icon": ""
+			}, null, 8, ["icon"])]),
+			_: 1
+		}, 8, ["aria-label", "disabled"])], 2), l("div", { class: m(N("control", "right-2")) }, [u(n, {
+			variant: "outline",
+			size: "sm",
+			square: "",
+			"aria-label": f.nextLabel,
+			disabled: x(ie),
+			onClick: r[2] ||= (e) => G(1)
+		}, {
+			default: w(() => [u(t, {
+				icon: x(ne),
+				"data-icon": ""
+			}, null, 8, ["icon"])]),
+			_: 1
+		}, 8, ["aria-label", "disabled"])], 2)], 64)) : s("", !0)], 2), pe.value ? (_(), c("div", {
+			key: 0,
+			class: m(N("dots"))
+		}, [(_(!0), c(a, null, y(z.value, (e, t) => (_(), c("button", {
+			key: t,
+			type: "button",
+			"aria-label": `Go to slide ${t + 1}`,
+			"aria-current": t === k.value,
+			"data-state": t === k.value ? "active" : "inactive",
+			class: m(N("dot")),
+			onClick: (e) => W(t)
+		}, null, 10, O))), 128))], 2)) : s("", !0)], 10, T));
+	}
+});
+//#endregion
+export { k as default };

package/dist/components/Rating.js

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

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

@@ -0,0 +1,57 @@
+import type { ClassValue } from '../class-value';
+import type { IconLike } from '../composables/icon';
+export interface RatingProps {
+    /** How many icons to show. */
+    max?: number;
+    /** Let the reader set the value. Without it this is a read-only score. */
+    interactive?: boolean;
+    /**
+     * Smallest step the reader can choose, e.g. `0.5` for half stars. Display is
+     * continuous either way — a score of 3.7 fills seven tenths of the fourth.
+     */
+    step?: number;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    /** The icon to repeat. Any Hugeicons export, or a component that renders an SVG. */
+    icon?: IconLike;
+    /**
+     * Accessible name for the control, since a row of stars has no text of its
+     * own — "Overall rating", "Rate this reply".
+     */
+    label?: string;
+    /** Print the score beside the icons, e.g. `4.5`. */
+    showValue?: boolean;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: ClassValue;
+    /** Override classes per element, e.g. `{ fill: 'text-primary' }`. */
+    ui?: {
+        root?: string;
+        items?: string;
+        item?: string;
+        empty?: string;
+        fill?: string;
+        label?: string;
+    };
+}
+type __VLS_Props = RatingProps;
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+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: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    icon: IconLike;
+    label: string;
+    disabled: boolean;
+    unstyled: boolean;
+    max: number;
+    step: number;
+    showValue: boolean;
+    interactive: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/Rating.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,110 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Icon.js";
+import { ratingTheme as n } from "../theme/rating.js";
+import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeModels as u, mergeProps as d, normalizeClass as f, normalizeStyle as p, openBlock as m, renderList as h, toDisplayString as g, useModel as _ } from "vue";
+import { StarIcon as v } from "@hugeicons/core-free-icons";
+//#region src/components/Rating.vue?vue&type=script&setup=true&lang.ts
+var y = ["aria-hidden"], b = ["onClick"], x = /*@__PURE__*/ l({
+	__name: "Rating",
+	props: /*@__PURE__*/ u({
+		max: { default: 5 },
+		interactive: {
+			type: Boolean,
+			default: void 0
+		},
+		step: { default: 1 },
+		size: {},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		icon: { default: () => v },
+		label: { default: "Rating" },
+		showValue: {
+			type: Boolean,
+			default: void 0
+		},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
+		ui: {}
+	}, {
+		modelValue: { default: 0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(l) {
+		let u = l, v = _(l, "modelValue"), x = e(), S = i(() => u.unstyled ?? x.unstyled), C = i(() => n({
+			size: u.size,
+			interactive: u.interactive ?? !1,
+			disabled: u.disabled ?? !1
+		}));
+		function w(e, t) {
+			return S.value ? [u.ui?.[e], t] : C.value[e]({ class: [u.ui?.[e], t] });
+		}
+		let T = i(() => Math.min(Math.max(v.value, 0), u.max));
+		function E(e) {
+			let t = Math.min(Math.max(T.value - e, 0), 1);
+			return Math.round(t * 1e4) / 100;
+		}
+		let D = i(() => Number(T.value.toFixed(2)).toString());
+		function O(e) {
+			if (u.disabled || !u.interactive) return;
+			let t = Math.round(e / u.step) * u.step;
+			v.value = Math.min(Math.max(t, u.step), u.max);
+		}
+		let k = i(() => u.interactive ? {
+			role: "slider",
+			tabindex: u.disabled ? -1 : 0,
+			"aria-label": u.label,
+			"aria-valuemin": 0,
+			"aria-valuemax": u.max,
+			"aria-valuenow": T.value,
+			"aria-valuetext": `${D.value} out of ${u.max}`,
+			"aria-disabled": u.disabled || void 0
+		} : {
+			role: "img",
+			"aria-label": `${u.label}: ${D.value} out of ${u.max}`
+		});
+		function A(e) {
+			if (!u.interactive) return;
+			let t = {
+				ArrowRight: u.step,
+				ArrowUp: u.step,
+				ArrowLeft: -u.step,
+				ArrowDown: -u.step
+			};
+			e.key in t ? (e.preventDefault(), O(T.value + t[e.key])) : e.key === "Home" ? (e.preventDefault(), O(u.step)) : e.key === "End" && (e.preventDefault(), O(u.max));
+		}
+		return (e, n) => (m(), o("div", d(k.value, {
+			class: w("root", u.class),
+			onKeydown: A
+		}), [s("div", {
+			class: f(w("items")),
+			"aria-hidden": u.interactive ? void 0 : "true"
+		}, [(m(!0), o(r, null, h(u.max, (e) => (m(), o("span", {
+			key: e,
+			class: f(w("item")),
+			onClick: (t) => O(e)
+		}, [c(t, {
+			icon: u.icon,
+			class: f(w("empty"))
+		}, null, 8, ["icon", "class"]), s("span", {
+			class: f(w("fill")),
+			style: p({ width: `${E(e - 1)}%` })
+		}, [c(t, { icon: u.icon }, null, 8, ["icon"])], 6)], 10, b))), 128))], 10, y), u.showValue ? (m(), o("span", {
+			key: 0,
+			class: f(w("label")),
+			"aria-hidden": "true"
+		}, g(D.value), 3)) : a("", !0)], 16));
+	}
+});
+//#endregion
+export { x as default };

package/dist/components/index.d.ts

@@ -14,6 +14,7 @@ export { default as Button } from './Button.vue';
 export { default as ButtonGroup } from './ButtonGroup.vue';
 export { default as Calendar } from './Calendar.vue';
 export { default as Card } from './Card.vue';
+export { default as Carousel } from './Carousel.vue';
 export { default as ChartLegend } from './ChartLegend.vue';
 export { default as Checkbox } from './Checkbox.vue';
 export { default as Collapsible } from './Collapsible.vue';
@@ -51,6 +52,7 @@ export { default as PinInput } from './PinInput.vue';
 export { default as Popover } from './Popover.vue';
 export { default as Progress } from './Progress.vue';
 export { default as RadioGroup } from './RadioGroup.vue';
+export { default as Rating } from './Rating.vue';
 export { default as ScrollArea } from './ScrollArea.vue';
 export { default as ScrollFade } from './ScrollFade.vue';
 export { default as Select } from './Select.vue';