@scalar/components 0.32.1 → 0.33.1

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarFloating.vue.js","names":[],"sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Floating component\n *\n * Positions a floating element relative to a reference element\n * using Floating UI. Handles placement, offset, flipping, and resizing.\n *\n * @example\n * <ScalarFloating placement=\"bottom\">\n *   <button>Reference</button>\n *   <template #floating>Floating content</template>\n * </ScalarFloating>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { getSideAxis } from '@floating-ui/utils'\nimport {\n  type MiddlewareData,\n  autoUpdate,\n  flip,\n  offset as offsetMiddleware,\n  shift,\n  size,\n  useFloating,\n} from '@floating-ui/vue'\nimport { type Ref, computed, nextTick, ref } from 'vue'\n\nimport { ScalarTeleport } from '../ScalarTeleport'\nimport type { FloatingOptions } from './types'\nimport { useResizeWithTarget } from './useResizeWithTarget'\n\nconst {\n  placement,\n  offset = 5,\n  resize = false,\n  middleware = [],\n  target,\n  teleport,\n} = defineProps<FloatingOptions>()\n\ndefineSlots<{\n  /** The reference element for the element in the #floating slot */\n  default(): unknown\n  /** The floating element */\n  floating?(props: {\n    /** The width of the reference element if `resize` is true and placement is on the y axis */\n    width?: string\n    /** The height of the reference element if `resize` is true and placement is on the x axis */\n    height?: string\n    /** The middleware data return by Floating UI */\n    data?: MiddlewareData\n  }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst floatingRef: Ref<HTMLElement | null> = ref(null)\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nconst targetRef = computed<HTMLElement | undefined>(() => {\n  if (typeof window !== 'undefined' && wrapperRef.value) {\n    // If target is a string (id), try to find it in the document\n    if (typeof target === 'string') {\n      const t = document.getElementById(target)\n      if (t) {\n        return t\n      }\n      console.warn(`ScalarFloating: Target with id=\"${target}\" not found`)\n    }\n    // If target is an HTMLElement, return it\n    else if (target instanceof HTMLElement) {\n      return target\n    }\n    // Fallback to div wrapper if no child element is provided\n    const firstChild = wrapperRef.value.children?.[0]\n    if (firstChild instanceof HTMLElement) {\n      return firstChild\n    }\n    return wrapperRef.value\n  }\n  // Return undefined if nothing is found\n  return undefined\n})\n\nconst targetSize = useResizeWithTarget(targetRef, {\n  enabled: computed(() => resize),\n})\n\nconst targetWidth = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'y'\n    ? targetSize.width.value\n    : undefined,\n)\n\nconst targetHeight = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'x'\n    ? targetSize.height.value\n    : undefined,\n)\n\n/**\n * Starts Floating UI's `autoUpdate` one tick after both elements exist.\n *\n * `useFloating` attaches `autoUpdate` from a synchronous watch the moment the\n * template refs resolve, and `autoUpdate` positions the element right away.\n * Template refs resolve in the post-render phase of a flush, so that first\n * `computePosition` reads layout while the same flush is still mounting other\n * components: every floating element mounted together (for example the closed\n * listboxes of a schema with many compositions) forces its own style recalc and\n * layout on a tree that was dirtied again in between. Waiting for `nextTick`\n * runs every first positioning back-to-back once the flush has settled, so the\n * browser recalculates the tree once for all of them. The tick resolves before\n * the next paint, so an element that mounts open is positioned in the same task.\n */\nconst deferredAutoUpdate: typeof autoUpdate = (\n  reference,\n  floating,\n  update,\n  options,\n) => {\n  let cleanup: (() => void) | undefined\n  let disposed = false\n\n  void nextTick(() => {\n    if (!disposed) {\n      cleanup = autoUpdate(reference, floating, update, options)\n    }\n  })\n\n  return () => {\n    disposed = true\n    cleanup?.()\n  }\n}\n\nconst { floatingStyles, middlewareData } = useFloating(targetRef, floatingRef, {\n  placement: computed(() => placement ?? 'bottom'),\n  whileElementsMounted: deferredAutoUpdate,\n  middleware: computed(() => [\n    offsetMiddleware(offset),\n    flip({ padding: 48 }),\n    shift({ padding: 8 }),\n    size({\n      apply({ availableWidth, availableHeight, elements }) {\n        // Assign the max width and height to the floating element\n        // @see https://floating-ui.com/docs/size\n        Object.assign(elements.floating.style, {\n          maxWidth: `${Math.max(0, availableWidth) - 16}px`,\n          maxHeight: `${Math.max(0, availableHeight) - 16}px`,\n        })\n      },\n    }),\n    ...middleware,\n  ]),\n})\n\ndefineExpose({\n  /** The resolved target element */\n  targetRef,\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n  <ScalarTeleport\n    v-if=\"$slots.floating\"\n    :disabled=\"!teleport\"\n    :to=\"typeof teleport === 'string' ? teleport : undefined\">\n    <div\n      ref=\"floatingRef\"\n      class=\"relative z-context\"\n      :style=\"floatingStyles\">\n      <slot\n        :data=\"middlewareData\"\n        :height=\"targetHeight\"\n        name=\"floating\"\n        :width=\"targetWidth\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarFloating.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Floating component\n *\n * Positions a floating element relative to a reference element\n * using Floating UI. Handles placement, offset, flipping, and resizing.\n *\n * @example\n * <ScalarFloating placement=\"bottom\">\n *   <button>Reference</button>\n *   <template #floating>Floating content</template>\n * </ScalarFloating>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { getSideAxis } from '@floating-ui/utils'\nimport {\n  autoUpdate,\n  flip,\n  offset as offsetMiddleware,\n  shift,\n  size,\n  useFloating,\n  type MiddlewareData,\n} from '@floating-ui/vue'\nimport { computed, nextTick, ref, type Ref } from 'vue'\n\nimport { ScalarTeleport } from '../ScalarTeleport'\nimport type { FloatingOptions } from './types'\nimport { useResizeWithTarget } from './useResizeWithTarget'\n\nconst {\n  placement,\n  offset = 5,\n  resize = false,\n  middleware = [],\n  target,\n  teleport,\n} = defineProps<FloatingOptions>()\n\ndefineSlots<{\n  /** The reference element for the element in the #floating slot */\n  default(): unknown\n  /** The floating element */\n  floating?(props: {\n    /** The width of the reference element if `resize` is true and placement is on the y axis */\n    width?: string\n    /** The height of the reference element if `resize` is true and placement is on the x axis */\n    height?: string\n    /** The middleware data return by Floating UI */\n    data?: MiddlewareData\n  }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst floatingRef: Ref<HTMLElement | null> = ref(null)\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nconst targetRef = computed<HTMLElement | undefined>(() => {\n  if (typeof window !== 'undefined' && wrapperRef.value) {\n    // If target is a string (id), try to find it in the document\n    if (typeof target === 'string') {\n      const t = document.getElementById(target)\n      if (t) {\n        return t\n      }\n      console.warn(`ScalarFloating: Target with id=\"${target}\" not found`)\n    }\n    // If target is an HTMLElement, return it\n    else if (target instanceof HTMLElement) {\n      return target\n    }\n    // Fallback to div wrapper if no child element is provided\n    const firstChild = wrapperRef.value.children?.[0]\n    if (firstChild instanceof HTMLElement) {\n      return firstChild\n    }\n    return wrapperRef.value\n  }\n  // Return undefined if nothing is found\n  return undefined\n})\n\nconst targetSize = useResizeWithTarget(targetRef, {\n  enabled: computed(() => resize),\n})\n\nconst targetWidth = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'y'\n    ? targetSize.width.value\n    : undefined,\n)\n\nconst targetHeight = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'x'\n    ? targetSize.height.value\n    : undefined,\n)\n\n/**\n * Starts Floating UI's `autoUpdate` one tick after both elements exist.\n *\n * `useFloating` attaches `autoUpdate` from a synchronous watch the moment the\n * template refs resolve, and `autoUpdate` positions the element right away.\n * Template refs resolve in the post-render phase of a flush, so that first\n * `computePosition` reads layout while the same flush is still mounting other\n * components: every floating element mounted together (for example the closed\n * listboxes of a schema with many compositions) forces its own style recalc and\n * layout on a tree that was dirtied again in between. Waiting for `nextTick`\n * runs every first positioning back-to-back once the flush has settled, so the\n * browser recalculates the tree once for all of them. The tick resolves before\n * the next paint, so an element that mounts open is positioned in the same task.\n */\nconst deferredAutoUpdate: typeof autoUpdate = (\n  reference,\n  floating,\n  update,\n  options,\n) => {\n  let cleanup: (() => void) | undefined\n  let disposed = false\n\n  void nextTick(() => {\n    if (!disposed) {\n      cleanup = autoUpdate(reference, floating, update, options)\n    }\n  })\n\n  return () => {\n    disposed = true\n    cleanup?.()\n  }\n}\n\nconst { floatingStyles, middlewareData } = useFloating(targetRef, floatingRef, {\n  placement: computed(() => placement ?? 'bottom'),\n  whileElementsMounted: deferredAutoUpdate,\n  middleware: computed(() => [\n    offsetMiddleware(offset),\n    flip({ padding: 48 }),\n    shift({ padding: 8 }),\n    size({\n      apply({ availableWidth, availableHeight, elements }) {\n        // Assign the max width and height to the floating element\n        // @see https://floating-ui.com/docs/size\n        Object.assign(elements.floating.style, {\n          maxWidth: `${Math.max(0, availableWidth) - 16}px`,\n          maxHeight: `${Math.max(0, availableHeight) - 16}px`,\n        })\n      },\n    }),\n    ...middleware,\n  ]),\n})\n\ndefineExpose({\n  /** The resolved target element */\n  targetRef,\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n  <ScalarTeleport\n    v-if=\"$slots.floating\"\n    :disabled=\"!teleport\"\n    :to=\"typeof teleport === 'string' ? teleport : undefined\">\n    <div\n      ref=\"floatingRef\"\n      class=\"z-context relative\"\n      :style=\"floatingStyles\">\n      <slot\n        :data=\"middlewareData\"\n        :height=\"targetHeight\"\n        name=\"floating\"\n        :width=\"targetWidth\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":""}

