@scalar/components 0.21.3 → 0.22.0

package/dist/components/ScalarVirtualText/ScalarVirtualTextSearch.vue.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Floating search bar for ScalarVirtualText
+ *
+ * Provides find-in-text functionality with match navigation (next/prev)
+ * and result count display.
+ *
+ * @example
+ * <ScalarVirtualTextSearch
+ *   v-model:query="searchQuery"
+ *   :matchCount="searchMatches.length"
+ *   :activeMatchIndex="activeMatchIndex"
+ *   @next="nextMatch"
+ *   @prev="prevMatch"
+ *   @close="closeSearch" />
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** Current search query (v-model) */
+    query: string;
+    /** Total number of matches */
+    matchCount: number;
+    /** Zero-based index of the currently active match */
+    activeMatchIndex: number;
+}, {
+    focus: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    next: () => any;
+    prev: () => any;
+    "update:query": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** Current search query (v-model) */
+    query: string;
+    /** Total number of matches */
+    matchCount: number;
+    /** Zero-based index of the currently active match */
+    activeMatchIndex: number;
+}> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onNext?: (() => any) | undefined;
+    onPrev?: (() => any) | undefined;
+    "onUpdate:query"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=ScalarVirtualTextSearch.vue.d.ts.map

package/dist/components/ScalarVirtualText/ScalarVirtualTextSearch.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarVirtualTextSearch.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarVirtualText/ScalarVirtualTextSearch.vue"],"names":[],"mappings":"AAuJA;;;;;;;;;;;;;;GAcG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,qCAAqC;WAC9B,MAAM;IACb,8BAA8B;gBAClB,MAAM;IAClB,qDAAqD;sBACnC,MAAM;;;;;;;;;IALxB,qCAAqC;WAC9B,MAAM;IACb,8BAA8B;gBAClB,MAAM;IAClB,qDAAqD;sBACnC,MAAM;;;;;;kFAmQtB,CAAC"}

package/dist/components/ScalarVirtualText/ScalarVirtualTextSearch.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+import ScalarVirtualTextSearch_vue_vue_type_script_setup_true_lang_default from "./ScalarVirtualTextSearch.vue.script.js";
+/* empty css                                      */
+//#region src/components/ScalarVirtualText/ScalarVirtualTextSearch.vue
+var ScalarVirtualTextSearch_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ScalarVirtualTextSearch_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-95edadbb"]]);
+//#endregion
+export { ScalarVirtualTextSearch_default as default };
+
+//# sourceMappingURL=ScalarVirtualTextSearch.vue.js.map

