@scalar/components 0.20.12 → 0.21.0

package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.script.js

@@ -0,0 +1,176 @@
+import { filterByOptionLabel } from "./filter-by-option-label.js";
+import ScalarListboxCheckbox_default from "../ScalarListbox/ScalarListboxCheckbox.vue.js";
+import ScalarComboboxOption_default from "./ScalarComboboxOption.vue.js";
+import ScalarComboboxOptionGroup_default from "./ScalarComboboxOptionGroup.vue.js";
+import { isGroups } from "./types.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, useModel, useSlots, vModelText, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { ScalarIconMagnifyingGlass, ScalarIconPlus } from "@scalar/icons";
+//#region src/components/ScalarCombobox/ScalarComboboxOptions.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "relative flex" };
+var _hoisted_2 = ["aria-activedescendant", "placeholder"];
+var _hoisted_3 = ["aria-multiselectable"];
+var _hoisted_4 = { class: "inline-block min-w-0 flex-1 truncate text-c-1" };
+var ScalarComboboxOptions_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarComboboxOptions",
+	props: /* @__PURE__ */ mergeModels({
+		options: {},
+		placeholder: {},
+		filterFn: {
+			type: Function,
+			default: filterByOptionLabel
+		},
+		multiselect: { type: Boolean }
+	}, {
+		"modelValue": { default: [] },
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["add"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const model = useModel(__props, "modelValue");
+		const slots = useSlots();
+		/** A unique ID for the combobox */
+		const id = `scalar-combobox-items-${useId()}`;
+		/** A static option entry for the "Add a new option" option */
+		const addOption = {
+			id: `${useId()}-add`,
+			label: "Add a new option"
+		};
+		/** Generate a unique ID for an option */
+		function getOptionId(option) {
+			return `${id}-${option.id}`;
+		}
+		/** A flat list of all options */
+		const options = computed(() => isGroups(__props.options) ? __props.options.flatMap((group) => group.options) : __props.options);
+		/** An list of all groups */
+		const groups = computed(() => isGroups(__props.options) ? __props.options : [{
+			label: "",
+			options: __props.options
+		}]);
+		const query = ref("");
+		const activeRef = ref(model.value?.[0] ?? options.value[0]);
+		onMounted(() => {
+			query.value = "";
+			activeRef.value = model.value?.[0] ?? options.value[0];
+			if (model.value[0]) setTimeout(() => {
+				const value = model.value[0];
+				if (!value) return;
+				document?.getElementById(getOptionId(value))?.scrollIntoView({ block: "nearest" });
+			}, 10);
+		});
+		watch(() => query.value, () => activeRef.value = withAdd.value[0]);
+		/** The filtered list of options */
+		const filtered = computed(() => __props.filterFn(query.value, options.value, groups.value));
+		/** The list of filtered options with the "Add a new option" option */
+		const withAdd = computed(() => slots.add ? [...filtered.value, addOption] : filtered.value);
+		function toggleSelected(option) {
+			if (!option) return;
+			if (option.id === addOption.id) {
+				addNew();
+				return;
+			}
+			if (__props.multiselect) if (model.value.some((o) => o.id === option.id)) model.value = model.value.filter((o) => o.id !== option.id);
+			else model.value = [...model.value, options.value.find((o) => o.id === option.id)];
+			else model.value = [options.value.find((o) => o.id === option.id)];
+		}
+		function moveActive(dir) {
+			const list = withAdd.value;
+			const nextIdx = list.findIndex((option) => option.id === activeRef.value?.id) + dir;
+			if (nextIdx < 0 || nextIdx > list.length - 1) return;
+			activeRef.value = list[nextIdx];
+			if (!activeRef.value) return;
+			document?.getElementById(getOptionId(activeRef.value))?.scrollIntoView({
+				behavior: "smooth",
+				block: "nearest"
+			});
+		}
+		function addNew() {
+			emit("add");
+			query.value = "";
+		}
+		const input = ref(null);
+		onMounted(() => setTimeout(() => input.value?.focus(), 0));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", _hoisted_1, [createVNode(unref(ScalarIconMagnifyingGlass), { class: "pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-c-3 size-4" }), withDirectives(createElementVNode("input", {
+				ref_key: "input",
+				ref: input,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
+				"aria-activedescendant": activeRef.value ? getOptionId(activeRef.value) : void 0,
+				"aria-autocomplete": "list",
+				"aria-controls": id,
+				class: "min-w-0 flex-1 rounded border-0 py-2.5 pl-8 pr-3 leading-none text-c-1 -outline-offset-1",
+				"data-1p-ignore": "",
+				placeholder: __props.placeholder,
+				role: "combobox",
+				tabindex: "0",
+				type: "text",
+				onKeydown: [
+					_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => moveActive(1), ["prevent"]), ["down"])),
+					_cache[2] || (_cache[2] = withKeys(withModifiers(($event) => activeRef.value && toggleSelected(activeRef.value), ["prevent"]), ["enter"])),
+					_cache[3] || (_cache[3] = withKeys(withModifiers(($event) => moveActive(-1), ["prevent"]), ["up"]))
+				]
+			}, null, 40, _hoisted_2), [[vModelText, query.value]])]), withDirectives(createElementVNode("ul", {
+				id,
+				"aria-multiselectable": __props.multiselect,
+				class: "border-t p-0.75 custom-scroll overscroll-contain flex-1 min-h-0",
+				role: "listbox",
+				tabindex: "-1"
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(groups.value, (group, i) => {
+				return openBlock(), createBlock(ScalarComboboxOptionGroup_default, {
+					id: `${id}-group-${i}`,
+					key: i,
+					hidden: !group.options.some((o) => filtered.value.some((f) => f.id === o.id)) || !group.label
+				}, {
+					label: withCtx(() => [_ctx.$slots.group ? renderSlot(_ctx.$slots, "group", {
+						key: 0,
+						group
+					}) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(group.label), 1)], 64))]),
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(filtered.value, (option) => {
+						return openBlock(), createElementBlock(Fragment, { key: option.id }, [group.options.some((o) => o.id === option.id) ? (openBlock(), createBlock(ScalarComboboxOption_default, {
+							key: 0,
+							id: getOptionId(option),
+							active: activeRef.value?.id === option.id,
+							selected: model.value.some((o) => o.id === option.id),
+							onClick: ($event) => toggleSelected(option),
+							onMousedown: _cache[4] || (_cache[4] = withModifiers(() => {}, ["prevent"])),
+							onMouseenter: ($event) => activeRef.value = option
+						}, {
+							default: withCtx(({ active, selected }) => [_ctx.$slots.option ? renderSlot(_ctx.$slots, "option", {
+								key: 0,
+								active,
+								option,
+								selected
+							}) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(unref(ScalarListboxCheckbox_default), {
+								multiselect: __props.multiselect,
+								selected: model.value.some((o) => o.id === option.id)
+							}, null, 8, ["multiselect", "selected"]), createElementVNode("span", _hoisted_4, toDisplayString(option.label), 1)], 64))]),
+							_: 2
+						}, 1032, [
+							"id",
+							"active",
+							"selected",
+							"onClick",
+							"onMouseenter"
+						])) : createCommentVNode("", true)], 64);
+					}), 128))]),
+					_: 2
+				}, 1032, ["id", "hidden"]);
+			}), 128)), slots.add ? (openBlock(), createBlock(ScalarComboboxOption_default, {
+				key: 0,
+				id: getOptionId(addOption),
+				active: activeRef.value?.id === addOption.id,
+				onClick: addNew,
+				onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"])),
+				onMouseenter: _cache[6] || (_cache[6] = ($event) => activeRef.value = addOption)
+			}, {
+				default: withCtx(({ active }) => [createVNode(unref(ScalarIconPlus), { class: "size-4 p-px" }), renderSlot(_ctx.$slots, "add", { active })]),
+				_: 3
+			}, 8, ["id", "active"])) : createCommentVNode("", true)], 8, _hoisted_3), [[vShow, filtered.value.length || slots.add]])], 64);
+		};
+	}
+});
+//#endregion
+export { ScalarComboboxOptions_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarComboboxOptions.vue.script.js.map

package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarComboboxOptions.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"sourcesContent":["<!-- prettier-ignore-attribute generic -->\n<script\n  setup\n  lang=\"ts\"\n  generic=\"O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>\">\nimport { filterByOptionLabel } from '@/components/ScalarCombobox/filter-by-option-label'\nimport { ScalarIconMagnifyingGlass, ScalarIconPlus } from '@scalar/icons'\nimport { computed, onMounted, ref, useId, watch } from 'vue'\n\nimport { ScalarListboxCheckbox } from '../ScalarListbox'\nimport ComboboxOption from './ScalarComboboxOption.vue'\nimport ComboboxOptionGroup from './ScalarComboboxOptionGroup.vue'\nimport {\n  type ComboboxEmits,\n  type ComboboxSlots,\n  type FilterFunction,\n  type Option,\n  type OptionGroup,\n  type OptionsOrGroups,\n  isGroups,\n} from './types'\n\nconst {\n  options: optionsOrGroups,\n  placeholder,\n  filterFn = filterByOptionLabel,\n  multiselect,\n} = defineProps<{\n  /** The options to display in the combobox */\n  options: OptionsOrGroups<O, G>\n  /** The placeholder text to display in the combobox */\n  placeholder?: string\n  /**\n   * A function to filter the options based on a query,\n   * if not provided, the options will be filtered by option label\n   *\n   * @see {@link FilterFunction} for more information\n   */\n  filterFn?: FilterFunction<O, G>\n  /** Whether the combobox is in multiselect mode, defaults to false */\n  multiselect?: boolean\n}>()\n\nconst emit = defineEmits<ComboboxEmits>()\n\nconst model = defineModel<O[]>({ default: [] })\n\nconst slots = defineSlots<Omit<ComboboxSlots<O, G>, 'default'>>()\n\ndefineOptions({ inheritAttrs: false })\n\n/** A unique ID for the combobox */\nconst id = `scalar-combobox-items-${useId()}`\n\n/** A static option entry for the \"Add a new option\" option */\nconst addOption: Option = { id: `${useId()}-add`, label: 'Add a new option' }\n\n/** Generate a unique ID for an option */\nfunction getOptionId(option: Option) {\n  return `${id}-${option.id}`\n}\n\n/** A flat list of all options */\nconst options = computed<O[]>(() =>\n  isGroups(optionsOrGroups)\n    ? optionsOrGroups.flatMap((group) => group.options)\n    : optionsOrGroups,\n)\n\n/** An list of all groups */\nconst groups = computed<G[]>(\n  () =>\n    isGroups(optionsOrGroups)\n      ? optionsOrGroups // G extends OptionGroup<O>\n      : /*\n          We know G is an unextended OptionGroup<O> here because of the\n          structure of the component props so we can cast it to G\n        */\n        [{ label: '', options: optionsOrGroups } as G], // G is OptionGroup<O>\n)\n\nconst query = ref<string>('')\nconst activeRef = ref<Option | undefined>(model.value?.[0] ?? options.value[0])\n\n// Clear the query on open and close\nonMounted(() => {\n  // Clear the query\n  query.value = ''\n\n  // Set the active option to the selected option or the first option\n  activeRef.value = model.value?.[0] ?? options.value[0]\n\n  // Scroll to the selected option\n  const selected = model.value[0]\n  if (selected) {\n    setTimeout(() => {\n      const value = model.value[0]\n      if (!value) {\n        return\n      }\n\n      document\n        ?.getElementById(getOptionId(value))\n        ?.scrollIntoView({ block: 'nearest' })\n    }, 10)\n  }\n})\n\n// Set the top option as active when searching\nwatch(\n  () => query.value,\n  () => (activeRef.value = withAdd.value[0]),\n)\n\n/** The filtered list of options */\nconst filtered = computed<O[]>(() =>\n  filterFn(query.value, options.value, groups.value),\n)\n\n/** The list of filtered options with the \"Add a new option\" option */\nconst withAdd = computed<Option[]>(() =>\n  slots.add ? [...filtered.value, addOption] : filtered.value,\n)\n\nfunction toggleSelected(option: Option | undefined) {\n  if (!option) {\n    return\n  }\n\n  if (option.id === addOption.id) {\n    addNew()\n    return\n  }\n\n  if (multiselect) {\n    // Remove from selection list\n    if (model.value.some((o) => o.id === option.id)) {\n      model.value = model.value.filter((o) => o.id !== option.id)\n    }\n    // Add to selection list\n    else {\n      model.value = [\n        ...model.value,\n        options.value.find((o) => o.id === option.id)!,\n      ]\n    }\n  } else {\n    // Set selection for single select mode\n    model.value = [options.value.find((o) => o.id === option.id)!]\n  }\n}\n\nfunction moveActive(dir: 1 | -1) {\n  const list = withAdd.value\n\n  // Find active index\n  const activeIdx = list.findIndex(\n    (option) => option.id === activeRef.value?.id,\n  )\n\n  // Calculate next index and exit if it's out of bounds\n  const nextIdx = activeIdx + dir\n\n  if (nextIdx < 0 || nextIdx > list.length - 1) {\n    return\n  }\n\n  activeRef.value = list[nextIdx]! // We know it's in bounds from the check above\n\n  if (!activeRef.value) {\n    return\n  }\n\n  // Scroll to the active option\n  document?.getElementById(getOptionId(activeRef.value))?.scrollIntoView({\n    behavior: 'smooth',\n    block: 'nearest',\n  })\n}\n\nfunction addNew() {\n  emit('add')\n  query.value = ''\n}\n\n// Manual autofocus for the input\nconst input = ref<HTMLInputElement | null>(null)\n\n// This must be a setTimeout to ensure there is no scroll jump. nextTick does not work here.\nonMounted(() => setTimeout(() => input.value?.focus(), 0))\n</script>\n<template>\n  <div class=\"relative flex\">\n    <ScalarIconMagnifyingGlass\n      class=\"pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-c-3 size-4\" />\n    <input\n      ref=\"input\"\n      v-model=\"query\"\n      :aria-activedescendant=\"activeRef ? getOptionId(activeRef) : undefined\"\n      aria-autocomplete=\"list\"\n      :aria-controls=\"id\"\n      class=\"min-w-0 flex-1 rounded border-0 py-2.5 pl-8 pr-3 leading-none text-c-1 -outline-offset-1\"\n      data-1p-ignore\n      :placeholder\n      role=\"combobox\"\n      tabindex=\"0\"\n      type=\"text\"\n      @keydown.down.prevent=\"moveActive(1)\"\n      @keydown.enter.prevent=\"activeRef && toggleSelected(activeRef)\"\n      @keydown.up.prevent=\"moveActive(-1)\" />\n  </div>\n  <ul\n    v-show=\"filtered.length || slots.add\"\n    :id=\"id\"\n    :aria-multiselectable=\"multiselect\"\n    class=\"border-t p-0.75 custom-scroll overscroll-contain flex-1 min-h-0\"\n    role=\"listbox\"\n    tabindex=\"-1\">\n    <ComboboxOptionGroup\n      v-for=\"(group, i) in groups\"\n      :id=\"`${id}-group-${i}`\"\n      :key=\"i\"\n      :hidden=\"\n        // Only show the group label if there are some results\n        !group.options.some((o) => filtered.some((f) => f.id === o.id)) ||\n        // And it has a label\n        !group.label\n      \">\n      <template #label>\n        <slot\n          v-if=\"$slots.group\"\n          :group\n          name=\"group\" />\n        <template v-else>\n          {{ group.label }}\n        </template>\n      </template>\n      <template\n        v-for=\"option in filtered\"\n        :key=\"option.id\">\n        <ComboboxOption\n          v-if=\"group.options.some((o) => o.id === option.id)\"\n          :id=\"getOptionId(option)\"\n          v-slot=\"{ active, selected }\"\n          :active=\"activeRef?.id === option.id\"\n          :selected=\"model.some((o) => o.id === option.id)\"\n          @click=\"toggleSelected(option)\"\n          @mousedown.prevent\n          @mouseenter=\"activeRef = option\">\n          <slot\n            v-if=\"$slots.option\"\n            :active\n            name=\"option\"\n            :option\n            :selected />\n          <template v-else>\n            <ScalarListboxCheckbox\n              :multiselect\n              :selected=\"model.some((o) => o.id === option.id)\" />\n            <span class=\"inline-block min-w-0 flex-1 truncate text-c-1\">\n              {{ option.label }}\n            </span>\n          </template>\n        </ComboboxOption>\n      </template>\n    </ComboboxOptionGroup>\n    <ComboboxOption\n      v-if=\"slots.add\"\n      :id=\"getOptionId(addOption)\"\n      v-slot=\"{ active }\"\n      :active=\"activeRef?.id === addOption.id\"\n      @click=\"addNew\"\n      @mousedown.prevent\n      @mouseenter=\"activeRef = addOption\">\n      <ScalarIconPlus class=\"size-4 p-px\" />\n      <slot\n        :active\n        name=\"add\" />\n    </ComboboxOption>\n  </ul>\n</template>\n"],"mappings":"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"}

