@soubiran/ui 0.4.0 → 0.5.0

package/dist/index.js

@@ -1,843 +1,4 @@
-import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, markRaw, mergeModels, normalizeClass, onMounted, openBlock, readonly, ref, renderList, renderSlot, toDisplayString, unref, useModel, withCtx } from "vue";
-import { tv } from "tailwind-variants";
-import UButton from "@nuxt/ui/components/Button.vue";
-import UPopover from "@nuxt/ui/components/Popover.vue";
-import { useRoute } from "vue-router";
-import UCard from "@nuxt/ui/components/Card.vue";
-import UFormField from "@nuxt/ui/components/FormField.vue";
-import UIcon from "@nuxt/ui/components/Icon.vue";
-import UTextarea from "@nuxt/ui/components/Textarea.vue";
-import UTooltip from "@nuxt/ui/components/Tooltip.vue";
-import { useMutation } from "@pinia/colada";
-import { motion } from "motion-v";
-import { ofetch } from "ofetch";
-import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from "reka-ui";
-import USeparator from "@nuxt/ui/components/Separator.vue";
-import { createSharedComposable } from "@vueuse/core";
-import PartySocket from "partysocket";
-//#region src/components/Container.vue
-const container = tv({ slots: {
-	base: "px-4 sm:px-6 lg:px-8",
-	inner: "w-full max-w-7xl mx-auto"
-} });
-const _sfc_main = /* @__PURE__ */ defineComponent({
-	__name: "Container",
-	props: {
-		class: {},
-		ui: {}
-	},
-	setup(__props) {
-		const props = __props;
-		const ui = computed(() => container());
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [createElementVNode("div", { class: normalizeClass(ui.value.inner({ class: props.ui?.inner })) }, [renderSlot(_ctx.$slots, "default")], 2)], 2);
-		};
-	}
-});
-//#endregion
-//#region ~icons/ph/thumbs-up
-const _hoisted_1$11 = {
-	viewBox: "0 0 256 256",
-	width: "1.2em",
-	height: "1.2em"
-};
-function render$7(_ctx, _cache) {
-	return openBlock(), createElementBlock("svg", _hoisted_1$11, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
-		fill: "currentColor",
-		d: "M234 80.12A24 24 0 0 0 216 72h-56V56a40 40 0 0 0-40-40a8 8 0 0 0-7.16 4.42L75.06 96H32a16 16 0 0 0-16 16v88a16 16 0 0 0 16 16h172a24 24 0 0 0 23.82-21l12-96A24 24 0 0 0 234 80.12M32 112h40v88H32Zm191.94-15l-12 96a8 8 0 0 1-7.94 7H88v-94.11l36.71-73.43A24 24 0 0 1 144 56v24a8 8 0 0 0 8 8h64a8 8 0 0 1 7.94 9"
-	}, null, -1)])]);
-}
-var thumbs_up_default = markRaw({
-	name: "ph-thumbs-up",
-	render: render$7
-});
-//#endregion
-//#region src/composables/useUmami.ts
-function useUmami() {
-	const route = useRoute();
-	function track(event, data) {
-		window.umami?.track(event, {
-			...data,
-			page_path: route.path
-		});
-	}
-	return { track };
-}
-//#endregion
-//#region ~icons/ph/check-circle
-const _hoisted_1$10 = {
-	viewBox: "0 0 256 256",
-	width: "1.2em",
-	height: "1.2em"
-};
-function render$6(_ctx, _cache) {
-	return openBlock(), createElementBlock("svg", _hoisted_1$10, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
-		fill: "currentColor",
-		d: "M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0M232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88"
-	}, null, -1)])]);
-}
-var check_circle_default = markRaw({
-	name: "ph-check-circle",
-	render: render$6
-});
-//#endregion
-//#region src/components/FeedbackCard.vue
-const _hoisted_1$9 = ["for"];
-const feedbackCard = tv({ slots: {
-	base: "relative w-64",
-	successfullySentOverlay: "absolute z-10 inset-0 bg-default",
-	successfullySentContent: "absolute z-20 inset-0 flex flex-col justify-center items-center text-muted text-xs",
-	successfullySentIcon: "size-5",
-	input: "w-full",
-	radioGroup: "flex flex-row gap-2 text-lg",
-	radioGroupItem: "peer",
-	radioGroupLabel: "grayscale-100 hover:grayscale-0 peer-data-[state=checked]:grayscale-0"
-} });
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-	__name: "FeedbackCard",
-	props: /* @__PURE__ */ mergeModels({
-		id: {},
-		class: {},
-		ui: {}
-	}, {
-		"content": { required: true },
-		"contentModifiers": {},
-		"rating": { required: true },
-		"ratingModifiers": {}
-	}),
-	emits: /* @__PURE__ */ mergeModels(["success"], ["update:content", "update:rating"]),
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emits = __emit;
-		const content = useModel(__props, "content");
-		const rating = useModel(__props, "rating");
-		const ratings = [
-			{
-				label: "😭",
-				value: "Hate it"
-			},
-			{
-				label: "🙁",
-				value: "Not great"
-			},
-			{
-				label: "🙂",
-				value: "It's ok"
-			},
-			{
-				label: "🤩",
-				value: "Love it"
-			}
-		];
-		const successfullySent = ref(false);
-		const { track } = useUmami();
-		const { mutate, isLoading, error } = useMutation({
-			mutation: ({ rating, content }) => ofetch(`/api/posts/${props.id}/feedback`, {
-				method: "POST",
-				body: {
-					rating,
-					content
-				},
-				baseURL: import.meta.env.VITE_API_BASE_URL
-			}),
-			onSuccess: () => {
-				successfullySent.value = true;
-				track("feedback_submit");
-				setTimeout(() => emits("success"), 200);
-			}
-		});
-		function sendFeedback() {
-			mutate({
-				rating: rating.value,
-				content: content.value
-			});
-		}
-		const formattedError = computed(() => {
-			if (!error.value) return void 0;
-			if (error.value.data?.errors) return error.value.data.errors.content?.[0] || error.value.data.errors.rating?.[0];
-			if (error.value.status === 404) return "Page not found. Cannot send feedback. It's us, not you!";
-			if (error.value.status === 503) return "Service is currently unavailable. Please try again later.";
-			return "An unexpected error occurred.";
-		});
-		const ui = computed(() => feedbackCard());
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(UCard, {
-				class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })),
-				ui: {
-					body: "p-2 sm:p-2",
-					footer: "p-2 sm:p-2 flex items-center justify-between"
-				}
-			}, {
-				footer: withCtx(() => [createVNode(unref(RadioGroupRoot), {
-					modelValue: rating.value,
-					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => rating.value = $event),
-					class: normalizeClass(ui.value.radioGroup({ class: props.ui?.radioGroup }))
-				}, {
-					default: withCtx(() => [(openBlock(), createElementBlock(Fragment, null, renderList(ratings, (item) => {
-						return createElementVNode("div", { key: item.value }, [createVNode(unref(RadioGroupItem), {
-							id: item.value,
-							value: item.value,
-							class: normalizeClass(ui.value.radioGroupItem({ class: props.ui?.radioGroupItem }))
-						}, {
-							default: withCtx(() => [createVNode(unref(RadioGroupIndicator))]),
-							_: 1
-						}, 8, [
-							"id",
-							"value",
-							"class"
-						]), createVNode(UTooltip, { text: item.value }, {
-							default: withCtx(() => [createElementVNode("label", {
-								for: item.value,
-								class: normalizeClass(ui.value.radioGroupLabel({ class: props.ui?.radioGroupLabel }))
-							}, toDisplayString(item.label), 11, _hoisted_1$9)]),
-							_: 2
-						}, 1032, ["text"])]);
-					}), 64))]),
-					_: 1
-				}, 8, ["modelValue", "class"]), createVNode(UButton, {
-					size: "sm",
-					label: "Send",
-					loading: unref(isLoading),
-					onClick: sendFeedback
-				}, null, 8, ["loading"])]),
-				default: withCtx(() => [successfullySent.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(motion).div, {
-					initial: { opacity: 0 },
-					animate: {
-						opacity: 1,
-						transition: { duration: .2 }
-					},
-					class: normalizeClass(ui.value.successfullySentOverlay({ class: props.ui?.successfullySentOverlay }))
-				}, null, 8, ["class"]), createElementVNode("div", { class: normalizeClass(ui.value.successfullySentContent({ class: props.ui?.successfullySentContent })) }, [
-					createVNode(unref(motion).div, {
-						initial: {
-							opacity: 0,
-							transform: "translateY(4px)"
-						},
-						animate: {
-							opacity: 1,
-							transform: "translateY(0)",
-							transition: {
-								delay: .1,
-								duration: .3
-							}
-						}
-					}, {
-						default: withCtx(() => [createVNode(UIcon, {
-							name: unref(check_circle_default),
-							class: normalizeClass(ui.value.successfullySentIcon({ class: props.ui?.successfullySentIcon }))
-						}, null, 8, ["name", "class"])]),
-						_: 1
-					}),
-					createVNode(unref(motion).p, {
-						initial: {
-							opacity: 0,
-							transform: "translateY(4px)"
-						},
-						animate: {
-							opacity: 1,
-							transform: "translateY(0)",
-							transition: {
-								delay: .2,
-								duration: .3
-							}
-						},
-						class: "mt-3"
-					}, {
-						default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" Your feedback has been received. ", -1)])]),
-						_: 1
-					}),
-					createVNode(unref(motion).p, {
-						initial: {
-							opacity: 0,
-							transform: "translateY(4px)"
-						},
-						animate: {
-							opacity: 1,
-							transform: "translateY(0)",
-							transition: {
-								delay: .3,
-								duration: .3
-							}
-						},
-						class: "mt-1"
-					}, {
-						default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode(" Thanks for your help! ", -1)])]),
-						_: 1
-					})
-				], 2)], 64)) : createCommentVNode("v-if", true), createVNode(UFormField, { error: formattedError.value }, {
-					error: withCtx(({ error: formFieldError }) => [formFieldError ? (openBlock(), createBlock(unref(motion).div, {
-						key: 0,
-						initial: { height: 0 },
-						animate: { height: "auto" },
-						class: "text-sm"
-					}, {
-						default: withCtx(() => [createTextVNode(toDisplayString(formFieldError), 1)]),
-						_: 2
-					}, 1024)) : createCommentVNode("v-if", true)]),
-					default: withCtx(() => [createVNode(UTextarea, {
-						modelValue: content.value,
-						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => content.value = $event),
-						placeholder: "Your feedback...",
-						variant: "soft",
-						class: normalizeClass(ui.value.input({ class: props.ui?.input }))
-					}, null, 8, ["modelValue", "class"])]),
-					_: 1
-				}, 8, ["error"])]),
-				_: 1
-			}, 8, ["class"]);
-		};
-	}
-});
-//#endregion
-//#region src/components/Feedback.vue
-const feedback = tv({ slots: { base: "px-0 py-1 text-dimmed text-sm" } });
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-	__name: "Feedback",
-	props: {
-		id: {},
-		class: {},
-		ui: {}
-	},
-	setup(__props) {
-		const props = __props;
-		const { track } = useUmami();
-		function onClick() {
-			track("feedback_click");
-		}
-		const content = ref("");
-		const rating = ref("");
-		function onSuccess() {
-			content.value = "";
-			rating.value = "";
-		}
-		const ui = computed(() => feedback());
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(UPopover, { ui: { content: "ring-0 data-[state=open]:animate-[scale-up_100ms_ease-out]" } }, {
-				content: withCtx(() => [createVNode(_sfc_main$2, {
-					id: props.id,
-					rating: rating.value,
-					"onUpdate:rating": _cache[0] || (_cache[0] = ($event) => rating.value = $event),
-					content: content.value,
-					"onUpdate:content": _cache[1] || (_cache[1] = ($event) => content.value = $event),
-					onSuccess
-				}, null, 8, [
-					"id",
-					"rating",
-					"content"
-				])]),
-				default: withCtx(() => [createVNode(UButton, {
-					variant: "link",
-					color: "neutral",
-					label: "Give feedback",
-					size: "sm",
-					icon: unref(thumbs_up_default),
-					class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })),
-					onClick
-				}, null, 8, ["icon", "class"])]),
-				_: 1
-			});
-		};
-	}
-});
-//#endregion
-//#region ~icons/simple-icons/discord
-const _hoisted_1$8 = {
-	viewBox: "0 0 24 24",
-	width: "1.2em",
-	height: "1.2em"
-};
-function render$5(_ctx, _cache) {
-	return openBlock(), createElementBlock("svg", _hoisted_1$8, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
-		fill: "currentColor",
-		d: "M20.317 4.37a19.8 19.8 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.3 18.3 0 0 0-5.487 0a13 13 0 0 0-.617-1.25a.08.08 0 0 0-.079-.037A19.7 19.7 0 0 0 3.677 4.37a.1.1 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.08.08 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.08.08 0 0 0 .084-.028a14 14 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13 13 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10 10 0 0 0 .372-.292a.07.07 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.07.07 0 0 1 .078.01q.181.149.373.292a.077.077 0 0 1-.006.127a12.3 12.3 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.08.08 0 0 0 .084.028a19.8 19.8 0 0 0 6.002-3.03a.08.08 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.06.06 0 0 0-.031-.03M8.02 15.33c-1.182 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418m7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418"
-	}, null, -1)])]);
-}
-var discord_default = markRaw({
-	name: "simple-icons-discord",
-	render: render$5
-});
-//#endregion
-//#region ~icons/simple-icons/github
-const _hoisted_1$7 = {
-	viewBox: "0 0 24 24",
-	width: "1.2em",
-	height: "1.2em"
-};
-function render$4(_ctx, _cache) {
-	return openBlock(), createElementBlock("svg", _hoisted_1$7, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
-		fill: "currentColor",
-		d: "M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
-	}, null, -1)])]);
-}
-var github_default = markRaw({
-	name: "simple-icons-github",
-	render: render$4
-});
-//#endregion
-//#region ~icons/simple-icons/linkedin
-const _hoisted_1$6 = {
-	viewBox: "0 0 24 24",
-	width: "1.2em",
-	height: "1.2em"
-};
-function render$3(_ctx, _cache) {
-	return openBlock(), createElementBlock("svg", _hoisted_1$6, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
-		fill: "currentColor",
-		d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z"
-	}, null, -1)])]);
-}
-var linkedin_default = markRaw({
-	name: "simple-icons-linkedin",
-	render: render$3
-});
-//#endregion
-//#region ~icons/simple-icons/twitch
-const _hoisted_1$5 = {
-	viewBox: "0 0 24 24",
-	width: "1.2em",
-	height: "1.2em"
-};
-function render$2(_ctx, _cache) {
-	return openBlock(), createElementBlock("svg", _hoisted_1$5, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
-		fill: "currentColor",
-		d: "M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"
-	}, null, -1)])]);
-}
-var twitch_default = markRaw({
-	name: "simple-icons-twitch",
-	render: render$2
-});
-//#endregion
-//#region ~icons/simple-icons/x
-const _hoisted_1$4 = {
-	viewBox: "0 0 24 24",
-	width: "1.2em",
-	height: "1.2em"
-};
-function render$1(_ctx, _cache) {
-	return openBlock(), createElementBlock("svg", _hoisted_1$4, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
-		fill: "currentColor",
-		d: "M14.234 10.162L22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299l-.929-1.329L3.076 1.56h3.182l5.965 8.532l.929 1.329l7.754 11.09h-3.182z"
-	}, null, -1)])]);
-}
-var x_default = markRaw({
-	name: "simple-icons-x",
-	render: render$1
-});
-//#endregion
-//#region src/components/Header.vue
-const header = tv({ slots: {
-	base: "h-(--ui-header-height) flex flex-row gap-4 items-center justify-end",
-	link: "p-0 text-dimmed"
-} });
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-	__name: "Header",
-	props: {
-		links: {},
-		class: {},
-		ui: {}
-	},
-	setup(__props) {
-		const props = __props;
-		const { track } = useUmami();
-		function trackClick(label) {
-			track("header_click", { label });
-		}
-		const ui = computed(() => header());
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(_sfc_main, { ui: { inner: "max-w-5xl" } }, {
-				default: withCtx(() => [createElementVNode("header", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [
-					(openBlock(true), createElementBlock(Fragment, null, renderList(props.links, (link) => {
-						return openBlock(), createBlock(UTooltip, {
-							key: link.label,
-							text: link.label
-						}, {
-							default: withCtx(() => [createVNode(UButton, {
-								variant: "link",
-								color: "neutral",
-								to: link.to,
-								"aria-label": link.label,
-								icon: link.icon,
-								class: normalizeClass(ui.value.link({ class: props.ui?.link })),
-								onClick: ($event) => trackClick(link.label)
-							}, null, 8, [
-								"to",
-								"aria-label",
-								"icon",
-								"class",
-								"onClick"
-							])]),
-							_: 2
-						}, 1032, ["text"]);
-					}), 128)),
-					createVNode(USeparator, {
-						orientation: "vertical",
-						class: "h-5"
-					}),
-					createVNode(UTooltip, { text: "LinkedIn" }, {
-						default: withCtx(() => [createVNode(UButton, {
-							href: "https://www.linkedin.com/in/esteban25/",
-							target: "_blank",
-							variant: "link",
-							color: "neutral",
-							"aria-label": "LinkedIn",
-							icon: unref(linkedin_default),
-							class: normalizeClass(ui.value.link({ class: props.ui?.link })),
-							ui: { leadingIcon: "size-4" },
-							onClick: _cache[0] || (_cache[0] = ($event) => trackClick("LinkedIn"))
-						}, null, 8, ["icon", "class"])]),
-						_: 1
-					}),
-					createVNode(UTooltip, { text: "X" }, {
-						default: withCtx(() => [createVNode(UButton, {
-							href: "https://x.com/soubiran_",
-							target: "_blank",
-							variant: "link",
-							color: "neutral",
-							"aria-label": "X",
-							icon: unref(x_default),
-							class: normalizeClass(ui.value.link({ class: props.ui?.link })),
-							ui: { leadingIcon: "size-4" },
-							onClick: _cache[1] || (_cache[1] = ($event) => trackClick("X"))
-						}, null, 8, ["icon", "class"])]),
-						_: 1
-					}),
-					createVNode(UTooltip, { text: "Twitch" }, {
-						default: withCtx(() => [createVNode(UButton, {
-							href: "https://www.twitch.tv/barbapapazes",
-							target: "_blank",
-							variant: "link",
-							color: "neutral",
-							"aria-label": "Twitch",
-							icon: unref(twitch_default),
-							class: normalizeClass(ui.value.link({ class: props.ui?.link })),
-							ui: { leadingIcon: "size-4" },
-							onClick: _cache[2] || (_cache[2] = ($event) => trackClick("Twitch"))
-						}, null, 8, ["icon", "class"])]),
-						_: 1
-					}),
-					createVNode(UTooltip, { text: "GitHub" }, {
-						default: withCtx(() => [createVNode(UButton, {
-							href: "https://github.com/barbapapazes",
-							target: "_blank",
-							variant: "link",
-							color: "neutral",
-							"aria-label": "GitHub",
-							icon: unref(github_default),
-							class: normalizeClass(ui.value.link({ class: props.ui?.link })),
-							ui: { leadingIcon: "size-4" },
-							onClick: _cache[3] || (_cache[3] = ($event) => trackClick("GitHub"))
-						}, null, 8, ["icon", "class"])]),
-						_: 1
-					}),
-					createVNode(UTooltip, { text: "Discord" }, {
-						default: withCtx(() => [createVNode(UButton, {
-							href: "https://discord.gg/q2ghCGUuFR",
-							target: "_blank",
-							variant: "link",
-							color: "neutral",
-							"aria-label": "Discord",
-							icon: unref(discord_default),
-							class: normalizeClass(ui.value.link({ class: props.ui?.link })),
-							ui: { leadingIcon: "size-4" },
-							onClick: _cache[4] || (_cache[4] = ($event) => trackClick("Discord"))
-						}, null, 8, ["icon", "class"])]),
-						_: 1
-					})
-				], 2)]),
-				_: 1
-			});
-		};
-	}
-});
-//#endregion
-//#region src/components/Page.vue
-const page = tv({ slots: {
-	base: "py-12",
-	header: "max-w-3xl mx-auto xl:max-w-none xl:grid xl:grid-cols-[256px_768px_256px]",
-	headerInner: "xl:col-start-2",
-	content: "mt-6 max-w-3xl mx-auto xl:max-w-none xl:grid xl:grid-cols-[256px_768px_256px] xl:mx-auto",
-	contentInner: "xl:col-start-2",
-	right: "hidden xl:block xl:col-start-3 xl:pl-8 xl:h-full",
-	rightInner: "sticky top-4"
-} });
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-	__name: "Page",
-	props: {
-		class: {},
-		ui: {}
-	},
-	setup(__props) {
-		const props = __props;
-		const ui = computed(() => page());
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [createVNode(_sfc_main, null, {
-				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(ui.value.header({ class: props.ui?.header })) }, [createElementVNode("div", { class: normalizeClass(ui.value.headerInner({ class: props.ui?.headerInner })) }, [renderSlot(_ctx.$slots, "header")], 2)], 2), createElementVNode("div", { class: normalizeClass(ui.value.content({ class: props.ui?.content })) }, [createElementVNode("div", { class: normalizeClass(ui.value.contentInner({ class: props.ui?.contentInner })) }, [renderSlot(_ctx.$slots, "default")], 2), createElementVNode("div", { class: normalizeClass(ui.value.right({ class: props.ui?.right })) }, [createElementVNode("div", { class: normalizeClass(ui.value.rightInner({ class: props.ui?.rightInner })) }, [renderSlot(_ctx.$slots, "right")], 2)], 2)], 2)]),
-				_: 3
-			}), renderSlot(_ctx.$slots, "bottom")], 2);
-		};
-	}
-});
-//#endregion
-//#region src/components/PageTitle.vue
-const pageTitle = tv({ slots: { base: "text-xl font-bold text-highlighted" } });
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
-	__name: "PageTitle",
-	props: {
-		title: {},
-		class: {},
-		ui: {}
-	},
-	setup(__props) {
-		const props = __props;
-		const ui = computed(() => pageTitle());
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("h1", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, toDisplayString(__props.title), 3);
-		};
-	}
-});
-//#endregion
-//#region src/components/PageHeader.vue
-const pageHeader = tv({ slots: { base: "" } });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-	__name: "PageHeader",
-	props: {
-		title: {},
-		class: {},
-		ui: {}
-	},
-	setup(__props) {
-		const props = __props;
-		const ui = computed(() => pageHeader());
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [createVNode(_sfc_main$6, { title: props.title }, null, 8, ["title"]), renderSlot(_ctx.$slots, "after")], 2);
-		};
-	}
-});
-//#endregion
-//#region ~icons/simple-icons/youtube
-const _hoisted_1$3 = {
-	viewBox: "0 0 24 24",
-	width: "1.2em",
-	height: "1.2em"
-};
-function render(_ctx, _cache) {
-	return openBlock(), createElementBlock("svg", _hoisted_1$3, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
-		fill: "currentColor",
-		d: "M23.498 6.186a3.02 3.02 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.02 3.02 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.02 3.02 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.02 3.02 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814M9.545 15.568V8.432L15.818 12z"
-	}, null, -1)])]);
-}
-var youtube_default = markRaw({
-	name: "simple-icons-youtube",
-	render
-});
-//#endregion
-//#region src/components/Socials.vue
-const socials = tv({ slots: {
-	base: "flex flex-wrap gap-2",
-	link: "flex items-center gap-1",
-	icon: "size-4"
-} });
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-	__name: "Socials",
-	props: {
-		class: {},
-		ui: {}
-	},
-	setup(__props) {
-		const props = __props;
-		const ui = computed(() => socials());
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("p", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [
-				createElementVNode("a", {
-					href: "https://www.linkedin.com/in/esteban25/",
-					rel: "noopener noreferrer",
-					target: "_blank",
-					class: normalizeClass(ui.value.link({ class: props.ui?.link }))
-				}, [createVNode(UIcon, {
-					name: unref(linkedin_default),
-					class: normalizeClass(ui.value.icon({ class: props.ui?.icon }))
-				}, null, 8, ["name", "class"]), _cache[0] || (_cache[0] = createElementVNode("span", null, "LinkedIn", -1))], 2),
-				createElementVNode("a", {
-					href: "https://x.com/soubiran_",
-					rel: "noopener noreferrer",
-					target: "_blank",
-					class: normalizeClass(ui.value.link({ class: props.ui?.link }))
-				}, [createVNode(UIcon, {
-					name: unref(x_default),
-					class: normalizeClass(ui.value.icon({ class: props.ui?.icon }))
-				}, null, 8, ["name", "class"]), _cache[1] || (_cache[1] = createElementVNode("span", null, "X (Twitter)", -1))], 2),
-				createElementVNode("a", {
-					href: "https://github.com/barbapapazes",
-					rel: "noopener noreferrer",
-					target: "_blank",
-					class: normalizeClass(ui.value.link({ class: props.ui?.link }))
-				}, [createVNode(UIcon, {
-					name: unref(github_default),
-					class: normalizeClass(ui.value.icon({ class: props.ui?.icon }))
-				}, null, 8, ["name", "class"]), _cache[2] || (_cache[2] = createElementVNode("span", null, "GitHub", -1))], 2),
-				createElementVNode("a", {
-					href: "https://www.twitch.tv/barbapapazes",
-					rel: "noopener noreferrer",
-					target: "_blank",
-					class: normalizeClass(ui.value.link({ class: props.ui?.link }))
-				}, [createVNode(UIcon, {
-					name: unref(twitch_default),
-					class: normalizeClass(ui.value.icon({ class: props.ui?.icon }))
-				}, null, 8, ["name", "class"]), _cache[3] || (_cache[3] = createElementVNode("span", null, "Twitch", -1))], 2),
-				createElementVNode("a", {
-					href: "https://www.youtube.com/@barbapapazes",
-					target: "_blank",
-					rel: "noopener noreferrer",
-					class: normalizeClass(ui.value.link({ class: props.ui?.link }))
-				}, [createVNode(UIcon, {
-					name: unref(youtube_default),
-					class: normalizeClass(ui.value.icon({ class: props.ui?.icon }))
-				}, null, 8, ["name", "class"]), _cache[4] || (_cache[4] = createElementVNode("span", null, "YouTube", -1))], 2)
-			], 2);
-		};
-	}
-});
-//#endregion
-//#region src/components/Sponsors.vue
-const _hoisted_1$2 = {
-	href: "https://soubiran.dev/sponsorship?utm_source=infra.soubiran.dev&utm_medium=link",
-	target: "_blank"
-};
-const sponsors = tv({ slots: {
-	base: "not-prose",
-	img: "border-0"
-} });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-	__name: "Sponsors",
-	props: {
-		class: {},
-		ui: {}
-	},
-	setup(__props) {
-		const props = __props;
-		const ui = computed(() => sponsors());
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("p", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [createElementVNode("a", _hoisted_1$2, [createElementVNode("img", {
-				src: "https://raw.githubusercontent.com/Barbapapazes/static/refs/heads/main/sponsors.svg",
-				alt: "Sponsors",
-				class: normalizeClass(ui.value.img({ class: props.ui?.img }))
-			}, null, 2)])], 2);
-		};
-	}
-});
-//#endregion
-//#region src/composables/useTableOfContents.ts
-function _useTableOfContents() {
-	const activeHeadings = ref([]);
-	function setActive(id) {
-		activeHeadings.value.push(id);
-	}
-	function unsetActive(id) {
-		activeHeadings.value = activeHeadings.value.filter((h) => h !== id);
-	}
-	return {
-		setActive,
-		unsetActive,
-		activeHeadings: readonly(activeHeadings)
-	};
-}
-var useTableOfContents_default = createSharedComposable(_useTableOfContents);
-//#endregion
-//#region src/components/TableOfContents.vue
-const _hoisted_1$1 = [
-	"href",
-	"data-active",
-	"onClick"
-];
-const tableOfContents = tv({ slots: {
-	base: "space-y-1 text-sm text-dimmed font-medium",
-	title: "",
-	list: "font-sofia",
-	link: "flex gap-1 px-0 py-1 text-dimmed hover:text-default active:text-default transition-colors focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted data-active:text-default rounded-md"
-} });
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-	__name: "TableOfContents",
-	props: {
-		toc: {},
-		class: {},
-		ui: {}
-	},
-	setup(__props) {
-		const props = __props;
-		const { track } = useUmami();
-		function trackClick(text, hash) {
-			track("table_of_contents_click", {
-				toc_text: text,
-				toc_hash: hash
-			});
-		}
-		const { activeHeadings } = useTableOfContents_default();
-		const ui = computed(() => tableOfContents());
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [createElementVNode("div", { class: normalizeClass(ui.value.title({ class: props.ui?.title })) }, " Table of Contents ", 2), createElementVNode("ul", { class: normalizeClass(ui.value.list({ class: props.ui?.list })) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(props.toc, (item, index) => {
-				return openBlock(), createElementBlock("li", { key: item.anchor || index }, [createCommentVNode(" Cannot use RouterLink as the anchor will be prefixed with the route path. "), item.anchor ? (openBlock(), createElementBlock("a", {
-					key: 0,
-					custom: "",
-					variant: "link",
-					color: "neutral",
-					href: `#${item.anchor}`,
-					"data-active": unref(activeHeadings).includes(item.anchor || "") ? true : void 0,
-					class: normalizeClass(ui.value.link({ class: props.ui?.link })),
-					onClick: ($event) => trackClick(item.text, item.anchor)
-				}, [createElementVNode("span", null, toDisplayString(index + 1) + ".", 1), createTextVNode(" " + toDisplayString(item.text), 1)], 10, _hoisted_1$1)) : createCommentVNode("v-if", true)]);
-			}), 128))], 2)], 2);
-		};
-	}
-});
-//#endregion
-//#region src/components/ViewersCounter.vue
-const _hoisted_1 = ["title"];
-const viewersCounter = tv({ slots: {
-	base: "flex items-center justify-center gap-[0.375rem] border border-green-400 rounded-full px-[0.375rem] py-[0.125rem] text-xs text-muted font-light leading-3 dark:border-green-700",
-	dot: "inline-block h-[0.375rem] w-[0.375rem] animate-[pulse_4s_cubic-bezier(0.4,_0,_0.6,_1)_infinite] rounded-full bg-green-400 ring ring-2 ring-green-200 dark:bg-green-700 dark:ring-green-500"
-} });
-const _sfc_main$10 = /* @__PURE__ */ defineComponent({
-	__name: "ViewersCounter",
-	props: {
-		class: {},
-		ui: {}
-	},
-	setup(__props) {
-		const props = __props;
-		const count = ref(0);
-		const connections = ref({});
-		function connect() {
-			return new PartySocket({
-				host: import.meta.env.VITE_PARTYKIT_URL,
-				room: "soubiran-dev"
-			});
-		}
-		onMounted(() => {
-			connect().addEventListener("message", (event) => {
-				const data = JSON.parse(event.data);
-				count.value = data.count;
-				connections.value = data.connections;
-			});
-		});
-		const title = computed(() => {
-			return `${count.value} viewer${count.value > 1 ? "s" : ""} currently online (${Object.keys(connections.value).map((host) => `${connections.value[host]} from ${host}`).join(", ")})`;
-		});
-		const ui = computed(() => viewersCounter());
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Transition, { name: "fade" }, {
-				default: withCtx(() => [count.value ? (openBlock(), createElementBlock("div", {
-					key: 0,
-					title: title.value,
-					class: normalizeClass(ui.value.base({ class: [props.class, props.ui?.base] }))
-				}, [createElementVNode("span", null, toDisplayString(count.value), 1), createElementVNode("span", {
-					class: normalizeClass(ui.value.dot({ class: props.ui?.dot })),
-					"aria-hidden": "true"
-				}, null, 2)], 10, _hoisted_1)) : createCommentVNode("v-if", true)]),
-				_: 1
-			});
-		};
-	}
-});
-//#endregion
-export { _sfc_main as Container, _sfc_main$1 as Feedback, _sfc_main$2 as FeedbackCard, _sfc_main$3 as Header, _sfc_main$4 as Page, _sfc_main$5 as PageHeader, _sfc_main$6 as PageTitle, _sfc_main$7 as Socials, _sfc_main$8 as Sponsors, _sfc_main$9 as TableOfContents, _sfc_main$10 as ViewersCounter, useTableOfContents_default as useTableOfContents, useUmami };
+/* empty css       */
+import useTableOfContents_default from "./composables/useTableOfContents.js";
+import useUmami from "./composables/useUmami.js";
+export { useTableOfContents_default as useTableOfContents, useUmami };