package/dist/components/ScalarFloating/ScalarFloating.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,117 @@
+import ScalarTeleport_default from "../ScalarTeleport/ScalarTeleport.vue.js";
+import { useResizeWithTarget } from "./useResizeWithTarget.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, withCtx } from "vue";
+import { getSideAxis } from "@floating-ui/utils";
+import { autoUpdate, flip, offset, shift, size, useFloating } from "@floating-ui/vue";
+var ScalarFloating_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarFloating",
+	props: {
+		placement: {},
+		offset: {
+			type: [
+				Number,
+				Object,
+				Function
+			],
+			default: 5
+		},
+		resize: {
+			type: Boolean,
+			default: false
+		},
+		target: {},
+		middleware: { default: () => [] },
+		teleport: { type: [Boolean, String] }
+	},
+	setup(__props, { expose: __expose }) {
+		const floatingRef = ref(null);
+		const wrapperRef = ref(null);
+		const targetRef = computed(() => {
+			if (typeof window !== "undefined" && wrapperRef.value) {
+				if (typeof __props.target === "string") {
+					const t = document.getElementById(__props.target);
+					if (t) return t;
+					console.warn(`ScalarFloating: Target with id="${__props.target}" not found`);
+				} else if (__props.target instanceof HTMLElement) return __props.target;
+				const firstChild = wrapperRef.value.children?.[0];
+				if (firstChild instanceof HTMLElement) return firstChild;
+				return wrapperRef.value;
+			}
+		});
+		const targetSize = useResizeWithTarget(targetRef, { enabled: computed(() => __props.resize) });
+		const targetWidth = computed(() => getSideAxis(__props.placement ?? "bottom") === "y" ? targetSize.width.value : void 0);
+		const targetHeight = computed(() => getSideAxis(__props.placement ?? "bottom") === "x" ? targetSize.height.value : void 0);
+		/**
+		* Starts Floating UI's `autoUpdate` one tick after both elements exist.
+		*
+		* `useFloating` attaches `autoUpdate` from a synchronous watch the moment the
+		* template refs resolve, and `autoUpdate` positions the element right away.
+		* Template refs resolve in the post-render phase of a flush, so that first
+		* `computePosition` reads layout while the same flush is still mounting other
+		* components: every floating element mounted together (for example the closed
+		* listboxes of a schema with many compositions) forces its own style recalc and
+		* layout on a tree that was dirtied again in between. Waiting for `nextTick`
+		* runs every first positioning back-to-back once the flush has settled, so the
+		* browser recalculates the tree once for all of them. The tick resolves before
+		* the next paint, so an element that mounts open is positioned in the same task.
+		*/
+		const deferredAutoUpdate = (reference, floating, update, options) => {
+			let cleanup;
+			let disposed = false;
+			nextTick(() => {
+				if (!disposed) cleanup = autoUpdate(reference, floating, update, options);
+			});
+			return () => {
+				disposed = true;
+				cleanup?.();
+			};
+		};
+		const { floatingStyles, middlewareData } = useFloating(targetRef, floatingRef, {
+			placement: computed(() => __props.placement ?? "bottom"),
+			whileElementsMounted: deferredAutoUpdate,
+			middleware: computed(() => [
+				offset(__props.offset),
+				flip({ padding: 48 }),
+				shift({ padding: 8 }),
+				size({ apply({ availableWidth, availableHeight, elements }) {
+					Object.assign(elements.floating.style, {
+						maxWidth: `${Math.max(0, availableWidth) - 16}px`,
+						maxHeight: `${Math.max(0, availableHeight) - 16}px`
+					});
+				} }),
+				...__props.middleware
+			])
+		});
+		__expose({ 
+		/** The resolved target element */
+targetRef });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", {
+				ref_key: "wrapperRef",
+				ref: wrapperRef,
+				class: normalizeClass({ contents: !!_ctx.$slots.default })
+			}, [renderSlot(_ctx.$slots, "default")], 2), _ctx.$slots.floating ? (openBlock(), createBlock(unref(ScalarTeleport_default), {
+				key: 0,
+				disabled: !__props.teleport,
+				to: typeof __props.teleport === "string" ? __props.teleport : void 0
+			}, {
+				default: withCtx(() => [createElementVNode("div", {
+					ref_key: "floatingRef",
+					ref: floatingRef,
+					class: "z-context relative",
+					style: normalizeStyle(unref(floatingStyles))
+				}, [renderSlot(_ctx.$slots, "floating", {
+					data: unref(middlewareData),
+					height: targetHeight.value,
+					width: targetWidth.value
+				})], 4)]),
+				_: 3
+			}, 8, ["disabled", "to"])) : createCommentVNode("", true)], 64);
+		};
+	}
+});
+//#endregion
+export { ScalarFloating_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarFloating.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarFloating/ScalarFloating.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFloating.vue_vue_type_script_setup_true_lang.js","names":["$slots","offsetMiddleware","_openBlock","_createElementBlock","_Fragment","_createElementVNode","_normalizeClass","_renderSlot","_createBlock","_unref","ScalarTeleport","_withCtx","_normalizeStyle","_createCommentVNode"],"sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Floating component\n *\n * Positions a floating element relative to a reference element\n * using Floating UI. Handles placement, offset, flipping, and resizing.\n *\n * @example\n * <ScalarFloating placement=\"bottom\">\n *   <button>Reference</button>\n *   <template #floating>Floating content</template>\n * </ScalarFloating>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { getSideAxis } from '@floating-ui/utils'\nimport {\n  autoUpdate,\n  flip,\n  offset as offsetMiddleware,\n  shift,\n  size,\n  useFloating,\n  type MiddlewareData,\n} from '@floating-ui/vue'\nimport { computed, nextTick, ref, type Ref } from 'vue'\n\nimport { ScalarTeleport } from '../ScalarTeleport'\nimport type { FloatingOptions } from './types'\nimport { useResizeWithTarget } from './useResizeWithTarget'\n\nconst {\n  placement,\n  offset = 5,\n  resize = false,\n  middleware = [],\n  target,\n  teleport,\n} = defineProps<FloatingOptions>()\n\ndefineSlots<{\n  /** The reference element for the element in the #floating slot */\n  default(): unknown\n  /** The floating element */\n  floating?(props: {\n    /** The width of the reference element if `resize` is true and placement is on the y axis */\n    width?: string\n    /** The height of the reference element if `resize` is true and placement is on the x axis */\n    height?: string\n    /** The middleware data return by Floating UI */\n    data?: MiddlewareData\n  }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst floatingRef: Ref<HTMLElement | null> = ref(null)\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nconst targetRef = computed<HTMLElement | undefined>(() => {\n  if (typeof window !== 'undefined' && wrapperRef.value) {\n    // If target is a string (id), try to find it in the document\n    if (typeof target === 'string') {\n      const t = document.getElementById(target)\n      if (t) {\n        return t\n      }\n      console.warn(`ScalarFloating: Target with id=\"${target}\" not found`)\n    }\n    // If target is an HTMLElement, return it\n    else if (target instanceof HTMLElement) {\n      return target\n    }\n    // Fallback to div wrapper if no child element is provided\n    const firstChild = wrapperRef.value.children?.[0]\n    if (firstChild instanceof HTMLElement) {\n      return firstChild\n    }\n    return wrapperRef.value\n  }\n  // Return undefined if nothing is found\n  return undefined\n})\n\nconst targetSize = useResizeWithTarget(targetRef, {\n  enabled: computed(() => resize),\n})\n\nconst targetWidth = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'y'\n    ? targetSize.width.value\n    : undefined,\n)\n\nconst targetHeight = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'x'\n    ? targetSize.height.value\n    : undefined,\n)\n\n/**\n * Starts Floating UI's `autoUpdate` one tick after both elements exist.\n *\n * `useFloating` attaches `autoUpdate` from a synchronous watch the moment the\n * template refs resolve, and `autoUpdate` positions the element right away.\n * Template refs resolve in the post-render phase of a flush, so that first\n * `computePosition` reads layout while the same flush is still mounting other\n * components: every floating element mounted together (for example the closed\n * listboxes of a schema with many compositions) forces its own style recalc and\n * layout on a tree that was dirtied again in between. Waiting for `nextTick`\n * runs every first positioning back-to-back once the flush has settled, so the\n * browser recalculates the tree once for all of them. The tick resolves before\n * the next paint, so an element that mounts open is positioned in the same task.\n */\nconst deferredAutoUpdate: typeof autoUpdate = (\n  reference,\n  floating,\n  update,\n  options,\n) => {\n  let cleanup: (() => void) | undefined\n  let disposed = false\n\n  void nextTick(() => {\n    if (!disposed) {\n      cleanup = autoUpdate(reference, floating, update, options)\n    }\n  })\n\n  return () => {\n    disposed = true\n    cleanup?.()\n  }\n}\n\nconst { floatingStyles, middlewareData } = useFloating(targetRef, floatingRef, {\n  placement: computed(() => placement ?? 'bottom'),\n  whileElementsMounted: deferredAutoUpdate,\n  middleware: computed(() => [\n    offsetMiddleware(offset),\n    flip({ padding: 48 }),\n    shift({ padding: 8 }),\n    size({\n      apply({ availableWidth, availableHeight, elements }) {\n        // Assign the max width and height to the floating element\n        // @see https://floating-ui.com/docs/size\n        Object.assign(elements.floating.style, {\n          maxWidth: `${Math.max(0, availableWidth) - 16}px`,\n          maxHeight: `${Math.max(0, availableHeight) - 16}px`,\n        })\n      },\n    }),\n    ...middleware,\n  ]),\n})\n\ndefineExpose({\n  /** The resolved target element */\n  targetRef,\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n  <ScalarTeleport\n    v-if=\"$slots.floating\"\n    :disabled=\"!teleport\"\n    :to=\"typeof teleport === 'string' ? teleport : undefined\">\n    <div\n      ref=\"floatingRef\"\n      class=\"z-context relative\"\n      :style=\"floatingStyles\">\n      <slot\n        :data=\"middlewareData\"\n        :height=\"targetHeight\"\n        name=\"floating\"\n        :width=\"targetWidth\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDA,MAAM,cAAuC,IAAI,IAAI;EACrD,MAAM,aAAsC,IAAI,IAAI;EAEpD,MAAM,YAAY,eAAwC;GACxD,IAAI,OAAO,WAAW,eAAe,WAAW,OAAO;IAErD,IAAI,OAAO,QAAA,WAAW,UAAU;KAC9B,MAAM,IAAI,SAAS,eAAe,QAAA,MAAM;KACxC,IAAI,GACF,OAAO;KAET,QAAQ,KAAK,mCAAmC,QAAA,OAAO,YAAY;IACrE,OAEK,IAAI,QAAA,kBAAkB,aACzB,OAAO,QAAA;IAGT,MAAM,aAAa,WAAW,MAAM,WAAW;IAC/C,IAAI,sBAAsB,aACxB,OAAO;IAET,OAAO,WAAW;GACpB;EAGF,CAAC;EAED,MAAM,aAAa,oBAAoB,WAAW,EAChD,SAAS,eAAe,QAAA,MAAM,EAChC,CAAC;EAED,MAAM,cAAc,eAClB,YAAY,QAAA,aAAa,QAAQ,MAAM,MACnC,WAAW,MAAM,QACjB,KAAA,CACN;EAEA,MAAM,eAAe,eACnB,YAAY,QAAA,aAAa,QAAQ,MAAM,MACnC,WAAW,OAAO,QAClB,KAAA,CACN;;;;;;;;;;;;;;;EAgBA,MAAM,sBACJ,WACA,UACA,QACA,YACG;GACH,IAAI;GACJ,IAAI,WAAW;GAEf,eAAoB;IAClB,IAAI,CAAC,UACH,UAAU,WAAW,WAAW,UAAU,QAAQ,OAAO;GAE7D,CAAC;GAED,aAAa;IACX,WAAW;IACX,UAAU;GACZ;EACF;EAEA,MAAM,EAAE,gBAAgB,mBAAmB,YAAY,WAAW,aAAa;GAC7E,WAAW,eAAe,QAAA,aAAa,QAAQ;GAC/C,sBAAsB;GACtB,YAAY,eAAe;IACzBC,OAAiB,QAAA,MAAM;IACvB,KAAK,EAAE,SAAS,GAAG,CAAC;IACpB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,EACH,MAAM,EAAE,gBAAgB,iBAAiB,YAAY;KAGnD,OAAO,OAAO,SAAS,SAAS,OAAO;MACrC,UAAU,GAAG,KAAK,IAAI,GAAG,cAAc,IAAI,GAAG;MAC9C,WAAW,GAAG,KAAK,IAAI,GAAG,eAAe,IAAI,GAAG;KAClD,CAAC;IACH,EACF,CAAC;IACD,GAAG,QAAA;GACL,CAAC;EACH,CAAC;EAED,SAAa;;AAEX,UACF,CAAC;;G,wDAGCI,mBAIM,OAAA;IAHA,SAAA;IAAJ,KAAI;IACH,OAAKC,eAAA,EAAA,UAAA,CAAA,CAAgBN,KAAAA,OAAO,QAAO,CAAA;G,IACpCO,WAAQ,KAAA,QAAA,SAAA,C,OAGFP,KAAAA,OAAO,YADfE,UAAA,GAAAM,YAciBC,MAAAC,sBAAA,GAAA;;IAZd,UAAQ,CAAG,QAAA;IACX,IAAE,OAAS,QAAA,aAAQ,WAAgB,QAAA,WAAW,KAAA;;IAC/C,SAAAC,cASM,CATNN,mBASM,OAAA;KARA,SAAA;KAAJ,KAAI;KACJ,OAAM;KACL,OAAKO,eAAEH,MAAA,cAAA,CAAc;I,IACtBF,WAIyB,KAAA,QAAA,YAAA;KAHtB,MAAME,MAAA,cAAA;KACN,QAAQ,aAAA;KAER,OAAO,YAAA"}

