@scalar/components 0.20.12 → 0.21.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFloating.vue.js","names":[],"sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"sourcesContent":["<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, 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)\nconst { floatingStyles, middlewareData } = useFloating(targetRef, floatingRef, {\n  placement: computed(() => placement ?? 'bottom'),\n  whileElementsMounted: autoUpdate,\n  middleware: computed(() => [\n    offsetMiddleware(offset),\n    flip(),\n    shift({ padding: 10 }),\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) - 20}px`,\n          maxHeight: `${Math.max(0, availableHeight) - 20}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":""}

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

@@ -0,0 +1,91 @@
+import ScalarTeleport_default from "../ScalarTeleport/ScalarTeleport.vue.js";
+import { useResizeWithTarget } from "./useResizeWithTarget.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, 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";
+//#region src/components/ScalarFloating/ScalarFloating.vue?vue&type=script&setup=true&lang.ts
+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);
+		const { floatingStyles, middlewareData } = useFloating(targetRef, floatingRef, {
+			placement: computed(() => __props.placement ?? "bottom"),
+			whileElementsMounted: autoUpdate,
+			middleware: computed(() => [
+				offset(__props.offset),
+				flip(),
+				shift({ padding: 10 }),
+				size({ apply({ availableWidth, availableHeight, elements }) {
+					Object.assign(elements.floating.style, {
+						maxWidth: `${Math.max(0, availableWidth) - 20}px`,
+						maxHeight: `${Math.max(0, availableHeight) - 20}px`
+					});
+				} }),
+				...__props.middleware
+			])
+		});
+		__expose({ 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: "relative z-context",
+					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.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFloating.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"sourcesContent":["<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, 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)\nconst { floatingStyles, middlewareData } = useFloating(targetRef, floatingRef, {\n  placement: computed(() => placement ?? 'bottom'),\n  whileElementsMounted: autoUpdate,\n  middleware: computed(() => [\n    offsetMiddleware(offset),\n    flip(),\n    shift({ padding: 10 }),\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) - 20}px`,\n          maxHeight: `${Math.max(0, availableHeight) - 20}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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,MAAM,cAAuC,IAAI,KAAI;EACrD,MAAM,aAAsC,IAAI,KAAI;EAEpD,MAAM,YAAY,eAAwC;AACxD,OAAI,OAAO,WAAW,eAAe,WAAW,OAAO;AAErD,QAAI,OAAO,QAAA,WAAW,UAAU;KAC9B,MAAM,IAAI,SAAS,eAAe,QAAA,OAAM;AACxC,SAAI,EACF,QAAO;AAET,aAAQ,KAAK,mCAAmC,QAAA,OAAO,aAAY;eAG5D,QAAA,kBAAkB,YACzB,QAAO,QAAA;IAGT,MAAM,aAAa,WAAW,MAAM,WAAW;AAC/C,QAAI,sBAAsB,YACxB,QAAO;AAET,WAAO,WAAW;;IAIrB;EAED,MAAM,aAAa,oBAAoB,WAAW,EAChD,SAAS,eAAe,QAAA,OAAO,EAChC,CAAA;EAED,MAAM,cAAc,eAClB,YAAY,QAAA,aAAa,SAAS,KAAK,MACnC,WAAW,MAAM,QACjB,KAAA,EACN;EAEA,MAAM,eAAe,eACnB,YAAY,QAAA,aAAa,SAAS,KAAK,MACnC,WAAW,OAAO,QAClB,KAAA,EACN;EACA,MAAM,EAAE,gBAAgB,mBAAmB,YAAY,WAAW,aAAa;GAC7E,WAAW,eAAe,QAAA,aAAa,SAAS;GAChD,sBAAsB;GACtB,YAAY,eAAe;IACzB,OAAiB,QAAA,OAAO;IACxB,MAAM;IACN,MAAM,EAAE,SAAS,IAAI,CAAC;IACtB,KAAK,EACH,MAAM,EAAE,gBAAgB,iBAAiB,YAAY;AAGnD,YAAO,OAAO,SAAS,SAAS,OAAO;MACrC,UAAU,GAAG,KAAK,IAAI,GAAG,eAAe,GAAG,GAAG;MAC9C,WAAW,GAAG,KAAK,IAAI,GAAG,gBAAgB,GAAG,GAAG;MACjD,CAAA;OAEJ,CAAC;IACF,GAAG,QAAA;IACJ,CAAC;GACH,CAAA;AAED,WAAa,EAEX,WACD,CAAA;;2DAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,SAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,EAGFA,KAAAA,OAAO,YAAA,WAAA,EADf,YAciB,MAAA,uBAAA,EAAA;;IAZd,UAAQ,CAAG,QAAA;IACX,IAAE,OAAS,QAAA,aAAQ,WAAgB,QAAA,WAAW,KAAA;;2BAUzC,CATN,mBASM,OAAA;cARA;KAAJ,KAAI;KACJ,OAAM;KACL,OAAK,eAAE,MAAA,eAAc,CAAA;QACtB,WAIyB,KAAA,QAAA,YAAA;KAHtB,MAAM,MAAA,eAAc;KACpB,QAAQ,aAAA;KAER,OAAO,YAAA"}

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

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

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

@@ -0,0 +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 backdrop for the floating element\n * This is used internally by a number of the Scalar floating components\n * (e.g. Dropdown, Popover, Listbox)\n *\n * You can use this component directly if you need to customize the backdrop\n * for a floating component\n *\n * @example\n * <ScalarDropdown>\n *   <!-- Menu stuff -->\n *   <template #backdrop>\n *     <ScalarFloatingBackdrop />\n *   </template>\n * </ScalarDropdown>\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('absolute inset-0 -z-1 rounded bg-b-1 shadow-lg brightness-lifted')\n    \">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarFloating/ScalarFloatingBackdrop.vue.script.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 bg-b-1 shadow-lg brightness-lifted"))), [renderSlot(_ctx.$slots, "default")], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarFloatingBackdrop_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarFloatingBackdrop.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFloatingBackdrop.vue.script.js","names":[],"sources":["../../../src/components/ScalarFloating/ScalarFloatingBackdrop.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar floating backdrop component\n *\n * Provides an absolutely positioned backdrop for the floating element\n * This is used internally by a number of the Scalar floating components\n * (e.g. Dropdown, Popover, Listbox)\n *\n * You can use this component directly if you need to customize the backdrop\n * for a floating component\n *\n * @example\n * <ScalarDropdown>\n *   <!-- Menu stuff -->\n *   <template #backdrop>\n *     <ScalarFloatingBackdrop />\n *   </template>\n * </ScalarDropdown>\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('absolute inset-0 -z-1 rounded bg-b-1 shadow-lg brightness-lifted')\n    \">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;EAyBA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAKM,OAAA,eAAA,mBAJW,MAAA,GAAE,CAAA,mEAAA,CAAA,CAAA,EAAA,CAGjB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}

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

@@ -1,4 +1,4 @@
-export { default as ScalarFloating } from './ScalarFloating.vue';
-export { default as ScalarFloatingBackdrop } from './ScalarFloatingBackdrop.vue';
+export { default as ScalarFloating } from './ScalarFloating.vue.js';
+export { default as ScalarFloatingBackdrop } from './ScalarFloatingBackdrop.vue.js';
 export type { FloatingOptions as ScalarFloatingOptions } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ScalarFloating/useResizeWithTarget.js

@@ -0,0 +1,28 @@
+import { computed, ref, toValue, watch } from "vue";
+//#region src/components/ScalarFloating/useResizeWithTarget.ts
+/**
+* Resize a floating element to match a target element
+*/
+function useResizeWithTarget(target, opts = { enabled: ref(true) }) {
+	const targetWidth = ref(0);
+	const targetHeight = ref(0);
+	const observer = ref();
+	if (typeof ResizeObserver !== "undefined") observer.value = new ResizeObserver(([entry]) => {
+		if (!entry) return;
+		targetWidth.value = entry.borderBoxSize[0]?.inlineSize ?? 0;
+		targetHeight.value = entry.borderBoxSize[0]?.blockSize ?? 0;
+	});
+	watch([() => toValue(opts.enabled), () => toValue(target)], ([enabled, element]) => {
+		if (!element || !observer.value) return;
+		if (enabled) observer.value.observe(element);
+		else observer.value.disconnect();
+	}, { immediate: true });
+	return {
+		width: computed(() => toValue(opts.enabled) ? `${targetWidth.value}px` : void 0),
+		height: computed(() => toValue(opts.enabled) ? `${targetHeight.value}px` : void 0)
+	};
+}
+//#endregion
+export { useResizeWithTarget };
+
+//# sourceMappingURL=useResizeWithTarget.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeWithTarget.js","names":[],"sources":["../../../src/components/ScalarFloating/useResizeWithTarget.ts"],"sourcesContent":["import { type MaybeRefOrGetter, computed, ref, toValue, watch } from 'vue'\n\ntype ResizeOptions = {\n  enabled?: MaybeRefOrGetter<boolean>\n}\n\n/**\n * Resize a floating element to match a target element\n */\nexport function useResizeWithTarget(\n  target: MaybeRefOrGetter<Element | undefined>,\n  opts: ResizeOptions = { enabled: ref(true) },\n) {\n  const targetWidth = ref(0)\n  const targetHeight = ref(0)\n  const observer = ref<ResizeObserver>()\n\n  if (typeof ResizeObserver !== 'undefined') {\n    observer.value = new ResizeObserver(([entry]) => {\n      if (!entry) {\n        return\n      }\n      targetWidth.value = entry.borderBoxSize[0]?.inlineSize ?? 0\n      targetHeight.value = entry.borderBoxSize[0]?.blockSize ?? 0\n    })\n  }\n\n  watch(\n    [() => toValue(opts.enabled), () => toValue(target)],\n    ([enabled, element]) => {\n      if (!element || !observer.value) {\n        return\n      }\n      if (enabled) {\n        observer.value.observe(element)\n      } else {\n        observer.value.disconnect()\n      }\n    },\n    { immediate: true },\n  )\n\n  return {\n    width: computed(() => (toValue(opts.enabled) ? `${targetWidth.value}px` : undefined)),\n    height: computed(() => (toValue(opts.enabled) ? `${targetHeight.value}px` : undefined)),\n  }\n}\n"],"mappings":";;;;;AASA,SAAgB,oBACd,QACA,OAAsB,EAAE,SAAS,IAAI,KAAK,EAAE,EAC5C;CACA,MAAM,cAAc,IAAI,EAAE;CAC1B,MAAM,eAAe,IAAI,EAAE;CAC3B,MAAM,WAAW,KAAqB;AAEtC,KAAI,OAAO,mBAAmB,YAC5B,UAAS,QAAQ,IAAI,gBAAgB,CAAC,WAAW;AAC/C,MAAI,CAAC,MACH;AAEF,cAAY,QAAQ,MAAM,cAAc,IAAI,cAAc;AAC1D,eAAa,QAAQ,MAAM,cAAc,IAAI,aAAa;GAC1D;AAGJ,OACE,OAAO,QAAQ,KAAK,QAAQ,QAAQ,QAAQ,OAAO,CAAC,GACnD,CAAC,SAAS,aAAa;AACtB,MAAI,CAAC,WAAW,CAAC,SAAS,MACxB;AAEF,MAAI,QACF,UAAS,MAAM,QAAQ,QAAQ;MAE/B,UAAS,MAAM,YAAY;IAG/B,EAAE,WAAW,MAAM,CACpB;AAED,QAAO;EACL,OAAO,eAAgB,QAAQ,KAAK,QAAQ,GAAG,GAAG,YAAY,MAAM,MAAM,KAAA,EAAW;EACrF,QAAQ,eAAgB,QAAQ,KAAK,QAAQ,GAAG,GAAG,aAAa,MAAM,MAAM,KAAA,EAAW;EACxF"}

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

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

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

@@ -0,0 +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 as SubmitEvent)\">\n    <slot />\n  </form>\n</template>\n"],"mappings":""}

