@scalar/components 0.20.11 → 0.21.0

package/dist/components/ScalarSidebar/ScalarSidebarSearchButton.vue.script.js

@@ -0,0 +1,30 @@
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, renderSlot, unref } from "vue";
+import { ScalarIconMagnifyingGlass } from "@scalar/icons";
+//#region src/components/ScalarSidebar/ScalarSidebarSearchButton.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex-1 text-left leading-none" };
+var _hoisted_2 = {
+	key: 0,
+	class: "uppercase text-sidebar-c-2 leading-none py-1 px-1.25 rounded text-xs font-medium border"
+};
+var ScalarSidebarSearchButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarSidebarSearchButton",
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", mergeProps({
+				role: "search",
+				type: "button"
+			}, unref(cx)("flex items-center rounded border text-base h-8 gap-1 pl-2 pr-1", "bg-sidebar-b-search border-sidebar-border-search text-sidebar-c-search")), [
+				createVNode(unref(ScalarIconMagnifyingGlass), { class: "size-4" }),
+				createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createTextVNode("Search...", -1))])]),
+				_ctx.$slots.shortcut ? (openBlock(), createElementBlock("span", _hoisted_2, [_cache[1] || (_cache[1] = createElementVNode("span", { class: "sr-only" }, "Keyboard Shortcut:", -1)), createElementVNode("kbd", null, [renderSlot(_ctx.$slots, "shortcut")])])) : createCommentVNode("", true)
+			], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarSidebarSearchButton_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarSidebarSearchButton.vue.script.js.map

package/dist/components/ScalarSidebar/ScalarSidebarSearchButton.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarSearchButton.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <button\n    role=\"search\"\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'flex items-center rounded border text-base h-8 gap-1 pl-2 pr-1',\n        'bg-sidebar-b-search border-sidebar-border-search text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"size-4\" />\n    <span class=\"flex-1 text-left leading-none\">\n      <slot>Search...</slot>\n    </span>\n    <span\n      v-if=\"$slots.shortcut\"\n      class=\"uppercase text-sidebar-c-2 leading-none py-1 px-1.25 rounded text-xs font-medium border\">\n      <span class=\"sr-only\">Keyboard Shortcut:</span>\n      <kbd>\n        <slot name=\"shortcut\" />\n      </kbd>\n    </span>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAKA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAqBS,UArBT,WAqBS;IApBP,MAAK;IACL,MAAK;MACU,MAAA,GAAE,CAAA,kEAAA,yEAAA,CAAA,EAAA;IAMjB,YAA4C,MAAA,0BAAA,EAAA,EAAjB,OAAM,UAAQ,CAAA;IACzC,mBAEO,QAFP,YAEO,CADL,WAAsB,KAAA,QAAA,WAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAhB,aAAS,GAAA,EAAA,CAAA,CAAA,CAAA;IAGTA,KAAAA,OAAO,YAAA,WAAA,EADf,mBAOO,QAPP,YAOO,CAAA,OAAA,OAAA,OAAA,KAJL,mBAA+C,QAAA,EAAzC,OAAM,WAAS,EAAC,sBAAkB,GAAA,GACxC,mBAEM,OAAA,MAAA,CADJ,WAAwB,KAAA,QAAA,WAAA,CAAA,CAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA"}

package/dist/components/ScalarSidebar/ScalarSidebarSearchInput.vue.js

@@ -0,0 +1,7 @@
+import ScalarSidebarSearchInput_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarSearchInput.vue.script.js";
+//#region src/components/ScalarSidebar/ScalarSidebarSearchInput.vue
+var ScalarSidebarSearchInput_default = ScalarSidebarSearchInput_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarSidebarSearchInput_default as default };
+
+//# sourceMappingURL=ScalarSidebarSearchInput.vue.js.map

