@scalar/components 0.32.1 → 0.33.0

package/dist/components/ScalarButton/ScalarButton.vue.js

@@ -1,4 +1,4 @@
-import ScalarButton_vue_vue_type_script_setup_true_lang_default from "./ScalarButton.vue.script.js";
+import ScalarButton_vue_vue_type_script_setup_true_lang_default from "./ScalarButton.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarButton/ScalarButton.vue
 var ScalarButton_default = ScalarButton_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarButton.vue.js","names":[],"sources":["../../../src/components/ScalarButton/ScalarButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Button Component\n *\n * Provides a styled button, if you are looking for\n * an icon only button, use ScalarIconButton instead,\n * it's a helpful wrapper around this component\n *\n * @example\n * <ScalarButton>\n *   <!-- Button label -->\n * </ScalarButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarLoading } from '../ScalarLoading'\nimport { BUTTON_VARIANT_STYLES } from './constants'\nimport type { ButtonSize, ClassList, ScalarButtonProps } from './types'\n\nconst {\n  is = 'button',\n  size = 'md',\n  variant = 'solid',\n} = defineProps<ScalarButtonProps>()\n\n/** Variant styles for the button (wrapper) */\nconst buttonVariants = cva({\n  base: 'scalar-button flex cursor-pointer items-center justify-center rounded font-medium -outline-offset-1',\n  variants: {\n    disabled: { true: 'bg-b-2 text-color-3 shadow-none' },\n    size: {\n      xs: 'px-2 py-1 text-xs/4',\n      sm: 'px-3.5 py-2 text-sm/4',\n      md: 'px-5 py-3 text-sm/4',\n    } satisfies Record<ButtonSize, ClassList>,\n    variant: BUTTON_VARIANT_STYLES,\n  },\n  compoundVariants: [\n    {\n      disabled: true,\n      variant: ['solid', 'outlined', 'ghost', 'gradient', 'danger'],\n      class:\n        'bg-b-2 text-c-3 shadow-none hover:bg-b-[_] cursor-not-allowed active:bg-b-[_] hover:text-c-[_] active:text-c-[_]',\n    },\n    {\n      disabled: true,\n      variant: ['gradient'],\n      class:\n        'to-b-1.5 bg-linear-to-b hover:bg-linear-to-b dark:hover:bg-linear-to-t',\n    },\n  ],\n})\n\n/** Variant styles for the button icon */\nconst iconVariants = cva({\n  base: 'shrink-0',\n  variants: {\n    size: {\n      xs: 'size-2.75 -ml-0.25 mr-1',\n      sm: 'size-3.5 -ml-0.25 mr-1',\n      md: 'size-3.5 -ml-0.5 mr-1.5',\n    } satisfies Record<ButtonSize, ClassList>,\n  },\n})\n\n/** Variant styles for the loading icon */\nconst loadingVariants = cva({\n  variants: {\n    size: {\n      xs: 'size-4',\n      sm: 'size-5',\n      md: 'size-6',\n    } satisfies Record<ButtonSize, ClassList>,\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :aria-disabled=\"disabled || undefined\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"\n      cx(buttonVariants({ disabled, size, variant }), {\n        relative: loader?.isActive,\n      })\n    \">\n    <div\n      v-if=\"$slots.icon || icon\"\n      :class=\"[iconVariants({ size }), { invisible: loader?.isActive }]\">\n      <slot name=\"icon\">\n        <component\n          :is=\"icon\"\n          class=\"size-full\" />\n      </slot>\n    </div>\n    <span\n      v-if=\"loader\"\n      :class=\"{ invisible: loader?.isActive }\">\n      <slot />\n    </span>\n    <slot v-else />\n    <div\n      v-if=\"loader?.isActive\"\n      class=\"centered\">\n      <ScalarLoading\n        :class=\"loadingVariants({ size })\"\n        :loader />\n    </div>\n  </component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarButton.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarButton/ScalarButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Button Component\n *\n * Provides a styled button, if you are looking for\n * an icon only button, use ScalarIconButton instead,\n * it's a helpful wrapper around this component\n *\n * @example\n * <ScalarButton>\n *   <!-- Button label -->\n * </ScalarButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarLoading } from '../ScalarLoading'\nimport { BUTTON_VARIANT_STYLES } from './constants'\nimport type { ButtonSize, ClassList, ScalarButtonProps } from './types'\n\nconst {\n  is = 'button',\n  size = 'md',\n  variant = 'solid',\n} = defineProps<ScalarButtonProps>()\n\n/** Variant styles for the button (wrapper) */\nconst buttonVariants = cva({\n  base: 'scalar-button flex cursor-pointer items-center justify-center rounded font-medium -outline-offset-1',\n  variants: {\n    disabled: { true: 'bg-b-2 text-color-3 shadow-none' },\n    size: {\n      xs: 'px-2 py-1 text-xs/4',\n      sm: 'px-3.5 py-2 text-sm/4',\n      md: 'px-5 py-3 text-sm/4',\n    } satisfies Record<ButtonSize, ClassList>,\n    variant: BUTTON_VARIANT_STYLES,\n  },\n  compoundVariants: [\n    {\n      disabled: true,\n      variant: ['solid', 'outlined', 'ghost', 'gradient', 'danger'],\n      class:\n        'bg-b-2 text-c-3 shadow-none hover:bg-b-[_] cursor-not-allowed active:bg-b-[_] hover:text-c-[_] active:text-c-[_]',\n    },\n    {\n      disabled: true,\n      variant: ['gradient'],\n      class:\n        'to-b-1.5 bg-linear-to-b hover:bg-linear-to-b dark:hover:bg-linear-to-t',\n    },\n  ],\n})\n\n/** Variant styles for the button icon */\nconst iconVariants = cva({\n  base: 'shrink-0',\n  variants: {\n    size: {\n      xs: 'size-2.75 -ml-0.25 mr-1',\n      sm: 'size-3.5 -ml-0.25 mr-1',\n      md: 'size-3.5 -ml-0.5 mr-1.5',\n    } satisfies Record<ButtonSize, ClassList>,\n  },\n})\n\n/** Variant styles for the loading icon */\nconst loadingVariants = cva({\n  variants: {\n    size: {\n      xs: 'size-4',\n      sm: 'size-5',\n      md: 'size-6',\n    } satisfies Record<ButtonSize, ClassList>,\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :aria-disabled=\"disabled || undefined\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"\n      cx(buttonVariants({ disabled, size, variant }), {\n        relative: loader?.isActive,\n      })\n    \">\n    <div\n      v-if=\"$slots.icon || icon\"\n      :class=\"[iconVariants({ size }), { invisible: loader?.isActive }]\">\n      <slot name=\"icon\">\n        <component\n          :is=\"icon\"\n          class=\"size-full\" />\n      </slot>\n    </div>\n    <span\n      v-if=\"loader\"\n      :class=\"{ invisible: loader?.isActive }\">\n      <slot />\n    </span>\n    <slot v-else />\n    <div\n      v-if=\"loader?.isActive\"\n      class=\"centered\">\n      <ScalarLoading\n        :class=\"loadingVariants({ size })\"\n        :loader />\n    </div>\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/ScalarButton/ScalarButton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,97 @@
+import ScalarLoading_default from "../ScalarLoading/ScalarLoading.vue.js";
+import { BUTTON_VARIANT_STYLES } from "./constants.js";
+import { cva, useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
+//#region src/components/ScalarButton/ScalarButton.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 3,
+	class: "centered"
+};
+var ScalarButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarButton",
+	props: {
+		is: { default: "button" },
+		variant: { default: "solid" },
+		size: { default: "md" },
+		disabled: { type: Boolean },
+		icon: { type: [Object, Function] },
+		loader: {}
+	},
+	setup(__props) {
+		/** Variant styles for the button (wrapper) */
+		const buttonVariants = cva({
+			base: "scalar-button flex cursor-pointer items-center justify-center rounded font-medium -outline-offset-1",
+			variants: {
+				disabled: { true: "bg-b-2 text-color-3 shadow-none" },
+				size: {
+					xs: "px-2 py-1 text-xs/4",
+					sm: "px-3.5 py-2 text-sm/4",
+					md: "px-5 py-3 text-sm/4"
+				},
+				variant: BUTTON_VARIANT_STYLES
+			},
+			compoundVariants: [{
+				disabled: true,
+				variant: [
+					"solid",
+					"outlined",
+					"ghost",
+					"gradient",
+					"danger"
+				],
+				class: "bg-b-2 text-c-3 shadow-none hover:bg-b-[_] cursor-not-allowed active:bg-b-[_] hover:text-c-[_] active:text-c-[_]"
+			}, {
+				disabled: true,
+				variant: ["gradient"],
+				class: "to-b-1.5 bg-linear-to-b hover:bg-linear-to-b dark:hover:bg-linear-to-t"
+			}]
+		});
+		/** Variant styles for the button icon */
+		const iconVariants = cva({
+			base: "shrink-0",
+			variants: { size: {
+				xs: "size-2.75 -ml-0.25 mr-1",
+				sm: "size-3.5 -ml-0.25 mr-1",
+				md: "size-3.5 -ml-0.5 mr-1.5"
+			} }
+		});
+		/** Variant styles for the loading icon */
+		const loadingVariants = cva({ variants: { size: {
+			xs: "size-4",
+			sm: "size-5",
+			md: "size-6"
+		} } });
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.is), mergeProps({
+				"aria-disabled": __props.disabled || void 0,
+				type: __props.is === "button" ? "button" : void 0
+			}, unref(cx)(unref(buttonVariants)({
+				disabled: __props.disabled,
+				size: __props.size,
+				variant: __props.variant
+			}), { relative: __props.loader?.isActive })), {
+				default: withCtx(() => [
+					_ctx.$slots.icon || __props.icon ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass([unref(iconVariants)({ size: __props.size }), { invisible: __props.loader?.isActive }])
+					}, [renderSlot(_ctx.$slots, "icon", {}, () => [(openBlock(), createBlock(resolveDynamicComponent(__props.icon), { class: "size-full" }))])], 2)) : createCommentVNode("", true),
+					__props.loader ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass({ invisible: __props.loader?.isActive })
+					}, [renderSlot(_ctx.$slots, "default")], 2)) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 2),
+					__props.loader?.isActive ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(ScalarLoading_default), {
+						class: normalizeClass(unref(loadingVariants)({ size: __props.size })),
+						loader: __props.loader
+					}, null, 8, ["class", "loader"])])) : createCommentVNode("", true)
+				]),
+				_: 3
+			}, 16, ["aria-disabled", "type"]);
+		};
+	}
+});
+//#endregion
+export { ScalarButton_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarButton.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarButton.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_unref","_withCtx","_createElementBlock","_normalizeClass","_renderSlot","_createCommentVNode","_createVNode","ScalarLoading"],"sources":["../../../src/components/ScalarButton/ScalarButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Button Component\n *\n * Provides a styled button, if you are looking for\n * an icon only button, use ScalarIconButton instead,\n * it's a helpful wrapper around this component\n *\n * @example\n * <ScalarButton>\n *   <!-- Button label -->\n * </ScalarButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarLoading } from '../ScalarLoading'\nimport { BUTTON_VARIANT_STYLES } from './constants'\nimport type { ButtonSize, ClassList, ScalarButtonProps } from './types'\n\nconst {\n  is = 'button',\n  size = 'md',\n  variant = 'solid',\n} = defineProps<ScalarButtonProps>()\n\n/** Variant styles for the button (wrapper) */\nconst buttonVariants = cva({\n  base: 'scalar-button flex cursor-pointer items-center justify-center rounded font-medium -outline-offset-1',\n  variants: {\n    disabled: { true: 'bg-b-2 text-color-3 shadow-none' },\n    size: {\n      xs: 'px-2 py-1 text-xs/4',\n      sm: 'px-3.5 py-2 text-sm/4',\n      md: 'px-5 py-3 text-sm/4',\n    } satisfies Record<ButtonSize, ClassList>,\n    variant: BUTTON_VARIANT_STYLES,\n  },\n  compoundVariants: [\n    {\n      disabled: true,\n      variant: ['solid', 'outlined', 'ghost', 'gradient', 'danger'],\n      class:\n        'bg-b-2 text-c-3 shadow-none hover:bg-b-[_] cursor-not-allowed active:bg-b-[_] hover:text-c-[_] active:text-c-[_]',\n    },\n    {\n      disabled: true,\n      variant: ['gradient'],\n      class:\n        'to-b-1.5 bg-linear-to-b hover:bg-linear-to-b dark:hover:bg-linear-to-t',\n    },\n  ],\n})\n\n/** Variant styles for the button icon */\nconst iconVariants = cva({\n  base: 'shrink-0',\n  variants: {\n    size: {\n      xs: 'size-2.75 -ml-0.25 mr-1',\n      sm: 'size-3.5 -ml-0.25 mr-1',\n      md: 'size-3.5 -ml-0.5 mr-1.5',\n    } satisfies Record<ButtonSize, ClassList>,\n  },\n})\n\n/** Variant styles for the loading icon */\nconst loadingVariants = cva({\n  variants: {\n    size: {\n      xs: 'size-4',\n      sm: 'size-5',\n      md: 'size-6',\n    } satisfies Record<ButtonSize, ClassList>,\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :aria-disabled=\"disabled || undefined\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"\n      cx(buttonVariants({ disabled, size, variant }), {\n        relative: loader?.isActive,\n      })\n    \">\n    <div\n      v-if=\"$slots.icon || icon\"\n      :class=\"[iconVariants({ size }), { invisible: loader?.isActive }]\">\n      <slot name=\"icon\">\n        <component\n          :is=\"icon\"\n          class=\"size-full\" />\n      </slot>\n    </div>\n    <span\n      v-if=\"loader\"\n      :class=\"{ invisible: loader?.isActive }\">\n      <slot />\n    </span>\n    <slot v-else />\n    <div\n      v-if=\"loader?.isActive\"\n      class=\"centered\">\n      <ScalarLoading\n        :class=\"loadingVariants({ size })\"\n        :loader />\n    </div>\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,iBAAiB,IAAI;GACzB,MAAM;GACN,UAAU;IACR,UAAU,EAAE,MAAM,kCAAkC;IACpD,MAAM;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;IACN;IACA,SAAS;GACX;GACA,kBAAkB,CAChB;IACE,UAAU;IACV,SAAS;KAAC;KAAS;KAAY;KAAS;KAAY;IAAQ;IAC5D,OACE;GACJ,GACA;IACE,UAAU;IACV,SAAS,CAAC,UAAU;IACpB,OACE;GACJ,CACF;EACF,CAAC;;EAGD,MAAM,eAAe,IAAI;GACvB,MAAM;GACN,UAAU,EACR,MAAM;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;GACN,EACF;EACF,CAAC;;EAGD,MAAM,kBAAkB,IAAI,EAC1B,UAAU,EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,EACF,EACF,CAAC;EAGD,MAAM,EAAE,OAAO,UAAU;;GAGvB,OAAAC,UAAA,GAAAC,YA+BYC,wBA9BL,QAAA,EAAE,GADTC,WA+BY;IA7BT,iBAAe,QAAA,YAAY,KAAA;IAC3B,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA;G,GACrBC,MAAA,EAAA,CAAE,CAACA,MAAA,cAAA,CAAc,CAAA;IAAA,UAAG,QAAA;IAAQ,MAAE,QAAA;IAAI,SAAE,QAAA;GAAO,CAAA,GAAA,EAAyB,UAAA,QAAA,QAAQ,S;IAK3F,SAAAC,cAQM;KAPEN,KAAAA,OAAO,QAAQ,QAAA,QADvBC,UAAA,GAAAM,mBAQM,OAAA;;MANH,OAAKC,eAAA,CAAGH,MAAA,YAAA,CAAY,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAA,EAAA,WAAkB,QAAA,QAAQ,SAAQ,CAAA,CAAA;K,IAC9DI,WAIO,KAAA,QAAA,QAAA,CAAA,SAAA,EAHLR,UAAA,GAAAC,YAEsBC,wBADf,QAAA,IAAI,GAAA,EACT,OAAM,YAAW,CAAA,E;KAIf,QAAA,UADRF,UAAA,GAAAM,mBAIO,QAAA;;MAFJ,OAAKC,eAAA,EAAA,WAAe,QAAA,QAAQ,SAAQ,CAAA;K,IACrCC,WAAQ,KAAA,QAAA,SAAA,C,SAEVA,WAAe,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA;KAEP,QAAA,QAAQ,YADhBR,UAAA,GAAAM,mBAMM,OANN,YAMM,CAHJI,YAEYN,MAAAO,qBAAA,GAAA;MADT,OAAKJ,eAAEH,MAAA,eAAA,CAAe,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,CAAA;MAC7B,QAAA,QAAA"}

package/dist/components/ScalarButton/index.js

@@ -1,2 +1 @@
-import ScalarButton_default from "./ScalarButton.vue.js";
-export { ScalarButton_default as ScalarButton };
+export { default as ScalarButton } from "./ScalarButton.vue.js";

package/dist/components/ScalarCard/ScalarCard.vue.js

@@ -1,4 +1,4 @@
-import ScalarCard_vue_vue_type_script_setup_true_lang_default from "./ScalarCard.vue.script.js";
+import ScalarCard_vue_vue_type_script_setup_true_lang_default from "./ScalarCard.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarCard/ScalarCard.vue
 var ScalarCard_default = ScalarCard_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarCard.vue.js","names":[],"sources":["../../../src/components/ScalarCard/ScalarCard.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card component\n *\n * Creates an aria region using the nearest ScalarCardHeader as the label\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/region_role\n *\n * @example\n * <ScalarCard>\n *   <ScalarCardHeader>Header</ScalarCardHeader>\n *   <ScalarCardSection>Content</ScalarCardSection>\n *   <ScalarCardFooter>Footer</ScalarCardFooter>\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { useCardRegion } from './useCardHeading'\n\nconst { label } = defineProps<{\n  /** The a11y label for the card region */\n  label?: string\n}>()\n\n// Get the id for the nearest ScalarCardHeader if it exists\nconst { id } = useCardRegion()\n\nconst labelAttrs = computed(() => {\n  if (label) {\n    // If a label is provided, use it\n    return { 'aria-label': label }\n  }\n  if (id.value) {\n    // If no label is provided, use the heading id\n    return { 'aria-labelledby': id.value }\n  }\n  // If no label or heading id is provided, don't add any aria attributes\n  return {}\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"group\"\n    v-bind=\"{\n      ...labelAttrs,\n      ...cx('scalar-card bg-b-2 flex flex-col divide-y rounded-xl border'),\n    }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarCard.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarCard/ScalarCard.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card component\n *\n * Creates an aria region using the nearest ScalarCardHeader as the label\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/region_role\n *\n * @example\n * <ScalarCard>\n *   <ScalarCardHeader>Header</ScalarCardHeader>\n *   <ScalarCardSection>Content</ScalarCardSection>\n *   <ScalarCardFooter>Footer</ScalarCardFooter>\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { useCardRegion } from './useCardHeading'\n\nconst { label } = defineProps<{\n  /** The a11y label for the card region */\n  label?: string\n}>()\n\n// Get the id for the nearest ScalarCardHeader if it exists\nconst { id } = useCardRegion()\n\nconst labelAttrs = computed(() => {\n  if (label) {\n    // If a label is provided, use it\n    return { 'aria-label': label }\n  }\n  if (id.value) {\n    // If no label is provided, use the heading id\n    return { 'aria-labelledby': id.value }\n  }\n  // If no label or heading id is provided, don't add any aria attributes\n  return {}\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"group\"\n    v-bind=\"{\n      ...labelAttrs,\n      ...cx('scalar-card bg-b-2 flex flex-col divide-y rounded-xl border'),\n    }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCard/ScalarCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,27 @@
+import { useCardRegion } from "./useCardHeading.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { computed, createElementBlock, defineComponent, mergeProps, openBlock, renderSlot, unref } from "vue";
+var ScalarCard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarCard",
+	props: { label: {} },
+	setup(__props) {
+		const { id } = useCardRegion();
+		const labelAttrs = computed(() => {
+			if (__props.label) return { "aria-label": __props.label };
+			if (id.value) return { "aria-labelledby": id.value };
+			return {};
+		});
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({ role: "group" }, {
+				...labelAttrs.value,
+				...unref(cx)("scalar-card bg-b-2 flex flex-col divide-y rounded-xl border")
+			}), [renderSlot(_ctx.$slots, "default")], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarCard_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarCard.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCard.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_mergeProps","_unref","_renderSlot"],"sources":["../../../src/components/ScalarCard/ScalarCard.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card component\n *\n * Creates an aria region using the nearest ScalarCardHeader as the label\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/region_role\n *\n * @example\n * <ScalarCard>\n *   <ScalarCardHeader>Header</ScalarCardHeader>\n *   <ScalarCardSection>Content</ScalarCardSection>\n *   <ScalarCardFooter>Footer</ScalarCardFooter>\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { useCardRegion } from './useCardHeading'\n\nconst { label } = defineProps<{\n  /** The a11y label for the card region */\n  label?: string\n}>()\n\n// Get the id for the nearest ScalarCardHeader if it exists\nconst { id } = useCardRegion()\n\nconst labelAttrs = computed(() => {\n  if (label) {\n    // If a label is provided, use it\n    return { 'aria-label': label }\n  }\n  if (id.value) {\n    // If no label is provided, use the heading id\n    return { 'aria-labelledby': id.value }\n  }\n  // If no label or heading id is provided, don't add any aria attributes\n  return {}\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"group\"\n    v-bind=\"{\n      ...labelAttrs,\n      ...cx('scalar-card bg-b-2 flex flex-col divide-y rounded-xl border'),\n    }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;EA6BA,MAAM,EAAE,OAAO,cAAc;EAE7B,MAAM,aAAa,eAAe;GAChC,IAAI,QAAA,OAEF,OAAO,EAAE,cAAc,QAAA,MAAM;GAE/B,IAAI,GAAG,OAEL,OAAO,EAAE,mBAAmB,GAAG,MAAM;GAGvC,OAAO,CAAC;EACV,CAAC;EAGD,MAAM,EAAE,OAAO,UAAU;;GAGvB,OAAAA,UAAA,GAAAC,mBAOM,OAPNC,WAOM,EANJ,MAAK,QAAO,GAAA;IACO,GAAA,WAAA;IAAqB,GAAAC,MAAA,EAAA,CAAE,CAAA,6DAAA;G,KAI1CC,WAAQ,KAAA,QAAA,SAAA,C"}

package/dist/components/ScalarCard/ScalarCardFooter.vue.js

@@ -1,4 +1,4 @@
-import ScalarCardFooter_vue_vue_type_script_setup_true_lang_default from "./ScalarCardFooter.vue.script.js";
+import ScalarCardFooter_vue_vue_type_script_setup_true_lang_default from "./ScalarCardFooter.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarCard/ScalarCardFooter.vue
 var ScalarCardFooter_default = ScalarCardFooter_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarCard/ScalarCardFooter.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCardFooter.vue.js","names":[],"sources":["../../../src/components/ScalarCard/ScalarCardFooter.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card footer component\n *\n * @example\n * <ScalarCard>\n *   ...\n *   <ScalarCardFooter>Footer</ScalarCardFooter>\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarCardSection from './ScalarCardSection.vue'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <ScalarCardSection v-bind=\"cx('scalar-card-footer')\">\n    <slot />\n  </ScalarCardSection>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarCardFooter.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarCard/ScalarCardFooter.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card footer component\n *\n * @example\n * <ScalarCard>\n *   ...\n *   <ScalarCardFooter>Footer</ScalarCardFooter>\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarCardSection from './ScalarCardSection.vue'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <ScalarCardSection v-bind=\"cx('scalar-card-footer')\">\n    <slot />\n  </ScalarCardSection>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCard/ScalarCardFooter.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,20 @@
+import ScalarCardSection_default from "./ScalarCardSection.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+var ScalarCardFooter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarCardFooter",
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ScalarCardSection_default, normalizeProps(guardReactiveProps(unref(cx)("scalar-card-footer"))), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { ScalarCardFooter_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarCardFooter.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarCard/ScalarCardFooter.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCardFooter.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","ScalarCardSection","_normalizeProps","_guardReactiveProps","_unref","_withCtx","_renderSlot"],"sources":["../../../src/components/ScalarCard/ScalarCardFooter.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card footer component\n *\n * @example\n * <ScalarCard>\n *   ...\n *   <ScalarCardFooter>Footer</ScalarCardFooter>\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarCardSection from './ScalarCardSection.vue'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <ScalarCardSection v-bind=\"cx('scalar-card-footer')\">\n    <slot />\n  </ScalarCardSection>\n</template>\n"],"mappings":";;;;;;;EAkBA,MAAM,EAAE,OAAO,UAAU;;GAGvB,OAAAA,UAAA,GAAAC,YAEoBC,2BAAAC,eAAAC,mBAFOC,MAAA,EAAA,CAAE,CAAA,oBAAA,CAAA,CAAA,GAAA;IAC3B,SAAAC,cAAQ,CAARC,WAAQ,KAAA,QAAA,SAAA,C"}

package/dist/components/ScalarCard/ScalarCardHeader.vue.js

@@ -1,4 +1,4 @@
-import ScalarCardHeader_vue_vue_type_script_setup_true_lang_default from "./ScalarCardHeader.vue.script.js";
+import ScalarCardHeader_vue_vue_type_script_setup_true_lang_default from "./ScalarCardHeader.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarCard/ScalarCardHeader.vue
 var ScalarCardHeader_default = ScalarCardHeader_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarCard/ScalarCardHeader.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCardHeader.vue.js","names":[],"sources":["../../../src/components/ScalarCard/ScalarCardHeader.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card header component\n *\n * Will automatically be used as the aria-labelledby for the parent ScalarCard component\n *\n * @example\n * <ScalarCard>\n *   <ScalarCardHeader>Header</ScalarCardHeader>\n *   ...\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useId } from 'vue'\n\nimport ScalarCardSection from './ScalarCardSection.vue'\nimport { useCardHeading } from './useCardHeading'\n\n/**\n * Scalar Card Header - Header section for cards with automatic accessibility setup\n */\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n// Get a unique id for the heading\nconst id = useId()\n\n// Set the heading id for the card\nuseCardHeading(id)\n</script>\n<template>\n  <ScalarCardSection\n    v-bind=\"\n      cx(\n        'scalar-card-header flex-wrap gap-y-1 leading-[22px] font-medium py-[6.75px] px-3 shrink-0',\n      )\n    \">\n    <!-- Sized to its content so the actions only drop to their own row when the title does not fit beside them -->\n    <div\n      :id=\"id\"\n      class=\"scalar-card-header-title min-w-0 flex-auto\">\n      <slot />\n    </div>\n    <div\n      v-if=\"$slots.actions\"\n      class=\"flex\">\n      <slot name=\"actions\" />\n    </div>\n  </ScalarCardSection>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarCardHeader.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarCard/ScalarCardHeader.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card header component\n *\n * Will automatically be used as the aria-labelledby for the parent ScalarCard component\n *\n * @example\n * <ScalarCard>\n *   <ScalarCardHeader>Header</ScalarCardHeader>\n *   ...\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useId } from 'vue'\n\nimport ScalarCardSection from './ScalarCardSection.vue'\nimport { useCardHeading } from './useCardHeading'\n\n/**\n * Scalar Card Header - Header section for cards with automatic accessibility setup\n */\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n// Get a unique id for the heading\nconst id = useId()\n\n// Set the heading id for the card\nuseCardHeading(id)\n</script>\n<template>\n  <ScalarCardSection\n    v-bind=\"\n      cx(\n        'scalar-card-header flex-wrap gap-y-1 leading-[22px] font-medium py-[6.75px] px-3 shrink-0',\n      )\n    \">\n    <!-- Sized to its content so the actions only drop to their own row when the title does not fit beside them -->\n    <div\n      :id=\"id\"\n      class=\"scalar-card-header-title min-w-0 flex-auto\">\n      <slot />\n    </div>\n    <div\n      v-if=\"$slots.actions\"\n      class=\"flex\">\n      <slot name=\"actions\" />\n    </div>\n  </ScalarCardSection>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCard/ScalarCardHeader.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,32 @@