package/dist/components/ScalarForm/ScalarForm.vue.script.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.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarForm.vue.script.js","names":["$emit"],"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 as SubmitEvent)\">\n    <slot />\n  </form>\n</template>\n"],"mappings":";;;;;;;EAwBA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAIO,QAJP,WACU,MAGH,GAHK,CAAA,gBAAA,EAAA,EACT,UAAM,OAAA,OAAA,OAAA,KAAA,eAAA,WAAUA,KAAAA,MAAK,UAAW,OAAM,EAAA,CAAA,UAAA,CAAA,GAAA,CAAA,EAAA,CACvC,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFormError.vue.js","names":[],"sources":["../../../src/components/ScalarForm/ScalarFormError.vue"],"sourcesContent":["<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":""}

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

@@ -0,0 +1,36 @@
+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";
+//#region src/components/ScalarForm/ScalarFormError.vue?vue&type=script&setup=true&lang.ts
+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.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFormError.vue.script.js","names":[],"sources":["../../../src/components/ScalarForm/ScalarFormError.vue"],"sourcesContent":["<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":";;;;;;;;;;;;EAYA,MAAM,SAAS,eAAe;AAC5B,OAAI,QAAA,KACF,QAAO,QAAA;AAET,UAAO,QAAA,YAAY,UAAU,0BAA0B;IACxD;EAED,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,SAAS;IACP,OAAO;IACP,SAAS;IACV,EACF;GACF,CAAA;EAGD,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAQM,OARN,WAQM,EAPJ,MAAK,SAAO,EACJ,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA,EAAA,SAAG,QAAA,SAAO,CAAA,CAAA,CAAA,EAAA,EAAA,WAAA,EAC7B,YAGkB,wBAFX,OAAA,MAAM,EAAA;IACX,OAAM;IACN,QAAO;QACT,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}

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

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

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

