@sigx/daisyui 0.1.6

package/dist/feedback-DFutN-Kz.js

@@ -0,0 +1,817 @@
+import { Portal, component, compound, effect, onMounted } from "sigx";
+import { jsx, jsxs } from "sigx/jsx-runtime";
+const Modal = compound(component(({ props, slots, emit }) => {
+	let dialogRef = null;
+	const close = () => {
+		if (props.model) props.model.value = false;
+	};
+	const handleClose = () => {
+		close();
+	};
+	const handleClick = (e) => {
+		if (e.target === dialogRef) close();
+	};
+	onMounted(() => {
+		effect(() => {
+			if (!dialogRef) return;
+			const isOpen = props.model?.value;
+			const isDialogOpen = dialogRef.open;
+			if (isOpen && !isDialogOpen) dialogRef.showModal();
+			else if (!isOpen && isDialogOpen) dialogRef.close();
+		});
+	});
+	return () => {
+		return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("dialog", {
+			ref: (el) => dialogRef = el,
+			class: "modal",
+			onClose: handleClose,
+			onClick: handleClick,
+			children: [/* @__PURE__ */ jsx("div", {
+				class: `modal-box ${props.class ?? ""}`,
+				children: slots.default?.()
+			}), /* @__PURE__ */ jsx("form", {
+				method: "dialog",
+				class: "modal-backdrop",
+				children: /* @__PURE__ */ jsx("button", { children: "close" })
+			})]
+		}) });
+	};
+}), {
+	Header: component(({ props, slots, emit }) => {
+		return () => /* @__PURE__ */ jsxs("div", {
+			class: `flex items-center justify-between ${props.class ?? ""}`,
+			children: [/* @__PURE__ */ jsx("h3", {
+				class: "text-lg font-bold",
+				children: slots.default?.()
+			}), /* @__PURE__ */ jsx("form", {
+				method: "dialog",
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					class: "btn btn-sm btn-circle btn-ghost",
+					onClick: () => emit("close"),
+					children: "✕"
+				})
+			})]
+		});
+	}),
+	Body: component(({ props, slots }) => {
+		return () => /* @__PURE__ */ jsx("div", {
+			class: `py-4 ${props.class ?? ""}`,
+			children: slots.default?.()
+		});
+	}),
+	Actions: component(({ props, slots }) => {
+		return () => /* @__PURE__ */ jsx("div", {
+			class: `modal-action ${props.class ?? ""}`,
+			children: slots.default?.()
+		});
+	})
+});
+var badgeVariantClasses = {
+	primary: "badge-primary",
+	secondary: "badge-secondary",
+	accent: "badge-accent",
+	info: "badge-info",
+	success: "badge-success",
+	warning: "badge-warning",
+	error: "badge-error",
+	ghost: "badge-ghost",
+	neutral: "badge-neutral"
+};
+var badgeSizeClasses = {
+	xs: "badge-xs",
+	sm: "badge-sm",
+	md: "",
+	lg: "badge-lg"
+};
+const Badge = component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["badge"];
+		if (props.variant) classes.push(badgeVariantClasses[props.variant]);
+		if (props.size) {
+			const sizeClass = badgeSizeClasses[props.size];
+			if (sizeClass) classes.push(sizeClass);
+		}
+		if (props.outline) classes.push("badge-outline");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("span", {
+		class: getClasses(),
+		children: slots.default?.()
+	});
+});
+var loadingTypeClasses = {
+	spinner: "loading-spinner",
+	dots: "loading-dots",
+	ring: "loading-ring",
+	ball: "loading-ball",
+	bars: "loading-bars",
+	infinity: "loading-infinity"
+};
+var loadingSizeClasses = {
+	xs: "loading-xs",
+	sm: "loading-sm",
+	md: "loading-md",
+	lg: "loading-lg"
+};
+const Loading = component(({ props }) => {
+	const getClasses = () => {
+		const classes = ["loading"];
+		classes.push(loadingTypeClasses[props.type ?? "spinner"]);
+		classes.push(loadingSizeClasses[props.size ?? "md"]);
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("span", { class: getClasses() });
+});
+var alertVariantClasses = {
+	info: "alert-info",
+	success: "alert-success",
+	warning: "alert-warning",
+	error: "alert-error"
+};
+var defaultIcons = {
+	info: "ℹ️",
+	success: "✅",
+	warning: "⚠️",
+	error: "❌"
+};
+const Alert = component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["alert"];
+		if (props.variant) classes.push(alertVariantClasses[props.variant]);
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		class: getClasses(),
+		children: [slots.icon?.() ?? (props.variant && /* @__PURE__ */ jsx("span", { children: defaultIcons[props.variant] })), /* @__PURE__ */ jsx("span", { children: slots.default?.() })]
+	});
+});
+var progressColorClasses = {
+	primary: "progress-primary",
+	secondary: "progress-secondary",
+	accent: "progress-accent",
+	info: "progress-info",
+	success: "progress-success",
+	warning: "progress-warning",
+	error: "progress-error"
+};
+const Progress = component(({ props }) => {
+	const getClasses = () => {
+		const classes = ["progress", "w-full"];
+		if (props.color) classes.push(progressColorClasses[props.color]);
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("progress", {
+		class: getClasses(),
+		value: props.value,
+		max: props.max ?? 100
+	});
+});
+var tooltipPositionClasses = {
+	top: "tooltip-top",
+	bottom: "tooltip-bottom",
+	left: "tooltip-left",
+	right: "tooltip-right"
+};
+var tooltipColorClasses = {
+	primary: "tooltip-primary",
+	secondary: "tooltip-secondary",
+	accent: "tooltip-accent",
+	info: "tooltip-info",
+	success: "tooltip-success",
+	warning: "tooltip-warning",
+	error: "tooltip-error"
+};
+const Tooltip = component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["tooltip"];
+		if (props.position) classes.push(tooltipPositionClasses[props.position]);
+		if (props.color) classes.push(tooltipColorClasses[props.color]);
+		if (props.open) classes.push("tooltip-open");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("div", {
+		class: getClasses(),
+		"data-tip": props.tip,
+		children: slots.default?.()
+	});
+});
+const Accordion = compound(component(({ props, slots, emit }) => {
+	const name = `accordion-${Math.random().toString(36).slice(2)}`;
+	const getVariantClass = () => {
+		if (props.variant === "arrow") return "collapse-arrow";
+		if (props.variant === "plus") return "collapse-plus";
+		return "";
+	};
+	const handleChange = (id, checked) => {
+		if (checked) {
+			if (props.activeId) props.activeId.value = id;
+			emit("change", id);
+		} else if (props.activeId?.value === id) {
+			if (props.activeId) props.activeId.value = "";
+			emit("change", "");
+		}
+	};
+	const handleDetailsToggle = (id, e) => {
+		const details = e.target;
+		handleChange(id, details.open);
+	};
+	return () => {
+		const variantClass = getVariantClass();
+		const containerClass = props.join ? "join join-vertical bg-base-100 w-full" : "w-full space-y-2";
+		const itemBorderClass = props.join ? "join-item border-base-300 border" : "border border-base-300";
+		const useDetails = props.type === "details";
+		const defaultContent = slots.default?.();
+		if (Array.isArray(defaultContent) && defaultContent.length > 0) return /* @__PURE__ */ jsx("div", {
+			class: `${containerClass} ${props.class ?? ""}`,
+			children: defaultContent
+		});
+		if (useDetails) return /* @__PURE__ */ jsx("div", {
+			class: `${containerClass} ${props.class ?? ""}`,
+			children: props.items?.map((item) => /* @__PURE__ */ jsxs("details", {
+				class: `collapse ${variantClass} bg-base-100 ${itemBorderClass}`,
+				name,
+				open: props.activeId?.value === item.id,
+				onToggle: (e) => handleDetailsToggle(item.id, e),
+				children: [/* @__PURE__ */ jsx("summary", {
+					class: "collapse-title font-semibold",
+					children: item.title
+				}), /* @__PURE__ */ jsx("div", {
+					class: "collapse-content text-sm",
+					children: /* @__PURE__ */ jsx("p", { children: item.content })
+				})]
+			}))
+		});
+		return /* @__PURE__ */ jsx("div", {
+			class: `${containerClass} ${props.class ?? ""}`,
+			children: props.items?.map((item) => /* @__PURE__ */ jsxs("div", {
+				class: `collapse ${variantClass} bg-base-100 ${itemBorderClass}`,
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						type: "radio",
+						name,
+						checked: props.activeId?.value === item.id,
+						onChange: (e) => handleChange(item.id, e.target.checked)
+					}),
+					/* @__PURE__ */ jsx("div", {
+						class: "collapse-title font-semibold",
+						children: item.title
+					}),
+					/* @__PURE__ */ jsx("div", {
+						class: "collapse-content text-sm",
+						children: /* @__PURE__ */ jsx("p", { children: item.content })
+					})
+				]
+			}))
+		});
+	};
+}), {
+	Item: component(({ props, slots, emit }) => {
+		const getVariantClass = () => {
+			if (props.variant === "arrow") return "collapse-arrow";
+			if (props.variant === "plus") return "collapse-plus";
+			return "";
+		};
+		const getForceClass = () => {
+			if (props.forceOpen) return "collapse-open";
+			if (props.forceClose) return "collapse-close";
+			return "";
+		};
+		return () => {
+			const baseClass = `collapse ${getVariantClass()} ${getForceClass()} bg-base-100 border border-base-300 ${props.class ?? ""}`;
+			const useDetails = props.type === "details";
+			const titleContent = slots.title?.();
+			const title = Array.isArray(titleContent) && titleContent.length > 0 ? titleContent : props.title;
+			if (useDetails) return /* @__PURE__ */ jsxs("details", {
+				class: baseClass,
+				name: props.name ?? "accordion",
+				open: props.open,
+				onToggle: (e) => emit("toggle", e.target.open),
+				children: [/* @__PURE__ */ jsx("summary", {
+					class: "collapse-title font-semibold",
+					children: title
+				}), /* @__PURE__ */ jsx("div", {
+					class: "collapse-content text-sm",
+					children: slots.default?.()
+				})]
+			});
+			return /* @__PURE__ */ jsxs("div", {
+				class: baseClass,
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						type: "radio",
+						name: props.name ?? "accordion",
+						checked: props.open,
+						onChange: (e) => emit("toggle", e.target.checked)
+					}),
+					/* @__PURE__ */ jsx("div", {
+						class: "collapse-title font-semibold",
+						children: title
+					}),
+					/* @__PURE__ */ jsx("div", {
+						class: "collapse-content text-sm",
+						children: slots.default?.()
+					})
+				]
+			});
+		};
+	}),
+	Collapse: component(({ props, slots, emit }) => {
+		const getVariantClass = () => {
+			if (props.variant === "arrow") return "collapse-arrow";
+			if (props.variant === "plus") return "collapse-plus";
+			return "";
+		};
+		const getForceClass = () => {
+			if (props.forceOpen) return "collapse-open";
+			if (props.forceClose) return "collapse-close";
+			return "";
+		};
+		const handleChange = (e) => {
+			const checked = e.target.checked;
+			if (props.model) props.model.value = checked;
+			emit("toggle", checked);
+		};
+		return () => {
+			const variantClass = getVariantClass();
+			const forceClass = getForceClass();
+			const titleContent = slots.title?.();
+			const title = Array.isArray(titleContent) && titleContent.length > 0 ? titleContent : props.title;
+			return /* @__PURE__ */ jsxs("div", {
+				class: `collapse ${variantClass} ${forceClass} bg-base-100 border border-base-300 ${props.class ?? ""}`,
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						type: "checkbox",
+						checked: props.model?.value ?? false,
+						onChange: handleChange
+					}),
+					/* @__PURE__ */ jsx("div", {
+						class: "collapse-title font-semibold",
+						children: title
+					}),
+					/* @__PURE__ */ jsx("div", {
+						class: "collapse-content text-sm",
+						children: slots.default?.()
+					})
+				]
+			});
+		};
+	})
+});
+var fileInputSizeClasses = {
+	xs: "file-input-xs",
+	sm: "file-input-sm",
+	md: "",
+	lg: "file-input-lg"
+};
+var fileInputColorClasses = {
+	primary: "file-input-primary",
+	secondary: "file-input-secondary",
+	accent: "file-input-accent",
+	info: "file-input-info",
+	success: "file-input-success",
+	warning: "file-input-warning",
+	error: "file-input-error"
+};
+const FileInput = component(({ props, emit }) => {
+	const getClasses = () => {
+		const classes = ["file-input", "w-full"];
+		if (props.size) {
+			const sizeClass = fileInputSizeClasses[props.size];
+			if (sizeClass) classes.push(sizeClass);
+		}
+		if (props.color) classes.push(fileInputColorClasses[props.color]);
+		if (props.bordered) classes.push("file-input-bordered");
+		if (props.ghost) classes.push("file-input-ghost");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	const handleChange = (e) => {
+		const target = e.target;
+		emit("change", target.files);
+	};
+	return () => /* @__PURE__ */ jsx("input", {
+		type: "file",
+		class: getClasses(),
+		accept: props.accept,
+		multiple: props.multiple,
+		disabled: props.disabled,
+		onChange: handleChange
+	});
+});
+var ratingSizeClasses = {
+	xs: "rating-xs",
+	sm: "rating-sm",
+	md: "",
+	lg: "rating-lg"
+};
+var ratingMaskClasses = {
+	"star": "mask-star",
+	"star-2": "mask-star-2",
+	"heart": "mask-heart",
+	"circle": "mask-circle",
+	"diamond": "mask-diamond",
+	"hexagon": "mask-hexagon",
+	"decagon": "mask-decagon",
+	"triangle": "mask-triangle"
+};
+var ratingColorClasses = {
+	primary: "bg-primary",
+	secondary: "bg-secondary",
+	accent: "bg-accent",
+	info: "bg-info",
+	success: "bg-success",
+	warning: "bg-warning",
+	error: "bg-error"
+};
+const Rating = component(({ props, emit }) => {
+	const max = () => props.max ?? 5;
+	const name = `rating-${Math.random().toString(36).slice(2)}`;
+	const getContainerClasses = () => {
+		const classes = ["rating"];
+		if (props.size) {
+			const sizeClass = ratingSizeClasses[props.size];
+			if (sizeClass) classes.push(sizeClass);
+		}
+		if (props.half) classes.push("rating-half");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	const getInputClasses = (value) => {
+		const classes = ["mask"];
+		classes.push(ratingMaskClasses[props.mask ?? "star-2"]);
+		if (props.color) classes.push(ratingColorClasses[props.color]);
+		else classes.push("bg-orange-400");
+		if (props.half && value % 1 === .5) classes.push("rating-half", "mask-half-1");
+		else if (props.half && value % 1 === 0) classes.push("mask-half-2");
+		return classes.join(" ");
+	};
+	const handleChange = (value) => {
+		if (!props.readOnly) {
+			if (props.model) props.model.value = value;
+			emit("change", value);
+		}
+	};
+	return () => {
+		const values = props.half ? Array.from({ length: max() * 2 }, (_, i) => (i + 1) * .5) : Array.from({ length: max() }, (_, i) => i + 1);
+		return /* @__PURE__ */ jsxs("div", {
+			class: getContainerClasses(),
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "radio",
+				name,
+				class: "rating-hidden",
+				checked: (props.model?.value ?? 0) === 0,
+				onChange: () => handleChange(0),
+				disabled: props.readOnly
+			}), values.map((value) => /* @__PURE__ */ jsx("input", {
+				type: "radio",
+				name,
+				class: getInputClasses(value),
+				checked: (props.model?.value ?? 0) === value,
+				onChange: () => handleChange(value),
+				disabled: props.readOnly
+			}))]
+		});
+	};
+});
+const Skeleton = component(({ props }) => {
+	const getClasses = () => {
+		const classes = ["skeleton"];
+		if (props.circle) classes.push("rounded-full");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	const getStyle = () => {
+		const style = {};
+		if (props.width) style.width = props.width;
+		if (props.height) style.height = props.height;
+		return style;
+	};
+	return () => /* @__PURE__ */ jsx("div", {
+		class: getClasses(),
+		style: getStyle()
+	});
+});
+const Steps = compound(component(({ props, slots, emit }) => {
+	const getClasses = () => {
+		const classes = ["steps"];
+		if (props.vertical) classes.push("steps-vertical");
+		else classes.push("w-full");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	const isStepCompleted = (stepId) => {
+		return (props.items?.findIndex((s) => s.id === stepId) ?? -1) <= (props.items?.findIndex((s) => s.id === props.model?.value) ?? -1);
+	};
+	const handleStepClick = (stepId) => {
+		if (props.model) props.model.value = stepId;
+		emit("change", stepId);
+	};
+	return () => {
+		if (slots.default) return /* @__PURE__ */ jsx("ul", {
+			class: getClasses(),
+			children: slots.default()
+		});
+		return /* @__PURE__ */ jsx("ul", {
+			class: getClasses(),
+			children: props.items?.map((step) => {
+				const completed = isStepCompleted(step.id);
+				return /* @__PURE__ */ jsx("li", {
+					class: `step ${step.color && completed ? `step-${step.color}` : completed ? "step-primary" : ""}`,
+					"data-content": step.content,
+					onClick: () => handleStepClick(step.id),
+					children: step.label
+				});
+			})
+		});
+	};
+}), { Step: component(({ props, slots, emit }) => {
+	const getClasses = () => {
+		const classes = ["step"];
+		if (props.completed || props.active) if (props.color) classes.push(`step-${props.color}`);
+		else classes.push("step-primary");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("li", {
+		class: getClasses(),
+		"data-content": props.content,
+		onClick: () => props.id && emit("click", props.id),
+		children: slots.default?.()
+	});
+}) });
+const Timeline = compound(component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["timeline"];
+		if (props.vertical) classes.push("timeline-vertical");
+		if (props.snap) classes.push("timeline-snap-icon");
+		if (props.compact) classes.push("timeline-compact");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	if (slots.default) return () => /* @__PURE__ */ jsx("ul", {
+		class: getClasses(),
+		children: slots.default?.()
+	});
+	return () => /* @__PURE__ */ jsx("ul", {
+		class: getClasses(),
+		children: props.items?.map((item, index) => /* @__PURE__ */ jsxs("li", { children: [
+			index > 0 && /* @__PURE__ */ jsx("hr", { class: item.color ? `bg-${item.color}` : "" }),
+			item.time && /* @__PURE__ */ jsx("div", {
+				class: "timeline-start",
+				children: item.time
+			}),
+			/* @__PURE__ */ jsx("div", {
+				class: "timeline-middle",
+				children: item.icon ? /* @__PURE__ */ jsx("span", { children: item.icon }) : /* @__PURE__ */ jsx("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					viewBox: "0 0 20 20",
+					fill: "currentColor",
+					class: "w-5 h-5",
+					children: /* @__PURE__ */ jsx("path", {
+						"fill-rule": "evenodd",
+						d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",
+						"clip-rule": "evenodd"
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				class: "timeline-end timeline-box",
+				children: [/* @__PURE__ */ jsx("div", {
+					class: "font-medium",
+					children: item.title
+				}), item.description && /* @__PURE__ */ jsx("p", {
+					class: "text-sm opacity-70",
+					children: item.description
+				})]
+			}),
+			index < (props.items?.length ?? 0) - 1 && /* @__PURE__ */ jsx("hr", { class: props.items?.[index + 1]?.color ? `bg-${props.items[index + 1].color}` : "" })
+		] }))
+	});
+}), {
+	Item: component(({ props, slots }) => {
+		return () => /* @__PURE__ */ jsxs("li", {
+			class: props.class,
+			children: [
+				slots.start && /* @__PURE__ */ jsx("div", {
+					class: "timeline-start",
+					children: slots.start()
+				}),
+				slots.middle && /* @__PURE__ */ jsx("div", {
+					class: "timeline-middle",
+					children: slots.middle()
+				}),
+				slots.end && /* @__PURE__ */ jsx("div", {
+					class: "timeline-end",
+					children: slots.end()
+				}),
+				slots.default?.()
+			]
+		});
+	}),
+	Start: component(({ props, slots }) => {
+		return () => /* @__PURE__ */ jsx("div", {
+			class: `timeline-start ${props.class ?? ""}`,
+			children: slots.default?.()
+		});
+	}),
+	Middle: component(({ props, slots }) => {
+		return () => /* @__PURE__ */ jsx("div", {
+			class: `timeline-middle ${props.class ?? ""}`,
+			children: slots.default?.() ?? /* @__PURE__ */ jsx("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: "0 0 20 20",
+				fill: "currentColor",
+				class: "w-5 h-5",
+				children: /* @__PURE__ */ jsx("path", {
+					"fill-rule": "evenodd",
+					d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",
+					"clip-rule": "evenodd"
+				})
+			})
+		});
+	}),
+	End: component(({ props, slots }) => {
+		const getClasses = () => {
+			const classes = ["timeline-end"];
+			if (props.boxed) classes.push("timeline-box");
+			if (props.class) classes.push(props.class);
+			return classes.join(" ");
+		};
+		return () => /* @__PURE__ */ jsx("div", {
+			class: getClasses(),
+			children: slots.default?.()
+		});
+	})
+});
+var toastPositionClasses = {
+	"top-start": "toast-top toast-start",
+	"top-center": "toast-top toast-center",
+	"top-end": "toast-top toast-end",
+	"middle-start": "toast-middle toast-start",
+	"middle-center": "toast-middle toast-center",
+	"middle-end": "toast-middle toast-end",
+	"bottom-start": "toast-bottom toast-start",
+	"bottom-center": "toast-bottom toast-center",
+	"bottom-end": "toast-bottom toast-end"
+};
+const Toast = component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["toast"];
+		const position = props.position ?? "bottom-end";
+		classes.push(toastPositionClasses[position]);
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("div", {
+		class: getClasses(),
+		children: slots.default?.()
+	});
+});
+var kbdSizeClasses = {
+	xs: "kbd-xs",
+	sm: "kbd-sm",
+	md: "",
+	lg: "kbd-lg"
+};
+const Kbd = component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["kbd"];
+		if (props.size) {
+			const sizeClass = kbdSizeClasses[props.size];
+			if (sizeClass) classes.push(sizeClass);
+		}
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("kbd", {
+		class: getClasses(),
+		children: slots.default?.()
+	});
+});
+const RadialProgress = component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["radial-progress"];
+		if (props.color) classes.push(`text-${props.color}`);
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	const getStyle = () => {
+		const style = { "--value": String(props.value ?? 0) };
+		if (props.size) style["--size"] = props.size;
+		if (props.thickness) style["--thickness"] = props.thickness;
+		return style;
+	};
+	return () => /* @__PURE__ */ jsx("div", {
+		class: getClasses(),
+		style: getStyle(),
+		role: "progressbar",
+		children: slots.default?.() ?? `${props.value}%`
+	});
+});
+const Countdown = component(({ props }) => {
+	const getClasses = () => {
+		const classes = ["countdown"];
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("span", {
+		class: getClasses(),
+		children: /* @__PURE__ */ jsx("span", { style: { "--value": props.value ?? 0 } })
+	});
+});
+const Diff = component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["diff"];
+		if (!props.aspectRatio) classes.push("aspect-[16/9]");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	const getStyle = () => {
+		if (props.aspectRatio) return { aspectRatio: props.aspectRatio };
+		return {};
+	};
+	return () => /* @__PURE__ */ jsxs("div", {
+		class: getClasses(),
+		style: getStyle(),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				class: "diff-item-1",
+				children: slots.first?.()
+			}),
+			/* @__PURE__ */ jsx("div", {
+				class: "diff-item-2",
+				children: slots.second?.()
+			}),
+			/* @__PURE__ */ jsx("div", { class: "diff-resizer" })
+		]
+	});
+});
+const Swap = component(({ props, slots, emit }) => {
+	const getClasses = () => {
+		const classes = ["swap"];
+		if (props.rotate) classes.push("swap-rotate");
+		if (props.flip) classes.push("swap-flip");
+		if (props.active || props.model?.value) classes.push("swap-active");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	const handleChange = (e) => {
+		const checked = e.target.checked;
+		if (props.model) props.model.value = checked;
+		emit("change", checked);
+	};
+	return () => /* @__PURE__ */ jsxs("label", {
+		class: getClasses(),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				type: "checkbox",
+				checked: props.model?.value ?? props.active ?? false,
+				onChange: handleChange
+			}),
+			/* @__PURE__ */ jsx("div", {
+				class: "swap-on",
+				children: slots.on?.()
+			}),
+			/* @__PURE__ */ jsx("div", {
+				class: "swap-off",
+				children: slots.off?.()
+			})
+		]
+	});
+});
+var indicatorPositionClasses = {
+	"top-start": "indicator-top indicator-start",
+	"top-center": "indicator-top indicator-center",
+	"top-end": "indicator-top indicator-end",
+	"middle-start": "indicator-middle indicator-start",
+	"middle-center": "indicator-middle indicator-center",
+	"middle-end": "indicator-middle indicator-end",
+	"bottom-start": "indicator-bottom indicator-start",
+	"bottom-center": "indicator-bottom indicator-center",
+	"bottom-end": "indicator-bottom indicator-end"
+};
+const Indicator = component(({ props, slots }) => {
+	const positionClass = indicatorPositionClasses[props.position ?? "top-end"];
+	const getClasses = () => {
+		const classes = ["indicator"];
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsxs("div", {
+		class: getClasses(),
+		children: [/* @__PURE__ */ jsx("span", {
+			class: `indicator-item ${positionClass}`,
+			children: slots.indicator?.()
+		}), slots.default?.()]
+	});
+});
+export { Progress as _, RadialProgress as a, Timeline as c, Rating as d, FileInput as f, Loading as g, Badge as h, Countdown as i, Steps as l, Alert as m, Swap as n, Kbd as o, Accordion as p, Diff as r, Toast as s, Indicator as t, Skeleton as u, Tooltip as v, Modal as y };
+
+//# sourceMappingURL=feedback-DFutN-Kz.js.map