package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.js

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

package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarComboboxPopover.vue.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n  type ScalarFloatingOptions,\n} from '../ScalarFloating'\nimport type { ScalarPopoverSlots } from '../ScalarPopover'\n\ndefineProps<ScalarFloatingOptions>()\n\ndefineSlots<ScalarPopoverSlots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Expose the popover button so we can close the popup */\nconst popoverButtonRef = ref<typeof PopoverButton | null>(null)\n\n/** Open the popover of the up or down arrows are pressed */\nconst handleKeydown = (e: KeyboardEvent) => {\n  if (!['ArrowUp', 'ArrowDown'].includes(e.key)) {\n    return\n  }\n  e.preventDefault()\n  e.target?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))\n}\n\ndefineExpose({ popoverButtonRef })\n</script>\n<template>\n  <Popover\n    v-slot=\"{ open }\"\n    as=\"template\">\n    <ScalarFloating v-bind=\"$props\">\n      <PopoverButton\n        ref=\"popoverButtonRef\"\n        as=\"template\"\n        @keydown=\"handleKeydown\">\n        <slot :open />\n      </PopoverButton>\n      <template\n        v-if=\"open\"\n        #floating=\"{ width }\">\n        <PopoverPanel\n          v-slot=\"{ close }\"\n          :style=\"{ width }\"\n          v-bind=\"\n            cx('relative flex flex-col max-h-[inherit] w-40 rounded text-sm')\n          \">\n          <slot\n            :close\n            name=\"popover\"\n            :open />\n          <ScalarFloatingBackdrop />\n        </PopoverPanel>\n      </template>\n    </ScalarFloating>\n  </Popover>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.script.js