@@ -0,0 +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":""}

package/dist/components/ScalarForm/ScalarFormField.vue.script.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: "flex items-start justify-between gap-2 text-sm/none text-c-1 whitespace-nowrap font-medium"
+};
+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.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFormField.vue.script.js","names":["$slots"],"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":";;;;;;;;;;;;EAuBA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,YAcY,wBAbL,QAAA,GAAE,EAAA,eAAA,mBACC,MAAA,GAAE,CAAA,gCAAA,CAAA,CAAA,EAAA;2BAKJ;KAHEA,KAAAA,OAAO,SAAA,WAAA,EADf,mBAIM,OAJN,YAIM,CADJ,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;KAEvB,WAAQ,KAAA,QAAA,UAAA;KAEAA,KAAAA,OAAO,SAAA,WAAA,EADf,mBAIO,QAAA;;MAFJ,OAAK,eAAE,MAAA,GAAE,CAAA,kBAAA,CAAA;SACV,WAAqB,KAAA,QAAA,QAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA"}

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

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

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

@@ -0,0 +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":""}

package/dist/components/ScalarForm/ScalarFormInput.vue.script.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.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFormInput.vue.script.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":";;;;;;;;EA2BA,MAAM,EAAE,OAAO,WAAU;EAEzB,MAAM,UAAU,mBAAkB;EAElC,MAAM,WAAW,IAAI;GACnB,MAAM,CAEJ,8DAEA,qDACD;GACD,UAAU;IACR,SAAS;KACP,MAAM;KACN,OAAO;KACR;IACD,QAAQ,EAAE,MAAM,+BAA+B;IAChD;GACF,CAAA;;uBAGC,YAKY,wBAJL,QAAA,GAAE,EADT,WAKY,EAHT,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA,GAAA,EAC5B,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA;IAAA,QAAW,QAAA,OAAE;IAAA,SAAe,MAAA,QAAO;IAAA,CAAA,CAAA,CAAA,EAAA;2BAC9C,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

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

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

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