package/dist/components/ScalarFloating/ScalarFloatingBackdrop.vue.js

@@ -1,4 +1,4 @@
-import ScalarFloatingBackdrop_vue_vue_type_script_setup_true_lang_default from "./ScalarFloatingBackdrop.vue.script.js";
+import ScalarFloatingBackdrop_vue_vue_type_script_setup_true_lang_default from "./ScalarFloatingBackdrop.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarFloating/ScalarFloatingBackdrop.vue
 var ScalarFloatingBackdrop_default = ScalarFloatingBackdrop_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarFloating/ScalarFloatingBackdrop.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarFloatingBackdrop.vue.js","names":[],"sources":["../../../src/components/ScalarFloating/ScalarFloatingBackdrop.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar floating backdrop component\n *\n * Provides an absolutely positioned surface behind a floating element\n *\n * The backdrop inherits its border radius from its parent, so set the radius\n * on the floating element itself and the backdrop will follow it\n *\n * @deprecated The Scalar floating components now paint their own surface, so\n * style the floating element directly instead, e.g.\n * `rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border`\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\n    v-bind=\"\n      cx(\n        'absolute inset-0 -z-1 rounded-[inherit] bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border',\n      )\n    \">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarFloatingBackdrop.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarFloating/ScalarFloatingBackdrop.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar floating backdrop component\n *\n * Provides an absolutely positioned surface behind a floating element\n *\n * The backdrop inherits its border radius from its parent, so set the radius\n * on the floating element itself and the backdrop will follow it\n *\n * @deprecated The Scalar floating components now paint their own surface, so\n * style the floating element directly instead, e.g.\n * `rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border`\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\n    v-bind=\"\n      cx(\n        'absolute inset-0 -z-1 rounded-[inherit] bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border',\n      )\n    \">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarFloating/ScalarFloatingBackdrop.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,16 @@
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createElementBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref } from "vue";
+var ScalarFloatingBackdrop_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarFloatingBackdrop",
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("absolute inset-0 -z-1 rounded-[inherit] bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border"))), [renderSlot(_ctx.$slots, "default")], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarFloatingBackdrop_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarFloatingBackdrop.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarFloating/ScalarFloatingBackdrop.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFloatingBackdrop.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","_renderSlot"],"sources":["../../../src/components/ScalarFloating/ScalarFloatingBackdrop.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar floating backdrop component\n *\n * Provides an absolutely positioned surface behind a floating element\n *\n * The backdrop inherits its border radius from its parent, so set the radius\n * on the floating element itself and the backdrop will follow it\n *\n * @deprecated The Scalar floating components now paint their own surface, so\n * style the floating element directly instead, e.g.\n * `rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border`\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\n    v-bind=\"\n      cx(\n        'absolute inset-0 -z-1 rounded-[inherit] bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border',\n      )\n    \">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;EAmBA,MAAM,EAAE,OAAO,UAAU;;GAGvB,OAAAA,UAAA,GAAAC,mBAOM,OAAAC,eAAAC,mBANWC,MAAA,EAAA,CAAE,C,kGAKjBC,WAAQ,KAAA,QAAA,SAAA,C"}