package/dist/components/ScalarVirtualText/ScalarVirtualTextSearch.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarVirtualTextSearch.vue.js","names":[],"sources":["../../../src/components/ScalarVirtualText/ScalarVirtualTextSearch.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Floating search bar for ScalarVirtualText\n *\n * Provides find-in-text functionality with match navigation (next/prev)\n * and result count display.\n *\n * @example\n * <ScalarVirtualTextSearch\n *   v-model:query=\"searchQuery\"\n *   :matchCount=\"searchMatches.length\"\n *   :activeMatchIndex=\"activeMatchIndex\"\n *   @next=\"nextMatch\"\n *   @prev=\"prevMatch\"\n *   @close=\"closeSearch\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarIconCaretDown,\n  ScalarIconCaretUp,\n  ScalarIconMagnifyingGlass,\n  ScalarIconX,\n} from '@scalar/icons'\nimport { nextTick, ref, watch } from 'vue'\n\nconst props = defineProps<{\n  /** Current search query (v-model) */\n  query: string\n  /** Total number of matches */\n  matchCount: number\n  /** Zero-based index of the currently active match */\n  activeMatchIndex: number\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:query', value: string): void\n  (e: 'next'): void\n  (e: 'prev'): void\n  (e: 'close'): void\n}>()\n\nconst searchInputRef = ref<HTMLInputElement | null>(null)\n\nconst localQuery = ref(props.query)\n\nwatch(\n  () => props.query,\n  (val) => {\n    localQuery.value = val\n  },\n)\n\nwatch(localQuery, (val) => {\n  emit('update:query', val)\n})\n\n/** Focus the input when mounted */\nconst focus = () => {\n  void nextTick(() => searchInputRef.value?.focus())\n}\n\n/** Navigate on Enter / Shift+Enter inside the search input */\nconst handleSearchKeydown = (e: KeyboardEvent) => {\n  if (e.key === 'Enter') {\n    e.preventDefault()\n    if (e.shiftKey) emit('prev')\n    else emit('next')\n  }\n  if (e.key === 'Escape') {\n    e.preventDefault()\n    emit('close')\n  }\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n  <div\n    class=\"scalar-virtual-text-search ml-auto mr-2 mt-2 flex h-fit w-fit items-center gap-1 overflow-visible rounded-lg bg-b-2 px-2 py-1 shadow-md\"\n    @click.stop>\n    <ScalarIconMagnifyingGlass\n      class=\"pointer-events-none size-3.5 shrink-0 text-c-3\" />\n    <input\n      ref=\"searchInputRef\"\n      v-model=\"localQuery\"\n      aria-label=\"Search in text\"\n      autocomplete=\"off\"\n      class=\"scalar-virtual-text-search-input min-w-0 w-36 appearance-none border-none bg-transparent px-1 py-0.5 text-xs text-c-1 outline-none\"\n      placeholder=\"Find...\"\n      spellcheck=\"false\"\n      type=\"search\"\n      @keydown=\"handleSearchKeydown\" />\n    <span\n      v-if=\"localQuery\"\n      class=\"shrink-0 whitespace-nowrap text-xs tabular-nums text-c-3\">\n      {{\n        matchCount > 0\n          ? `${activeMatchIndex + 1} of ${matchCount}`\n          : 'No results'\n      }}\n    </span>\n    <span class=\"mx-0.5 h-3.5 w-px bg-b-3\" />\n    <button\n      aria-label=\"Previous match\"\n      class=\"flex size-5 items-center justify-center rounded text-c-3 hover:bg-b-3 hover:text-c-1 disabled:pointer-events-none disabled:opacity-30\"\n      :disabled=\"matchCount === 0\"\n      title=\"Previous match (Shift+Enter)\"\n      type=\"button\"\n      @click=\"emit('prev')\">\n      <ScalarIconCaretUp class=\"size-3\" />\n    </button>\n    <button\n      aria-label=\"Next match\"\n      class=\"flex size-5 items-center justify-center rounded text-c-3 hover:bg-b-3 hover:text-c-1 disabled:pointer-events-none disabled:opacity-30\"\n      :disabled=\"matchCount === 0\"\n      title=\"Next match (Enter)\"\n      type=\"button\"\n      @click=\"emit('next')\">\n      <ScalarIconCaretDown class=\"size-3\" />\n    </button>\n    <button\n      aria-label=\"Close search\"\n      class=\"flex size-5 items-center justify-center rounded text-c-3 hover:bg-b-3 hover:text-c-1\"\n      title=\"Close (Escape)\"\n      type=\"button\"\n      @click=\"emit('close')\">\n      <ScalarIconX class=\"size-3\" />\n    </button>\n  </div>\n</template>\n\n<style scoped>\n.scalar-virtual-text-search-input::-webkit-search-cancel-button {\n  display: none;\n}\n</style>\n"],"mappings":""}

package/dist/components/ScalarVirtualText/ScalarVirtualTextSearch.vue.script.js