+import { useCardHeading } from "./useCardHeading.js";
+import ScalarCardSection_default from "./ScalarCardSection.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref, useId, withCtx } from "vue";
+//#region src/components/ScalarCard/ScalarCardHeader.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id"];
+var _hoisted_2 = {
+	key: 0,
+	class: "flex"
+};
+var ScalarCardHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarCardHeader",
+	setup(__props) {
+		const { cx } = useBindCx();
+		const id = useId();
+		useCardHeading(id);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ScalarCardSection_default, normalizeProps(guardReactiveProps(unref(cx)("scalar-card-header flex-wrap gap-y-1 leading-[22px] font-medium py-[6.75px] px-3 shrink-0"))), {
+				default: withCtx(() => [createElementVNode("div", {
+					id: unref(id),
+					class: "scalar-card-header-title min-w-0 flex-auto"
+				}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1), _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true)]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { ScalarCardHeader_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarCardHeader.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarCard/ScalarCardHeader.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCardHeader.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createBlock","ScalarCardSection","_normalizeProps","_guardReactiveProps","_unref","_withCtx","_createElementVNode","_renderSlot","_createElementBlock","_createCommentVNode"],"sources":["../../../src/components/ScalarCard/ScalarCardHeader.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card header component\n *\n * Will automatically be used as the aria-labelledby for the parent ScalarCard component\n *\n * @example\n * <ScalarCard>\n *   <ScalarCardHeader>Header</ScalarCardHeader>\n *   ...\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useId } from 'vue'\n\nimport ScalarCardSection from './ScalarCardSection.vue'\nimport { useCardHeading } from './useCardHeading'\n\n/**\n * Scalar Card Header - Header section for cards with automatic accessibility setup\n */\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n// Get a unique id for the heading\nconst id = useId()\n\n// Set the heading id for the card\nuseCardHeading(id)\n</script>\n<template>\n  <ScalarCardSection\n    v-bind=\"\n      cx(\n        'scalar-card-header flex-wrap gap-y-1 leading-[22px] font-medium py-[6.75px] px-3 shrink-0',\n      )\n    \">\n    <!-- Sized to its content so the actions only drop to their own row when the title does not fit beside them -->\n    <div\n      :id=\"id\"\n      class=\"scalar-card-header-title min-w-0 flex-auto\">\n      <slot />\n    </div>\n    <div\n      v-if=\"$slots.actions\"\n      class=\"flex\">\n      <slot name=\"actions\" />\n    </div>\n  </ScalarCardSection>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAyBA,MAAM,EAAE,OAAO,UAAU;EAGzB,MAAM,KAAK,MAAM;EAGjB,eAAe,EAAE;;GAGf,OAAAC,UAAA,GAAAC,YAiBoBC,2BAAAC,eAAAC,mBAhBHC,MAAA,EAAA,CAAE,C;IAMjB,SAAAC,cAIM,CAJNC,mBAIM,OAAA;KAHH,IAAIF,MAAA,EAAA;KACL,OAAM;I,IACNG,WAAQ,KAAA,QAAA,SAAA,C,mBAGFT,KAAAA,OAAO,WADfC,UAAA,GAAAS,mBAIM,OAJN,YAIM,CADJD,WAAuB,KAAA,QAAA,SAAA,C"}

package/dist/components/ScalarCard/ScalarCardSection.vue.js

@@ -1,4 +1,4 @@
-import ScalarCardSection_vue_vue_type_script_setup_true_lang_default from "./ScalarCardSection.vue.script.js";
+import ScalarCardSection_vue_vue_type_script_setup_true_lang_default from "./ScalarCardSection.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarCard/ScalarCardSection.vue
 var ScalarCardSection_default = ScalarCardSection_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarCard/ScalarCardSection.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCardSection.vue.js","names":[],"sources":["../../../src/components/ScalarCard/ScalarCardSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card section component\n *\n * A generic section of a ScalarCard component, provides the base for ScalarCardHeader and ScalarCardFooter\n *\n * @example\n * <ScalarCard>\n *   ...\n *   <ScalarCardSection>Content</ScalarCardSection>\n *   ...\n * </ScalarCard>\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        'scalar-card-content flex overflow-auto first:rounded-t-[inherit] last:rounded-b-[inherit]',\n      )\n    \">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarCardSection.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarCard/ScalarCardSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card section component\n *\n * A generic section of a ScalarCard component, provides the base for ScalarCardHeader and ScalarCardFooter\n *\n * @example\n * <ScalarCard>\n *   ...\n *   <ScalarCardSection>Content</ScalarCardSection>\n *   ...\n * </ScalarCard>\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        'scalar-card-content flex overflow-auto first:rounded-t-[inherit] last:rounded-b-[inherit]',\n      )\n    \">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCard/ScalarCardSection.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 ScalarCardSection_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarCardSection",
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("scalar-card-content flex overflow-auto first:rounded-t-[inherit] last:rounded-b-[inherit]"))), [renderSlot(_ctx.$slots, "default")], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarCardSection_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarCardSection.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarCard/ScalarCardSection.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCardSection.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","_renderSlot"],"sources":["../../../src/components/ScalarCard/ScalarCardSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card section component\n *\n * A generic section of a ScalarCard component, provides the base for ScalarCardHeader and ScalarCardFooter\n *\n * @example\n * <ScalarCard>\n *   ...\n *   <ScalarCardSection>Content</ScalarCardSection>\n *   ...\n * </ScalarCard>\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        'scalar-card-content flex overflow-auto first:rounded-t-[inherit] last:rounded-b-[inherit]',\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,iGAKjBC,WAAQ,KAAA,QAAA,SAAA,C"}