package/dist/components/ScalarForm/ScalarForm.vue.js

@@ -1,4 +1,4 @@
-import ScalarForm_vue_vue_type_script_setup_true_lang_default from "./ScalarForm.vue.script.js";
+import ScalarForm_vue_vue_type_script_setup_true_lang_default from "./ScalarForm.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarForm/ScalarForm.vue
 var ScalarForm_default = ScalarForm_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarForm.vue.js","names":[],"sources":["../../../src/components/ScalarForm/ScalarForm.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form component\n *\n * A form for creating and editing data.\n *\n * Automatically calls preventDefault on the form submit event.\n *\n * @example\n *   <ScalarForm>\n *     <!-- Form content -->\n *   </ScalarForm>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineEmits<{\n  /** Emitted when the form is submitted */\n  (e: 'submit', event: SubmitEvent): void\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <form\n    v-bind=\"cx('flex flex-col')\"\n    @submit.prevent=\"$emit('submit', $event)\">\n    <slot />\n  </form>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarForm.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarForm/ScalarForm.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form component\n *\n * A form for creating and editing data.\n *\n * Automatically calls preventDefault on the form submit event.\n *\n * @example\n *   <ScalarForm>\n *     <!-- Form content -->\n *   </ScalarForm>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineEmits<{\n  /** Emitted when the form is submitted */\n  (e: 'submit', event: SubmitEvent): void\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <form\n    v-bind=\"cx('flex flex-col')\"\n    @submit.prevent=\"$emit('submit', $event)\">\n    <slot />\n  </form>\n</template>\n"],"mappings":""}

package/dist/components/ScalarForm/ScalarForm.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,17 @@
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createElementBlock, defineComponent, mergeProps, openBlock, renderSlot, unref, withModifiers } from "vue";
+var ScalarForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarForm",
+	emits: ["submit"],
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("form", mergeProps(unref(cx)("flex flex-col"), { onSubmit: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.$emit("submit", $event), ["prevent"])) }), [renderSlot(_ctx.$slots, "default")], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarForm_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarForm.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarForm/ScalarForm.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarForm.vue_vue_type_script_setup_true_lang.js","names":["$emit","_openBlock","_createElementBlock","_mergeProps","_unref","_withModifiers","_renderSlot"],"sources":["../../../src/components/ScalarForm/ScalarForm.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form component\n *\n * A form for creating and editing data.\n *\n * Automatically calls preventDefault on the form submit event.\n *\n * @example\n *   <ScalarForm>\n *     <!-- Form content -->\n *   </ScalarForm>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineEmits<{\n  /** Emitted when the form is submitted */\n  (e: 'submit', event: SubmitEvent): void\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <form\n    v-bind=\"cx('flex flex-col')\"\n    @submit.prevent=\"$emit('submit', $event)\">\n    <slot />\n  </form>\n</template>\n"],"mappings":";;;;;;;EAwBA,MAAM,EAAE,OAAO,UAAU;;GAGvB,OAAAC,UAAA,GAAAC,mBAIO,QAJPC,WACUC,MAGH,EAAA,CAHK,CAAA,eAAA,GAAA,EACT,UAAM,OAAA,OAAA,OAAA,KAAAC,eAAA,WAAUL,KAAAA,MAAK,UAAW,MAAM,GAAA,CAAA,SAAA,CAAA,G,KACvCM,WAAQ,KAAA,QAAA,SAAA,C"}

package/dist/components/ScalarForm/ScalarFormError.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarFormError.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/ScalarFormError.vue"],"names":[],"mappings":"AA2DA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,KAAK,CAAA;AAG9C;;;;;;;GAOG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,+BAA+B;cACrB,OAAO,GAAG,SAAS;IAC7B,+BAA+B;WACxB,SAAS,GAAG,SAAS;;IAH5B,+BAA+B;cACrB,OAAO,GAAG,SAAS;IAC7B,+BAA+B;WACxB,SAAS,GAAG,SAAS;;cAkEhB,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"}
+{"version":3,"file":"ScalarFormError.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/ScalarFormError.vue"],"names":[],"mappings":"AA2DA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,KAAK,CAAA;AAG9C;;;;;;;GAOG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,+BAA+B;cACrB,OAAO,GAAG,SAAS;IAC7B,+BAA+B;WACxB,SAAS,GAAG,SAAS;;IAH5B,+BAA+B;cACrB,OAAO,GAAG,SAAS;IAC7B,+BAA+B;WACxB,SAAS,GAAG,SAAS;;cAkEhB,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/ScalarForm/ScalarFormError.vue.js