@@ -0,0 +1,101 @@
+import { createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, openBlock, ref, toDisplayString, unref, vModelText, watch, withDirectives, withModifiers } from "vue";
+import { ScalarIconCaretDown, ScalarIconCaretUp, ScalarIconMagnifyingGlass, ScalarIconX } from "@scalar/icons";
+//#region src/components/ScalarVirtualText/ScalarVirtualTextSearch.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "shrink-0 whitespace-nowrap text-xs tabular-nums text-c-3"
+};
+var _hoisted_2 = ["disabled"];
+var _hoisted_3 = ["disabled"];
+var ScalarVirtualTextSearch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ScalarVirtualTextSearch",
+	props: {
+		query: {},
+		matchCount: {},
+		activeMatchIndex: {}
+	},
+	emits: [
+		"update:query",
+		"next",
+		"prev",
+		"close"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const searchInputRef = ref(null);
+		const localQuery = ref(props.query);
+		watch(() => props.query, (val) => {
+			localQuery.value = val;
+		});
+		watch(localQuery, (val) => {
+			emit("update:query", val);
+		});
+		/** Focus the input when mounted */
+		const focus = () => {
+			nextTick(() => searchInputRef.value?.focus());
+		};
+		/** Navigate on Enter / Shift+Enter inside the search input */
+		const handleSearchKeydown = (e) => {
+			if (e.key === "Enter") {
+				e.preventDefault();
+				if (e.shiftKey) emit("prev");
+				else emit("next");
+			}
+			if (e.key === "Escape") {
+				e.preventDefault();
+				emit("close");
+			}
+		};
+		__expose({ focus });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "scalar-virtual-text-search ml-auto mr-2 mt-2 flex h-fit w-fit items-center gap-1 overflow-visible rounded-lg bg-b-2 px-2 py-1 shadow-md",
+				onClick: _cache[4] || (_cache[4] = withModifiers(() => {}, ["stop"]))
+			}, [
+				createVNode(unref(ScalarIconMagnifyingGlass), { class: "pointer-events-none size-3.5 shrink-0 text-c-3" }),
+				withDirectives(createElementVNode("input", {
+					ref_key: "searchInputRef",
+					ref: searchInputRef,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => localQuery.value = $event),
+					"aria-label": "Search in text",
+					autocomplete: "off",
+					class: "scalar-virtual-text-search-input min-w-0 w-36 appearance-none border-none bg-transparent px-1 py-0.5 text-xs text-c-1 outline-none",
+					placeholder: "Find...",
+					spellcheck: "false",
+					type: "search",
+					onKeydown: handleSearchKeydown
+				}, null, 544), [[vModelText, localQuery.value]]),
+				localQuery.value ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.matchCount > 0 ? `${__props.activeMatchIndex + 1} of ${__props.matchCount}` : "No results"), 1)) : createCommentVNode("", true),
+				_cache[5] || (_cache[5] = createElementVNode("span", { class: "mx-0.5 h-3.5 w-px bg-b-3" }, null, -1)),
+				createElementVNode("button", {
+					"aria-label": "Previous match",
+					class: "flex size-5 items-center justify-center rounded text-c-3 hover:bg-b-3 hover:text-c-1 disabled:pointer-events-none disabled:opacity-30",
+					disabled: __props.matchCount === 0,
+					title: "Previous match (Shift+Enter)",
+					type: "button",
+					onClick: _cache[1] || (_cache[1] = ($event) => emit("prev"))
+				}, [createVNode(unref(ScalarIconCaretUp), { class: "size-3" })], 8, _hoisted_2),
+				createElementVNode("button", {
+					"aria-label": "Next match",
+					class: "flex size-5 items-center justify-center rounded text-c-3 hover:bg-b-3 hover:text-c-1 disabled:pointer-events-none disabled:opacity-30",
+					disabled: __props.matchCount === 0,
+					title: "Next match (Enter)",
+					type: "button",
+					onClick: _cache[2] || (_cache[2] = ($event) => emit("next"))
+				}, [createVNode(unref(ScalarIconCaretDown), { class: "size-3" })], 8, _hoisted_3),
+				createElementVNode("button", {
+					"aria-label": "Close search",
+					class: "flex size-5 items-center justify-center rounded text-c-3 hover:bg-b-3 hover:text-c-1",
+					title: "Close (Escape)",
+					type: "button",
+					onClick: _cache[3] || (_cache[3] = ($event) => emit("close"))
+				}, [createVNode(unref(ScalarIconX), { class: "size-3" })])
+			]);
+		};
+	}
+});
+//#endregion
+export { ScalarVirtualTextSearch_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarVirtualTextSearch.vue.script.js.map

package/dist/components/ScalarVirtualText/ScalarVirtualTextSearch.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarVirtualTextSearch.vue.script.js","names":[],"sources":["../../../src/components/ScalarVirtualText/ScalarVirtualTextSearch.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Floating search bar for ScalarVirtualText\n *\n * Provides find-in-text functionality with match navigation (next/prev)\n * and result count display.\n *\n * @example\n * <ScalarVirtualTextSearch\n *   v-model:query=\"searchQuery\"\n *   :matchCount=\"searchMatches.length\"\n *   :activeMatchIndex=\"activeMatchIndex\"\n *   @next=\"nextMatch\"\n *   @prev=\"prevMatch\"\n *   @close=\"closeSearch\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarIconCaretDown,\n  ScalarIconCaretUp,\n  ScalarIconMagnifyingGlass,\n  ScalarIconX,\n} from '@scalar/icons'\nimport { nextTick, ref, watch } from 'vue'\n\nconst props = defineProps<{\n  /** Current search query (v-model) */\n  query: string\n  /** Total number of matches */\n  matchCount: number\n  /** Zero-based index of the currently active match */\n  activeMatchIndex: number\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:query', value: string): void\n  (e: 'next'): void\n  (e: 'prev'): void\n  (e: 'close'): void\n}>()\n\nconst searchInputRef = ref<HTMLInputElement | null>(null)\n\nconst localQuery = ref(props.query)\n\nwatch(\n  () => props.query,\n  (val) => {\n    localQuery.value = val\n  },\n)\n\nwatch(localQuery, (val) => {\n  emit('update:query', val)\n})\n\n/** Focus the input when mounted */\nconst focus = () => {\n  void nextTick(() => searchInputRef.value?.focus())\n}\n\n/** Navigate on Enter / Shift+Enter inside the search input */\nconst handleSearchKeydown = (e: KeyboardEvent) => {\n  if (e.key === 'Enter') {\n    e.preventDefault()\n    if (e.shiftKey) emit('prev')\n    else emit('next')\n  }\n  if (e.key === 'Escape') {\n    e.preventDefault()\n    emit('close')\n  }\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n  <div\n    class=\"scalar-virtual-text-search ml-auto mr-2 mt-2 flex h-fit w-fit items-center gap-1 overflow-visible rounded-lg bg-b-2 px-2 py-1 shadow-md\"\n    @click.stop>\n    <ScalarIconMagnifyingGlass\n      class=\"pointer-events-none size-3.5 shrink-0 text-c-3\" />\n    <input\n      ref=\"searchInputRef\"\n      v-model=\"localQuery\"\n      aria-label=\"Search in text\"\n      autocomplete=\"off\"\n      class=\"scalar-virtual-text-search-input min-w-0 w-36 appearance-none border-none bg-transparent px-1 py-0.5 text-xs text-c-1 outline-none\"\n      placeholder=\"Find...\"\n      spellcheck=\"false\"\n      type=\"search\"\n      @keydown=\"handleSearchKeydown\" />\n    <span\n      v-if=\"localQuery\"\n      class=\"shrink-0 whitespace-nowrap text-xs tabular-nums text-c-3\">\n      {{\n        matchCount > 0\n          ? `${activeMatchIndex + 1} of ${matchCount}`\n          : 'No results'\n      }}\n    </span>\n    <span class=\"mx-0.5 h-3.5 w-px bg-b-3\" />\n    <button\n      aria-label=\"Previous match\"\n      class=\"flex size-5 items-center justify-center rounded text-c-3 hover:bg-b-3 hover:text-c-1 disabled:pointer-events-none disabled:opacity-30\"\n      :disabled=\"matchCount === 0\"\n      title=\"Previous match (Shift+Enter)\"\n      type=\"button\"\n      @click=\"emit('prev')\">\n      <ScalarIconCaretUp class=\"size-3\" />\n    </button>\n    <button\n      aria-label=\"Next match\"\n      class=\"flex size-5 items-center justify-center rounded text-c-3 hover:bg-b-3 hover:text-c-1 disabled:pointer-events-none disabled:opacity-30\"\n      :disabled=\"matchCount === 0\"\n      title=\"Next match (Enter)\"\n      type=\"button\"\n      @click=\"emit('next')\">\n      <ScalarIconCaretDown class=\"size-3\" />\n    </button>\n    <button\n      aria-label=\"Close search\"\n      class=\"flex size-5 items-center justify-center rounded text-c-3 hover:bg-b-3 hover:text-c-1\"\n      title=\"Close (Escape)\"\n      type=\"button\"\n      @click=\"emit('close')\">\n      <ScalarIconX class=\"size-3\" />\n    </button>\n  </div>\n</template>\n\n<style scoped>\n.scalar-virtual-text-search-input::-webkit-search-cancel-button {\n  display: none;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA2BA,MAAM,QAAQ;EASd,MAAM,OAAO;EAOb,MAAM,iBAAiB,IAA6B,KAAI;EAExD,MAAM,aAAa,IAAI,MAAM,MAAK;AAElC,cACQ,MAAM,QACX,QAAQ;AACP,cAAW,QAAQ;IAEvB;AAEA,QAAM,aAAa,QAAQ;AACzB,QAAK,gBAAgB,IAAG;IACzB;;EAGD,MAAM,cAAc;AACb,kBAAe,eAAe,OAAO,OAAO,CAAA;;;EAInD,MAAM,uBAAuB,MAAqB;AAChD,OAAI,EAAE,QAAQ,SAAS;AACrB,MAAE,gBAAe;AACjB,QAAI,EAAE,SAAU,MAAK,OAAM;QACtB,MAAK,OAAM;;AAElB,OAAI,EAAE,QAAQ,UAAU;AACtB,MAAE,gBAAe;AACjB,SAAK,QAAO;;;AAIhB,WAAa,EAAE,OAAO,CAAA;;uBAIpB,mBAmDM,OAAA;IAlDJ,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;;IACX,YAC2D,MAAA,0BAAA,EAAA,EAAzD,OAAM,kDAAgD,CAAA;mBACxD,mBASmC,SAAA;cAR7B;KAAJ,KAAI;6EACe,QAAA;KACnB,cAAW;KACX,cAAa;KACb,OAAM;KACN,aAAY;KACZ,YAAW;KACX,MAAK;KACJ,WAAS;iCAPD,WAAA,MAAU,CAAA,CAAA;IASb,WAAA,SAAA,WAAA,EADR,mBAQO,QARP,YAQO,gBAJH,QAAA,aAAU,IAAA,GAAoB,QAAA,mBAAgB,EAAA,MAAW,QAAA,eAAA,aAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;8BAK7D,mBAAyC,QAAA,EAAnC,OAAM,4BAA0B,EAAA,MAAA,GAAA;IACtC,mBAQS,UAAA;KAPP,cAAW;KACX,OAAM;KACL,UAAU,QAAA,eAAU;KACrB,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;QACZ,YAAoC,MAAA,kBAAA,EAAA,EAAjB,OAAM,UAAQ,CAAA,CAAA,EAAA,GAAA,WAAA;IAEnC,mBAQS,UAAA;KAPP,cAAW;KACX,OAAM;KACL,UAAU,QAAA,eAAU;KACrB,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;QACZ,YAAsC,MAAA,oBAAA,EAAA,EAAjB,OAAM,UAAQ,CAAA,CAAA,EAAA,GAAA,WAAA;IAErC,mBAOS,UAAA;KANP,cAAW;KACX,OAAM;KACN,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;QACZ,YAA8B,MAAA,YAAA,EAAA,EAAjB,OAAM,UAAQ,CAAA,CAAA,CAAA"}