@@ -0,0 +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":""}

package/dist/components/ScalarForm/ScalarFormInputGroup.vue.script.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.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFormInputGroup.vue.script.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":";;;;;;;;EA+BA,MAAM,EAAE,OAAO,WAAU;AAEzB,gBAAa;;uBAGX,YAIY,wBAHL,QAAA,GAAE,EAAA,eAAA,mBACC,MAAA,GAAE,CAAA,wCAAA,CAAA,CAAA,EAAA;2BACF,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

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

@@ -0,0 +1,15 @@
+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 { 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" };
+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")]);
+}
+var ScalarFormSection_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ScalarFormSection_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+//#endregion
+export { ScalarFormSection_default as default };
+
+//# sourceMappingURL=ScalarFormSection.vue.js.map

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

@@ -0,0 +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,+BAA6B;mBAEnC,OAAM,YAAU;mBAChB,OAAM,kCAAgC;;qBAHhD,mBAQW,YARX,YAQW,CANT,mBAIS,UAJT,YAIS,CAHP,mBAEO,QAFP,YAEO,CADL,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA,CAAA,CAAA,EAGzB,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/ScalarForm/ScalarFormSection.vue.script.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.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFormSection.vue.script.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":";;;;;;;;;;;;AAYA,IAAA,qDAAe,EAAC"}

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