@@ -1,4 +1,4 @@
-import ScalarFormError_vue_vue_type_script_setup_true_lang_default from "./ScalarFormError.vue.script.js";
+import ScalarFormError_vue_vue_type_script_setup_true_lang_default from "./ScalarFormError.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarForm/ScalarFormError.vue
 var ScalarFormError_default = ScalarFormError_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarForm/ScalarFormError.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarFormError.vue.js","names":[],"sources":["../../../src/components/ScalarForm/ScalarFormError.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form Error component\n *\n * Displays an error or warning message with an icon.\n *\n * @example\n * <ScalarFormError variant=\"error\">Something went wrong</ScalarFormError>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconWarning, ScalarIconWarningCircle } from '@scalar/icons'\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component, computed } from 'vue'\n\nconst { variant = 'error', icon } = defineProps<{\n  /** The variant of the error */\n  variant?: 'error' | 'warning'\n  /** Whether to show the icon */\n  icon?: Component | undefined\n}>()\n\nconst iconIs = computed(() => {\n  if (icon) {\n    return icon\n  }\n  return variant === 'error' ? ScalarIconWarningCircle : ScalarIconWarning\n})\n\nconst variants = cva({\n  base: 'flex items-baseline gap-1.5 rounded border p-2',\n  variants: {\n    variant: {\n      error: 'border-c-danger bg-b-danger text-c-danger',\n      warning: 'border-c-alert bg-b-alert text-c-alert',\n    },\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"alert\"\n    v-bind=\"cx(variants({ variant }))\">\n    <component\n      :is=\"iconIs\"\n      class=\"relative top-0.5 shrink-0\"\n      weight=\"bold\" />\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarFormError.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarForm/ScalarFormError.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form Error component\n *\n * Displays an error or warning message with an icon.\n *\n * @example\n * <ScalarFormError variant=\"error\">Something went wrong</ScalarFormError>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconWarning, ScalarIconWarningCircle } from '@scalar/icons'\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed, type Component } from 'vue'\n\nconst { variant = 'error', icon } = defineProps<{\n  /** The variant of the error */\n  variant?: 'error' | 'warning'\n  /** Whether to show the icon */\n  icon?: Component | undefined\n}>()\n\nconst iconIs = computed(() => {\n  if (icon) {\n    return icon\n  }\n  return variant === 'error' ? ScalarIconWarningCircle : ScalarIconWarning\n})\n\nconst variants = cva({\n  base: 'flex items-baseline gap-1.5 rounded border p-2',\n  variants: {\n    variant: {\n      error: 'border-c-danger bg-b-danger text-c-danger',\n      warning: 'border-c-alert bg-b-alert text-c-alert',\n    },\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"alert\"\n    v-bind=\"cx(variants({ variant }))\">\n    <component\n      :is=\"iconIs\"\n      class=\"relative top-0.5 shrink-0\"\n      weight=\"bold\" />\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarForm/ScalarFormError.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,35 @@
+import { cva, useBindCx } from "@scalar/use-hooks/useBindCx";
+import { computed, createBlock, createElementBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, unref } from "vue";
+import { ScalarIconWarning, ScalarIconWarningCircle } from "@scalar/icons";
+var ScalarFormError_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarFormError",
+	props: {
+		variant: { default: "error" },
+		icon: {}
+	},
+	setup(__props) {
+		const iconIs = computed(() => {
+			if (__props.icon) return __props.icon;
+			return __props.variant === "error" ? ScalarIconWarningCircle : ScalarIconWarning;
+		});
+		const variants = cva({
+			base: "flex items-baseline gap-1.5 rounded border p-2",
+			variants: { variant: {
+				error: "border-c-danger bg-b-danger text-c-danger",
+				warning: "border-c-alert bg-b-alert text-c-alert"
+			} }
+		});
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({ role: "alert" }, unref(cx)(unref(variants)({ variant: __props.variant }))), [(openBlock(), createBlock(resolveDynamicComponent(iconIs.value), {
+				class: "relative top-0.5 shrink-0",
+				weight: "bold"
+			})), renderSlot(_ctx.$slots, "default")], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarFormError_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarFormError.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarForm/ScalarFormError.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFormError.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_mergeProps","_unref","_createBlock","_resolveDynamicComponent","_renderSlot"],"sources":["../../../src/components/ScalarForm/ScalarFormError.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form Error component\n *\n * Displays an error or warning message with an icon.\n *\n * @example\n * <ScalarFormError variant=\"error\">Something went wrong</ScalarFormError>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconWarning, ScalarIconWarningCircle } from '@scalar/icons'\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed, type Component } from 'vue'\n\nconst { variant = 'error', icon } = defineProps<{\n  /** The variant of the error */\n  variant?: 'error' | 'warning'\n  /** Whether to show the icon */\n  icon?: Component | undefined\n}>()\n\nconst iconIs = computed(() => {\n  if (icon) {\n    return icon\n  }\n  return variant === 'error' ? ScalarIconWarningCircle : ScalarIconWarning\n})\n\nconst variants = cva({\n  base: 'flex items-baseline gap-1.5 rounded border p-2',\n  variants: {\n    variant: {\n      error: 'border-c-danger bg-b-danger text-c-danger',\n      warning: 'border-c-alert bg-b-alert text-c-alert',\n    },\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"alert\"\n    v-bind=\"cx(variants({ variant }))\">\n    <component\n      :is=\"iconIs\"\n      class=\"relative top-0.5 shrink-0\"\n      weight=\"bold\" />\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;EAuBA,MAAM,SAAS,eAAe;GAC5B,IAAI,QAAA,MACF,OAAO,QAAA;GAET,OAAO,QAAA,YAAY,UAAU,0BAA0B;EACzD,CAAC;EAED,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,SAAS;IACP,OAAO;IACP,SAAS;GACX,EACF;EACF,CAAC;EAGD,MAAM,EAAE,OAAO,UAAU;;GAGvB,OAAAA,UAAA,GAAAC,mBAQM,OARNC,WAQM,EAPJ,MAAK,QAAO,GACJC,MAAA,EAAA,CAAE,CAACA,MAAA,QAAA,CAAQ,CAAA,EAAA,SAAG,QAAA,QAAO,CAAA,CAAA,CAAA,GAAA,EAC7BH,UAAA,GAAAI,YAGkBC,wBAFX,OAAA,KAAM,GAAA;IACX,OAAM;IACN,QAAO;G,KACTC,WAAQ,KAAA,QAAA,SAAA,C"}

package/dist/components/ScalarForm/ScalarFormField.vue.js