package/dist/components/ScalarSidebar/ScalarSidebarSearchInput.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarSearchInput.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\nconst { autofocus } = defineProps<{\n  autofocus?: boolean\n  loader?: LoadingState\n  label?: string\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nconst model = defineModel<string>()\n\nfunction handleClear() {\n  model.value = ''\n  // Push focus back to the input\n  if (inputRef.value) {\n    inputRef.value.focus()\n  }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => autofocus && inputRef.value?.focus())\n</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center rounded border text-base has-[:focus-visible]:bg-sidebar-b-1 has-[:focus-visible]:outline h-8 gap-1 pl-2 pr-1.5',\n        'bg-sidebar-b-search border-sidebar-border-search',\n        model ? 'text-sidebar-c-1' : 'text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n    <input\n      ref=\"inputRef\"\n      v-bind=\"otherAttrs\"\n      v-model=\"model\"\n      :aria-label=\"label ?? 'Enter search query'\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n      placeholder=\"Search...\"\n      spellcheck=\"false\"\n      type=\"search\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-3 self-center\"\n      :loader\n      size=\"md\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"p-0.25 size-4\"\n      :icon=\"ScalarIconX\"\n      label=\"Clear Search\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":""}

package/dist/components/ScalarSidebar/ScalarSidebarSearchInput.vue.script.js

@@ -0,0 +1,66 @@
+import ScalarLoading_default from "../ScalarLoading/ScalarLoading.vue.js";
+import ScalarIconButton_default from "../ScalarIconButton/ScalarIconButton.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeProps, onMounted, openBlock, ref, unref, useModel, vModelText, withDirectives, withModifiers } from "vue";
+import { ScalarIconMagnifyingGlass, ScalarIconX } from "@scalar/icons";
+//#region src/components/ScalarSidebar/ScalarSidebarSearchInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var ScalarSidebarSearchInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarSidebarSearchInput",
+	props: /* @__PURE__ */ mergeModels({
+		autofocus: { type: Boolean },
+		loader: {},
+		label: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const inputRef = ref(null);
+		const model = useModel(__props, "modelValue");
+		function handleClear() {
+			model.value = "";
+			if (inputRef.value) inputRef.value.focus();
+		}
+		const { stylingAttrsCx, otherAttrs } = useBindCx();
+		onMounted(() => __props.autofocus && inputRef.value?.focus());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("label", normalizeProps(guardReactiveProps(unref(stylingAttrsCx)("flex items-center rounded border text-base has-[:focus-visible]:bg-sidebar-b-1 has-[:focus-visible]:outline h-8 gap-1 pl-2 pr-1.5", "bg-sidebar-b-search border-sidebar-border-search", model.value ? "text-sidebar-c-1" : "text-sidebar-c-search"))), [
+				createVNode(unref(ScalarIconMagnifyingGlass), { class: "text-sidebar-c-search size-4" }),
+				withDirectives(createElementVNode("input", mergeProps({
+					ref_key: "inputRef",
+					ref: inputRef
+				}, unref(otherAttrs), {
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+					"aria-label": __props.label ?? "Enter search query",
+					autocapitalize: "off",
+					autocomplete: "off",
+					autocorrect: "off",
+					class: "flex-1 appearance-none rounded border-none bg-transparent outline-none",
+					placeholder: "Search...",
+					spellcheck: "false",
+					type: "search"
+				}), null, 16, _hoisted_1), [[vModelText, model.value]]),
+				__props.loader && __props.loader.isActive ? (openBlock(), createBlock(unref(ScalarLoading_default), {
+					key: 0,
+					class: "mr-3 self-center",
+					loader: __props.loader,
+					size: "md"
+				}, null, 8, ["loader"])) : model.value ? (openBlock(), createBlock(unref(ScalarIconButton_default), {
+					key: 1,
+					class: "p-0.25 size-4",
+					icon: unref(ScalarIconX),
+					label: "Clear Search",
+					weight: "bold",
+					onClick: withModifiers(handleClear, ["stop", "prevent"])
+				}, null, 8, ["icon"])) : createCommentVNode("", true)
+			], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarSidebarSearchInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarSidebarSearchInput.vue.script.js.map

package/dist/components/ScalarSidebar/ScalarSidebarSearchInput.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarSearchInput.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\nconst { autofocus } = defineProps<{\n  autofocus?: boolean\n  loader?: LoadingState\n  label?: string\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nconst model = defineModel<string>()\n\nfunction handleClear() {\n  model.value = ''\n  // Push focus back to the input\n  if (inputRef.value) {\n    inputRef.value.focus()\n  }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => autofocus && inputRef.value?.focus())\n</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center rounded border text-base has-[:focus-visible]:bg-sidebar-b-1 has-[:focus-visible]:outline h-8 gap-1 pl-2 pr-1.5',\n        'bg-sidebar-b-search border-sidebar-border-search',\n        model ? 'text-sidebar-c-1' : 'text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n    <input\n      ref=\"inputRef\"\n      v-bind=\"otherAttrs\"\n      v-model=\"model\"\n      :aria-label=\"label ?? 'Enter search query'\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n      placeholder=\"Search...\"\n      spellcheck=\"false\"\n      type=\"search\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-3 self-center\"\n      :loader\n      size=\"md\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"p-0.25 size-4\"\n      :icon=\"ScalarIconX\"\n      label=\"Clear Search\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAcA,MAAM,WAAW,IAA6B,KAAI;EAElD,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,SAAS,cAAc;AACrB,SAAM,QAAQ;AAEd,OAAI,SAAS,MACX,UAAS,MAAM,OAAM;;EAKzB,MAAM,EAAE,gBAAgB,eAAe,WAAU;AAEjD,kBAAgB,QAAA,aAAa,SAAS,OAAO,OAAO,CAAA;;uBAGlD,mBAiCQ,SAAA,eAAA,mBAhCS,MAAA,eAAc,CAAA,qIAAA,oDAAmN,MAAA,QAAK,qBAAA,wBAAA,CAAA,CAAA,EAAA;IAOrP,YAAkE,MAAA,0BAAA,EAAA,EAAvC,OAAM,gCAA8B,CAAA;mBAC/D,mBAWkB,SAXlB,WAWkB;cAVZ;KAAJ,KAAI;OACI,MAAA,WAAU,EAAA;wEACJ,QAAA;KACb,cAAY,QAAA,SAAK;KAClB,gBAAe;KACf,cAAa;KACb,aAAY;KACZ,OAAM;KACN,aAAY;KACZ,YAAW;KACX,MAAK;6CARI,MAAA,MAAK,CAAA,CAAA;IAUR,QAAA,UAAU,QAAA,OAAO,YAAA,WAAA,EADzB,YAIc,MAAA,sBAAA,EAAA;;KAFZ,OAAM;KACL,QAAA,QAAA;KACD,MAAK;+BAEM,MAAA,SAAA,WAAA,EADb,YAMsC,MAAA,yBAAA,EAAA;;KAJpC,OAAM;KACL,MAAM,MAAA,YAAW;KAClB,OAAM;KACN,QAAO;KACN,SAAK,cAAe,aAAW,CAAA,QAAA,UAAA,CAAA"}

package/dist/components/ScalarSidebar/ScalarSidebarSection.vue.js

@@ -0,0 +1,8 @@
+import ScalarSidebarSection_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarSection.vue.script.js";
+/* empty css                                   */
+//#region src/components/ScalarSidebar/ScalarSidebarSection.vue
+var ScalarSidebarSection_default = ScalarSidebarSection_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarSidebarSection_default as default };
+
+//# sourceMappingURL=ScalarSidebarSection.vue.js.map

package/dist/components/ScalarSidebar/ScalarSidebarSection.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarSection.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Section component\n *\n * A section of the sidebar that can contain subitems\n *\n * @example\n * <ScalarSidebarSection>\n *   <!-- Section title -->\n *   <template #title>\n *     My Section\n *   </template>\n *   <!-- Section items -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarSection>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\nimport type { ScalarSidebarItemProps } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\n\nconst { is = 'li' } = defineProps<ScalarSidebarItemProps>()\n\ndefineSlots<{\n  /** The text content of the toggle */\n  default?(): unknown\n  /** The list of sidebar subitems */\n  items?(): unknown\n}>()\n\nconst { level } = useSidebarGroups({ increment: false })\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"cx('group/item group/sidebar-section contents')\">\n    <ScalarSidebarSpacer\n      class=\"group/spacer-before h-3\"\n      :indent=\"level\" />\n    <ScalarSidebarButton\n      is=\"div\"\n      class=\"text-sm/4 py-1.75 font-bold\"\n      disabled\n      :icon=\"icon\"\n      :indent=\"level\">\n      <slot />\n    </ScalarSidebarButton>\n    <ul class=\"flex flex-col gap-px\">\n      <slot name=\"items\" />\n    </ul>\n    <ScalarSidebarSpacer\n      class=\"group/spacer-after h-3\"\n      :indent=\"level\" />\n  </component>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/* Don't add a spacer before the first section */\n.group\\/sidebar-section:first-of-type > .group\\/spacer-before {\n  @apply h-0;\n}\n\n/* Don't add a spacer after the last section */\n.group\\/sidebar-section:last-of-type > .group\\/spacer-after {\n  @apply h-0;\n}\n\n/* Only one spacer between sections */\n.group\\/sidebar-section:has(+ .group\\/sidebar-section) > .group\\/spacer-after {\n  @apply h-0 -mb-px;\n}\n</style>\n"],"mappings":""}

package/dist/components/ScalarSidebar/ScalarSidebarSection.vue.script.js

@@ -0,0 +1,53 @@
+import ScalarSidebarButton_default from "./ScalarSidebarButton.vue.js";
+import { useSidebarGroups } from "./useSidebarGroups.js";
+import ScalarSidebarSpacer_default from "./ScalarSidebarSpacer.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
+//#region src/components/ScalarSidebar/ScalarSidebarSection.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex flex-col gap-px" };
+var ScalarSidebarSection_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarSidebarSection",
+	props: {
+		is: { default: "li" },
+		icon: { type: [Object, Function] },
+		active: { type: Boolean },
+		selected: { type: Boolean },
+		disabled: { type: Boolean },
+		indent: {}
+	},
+	setup(__props) {
+		const { level } = useSidebarGroups({ increment: false });
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.is), normalizeProps(guardReactiveProps(unref(cx)("group/item group/sidebar-section contents"))), {
+				default: withCtx(() => [
+					createVNode(ScalarSidebarSpacer_default, {
+						class: "group/spacer-before h-3",
+						indent: unref(level)
+					}, null, 8, ["indent"]),
+					createVNode(ScalarSidebarButton_default, {
+						is: "div",
+						class: "text-sm/4 py-1.75 font-bold",
+						disabled: "",
+						icon: __props.icon,
+						indent: unref(level)
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+						_: 3
+					}, 8, ["icon", "indent"]),
+					createElementVNode("ul", _hoisted_1, [renderSlot(_ctx.$slots, "items")]),
+					createVNode(ScalarSidebarSpacer_default, {
+						class: "group/spacer-after h-3",
+						indent: unref(level)
+					}, null, 8, ["indent"])
+				]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { ScalarSidebarSection_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarSidebarSection.vue.script.js.map

package/dist/components/ScalarSidebar/ScalarSidebarSection.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarSection.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Section component\n *\n * A section of the sidebar that can contain subitems\n *\n * @example\n * <ScalarSidebarSection>\n *   <!-- Section title -->\n *   <template #title>\n *     My Section\n *   </template>\n *   <!-- Section items -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarSection>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\nimport type { ScalarSidebarItemProps } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\n\nconst { is = 'li' } = defineProps<ScalarSidebarItemProps>()\n\ndefineSlots<{\n  /** The text content of the toggle */\n  default?(): unknown\n  /** The list of sidebar subitems */\n  items?(): unknown\n}>()\n\nconst { level } = useSidebarGroups({ increment: false })\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"cx('group/item group/sidebar-section contents')\">\n    <ScalarSidebarSpacer\n      class=\"group/spacer-before h-3\"\n      :indent=\"level\" />\n    <ScalarSidebarButton\n      is=\"div\"\n      class=\"text-sm/4 py-1.75 font-bold\"\n      disabled\n      :icon=\"icon\"\n      :indent=\"level\">\n      <slot />\n    </ScalarSidebarButton>\n    <ul class=\"flex flex-col gap-px\">\n      <slot name=\"items\" />\n    </ul>\n    <ScalarSidebarSpacer\n      class=\"group/spacer-after h-3\"\n      :indent=\"level\" />\n  </component>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/* Don't add a spacer before the first section */\n.group\\/sidebar-section:first-of-type > .group\\/spacer-before {\n  @apply h-0;\n}\n\n/* Don't add a spacer after the last section */\n.group\\/sidebar-section:last-of-type > .group\\/spacer-after {\n  @apply h-0;\n}\n\n/* Only one spacer between sections */\n.group\\/sidebar-section:has(+ .group\\/sidebar-section) > .group\\/spacer-after {\n  @apply h-0 -mb-px;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAsCA,MAAM,EAAE,UAAU,iBAAiB,EAAE,WAAW,OAAO,CAAA;EAGvD,MAAM,EAAE,OAAO,WAAU;;uBAGvB,YAoBY,wBAnBL,QAAA,GAAE,EAAA,eAAA,mBACC,MAAA,GAAE,CAAA,4CAAA,CAAA,CAAA,EAAA;2BAGU;KAFpB,YAEoB,6BAAA;MADlB,OAAM;MACL,QAAQ,MAAA,MAAK;;KAChB,YAOsB,6BAAA;MANpB,IAAG;MACH,OAAM;MACN,UAAA;MACC,MAAM,QAAA;MACN,QAAQ,MAAA,MAAK;;6BACN,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;KAEV,mBAEK,MAFL,YAEK,CADH,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA;KAEvB,YAEoB,6BAAA;MADlB,OAAM;MACL,QAAQ,MAAA,MAAK"}

package/dist/components/ScalarSidebar/ScalarSidebarSpacer.vue.d.ts

@@ -1,4 +1,4 @@
-import type { SidebarGroupLevel } from './useSidebarGroups';
+import type { SidebarGroupLevel } from './useSidebarGroups.js';
 /**
  * Scalar Sidebar Spacer component
  *

package/dist/components/ScalarSidebar/ScalarSidebarSpacer.vue.js

@@ -0,0 +1,7 @@
+import ScalarSidebarSpacer_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarSpacer.vue.script.js";
+//#region src/components/ScalarSidebar/ScalarSidebarSpacer.vue
+var ScalarSidebarSpacer_default = ScalarSidebarSpacer_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarSidebarSpacer_default as default };
+
+//# sourceMappingURL=ScalarSidebarSpacer.vue.js.map

package/dist/components/ScalarSidebar/ScalarSidebarSpacer.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarSpacer.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSpacer.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Spacer component\n *\n * Provide a styled spacer for the ScalarSidebar, handles the indent lines for nested groups\n *\n *\n *\n * @example\n *   <ScalarSidebarSpacer />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarIndent from './ScalarSidebarIndent.vue'\nimport type { SidebarGroupLevel } from './useSidebarGroups'\n\nconst { indent = 0 } = defineProps<{ indent?: SidebarGroupLevel }>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div v-bind=\"cx('flex px-2 h-1')\">\n    <ScalarSidebarIndent :indent=\"indent\" />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarSidebar/ScalarSidebarSpacer.vue.script.js

@@ -0,0 +1,18 @@
+import ScalarSidebarIndent_default from "./ScalarSidebarIndent.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createElementBlock, createVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, unref } from "vue";
+var ScalarSidebarSpacer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarSidebarSpacer",
+	props: { indent: { default: 0 } },
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("flex px-2 h-1"))), [createVNode(ScalarSidebarIndent_default, { indent: __props.indent }, null, 8, ["indent"])], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarSidebarSpacer_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarSidebarSpacer.vue.script.js.map

package/dist/components/ScalarSidebar/ScalarSidebarSpacer.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarSpacer.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSpacer.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Spacer component\n *\n * Provide a styled spacer for the ScalarSidebar, handles the indent lines for nested groups\n *\n *\n *\n * @example\n *   <ScalarSidebarSpacer />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarIndent from './ScalarSidebarIndent.vue'\nimport type { SidebarGroupLevel } from './useSidebarGroups'\n\nconst { indent = 0 } = defineProps<{ indent?: SidebarGroupLevel }>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div v-bind=\"cx('flex px-2 h-1')\">\n    <ScalarSidebarIndent :indent=\"indent\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;EAsBA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAEM,OAAA,eAAA,mBAFO,MAAA,GAAE,CAAA,gBAAA,CAAA,CAAA,EAAA,CACb,YAAwC,6BAAA,EAAlB,QAAQ,QAAA,QAAM,EAAA,MAAA,GAAA,CAAA,SAAA,CAAA,CAAA,EAAA,GAAA"}

package/dist/components/ScalarSidebar/findScrollContainer.js

@@ -0,0 +1,29 @@
+//#region src/components/ScalarSidebar/findScrollContainer.ts
+/**
+* Get the normalized overflow values for both directions from an element.
+*/
+function getOverflowValues(element) {
+	const style = window.getComputedStyle(element);
+	const [x, y] = style.overflow.split(" ");
+	return {
+		x: style.overflowX || x,
+		y: style.overflowY || y || x
+	};
+}
+/**
+* Find the nearest scrollable parent of an element.
+*/
+function findScrollContainer(element, direction = "y") {
+	if (!element) return document.documentElement;
+	let parent = element.parentElement;
+	while (parent) {
+		const value = getOverflowValues(parent)[direction];
+		if (value === "auto" || value === "scroll") return parent;
+		parent = parent.parentElement;
+	}
+	return document.documentElement;
+}
+//#endregion
+export { findScrollContainer };
+
+//# sourceMappingURL=findScrollContainer.js.map

package/dist/components/ScalarSidebar/findScrollContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"findScrollContainer.js","names":[],"sources":["../../../src/components/ScalarSidebar/findScrollContainer.ts"],"sourcesContent":["/**\n * Get the normalized overflow values for both directions from an element.\n */\nfunction getOverflowValues(element: HTMLElement) {\n  const style = window.getComputedStyle(element)\n  const [x, y] = style.overflow.split(' ')\n\n  return {\n    x: style.overflowX || x,\n    y: style.overflowY || y || x,\n  }\n}\n\n/**\n * Find the nearest scrollable parent of an element.\n */\nexport function findScrollContainer(element?: HTMLElement | null, direction: 'x' | 'y' = 'y') {\n  if (!element) {\n    return document.documentElement\n  }\n\n  let parent = element.parentElement\n  while (parent) {\n    const overflowValues = getOverflowValues(parent)\n    const value = overflowValues[direction]\n\n    if (value === 'auto' || value === 'scroll') {\n      return parent\n    }\n    parent = parent.parentElement\n  }\n\n  return document.documentElement\n}\n"],"mappings":";;;;AAGA,SAAS,kBAAkB,SAAsB;CAC/C,MAAM,QAAQ,OAAO,iBAAiB,QAAQ;CAC9C,MAAM,CAAC,GAAG,KAAK,MAAM,SAAS,MAAM,IAAI;AAExC,QAAO;EACL,GAAG,MAAM,aAAa;EACtB,GAAG,MAAM,aAAa,KAAK;EAC5B;;;;;AAMH,SAAgB,oBAAoB,SAA8B,YAAuB,KAAK;AAC5F,KAAI,CAAC,QACH,QAAO,SAAS;CAGlB,IAAI,SAAS,QAAQ;AACrB,QAAO,QAAQ;EAEb,MAAM,QADiB,kBAAkB,OAAO,CACnB;AAE7B,MAAI,UAAU,UAAU,UAAU,SAChC,QAAO;AAET,WAAS,OAAO;;AAGlB,QAAO,SAAS"}

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

@@ -1,14 +1,14 @@
-export { default as ScalarSidebar } from './ScalarSidebar.vue';
-export { default as ScalarSidebarButton } from './ScalarSidebarButton.vue';
-export { default as ScalarSidebarFooter } from './ScalarSidebarFooter.vue';
-export { default as ScalarSidebarGroup } from './ScalarSidebarGroup.vue';
-export { default as ScalarSidebarGroupToggle } from './ScalarSidebarGroupToggle.vue';
-export { default as ScalarSidebarIndent } from './ScalarSidebarIndent.vue';
-export { default as ScalarSidebarItem } from './ScalarSidebarItem.vue';
-export { default as ScalarSidebarItems } from './ScalarSidebarItems.vue';
-export { default as ScalarSidebarNestedItems } from './ScalarSidebarNestedItems.vue';
-export { default as ScalarSidebarSearchButton } from './ScalarSidebarSearchButton.vue';
-export { default as ScalarSidebarSearchInput } from './ScalarSidebarSearchInput.vue';
-export { default as ScalarSidebarSection } from './ScalarSidebarSection.vue';
-export { default as ScalarSidebarSpacer } from './ScalarSidebarSpacer.vue';
+export { default as ScalarSidebar } from './ScalarSidebar.vue.js';
+export { default as ScalarSidebarButton } from './ScalarSidebarButton.vue.js';
+export { default as ScalarSidebarFooter } from './ScalarSidebarFooter.vue.js';
+export { default as ScalarSidebarGroup } from './ScalarSidebarGroup.vue.js';
+export { default as ScalarSidebarGroupToggle } from './ScalarSidebarGroupToggle.vue.js';
+export { default as ScalarSidebarIndent } from './ScalarSidebarIndent.vue.js';
+export { default as ScalarSidebarItem } from './ScalarSidebarItem.vue.js';
+export { default as ScalarSidebarItems } from './ScalarSidebarItems.vue.js';
+export { default as ScalarSidebarNestedItems } from './ScalarSidebarNestedItems.vue.js';
+export { default as ScalarSidebarSearchButton } from './ScalarSidebarSearchButton.vue.js';
+export { default as ScalarSidebarSearchInput } from './ScalarSidebarSearchInput.vue.js';
+export { default as ScalarSidebarSection } from './ScalarSidebarSection.vue.js';
+export { default as ScalarSidebarSpacer } from './ScalarSidebarSpacer.vue.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,7 +1,7 @@
 import type { ScalarIconComponent } from '@scalar/icons/types';
 import type { Component } from 'vue';
 import type { Icon } from '../ScalarIcon';
-import type { SidebarGroupLevel } from './useSidebarGroups';
+import type { SidebarGroupLevel } from './useSidebarGroups.js';
 /** Scalar Sidebar Item Props */
 export type ScalarSidebarItemProps = {
     /** Overrides the rendered element */

package/dist/components/ScalarSidebar/useSidebarGroups.js

@@ -0,0 +1,26 @@
+import { inject, provide } from "vue";
+//#region src/components/ScalarSidebar/useSidebarGroups.ts
+/**
+* Tracks the level of the sidebar groups
+*
+* @default 0
+*/
+var SIDEBAR_GROUPS_SYMBOL = Symbol();
+/**
+* Get the current level of the sidebar groups
+*
+* Optionally increments or resets the level of the sidebar groups
+* Always returns the current level even if the level is incremented or reset
+*/
+var useSidebarGroups = (options = {}) => {
+	const { increment = false, reset = false } = options;
+	const level = inject(SIDEBAR_GROUPS_SYMBOL, 0);
+	if (reset) provide(SIDEBAR_GROUPS_SYMBOL, 0);
+	else if (increment && level < 6) provide(SIDEBAR_GROUPS_SYMBOL, level + 1);
+	else provide(SIDEBAR_GROUPS_SYMBOL, level);
+	return { level };
+};
+//#endregion
+export { useSidebarGroups };
+
+//# sourceMappingURL=useSidebarGroups.js.map

package/dist/components/ScalarSidebar/useSidebarGroups.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSidebarGroups.js","names":[],"sources":["../../../src/components/ScalarSidebar/useSidebarGroups.ts"],"sourcesContent":["import { type InjectionKey, inject, provide } from 'vue'\n\ntype SidebarGroupOptions = {\n  /** Increment the level of the sidebar groups */\n  increment?: boolean\n  /** Reset the level of the sidebar groups */\n  reset?: boolean\n}\n\n/**\n * The level of the sidebar groups\n *\n * We shouldn't go deeper than 6 levels\n */\nexport type SidebarGroupLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6\n\n/**\n * Tracks the level of the sidebar groups\n *\n * @default 0\n */\nexport const SIDEBAR_GROUPS_SYMBOL = Symbol() as InjectionKey<SidebarGroupLevel>\n\n/**\n * Get the current level of the sidebar groups\n *\n * Optionally increments or resets the level of the sidebar groups\n * Always returns the current level even if the level is incremented or reset\n */\nexport const useSidebarGroups = (options: SidebarGroupOptions = {}) => {\n  const { increment = false, reset = false } = options\n\n  const level = inject(SIDEBAR_GROUPS_SYMBOL, 0)\n\n  if (reset) {\n    provide(SIDEBAR_GROUPS_SYMBOL, 0)\n  } else if (increment && level < 6) {\n    provide(SIDEBAR_GROUPS_SYMBOL, (level + 1) as SidebarGroupLevel)\n  } else {\n    provide(SIDEBAR_GROUPS_SYMBOL, level)\n  }\n\n  return { level }\n}\n"],"mappings":";;;;;;;AAqBA,IAAa,wBAAwB,QAAQ;;;;;;;AAQ7C,IAAa,oBAAoB,UAA+B,EAAE,KAAK;CACrE,MAAM,EAAE,YAAY,OAAO,QAAQ,UAAU;CAE7C,MAAM,QAAQ,OAAO,uBAAuB,EAAE;AAE9C,KAAI,MACF,SAAQ,uBAAuB,EAAE;UACxB,aAAa,QAAQ,EAC9B,SAAQ,uBAAwB,QAAQ,EAAwB;KAEhE,SAAQ,uBAAuB,MAAM;AAGvC,QAAO,EAAE,OAAO"}

package/dist/components/ScalarSidebar/useSidebarNestedItems.js

@@ -0,0 +1,31 @@
+import { computed, inject, onBeforeUnmount, provide, ref } from "vue";
+//#region src/components/ScalarSidebar/useSidebarNestedItems.ts
+/**
+* Tracks the open state of the nearest nested child items
+*/
+var SIDEBAR_NESTED_ITEMS_SYMBOL = Symbol();
+/**
+* Get the open / closed model for the nearest nested child items
+*/
+var useSidebarNestedItem = (open) => {
+	const parentList = inject(SIDEBAR_NESTED_ITEMS_SYMBOL);
+	if (parentList) {
+		parentList.value.push(open);
+		onBeforeUnmount(() => {
+			parentList.value = parentList.value.filter((child) => child !== open);
+		});
+	}
+};
+/**
+* Get whether or not any nested child items are open
+*/
+var useSidebarNestedItems = () => {
+	const children = ref([]);
+	const open = computed(() => children.value.some((child) => child.value));
+	provide(SIDEBAR_NESTED_ITEMS_SYMBOL, children);
+	return { open };
+};
+//#endregion
+export { useSidebarNestedItem, useSidebarNestedItems };
+
+//# sourceMappingURL=useSidebarNestedItems.js.map

package/dist/components/ScalarSidebar/useSidebarNestedItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSidebarNestedItems.js","names":[],"sources":["../../../src/components/ScalarSidebar/useSidebarNestedItems.ts"],"sourcesContent":["import { type InjectionKey, type Ref, computed, inject, onBeforeUnmount, provide, ref } from 'vue'\n\n/**\n * Tracks the open state of the nearest nested child items\n */\nconst SIDEBAR_NESTED_ITEMS_SYMBOL = Symbol() as InjectionKey<Ref<Ref<boolean>[]>>\n\n/**\n * Get the open / closed model for the nearest nested child items\n */\nexport const useSidebarNestedItem = (\n  /** The model defining the open state of the current nested items */\n  open: Ref<boolean>,\n): void => {\n  const parentList = inject(SIDEBAR_NESTED_ITEMS_SYMBOL)\n  if (parentList) {\n    // Add this child to the parent list when the component is mounted\n    parentList.value.push(open)\n\n    onBeforeUnmount(() => {\n      // Remove this child from the parent list when the component is unmounted\n      parentList.value = parentList.value.filter((child) => child !== open)\n    })\n  }\n}\n/**\n * Get whether or not any nested child items are open\n */\nexport const useSidebarNestedItems = () => {\n  // Create a new ref for any child nested items to update\n  const children = ref<Ref<boolean>[]>([])\n  const open = computed(() => children.value.some((child) => child.value))\n  provide(SIDEBAR_NESTED_ITEMS_SYMBOL, children)\n\n  return {\n    /** Whether or not any nested child items are open */\n    open,\n  }\n}\n"],"mappings":";;;;;AAKA,IAAM,8BAA8B,QAAQ;;;;AAK5C,IAAa,wBAEX,SACS;CACT,MAAM,aAAa,OAAO,4BAA4B;AACtD,KAAI,YAAY;AAEd,aAAW,MAAM,KAAK,KAAK;AAE3B,wBAAsB;AAEpB,cAAW,QAAQ,WAAW,MAAM,QAAQ,UAAU,UAAU,KAAK;IACrE;;;;;;AAMN,IAAa,8BAA8B;CAEzC,MAAM,WAAW,IAAoB,EAAE,CAAC;CACxC,MAAM,OAAO,eAAe,SAAS,MAAM,MAAM,UAAU,MAAM,MAAM,CAAC;AACxE,SAAQ,6BAA6B,SAAS;AAE9C,QAAO,EAEL,MACD"}

package/dist/components/ScalarTeleport/ScalarTeleport.vue.js

@@ -0,0 +1,7 @@
+import ScalarTeleport_vue_vue_type_script_setup_true_lang_default from "./ScalarTeleport.vue.script.js";
+//#region src/components/ScalarTeleport/ScalarTeleport.vue
+var ScalarTeleport_default = ScalarTeleport_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarTeleport_default as default };
+
+//# sourceMappingURL=ScalarTeleport.vue.js.map

package/dist/components/ScalarTeleport/ScalarTeleport.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTeleport.vue.js","names":[],"sources":["../../../src/components/ScalarTeleport/ScalarTeleport.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar teleport component\n *\n * Teleports the contents to the nearest <ScalarTeleportRoot>\n * Falls back to the default teleport target (body) if no root is found\n *\n * Is a wrapper around the Vue <Teleport> component and takes the same props\n *\n * @example\n *   <ScalarTeleport>\n *     <div>Teleported Content</div>\n *   </ScalarTeleport>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport type { TeleportProps } from 'vue'\n\nimport { useTeleport } from './useTeleport'\n\ndefineProps<{\n  /**\n   * Override the default teleport target\n   */\n  to?: TeleportProps['to']\n  /**\n   * Whether to teleport immediately, disables the default defer behavior\n   *\n   * @see https://vuejs.org/guide/built-ins/teleport#deferred-teleport\n   */\n  immediate?: boolean\n  /**\n   * Whether to disable teleportation\n   */\n  disabled?: TeleportProps['disabled']\n}>()\n\ndefineSlots<{\n  /** The element to be teleported */\n  default(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst root = useTeleport()\n</script>\n<template>\n  <Teleport\n    :defer=\"!immediate\"\n    :disabled=\"disabled\"\n    :to=\"to || root\">\n    <div\n      class=\"scalar-app\"\n      style=\"display: contents\"\n      v-bind=\"$attrs\">\n      <slot />\n    </div>\n  </Teleport>\n</template>\n"],"mappings":""}

package/dist/components/ScalarTeleport/ScalarTeleport.vue.script.js

@@ -0,0 +1,32 @@
+import { useTeleport } from "./useTeleport.js";
+import { Teleport, createBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot, unref } from "vue";
+var ScalarTeleport_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarTeleport",
+	props: {
+		to: {},
+		immediate: { type: Boolean },
+		disabled: { type: Boolean }
+	},
+	setup(__props) {
+		const root = useTeleport();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Teleport, {
+				defer: !__props.immediate,
+				disabled: __props.disabled,
+				to: __props.to || unref(root)
+			}, [createElementVNode("div", mergeProps({
+				class: "scalar-app",
+				style: { "display": "contents" }
+			}, _ctx.$attrs), [renderSlot(_ctx.$slots, "default")], 16)], 8, [
+				"defer",
+				"disabled",
+				"to"
+			]);
+		};
+	}
+});
+//#endregion
+export { ScalarTeleport_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarTeleport.vue.script.js.map

package/dist/components/ScalarTeleport/ScalarTeleport.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTeleport.vue.script.js","names":["$attrs"],"sources":["../../../src/components/ScalarTeleport/ScalarTeleport.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar teleport component\n *\n * Teleports the contents to the nearest <ScalarTeleportRoot>\n * Falls back to the default teleport target (body) if no root is found\n *\n * Is a wrapper around the Vue <Teleport> component and takes the same props\n *\n * @example\n *   <ScalarTeleport>\n *     <div>Teleported Content</div>\n *   </ScalarTeleport>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport type { TeleportProps } from 'vue'\n\nimport { useTeleport } from './useTeleport'\n\ndefineProps<{\n  /**\n   * Override the default teleport target\n   */\n  to?: TeleportProps['to']\n  /**\n   * Whether to teleport immediately, disables the default defer behavior\n   *\n   * @see https://vuejs.org/guide/built-ins/teleport#deferred-teleport\n   */\n  immediate?: boolean\n  /**\n   * Whether to disable teleportation\n   */\n  disabled?: TeleportProps['disabled']\n}>()\n\ndefineSlots<{\n  /** The element to be teleported */\n  default(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst root = useTeleport()\n</script>\n<template>\n  <Teleport\n    :defer=\"!immediate\"\n    :disabled=\"disabled\"\n    :to=\"to || root\">\n    <div\n      class=\"scalar-app\"\n      style=\"display: contents\"\n      v-bind=\"$attrs\">\n      <slot />\n    </div>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;;EA6CA,MAAM,OAAO,aAAY;;uBAGvB,YAUW,UAAA;IATR,OAAK,CAAG,QAAA;IACR,UAAU,QAAA;IACV,IAAI,QAAA,MAAM,MAAA,KAAI;OACf,mBAKM,OALN,WAKM;IAJJ,OAAM;IACN,OAAA,EAAA,WAAA,YAAyB;MACjBA,KAAAA,OAAM,EAAA,CACd,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA"}

package/dist/components/ScalarTeleport/ScalarTeleportRoot.vue.js

@@ -0,0 +1,7 @@
+import ScalarTeleportRoot_vue_vue_type_script_setup_true_lang_default from "./ScalarTeleportRoot.vue.script.js";
+//#region src/components/ScalarTeleport/ScalarTeleportRoot.vue
+var ScalarTeleportRoot_default = ScalarTeleportRoot_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarTeleportRoot_default as default };
+
+//# sourceMappingURL=ScalarTeleportRoot.vue.js.map

package/dist/components/ScalarTeleport/ScalarTeleportRoot.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTeleportRoot.vue.js","names":[],"sources":["../../../src/components/ScalarTeleport/ScalarTeleportRoot.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar teleport root component\n *\n * Provides a teleport target for nested <ScalarTeleport> components\n *\n * @example\n * <ScalarTeleportRoot>\n *   ...\n *   <ScalarTeleport>\n *     <div>Teleported Content</div>\n *   </ScalarTeleport>\n *   ...\n * </ScalarTeleportRoot>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useProvideTeleport } from './useTeleport'\n\nconst props = defineProps<{\n  /**\n   * Override the default teleport target id\n   */\n  id?: string\n}>()\n\ndefineSlots<{\n  /** The content which contains <ScalarTeleports> */\n  default(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst id = useProvideTeleport(props.id)\n</script>\n<template>\n  <slot />\n  <div\n    :id=\"id\"\n    class=\"scalar-teleport-root contents\" />\n</template>\n"],"mappings":""}

package/dist/components/ScalarTeleport/ScalarTeleportRoot.vue.script.js

@@ -0,0 +1,22 @@
+import { useProvideTeleport } from "./useTeleport.js";
+import { Fragment, createElementBlock, createElementVNode, defineComponent, openBlock, renderSlot, unref } from "vue";
+//#region src/components/ScalarTeleport/ScalarTeleportRoot.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id"];
+var ScalarTeleportRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarTeleportRoot",
+	props: { id: {} },
+	setup(__props) {
+		const id = useProvideTeleport(__props.id);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [renderSlot(_ctx.$slots, "default"), createElementVNode("div", {
+				id: unref(id),
+				class: "scalar-teleport-root contents"
+			}, null, 8, _hoisted_1)], 64);
+		};
+	}
+});
+//#endregion
+export { ScalarTeleportRoot_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarTeleportRoot.vue.script.js.map

package/dist/components/ScalarTeleport/ScalarTeleportRoot.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTeleportRoot.vue.script.js","names":[],"sources":["../../../src/components/ScalarTeleport/ScalarTeleportRoot.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar teleport root component\n *\n * Provides a teleport target for nested <ScalarTeleport> components\n *\n * @example\n * <ScalarTeleportRoot>\n *   ...\n *   <ScalarTeleport>\n *     <div>Teleported Content</div>\n *   </ScalarTeleport>\n *   ...\n * </ScalarTeleportRoot>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useProvideTeleport } from './useTeleport'\n\nconst props = defineProps<{\n  /**\n   * Override the default teleport target id\n   */\n  id?: string\n}>()\n\ndefineSlots<{\n  /** The content which contains <ScalarTeleports> */\n  default(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst id = useProvideTeleport(props.id)\n</script>\n<template>\n  <slot />\n  <div\n    :id=\"id\"\n    class=\"scalar-teleport-root contents\" />\n</template>\n"],"mappings":";;;;;;;;;EAkCA,MAAM,KAAK,mBAdG,QAcsB,GAAE;;2DAGpC,WAAQ,KAAA,QAAA,UAAA,EACR,mBAE0C,OAAA;IADvC,IAAI,MAAA,GAAE;IACP,OAAM"}

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

@@ -1,4 +1,4 @@
-export { default as ScalarTeleport } from './ScalarTeleport.vue';
-export { default as ScalarTeleportRoot } from './ScalarTeleportRoot.vue';
-export { TELEPORT_SYMBOL, useProvideTeleport, useTeleport } from './useTeleport';
+export { default as ScalarTeleport } from './ScalarTeleport.vue.js';
+export { default as ScalarTeleportRoot } from './ScalarTeleportRoot.vue.js';
+export { TELEPORT_SYMBOL, useProvideTeleport, useTeleport } from './useTeleport.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ScalarTeleport/useTeleport.js

@@ -0,0 +1,29 @@
+import { inject, provide } from "vue";
+import { nanoid } from "nanoid";
+//#region src/components/ScalarTeleport/useTeleport.ts
+/**
+* The teleport target
+*/
+var TELEPORT_SYMBOL = Symbol();
+/**
+* Get the nearest teleport target id from `useProvideTeleport`
+*
+* Falls back to `body` if no teleport target id is found
+*
+* @see {@link useProvideTeleport}
+*/
+var useTeleport = () => inject(TELEPORT_SYMBOL, "body");
+/**
+* Provides a teleport target id using Vue's `provide`
+*
+* @see https://vuejs.org/guide/components/provide-inject.html#provide-inject
+*/
+var useProvideTeleport = (id) => {
+	const targetId = id ?? `scalar-teleport-${nanoid()}`;
+	provide(TELEPORT_SYMBOL, `#${targetId}`);
+	return targetId;
+};
+//#endregion
+export { TELEPORT_SYMBOL, useProvideTeleport, useTeleport };
+
+//# sourceMappingURL=useTeleport.js.map

package/dist/components/ScalarTeleport/useTeleport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTeleport.js","names":[],"sources":["../../../src/components/ScalarTeleport/useTeleport.ts"],"sourcesContent":["import { nanoid } from 'nanoid'\nimport { type InjectionKey, inject, provide } from 'vue'\n\n/**\n * The teleport target\n */\nexport const TELEPORT_SYMBOL = Symbol() as InjectionKey<string>\n\n/**\n * Get the nearest teleport target id from `useProvideTeleport`\n *\n * Falls back to `body` if no teleport target id is found\n *\n * @see {@link useProvideTeleport}\n */\nexport const useTeleport = () => inject(TELEPORT_SYMBOL, 'body')\n\n/**\n * Provides a teleport target id using Vue's `provide`\n *\n * @see https://vuejs.org/guide/components/provide-inject.html#provide-inject\n */\nexport const useProvideTeleport = (id?: string) => {\n  const targetId = id ?? `scalar-teleport-${nanoid()}`\n  provide(TELEPORT_SYMBOL, `#${targetId}`)\n  return targetId\n}\n"],"mappings":";;;;;;AAMA,IAAa,kBAAkB,QAAQ;;;;;;;;AASvC,IAAa,oBAAoB,OAAO,iBAAiB,OAAO;;;;;;AAOhE,IAAa,sBAAsB,OAAgB;CACjD,MAAM,WAAW,MAAM,mBAAmB,QAAQ;AAClD,SAAQ,iBAAiB,IAAI,WAAW;AACxC,QAAO"}

package/dist/components/ScalarTextArea/ScalarTextArea.vue.js

@@ -0,0 +1,7 @@
+import ScalarTextArea_vue_vue_type_script_setup_true_lang_default from "./ScalarTextArea.vue.script.js";
+//#region src/components/ScalarTextArea/ScalarTextArea.vue
+var ScalarTextArea_default = ScalarTextArea_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarTextArea_default as default };
+
+//# sourceMappingURL=ScalarTextArea.vue.js.map

package/dist/components/ScalarTextArea/ScalarTextArea.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTextArea.vue.js","names":[],"sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Area component\n *\n * A wrapper around the HTML textarea element with a focusable container.\n *\n * @example\n *   <ScalarTextArea v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { onMounted } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst model = defineModel<string>({ default: '' })\n\nconst { textarea } = useTextareaAutosize({\n  input: model,\n  styleProp: 'minHeight',\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n  // Force autofocus if the textarea has the autofocus attribute\n  if ('autofocus' in otherAttrs.value) textarea.value?.focus()\n})\n</script>\n<template>\n  <ScalarFormInput\n    is=\"div\"\n    v-bind=\"\n      stylingAttrsCx(\n        'custom-scroll flex items-start text-c-1 min-h-0 shrink cursor-text leading-snug',\n      )\n    \"\n    @click=\"textarea?.focus()\">\n    <textarea\n      ref=\"textarea\"\n      v-model=\"model\"\n      v-bind=\"otherAttrs\"\n      class=\"w-full resize-none border-none bg-transparent text-sm focus-within:outline-none\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":""}

package/dist/components/ScalarTextArea/ScalarTextArea.vue.script.js

@@ -0,0 +1,38 @@
+import ScalarFormInput_default from "../ScalarForm/ScalarFormInput.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createElementVNode, defineComponent, mergeProps, onMounted, openBlock, unref, useModel, vModelText, withCtx, withDirectives } from "vue";
+import { useTextareaAutosize } from "@vueuse/core";
+var ScalarTextArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarTextArea",
+	props: {
+		"modelValue": { default: "" },
+		"modelModifiers": {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const { textarea } = useTextareaAutosize({
+			input: model,
+			styleProp: "minHeight"
+		});
+		const { stylingAttrsCx, otherAttrs } = useBindCx();
+		onMounted(() => {
+			if ("autofocus" in otherAttrs.value) textarea.value?.focus();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarFormInput_default), mergeProps({ is: "div" }, unref(stylingAttrsCx)("custom-scroll flex items-start text-c-1 min-h-0 shrink cursor-text leading-snug"), { onClick: _cache[1] || (_cache[1] = ($event) => unref(textarea)?.focus()) }), {
+				default: withCtx(() => [withDirectives(createElementVNode("textarea", mergeProps({
+					ref_key: "textarea",
+					ref: textarea,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event)
+				}, unref(otherAttrs), { class: "w-full resize-none border-none bg-transparent text-sm focus-within:outline-none" }), null, 16), [[vModelText, model.value]])]),
+				_: 1
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { ScalarTextArea_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarTextArea.vue.script.js.map