package/dist/components/ScalarCheckboxInput/ScalarCheckbox.vue.js

@@ -1,4 +1,4 @@
-import ScalarCheckbox_vue_vue_type_script_setup_true_lang_default from "./ScalarCheckbox.vue.script.js";
+import ScalarCheckbox_vue_vue_type_script_setup_true_lang_default from "./ScalarCheckbox.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarCheckboxInput/ScalarCheckbox.vue
 var ScalarCheckbox_default = ScalarCheckbox_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarCheckboxInput/ScalarCheckbox.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCheckbox.vue.js","names":[],"sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckbox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar checkbox base component\n *\n * Provides a styled visual checkbox but not the underlying input element.\n *\n * This is used internally by the ScalarCheckboxInput component.\n *\n * If you're looking to create an interactive checkbox you\n * probably want the ScalarCheckboxInput component.\n *\n * @example\n * <ScalarCheckbox :selected=\"state\" type=\"radio\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconCheck, ScalarIconMinus } from '@scalar/icons'\n\nimport type { ScalarCheckboxType } from './types'\n\nconst props = withDefaults(\n  defineProps<{\n    selected?: boolean\n    /** Checkbox only: shows a minus icon when true and `selected` is false (partial selection). */\n    indeterminate?: boolean\n    type?: ScalarCheckboxType\n  }>(),\n  {\n    type: 'checkbox',\n    indeterminate: false,\n  },\n)\n</script>\n<template>\n  <div\n    class=\"flex size-4 items-center justify-center p-0.75\"\n    :class=\"[\n      props.selected\n        ? 'bg-c-accent text-b-1'\n        : props.indeterminate && props.type === 'checkbox'\n          ? 'bg-c-accent text-b-1'\n          : 'text-transparent shadow-border',\n      props.type === 'checkbox' ? 'rounded' : 'rounded-full',\n    ]\">\n    <ScalarIconCheck\n      v-if=\"props.selected\"\n      class=\"size-3\"\n      weight=\"bold\" />\n    <ScalarIconMinus\n      v-else-if=\"props.indeterminate && props.type === 'checkbox'\"\n      aria-hidden=\"true\"\n      class=\"size-3\"\n      weight=\"bold\" />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarCheckbox.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckbox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar checkbox base component\n *\n * Provides a styled visual checkbox but not the underlying input element.\n *\n * This is used internally by the ScalarCheckboxInput component.\n *\n * If you're looking to create an interactive checkbox you\n * probably want the ScalarCheckboxInput component.\n *\n * @example\n * <ScalarCheckbox :selected=\"state\" type=\"radio\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconCheck, ScalarIconMinus } from '@scalar/icons'\n\nimport type { ScalarCheckboxType } from './types'\n\nconst props = withDefaults(\n  defineProps<{\n    selected?: boolean\n    /** Checkbox only: shows a minus icon when true and `selected` is false (partial selection). */\n    indeterminate?: boolean\n    type?: ScalarCheckboxType\n  }>(),\n  {\n    type: 'checkbox',\n    indeterminate: false,\n  },\n)\n</script>\n<template>\n  <div\n    class=\"flex size-4 items-center justify-center p-0.75\"\n    :class=\"[\n      props.selected\n        ? 'bg-c-accent text-b-1'\n        : props.indeterminate && props.type === 'checkbox'\n          ? 'bg-c-accent text-b-1'\n          : 'shadow-border text-transparent',\n      props.type === 'checkbox' ? 'rounded' : 'rounded-full',\n    ]\">\n    <ScalarIconCheck\n      v-if=\"props.selected\"\n      class=\"size-3\"\n      weight=\"bold\" />\n    <ScalarIconMinus\n      v-else-if=\"props.indeterminate && props.type === 'checkbox'\"\n      aria-hidden=\"true\"\n      class=\"size-3\"\n      weight=\"bold\" />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCheckboxInput/ScalarCheckbox.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,32 @@