package/dist/components/ScalarWrappingText/ScalarWrappingText.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarWrappingText.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarWrappingText/ScalarWrappingText.vue"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAGtD;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,0TAyDd,CAAC"}
+{"version":3,"file":"ScalarWrappingText.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarWrappingText/ScalarWrappingText.vue"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAGtD;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,0TA2Dd,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarWrappingText.vue.js","names":[],"sources":["../../../src/components/ScalarWrappingText/ScalarWrappingText.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Wrapping component\n *\n * Adds word breaks to the text to allow improved line wrapping\n *\n * Does not inherit any attributes because it returns a set of html nodes\n *\n * @example\n * <ScalarWrappingText text=\"/this/is/a/long/path/that/needs/to/be/wrapped\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { PRESETS } from './constants'\nimport type { ScalarWrappingTextProps } from './types'\n\nconst {\n  text = '',\n  preset = 'path',\n  regex,\n} = defineProps<ScalarWrappingTextProps>()\n\n/**\n * Unicode character for zero-width non-joiner\n *\n * @see https://en.wikipedia.org/wiki/Zero-width_non-joiner\n */\nconst ZWNJ = '\\u2060'\n\n// We don't want to inherit any attributes because we going to return many nodes\ndefineOptions({ inheritAttrs: false })\n\nconst words = computed<string[]>(() => {\n  const wrapRegex = new RegExp(regex ?? PRESETS[preset], 'g')\n  // Insert the marker before each delimiter\n  const marked = text.replace(wrapRegex, `${ZWNJ}$&`)\n  // Split on the marker and filter out any empty strings\n  return marked.split(ZWNJ).filter(Boolean)\n})\n</script>\n<template>\n  <template\n    v-for=\"(word, i) in words\"\n    :key=\"i\">\n    <wbr />{{ word }}\n  </template>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarWrappingText.vue.js","names":[],"sources":["../../../src/components/ScalarWrappingText/ScalarWrappingText.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Wrapping component\n *\n * Adds word breaks to the text to allow improved line wrapping\n *\n * Does not inherit any attributes because it returns a set of html nodes\n *\n * @example\n * <ScalarWrappingText text=\"/this/is/a/long/path/that/needs/to/be/wrapped\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { PRESETS } from './constants'\nimport type { ScalarWrappingTextProps } from './types'\n\nconst {\n  text = '',\n  preset = 'path',\n  regex,\n} = defineProps<ScalarWrappingTextProps>()\n\n/**\n * Unicode character for zero-width non-joiner\n *\n * @see https://en.wikipedia.org/wiki/Zero-width_non-joiner\n */\nconst ZWNJ = '\\u2060'\n\n// We don't want to inherit any attributes because we going to return many nodes\ndefineOptions({ inheritAttrs: false })\n\nconst words = computed<string[]>(() => {\n  const wrapRegex = new RegExp(regex ?? PRESETS[preset], 'g')\n  // Insert the marker before each delimiter\n  const marked = text.replace(wrapRegex, `${ZWNJ}$&`)\n  // Split on the marker and filter out any empty strings\n  return marked.split(ZWNJ).filter(Boolean)\n})\n</script>\n<template>\n  <template\n    v-for=\"(word, i) in words\"\n    :key=\"i\">\n    <wbr v-if=\"i !== 0\" />{{ word }}\n  </template>\n</template>\n"],"mappings":""}

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