@@ -1,4 +1,4 @@
-import ScalarFormField_vue_vue_type_script_setup_true_lang_default from "./ScalarFormField.vue.script.js";
+import ScalarFormField_vue_vue_type_script_setup_true_lang_default from "./ScalarFormField.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarForm/ScalarFormField.vue
 var ScalarFormField_default = ScalarFormField_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarForm/ScalarFormField.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarFormField.vue.js","names":[],"sources":["../../../src/components/ScalarForm/ScalarFormField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form Field component\n *\n * A single form input field with a label.\n *\n * @example\n *   <ScalarFormField>\n *     <template #label>Input Label</template>\n *     <ScalarTextInput ... />\n *   </ScalarFormField>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nconst { is = 'label' } = defineProps<{\n  is?: string | Component\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"cx('flex flex-col gap-1.5 rounded')\">\n    <div\n      v-if=\"$slots.label\"\n      class=\"flex items-start justify-between gap-2 text-sm/none text-c-1 whitespace-nowrap font-medium\">\n      <slot name=\"label\" />\n    </div>\n    <slot />\n    <span\n      v-if=\"$slots.below\"\n      :class=\"cx('-mt-1.5 text-sm')\">\n      <slot name=\"below\" />\n    </span>\n  </component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarFormField.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarForm/ScalarFormField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form Field component\n *\n * A single form input field with a label.\n *\n * @example\n *   <ScalarFormField>\n *     <template #label>Input Label</template>\n *     <ScalarTextInput ... />\n *   </ScalarFormField>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nconst { is = 'label' } = defineProps<{\n  is?: string | Component\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"cx('flex flex-col gap-1.5 rounded')\">\n    <div\n      v-if=\"$slots.label\"\n      class=\"text-c-1 flex items-start justify-between gap-2 text-sm/none font-medium whitespace-nowrap\">\n      <slot name=\"label\" />\n    </div>\n    <slot />\n    <span\n      v-if=\"$slots.below\"\n      :class=\"cx('-mt-1.5 text-sm')\">\n      <slot name=\"below\" />\n    </span>\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/ScalarForm/ScalarFormField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,32 @@
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createCommentVNode, createElementBlock, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
+//#region src/components/ScalarForm/ScalarFormField.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "text-c-1 flex items-start justify-between gap-2 text-sm/none font-medium whitespace-nowrap"
+};
+var ScalarFormField_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarFormField",
+	props: { is: { default: "label" } },
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.is), normalizeProps(guardReactiveProps(unref(cx)("flex flex-col gap-1.5 rounded"))), {
+				default: withCtx(() => [
+					_ctx.$slots.label ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "label")])) : createCommentVNode("", true),
+					renderSlot(_ctx.$slots, "default"),
+					_ctx.$slots.below ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(unref(cx)("-mt-1.5 text-sm"))
+					}, [renderSlot(_ctx.$slots, "below")], 2)) : createCommentVNode("", true)
+				]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { ScalarFormField_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarFormField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarForm/ScalarFormField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFormField.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","_unref","_withCtx","_createElementBlock","_renderSlot","_createCommentVNode","_normalizeClass"],"sources":["../../../src/components/ScalarForm/ScalarFormField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form Field component\n *\n * A single form input field with a label.\n *\n * @example\n *   <ScalarFormField>\n *     <template #label>Input Label</template>\n *     <ScalarTextInput ... />\n *   </ScalarFormField>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nconst { is = 'label' } = defineProps<{\n  is?: string | Component\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"cx('flex flex-col gap-1.5 rounded')\">\n    <div\n      v-if=\"$slots.label\"\n      class=\"text-c-1 flex items-start justify-between gap-2 text-sm/none font-medium whitespace-nowrap\">\n      <slot name=\"label\" />\n    </div>\n    <slot />\n    <span\n      v-if=\"$slots.below\"\n      :class=\"cx('-mt-1.5 text-sm')\">\n      <slot name=\"below\" />\n    </span>\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;EAuBA,MAAM,EAAE,OAAO,UAAU;;GAGvB,OAAAC,UAAA,GAAAC,YAcYC,wBAbL,QAAA,EAAE,GAAAC,eAAAC,mBACCC,MAAA,EAAA,CAAE,CAAA,+BAAA,CAAA,CAAA,GAAA;IACV,SAAAC,cAIM;KAHEP,KAAAA,OAAO,SADfC,UAAA,GAAAO,mBAIM,OAJN,YAIM,CADJC,WAAqB,KAAA,QAAA,OAAA,C;KAEvBA,WAAQ,KAAA,QAAA,SAAA;KAEAT,KAAAA,OAAO,SADfC,UAAA,GAAAO,mBAIO,QAAA;;MAFJ,OAAKG,eAAEL,MAAA,EAAA,CAAE,CAAA,iBAAA,CAAA;K,IACVG,WAAqB,KAAA,QAAA,OAAA,C"}

package/dist/components/ScalarForm/ScalarFormInput.vue.js

@@ -1,4 +1,4 @@
-import ScalarFormInput_vue_vue_type_script_setup_true_lang_default from "./ScalarFormInput.vue.script.js";
+import ScalarFormInput_vue_vue_type_script_setup_true_lang_default from "./ScalarFormInput.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarForm/ScalarFormInput.vue
 var ScalarFormInput_default = ScalarFormInput_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarForm/ScalarFormInput.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarFormInput.vue.js","names":[],"sources":["../../../src/components/ScalarForm/ScalarFormInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar form input base component\n *\n * Provides a base for styling scalar form inputs and buttons\n *\n * This is used internally by the ScalarTextInput component and others\n * If you want a text input consider using this component\n *\n * Renders a button by default can be used to render any kind of input or input wrapper\n *\n * @example\n * <ScalarFormInput  />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nimport { useFormGroupInput } from './useFormGroups'\n\nconst { is = 'button' } = defineProps<{\n  is?: string | Component\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\nconst grouped = useFormGroupInput()\n\nconst variants = cva({\n  base: [\n    // Layout\n    'bg-b-1.5 flex items-center text-c-2 gap-0.75 p-3 text-base',\n    //Focus\n    'outline-offset-[-1px] has-[:focus-visible]:outline',\n  ],\n  variants: {\n    grouped: {\n      true: 'first:rounded-t-[inherit] last:rounded-b-[inherit]',\n      false: 'rounded shadow-border',\n    },\n    button: { true: 'cursor-pointer hover:bg-b-2' },\n  },\n})\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"cx(variants({ button: is === 'button', grouped }))\">\n    <slot />\n  </component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarFormInput.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarForm/ScalarFormInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar form input base component\n *\n * Provides a base for styling scalar form inputs and buttons\n *\n * This is used internally by the ScalarTextInput component and others\n * If you want a text input consider using this component\n *\n * Renders a button by default can be used to render any kind of input or input wrapper\n *\n * @example\n * <ScalarFormInput  />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nimport { useFormGroupInput } from './useFormGroups'\n\nconst { is = 'button' } = defineProps<{\n  is?: string | Component\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\nconst grouped = useFormGroupInput()\n\nconst variants = cva({\n  base: [\n    // Layout\n    'bg-b-1.5 flex items-center text-c-2 gap-0.75 p-3 text-base',\n    //Focus\n    'outline-offset-[-1px] has-[:focus-visible]:outline',\n  ],\n  variants: {\n    grouped: {\n      true: 'first:rounded-t-[inherit] last:rounded-b-[inherit]',\n      false: 'rounded shadow-border',\n    },\n    button: { true: 'cursor-pointer hover:bg-b-2' },\n  },\n})\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"cx(variants({ button: is === 'button', grouped }))\">\n    <slot />\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/ScalarForm/ScalarFormInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,35 @@
+import { useFormGroupInput } from "./useFormGroups.js";
+import { cva, useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
+var ScalarFormInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarFormInput",
+	props: { is: { default: "button" } },
+	setup(__props) {
+		const { cx } = useBindCx();
+		const grouped = useFormGroupInput();
+		const variants = cva({
+			base: ["bg-b-1.5 flex items-center text-c-2 gap-0.75 p-3 text-base", "outline-offset-[-1px] has-[:focus-visible]:outline"],
+			variants: {
+				grouped: {
+					true: "first:rounded-t-[inherit] last:rounded-b-[inherit]",
+					false: "rounded shadow-border"
+				},
+				button: { true: "cursor-pointer hover:bg-b-2" }
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.is), mergeProps({ type: __props.is === "button" ? "button" : void 0 }, unref(cx)(unref(variants)({
+				button: __props.is === "button",
+				grouped: unref(grouped)
+			}))), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["type"]);
+		};
+	}
+});
+//#endregion
+export { ScalarFormInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarFormInput.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarForm/ScalarFormInput.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFormInput.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_unref","_withCtx","_renderSlot"],"sources":["../../../src/components/ScalarForm/ScalarFormInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar form input base component\n *\n * Provides a base for styling scalar form inputs and buttons\n *\n * This is used internally by the ScalarTextInput component and others\n * If you want a text input consider using this component\n *\n * Renders a button by default can be used to render any kind of input or input wrapper\n *\n * @example\n * <ScalarFormInput  />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nimport { useFormGroupInput } from './useFormGroups'\n\nconst { is = 'button' } = defineProps<{\n  is?: string | Component\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\nconst grouped = useFormGroupInput()\n\nconst variants = cva({\n  base: [\n    // Layout\n    'bg-b-1.5 flex items-center text-c-2 gap-0.75 p-3 text-base',\n    //Focus\n    'outline-offset-[-1px] has-[:focus-visible]:outline',\n  ],\n  variants: {\n    grouped: {\n      true: 'first:rounded-t-[inherit] last:rounded-b-[inherit]',\n      false: 'rounded shadow-border',\n    },\n    button: { true: 'cursor-pointer hover:bg-b-2' },\n  },\n})\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"cx(variants({ button: is === 'button', grouped }))\">\n    <slot />\n  </component>\n</template>\n"],"mappings":";;;;;;;;EA2BA,MAAM,EAAE,OAAO,UAAU;EAEzB,MAAM,UAAU,kBAAkB;EAElC,MAAM,WAAW,IAAI;GACnB,MAAM,CAEJ,8DAEA,oDACF;GACA,UAAU;IACR,SAAS;KACP,MAAM;KACN,OAAO;IACT;IACA,QAAQ,EAAE,MAAM,8BAA8B;GAChD;EACF,CAAC;;GAGC,OAAAA,UAAA,GAAAC,YAKYC,wBAJL,QAAA,EAAE,GADTC,WAKY,EAHT,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA,EAC5B,GAAAC,MAAA,EAAA,CAAE,CAACA,MAAA,QAAA,CAAQ,CAAA;IAAA,QAAW,QAAA,OAAE;IAAA,SAAeA,MAAA,OAAA;GAAO,CAAA,CAAA,CAAA,GAAA;IACtD,SAAAC,cAAQ,CAARC,WAAQ,KAAA,QAAA,SAAA,C"}

package/dist/components/ScalarForm/ScalarFormInputGroup.vue.js

@@ -1,4 +1,4 @@
-import ScalarFormInputGroup_vue_vue_type_script_setup_true_lang_default from "./ScalarFormInputGroup.vue.script.js";
+import ScalarFormInputGroup_vue_vue_type_script_setup_true_lang_default from "./ScalarFormInputGroup.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarForm/ScalarFormInputGroup.vue
 var ScalarFormInputGroup_default = ScalarFormInputGroup_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarForm/ScalarFormInputGroup.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarFormInputGroup.vue.js","names":[],"sources":["../../../src/components/ScalarForm/ScalarFormInputGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form Group component\n *\n * Groups a set of ScalarFormInput or their derived components.\n *\n * @example\n * <ScalarFormInputGroup>\n *     <!-- Inputs... -->\n * </ScalarFormInputGroup>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nimport { useFormGroup } from './useFormGroups'\n\nconst { is = 'div' } = defineProps<{\n  /** The element to render\n   *\n   * If you want to use the group outside of a ScalarFormField,\n   * you can set this to 'fieldset'.\n   *\n   * @default 'div'\n   */\n  is?: string | Component\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\nuseFormGroup()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"cx('flex flex-col border rounded divide-y')\">\n    <slot />\n  </component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarFormInputGroup.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarForm/ScalarFormInputGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form Group component\n *\n * Groups a set of ScalarFormInput or their derived components.\n *\n * @example\n * <ScalarFormInputGroup>\n *     <!-- Inputs... -->\n * </ScalarFormInputGroup>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nimport { useFormGroup } from './useFormGroups'\n\nconst { is = 'div' } = defineProps<{\n  /** The element to render\n   *\n   * If you want to use the group outside of a ScalarFormField,\n   * you can set this to 'fieldset'.\n   *\n   * @default 'div'\n   */\n  is?: string | Component\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\nuseFormGroup()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"cx('flex flex-col border rounded divide-y')\">\n    <slot />\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/ScalarForm/ScalarFormInputGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,22 @@
+import { useFormGroup } from "./useFormGroups.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
+var ScalarFormInputGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarFormInputGroup",
+	props: { is: { default: "div" } },
+	setup(__props) {
+		const { cx } = useBindCx();
+		useFormGroup();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.is), normalizeProps(guardReactiveProps(unref(cx)("flex flex-col border rounded divide-y"))), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { ScalarFormInputGroup_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarFormInputGroup.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarForm/ScalarFormInputGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFormInputGroup.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","_unref","_withCtx","_renderSlot"],"sources":["../../../src/components/ScalarForm/ScalarFormInputGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form Group component\n *\n * Groups a set of ScalarFormInput or their derived components.\n *\n * @example\n * <ScalarFormInputGroup>\n *     <!-- Inputs... -->\n * </ScalarFormInputGroup>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nimport { useFormGroup } from './useFormGroups'\n\nconst { is = 'div' } = defineProps<{\n  /** The element to render\n   *\n   * If you want to use the group outside of a ScalarFormField,\n   * you can set this to 'fieldset'.\n   *\n   * @default 'div'\n   */\n  is?: string | Component\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\nuseFormGroup()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"cx('flex flex-col border rounded divide-y')\">\n    <slot />\n  </component>\n</template>\n"],"mappings":";;;;;;;;EA+BA,MAAM,EAAE,OAAO,UAAU;EAEzB,aAAa;;GAGX,OAAAA,UAAA,GAAAC,YAIYC,wBAHL,QAAA,EAAE,GAAAC,eAAAC,mBACCC,MAAA,EAAA,CAAE,CAAA,uCAAA,CAAA,CAAA,GAAA;IACV,SAAAC,cAAQ,CAARC,WAAQ,KAAA,QAAA,SAAA,C"}

package/dist/components/ScalarForm/ScalarFormSection.vue.js

@@ -1,10 +1,10 @@
 import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
-import ScalarFormSection_vue_vue_type_script_lang_default from "./ScalarFormSection.vue.script.js";
+import ScalarFormSection_vue_vue_type_script_lang_default from "./ScalarFormSection.vue_vue_type_script_lang.js";
 import { createElementBlock, createElementVNode, openBlock, renderSlot } from "vue";
 //#region src/components/ScalarForm/ScalarFormSection.vue
 var _hoisted_1 = { class: "flex min-w-0 flex-col gap-3" };
 var _hoisted_2 = { class: "contents" };
-var _hoisted_3 = { class: "text-base font-medium text-c-1" };
+var _hoisted_3 = { class: "text-c-1 text-base font-medium" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createElementBlock("fieldset", _hoisted_1, [createElementVNode("legend", _hoisted_2, [createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "label")])]), renderSlot(_ctx.$slots, "default")]);
 }

package/dist/components/ScalarForm/ScalarFormSection.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarFormSection.vue.js","names":[],"sources":["../../../src/components/ScalarForm/ScalarFormSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form Section component\n *\n * A collection of form fields grouped together with a title.\n *\n * @example\n *   <ScalarFormSection>\n *     <template #label>Section Label</template>\n *     <!-- Section content -->\n *   </ScalarFormSection>\n */\nexport default {}\n</script>\n<template>\n  <fieldset class=\"flex min-w-0 flex-col gap-3\">\n    <!-- Legend and flexbox have some issues -->\n    <legend class=\"contents\">\n      <span class=\"text-base font-medium text-c-1\">\n        <slot name=\"label\" />\n      </span>\n    </legend>\n    <slot />\n  </fieldset>\n</template>\n"],"mappings":";;;;mBAeY,OAAM,8BAA6B;mBAEnC,OAAM,WAAU;mBAChB,OAAM,iCAAgC;;qBAHhD,mBAQW,YARX,YAQW,CANT,mBAIS,UAJT,YAIS,CAHP,mBAEO,QAFP,YAEO,CADL,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA,CAAA,CAAA,GAGzB,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarFormSection.vue.js","names":["_openBlock","_createElementBlock","_createElementVNode","_renderSlot","_sfc_main"],"sources":["../../../src/components/ScalarForm/ScalarFormSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form Section component\n *\n * A collection of form fields grouped together with a title.\n *\n * @example\n *   <ScalarFormSection>\n *     <template #label>Section Label</template>\n *     <!-- Section content -->\n *   </ScalarFormSection>\n */\nexport default {}\n</script>\n<template>\n  <fieldset class=\"flex min-w-0 flex-col gap-3\">\n    <!-- Legend and flexbox have some issues -->\n    <legend class=\"contents\">\n      <span class=\"text-c-1 text-base font-medium\">\n        <slot name=\"label\" />\n      </span>\n    </legend>\n    <slot />\n  </fieldset>\n</template>\n"],"mappings":";;;;AAeY,IAAA,aAAA,EAAA,OAAM,8BAA6B;AAEnC,IAAA,aAAA,EAAA,OAAM,WAAU;AAChB,IAAA,aAAA,EAAA,OAAM,iCAAgC;;CAHhD,OAAAA,UAAA,GAAAC,mBAQW,YARX,YAQW,CANTC,mBAIS,UAJT,YAIS,CAHPA,mBAEO,QAFP,YAEO,CADLC,WAAqB,KAAA,QAAA,OAAA,C,MAGzBA,WAAQ,KAAA,QAAA,SAAA,C"}

package/dist/components/ScalarForm/ScalarFormSection.vue_vue_type_script_lang.js

@@ -0,0 +1,17 @@
+//#region src/components/ScalarForm/ScalarFormSection.vue?vue&type=script&lang.ts
+/**
+* Scalar Form Section component
+*
+* A collection of form fields grouped together with a title.
+*
+* @example
+*   <ScalarFormSection>
+*     <template #label>Section Label</template>
+*     <!-- Section content -->
+*   </ScalarFormSection>
+*/
+var ScalarFormSection_vue_vue_type_script_lang_default = {};
+//#endregion
+export { ScalarFormSection_vue_vue_type_script_lang_default as default };
+
+//# sourceMappingURL=ScalarFormSection.vue_vue_type_script_lang.js.map

package/dist/components/ScalarForm/ScalarFormSection.vue_vue_type_script_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFormSection.vue_vue_type_script_lang.js","names":[],"sources":["../../../src/components/ScalarForm/ScalarFormSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form Section component\n *\n * A collection of form fields grouped together with a title.\n *\n * @example\n *   <ScalarFormSection>\n *     <template #label>Section Label</template>\n *     <!-- Section content -->\n *   </ScalarFormSection>\n */\nexport default {}\n</script>\n<template>\n  <fieldset class=\"flex min-w-0 flex-col gap-3\">\n    <!-- Legend and flexbox have some issues -->\n    <legend class=\"contents\">\n      <span class=\"text-c-1 text-base font-medium\">\n        <slot name=\"label\" />\n      </span>\n    </legend>\n    <slot />\n  </fieldset>\n</template>\n"],"mappings":";;;;;;;;;;;;AAYA,IAAA,qDAAe,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHeader/ScalarHeader.vue"],"names":[],"mappings":"AAoEA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,KAAK,CAAA;AAG9C;;;;;;;;;;;;;;;;;;;;;;GAsBG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,yEAAyE;SACpE,MAAM,GAAG,SAAS;;IADvB,yEAAyE;SACpE,MAAM,GAAG,SAAS;;IAMvB,0EAA0E;gBAC9D,OAAO;EAkEjB,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHeader/ScalarHeader.vue"],"names":[],"mappings":"AAoEA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,KAAK,CAAA;AAG9C;;;;;;;;;;;;;;;;;;;;;;GAsBG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,yEAAyE;SACpE,MAAM,GAAG,SAAS;;IADvB,yEAAyE;SACpE,MAAM,GAAG,SAAS;;IAMvB,0EAA0E;gBAC9D,OAAO;EAkEjB,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/ScalarHeader/ScalarHeader.vue.js

@@ -1,4 +1,4 @@
-import ScalarHeader_vue_vue_type_script_setup_true_lang_default from "./ScalarHeader.vue.script.js";
+import ScalarHeader_vue_vue_type_script_setup_true_lang_default from "./ScalarHeader.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarHeader/ScalarHeader.vue
 var ScalarHeader_default = ScalarHeader_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarHeader.vue.js","names":[],"sources":["../../../src/components/ScalarHeader/ScalarHeader.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar header component\n *\n * Provides the header chrome; layout is left to the consumer. Columns hug their\n * content, so give the content-bearing one `flex-1` to take the free space - that\n * is also the column that absorbs the shrinking when space runs out.\n *\n * Headers that used the old middle slot are no longer centred: wrap that content\n * in a `ScalarHeaderColumn` with `justify-center` and give both side columns\n * `flex-1`.\n *\n * @example\n * ```html\n * <ScalarHeader>\n *   <ScalarHeaderColumn class=\"flex-1\">\n *     <ScalarMenu />\n *   </ScalarHeaderColumn>\n *   <ScalarHeaderColumn class=\"justify-end\">\n *     <ScalarHeaderButton cta>Register</ScalarHeaderButton>\n *   </ScalarHeaderColumn>\n * </ScalarHeader>\n * ```\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component, useSlots } from 'vue'\n\nconst { is = 'header' } = defineProps<{\n  /** Render as a `div` when nested inside an existing `header` landmark */\n  is?: string | Component\n}>()\n\ndefineSlots<{\n  /** The contents of the header, typically `ScalarHeaderColumn` children */\n  default?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\nconst slots = useSlots()\n\n// Vue drops content for slots we no longer render, so an unmigrated consumer\n// would otherwise just get an empty header.\nif (slots.start || slots.end) {\n  console.warn(\n    'ScalarHeader: the `start` and `end` slots have been removed. Compose `ScalarHeaderColumn` children in the default slot instead.',\n  )\n}\n</script>\n<template>\n  <component\n    :is\n    v-bind=\"\n      cx(\n        'flex min-h-header min-w-0 items-center justify-between gap-2 border-b px-3',\n        'bg-b-header-1 text-c-header border-border-header',\n      )\n    \">\n    <slot />\n  </component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarHeader.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarHeader/ScalarHeader.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar header component\n *\n * Provides the header chrome; layout is left to the consumer. Columns hug their\n * content, so give the content-bearing one `flex-1` to take the free space - that\n * is also the column that absorbs the shrinking when space runs out.\n *\n * Headers that used the old middle slot are no longer centred: wrap that content\n * in a `ScalarHeaderColumn` with `justify-center` and give both side columns\n * `flex-1`.\n *\n * @example\n * ```html\n * <ScalarHeader>\n *   <ScalarHeaderColumn class=\"flex-1\">\n *     <ScalarMenu />\n *   </ScalarHeaderColumn>\n *   <ScalarHeaderColumn class=\"justify-end\">\n *     <ScalarHeaderButton cta>Register</ScalarHeaderButton>\n *   </ScalarHeaderColumn>\n * </ScalarHeader>\n * ```\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useSlots, type Component } from 'vue'\n\nconst { is = 'header' } = defineProps<{\n  /** Render as a `div` when nested inside an existing `header` landmark */\n  is?: string | Component\n}>()\n\ndefineSlots<{\n  /** The contents of the header, typically `ScalarHeaderColumn` children */\n  default?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\nconst slots = useSlots()\n\n// Vue drops content for slots we no longer render, so an unmigrated consumer\n// would otherwise just get an empty header.\nif (slots.start || slots.end) {\n  console.warn(\n    'ScalarHeader: the `start` and `end` slots have been removed. Compose `ScalarHeaderColumn` children in the default slot instead.',\n  )\n}\n</script>\n<template>\n  <component\n    :is\n    v-bind=\"\n      cx(\n        'flex min-h-header min-w-0 items-center justify-between gap-2 border-b px-3',\n        'bg-b-header-1 text-c-header border-border-header',\n      )\n    \">\n    <slot />\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/ScalarHeader/ScalarHeader.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,22 @@
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, unref, useSlots, withCtx } from "vue";
+var ScalarHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarHeader",
+	props: { is: { default: "header" } },
+	setup(__props) {
+		const { cx } = useBindCx();
+		const slots = useSlots();
+		if (slots.start || slots.end) console.warn("ScalarHeader: the `start` and `end` slots have been removed. Compose `ScalarHeaderColumn` children in the default slot instead.");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.is), normalizeProps(guardReactiveProps(unref(cx)("flex min-h-header min-w-0 items-center justify-between gap-2 border-b px-3", "bg-b-header-1 text-c-header border-border-header"))), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { ScalarHeader_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarHeader.vue_vue_type_script_setup_true_lang.js.map