+import { createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, unref } from "vue";
+import { ScalarIconCheck, ScalarIconMinus } from "@scalar/icons";
+var ScalarCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ScalarCheckbox",
+	props: {
+		selected: { type: Boolean },
+		indeterminate: {
+			type: Boolean,
+			default: false
+		},
+		type: { default: "checkbox" }
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["flex size-4 items-center justify-center p-0.75", [props.selected ? "bg-c-accent text-b-1" : props.indeterminate && props.type === "checkbox" ? "bg-c-accent text-b-1" : "shadow-border text-transparent", props.type === "checkbox" ? "rounded" : "rounded-full"]]) }, [props.selected ? (openBlock(), createBlock(unref(ScalarIconCheck), {
+				key: 0,
+				class: "size-3",
+				weight: "bold"
+			})) : props.indeterminate && props.type === "checkbox" ? (openBlock(), createBlock(unref(ScalarIconMinus), {
+				key: 1,
+				"aria-hidden": "true",
+				class: "size-3",
+				weight: "bold"
+			})) : createCommentVNode("", true)], 2);
+		};
+	}
+});
+//#endregion
+export { ScalarCheckbox_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarCheckbox.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarCheckboxInput/ScalarCheckbox.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCheckbox.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createBlock","_unref","_createCommentVNode"],"sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckbox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar checkbox base component\n *\n * Provides a styled visual checkbox but not the underlying input element.\n *\n * This is used internally by the ScalarCheckboxInput component.\n *\n * If you're looking to create an interactive checkbox you\n * probably want the ScalarCheckboxInput component.\n *\n * @example\n * <ScalarCheckbox :selected=\"state\" type=\"radio\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconCheck, ScalarIconMinus } from '@scalar/icons'\n\nimport type { ScalarCheckboxType } from './types'\n\nconst props = withDefaults(\n  defineProps<{\n    selected?: boolean\n    /** Checkbox only: shows a minus icon when true and `selected` is false (partial selection). */\n    indeterminate?: boolean\n    type?: ScalarCheckboxType\n  }>(),\n  {\n    type: 'checkbox',\n    indeterminate: false,\n  },\n)\n</script>\n<template>\n  <div\n    class=\"flex size-4 items-center justify-center p-0.75\"\n    :class=\"[\n      props.selected\n        ? 'bg-c-accent text-b-1'\n        : props.indeterminate && props.type === 'checkbox'\n          ? 'bg-c-accent text-b-1'\n          : 'shadow-border text-transparent',\n      props.type === 'checkbox' ? 'rounded' : 'rounded-full',\n    ]\">\n    <ScalarIconCheck\n      v-if=\"props.selected\"\n      class=\"size-3\"\n      weight=\"bold\" />\n    <ScalarIconMinus\n      v-else-if=\"props.indeterminate && props.type === 'checkbox'\"\n      aria-hidden=\"true\"\n      class=\"size-3\"\n      weight=\"bold\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAqBA,MAAM,QAAQ;;GAcZ,OAAAA,UAAA,GAAAC,mBAmBM,OAAA,EAlBJ,OAAKC,eAAA,CAAC,kDAAgD,CACtC,MAAM,W,yBAAoD,MAAM,iBAAiB,MAAM,SAAI,a,2DAAuG,MAAM,SAAI,aAAA,YAAA,c,QASpN,MAAM,YADdF,UAAA,GAAAG,YAGkBC,MAAA,eAAA,GAAA;;IADhB,OAAM;IACN,QAAO;G,MAEI,MAAM,iBAAiB,MAAM,SAAI,cAD9CJ,UAAA,GAAAG,YAIkBC,MAAA,eAAA,GAAA;;IAFhB,eAAY;IACZ,OAAM;IACN,QAAO"}

package/dist/components/ScalarCheckboxInput/ScalarCheckboxGroup.vue.js

@@ -1,4 +1,4 @@
-import ScalarCheckboxGroup_vue_vue_type_script_setup_true_lang_default from "./ScalarCheckboxGroup.vue.script.js";
+import ScalarCheckboxGroup_vue_vue_type_script_setup_true_lang_default from "./ScalarCheckboxGroup.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarCheckboxInput/ScalarCheckboxGroup.vue
 var ScalarCheckboxGroup_default = ScalarCheckboxGroup_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarCheckboxInput/ScalarCheckboxGroup.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCheckboxGroup.vue.js","names":[],"sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Checkbox Group component\n *\n * A group of checkbox inputs allowing for multiple selections.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nimport { ScalarFormInputGroup } from '../ScalarForm'\nimport ScalarCheckboxInput from './ScalarCheckboxInput.vue'\nimport type { ScalarCheckboxOption } from './types'\n\nconst { options = [] } = defineProps<{\n  options?: ScalarCheckboxOption[]\n}>()\n\nconst model = defineModel<ScalarCheckboxOption[]>({ default: () => [] })\n\nconst name = useId()\n</script>\n<template>\n  <ScalarFormInputGroup>\n    <ScalarCheckboxInput\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :modelValue=\"model?.some(({ value }) => value === option.value)\"\n      :name\n      :value=\"option.value\"\n      @update:modelValue=\"\n        (checked) =>\n          (model = checked\n            ? [...model, option]\n            : model.filter(({ value }) => value !== option.value))\n      \">\n      {{ option.label }}\n    </ScalarCheckboxInput>\n  </ScalarFormInputGroup>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarCheckboxGroup.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Checkbox Group component\n *\n * A group of checkbox inputs allowing for multiple selections.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nimport { ScalarFormInputGroup } from '../ScalarForm'\nimport ScalarCheckboxInput from './ScalarCheckboxInput.vue'\nimport type { ScalarCheckboxOption } from './types'\n\nconst { options = [] } = defineProps<{\n  options?: ScalarCheckboxOption[]\n}>()\n\nconst model = defineModel<ScalarCheckboxOption[]>({ default: () => [] })\n\nconst name = useId()\n</script>\n<template>\n  <ScalarFormInputGroup>\n    <ScalarCheckboxInput\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :modelValue=\"model?.some(({ value }) => value === option.value)\"\n      :name\n      :value=\"option.value\"\n      @update:modelValue=\"\n        (checked) =>\n          (model = checked\n            ? [...model, option]\n            : model.filter(({ value }) => value !== option.value))\n      \">\n      {{ option.label }}\n    </ScalarCheckboxInput>\n  </ScalarFormInputGroup>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCheckboxInput/ScalarCheckboxGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,41 @@
+import ScalarFormInputGroup_default from "../ScalarForm/ScalarFormInputGroup.vue.js";
+import ScalarCheckboxInput_default from "./ScalarCheckboxInput.vue.js";
+import { Fragment, createBlock, createElementBlock, createTextVNode, defineComponent, mergeModels, openBlock, renderList, toDisplayString, unref, useId, useModel, withCtx } from "vue";
+var ScalarCheckboxGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ScalarCheckboxGroup",
+	props: /*@__PURE__*/ mergeModels({ options: { default: () => [] } }, {
+		"modelValue": { default: () => [] },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const name = useId();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarFormInputGroup_default), null, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+					return openBlock(), createBlock(ScalarCheckboxInput_default, {
+						key: option.value,
+						modelValue: model.value?.some(({ value }) => value === option.value),
+						name: unref(name),
+						value: option.value,
+						"onUpdate:modelValue": (checked) => model.value = checked ? [...model.value, option] : model.value.filter(({ value }) => value !== option.value)
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(option.label), 1)]),
+						_: 2
+					}, 1032, [
+						"modelValue",
+						"name",
+						"value",
+						"onUpdate:modelValue"
+					]);
+				}), 128))]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+export { ScalarCheckboxGroup_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarCheckboxGroup.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarCheckboxInput/ScalarCheckboxGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCheckboxGroup.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","ScalarFormInputGroup","_withCtx","_createElementBlock","_Fragment","_renderList","ScalarCheckboxInput","_createTextVNode","_toDisplayString"],"sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Checkbox Group component\n *\n * A group of checkbox inputs allowing for multiple selections.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nimport { ScalarFormInputGroup } from '../ScalarForm'\nimport ScalarCheckboxInput from './ScalarCheckboxInput.vue'\nimport type { ScalarCheckboxOption } from './types'\n\nconst { options = [] } = defineProps<{\n  options?: ScalarCheckboxOption[]\n}>()\n\nconst model = defineModel<ScalarCheckboxOption[]>({ default: () => [] })\n\nconst name = useId()\n</script>\n<template>\n  <ScalarFormInputGroup>\n    <ScalarCheckboxInput\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :modelValue=\"model?.some(({ value }) => value === option.value)\"\n      :name\n      :value=\"option.value\"\n      @update:modelValue=\"\n        (checked) =>\n          (model = checked\n            ? [...model, option]\n            : model.filter(({ value }) => value !== option.value))\n      \">\n      {{ option.label }}\n    </ScalarCheckboxInput>\n  </ScalarFormInputGroup>\n</template>\n"],"mappings":";;;;;;;;;;;EAmBA,MAAM,QAAQA,SAAmC,SAAA,YAAsB;EAEvE,MAAM,OAAO,MAAM;;GAGjB,OAAAC,UAAA,GAAAC,YAeuBC,MAAAC,4BAAA,GAAA,MAAA;IAbnB,SAAAC,cAAyB,EAD3BJ,UAAA,IAAA,GAAAK,mBAasBC,UAAA,MAAAC,WAZH,QAAA,UAAV,WAAM;KADf,OAAAP,UAAA,GAAAC,YAasBO,6BAAA;MAXnB,KAAK,OAAO;MACZ,YAAY,MAAA,OAAO,MAAI,EAAI,YAAY,UAAU,OAAO,KAAK;MAC7D,MAAAN,MAAA,IAAA;MACA,OAAO,OAAO;MACd,wBAA6B,YAAuB,MAAA,QAAQ,UAA0B,CAAA,GAAA,MAAA,OAAO,MAAM,IAAgB,MAAA,MAAM,QAAM,EAAI,YAAY,UAAU,OAAO,KAAK;;MAMtK,SAAAE,cAAkB,CAAfK,gBAAAC,gBAAA,OAAO,KAAK,GAAA,CAAA,C"}