@@ -1,5 +1,7 @@
 import { PRESETS } from "./constants.js";
-import { Fragment, computed, createElementBlock, createElementVNode, createTextVNode, defineComponent, openBlock, renderList, toDisplayString } from "vue";
+import { Fragment, computed, createCommentVNode, createElementBlock, createTextVNode, defineComponent, openBlock, renderList, toDisplayString } from "vue";
+//#region src/components/ScalarWrappingText/ScalarWrappingText.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { key: 0 };
 var ScalarWrappingText_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarWrappingText",
@@ -21,7 +23,7 @@ var ScalarWrappingText_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 		});
 		return (_ctx, _cache) => {
 			return openBlock(true), createElementBlock(Fragment, null, renderList(words.value, (word, i) => {
-				return openBlock(), createElementBlock(Fragment, { key: i }, [_cache[0] || (_cache[0] = createElementVNode("wbr", null, null, -1)), createTextVNode(toDisplayString(word), 1)], 64);
+				return openBlock(), createElementBlock(Fragment, { key: i }, [i !== 0 ? (openBlock(), createElementBlock("wbr", _hoisted_1)) : createCommentVNode("", true), createTextVNode(toDisplayString(word), 1)], 64);
 			}), 128);
 		};
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarWrappingText.vue.script.js","names":[],"sources":["../../../src/components/ScalarWrappingText/ScalarWrappingText.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Wrapping component\n *\n * Adds word breaks to the text to allow improved line wrapping\n *\n * Does not inherit any attributes because it returns a set of html nodes\n *\n * @example\n * <ScalarWrappingText text=\"/this/is/a/long/path/that/needs/to/be/wrapped\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { PRESETS } from './constants'\nimport type { ScalarWrappingTextProps } from './types'\n\nconst {\n  text = '',\n  preset = 'path',\n  regex,\n} = defineProps<ScalarWrappingTextProps>()\n\n/**\n * Unicode character for zero-width non-joiner\n *\n * @see https://en.wikipedia.org/wiki/Zero-width_non-joiner\n */\nconst ZWNJ = '\\u2060'\n\n// We don't want to inherit any attributes because we going to return many nodes\ndefineOptions({ inheritAttrs: false })\n\nconst words = computed<string[]>(() => {\n  const wrapRegex = new RegExp(regex ?? PRESETS[preset], 'g')\n  // Insert the marker before each delimiter\n  const marked = text.replace(wrapRegex, `${ZWNJ}$&`)\n  // Split on the marker and filter out any empty strings\n  return marked.split(ZWNJ).filter(Boolean)\n})\n</script>\n<template>\n  <template\n    v-for=\"(word, i) in words\"\n    :key=\"i\">\n    <wbr />{{ word }}\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EA8BA,MAAM,OAAO;EAKb,MAAM,QAAQ,eAAyB;GACrC,MAAM,YAAY,IAAI,OAAO,QAAA,SAAS,QAAQ,QAAA,SAAS,IAAG;AAI1D,UAFe,QAAA,KAAK,QAAQ,WAAW,GAAG,KAAK,IAAG,CAEpC,MAAM,KAAK,CAAC,OAAO,QAAO;IACzC;;2BAGC,mBAIW,UAAA,MAAA,WAHW,MAAA,QAAZ,MAAM,MAAC;4DACT,GAAC,EAAA,CAAA,OAAA,OAAA,OAAA,KACP,mBAAO,OAAA,MAAA,MAAA,GAAA,GAAA,gBAAA,gBAAG,KAAI,EAAA,EAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"ScalarWrappingText.vue.script.js","names":[],"sources":["../../../src/components/ScalarWrappingText/ScalarWrappingText.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Wrapping component\n *\n * Adds word breaks to the text to allow improved line wrapping\n *\n * Does not inherit any attributes because it returns a set of html nodes\n *\n * @example\n * <ScalarWrappingText text=\"/this/is/a/long/path/that/needs/to/be/wrapped\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { PRESETS } from './constants'\nimport type { ScalarWrappingTextProps } from './types'\n\nconst {\n  text = '',\n  preset = 'path',\n  regex,\n} = defineProps<ScalarWrappingTextProps>()\n\n/**\n * Unicode character for zero-width non-joiner\n *\n * @see https://en.wikipedia.org/wiki/Zero-width_non-joiner\n */\nconst ZWNJ = '\\u2060'\n\n// We don't want to inherit any attributes because we going to return many nodes\ndefineOptions({ inheritAttrs: false })\n\nconst words = computed<string[]>(() => {\n  const wrapRegex = new RegExp(regex ?? PRESETS[preset], 'g')\n  // Insert the marker before each delimiter\n  const marked = text.replace(wrapRegex, `${ZWNJ}$&`)\n  // Split on the marker and filter out any empty strings\n  return marked.split(ZWNJ).filter(Boolean)\n})\n</script>\n<template>\n  <template\n    v-for=\"(word, i) in words\"\n    :key=\"i\">\n    <wbr v-if=\"i !== 0\" />{{ word }}\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EA8BA,MAAM,OAAO;EAKb,MAAM,QAAQ,eAAyB;GACrC,MAAM,YAAY,IAAI,OAAO,QAAA,SAAS,QAAQ,QAAA,SAAS,IAAG;AAI1D,UAFe,QAAA,KAAK,QAAQ,WAAW,GAAG,KAAK,IAAG,CAEpC,MAAM,KAAK,CAAC,OAAO,QAAO;IACzC;;2BAGC,mBAIW,UAAA,MAAA,WAHW,MAAA,QAAZ,MAAM,MAAC;4DACT,GAAC,EAAA,CACI,MAAC,KAAA,WAAA,EAAZ,mBAAsB,OAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,EAAA,gBAAA,gBAAG,KAAI,EAAA,EAAA,CAAA,EAAA,GAAA"}