@@ -0,0 +1,65 @@
+import ScalarFloating_default from "../ScalarFloating/ScalarFloating.vue.js";
+import ScalarFloatingBackdrop_default from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createSlots, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, ref, renderSlot, unref, withCtx } from "vue";
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
+//#region src/components/ScalarCombobox/ScalarComboboxPopover.vue?vue&type=script&setup=true&lang.ts
+var ScalarComboboxPopover_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarComboboxPopover",
+	props: {
+		placement: {},
+		offset: { type: [
+			Number,
+			Object,
+			Function
+		] },
+		resize: { type: Boolean },
+		target: {},
+		middleware: {},
+		teleport: { type: [Boolean, String] }
+	},
+	setup(__props, { expose: __expose }) {
+		const { cx } = useBindCx();
+		/** Expose the popover button so we can close the popup */
+		const popoverButtonRef = ref(null);
+		/** Open the popover of the up or down arrows are pressed */
+		const handleKeydown = (e) => {
+			if (!["ArrowUp", "ArrowDown"].includes(e.key)) return;
+			e.preventDefault();
+			e.target?.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
+		};
+		__expose({ popoverButtonRef });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Popover), { as: "template" }, {
+				default: withCtx(({ open }) => [createVNode(unref(ScalarFloating_default), normalizeProps(guardReactiveProps(_ctx.$props)), createSlots({
+					default: withCtx(() => [createVNode(unref(PopoverButton), {
+						ref_key: "popoverButtonRef",
+						ref: popoverButtonRef,
+						as: "template",
+						onKeydown: handleKeydown
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default", { open })]),
+						_: 2
+					}, 1536)]),
+					_: 2
+				}, [open ? {
+					name: "floating",
+					fn: withCtx(({ width }) => [createVNode(unref(PopoverPanel), mergeProps({ style: { width } }, unref(cx)("relative flex flex-col max-h-[inherit] w-40 rounded text-sm")), {
+						default: withCtx(({ close }) => [renderSlot(_ctx.$slots, "popover", {
+							close,
+							open
+						}), createVNode(unref(ScalarFloatingBackdrop_default))]),
+						_: 2
+					}, 1040, ["style"])]),
+					key: "0"
+				} : void 0]), 1040)]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { ScalarComboboxPopover_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarComboboxPopover.vue.script.js.map

package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarComboboxPopover.vue.script.js","names":["$props"],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n  type ScalarFloatingOptions,\n} from '../ScalarFloating'\nimport type { ScalarPopoverSlots } from '../ScalarPopover'\n\ndefineProps<ScalarFloatingOptions>()\n\ndefineSlots<ScalarPopoverSlots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Expose the popover button so we can close the popup */\nconst popoverButtonRef = ref<typeof PopoverButton | null>(null)\n\n/** Open the popover of the up or down arrows are pressed */\nconst handleKeydown = (e: KeyboardEvent) => {\n  if (!['ArrowUp', 'ArrowDown'].includes(e.key)) {\n    return\n  }\n  e.preventDefault()\n  e.target?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))\n}\n\ndefineExpose({ popoverButtonRef })\n</script>\n<template>\n  <Popover\n    v-slot=\"{ open }\"\n    as=\"template\">\n    <ScalarFloating v-bind=\"$props\">\n      <PopoverButton\n        ref=\"popoverButtonRef\"\n        as=\"template\"\n        @keydown=\"handleKeydown\">\n        <slot :open />\n      </PopoverButton>\n      <template\n        v-if=\"open\"\n        #floating=\"{ width }\">\n        <PopoverPanel\n          v-slot=\"{ close }\"\n          :style=\"{ width }\"\n          v-bind=\"\n            cx('relative flex flex-col max-h-[inherit] w-40 rounded text-sm')\n          \">\n          <slot\n            :close\n            name=\"popover\"\n            :open />\n          <ScalarFloatingBackdrop />\n        </PopoverPanel>\n      </template>\n    </ScalarFloating>\n  </Popover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,EAAE,OAAO,WAAU;;EAGzB,MAAM,mBAAmB,IAAiC,KAAI;;EAG9D,MAAM,iBAAiB,MAAqB;AAC1C,OAAI,CAAC,CAAC,WAAW,YAAY,CAAC,SAAS,EAAE,IAAI,CAC3C;AAEF,KAAE,gBAAe;AACjB,KAAE,QAAQ,cAAc,IAAI,cAAc,WAAW,EAAE,KAAK,SAAS,CAAC,CAAA;;AAGxE,WAAa,EAAE,kBAAkB,CAAA;;uBAG/B,YA2BU,MAAA,QAAA,EAAA,EAzBR,IAAG,YAAU,EAAA;sBAwBI,EAzBP,WAAI,CAEd,YAuBiB,MAAA,uBAAA,EAAA,eAAA,mBAvBOA,KAAAA,OAAM,CAAA,EAAA,YAAA;4BAMZ,CALhB,YAKgB,MAAA,cAAA,EAAA;eAJV;MAAJ,KAAI;MACJ,IAAG;MACF,WAAS;;6BACI,CAAd,WAAc,KAAA,QAAA,WAAA,EAAP,MAAI,CAAA,CAAA,CAAA;;;;QAGL,OAAA;WACL;kBAYc,EAZF,YAAK,CAClB,YAWe,MAAA,aAAA,EAXf,WAWe,EATZ,OAAK,EAAI,OAAK,EAAA,EACM,MAAA,GAAE,CAAA,8DAAA,CAAA,EAAA;wBAMb,EARA,YAAK,CAKf,WAGU,KAAA,QAAA,WAAA;OAFP;OAEA;UACH,YAA0B,MAAA,+BAAA,CAAA,CAAA,CAAA"}

package/dist/components/ScalarCombobox/filter-by-option-label.d.ts

@@ -0,0 +1,3 @@
+import type { Option } from '../../components/ScalarListbox/types';
+export declare const filterByOptionLabel: <O extends Option>(query: string, options: O[]) => O[];
+//# sourceMappingURL=filter-by-option-label.d.ts.map

package/dist/components/ScalarCombobox/filter-by-option-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-by-option-label.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/filter-by-option-label.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAA;AAE9D,eAAO,MAAM,mBAAmB,GAAK,CAAC,SAAS,MAAM,SAAS,MAAM,WAAW,CAAC,EAAE,KAAG,CAAC,EAM3D,CAAA"}

package/dist/components/ScalarCombobox/filter-by-option-label.js

@@ -0,0 +1,10 @@
+//#region src/components/ScalarCombobox/filter-by-option-label.ts
+var filterByOptionLabel = ((query, options) => {
+	return query === "" ? options : options.filter((option) => {
+		return option.label.toLowerCase().includes(query.toLowerCase());
+	});
+});
+//#endregion
+export { filterByOptionLabel };
+
+//# sourceMappingURL=filter-by-option-label.js.map

package/dist/components/ScalarCombobox/filter-by-option-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-by-option-label.js","names":[],"sources":["../../../src/components/ScalarCombobox/filter-by-option-label.ts"],"sourcesContent":["import type { FilterFunction } from '@/components/ScalarCombobox/types'\nimport type { Option } from '@/components/ScalarListbox/types'\n\nexport const filterByOptionLabel = (<O extends Option>(query: string, options: O[]): O[] => {\n  return query === ''\n    ? options\n    : options.filter((option) => {\n        return option.label.toLowerCase().includes(query.toLowerCase())\n      })\n}) satisfies FilterFunction\n"],"mappings":";AAGA,IAAa,wBAA0C,OAAe,YAAsB;AAC1F,QAAO,UAAU,KACb,UACA,QAAQ,QAAQ,WAAW;AACzB,SAAO,OAAO,MAAM,aAAa,CAAC,SAAS,MAAM,aAAa,CAAC;GAC/D"}

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

@@ -1,4 +1,4 @@
-export { default as ScalarCombobox } from './ScalarCombobox.vue';
-export { default as ScalarComboboxMultiselect } from './ScalarComboboxMultiselect.vue';
-export type { Option as ScalarComboboxOption, OptionGroup as ScalarComboboxOptionGroup } from './types';
+export { default as ScalarCombobox } from './ScalarCombobox.vue.js';
+export { default as ScalarComboboxMultiselect } from './ScalarComboboxMultiselect.vue.js';
+export { type FilterFunction as ScalarComboboxFilterFunction, type Option as ScalarComboboxOption, type OptionGroup as ScalarComboboxOptionGroup, type OptionsOrGroups as ScalarComboboxOptionsOrGroups, isGroups as isScalarComboboxGroups, } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ScalarCombobox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,iCAAiC,CAAA;AACtF,YAAY,EAAE,MAAM,IAAI,oBAAoB,EAAE,WAAW,IAAI,yBAAyB,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,iCAAiC,CAAA;AACtF,OAAO,EACL,KAAK,cAAc,IAAI,4BAA4B,EACnD,KAAK,MAAM,IAAI,oBAAoB,EACnC,KAAK,WAAW,IAAI,yBAAyB,EAC7C,KAAK,eAAe,IAAI,6BAA6B,EACrD,QAAQ,IAAI,sBAAsB,GACnC,MAAM,SAAS,CAAA"}

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

@@ -7,6 +7,21 @@ export type OptionGroup<O extends Option = Option> = {
     options: O[];
 };
 export type OptionsOrGroups<O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>> = O[] | G[];
+/**
+ * Filters which options appear while searching. The combobox passes the
+ * current query, a flat list of every option (including those inside groups),
+ * and the group objects when the list is grouped (otherwise an empty array).
+ *
+ * @example Match option labels, case-insensitive (similar to the default combobox filter):
+ * ```ts
+ * const filterByLabel = ((query, options) =>
+ *   query === ''
+ *     ? options
+ *     : options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
+ * ) satisfies FilterFunction
+ * ```
+ */
+export type FilterFunction<O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>> = (query: string, options: O[], groups: G[]) => O[];
 /** Type guard to check if an array of options is an array of groups */
 export declare function isGroups(options: Option[] | OptionGroup[]): options is OptionGroup[];
 /** Available events emitted by the combobox */

package/dist/components/ScalarCombobox/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACnD,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,EAAE,CAAA;CACb,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,EAAE,CAAA;AAO7G,uEAAuE;AACvE,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,GAAG,OAAO,IAAI,WAAW,EAAE,CAKpF;AAED,+CAA+C;AAC/C,MAAM,MAAM,aAAa,GAAG;IAC1B,4DAA4D;IAC5D,GAAG,EAAE,EAAE,CAAA;CACR,CAAA;AAED,uCAAuC;AACvC,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI;IAChG,uDAAuD;IACvD,OAAO,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;IAC1C,8CAA8C;IAC9C,MAAM,CAAC,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,CAAC,CAAC;QAAC,MAAM,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;IAC1E,6CAA6C;IAC7C,KAAK,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,GAAG,OAAO,CAAA;IACpC,iEAAiE;IACjE,GAAG,CAAC,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;CAC1C,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACnD,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,EAAE,CAAA;CACb,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,EAAE,CAAA;AAE7G;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,CACjG,KAAK,EAAE,MAAM,EAEb,OAAO,EAAE,CAAC,EAAE,EAEZ,MAAM,EAAE,CAAC,EAAE,KACR,CAAC,EAAE,CAAA;AAOR,uEAAuE;AACvE,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,GAAG,OAAO,IAAI,WAAW,EAAE,CAKpF;AAED,+CAA+C;AAC/C,MAAM,MAAM,aAAa,GAAG;IAC1B,4DAA4D;IAC5D,GAAG,EAAE,EAAE,CAAA;CACR,CAAA;AAED,uCAAuC;AACvC,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI;IAChG,uDAAuD;IACvD,OAAO,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;IAC1C,8CAA8C;IAC9C,MAAM,CAAC,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,CAAC,CAAC;QAAC,MAAM,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;IAC1E,6CAA6C;IAC7C,KAAK,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,GAAG,OAAO,CAAA;IACpC,iEAAiE;IACjE,GAAG,CAAC,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;CAC1C,CAAA"}

package/dist/components/ScalarCombobox/types.js

@@ -0,0 +1,14 @@
+//#region src/components/ScalarCombobox/types.ts
+/** Type guard to check if an option is a group */
+function isGroup(option) {
+	return option?.options !== void 0;
+}
+/** Type guard to check if an array of options is an array of groups */
+function isGroups(options) {
+	if (!options[0]) return false;
+	return isGroup(options[0]);
+}
+//#endregion
+export { isGroups };
+
+//# sourceMappingURL=types.js.map

package/dist/components/ScalarCombobox/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/components/ScalarCombobox/types.ts"],"sourcesContent":["export type Option = {\n  id: string\n  label: string\n}\n\nexport type OptionGroup<O extends Option = Option> = {\n  label: string\n  options: O[]\n}\n\nexport type OptionsOrGroups<O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>> = O[] | G[]\n\n/**\n * Filters which options appear while searching. The combobox passes the\n * current query, a flat list of every option (including those inside groups),\n * and the group objects when the list is grouped (otherwise an empty array).\n *\n * @example Match option labels, case-insensitive (similar to the default combobox filter):\n * ```ts\n * const filterByLabel = ((query, options) =>\n *   query === ''\n *     ? options\n *     : options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))\n * ) satisfies FilterFunction\n * ```\n */\nexport type FilterFunction<O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>> = (\n  query: string,\n  /* All of the (flattened) options, if there are groups this will be all of the options from all of the groups */\n  options: O[],\n  /* If there are no groups this array will be empty, if there are groups this will be all of the groups including their options */\n  groups: G[],\n) => O[]\n\n/** Type guard to check if an option is a group */\nfunction isGroup(option: Option | OptionGroup | undefined): option is OptionGroup {\n  return (option as OptionGroup | undefined)?.options !== undefined\n}\n\n/** Type guard to check if an array of options is an array of groups */\nexport function isGroups(options: Option[] | OptionGroup[]): options is OptionGroup[] {\n  if (!options[0]) {\n    return false // No options to test, so we assume it's not a group\n  }\n  return isGroup(options[0])\n}\n\n/** Available events emitted by the combobox */\nexport type ComboboxEmits = {\n  /** Emitted when the \"Add a new option\" button is clicked */\n  add: []\n}\n\n/** Available slots for the combobox */\nexport type ComboboxSlots<O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>> = {\n  /** The reference element / trigger for the combobox */\n  default(props: { open: boolean }): unknown\n  /** A template to override the option label */\n  option?(props: { option: O; active: boolean; selected: boolean }): unknown\n  /** A template to override the group label */\n  group?(props: { group: G }): unknown\n  /** Creates an \"Add a new option\" button after the options list*/\n  add?(props: { active: boolean }): unknown\n}\n"],"mappings":";;AAmCA,SAAS,QAAQ,QAAiE;AAChF,QAAQ,QAAoC,YAAY,KAAA;;;AAI1D,SAAgB,SAAS,SAA6D;AACpF,KAAI,CAAC,QAAQ,GACX,QAAO;AAET,QAAO,QAAQ,QAAQ,GAAG"}

package/dist/components/ScalarCopy/ScalarCopy.vue.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCopy.vue.js","names":[],"sources":["../../../src/components/ScalarCopy/ScalarCopy.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Copy component\n *\n * Provides a copy button and copies content to the clipboard.\n *\n * @example\n *   <ScalarCopy>\n *     <template #copy>Button label</template>\n *     <template #copied>Copied label</template>\n *   </ScalarCopy>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useClipboard } from '@vueuse/core'\nimport { onMounted, watch } from 'vue'\n\nimport ScalarCopyButton from './ScalarCopyButton.vue'\nimport type { ScalarCopyProps, ScalarCopySlots } from './types'\n\nconst {\n  content = '',\n  duration = 1500,\n  immediate,\n} = defineProps<ScalarCopyProps>()\n\ndefineSlots<ScalarCopySlots>()\n\nconst copied = defineModel<boolean>('copied', { default: false })\n\nonMounted(() => {\n  if (immediate) copy(content)\n})\n\nconst { copy, copied: clipboardCopied } = useClipboard({\n  legacy: true,\n  copiedDuring: duration,\n})\n\n/** Watch the clipboard copied state and emit it to the consuming component */\nwatch(clipboardCopied, (v) => (copied.value = v))\n</script>\n<template>\n  <ScalarCopyButton\n    :copied=\"copied || clipboardCopied\"\n    :placement\n    :showLabel\n    @click=\"copy(content)\">\n    <template\n      v-if=\"$slots.copy\"\n      #copy>\n      <slot name=\"copy\" />\n    </template>\n    <template\n      v-if=\"$slots.copied\"\n      #copied>\n      <slot name=\"copied\" />\n    </template>\n    <template\n      v-if=\"$slots.backdrop\"\n      #backdrop>\n      <slot name=\"backdrop\" />\n    </template>\n  </ScalarCopyButton>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,64 @@
+import ScalarCopyButton_default from "./ScalarCopyButton.vue.js";
+import { createBlock, createSlots, defineComponent, mergeModels, onMounted, openBlock, renderSlot, unref, useModel, watch, withCtx } from "vue";
+import { useClipboard } from "@vueuse/core";
+var ScalarCopy_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ScalarCopy",
+	props: /* @__PURE__ */ mergeModels({
+		content: { default: "" },
+		placement: {},
+		showLabel: { type: Boolean },
+		duration: { default: 1500 },
+		immediate: { type: Boolean }
+	}, {
+		"copied": {
+			type: Boolean,
+			default: false
+		},
+		"copiedModifiers": {}
+	}),
+	emits: ["update:copied"],
+	setup(__props) {
+		const copied = useModel(__props, "copied");
+		onMounted(() => {
+			if (__props.immediate) copy(__props.content);
+		});
+		const { copy, copied: clipboardCopied } = useClipboard({
+			legacy: true,
+			copiedDuring: __props.duration
+		});
+		/** Watch the clipboard copied state and emit it to the consuming component */
+		watch(clipboardCopied, (v) => copied.value = v);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ScalarCopyButton_default, {
+				copied: copied.value || unref(clipboardCopied),
+				placement: __props.placement,
+				showLabel: __props.showLabel,
+				onClick: _cache[0] || (_cache[0] = ($event) => unref(copy)(__props.content))
+			}, createSlots({ _: 2 }, [
+				_ctx.$slots.copy ? {
+					name: "copy",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "copy")]),
+					key: "0"
+				} : void 0,
+				_ctx.$slots.copied ? {
+					name: "copied",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "copied")]),
+					key: "1"
+				} : void 0,
+				_ctx.$slots.backdrop ? {
+					name: "backdrop",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "backdrop")]),
+					key: "2"
+				} : void 0
+			]), 1032, [
+				"copied",
+				"placement",
+				"showLabel"
+			]);
+		};
+	}
+});
+//#endregion
+export { ScalarCopy_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarCopy.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCopy.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarCopy/ScalarCopy.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Copy component\n *\n * Provides a copy button and copies content to the clipboard.\n *\n * @example\n *   <ScalarCopy>\n *     <template #copy>Button label</template>\n *     <template #copied>Copied label</template>\n *   </ScalarCopy>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useClipboard } from '@vueuse/core'\nimport { onMounted, watch } from 'vue'\n\nimport ScalarCopyButton from './ScalarCopyButton.vue'\nimport type { ScalarCopyProps, ScalarCopySlots } from './types'\n\nconst {\n  content = '',\n  duration = 1500,\n  immediate,\n} = defineProps<ScalarCopyProps>()\n\ndefineSlots<ScalarCopySlots>()\n\nconst copied = defineModel<boolean>('copied', { default: false })\n\nonMounted(() => {\n  if (immediate) copy(content)\n})\n\nconst { copy, copied: clipboardCopied } = useClipboard({\n  legacy: true,\n  copiedDuring: duration,\n})\n\n/** Watch the clipboard copied state and emit it to the consuming component */\nwatch(clipboardCopied, (v) => (copied.value = v))\n</script>\n<template>\n  <ScalarCopyButton\n    :copied=\"copied || clipboardCopied\"\n    :placement\n    :showLabel\n    @click=\"copy(content)\">\n    <template\n      v-if=\"$slots.copy\"\n      #copy>\n      <slot name=\"copy\" />\n    </template>\n    <template\n      v-if=\"$slots.copied\"\n      #copied>\n      <slot name=\"copied\" />\n    </template>\n    <template\n      v-if=\"$slots.backdrop\"\n      #backdrop>\n      <slot name=\"backdrop\" />\n    </template>\n  </ScalarCopyButton>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,SAAS,SAAoB,SAAC,SAA4B;AAEhE,kBAAgB;AACd,OAAI,QAAA,UAAW,MAAK,QAAA,QAAO;IAC5B;EAED,MAAM,EAAE,MAAM,QAAQ,oBAAoB,aAAa;GACrD,QAAQ;GACR,cAAc,QAAA;GACf,CAAA;;AAGD,QAAM,kBAAkB,MAAO,OAAO,QAAQ,EAAE;;uBAG9C,YAoBmB,0BAAA;IAnBhB,QAAQ,OAAA,SAAU,MAAA,gBAAe;IACjC,WAAA,QAAA;IACA,WAAA,QAAA;IACA,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,KAAI,CAAC,QAAA,QAAO;;IAEZA,KAAAA,OAAO,OAAA;WACZ;uBACmB,CAApB,WAAoB,KAAA,QAAA,OAAA,CAAA,CAAA;;;IAGdA,KAAAA,OAAO,SAAA;WACZ;uBACqB,CAAtB,WAAsB,KAAA,QAAA,SAAA,CAAA,CAAA;;;IAGhBA,KAAAA,OAAO,WAAA;WACZ;uBACuB,CAAxB,WAAwB,KAAA,QAAA,WAAA,CAAA,CAAA"}

package/dist/components/ScalarCopy/ScalarCopyBackdrop.vue.js

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

package/dist/components/ScalarCopy/ScalarCopyBackdrop.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCopyBackdrop.vue.js","names":[],"sources":["../../../src/components/ScalarCopy/ScalarCopyBackdrop.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Copy Backdrop component\n *\n * A backdrop for the copy button label, this component can be\n * used to override the default backdrop with a custom one.\n *\n * @example\n * <ScalarCopy>\n *   <template #backdrop>\n *     <ScalarCopyBackdrop class=\"bg-b-2\" />\n *   </template>\n * </ScalarCopy>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div v-bind=\"cx('absolute inset-y-0.5 -z-2 left-0 right-0 bg-b-1 rounded')\" />\n</template>\n"],"mappings":""}

package/dist/components/ScalarCopy/ScalarCopyBackdrop.vue.script.js

@@ -0,0 +1,16 @@
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createElementBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, unref } from "vue";
+var ScalarCopyBackdrop_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarCopyBackdrop",
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("absolute inset-y-0.5 -z-2 left-0 right-0 bg-b-1 rounded"))), null, 16);
+		};
+	}
+});
+//#endregion
+export { ScalarCopyBackdrop_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarCopyBackdrop.vue.script.js.map

package/dist/components/ScalarCopy/ScalarCopyBackdrop.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCopyBackdrop.vue.script.js","names":[],"sources":["../../../src/components/ScalarCopy/ScalarCopyBackdrop.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Copy Backdrop component\n *\n * A backdrop for the copy button label, this component can be\n * used to override the default backdrop with a custom one.\n *\n * @example\n * <ScalarCopy>\n *   <template #backdrop>\n *     <ScalarCopyBackdrop class=\"bg-b-2\" />\n *   </template>\n * </ScalarCopy>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div v-bind=\"cx('absolute inset-y-0.5 -z-2 left-0 right-0 bg-b-1 rounded')\" />\n</template>\n"],"mappings":";;;;;;EAoBA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAA8E,OAAA,eAAA,mBAAjE,MAAA,GAAE,CAAA,0DAAA,CAAA,CAAA,EAAA,MAAA,GAAA"}

package/dist/components/ScalarCopy/ScalarCopyButton.vue.js

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

package/dist/components/ScalarCopy/ScalarCopyButton.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCopyButton.vue.js","names":[],"sources":["../../../src/components/ScalarCopy/ScalarCopyButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Copy Button component\n *\n * A dumb button with copy animations.\n *\n * If you're looking for a button that copies content to the clipboard,\n * use the ScalarCopy component instead.\n *\n * @example\n *   <ScalarCopyButton @click=\"handleCopy\">\n *     <template #copy>Button label</template>\n *     <template #copied>Copied label</template>\n *   </ScalarCopyButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconCheck, ScalarIconCopy } from '@scalar/icons'\nimport type { ScalarIconComponent } from '@scalar/icons/types'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport ScalarCopyBackdrop from './ScalarCopyBackdrop.vue'\nimport type { ScalarCopyPlacement, ScalarCopySlots } from './types'\n\nconst { placement = 'right' } = defineProps<{\n  /** Whether the label should be shown on hover or always */\n  showLabel?: boolean\n  /** The placement of the copy button */\n  placement?: ScalarCopyPlacement\n}>()\n\ndefineSlots<ScalarCopySlots>()\n\n/** Whether the copy button has been clicked */\nconst copied = defineModel<boolean>('copied', { default: false })\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\nconst icon = computed<ScalarIconComponent>(() => {\n  return copied.value ? ScalarIconCheck : ScalarIconCopy\n})\n</script>\n<template>\n  <button\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'group/copy-button relative z-0 flex items-center justify-center',\n        'size-6 p-1.25 -m-1 rounded text-xs bg-b-2',\n        copied ? 'text-c-1' : 'text-c-2 hover:text-c-1',\n      )\n    \">\n    <Transition\n      enterActiveClass=\"transition-transform\"\n      enterFromClass=\"scale-0\"\n      enterToClass=\"scale-100\"\n      leaveActiveClass=\"transition-transform\"\n      leaveFromClass=\"scale-100\"\n      leaveToClass=\"scale-0\"\n      mode=\"out-in\">\n      <component\n        :is=\"icon\"\n        class=\"size-full\" />\n    </Transition>\n    <div class=\"bg-inherit rounded-[inherit] absolute inset-0 -z-1\" />\n    <div\n      class=\"group/copy-label absolute flex items-center -inset-y-0.5 rounded\"\n      :class=\"{\n        'left-0 pl-[100%]': placement === 'right',\n        'right-0 pr-[100%]': placement === 'left',\n      }\">\n      <div\n        aria-hidden=\"true\"\n        class=\"flex items-center py-1.5 mask-y-from-[calc(100%-8px)] mask-y-to-100%\">\n        <Transition\n          enterActiveClass=\"transition-transform ease-out\"\n          enterFromClass=\"translate-y-1.5\"\n          enterToClass=\"translate-y-0\"\n          leaveActiveClass=\"transition-transform ease-in\"\n          leaveFromClass=\"translate-y-0\"\n          leaveToClass=\"-translate-y-1.5\"\n          mode=\"out-in\">\n          <div\n            v-if=\"copied\"\n            class=\"whitespace-nowrap px-1.5\">\n            <slot name=\"copied\">Copied</slot>\n          </div>\n          <div\n            v-else\n            class=\"whitespace-nowrap px-1.5\"\n            :class=\"{\n              'group-hocus/copy-button:block hidden': !showLabel && !copied,\n            }\">\n            <slot name=\"copy\">Copy</slot>\n          </div>\n        </Transition>\n      </div>\n      <div\n        v-if=\"copied\"\n        class=\"sr-only\"\n        role=\"alert\">\n        <slot name=\"copied\">Copied</slot>\n      </div>\n      <div\n        v-else\n        class=\"sr-only\">\n        <slot name=\"copy\">Copy</slot>\n      </div>\n      <slot name=\"backdrop\">\n        <ScalarCopyBackdrop />\n      </slot>\n    </div>\n  </button>\n</template>\n"],"mappings":""}