ropav 0.2.0 → 0.3.0

package/dist/components/breadcrumbs/breadcrumbs-item.js

@@ -0,0 +1,124 @@
+import { composeSlotClassName } from "../../utils/compose.js";
+import { dataAttr } from "../../utils/assertion.js";
+import icon_chevron_right_default from "../icons/icon-chevron-right.js";
+import { useId as useId$1 } from "../../composables/use-id.js";
+import link_root_default from "../link/link-root.js";
+import { useBreadcrumbsContext } from "./breadcrumbs.context.js";
+import { computed, createComponent, createDynamicComponent, createIf, createSlot, defineVaporComponent, extend, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, setText, shallowRef, template, toDisplayString, unref, watch } from "vue";
+//#region src/components/breadcrumbs/breadcrumbs-item.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template(" ");
+var t1 = template("<li>", 1);
+var breadcrumbs_item_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	inheritAttrs: false,
+	__name: "breadcrumbs-item",
+	props: {
+		class: {},
+		id: {},
+		href: {},
+		target: {},
+		rel: {},
+		download: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		ping: {},
+		referrerPolicy: {},
+		hrefLang: {},
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		ariaLabelledby: {},
+		ariaDescribedby: {}
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit, attrs: $attrs }) {
+		const $props = __props;
+		const props = __props;
+		const emit = __emit;
+		const context = useBreadcrumbsContext();
+		const generatedKey = useId$1();
+		const itemKey = computed(() => props.id ?? generatedKey.value);
+		const element = shallowRef(null);
+		watch(element, (current, _previous, onCleanup) => {
+			if (!current) return;
+			onCleanup(context.collection.register(itemKey.value, {
+				element: () => element.value,
+				isDisabled: () => Boolean(props.isDisabled || context.isDisabled.value),
+				textValue: () => element.value?.textContent ?? ""
+			}));
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		const isCurrent = computed(() => {
+			return context.collection.getLastKey() === itemKey.value;
+		});
+		const isDisabled = computed(() => Boolean(props.isDisabled || context.isDisabled.value || isCurrent.value));
+		const isTextSeparator = computed(() => typeof context.separator.value === "string" || typeof context.separator.value === "number");
+		const onClick = (event) => {
+			if (isDisabled.value) {
+				event.preventDefault();
+				return;
+			}
+			emit("click", event);
+		};
+		const onPress = () => context.onAction(itemKey.value);
+		const n13 = t1();
+		renderEffect(() => {
+			const _dataAttr = unref(dataAttr);
+			setDynamicProps(n13, [{
+				class: unref(composeSlotClassName)(unref(context).slots.value.item, $props.class),
+				"data-current": _dataAttr(isCurrent.value),
+				"data-disabled": _dataAttr(isDisabled.value),
+				"data-slot": "breadcrumbs-item"
+			}, $attrs]);
+		});
+		setInsertionState(n13);
+		createComponent(unref(link_root_default), {
+			"aria-current": () => isCurrent.value ? "page" : void 0,
+			"aria-describedby": () => $props.ariaDescribedby,
+			"aria-label": () => $props.ariaLabel,
+			"aria-labelledby": () => $props.ariaLabelledby,
+			class: () => unref(context).slots.value.link(),
+			download: () => $props.download,
+			href: () => $props.href,
+			"href-lang": () => $props.hrefLang,
+			"is-disabled": () => isDisabled.value,
+			ping: () => $props.ping,
+			"referrer-policy": () => $props.referrerPolicy,
+			rel: () => $props.rel,
+			target: () => $props.target,
+			onClick: () => onClick,
+			onPress: () => onPress
+		}, extend(() => {
+			return createSlot("default", {
+				isCurrent: () => isCurrent.value,
+				isDisabled: () => isDisabled.value
+			}, null, 36);
+		}, { _: 8 }));
+		setInsertionState(n13, 1);
+		createIf(() => !isCurrent.value, () => {
+			return createIf(() => !unref(context).separator.value, () => {
+				return createComponent(unref(icon_chevron_right_default), {
+					class: () => unref(context).slots.value.separator(),
+					"data-slot": "breadcrumbs-separator"
+				});
+			}, () => createIf(() => isTextSeparator.value, () => {
+				const n8 = t0();
+				renderEffect(() => setText(n8, toDisplayString(unref(context).separator.value)));
+				return n8;
+			}, () => {
+				return createDynamicComponent(() => unref(context).separator.value, {
+					class: () => unref(context).slots.value.separator(),
+					"data-slot": "breadcrumbs-separator"
+				});
+			}, 517), 261);
+		});
+		setStaticTemplateRef(n13, element, null, "element");
+		return n13;
+	}
+});
+//#endregion
+export { breadcrumbs_item_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/breadcrumbs/breadcrumbs-item.vue.d.vue.ts

@@ -0,0 +1,23 @@
+import type { BreadcrumbsItemProps, BreadcrumbsItemSlotProps } from "./breadcrumbs.types";
+declare const __VLS_export: (__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<BreadcrumbsItemProps & {
+        onClick?: ((event: MouseEvent) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: BreadcrumbsItemSlotProps) => unknown;
+    };
+    emit: (evt: "click", event: MouseEvent) => void;
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<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/breadcrumbs/breadcrumbs-root.js

@@ -0,0 +1,64 @@
+import { useCollection } from "../../composables/use-collection.js";
+import { useLocalizedStringFormatter } from "../../composables/use-localized-string-formatter.js";
+import { breadcrumbsStrings } from "../../i18n/breadcrumbs.js";
+import { provideBreadcrumbsContext } from "./breadcrumbs.context.js";
+import { computed, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setStaticTemplateRef, shallowRef, template, watch } from "vue";
+import { breadcrumbsVariants } from "@ropav/styles";
+//#region src/components/breadcrumbs/breadcrumbs-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<ol data-slot=breadcrumbs>", 1);
+var breadcrumbs_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "breadcrumbs-root",
+	props: {
+		class: {},
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		ariaLabelledby: {},
+		separator: {}
+	},
+	emits: ["action"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const collection = useCollection();
+		const formatter = useLocalizedStringFormatter(breadcrumbsStrings);
+		const slots = computed(() => breadcrumbsVariants());
+		const element = shallowRef(null);
+		const orderVersion = shallowRef(0);
+		watch(element, (current, _previous, onCleanup) => {
+			if (!current || typeof MutationObserver === "undefined") return;
+			const observer = new MutationObserver(() => {
+				orderVersion.value += 1;
+			});
+			observer.observe(current, { childList: true });
+			onCleanup(() => observer.disconnect());
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		const label = computed(() => props.ariaLabel || formatter.value.format("breadcrumbs"));
+		provideBreadcrumbsContext({
+			collection,
+			isDisabled: computed(() => Boolean(props.isDisabled)),
+			onAction: (key) => emit("action", key),
+			orderVersion,
+			separator: computed(() => props.separator),
+			slots
+		});
+		const n1 = t0();
+		renderEffect(() => {
+			const _props = props;
+			setAttr(n1, "aria-label", label.value);
+			setAttr(n1, "aria-labelledby", _props.ariaLabelledby);
+			setClass(n1, slots.value.base({ class: _props.class }));
+		});
+		setInsertionState(n1);
+		createSlot();
+		setStaticTemplateRef(n1, element, null, "element");
+		return n1;
+	}
+});
+//#endregion
+export { breadcrumbs_root_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/breadcrumbs/breadcrumbs-root.vue.d.vue.ts

@@ -0,0 +1,23 @@
+import type { BreadcrumbsRootProps } from "./breadcrumbs.types";
+declare const __VLS_export: (__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<BreadcrumbsRootProps & {
+        onAction?: ((key: string | number) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => unknown;
+    };
+    emit: (evt: "action", key: string | number) => void;
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<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/breadcrumbs/breadcrumbs.context.d.ts

@@ -0,0 +1,13 @@
+import type { CollectionKey, UseCollectionReturn } from "../../composables/use-collection";
+import type { breadcrumbsVariants } from "@ropav/styles";
+import type { ComputedRef, ShallowRef } from "vue";
+export interface BreadcrumbsContext {
+    collection: UseCollectionReturn;
+    isDisabled: ComputedRef<boolean>;
+    onAction: (key: CollectionKey) => void;
+    /** Invalidates current-item state when existing DOM children move without changing size. */
+    orderVersion: Readonly<ShallowRef<number>>;
+    separator: ComputedRef<unknown>;
+    slots: ComputedRef<ReturnType<typeof breadcrumbsVariants>>;
+}
+export declare const useBreadcrumbsContext: () => BreadcrumbsContext, provideBreadcrumbsContext: (value: BreadcrumbsContext) => BreadcrumbsContext;

package/dist/components/breadcrumbs/breadcrumbs.context.js

@@ -0,0 +1,5 @@
+import { createContext } from "../../utils/create-context.js";
+//#region src/components/breadcrumbs/breadcrumbs.context.ts
+var [useBreadcrumbsContext, provideBreadcrumbsContext] = createContext({ name: "BreadcrumbsContext" });
+//#endregion
+export { provideBreadcrumbsContext, useBreadcrumbsContext };

package/dist/components/breadcrumbs/breadcrumbs.types.d.ts

@@ -0,0 +1,21 @@
+import type { LinkRootProps } from "../link";
+export type BreadcrumbKey = string | number;
+export interface BreadcrumbsRootProps {
+    class?: string;
+    /** Disables every breadcrumb link. */
+    isDisabled?: boolean;
+    /** Accessible name for the list. Defaults to the localized word “Breadcrumbs”. */
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    /** A component rendered between items. Plain text is rendered without a wrapper. */
+    separator?: unknown;
+}
+export interface BreadcrumbsItemProps extends Omit<LinkRootProps, "class" | "ariaCurrent"> {
+    class?: string;
+    /** Key reported by the root's `action` event. A stable id is generated when omitted. */
+    id?: BreadcrumbKey;
+}
+export interface BreadcrumbsItemSlotProps {
+    isCurrent: boolean;
+    isDisabled: boolean;
+}

package/dist/components/breadcrumbs/index.d.ts

@@ -0,0 +1,93 @@
+import BreadcrumbsItem from "./breadcrumbs-item.vue";
+import BreadcrumbsRoot from "./breadcrumbs-root.vue";
+export declare const Breadcrumbs: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+    attrs: any;
+    slots: {
+        default?: () => unknown;
+    };
+    emit: (evt: "action", key: string | number) => void;
+}, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & {
+        class?: string;
+        isDisabled?: boolean;
+        ariaLabel?: string;
+        ariaLabelledby?: string;
+        separator?: unknown;
+        onAction?: ((key: string | number) => any) | undefined;
+    } & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => unknown;
+    };
+    emit: (evt: "action", key: string | number) => void;
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+}) & {
+    Item: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: (props: import("./breadcrumbs.types").BreadcrumbsItemSlotProps) => unknown;
+        };
+        emit: (evt: "click", event: MouseEvent) => void;
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            href?: string;
+            target?: string;
+            rel?: string;
+            download?: string | boolean;
+            ping?: string;
+            referrerPolicy?: import("..").LinkReferrerPolicy;
+            hrefLang?: string;
+            isDisabled?: boolean;
+            ariaLabel?: string;
+            ariaLabelledby?: string;
+            ariaDescribedby?: string;
+            class?: string;
+            id?: import("./breadcrumbs.types").BreadcrumbKey;
+            onClick?: ((event: MouseEvent) => any) | undefined;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: (props: import("./breadcrumbs.types").BreadcrumbsItemSlotProps) => unknown;
+        };
+        emit: (evt: "click", event: MouseEvent) => void;
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+    Root: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: () => unknown;
+        };
+        emit: (evt: "action", key: string | number) => void;
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+            isDisabled?: boolean;
+            ariaLabel?: string;
+            ariaLabelledby?: string;
+            separator?: unknown;
+            onAction?: ((key: string | number) => any) | undefined;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: () => unknown;
+        };
+        emit: (evt: "action", key: string | number) => void;
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+};
+export { BreadcrumbsItem, BreadcrumbsRoot };
+export type { BreadcrumbKey, BreadcrumbsItemProps, BreadcrumbsItemSlotProps, BreadcrumbsRootProps, BreadcrumbsRootProps as BreadcrumbsProps, } from "./breadcrumbs.types";
+export { breadcrumbsVariants } from "@ropav/styles";
+export type { BreadcrumbsVariants } from "@ropav/styles";