package/dist/docs/useBindCx/MockComponents.d.ts

@@ -11,59 +11,11 @@ export declare const SimpleComponent: import("vue").DefineComponent<import("vue"
     variants: (props?: ({
         active?: boolean | undefined;
     } & ({
-        class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined;
+        class?: import("cva").ClassValue;
         className?: never;
     } | {
         class?: never;
-        className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined;
+        className?: import("cva").ClassValue;
     })) | undefined) => string;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     active: {
@@ -89,59 +41,11 @@ export declare const ComplexComponent: import("vue").DefineComponent<import("vue
     variants: (props?: ({
         active?: boolean | undefined;
     } & ({
-        class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined;
+        class?: import("cva").ClassValue;
         className?: never;
     } | {
         class?: never;
-        className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined;
+        className?: import("cva").ClassValue;
     })) | undefined) => string;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     active: {

package/dist/docs/useBindCx/MockComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MockComponents.d.ts","sourceRoot":"","sources":["../../../src/docs/useBindCx/MockComponents.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAU1B,CAAA;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAgB3B,CAAA"}
+{"version":3,"file":"MockComponents.d.ts","sourceRoot":"","sources":["../../../src/docs/useBindCx/MockComponents.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;4EAU1B,CAAA;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAgB3B,CAAA"}