@scalar/components 0.21.0 → 0.21.2

package/dist/components/ScalarSearchResults/ScalarSearchResultList.vue.d.ts

@@ -1,16 +1,26 @@
-type __VLS_Props = {
-    noResults?: boolean;
-};
-declare var __VLS_1: {}, __VLS_3: {};
-type __VLS_Slots = {} & {
-    noResults?: (props: typeof __VLS_1) => any;
-} & {
-    default?: (props: typeof __VLS_3) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+/**
+ * Scalar Search Result List component
+ *
+ * A container for search result items with a "no results" fallback.
+ *
+ * @example
+ * <ScalarSearchResultList :noResults="results.length === 0">
+ *   <ScalarSearchResultItem v-for="r in results" :key="r.id">
+ *     {{ r.label }}
+ *   </ScalarSearchResultItem>
+ * </ScalarSearchResultList>
+ */
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    noResults?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    noResults?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    noResults?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/ScalarSearchResults/ScalarSearchResultList.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchResultList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultList.vue"],"names":[],"mappings":"AAiCA,KAAK,WAAW,GAAG;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAC;AAkDF,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC9C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarSearchResultList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultList.vue"],"names":[],"mappings":"AAiDA;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;gBAEJ,OAAO;;gBAAP,OAAO;;gBAqDL,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAChC,CAAC,KAAK,IAAgB,KAAK,GAAG;EASxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/ScalarSearchResults/ScalarSearchResultList.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchResultList.vue.js","names":[],"sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineProps<{\n  noResults?: boolean\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"listbox\"\n    v-bind=\"cx('flex flex-col')\">\n    <slot\n      v-if=\"noResults\"\n      name=\"noResults\">\n      <div class=\"flex flex-col items-center gap-2 px-3 py-4\">\n        <div\n          class=\"text-base font-medium text-c-2\"\n          role=\"alert\">\n          No results found\n        </div>\n      </div>\n    </slot>\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarSearchResultList.vue.js","names":[],"sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultList.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Search Result List component\n *\n * A container for search result items with a \"no results\" fallback.\n *\n * @example\n * <ScalarSearchResultList :noResults=\"results.length === 0\">\n *   <ScalarSearchResultItem v-for=\"r in results\" :key=\"r.id\">\n *     {{ r.label }}\n *   </ScalarSearchResultItem>\n * </ScalarSearchResultList>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineProps<{\n  noResults?: boolean\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"listbox\"\n    v-bind=\"cx('flex flex-col')\">\n    <slot\n      v-if=\"noResults\"\n      name=\"noResults\">\n      <div class=\"flex flex-col items-center gap-2 px-3 py-4\">\n        <div\n          class=\"text-base font-medium text-c-2\"\n          role=\"alert\">\n          No results found\n        </div>\n      </div>\n    </slot>\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarSearchResults/ScalarSearchResultList.vue.script.js

@@ -1,6 +1,5 @@
 import { useBindCx } from "@scalar/use-hooks/useBindCx";
 import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot, unref } from "vue";
-//#region src/components/ScalarSearchResults/ScalarSearchResultList.vue?vue&type=script&setup=true&lang.ts
 var ScalarSearchResultList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarSearchResultList",

package/dist/components/ScalarSearchResults/ScalarSearchResultList.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchResultList.vue.script.js","names":[],"sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineProps<{\n  noResults?: boolean\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"listbox\"\n    v-bind=\"cx('flex flex-col')\">\n    <slot\n      v-if=\"noResults\"\n      name=\"noResults\">\n      <div class=\"flex flex-col items-center gap-2 px-3 py-4\">\n        <div\n          class=\"text-base font-medium text-c-2\"\n          role=\"alert\">\n          No results found\n        </div>\n      </div>\n    </slot>\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;EAQA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAeM,OAfN,WAeM,EAdJ,MAAK,WAAS,EACN,MAAA,GAAE,CAAA,gBAAA,CAAA,EAAA,CAEF,QAAA,YADR,WAUO,KAAA,QAAA,aAAA,EAAA,KAAA,GAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAPL,mBAMM,OAAA,EAND,OAAM,8CAA4C,EAAA,CACrD,mBAIM,OAAA;IAHJ,OAAM;IACN,MAAK;MAAQ,qBAEf,CAAA,EAAA,GAAA,EAAA,CAAA,GAAA,mBAAA,IAAA,KAAA,EAGJ,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"ScalarSearchResultList.vue.script.js","names":[],"sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultList.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Search Result List component\n *\n * A container for search result items with a \"no results\" fallback.\n *\n * @example\n * <ScalarSearchResultList :noResults=\"results.length === 0\">\n *   <ScalarSearchResultItem v-for=\"r in results\" :key=\"r.id\">\n *     {{ r.label }}\n *   </ScalarSearchResultItem>\n * </ScalarSearchResultList>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineProps<{\n  noResults?: boolean\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"listbox\"\n    v-bind=\"cx('flex flex-col')\">\n    <slot\n      v-if=\"noResults\"\n      name=\"noResults\">\n      <div class=\"flex flex-col items-center gap-2 px-3 py-4\">\n        <div\n          class=\"text-base font-medium text-c-2\"\n          role=\"alert\">\n          No results found\n        </div>\n      </div>\n    </slot>\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;EAuBA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAeM,OAfN,WAeM,EAdJ,MAAK,WAAS,EACN,MAAA,GAAE,CAAA,gBAAA,CAAA,EAAA,CAEF,QAAA,YADR,WAUO,KAAA,QAAA,aAAA,EAAA,KAAA,GAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAPL,mBAMM,OAAA,EAND,OAAM,8CAA4C,EAAA,CACrD,mBAIM,OAAA;IAHJ,OAAM;IACN,MAAK;MAAQ,qBAEf,CAAA,EAAA,GAAA,EAAA,CAAA,GAAA,mBAAA,IAAA,KAAA,EAGJ,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}

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

@@ -1,13 +1,21 @@
-declare var __VLS_6: {}, __VLS_8: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
-} & {
-    shortcut?: (props: typeof __VLS_8) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+/**
+ * Scalar Sidebar Search Button component
+ *
+ * A styled button that serves as a search trigger in the sidebar.
+ * Displays a magnifying glass icon and an optional keyboard shortcut.
+ *
+ * @example
+ * <ScalarSidebarSearchButton>
+ *   <template #shortcut>⌘K</template>
+ * </ScalarSidebarSearchButton>
+ */
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    shortcut?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/ScalarSidebar/ScalarSidebarSearchButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarSearchButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"names":[],"mappings":"AA2GA,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU,+QACd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarSidebarSearchButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"names":[],"mappings":"AAoDA;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cAyEJ,CAAC,KAAK,IAAgB,KAAK,GAAG;;eAC7B,CAAC,KAAK,IAAgB,KAAK,GAAG;EAQzC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarSearchButton.vue.js","names":[],"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":""}
+{"version":3,"file":"ScalarSidebarSearchButton.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Button component\n *\n * A styled button that serves as a search trigger in the sidebar.\n * Displays a magnifying glass icon and an optional keyboard shortcut.\n *\n * @example\n * <ScalarSidebarSearchButton>\n *   <template #shortcut>⌘K</template>\n * </ScalarSidebarSearchButton>\n */\nexport default {}\n</script>\n<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":""}

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

@@ -1 +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"}
+{"version":3,"file":"ScalarSidebarSearchButton.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Button component\n *\n * A styled button that serves as a search trigger in the sidebar.\n * Displays a magnifying glass icon and an optional keyboard shortcut.\n *\n * @example\n * <ScalarSidebarSearchButton>\n *   <template #shortcut>⌘K</template>\n * </ScalarSidebarSearchButton>\n */\nexport default {}\n</script>\n<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":";;;;;;;;;;;;;EAmBA,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.d.ts

@@ -1,18 +1,30 @@
 import { type LoadingState } from '../ScalarLoading';
-type __VLS_Props = {
+/**
+ * Scalar Sidebar Search Input component
+ *
+ * An inline search input for the sidebar with a clear button
+ * and optional loading indicator.
+ *
+ * @example
+ * <ScalarSidebarSearchInput v-model="query" />
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
     autofocus?: boolean;
     loader?: LoadingState;
     label?: string;
-};
-type __VLS_ModelProps = {
+} & {
     modelValue?: string;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<{
+    autofocus?: boolean;
+    loader?: LoadingState;
+    label?: string;
+} & {
+    modelValue?: string;
+}> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;
 //# sourceMappingURL=ScalarSidebarSearchInput.vue.d.ts.map

package/dist/components/ScalarSidebar/ScalarSidebarSearchInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarSearchInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"names":[],"mappings":"AA2EA,OAAO,EAAE,KAAK,YAAY,EAAiB,MAAM,kBAAkB,CAAA;AAEnE,KAAK,WAAW,GAAG;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AAsBF,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAKF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAqHxD,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ScalarSidebarSearchInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"names":[],"mappings":"AAuFA,OAAO,EAAE,KAAK,YAAY,EAAiB,MAAM,kBAAkB,CAAA;AAGnE;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;gBAEJ,OAAO;aACV,YAAY;YACb,MAAM;;iBAwBH,MAAM;;;;gBA1BL,OAAO;aACV,YAAY;YACb,MAAM;;iBAwBH,MAAM;;;kFA+Hf,CAAC"}

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

@@ -1 +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":""}
+{"version":3,"file":"ScalarSidebarSearchInput.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Input component\n *\n * An inline search input for the sidebar with a clear button\n * and optional loading indicator.\n *\n * @example\n * <ScalarSidebarSearchInput v-model=\"query\" />\n */\nexport default {}\n</script>\n<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.map

@@ -1 +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"}
+{"version":3,"file":"ScalarSidebarSearchInput.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Input component\n *\n * An inline search input for the sidebar with a clear button\n * and optional loading indicator.\n *\n * @example\n * <ScalarSidebarSearchInput v-model=\"query\" />\n */\nexport default {}\n</script>\n<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":";;;;;;;;;;;;;;;;;;;;EA0BA,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/ScalarToggle/ScalarToggle.vue.d.ts

@@ -1,16 +1,27 @@
-type __VLS_Props = {
+/**
+ * Scalar Toggle component
+ *
+ * A switch-style toggle control with support for
+ * disabled state and accessible labeling.
+ *
+ * @example
+ * <ScalarToggle v-model="enabled" label="Enable feature" />
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
     disabled?: boolean;
     label?: string;
-};
-type __VLS_ModelProps = {
+} & {
     modelValue?: boolean;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<{
+    disabled?: boolean;
+    label?: string;
+} & {
+    modelValue?: boolean;
+}> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;
 //# sourceMappingURL=ScalarToggle.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarToggle.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarToggle/ScalarToggle.vue"],"names":[],"mappings":"AAgDA,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AAwBF,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAKF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AA0DxD,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ScalarToggle.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarToggle/ScalarToggle.vue"],"names":[],"mappings":"AA6DA;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;eAEL,OAAO;YACV,MAAM;;iBA0BH,OAAO;;;;eA3BP,OAAO;YACV,MAAM;;iBA0BH,OAAO;;;kFAoEhB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarToggle.vue.js","names":[],"sources":["../../../src/components/ScalarToggle/ScalarToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\n\nconst props = defineProps<{\n  disabled?: boolean\n  label?: string\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nfunction toggle() {\n  if (props.disabled) {\n    return\n  }\n  model.value = !model.value\n}\n\nconst variants = cva({\n  base: 'relative h-3.5 min-w-6 w-6 cursor-pointer rounded-full bg-b-3 transition-colors duration-300',\n  variants: {\n    checked: { true: 'bg-c-accent' },\n    disabled: { true: 'cursor-not-allowed opacity-40' },\n  },\n})\n</script>\n<template>\n  <button\n    :aria-checked=\"model\"\n    :aria-disabled=\"disabled\"\n    :class=\"cx(variants({ checked: model, disabled }))\"\n    role=\"switch\"\n    type=\"button\"\n    @click=\"toggle\">\n    <div\n      class=\"absolute left-px top-px flex h-3 w-3 items-center justify-center rounded-full bg-b-1 text-c-accent transition-transform duration-300\"\n      :class=\"{ 'translate-x-2.5': model }\" />\n    <span\n      v-if=\"label\"\n      class=\"sr-only\">\n      {{ label }}\n    </span>\n  </button>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarToggle.vue.js","names":[],"sources":["../../../src/components/ScalarToggle/ScalarToggle.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Toggle component\n *\n * A switch-style toggle control with support for\n * disabled state and accessible labeling.\n *\n * @example\n * <ScalarToggle v-model=\"enabled\" label=\"Enable feature\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\n\nconst props = defineProps<{\n  disabled?: boolean\n  label?: string\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nfunction toggle() {\n  if (props.disabled) {\n    return\n  }\n  model.value = !model.value\n}\n\nconst variants = cva({\n  base: 'relative h-3.5 min-w-6 w-6 cursor-pointer rounded-full bg-b-3 transition-colors duration-300',\n  variants: {\n    checked: { true: 'bg-c-accent' },\n    disabled: { true: 'cursor-not-allowed opacity-40' },\n  },\n})\n</script>\n<template>\n  <button\n    :aria-checked=\"model\"\n    :aria-disabled=\"disabled\"\n    :class=\"cx(variants({ checked: model, disabled }))\"\n    role=\"switch\"\n    type=\"button\"\n    @click=\"toggle\">\n    <div\n      class=\"absolute left-px top-px flex h-3 w-3 items-center justify-center rounded-full bg-b-1 text-c-accent transition-transform duration-300\"\n      :class=\"{ 'translate-x-2.5': model }\" />\n    <span\n      v-if=\"label\"\n      class=\"sr-only\">\n      {{ label }}\n    </span>\n  </button>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarToggle.vue.script.js","names":[],"sources":["../../../src/components/ScalarToggle/ScalarToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\n\nconst props = defineProps<{\n  disabled?: boolean\n  label?: string\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nfunction toggle() {\n  if (props.disabled) {\n    return\n  }\n  model.value = !model.value\n}\n\nconst variants = cva({\n  base: 'relative h-3.5 min-w-6 w-6 cursor-pointer rounded-full bg-b-3 transition-colors duration-300',\n  variants: {\n    checked: { true: 'bg-c-accent' },\n    disabled: { true: 'cursor-not-allowed opacity-40' },\n  },\n})\n</script>\n<template>\n  <button\n    :aria-checked=\"model\"\n    :aria-disabled=\"disabled\"\n    :class=\"cx(variants({ checked: model, disabled }))\"\n    role=\"switch\"\n    type=\"button\"\n    @click=\"toggle\">\n    <div\n      class=\"absolute left-px top-px flex h-3 w-3 items-center justify-center rounded-full bg-b-1 text-c-accent transition-transform duration-300\"\n      :class=\"{ 'translate-x-2.5': model }\" />\n    <span\n      v-if=\"label\"\n      class=\"sr-only\">\n      {{ label }}\n    </span>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAGA,MAAM,QAAQ;EAKd,MAAM,QAAQ,SAAoB,SAAA,aAAmB;EAErD,SAAS,SAAS;AAChB,OAAI,MAAM,SACR;AAEF,SAAM,QAAQ,CAAC,MAAM;;EAGvB,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU;IACR,SAAS,EAAE,MAAM,eAAe;IAChC,UAAU,EAAE,MAAM,iCAAiC;IACpD;GACF,CAAA;;uBAGC,mBAeS,UAAA;IAdN,gBAAc,MAAA;IACd,iBAAe,QAAA;IACf,OAAK,eAAE,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA;KAAA,SAAY,MAAA;KAAK,UAAE,QAAA;KAAQ,CAAA,CAAA,CAAA;IAC9C,MAAK;IACL,MAAK;IACJ,SAAO;OACR,mBAE0C,OAAA,EADxC,OAAK,eAAA,CAAC,wIAAsI,EAAA,mBAC/G,MAAA,OAAK,CAAA,CAAA,EAAA,EAAA,MAAA,EAAA,EAE5B,QAAA,SAAA,WAAA,EADR,mBAIO,QAJP,YAIO,gBADF,QAAA,MAAK,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,IAAA,WAAA"}
+{"version":3,"file":"ScalarToggle.vue.script.js","names":[],"sources":["../../../src/components/ScalarToggle/ScalarToggle.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Toggle component\n *\n * A switch-style toggle control with support for\n * disabled state and accessible labeling.\n *\n * @example\n * <ScalarToggle v-model=\"enabled\" label=\"Enable feature\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\n\nconst props = defineProps<{\n  disabled?: boolean\n  label?: string\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nfunction toggle() {\n  if (props.disabled) {\n    return\n  }\n  model.value = !model.value\n}\n\nconst variants = cva({\n  base: 'relative h-3.5 min-w-6 w-6 cursor-pointer rounded-full bg-b-3 transition-colors duration-300',\n  variants: {\n    checked: { true: 'bg-c-accent' },\n    disabled: { true: 'cursor-not-allowed opacity-40' },\n  },\n})\n</script>\n<template>\n  <button\n    :aria-checked=\"model\"\n    :aria-disabled=\"disabled\"\n    :class=\"cx(variants({ checked: model, disabled }))\"\n    role=\"switch\"\n    type=\"button\"\n    @click=\"toggle\">\n    <div\n      class=\"absolute left-px top-px flex h-3 w-3 items-center justify-center rounded-full bg-b-1 text-c-accent transition-transform duration-300\"\n      :class=\"{ 'translate-x-2.5': model }\" />\n    <span\n      v-if=\"label\"\n      class=\"sr-only\">\n      {{ label }}\n    </span>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,QAAQ;EAKd,MAAM,QAAQ,SAAoB,SAAA,aAAmB;EAErD,SAAS,SAAS;AAChB,OAAI,MAAM,SACR;AAEF,SAAM,QAAQ,CAAC,MAAM;;EAGvB,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU;IACR,SAAS,EAAE,MAAM,eAAe;IAChC,UAAU,EAAE,MAAM,iCAAiC;IACpD;GACF,CAAA;;uBAGC,mBAeS,UAAA;IAdN,gBAAc,MAAA;IACd,iBAAe,QAAA;IACf,OAAK,eAAE,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA;KAAA,SAAY,MAAA;KAAK,UAAE,QAAA;KAAQ,CAAA,CAAA,CAAA;IAC9C,MAAK;IACL,MAAK;IACJ,SAAO;OACR,mBAE0C,OAAA,EADxC,OAAK,eAAA,CAAC,wIAAsI,EAAA,mBAC/G,MAAA,OAAK,CAAA,CAAA,EAAA,EAAA,MAAA,EAAA,EAE5B,QAAA,SAAA,WAAA,EADR,mBAIO,QAJP,YAIO,gBADF,QAAA,MAAK,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,IAAA,WAAA"}

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

@@ -1,4 +1,26 @@
-type __VLS_Props = {
+/**
+ * Scalar Virtual Text component
+ *
+ * Renders large blocks of text efficiently using virtualized scrolling.
+ * Only the visible lines are rendered to the DOM.
+ *
+ * @example
+ * <ScalarVirtualText text="line1\nline2\nline3" :lineHeight="20" />
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** Text to display */
+    text: string;
+    /**
+     * Height of each line
+     * @default 20
+     */
+    lineHeight?: number;
+    containerClass?: string;
+    contentClass?: string;
+    lineClass?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /** Text to display */
     text: string;
     /**
@@ -9,13 +31,10 @@ type __VLS_Props = {
     containerClass?: string;
     contentClass?: string;
     lineClass?: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+}> & Readonly<{}>, {
     lineHeight: number;
     containerClass: string;
     contentClass: string;
     lineClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;
 //# sourceMappingURL=ScalarVirtualText.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarVirtualText.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarVirtualText/ScalarVirtualText.vue"],"names":[],"mappings":"AA6HA,KAAK,WAAW,GAAG;IACf,sBAAsB;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC;AAgJJ,QAAA,MAAM,YAAY;gBApJD,MAAM;oBACF,MAAM;kBACR,MAAM;eACT,MAAM;6EAoJpB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ScalarVirtualText.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarVirtualText/ScalarVirtualText.vue"],"names":[],"mappings":"AA0IA;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEd,sBAAsB;UAChB,MAAM;IACZ;;;OAGG;iBACU,MAAM;qBACF,MAAM;mBACR,MAAM;gBACT,MAAM;;IATlB,sBAAsB;UAChB,MAAM;IACZ;;;OAGG;iBACU,MAAM;qBACF,MAAM;mBACR,MAAM;gBACT,MAAM;;gBAHL,MAAM;oBACF,MAAM;kBACR,MAAM;eACT,MAAM;6EAqJlB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarVirtualText.vue.js","names":[],"sources":["../../../src/components/ScalarVirtualText/ScalarVirtualText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    /** Text to display */\n    text: string\n    /**\n     * Height of each line\n     * @default 20\n     */\n    lineHeight?: number\n    containerClass?: string\n    contentClass?: string\n    lineClass?: string\n  }>(),\n  {\n    lineHeight: 20,\n    containerClass: '',\n    contentClass: '',\n    lineClass: '',\n  },\n)\n\nconst containerRef = ref<HTMLElement | null>(null)\nconst contentRef = ref<HTMLElement | null>(null)\nconst scrollPosition = ref(0)\nconst containerHeight = ref(0)\n\n/** Array of text broken into lines */\nconst lines = computed(() => props.text.split('\\n'))\n/**\n * Total height of all lines combined\n *\n * TODO: there is a problem with this calculation which screws up the scrollbar a bit\n */\nconst totalHeight = computed(() => lines.value.length * props.lineHeight)\n\n/** Index of the first visible line */\nconst visibleStartIndex = computed(() =>\n  Math.floor(scrollPosition.value / props.lineHeight),\n)\n\n/** Index of the last visible line */\nconst visibleEndIndex = computed(() =>\n  Math.min(\n    Math.ceil(\n      (scrollPosition.value + containerHeight.value) / props.lineHeight,\n    ),\n    lines.value.length,\n  ),\n)\n\n/** Array of visible lines, including buffer for smooth scrolling */\nconst visibleLines = computed(() => {\n  const buffer = 10\n  const start = Math.max(0, visibleStartIndex.value - buffer)\n  const end = Math.min(lines.value.length, visibleEndIndex.value + buffer)\n\n  return lines.value.slice(start, end)\n})\n\n/** Style object for the content container, controls \"scrolling\" */\nconst contentStyle = computed(() => ({\n  height: `${totalHeight.value}px`,\n  transform: `translateY(${Math.max(0, visibleStartIndex.value - 10) * props.lineHeight}px)`,\n}))\n\n/** Updates the scroll position when the container is scrolled */\nconst handleScroll = () =>\n  containerRef.value && (scrollPosition.value = containerRef.value.scrollTop)\n\n/** Updates the container height when the window is resized */\nconst updateContainerHeight = () =>\n  containerRef.value &&\n  (containerHeight.value = containerRef.value.clientHeight)\n\nonMounted(() => {\n  updateContainerHeight()\n  window.addEventListener('resize', updateContainerHeight)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('resize', updateContainerHeight)\n})\n\nwatchEffect(() => {\n  if (!contentRef.value) {\n    return\n  }\n\n  contentRef.value.style.transform = `translateY(${Math.max(0, visibleStartIndex.value - 10) * props.lineHeight}px)`\n})\n</script>\n\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"scalar-virtual-text overflow-auto\"\n    :class=\"containerClass\"\n    @scroll=\"handleScroll\">\n    <code\n      ref=\"contentRef\"\n      class=\"scalar-virtual-text-content\"\n      :class=\"contentClass\"\n      :style=\"contentStyle\">\n      <div\n        v-for=\"(line, index) in visibleLines\"\n        :key=\"visibleStartIndex + index\"\n        class=\"scalar-virtual-text-line\"\n        :class=\"lineClass\"\n        :style=\"{\n          height: `${props.lineHeight}px`,\n          lineHeight: `${props.lineHeight}px`,\n        }\">\n        {{ line }}\n      </div>\n    </code>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarVirtualText.vue.js","names":[],"sources":["../../../src/components/ScalarVirtualText/ScalarVirtualText.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Virtual Text component\n *\n * Renders large blocks of text efficiently using virtualized scrolling.\n * Only the visible lines are rendered to the DOM.\n *\n * @example\n * <ScalarVirtualText text=\"line1\\nline2\\nline3\" :lineHeight=\"20\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    /** Text to display */\n    text: string\n    /**\n     * Height of each line\n     * @default 20\n     */\n    lineHeight?: number\n    containerClass?: string\n    contentClass?: string\n    lineClass?: string\n  }>(),\n  {\n    lineHeight: 20,\n    containerClass: '',\n    contentClass: '',\n    lineClass: '',\n  },\n)\n\nconst containerRef = ref<HTMLElement | null>(null)\nconst contentRef = ref<HTMLElement | null>(null)\nconst scrollPosition = ref(0)\nconst containerHeight = ref(0)\n\n/** Array of text broken into lines */\nconst lines = computed(() => props.text.split('\\n'))\n/**\n * Total height of all lines combined\n *\n * TODO: there is a problem with this calculation which screws up the scrollbar a bit\n */\nconst totalHeight = computed(() => lines.value.length * props.lineHeight)\n\n/** Index of the first visible line */\nconst visibleStartIndex = computed(() =>\n  Math.floor(scrollPosition.value / props.lineHeight),\n)\n\n/** Index of the last visible line */\nconst visibleEndIndex = computed(() =>\n  Math.min(\n    Math.ceil(\n      (scrollPosition.value + containerHeight.value) / props.lineHeight,\n    ),\n    lines.value.length,\n  ),\n)\n\n/** Array of visible lines, including buffer for smooth scrolling */\nconst visibleLines = computed(() => {\n  const buffer = 10\n  const start = Math.max(0, visibleStartIndex.value - buffer)\n  const end = Math.min(lines.value.length, visibleEndIndex.value + buffer)\n\n  return lines.value.slice(start, end)\n})\n\n/** Style object for the content container, controls \"scrolling\" */\nconst contentStyle = computed(() => ({\n  height: `${totalHeight.value}px`,\n  transform: `translateY(${Math.max(0, visibleStartIndex.value - 10) * props.lineHeight}px)`,\n}))\n\n/** Updates the scroll position when the container is scrolled */\nconst handleScroll = () =>\n  containerRef.value && (scrollPosition.value = containerRef.value.scrollTop)\n\n/** Updates the container height when the window is resized */\nconst updateContainerHeight = () =>\n  containerRef.value &&\n  (containerHeight.value = containerRef.value.clientHeight)\n\nonMounted(() => {\n  updateContainerHeight()\n  window.addEventListener('resize', updateContainerHeight)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('resize', updateContainerHeight)\n})\n\nwatchEffect(() => {\n  if (!contentRef.value) {\n    return\n  }\n\n  contentRef.value.style.transform = `translateY(${Math.max(0, visibleStartIndex.value - 10) * props.lineHeight}px)`\n})\n</script>\n\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"scalar-virtual-text overflow-auto\"\n    :class=\"containerClass\"\n    @scroll=\"handleScroll\">\n    <code\n      ref=\"contentRef\"\n      class=\"scalar-virtual-text-content\"\n      :class=\"contentClass\"\n      :style=\"contentStyle\">\n      <div\n        v-for=\"(line, index) in visibleLines\"\n        :key=\"visibleStartIndex + index\"\n        class=\"scalar-virtual-text-line\"\n        :class=\"lineClass\"\n        :style=\"{\n          height: `${props.lineHeight}px`,\n          lineHeight: `${props.lineHeight}px`,\n        }\">\n        {{ line }}\n      </div>\n    </code>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,5 +1,4 @@
 import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, watchEffect } from "vue";
-//#region src/components/ScalarVirtualText/ScalarVirtualText.vue?vue&type=script&setup=true&lang.ts
 var ScalarVirtualText_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ScalarVirtualText",
 	props: {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarVirtualText.vue.script.js","names":[],"sources":["../../../src/components/ScalarVirtualText/ScalarVirtualText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    /** Text to display */\n    text: string\n    /**\n     * Height of each line\n     * @default 20\n     */\n    lineHeight?: number\n    containerClass?: string\n    contentClass?: string\n    lineClass?: string\n  }>(),\n  {\n    lineHeight: 20,\n    containerClass: '',\n    contentClass: '',\n    lineClass: '',\n  },\n)\n\nconst containerRef = ref<HTMLElement | null>(null)\nconst contentRef = ref<HTMLElement | null>(null)\nconst scrollPosition = ref(0)\nconst containerHeight = ref(0)\n\n/** Array of text broken into lines */\nconst lines = computed(() => props.text.split('\\n'))\n/**\n * Total height of all lines combined\n *\n * TODO: there is a problem with this calculation which screws up the scrollbar a bit\n */\nconst totalHeight = computed(() => lines.value.length * props.lineHeight)\n\n/** Index of the first visible line */\nconst visibleStartIndex = computed(() =>\n  Math.floor(scrollPosition.value / props.lineHeight),\n)\n\n/** Index of the last visible line */\nconst visibleEndIndex = computed(() =>\n  Math.min(\n    Math.ceil(\n      (scrollPosition.value + containerHeight.value) / props.lineHeight,\n    ),\n    lines.value.length,\n  ),\n)\n\n/** Array of visible lines, including buffer for smooth scrolling */\nconst visibleLines = computed(() => {\n  const buffer = 10\n  const start = Math.max(0, visibleStartIndex.value - buffer)\n  const end = Math.min(lines.value.length, visibleEndIndex.value + buffer)\n\n  return lines.value.slice(start, end)\n})\n\n/** Style object for the content container, controls \"scrolling\" */\nconst contentStyle = computed(() => ({\n  height: `${totalHeight.value}px`,\n  transform: `translateY(${Math.max(0, visibleStartIndex.value - 10) * props.lineHeight}px)`,\n}))\n\n/** Updates the scroll position when the container is scrolled */\nconst handleScroll = () =>\n  containerRef.value && (scrollPosition.value = containerRef.value.scrollTop)\n\n/** Updates the container height when the window is resized */\nconst updateContainerHeight = () =>\n  containerRef.value &&\n  (containerHeight.value = containerRef.value.clientHeight)\n\nonMounted(() => {\n  updateContainerHeight()\n  window.addEventListener('resize', updateContainerHeight)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('resize', updateContainerHeight)\n})\n\nwatchEffect(() => {\n  if (!contentRef.value) {\n    return\n  }\n\n  contentRef.value.style.transform = `translateY(${Math.max(0, visibleStartIndex.value - 10) * props.lineHeight}px)`\n})\n</script>\n\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"scalar-virtual-text overflow-auto\"\n    :class=\"containerClass\"\n    @scroll=\"handleScroll\">\n    <code\n      ref=\"contentRef\"\n      class=\"scalar-virtual-text-content\"\n      :class=\"contentClass\"\n      :style=\"contentStyle\">\n      <div\n        v-for=\"(line, index) in visibleLines\"\n        :key=\"visibleStartIndex + index\"\n        class=\"scalar-virtual-text-line\"\n        :class=\"lineClass\"\n        :style=\"{\n          height: `${props.lineHeight}px`,\n          lineHeight: `${props.lineHeight}px`,\n        }\">\n        {{ line }}\n      </div>\n    </code>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;EAGA,MAAM,QAAQ;EAqBd,MAAM,eAAe,IAAwB,KAAI;EACjD,MAAM,aAAa,IAAwB,KAAI;EAC/C,MAAM,iBAAiB,IAAI,EAAC;EAC5B,MAAM,kBAAkB,IAAI,EAAC;;EAG7B,MAAM,QAAQ,eAAe,MAAM,KAAK,MAAM,KAAK,CAAA;;;;;;EAMnD,MAAM,cAAc,eAAe,MAAM,MAAM,SAAS,MAAM,WAAU;;EAGxE,MAAM,oBAAoB,eACxB,KAAK,MAAM,eAAe,QAAQ,MAAM,WAAW,CACrD;;EAGA,MAAM,kBAAkB,eACtB,KAAK,IACH,KAAK,MACF,eAAe,QAAQ,gBAAgB,SAAS,MAAM,WACxD,EACD,MAAM,MAAM,OACb,CACH;;EAGA,MAAM,eAAe,eAAe;GAClC,MAAM,SAAS;GACf,MAAM,QAAQ,KAAK,IAAI,GAAG,kBAAkB,QAAQ,OAAM;GAC1D,MAAM,MAAM,KAAK,IAAI,MAAM,MAAM,QAAQ,gBAAgB,QAAQ,OAAM;AAEvE,UAAO,MAAM,MAAM,MAAM,OAAO,IAAG;IACpC;;EAGD,MAAM,eAAe,gBAAgB;GACnC,QAAQ,GAAG,YAAY,MAAM;GAC7B,WAAW,cAAc,KAAK,IAAI,GAAG,kBAAkB,QAAQ,GAAG,GAAG,MAAM,WAAW;GACvF,EAAC;;EAGF,MAAM,qBACJ,aAAa,UAAU,eAAe,QAAQ,aAAa,MAAM;;EAGnE,MAAM,8BACJ,aAAa,UACZ,gBAAgB,QAAQ,aAAa,MAAM;AAE9C,kBAAgB;AACd,0BAAsB;AACtB,UAAO,iBAAiB,UAAU,sBAAqB;IACxD;AAED,wBAAsB;AACpB,UAAO,oBAAoB,UAAU,sBAAqB;IAC3D;AAED,oBAAkB;AAChB,OAAI,CAAC,WAAW,MACd;AAGF,cAAW,MAAM,MAAM,YAAY,cAAc,KAAK,IAAI,GAAG,kBAAkB,QAAQ,GAAG,GAAG,MAAM,WAAW;IAC/G;;uBAIC,mBAsBM,OAAA;aArBA;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,qCACE,QAAA,eAAc,CAAA;IACrB,UAAQ;OACT,mBAgBO,QAAA;aAfD;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,+BACE,QAAA,aAAY,CAAA;IACnB,OAAK,eAAE,aAAA,MAAY;yBACpB,mBAUM,UAAA,MAAA,WAToB,aAAA,QAAhB,MAAM,UAAK;wBADrB,mBAUM,OAAA;KARH,KAAK,kBAAA,QAAoB;KAC1B,OAAK,eAAA,CAAC,4BACE,QAAA,UAAS,CAAA;KAChB,OAAK,eAAA;iBAAyB,MAAM,WAAU;qBAA+B,MAAM,WAAU;;uBAI3F,KAAI,EAAA,EAAA"}
+{"version":3,"file":"ScalarVirtualText.vue.script.js","names":[],"sources":["../../../src/components/ScalarVirtualText/ScalarVirtualText.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Virtual Text component\n *\n * Renders large blocks of text efficiently using virtualized scrolling.\n * Only the visible lines are rendered to the DOM.\n *\n * @example\n * <ScalarVirtualText text=\"line1\\nline2\\nline3\" :lineHeight=\"20\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    /** Text to display */\n    text: string\n    /**\n     * Height of each line\n     * @default 20\n     */\n    lineHeight?: number\n    containerClass?: string\n    contentClass?: string\n    lineClass?: string\n  }>(),\n  {\n    lineHeight: 20,\n    containerClass: '',\n    contentClass: '',\n    lineClass: '',\n  },\n)\n\nconst containerRef = ref<HTMLElement | null>(null)\nconst contentRef = ref<HTMLElement | null>(null)\nconst scrollPosition = ref(0)\nconst containerHeight = ref(0)\n\n/** Array of text broken into lines */\nconst lines = computed(() => props.text.split('\\n'))\n/**\n * Total height of all lines combined\n *\n * TODO: there is a problem with this calculation which screws up the scrollbar a bit\n */\nconst totalHeight = computed(() => lines.value.length * props.lineHeight)\n\n/** Index of the first visible line */\nconst visibleStartIndex = computed(() =>\n  Math.floor(scrollPosition.value / props.lineHeight),\n)\n\n/** Index of the last visible line */\nconst visibleEndIndex = computed(() =>\n  Math.min(\n    Math.ceil(\n      (scrollPosition.value + containerHeight.value) / props.lineHeight,\n    ),\n    lines.value.length,\n  ),\n)\n\n/** Array of visible lines, including buffer for smooth scrolling */\nconst visibleLines = computed(() => {\n  const buffer = 10\n  const start = Math.max(0, visibleStartIndex.value - buffer)\n  const end = Math.min(lines.value.length, visibleEndIndex.value + buffer)\n\n  return lines.value.slice(start, end)\n})\n\n/** Style object for the content container, controls \"scrolling\" */\nconst contentStyle = computed(() => ({\n  height: `${totalHeight.value}px`,\n  transform: `translateY(${Math.max(0, visibleStartIndex.value - 10) * props.lineHeight}px)`,\n}))\n\n/** Updates the scroll position when the container is scrolled */\nconst handleScroll = () =>\n  containerRef.value && (scrollPosition.value = containerRef.value.scrollTop)\n\n/** Updates the container height when the window is resized */\nconst updateContainerHeight = () =>\n  containerRef.value &&\n  (containerHeight.value = containerRef.value.clientHeight)\n\nonMounted(() => {\n  updateContainerHeight()\n  window.addEventListener('resize', updateContainerHeight)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('resize', updateContainerHeight)\n})\n\nwatchEffect(() => {\n  if (!contentRef.value) {\n    return\n  }\n\n  contentRef.value.style.transform = `translateY(${Math.max(0, visibleStartIndex.value - 10) * props.lineHeight}px)`\n})\n</script>\n\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"scalar-virtual-text overflow-auto\"\n    :class=\"containerClass\"\n    @scroll=\"handleScroll\">\n    <code\n      ref=\"contentRef\"\n      class=\"scalar-virtual-text-content\"\n      :class=\"contentClass\"\n      :style=\"contentStyle\">\n      <div\n        v-for=\"(line, index) in visibleLines\"\n        :key=\"visibleStartIndex + index\"\n        class=\"scalar-virtual-text-line\"\n        :class=\"lineClass\"\n        :style=\"{\n          height: `${props.lineHeight}px`,\n          lineHeight: `${props.lineHeight}px`,\n        }\">\n        {{ line }}\n      </div>\n    </code>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;EAeA,MAAM,QAAQ;EAqBd,MAAM,eAAe,IAAwB,KAAI;EACjD,MAAM,aAAa,IAAwB,KAAI;EAC/C,MAAM,iBAAiB,IAAI,EAAC;EAC5B,MAAM,kBAAkB,IAAI,EAAC;;EAG7B,MAAM,QAAQ,eAAe,MAAM,KAAK,MAAM,KAAK,CAAA;;;;;;EAMnD,MAAM,cAAc,eAAe,MAAM,MAAM,SAAS,MAAM,WAAU;;EAGxE,MAAM,oBAAoB,eACxB,KAAK,MAAM,eAAe,QAAQ,MAAM,WAAW,CACrD;;EAGA,MAAM,kBAAkB,eACtB,KAAK,IACH,KAAK,MACF,eAAe,QAAQ,gBAAgB,SAAS,MAAM,WACxD,EACD,MAAM,MAAM,OACb,CACH;;EAGA,MAAM,eAAe,eAAe;GAClC,MAAM,SAAS;GACf,MAAM,QAAQ,KAAK,IAAI,GAAG,kBAAkB,QAAQ,OAAM;GAC1D,MAAM,MAAM,KAAK,IAAI,MAAM,MAAM,QAAQ,gBAAgB,QAAQ,OAAM;AAEvE,UAAO,MAAM,MAAM,MAAM,OAAO,IAAG;IACpC;;EAGD,MAAM,eAAe,gBAAgB;GACnC,QAAQ,GAAG,YAAY,MAAM;GAC7B,WAAW,cAAc,KAAK,IAAI,GAAG,kBAAkB,QAAQ,GAAG,GAAG,MAAM,WAAW;GACvF,EAAC;;EAGF,MAAM,qBACJ,aAAa,UAAU,eAAe,QAAQ,aAAa,MAAM;;EAGnE,MAAM,8BACJ,aAAa,UACZ,gBAAgB,QAAQ,aAAa,MAAM;AAE9C,kBAAgB;AACd,0BAAsB;AACtB,UAAO,iBAAiB,UAAU,sBAAqB;IACxD;AAED,wBAAsB;AACpB,UAAO,oBAAoB,UAAU,sBAAqB;IAC3D;AAED,oBAAkB;AAChB,OAAI,CAAC,WAAW,MACd;AAGF,cAAW,MAAM,MAAM,YAAY,cAAc,KAAK,IAAI,GAAG,kBAAkB,QAAQ,GAAG,GAAG,MAAM,WAAW;IAC/G;;uBAIC,mBAsBM,OAAA;aArBA;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,qCACE,QAAA,eAAc,CAAA;IACrB,UAAQ;OACT,mBAgBO,QAAA;aAfD;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,+BACE,QAAA,aAAY,CAAA;IACnB,OAAK,eAAE,aAAA,MAAY;yBACpB,mBAUM,UAAA,MAAA,WAToB,aAAA,QAAhB,MAAM,UAAK;wBADrB,mBAUM,OAAA;KARH,KAAK,kBAAA,QAAoB;KAC1B,OAAK,eAAA,CAAC,4BACE,QAAA,UAAS,CAAA;KAChB,OAAK,eAAA;iBAAyB,MAAM,WAAU;qBAA+B,MAAM,WAAU;;uBAI3F,KAAI,EAAA,EAAA"}

package/dist/style.css

@@ -1005,19 +1005,19 @@ img,
 }
 }
 /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
-.scalar-modal-layout[data-v-c36b47da] {
-  animation: .3s ease-in-out forwards fadein-layout-c36b47da;
+.scalar-modal-layout[data-v-5bb1dcc2] {
+  animation: .3s ease-in-out forwards fadein-layout-5bb1dcc2;
 }
-.scalar-modal[data-v-c36b47da] {
+.scalar-modal[data-v-5bb1dcc2] {
   box-shadow: var(--scalar-shadow-2);
-  animation: .3s ease-in-out .1s forwards fadein-modal-c36b47da;
+  animation: .3s ease-in-out .1s forwards fadein-modal-5bb1dcc2;
   transform: translate3d(0, 10px, 0);
 }
-.scalar-modal-layout-full[data-v-c36b47da] {
+.scalar-modal-layout-full[data-v-5bb1dcc2] {
   opacity: 1 !important;
   background: none !important;
 }
-.modal-content-search .modal-body[data-v-c36b47da] {
+.modal-content-search .modal-body[data-v-5bb1dcc2] {
   flex-direction: column;
   max-height: 440px;
   padding: 0;
@@ -1025,12 +1025,12 @@ img,
   overflow: hidden;
 }
 @media (max-width: 720px) and (max-height: 480px) {
-.scalar-modal-layout .scalar-modal[data-v-c36b47da] {
+.scalar-modal-layout .scalar-modal[data-v-5bb1dcc2] {
     max-height: 90svh;
     margin-top: 5svh;
 }
 }
-@keyframes fadein-layout-c36b47da {
+@keyframes fadein-layout-5bb1dcc2 {
 0% {
     opacity: 0;
 }
@@ -1038,7 +1038,7 @@ img,
     opacity: 1;
 }
 }
-@keyframes fadein-modal-c36b47da {
+@keyframes fadein-modal-5bb1dcc2 {
 0% {
     opacity: 0;
     transform: translate3d(0, 10px, 0);
@@ -1048,10 +1048,10 @@ img,
     transform: translate3d(0, 0, 0);
 }
 }
-.full-size-styles[data-v-c36b47da] {
+.full-size-styles[data-v-5bb1dcc2] {
   margin: initial;
   border-right: var(--scalar-border-width) solid var(--scalar-border-color);
-  animation: .3s ease-in-out forwards fadein-layout-c36b47da;
+  animation: .3s ease-in-out forwards fadein-layout-5bb1dcc2;
   left: 0;
   transform: translate3d(0, 0, 0);
   background-color: var(--scalar-background-1) !important;
@@ -1062,11 +1062,11 @@ img,
   top: 0 !important;
 }
 @media (min-width: 800px) {
-.full-size-styles[data-v-c36b47da] {
+.full-size-styles[data-v-5bb1dcc2] {
     width: 50dvw !important;
 }
 }
-.full-size-styles[data-v-c36b47da]:after {
+.full-size-styles[data-v-5bb1dcc2]:after {
   content: "";
   width: 50dvw;
   height: 100dvh;

package/package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/components"
   },
-  "version": "0.21.0",
+  "version": "0.21.2",
   "engines": {
     "node": ">=22"
   },
@@ -41,8 +41,8 @@
     "vue-component-type-helpers": "^3.2.2",
     "@scalar/code-highlight": "0.3.1",
     "@scalar/helpers": "0.4.2",
+    "@scalar/icons": "0.7.1",
     "@scalar/themes": "0.15.1",
-    "@scalar/icons": "0.6.4",
     "@scalar/use-hooks": "0.4.1"
   },
   "devDependencies": {