package/dist/components/breadcrumbs/index.js

@@ -0,0 +1,10 @@
+import breadcrumbs_item_default from "./breadcrumbs-item.js";
+import breadcrumbs_root_default from "./breadcrumbs-root.js";
+import { breadcrumbsVariants } from "@ropav/styles";
+//#region src/components/breadcrumbs/index.ts
+var Breadcrumbs = Object.assign(breadcrumbs_root_default, {
+	Item: breadcrumbs_item_default,
+	Root: breadcrumbs_root_default
+});
+//#endregion
+export { Breadcrumbs, breadcrumbs_item_default as BreadcrumbsItem, breadcrumbs_root_default as BreadcrumbsRoot, breadcrumbsVariants };

package/dist/components/button/button-root.js

@@ -0,0 +1,145 @@
+import { dataAttr } from "../../utils/assertion.js";
+import { useInteractionStates } from "../../composables/use-interaction-states.js";
+import { composeFocusResponder, useFocusResponder } from "../../composables/focus-responder.js";
+import { composePressResponder, usePressResponder } from "../../composables/press-responder.js";
+import { useFieldsetContext } from "../fieldset/fieldset.context.js";
+import { announce } from "../../utils/live-announcer.js";
+import { useButtonGroupContext } from "../button-group/button-group.context.js";
+import { computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref, watch } from "vue";
+import { buttonVariants } from "@ropav/styles";
+//#region src/components/button/button-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<button>", 1);
+var button_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "button-root",
+	props: {
+		class: {},
+		fullWidth: {
+			type: Boolean,
+			default: void 0
+		},
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
+		isIconOnly: { type: Boolean },
+		isPending: { type: Boolean },
+		size: {},
+		type: { default: "button" },
+		variant: {}
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const group = useButtonGroupContext();
+		const fieldset = useFieldsetContext();
+		const responder = usePressResponder();
+		const focusResponder = useFocusResponder();
+		/**
+		* Reported to both channels, because both need the element for different reasons.
+		*
+		* A press responder needs it to know what was pressed; a focus responder needs it as the thing it
+		* watches and positions against — a tooltip is placed relative to this button, and without the
+		* report it has nothing to measure and never appears anywhere.
+		*/
+		const setElement = (element) => {
+			const next = element ?? null;
+			responder?.registerElement(next);
+			focusResponder?.registerElement(next);
+		};
+		const resolvedFullWidth = computed(() => props.fullWidth ?? group?.fullWidth.value);
+		const resolvedIsDisabled = computed(() => props.isDisabled ?? group?.isDisabled.value ?? fieldset?.isDisabled.value);
+		const resolvedSize = computed(() => props.size ?? group?.size.value);
+		const resolvedVariant = computed(() => props.variant ?? group?.variant.value);
+		const styles = computed(() => buttonVariants({
+			class: props.class,
+			fullWidth: resolvedFullWidth.value,
+			isIconOnly: props.isIconOnly,
+			size: resolvedSize.value,
+			variant: resolvedVariant.value
+		}));
+		const { isFocusVisible, isFocused, isHovered, isPressed, onBlur, onFocus, onPointerdown, onPointerenter, onPointerleave } = useInteractionStates({
+			isDisabled: () => resolvedIsDisabled.value,
+			isPending: () => props.isPending
+		});
+		watch(() => Boolean(props.isPending), (isPending) => {
+			if (!isFocused.value) return;
+			announce(isPending ? "pending" : "");
+		});
+		const tabindex = computed(() => resolvedIsDisabled.value ? void 0 : 0);
+		const type = computed(() => props.isPending && props.type === "submit" ? "button" : props.type);
+		const onClick = (event) => {
+			if (props.isPending) {
+				event.preventDefault();
+				return;
+			}
+			emit("click", event);
+		};
+		const focus = composeFocusResponder(focusResponder, {
+			onBlur,
+			onFocus
+		});
+		const attrs = computed(() => ({
+			...focusResponder?.attrs.value,
+			...responder?.attrs.value
+		}));
+		const press = composePressResponder(responder, {
+			onClick,
+			onKeydown: focus.onKeydown,
+			onPointerdown: (event) => {
+				onPointerdown(event);
+				focus.onPointerdown(event);
+			},
+			onPointerenter: (event) => {
+				onPointerenter(event);
+				focus.onPointerenter(event);
+			},
+			onPointerleave: (event) => {
+				onPointerleave();
+				focus.onPointerleave(event);
+			}
+		});
+		const n1 = t0();
+		renderEffect(() => {
+			const _props = props;
+			const _dataAttr = unref(dataAttr);
+			const _resolvedIsDisabled = resolvedIsDisabled.value;
+			setDynamicProps(n1, [{
+				"aria-disabled": _props.isPending || void 0,
+				class: styles.value,
+				"data-disabled": _dataAttr(_resolvedIsDisabled),
+				"data-focus-visible": _dataAttr(unref(isFocusVisible)),
+				"data-focused": _dataAttr(unref(isFocused)),
+				"data-hovered": _dataAttr(unref(isHovered)),
+				"data-pending": _dataAttr(_props.isPending),
+				"data-pressed": _dataAttr(unref(isPressed) || unref(responder)?.isPressed.value),
+				"data-slot": "button",
+				disabled: _resolvedIsDisabled || void 0,
+				tabindex: tabindex.value,
+				type: type.value
+			}, attrs.value]);
+		});
+		setInsertionState(n1);
+		createSlot("default", {
+			isDisabled: () => Boolean(resolvedIsDisabled.value),
+			isFocusVisible: () => unref(isFocusVisible),
+			isHovered: () => unref(isHovered),
+			isPending: () => Boolean(props.isPending),
+			isPressed: () => unref(isPressed)
+		});
+		on(n1, "blur", (e) => unref(focus).onBlur(e));
+		on(n1, "click", (e) => unref(press).onClick(e));
+		on(n1, "dragstart", (e) => unref(press).onDragstart(e));
+		on(n1, "focus", (e) => unref(focus).onFocus(e));
+		on(n1, "keydown", (e) => unref(press).onKeydown(e));
+		on(n1, "mousedown", (e) => unref(press).onMousedown(e));
+		on(n1, "pointerdown", (e) => unref(press).onPointerdown(e));
+		on(n1, "pointerenter", (e) => unref(press).onPointerenter(e));
+		on(n1, "pointerleave", (e) => unref(press).onPointerleave(e));
+		on(n1, "pointerup", (e) => unref(press).onPointerup(e));
+		setTemplateRefBinding(n1, () => setElement);
+		return n1;
+	}
+});
+//#endregion
+export { button_root_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/button/button-root.vue.d.vue.ts

@@ -0,0 +1,23 @@
+import type { ButtonRootProps, ButtonSlotProps } from "./button.types";
+declare const __VLS_export: (__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<ButtonRootProps & {
+        onClick?: ((event: MouseEvent) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: ButtonSlotProps) => unknown;
+    };
+    emit: (evt: "click", event: MouseEvent) => void;
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<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/button/button.types.d.ts

@@ -0,0 +1,29 @@
+import type { ButtonVariants } from "@ropav/styles";
+/** State handed to the default slot, so content can follow the button's own state. */
+export interface ButtonSlotProps {
+    isDisabled: boolean;
+    isFocusVisible: boolean;
+    isHovered: boolean;
+    isPending: boolean;
+    isPressed: boolean;
+}
+export interface ButtonRootProps {
+    class?: string;
+    /** Stretches the button to the full width of its container. */
+    fullWidth?: boolean;
+    /** Disables the button. */
+    isDisabled?: boolean;
+    /** Renders the icon-only shape, for a button whose content is a single icon. */
+    isIconOnly?: boolean;
+    /**
+     * Marks an in-flight action. Renders `data-pending` and blocks activation, while
+     * keeping the button focusable so assistive technology can still reach it.
+     */
+    isPending?: boolean;
+    /** Button size. @default "md" */
+    size?: ButtonVariants["size"];
+    /** Native button type. @default "button" */
+    type?: "button" | "reset" | "submit";
+    /** Button variant. @default "primary" */
+    variant?: ButtonVariants["variant"];
+}

package/dist/components/button/index.d.ts

@@ -1,3 +1,64 @@
-export { default as Button } from './button.js';
-export { buttonParts } from './types.js';
-export type { ButtonColor, ButtonPart, ButtonProps, ButtonRadius, ButtonSize, ButtonVariant, } from './types.js';
+import ButtonRoot from "./button-root.vue";
+export declare const Button: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+    attrs: any;
+    slots: {
+        default?: (props: import("./button.types").ButtonSlotProps) => unknown;
+    };
+    emit: (evt: "click", event: MouseEvent) => void;
+}, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & {
+        class?: string;
+        fullWidth?: boolean;
+        isDisabled?: boolean;
+        isIconOnly?: boolean;
+        isPending?: boolean;
+        size?: import("@ropav/styles").ButtonVariants["size"];
+        type?: "button" | "reset" | "submit";
+        variant?: import("@ropav/styles").ButtonVariants["variant"];
+        onClick?: ((event: MouseEvent) => any) | undefined;
+    } & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: import("./button.types").ButtonSlotProps) => unknown;
+    };
+    emit: (evt: "click", event: MouseEvent) => void;
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+}) & {
+    Root: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: (props: import("./button.types").ButtonSlotProps) => unknown;
+        };
+        emit: (evt: "click", event: MouseEvent) => void;
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+            fullWidth?: boolean;
+            isDisabled?: boolean;
+            isIconOnly?: boolean;
+            isPending?: boolean;
+            size?: import("@ropav/styles").ButtonVariants["size"];
+            type?: "button" | "reset" | "submit";
+            variant?: import("@ropav/styles").ButtonVariants["variant"];
+            onClick?: ((event: MouseEvent) => any) | undefined;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: (props: import("./button.types").ButtonSlotProps) => unknown;
+        };
+        emit: (evt: "click", event: MouseEvent) => void;
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+};
+export { ButtonRoot };
+export type { ButtonRootProps, ButtonRootProps as ButtonProps, ButtonSlotProps, } from "./button.types";
+export { buttonVariants } from "@ropav/styles";
+export type { ButtonVariants } from "@ropav/styles";

package/dist/components/button/index.js

@@ -1,2 +1,6 @@
-import { n as button_default, t as buttonParts } from "../../button.js";
-export { button_default as Button, buttonParts };
+import button_root_default from "./button-root.js";
+import { buttonVariants } from "@ropav/styles";
+//#region src/components/button/index.ts
+var Button = Object.assign(button_root_default, { Root: button_root_default });
+//#endregion
+export { Button, button_root_default as ButtonRoot, buttonVariants };