@@ -1,7 +1,7 @@
-export { default as ScalarForm } from './ScalarForm.vue';
-export { default as ScalarFormError } from './ScalarFormError.vue';
-export { default as ScalarFormField } from './ScalarFormField.vue';
-export { default as ScalarFormInput } from './ScalarFormInput.vue';
-export { default as ScalarFormInputGroup } from './ScalarFormInputGroup.vue';
-export { default as ScalarFormSection } from './ScalarFormSection.vue';
+export { default as ScalarForm } from './ScalarForm.vue.js';
+export { default as ScalarFormError } from './ScalarFormError.vue.js';
+export { default as ScalarFormField } from './ScalarFormField.vue.js';
+export { default as ScalarFormInput } from './ScalarFormInput.vue.js';
+export { default as ScalarFormInputGroup } from './ScalarFormInputGroup.vue.js';
+export { default as ScalarFormSection } from './ScalarFormSection.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ScalarForm/useFormGroups.js

@@ -0,0 +1,26 @@
+import { inject, provide } from "vue";
+//#region src/components/ScalarForm/useFormGroups.ts
+/**
+* Tells a ScalarFormInput component that it is in a form group.
+*/
+var FORM_GROUP_SYMBOL = Symbol();
+/**
+* Check if we're in a form group.
+*
+* This is called from ScalarFormInput components.
+*/
+var useFormGroupInput = () => {
+	return inject(FORM_GROUP_SYMBOL, false);
+};
+/**
+* Set that this is a form group.
+*
+* This is called from ScalarFormInputGroup components.
+*/
+var useFormGroup = () => {
+	provide(FORM_GROUP_SYMBOL, true);
+};
+//#endregion
+export { useFormGroup, useFormGroupInput };
+
+//# sourceMappingURL=useFormGroups.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFormGroups.js","names":[],"sources":["../../../src/components/ScalarForm/useFormGroups.ts"],"sourcesContent":["import { type InjectionKey, inject, provide } from 'vue'\n\n/**\n * Tells a ScalarFormInput component that it is in a form group.\n */\nconst FORM_GROUP_SYMBOL = Symbol() as InjectionKey<boolean>\n\n/**\n * Check if we're in a form group.\n *\n * This is called from ScalarFormInput components.\n */\nexport const useFormGroupInput = () => {\n  return inject(FORM_GROUP_SYMBOL, false)\n}\n\n/**\n * Set that this is a form group.\n *\n * This is called from ScalarFormInputGroup components.\n */\nexport const useFormGroup = () => {\n  provide(FORM_GROUP_SYMBOL, true)\n}\n"],"mappings":";;;;;AAKA,IAAM,oBAAoB,QAAQ;;;;;;AAOlC,IAAa,0BAA0B;AACrC,QAAO,OAAO,mBAAmB,MAAM;;;;;;;AAQzC,IAAa,qBAAqB;AAChC,SAAQ,mBAAmB,KAAK"}

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

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

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