package/dist/components/ScalarCheckboxInput/ScalarCheckboxInput.vue.js

@@ -1,4 +1,4 @@
-import ScalarCheckboxInput_vue_vue_type_script_setup_true_lang_default from "./ScalarCheckboxInput.vue.script.js";
+import ScalarCheckboxInput_vue_vue_type_script_setup_true_lang_default from "./ScalarCheckboxInput.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarCheckboxInput/ScalarCheckboxInput.vue
 var ScalarCheckboxInput_default = ScalarCheckboxInput_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarCheckboxInput.vue.js","names":[],"sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Checkbox Input component\n *\n * A wrapper around the HTML input element for either checkboxes or radio buttons.\n *\n * @example\n *  <ScalarCheckboxInput v-model=\"model\" type=\"checkbox\">\n *    Option Label\n *  </ScalarCheckboxInput>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFormInput } from '../ScalarForm'\nimport ScalarCheckbox from './ScalarCheckbox.vue'\nimport type { ScalarCheckboxType } from './types'\n\nconst props = withDefaults(\n  defineProps<{\n    type?: ScalarCheckboxType\n    /** When true and the control is unchecked, the native checkbox is indeterminate (partial selection). */\n    indeterminate?: boolean\n  }>(),\n  {\n    type: 'checkbox',\n    indeterminate: false,\n  },\n)\n\nconst model = defineModel<boolean>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n</script>\n<template>\n  <ScalarFormInput\n    is=\"label\"\n    v-bind=\"\n      stylingAttrsCx('cursor-pointer gap-2 hover:bg-b-2', { 'text-c-1': model })\n    \">\n    <ScalarCheckbox\n      class=\"shrink-0\"\n      :indeterminate=\"props.indeterminate && props.type === 'checkbox'\"\n      :selected=\"model\"\n      :type=\"props.type\" />\n    <div class=\"flex-1 text-left min-w-0 truncate\"><slot /></div>\n    <input\n      ref=\"inputEl\"\n      v-model=\"model\"\n      class=\"sr-only\"\n      :type=\"props.type\"\n      v-bind=\"otherAttrs\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarCheckboxInput.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Checkbox Input component\n *\n * A wrapper around the HTML input element for either checkboxes or radio buttons.\n *\n * @example\n *  <ScalarCheckboxInput v-model=\"model\" type=\"checkbox\">\n *    Option Label\n *  </ScalarCheckboxInput>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFormInput } from '../ScalarForm'\nimport ScalarCheckbox from './ScalarCheckbox.vue'\nimport type { ScalarCheckboxType } from './types'\n\nconst props = withDefaults(\n  defineProps<{\n    type?: ScalarCheckboxType\n    /** When true and the control is unchecked, the native checkbox is indeterminate (partial selection). */\n    indeterminate?: boolean\n  }>(),\n  {\n    type: 'checkbox',\n    indeterminate: false,\n  },\n)\n\nconst model = defineModel<boolean>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n</script>\n<template>\n  <ScalarFormInput\n    is=\"label\"\n    v-bind=\"\n      stylingAttrsCx('cursor-pointer gap-2 hover:bg-b-2', { 'text-c-1': model })\n    \">\n    <ScalarCheckbox\n      class=\"shrink-0\"\n      :indeterminate=\"props.indeterminate && props.type === 'checkbox'\"\n      :selected=\"model\"\n      :type=\"props.type\" />\n    <div class=\"min-w-0 flex-1 truncate text-left\"><slot /></div>\n    <input\n      ref=\"inputEl\"\n      v-model=\"model\"\n      class=\"sr-only\"\n      :type=\"props.type\"\n      v-bind=\"otherAttrs\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCheckboxInput/ScalarCheckboxInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,55 @@
