@poupe/vue/dist/index.mjs

Vue component library for Poupe UI framework with theme customization and accessibility support

import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeDefaults, mergeModels, mergeProps, normalizeClass, normalizeProps, normalizeStyle, onMounted, openBlock, reactive, readonly, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toValue, useId, useModel, useSlots, useTemplateRef, vModelDynamic, withCtx, withDirectives } from "vue";
import { usePoupeMergedProps, useRipple } from "@poupe/vue/composables";
import { Icon } from "@iconify/vue";
import { usePoupeIcons } from "@poupe/vue/composables/use-icons";
import { unsafeKeys } from "@poupe/css";
import { tv } from "tailwind-variants";
import { twMerge } from "tailwind-merge";
import { Toggle, useForwardExpose } from "reka-ui";
import { createPoupe, poupeInjectionKey } from "@poupe/vue/composables/use-poupe";
var icon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "icon",
	props: {
		icon: {
			type: [Object, String],
			required: false
		},
		mode: {
			type: String,
			required: false
		},
		color: {
			type: String,
			required: false
		},
		flip: {
			type: String,
			required: false
		},
		horizontalFlip: {
			type: Boolean,
			required: false
		},
		verticalFlip: {
			type: Boolean,
			required: false
		},
		rotate: {
			type: [Number, String],
			required: false
		},
		hFlip: {
			type: Boolean,
			required: false
		},
		vFlip: {
			type: Boolean,
			required: false
		},
		width: {
			type: [
				null,
				String,
				Number
			],
			required: false
		},
		height: {
			type: [
				null,
				String,
				Number
			],
			required: false
		},
		inline: {
			type: Boolean,
			required: false
		},
		ariaHidden: {
			type: Boolean,
			required: false
		}
	},
	setup(__props, { expose: __expose }) {
		__expose();
		const props = __props;
		const { toIcon } = usePoupeIcons();
		const __returned__ = {
			props,
			toIcon,
			icon: computed(() => toIcon(props.icon)),
			get IconifyIcon() {
				return Icon;
			}
		};
		Object.defineProperty(__returned__, "__isScriptSetup", {
			enumerable: false,
			value: true
		});
		return __returned__;
	}
});
var export_helper_default = (sfc, props) => {
	const target = sfc.__vccOpts || sfc;
	for (const [key, val] of props) target[key] = val;
	return target;
};
function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
	return openBlock(), createBlock($setup["IconifyIcon"], mergeProps($setup.props, { icon: $setup.icon }), null, 16, ["icon"]);
}
var icon_default = /* @__PURE__ */ export_helper_default(icon_vue_vue_type_script_setup_true_lang_default, [["render", _sfc_render$5], ["__file", "/home/runner/work/poupe/poupe/packages/@poupe-vue/src/components/icon.vue"]]);
const pe = {
	0: "pe-0",
	1: "pe-1",
	2: "pe-2",
	3: "pe-3",
	4: "pe-4"
};
const ps = {
	0: "ps-0",
	1: "ps-1",
	2: "ps-2",
	3: "ps-3",
	4: "ps-4",
	5: "ps-5",
	6: "ps-6"
};
const px = {
	0: "px-0",
	1: "px-1",
	2: "px-2",
	3: "px-3",
	4: "px-4"
};
const py = {
	0: "py-0",
	1: "py-1",
	2: "py-2",
	3: "py-3",
	4: "py-4"
};
const onSlot = (slot, classes) => {
	const slots = Array.isArray(slot) ? slot : [slot];
	const out = {};
	for (const name of unsafeKeys(classes)) {
		const v = {};
		for (const s of slots) v[s] = classes[name];
		out[name] = v;
	}
	return out;
};
const borderVariantsBase = "border-solid border";
const borderVariants$1 = {
	none: "border-transparent",
	current: "border-current",
	primary: "border-primary",
	secondary: "border-secondary",
	tertiary: "border-tertiary",
	error: "border-error",
	outline: "border-outline"
};
const borderInFocusVariantsBase = "ring-solid ring-2 ring-transparent";
const borderInFocusVariants = {
	none: "",
	current: "focus-within:ring-current",
	primary: "focus-within:ring-primary",
	secondary: "focus-within:ring-secondary",
	tertiary: "focus-within:ring-tertiary",
	error: "focus-within:ring-error",
	outline: "focus-within:ring-outline"
};
const roundedVariants = {
	full: "rounded-full",
	none: "rounded-none",
	xs: "rounded-sm",
	sm: "rounded",
	md: "rounded-md",
	lg: "rounded-lg",
	xl: "rounded-xl",
	["2xl"]: "rounded-2xl",
	["3xl"]: "rounded-3xl"
};
const shapeVariants = {
	"none": "shape-none",
	"xs": "shape-squircle-extra-small",
	"sm": "shape-squircle-small",
	"md": "shape-squircle-medium",
	"lg": "shape-squircle-large",
	"xl": "shape-squircle-extra-large",
	"rounded": "shape-full",
	"full": "shape-full",
	"squircle-xs": "shape-squircle-extra-small",
	"squircle-sm": "shape-squircle-small",
	"squircle-md": "shape-squircle-medium",
	"squircle-lg": "shape-squircle-large",
	"squircle-xl": "shape-squircle-extra-large",
	"squircle-full": "shape-squircle-full"
};
const shadowVariants = {
	current: "shadow-shadow shadow",
	none: "shadow-none",
	z1: "shadow-shadow shadow-z1",
	z2: "shadow-shadow shadow-z2",
	z3: "shadow-shadow shadow-z3",
	z4: "shadow-shadow shadow-z4",
	z5: "shadow-shadow shadow-z5",
	inset: "inset-shadow-shadow inset-shadow"
};
const colorSurfaceVariants = {
	primary: "surface-primary",
	secondary: "surface-secondary",
	tertiary: "surface-tertiary",
	error: "surface-error",
	["primary-fixed"]: "surface-primary-fixed",
	["secondary-fixed"]: "surface-secondary-fixed",
	["tertiary-fixed"]: "surface-tertiary-fixed",
	["primary-container"]: "surface-primary-container",
	["secondary-container"]: "surface-secondary-container",
	["tertiary-container"]: "surface-tertiary-container",
	["error-container"]: "surface-error-container",
	inverse: "surface-inverse",
	["inverse-primary"]: "surface-inverse-primary"
};
({ ...colorSurfaceVariants });
({ ...colorSurfaceVariants });
const colorSurfaceInteractiveVariants = {
	primary: "interactive-surface-primary",
	secondary: "interactive-surface-secondary",
	tertiary: "interactive-surface-tertiary",
	error: "interactive-surface-error",
	["primary-fixed"]: "interactive-surface-primary-fixed",
	["secondary-fixed"]: "interactive-surface-secondary-fixed",
	["tertiary-fixed"]: "interactive-surface-tertiary-fixed",
	["primary-container"]: "interactive-surface-primary-container",
	["secondary-container"]: "interactive-surface-secondary-container",
	["tertiary-container"]: "interactive-surface-tertiary-container",
	["error-container"]: "interactive-surface-error-container",
	inverse: "interactive-surface-inverse",
	["inverse-primary"]: "interactive-surface-inverse-primary"
};
const surfaceInteractiveVariants = {
	...colorSurfaceInteractiveVariants,
	dim: "interactive-surface-dim",
	base: "interactive-surface",
	bright: "interactive-surface-bright",
	variant: "interactive-surface-variant"
};
const containerInteractiveVariants = {
	...colorSurfaceInteractiveVariants,
	lowest: "interactive-surface-container-lowest",
	low: "interactive-surface-container-low",
	base: "interactive-surface-container",
	high: "interactive-surface-container-high",
	highest: "interactive-surface-container-highest"
};
const surfaceDefaults = {
	tag: "div",
	class: "",
	role: "surface",
	tone: "base",
	level: "base",
	shape: "none",
	shadow: "none",
	border: "none",
	interactive: false,
	padding: "none"
};
const surface = tv({
	slots: { wrapper: "relative" },
	variants: {
		role: {
			surface: {},
			container: {}
		},
		tone: {
			dim: { wrapper: "surface-dim" },
			base: { wrapper: "surface" },
			bright: { wrapper: "surface-bright" }
		},
		level: {
			lowest: { wrapper: "surface-container-lowest" },
			low: { wrapper: "surface-container-low" },
			base: { wrapper: "surface-container" },
			high: { wrapper: "surface-container-high" },
			highest: { wrapper: "surface-container-highest" }
		},
		variant: {
			"primary": { wrapper: "surface-primary" },
			"secondary": { wrapper: "surface-secondary" },
			"tertiary": { wrapper: "surface-tertiary" },
			"error": { wrapper: "surface-error" },
			"primary-fixed": { wrapper: "surface-primary-fixed" },
			"secondary-fixed": { wrapper: "surface-secondary-fixed" },
			"tertiary-fixed": { wrapper: "surface-tertiary-fixed" },
			"primary-container": { wrapper: "surface-primary-container" },
			"secondary-container": { wrapper: "surface-secondary-container" },
			"tertiary-container": { wrapper: "surface-tertiary-container" },
			"error-container": { wrapper: "surface-error-container" },
			"inverse": { wrapper: "surface-inverse" },
			"inverse-primary": { wrapper: "surface-inverse-primary" }
		},
		shape: onSlot("wrapper", shapeVariants),
		shadow: onSlot("wrapper", shadowVariants),
		border: onSlot("wrapper", borderVariants$1),
		interactive: {
			true: { wrapper: "cursor-pointer" },
			false: {}
		},
		padding: {
			none: {},
			sm: { wrapper: "p-2" },
			md: { wrapper: "p-4" },
			lg: { wrapper: "p-6" },
			xl: { wrapper: "p-8" }
		}
	},
	defaultVariants: {
		role: surfaceDefaults.role,
		tone: surfaceDefaults.tone,
		level: surfaceDefaults.level,
		shape: surfaceDefaults.shape,
		shadow: surfaceDefaults.shadow,
		border: surfaceDefaults.border,
		interactive: surfaceDefaults.interactive,
		padding: surfaceDefaults.padding
	},
	compoundVariants: [{
		border: [
			"primary",
			"secondary",
			"tertiary",
			"error",
			"outline",
			"current"
		],
		class: { wrapper: borderVariantsBase }
	}]
});
var surface_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "surface",
	props: {
		tag: {
			type: String,
			required: false
		},
		role: {
			type: null,
			required: false
		},
		tone: {
			type: null,
			required: false
		},
		level: {
			type: null,
			required: false
		},
		variant: {
			type: null,
			required: false
		},
		shape: {
			type: null,
			required: false
		},
		shadow: {
			type: null,
			required: false
		},
		border: {
			type: null,
			required: false
		},
		interactive: {
			type: null,
			required: false
		},
		padding: {
			type: null,
			required: false
		},
		class: {
			type: String,
			required: false
		}
	},
	setup(__props, { expose: __expose }) {
		const directProps = __props;
		const rootElement = ref();
		__expose({ rootElement });
		const props = computed(() => usePoupeMergedProps(directProps, "surface", surfaceDefaults));
		const variants = computed(() => {
			const baseVariants = surface({
				role: props.value.role,
				tone: props.value.tone,
				level: props.value.level,
				variant: props.value.variant,
				shape: props.value.shape,
				shadow: props.value.shadow,
				border: props.value.border,
				interactive: props.value.interactive,
				padding: props.value.padding
			});
			if (props.value.interactive) {
				const role = props.value.role;
				const interactiveVariants = role === "container" ? containerInteractiveVariants : surfaceInteractiveVariants;
				let colorKey;
				if (props.value.variant) colorKey = props.value.variant;
				else if (role === "surface" && props.value.tone) colorKey = props.value.tone;
				else if (role === "container" && props.value.level) colorKey = props.value.level;
				if (colorKey && colorKey in interactiveVariants) return { wrapper: () => twMerge(baseVariants.wrapper(), interactiveVariants[colorKey]) };
			}
			return baseVariants;
		});
		const __returned__ = {
			surfaceDefaults,
			surface,
			directProps,
			rootElement,
			props,
			variants,
			classes: computed(() => twMerge(variants.value.wrapper(), props.value.class))
		};
		Object.defineProperty(__returned__, "__isScriptSetup", {
			enumerable: false,
			value: true
		});
		return __returned__;
	}
});
function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
	return openBlock(), createBlock(resolveDynamicComponent($setup.props.tag), {
		ref: "rootElement",
		class: normalizeClass($setup.classes)
	}, {
		default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
		_: 3
	}, 8, ["class"]);
}
var surface_default = /* @__PURE__ */ export_helper_default(surface_vue_vue_type_script_setup_true_lang_default, [["render", _sfc_render$4], ["__file", "/home/runner/work/poupe/poupe/packages/@poupe-vue/src/components/surface.vue"]]);
const buttonDefaults = {
	type: "filled",
	size: "base",
	variant: "primary",
	shape: "md",
	disabled: false,
	loading: false,
	expand: false,
	ellipsis: false,
	fab: false,
	extended: false,
	iconButton: false,
	toggle: false,
	pressed: false
};
var button_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "button",
	props: {
		label: {
			type: String,
			required: false
		},
		type: {
			type: String,
			required: false
		},
		size: {
			type: String,
			required: false
		},
		variant: {
			type: String,
			required: false
		},
		loading: {
			type: Boolean,
			required: false
		},
		disabled: {
			type: Boolean,
			required: false
		},
		expand: {
			type: Boolean,
			required: false
		},
		ellipsis: {
			type: Boolean,
			required: false
		},
		fab: {
			type: Boolean,
			required: false
		},
		extended: {
			type: Boolean,
			required: false
		},
		iconButton: {
			type: Boolean,
			required: false
		},
		toggle: {
			type: Boolean,
			required: false
		},
		pressed: {
			type: Boolean,
			required: false
		},
		icon: {
			type: String,
			required: false
		},
		trailingIcon: {
			type: String,
			required: false
		},
		iconStart: {
			type: String,
			required: false
		},
		iconEnd: {
			type: String,
			required: false
		},
		tag: {
			type: String,
			required: false
		},
		shape: {
			type: null,
			required: false
		},
		shadow: {
			type: null,
			required: false
		},
		border: {
			type: null,
			required: false
		},
		interactive: {
			type: null,
			required: false
		},
		class: {
			type: String,
			required: false
		}
	},
	emits: ["click"],
	setup(__props, { expose: __expose, emit: __emit }) {
		__expose();
		const directProps = __props;
		const emit = __emit;
		const props = computed(() => usePoupeMergedProps(directProps, "button", buttonDefaults));
		const surfaceReference = useTemplateRef("surfaceReference");
		const buttonElement = ref();
		onMounted(() => {
			buttonElement.value = surfaceReference.value?.rootElement;
		});
		const isDisabled = computed(() => props.value.disabled);
		const { ripples, getRippleStyle } = useRipple(buttonElement, { disabled: isDisabled });
		const __returned__ = {
			buttonDefaults,
			directProps,
			emit,
			props,
			surfaceReference,
			buttonElement,
			isDisabled,
			ripples,
			getRippleStyle,
			surfaceProps: computed(() => {
				const { type, variant, shape, shadow, border, interactive } = props.value;
				const baseProps = {
					shape,
					padding: "none",
					interactive: interactive ?? true
				};
				if (props.value.fab) {
					baseProps.shape = props.value.extended ? "lg" : "full";
					baseProps.shadow = shadow ?? "z3";
				}
				if (props.value.iconButton && !props.value.fab) baseProps.shape = shape ?? "full";
				const getOutlineBorder = () => {
					if (border) return border;
					switch (variant) {
						case "primary":
						case "secondary":
						case "tertiary":
						case "error": return variant;
						default: return "outline";
					}
				};
				switch (type) {
					case "text": return {
						...baseProps,
						role: "surface",
						tone: "base",
						shadow: shadow ?? "none",
						border: border ?? "none"
					};
					case "outlined": return {
						...baseProps,
						role: "surface",
						tone: "base",
						shadow: shadow ?? "none",
						border: getOutlineBorder()
					};
					case "filled": return {
						...baseProps,
						variant: variant === "base" ? void 0 : variant,
						role: variant === "base" ? "surface" : void 0,
						tone: variant === "base" ? "base" : void 0,
						shadow: shadow ?? "none",
						border: border ?? "none"
					};
					case "elevated": return {
						...baseProps,
						role: "surface",
						tone: "base",
						shadow: shadow ?? "z1",
						border: border ?? "none"
					};
					case "tonal": {
						const tonalVariant = variant === "base" ? void 0 : `${variant}-container`;
						return {
							...baseProps,
							variant: tonalVariant,
							role: variant === "base" ? "container" : void 0,
							level: variant === "base" ? "base" : void 0,
							shadow: shadow ?? "none",
							border: border ?? "none"
						};
					}
					default: return baseProps;
				}
			}),
			buttonClasses: computed(() => {
				const { size, expand, disabled, loading, fab, iconButton } = props.value;
				const classes = [
					"inline-flex items-center justify-center gap-2",
					"transition-all duration-200",
					"select-none",
					"font-medium"
				];
				const sizeClasses = {
					xs: "text-xs h-8 px-2",
					sm: "text-sm h-9 px-3",
					base: "text-sm h-10 px-6",
					lg: "text-base h-12 px-7",
					xl: "text-lg h-14 px-8"
				};
				const fabSizeClasses = {
					xs: "h-10 w-10",
					sm: "h-12 w-12",
					base: "h-14 w-14",
					lg: "h-16 w-16",
					xl: "h-20 w-20"
				};
				const extendedFabSizeClasses = {
					xs: "h-10 px-3",
					sm: "h-12 px-4",
					base: "h-14 px-5",
					lg: "h-16 px-6",
					xl: "h-20 px-8"
				};
				const iconButtonSizeClasses = {
					xs: "h-8 w-8",
					sm: "h-9 w-9",
					base: "h-10 w-10",
					lg: "h-12 w-12",
					xl: "h-14 w-14"
				};
				if (fab && !props.value.extended) classes.push(fabSizeClasses[size]);
				else if (fab && props.value.extended) classes.push(extendedFabSizeClasses[size]);
				else if (iconButton) classes.push(iconButtonSizeClasses[size]);
				else classes.push(sizeClasses[size]);
				if (disabled || loading) classes.push("opacity-38 cursor-not-allowed");
				if (expand) classes.push("w-full");
				return classes.join(" ");
			}),
			computedLabel: computed(() => {
				const label = props.value.label || "";
				return props.value.ellipsis ? `${label}…` : label;
			}),
			iconSize: computed(() => {
				return {
					xs: "text-base",
					sm: "text-lg",
					base: "text-xl",
					lg: "text-2xl",
					xl: "text-3xl"
				}[props.value.size];
			}),
			Icon: icon_default,
			Surface: surface_default
		};
		Object.defineProperty(__returned__, "__isScriptSetup", {
			enumerable: false,
			value: true
		});
		return __returned__;
	}
});
const _hoisted_1$3 = {
	key: 1,
	class: "leading-none"
};
function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
	return openBlock(), createBlock($setup["Surface"], mergeProps({ ref: "surfaceReference" }, $setup.surfaceProps, {
		tag: "button",
		class: $setup.buttonClasses,
		disabled: $setup.props.disabled || $setup.props.loading,
		onClick: _cache[0] || (_cache[0] = ($event) => $setup.emit("click", $event))
	}), {
		default: withCtx(() => [
			createCommentVNode(" Leading icon "),
			$setup.props.icon || $setup.props.iconStart ? (openBlock(), createBlock($setup["Icon"], {
				key: 0,
				icon: $setup.props.icon || $setup.props.iconStart,
				class: normalizeClass($setup.iconSize)
			}, null, 8, ["icon", "class"])) : createCommentVNode("v-if", true),
			createCommentVNode(" Label "),
			$setup.computedLabel && (!$setup.props.iconButton || $setup.props.extended) ? (openBlock(), createElementBlock("span", _hoisted_1$3, toDisplayString($setup.computedLabel), 1)) : createCommentVNode("v-if", true),
			createCommentVNode(" Default slot "),
			!$setup.computedLabel && !$setup.props.iconButton ? renderSlot(_ctx.$slots, "default", { key: 2 }) : createCommentVNode("v-if", true),
			createCommentVNode(" Trailing icon "),
			$setup.props.trailingIcon || $setup.props.iconEnd ? (openBlock(), createBlock($setup["Icon"], {
				key: 3,
				icon: $setup.props.trailingIcon || $setup.props.iconEnd,
				class: normalizeClass($setup.iconSize)
			}, null, 8, ["icon", "class"])) : createCommentVNode("v-if", true),
			createCommentVNode(" Loading indicator "),
			$setup.props.loading ? (openBlock(), createBlock($setup["Icon"], {
				key: 4,
				icon: "svg-spinners:12-dots-scale-rotate",
				class: normalizeClass($setup.iconSize)
			}, null, 8, ["class"])) : createCommentVNode("v-if", true),
			createCommentVNode(" Ripple particles "),
			(openBlock(true), createElementBlock(Fragment, null, renderList($setup.ripples, (r) => {
				return openBlock(), createElementBlock("span", {
					key: r.id,
					"aria-hidden": "true",
					style: normalizeStyle($setup.getRippleStyle(r))
				}, null, 4);
			}), 128))
		]),
		_: 3
	}, 16, ["class", "disabled"]);
}
var button_default = /* @__PURE__ */ export_helper_default(button_vue_vue_type_script_setup_true_lang_default, [["render", _sfc_render$3], ["__file", "/home/runner/work/poupe/poupe/packages/@poupe-vue/src/components/button.vue"]]);
function tryWarn(message) {
	if (typeof console === "undefined" || !console.warn) return;
	const { env } = import.meta;
	if (env?.DEV) console.warn(message);
}
const cardDefaults = {
	title: void 0,
	surface: "container",
	container: void 0,
	shape: "md",
	shadow: "z1"
};
var card_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "card",
	props: {
		title: {
			type: String,
			required: false
		},
		surface: {
			type: String,
			required: false
		},
		container: {
			type: String,
			required: false
		},
		tag: {
			type: String,
			required: false
		},
		role: {
			type: null,
			required: false
		},
		tone: {
			type: null,
			required: false
		},
		level: {
			type: null,
			required: false
		},
		variant: {
			type: null,
			required: false
		},
		shape: {
			type: null,
			required: false
		},
		shadow: {
			type: null,
			required: false
		},
		border: {
			type: null,
			required: false
		},
		interactive: {
			type: null,
			required: false
		},
		class: {
			type: String,
			required: false
		}
	},
	setup(__props, { expose: __expose }) {
		__expose();
		const directProps = __props;
		const props = computed(() => usePoupeMergedProps(directProps, "card", cardDefaults));
		function mapSurfaceToRoleAndLevel(surface) {
			switch (surface) {
				case "lowest":
				case "low":
				case "container":
				case "high":
				case "highest": return {
					role: "container",
					level: surface === "container" ? "base" : surface
				};
				case "base":
				case "dim":
				case "bright": return {
					role: "surface",
					tone: surface
				};
				default: return;
			}
		}
		const surfaceProps = computed(() => {
			if (props.value.surface && props.value.container) tryWarn("[PCard] Both \"surface\" and \"container\" props are specified. The \"container\" prop will take precedence. Please use only one of these props.");
			const result = {
				shape: props.value.shape,
				shadow: props.value.shadow,
				border: props.value.border,
				interactive: props.value.interactive,
				padding: "none"
			};
			if (props.value.container) result.variant = props.value.container;
			else if (props.value.surface) {
				const mapped = mapSurfaceToRoleAndLevel(props.value.surface);
				if (mapped) Object.assign(result, mapped);
			} else {
				if (props.value.role) result.role = props.value.role;
				if (props.value.tone) result.tone = props.value.tone;
				if (props.value.level) result.level = props.value.level;
				if (props.value.variant) result.variant = props.value.variant;
			}
			return result;
		});
		const slots = useSlots();
		const __returned__ = {
			cardDefaults,
			directProps,
			props,
			mapSurfaceToRoleAndLevel,
			surfaceProps,
			slots,
			hasHeader: computed(() => props.value.title !== void 0 || slots.header !== void 0),
			hasFooter: computed(() => slots.footer !== void 0),
			Surface: surface_default
		};
		Object.defineProperty(__returned__, "__isScriptSetup", {
			enumerable: false,
			value: true
		});
		return __returned__;
	}
});
const _hoisted_1$2 = {
	key: 0,
	class: "px-4 pt-4"
};
const _hoisted_2$2 = {
	key: 0,
	class: "text-xl font-medium"
};
const _hoisted_3$1 = { class: "px-4 py-4" };
const _hoisted_4 = {
	key: 1,
	class: "px-4 pb-4"
};
function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
	return openBlock(), createBlock($setup["Surface"], normalizeProps(guardReactiveProps($setup.surfaceProps)), {
		default: withCtx(() => [
			createCommentVNode(" Header "),
			$setup.hasHeader ? (openBlock(), createElementBlock("div", _hoisted_1$2, [renderSlot(_ctx.$slots, "header", {}, () => [$setup.props.title ? (openBlock(), createElementBlock("h3", _hoisted_2$2, toDisplayString($setup.props.title), 1)) : createCommentVNode("v-if", true)])])) : createCommentVNode("v-if", true),
			createCommentVNode(" Content "),
			createElementVNode("div", _hoisted_3$1, [renderSlot(_ctx.$slots, "default")]),
			createCommentVNode(" Footer "),
			$setup.hasFooter ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("v-if", true)
		]),
		_: 3
	}, 16);
}
var card_default = /* @__PURE__ */ export_helper_default(card_vue_vue_type_script_setup_true_lang_default, [["render", _sfc_render$2], ["__file", "/home/runner/work/poupe/poupe/packages/@poupe-vue/src/components/card.vue"]]);
const globalIcons = reactive({ poupe: {
	blankIcon: {
		body: "",
		width: 24,
		height: 24
	},
	unknownIcon: {
		body: "<text y=\".9em\" font-size=\"90\" fill=\"currentColor\">�</text>",
		width: 100,
		height: 100
	},
	spinner: "svg-spinners:6-dots-scale",
	showPassword: "heroicons:eye",
	hidePassword: "heroicons:eye-slash"
} });
const registerIcons = (namespace, icons) => {
	globalIcons[namespace] = {
		...globalIcons[namespace],
		...icons
	};
};
const toIcon = (icon) => {
	const v = toValue(icon);
	if (!v) return globalIcons.poupe.blankIcon;
	if (typeof v !== "string") return v;
	const i = v.indexOf(":");
	const icons = globalIcons[i > 0 ? v.slice(0, i) : "poupe"];
	if (!icons) return v;
	const name = i === -1 ? v : v.slice(i + 1);
	if (icons[name]) return toIcon(icons[name]);
	const camelCase = name.replaceAll(/[-_]([a-z])/g, (_, c) => c.toUpperCase());
	if (icons[camelCase]) return toIcon(icons[camelCase]);
	return globalIcons.poupe.unknownIcon;
};
const usePoupeIcons$1 = () => ({
	icons: readonly(globalIcons),
	toIcon,
	registerIcons
});
function usePasswordToggle(origType) {
	const { poupe: icons } = usePoupeIcons$1().icons;
	const showPassword = ref(false);
	return {
		showPassword,
		passwordToggleIcon: computed(() => showPassword.value ? icons.hidePassword : icons.showPassword),
		typeAttr: computed(() => showPassword.value ? "text" : toValue(origType))
	};
}
const padding = (n) => `${px[n]} ${py[n]}`;
const paddingSlot = (n) => {
	return { [n]: {
		start: padding(n),
		field: padding(n),
		unit: `${ps[n + 1]} ${pe[n]} ${py[n]}`,
		end: padding(n)
	} };
};
const inputWrapperVariants = tv({
	slots: {
		wrapper: [
			"flex flex-1 flex-nowrap rtl:flex-row-reverse overflow-hidden",
			borderVariantsBase,
			borderInFocusVariantsBase
		],
		field: "flex-1",
		start: "flex items-center",
		input: "w-full focus:outline-none bg-transparent",
		unit: "text-xs font-medium justify-end",
		end: "flex items-center"
	},
	variants: {
		surface: onSlot("wrapper", containerInteractiveVariants),
		border: onSlot("wrapper", borderVariants$1),
		outline: onSlot("wrapper", borderInFocusVariants),
		rounded: onSlot("wrapper", {
			...roundedVariants,
			full: `${roundedVariants.full} px-4`
		}),
		padding: {
			...paddingSlot(0),
			...paddingSlot(1),
			...paddingSlot(2),
			...paddingSlot(3),
			...paddingSlot(4)
		},
		expand: { true: { wrapper: "w-full" } }
	},
	defaultVariants: {
		surface: "base",
		border: "outline",
		outline: "current",
		rounded: "full",
		padding: 2,
		expand: false
	}
});
const defaultInputWrapperProps = {
	...inputWrapperVariants.defaultVariants,
	type: "text"
};
var wrapper_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	inheritAttrs: false,
	__name: "wrapper",
	props: /* @__PURE__ */ mergeModels(/* @__PURE__ */ mergeDefaults({
		class: {
			type: String,
			required: false
		},
		id: {
			type: String,
			required: false
		},
		type: {
			type: [String, Object],
			required: false
		},
		modelValue: {
			type: null,
			required: false
		},
		value: {
			type: null,
			required: false
		},
		iconEnd: {
			type: String,
			required: false
		},
		iconStart: {
			type: String,
			required: false
		},
		unit: {
			type: String,
			required: false
		},
		border: {
			type: null,
			required: false
		},
		expand: {
			type: null,
			required: false
		},
		outline: {
			type: null,
			required: false
		},
		padding: {
			type: null,
			required: false
		},
		rounded: {
			type: null,
			required: false
		},
		surface: {
			type: null,
			required: false
		}
	}, defaultInputWrapperProps), {
		"modelValue": { type: null },
		"modelModifiers": {}
	}),
	emits: ["update:modelValue"],
	setup(__props, { expose: __expose }) {
		__expose();
		const model = useModel(__props, "modelValue");
		const props = __props;
		const variants = computed(() => inputWrapperVariants(props));
		const wrapperClasses = computed(() => twMerge(variants.value.wrapper(), props.class));
		const { forwardRef } = useForwardExpose();
		const { showPassword, passwordToggleIcon, typeAttr } = usePasswordToggle(props.type);
		const __returned__ = {
			model,
			props,
			variants,
			wrapperClasses,
			forwardRef,
			showPassword,
			passwordToggleIcon,
			typeAttr,
			get RekaToggle() {
				return Toggle;
			},
			Icon: icon_default
		};
		Object.defineProperty(__returned__, "__isScriptSetup", {
			enumerable: false,
			value: true
		});
		return __returned__;
	}
});
const _hoisted_1$1 = ["id", "type"];
const _hoisted_2$1 = ["aria-label", "textContent"];
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
	return openBlock(), createElementBlock("div", { class: normalizeClass($setup.wrapperClasses) }, [
		createCommentVNode(" [[ start ][ input ][ unit ][ end ]] "),
		_ctx.$slots.start || _ctx.$props.iconStart !== void 0 ? renderSlot(_ctx.$slots, "start", {
			key: 0,
			class: normalizeClass($setup.variants.start()),
			padding: _ctx.$props.padding
		}, () => [createElementVNode("div", {
			class: normalizeClass($setup.variants.start()),
			role: "presentation",
			"aria-hidden": "true"
		}, [createVNode($setup["Icon"], { icon: _ctx.$props.iconStart }, null, 8, ["icon"])], 2)]) : createCommentVNode("v-if", true),
		createElementVNode("div", { class: normalizeClass($setup.variants.field()) }, [renderSlot(_ctx.$slots, "field", {
			ref: $setup.forwardRef,
			class: normalizeClass($setup.variants.input()),
			padding: _ctx.$props.padding
		}, () => [withDirectives(createElementVNode("input", mergeProps(_ctx.$attrs, {
			id: $setup.props.id,
			ref: $setup.forwardRef,
			"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.model = $event),
			class: $setup.variants.input(),
			type: $setup.typeAttr
		}), null, 16, _hoisted_1$1), [[vModelDynamic, $setup.model]])])], 2),
		_ctx.$slots.unit || _ctx.$props.unit ? renderSlot(_ctx.$slots, "unit", {
			key: 1,
			class: normalizeClass($setup.variants.unit()),
			padding: _ctx.$props.padding
		}, () => [createElementVNode("div", {
			class: normalizeClass($setup.variants.unit()),
			role: "note",
			"aria-label": _ctx.$props.unit,
			textContent: toDisplayString(_ctx.$props.unit)
		}, null, 10, _hoisted_2$1)]) : createCommentVNode("v-if", true),
		_ctx.$slots.end || _ctx.$props.iconEnd !== void 0 || _ctx.$props.type === "password" ? renderSlot(_ctx.$slots, "end", {
			key: 2,
			class: normalizeClass($setup.variants.end()),
			padding: _ctx.$props.padding
		}, () => [_ctx.$props.iconEnd !== void 0 ? (openBlock(), createElementBlock("div", {
			key: 0,
			class: normalizeClass($setup.variants.end()),
			role: "presentation",
			"aria-hidden": "true"
		}, [createVNode($setup["Icon"], { icon: _ctx.$props.iconEnd }, null, 8, ["icon"])], 2)) : $setup.props.type === "password" ? (openBlock(), createBlock($setup["RekaToggle"], {
			key: 1,
			modelValue: $setup.showPassword,
			"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $setup.showPassword = $event),
			class: normalizeClass($setup.variants.end())
		}, {
			default: withCtx(() => [createVNode($setup["Icon"], { icon: $setup.passwordToggleIcon }, null, 8, ["icon"])]),
			_: 1
		}, 8, ["modelValue", "class"])) : createCommentVNode("v-if", true)]) : createCommentVNode("v-if", true)
	], 2);
}
var wrapper_default = /* @__PURE__ */ export_helper_default(wrapper_vue_vue_type_script_setup_true_lang_default, [["render", _sfc_render$1], ["__file", "/home/runner/work/poupe/poupe/packages/@poupe-vue/src/components/input/wrapper.vue"]]);
const borderVariants = {
	solid: "border-solid border",
	none: "border-none",
	dashed: "border-dashed border"
};
const placeholder = tv({
	slots: {
		wrapper: "overflow-hidden",
		pattern: "w-full h-full"
	},
	variants: {
		border: onSlot("wrapper", borderVariants),
		color: {
			current: {
				wrapper: "border-current",
				pattern: "stroke-current"
			},
			["outline-variant"]: {
				wrapper: "border-outline-variant",
				pattern: "stroke-outline-variant"
			},
			outline: {
				wrapper: "border-outline",
				pattern: "stroke-outline"
			},
			primary: {
				wrapper: "border-primary",
				pattern: "stroke-primary"
			},
			secondary: {
				wrapper: "border-secondary",
				pattern: "stroke-secondary"
			},
			tertiary: {
				wrapper: "border-tertiary",
				pattern: "stroke-tertiary"
			},
			error: {
				wrapper: "border-error",
				pattern: "stroke-error"
			}
		},
		rounded: onSlot("wrapper", roundedVariants),
		shadow: onSlot("wrapper", shadowVariants)
	}
});
var placeholder_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "placeholder",
	props: {
		rh: {
			type: Number,
			required: false,
			default: 20
		},
		rw: {
			type: Number,
			required: false,
			default: 10
		},
		border: {
			type: null,
			required: false,
			default: "dashed"
		},
		color: {
			type: null,
			required: false,
			default: "outline-variant"
		},
		rounded: {
			type: null,
			required: false,
			default: "xl"
		},
		shadow: {
			type: null,
			required: false,
			default: "none"
		}
	},
	setup(__props, { expose: __expose }) {
		__expose();
		const props = __props;
		const __returned__ = {
			borderVariants,
			placeholder,
			props,
			id: useId(),
			variants: computed(() => placeholder({
				border: props.border,
				color: props.color,
				rounded: props.rounded,
				shadow: props.shadow
			}))
		};
		Object.defineProperty(__returned__, "__isScriptSetup", {
			enumerable: false,
			value: true
		});
		return __returned__;
	}
});
const _hoisted_1 = [
	"id",
	"width",
	"height"
];
const _hoisted_2 = ["d"];
const _hoisted_3 = ["fill"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
	return openBlock(), createElementBlock("div", { class: normalizeClass($setup.variants.wrapper()) }, [(openBlock(), createElementBlock("svg", {
		class: normalizeClass($setup.variants.pattern()),
		"aria-hidden": "true"
	}, [createElementVNode("defs", null, [createElementVNode("pattern", {
		id: $setup.id,
		x: "0",
		y: "0",
		width: $props.rw,
		height: $props.rh,
		patternUnits: "userSpaceOnUse"
	}, [createElementVNode("path", {
		d: `M0 0 ${$props.rw} ${$props.rh} M${$props.rw} 0 0 ${$props.rh}`,
		"stroke-width": "1px",
		"vector-effect": "non-scaling-stroke"
	}, null, 8, _hoisted_2)], 8, _hoisted_1)]), createElementVNode("rect", {
		stroke: "none",
		fill: `url(#${$setup.id})`,
		width: "100%",
		height: "100%"
	}, null, 8, _hoisted_3)], 2)), renderSlot(_ctx.$slots, "default")], 2);
}
var placeholder_default = /* @__PURE__ */ export_helper_default(placeholder_vue_vue_type_script_setup_true_lang_default, [["render", _sfc_render], ["__file", "/home/runner/work/poupe/poupe/packages/@poupe-vue/src/components/placeholder.vue"]]);
export { button_default as Button, card_default as Card, icon_default as Icon, wrapper_default as Input, placeholder_default as Placeholder, surface_default as Surface, createPoupe, poupeInjectionKey };

//# sourceMappingURL=index.mjs.map