@@ -0,0 +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 * Used to create a standardized header for Scalar applications\n *\n * @example\n * ```html\n * <ScalarHeader>\n *   <template #start>\n *     <ScalarMenu />\n *     <ScalarHeaderButton>Login</ScalarHeaderButton>\n *     <ScalarHeaderButton>Register</ScalarHeaderButton>\n *   </template>\n *   <template #default>\n *     <ScalarHeaderButton>Middle thing</ScalarHeaderButton>\n *   </template>\n *   <template #end>\n *     <ScalarHeaderButton>Call to Action</ScalarHeaderButton>\n *   </template>\n * </ScalarHeader>\n * ```\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nconst { cx } = useBindCx()\n\ndefineSlots<{\n  /** The first section of the header, typically on the left */\n  start?(): unknown\n  /** The middle section of the header */\n  default?(): unknown\n  /** The last section of the header, typically on the right */\n  end?(): unknown\n}>()\n</script>\n<template>\n  <header\n    v-bind=\"\n      cx(\n        'flex min-h-header items-center justify-between gap-2 bg-b-2 border-b px-2 text-sm min-w-min',\n        '*:flex *:flex-1 *:items-center *:gap-px',\n      )\n    \">\n    <div class=\"justify-start\"><slot name=\"start\" /></div>\n    <div class=\"justify-center\"><slot /></div>\n    <div class=\"justify-end\"><slot name=\"end\" /></div>\n  </header>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,23 @@
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createElementBlock, createElementVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref } from "vue";
+//#region src/components/ScalarHeader/ScalarHeader.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "justify-start" };
+var _hoisted_2 = { class: "justify-center" };
+var _hoisted_3 = { class: "justify-end" };
+var ScalarHeader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ScalarHeader",
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("header", normalizeProps(guardReactiveProps(unref(cx)("flex min-h-header items-center justify-between gap-2 bg-b-2 border-b px-2 text-sm min-w-min", "*:flex *:flex-1 *:items-center *:gap-px"))), [
+				createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "start")]),
+				createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")]),
+				createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "end")])
+			], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarHeader_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarHeader.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarHeader.vue.script.js","names":[],"sources":["../../../src/components/ScalarHeader/ScalarHeader.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar header component\n *\n * Used to create a standardized header for Scalar applications\n *\n * @example\n * ```html\n * <ScalarHeader>\n *   <template #start>\n *     <ScalarMenu />\n *     <ScalarHeaderButton>Login</ScalarHeaderButton>\n *     <ScalarHeaderButton>Register</ScalarHeaderButton>\n *   </template>\n *   <template #default>\n *     <ScalarHeaderButton>Middle thing</ScalarHeaderButton>\n *   </template>\n *   <template #end>\n *     <ScalarHeaderButton>Call to Action</ScalarHeaderButton>\n *   </template>\n * </ScalarHeader>\n * ```\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nconst { cx } = useBindCx()\n\ndefineSlots<{\n  /** The first section of the header, typically on the left */\n  start?(): unknown\n  /** The middle section of the header */\n  default?(): unknown\n  /** The last section of the header, typically on the right */\n  end?(): unknown\n}>()\n</script>\n<template>\n  <header\n    v-bind=\"\n      cx(\n        'flex min-h-header items-center justify-between gap-2 bg-b-2 border-b px-2 text-sm min-w-min',\n        '*:flex *:flex-1 *:items-center *:gap-px',\n      )\n    \">\n    <div class=\"justify-start\"><slot name=\"start\" /></div>\n    <div class=\"justify-center\"><slot /></div>\n    <div class=\"justify-end\"><slot name=\"end\" /></div>\n  </header>\n</template>\n"],"mappings":";;;;;;;;;EA4BA,MAAM,EAAE,OAAO,WAAU;;uBAYvB,mBAUS,UAAA,eAAA,mBATQ,MAAA,GAAE,CAAA,+FAAA,0CAAA,CAAA,CAAA,EAAA;IAMjB,mBAAsD,OAAtD,YAAsD,CAA3B,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA;IAChD,mBAA0C,OAA1C,YAA0C,CAAd,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;IACpC,mBAAkD,OAAlD,YAAkD,CAAzB,WAAmB,KAAA,QAAA,MAAA,CAAA,CAAA"}