+import ScalarCheckbox_default from "./ScalarCheckbox.vue.js";
+import ScalarFormInput_default from "../ScalarForm/ScalarFormInput.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, openBlock, renderSlot, unref, useModel, vModelDynamic, withCtx, withDirectives } from "vue";
+//#region src/components/ScalarCheckboxInput/ScalarCheckboxInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "min-w-0 flex-1 truncate text-left" };
+var _hoisted_2 = ["type"];
+var ScalarCheckboxInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarCheckboxInput",
+	props: /*@__PURE__*/ mergeModels({
+		type: { default: "checkbox" },
+		indeterminate: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": { type: Boolean },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		const { stylingAttrsCx, otherAttrs } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarFormInput_default), mergeProps({ is: "label" }, unref(stylingAttrsCx)("cursor-pointer gap-2 hover:bg-b-2", { "text-c-1": model.value })), {
+				default: withCtx(() => [
+					createVNode(ScalarCheckbox_default, {
+						class: "shrink-0",
+						indeterminate: props.indeterminate && props.type === "checkbox",
+						selected: model.value,
+						type: props.type
+					}, null, 8, [
+						"indeterminate",
+						"selected",
+						"type"
+					]),
+					createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")]),
+					withDirectives(createElementVNode("input", mergeProps({
+						ref: "inputEl",
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+						class: "sr-only",
+						type: props.type
+					}, unref(otherAttrs)), null, 16, _hoisted_2), [[vModelDynamic, model.value]])
+				]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { ScalarCheckboxInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarCheckboxInput.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCheckboxInput.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","ScalarFormInput","_mergeProps","_withCtx","_createVNode","ScalarCheckbox","_createElementVNode","_renderSlot","_withDirectives","_vModelDynamic"],"sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Checkbox Input component\n *\n * A wrapper around the HTML input element for either checkboxes or radio buttons.\n *\n * @example\n *  <ScalarCheckboxInput v-model=\"model\" type=\"checkbox\">\n *    Option Label\n *  </ScalarCheckboxInput>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFormInput } from '../ScalarForm'\nimport ScalarCheckbox from './ScalarCheckbox.vue'\nimport type { ScalarCheckboxType } from './types'\n\nconst props = withDefaults(\n  defineProps<{\n    type?: ScalarCheckboxType\n    /** When true and the control is unchecked, the native checkbox is indeterminate (partial selection). */\n    indeterminate?: boolean\n  }>(),\n  {\n    type: 'checkbox',\n    indeterminate: false,\n  },\n)\n\nconst model = defineModel<boolean>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n</script>\n<template>\n  <ScalarFormInput\n    is=\"label\"\n    v-bind=\"\n      stylingAttrsCx('cursor-pointer gap-2 hover:bg-b-2', { 'text-c-1': model })\n    \">\n    <ScalarCheckbox\n      class=\"shrink-0\"\n      :indeterminate=\"props.indeterminate && props.type === 'checkbox'\"\n      :selected=\"model\"\n      :type=\"props.type\" />\n    <div class=\"min-w-0 flex-1 truncate text-left\"><slot /></div>\n    <input\n      ref=\"inputEl\"\n      v-model=\"model\"\n      class=\"sr-only\"\n      :type=\"props.type\"\n      v-bind=\"otherAttrs\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,QAAQ;EAYd,MAAM,QAAQA,SAAoB,SAAA,YAAC;EAGnC,MAAM,EAAE,gBAAgB,eAAe,UAAU;;GAG/C,OAAAC,UAAA,GAAAC,YAiBkBC,MAAAC,uBAAA,GAjBlBC,WAiBkB,EAhBhB,IAAG,QAAO,GACKF,MAAA,cAAA,CAAc,CAAA,qCAAA,EAAA,YAAoD,MAAA,MAAK,CAAA,C;IAGtF,SAAAG,cAIuB;KAJvBC,YAIuBC,wBAAA;MAHrB,OAAM;MACL,eAAe,MAAM,iBAAiB,MAAM,SAAI;MAChD,UAAU,MAAA;MACV,MAAM,MAAM;;;;;;KACfC,mBAA6D,OAA7D,YAA6D,CAAdC,WAAQ,KAAA,QAAA,SAAA,C;KACvDC,eAAAF,mBAKwB,SALxBJ,WAKwB;MAJtB,KAAI;MACK,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAK,QAAA;MACd,OAAM;MACL,MAAM,MAAM;KACL,GAAAF,MAAA,UAAA,CAAU,GAAA,MAAA,IAAA,UAAA,GAAA,CAHT,CAAAS,eAAA,MAAA,KAAK,C"}

package/dist/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue.js

@@ -1,4 +1,4 @@
-import ScalarCheckboxRadioGroup_vue_vue_type_script_setup_true_lang_default from "./ScalarCheckboxRadioGroup.vue.script.js";
+import ScalarCheckboxRadioGroup_vue_vue_type_script_setup_true_lang_default from "./ScalarCheckboxRadioGroup.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue
 var ScalarCheckboxRadioGroup_default = ScalarCheckboxRadioGroup_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCheckboxRadioGroup.vue.js","names":[],"sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Checkbox Radio Group component\n *\n * A group of radio inputs allowing for single selection.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nimport { ScalarFormInputGroup } from '../ScalarForm'\nimport ScalarCheckboxInput from './ScalarCheckboxInput.vue'\nimport type { ScalarCheckboxOption } from './types'\n\nconst { options = [] } = defineProps<{\n  options?: ScalarCheckboxOption[]\n}>()\n\nconst model = defineModel<ScalarCheckboxOption>()\n\nconst name = useId()\n</script>\n<template>\n  <ScalarFormInputGroup>\n    <ScalarCheckboxInput\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :modelValue=\"model?.value === option.value\"\n      :name\n      type=\"radio\"\n      :value=\"option.value\"\n      @update:modelValue=\"(checked) => (model = checked ? option : undefined)\">\n      {{ option.label }}\n    </ScalarCheckboxInput>\n  </ScalarFormInputGroup>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarCheckboxRadioGroup.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Checkbox Radio Group component\n *\n * A group of radio inputs allowing for single selection.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nimport { ScalarFormInputGroup } from '../ScalarForm'\nimport ScalarCheckboxInput from './ScalarCheckboxInput.vue'\nimport type { ScalarCheckboxOption } from './types'\n\nconst { options = [] } = defineProps<{\n  options?: ScalarCheckboxOption[]\n}>()\n\nconst model = defineModel<ScalarCheckboxOption>()\n\nconst name = useId()\n</script>\n<template>\n  <ScalarFormInputGroup>\n    <ScalarCheckboxInput\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :modelValue=\"model?.value === option.value\"\n      :name\n      type=\"radio\"\n      :value=\"option.value\"\n      @update:modelValue=\"(checked) => (model = checked ? option : undefined)\">\n      {{ option.label }}\n    </ScalarCheckboxInput>\n  </ScalarFormInputGroup>\n</template>\n"],"mappings":""}