@scalar/components 0.20.12 → 0.21.0

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,8 @@
+//#region \0plugin-vue:export-helper
+var _plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+export { _plugin_vue_export_helper_default as default };

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll };

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

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

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

@@ -0,0 +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.25 -ml-0.5 mr-1.5',\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.script.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.25 -ml-0.5 mr-1.5",
+				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", { key: 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.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarButton.vue.script.js","names":["$slots"],"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.25 -ml-0.5 mr-1.5',\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,mCAAmC;IACrD,MAAM;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;KACL;IACD,SAAS;IACV;GACD,kBAAkB,CAChB;IACE,UAAU;IACV,SAAS;KAAC;KAAS;KAAY;KAAS;KAAY;KAAS;IAC7D,OACE;IACH,EACD;IACE,UAAU;IACV,SAAS,CAAC,WAAW;IACrB,OACE;IACH,CACF;GACF,CAAA;;EAGD,MAAM,eAAe,IAAI;GACvB,MAAM;GACN,UAAU,EACR,MAAM;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,EACF;GACF,CAAA;;EAGD,MAAM,kBAAkB,IAAI,EAC1B,UAAU,EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,EACF,EACF,CAAA;EAGD,MAAM,EAAE,OAAO,WAAU;;uBAGvB,YA+BY,wBA9BL,QAAA,GAAE,EADT,WA+BY;IA7BT,iBAAe,QAAA,YAAY,KAAA;IAC3B,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA;MACrB,MAAA,GAAE,CAAC,MAAA,eAAc,CAAA;IAAA,UAAG,QAAA;IAAQ,MAAE,QAAA;IAAI,SAAE,QAAA;IAAO,CAAA,EAAA,EAAA,UAAyB,QAAA,QAAQ,UAAA,CAAA,CAAA,EAAA;2BAarF;KAPEA,KAAAA,OAAO,QAAQ,QAAA,QAAA,WAAA,EADvB,mBAQM,OAAA;;MANH,OAAK,eAAA,CAAG,MAAA,aAAY,CAAA,EAAA,MAAG,QAAA,MAAI,CAAA,EAAA,EAAA,WAAkB,QAAA,QAAQ,UAAQ,CAAA,CAAA;SAC9D,WAIO,KAAA,QAAA,QAAA,EAAA,QAAA,EAAA,WAAA,EAHL,YAEsB,wBADf,QAAA,KAAI,EAAA,EACT,OAAM,aAAW,CAAA,EAAA,CAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;KAIf,QAAA,UAAA,WAAA,EADR,mBAIO,QAAA;;MAFJ,OAAK,eAAA,EAAA,WAAe,QAAA,QAAQ,UAAQ,CAAA;SACrC,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAEV,WAAe,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA;KAEP,QAAA,QAAQ,YAAA,WAAA,EADhB,mBAMM,OANN,YAMM,CAHJ,YAEY,MAAA,sBAAA,EAAA;MADT,OAAK,eAAE,MAAA,gBAAe,CAAA,EAAA,MAAG,QAAA,MAAI,CAAA,CAAA;MAC7B,QAAA,QAAA"}

package/dist/components/ScalarButton/constants.js

@@ -0,0 +1,17 @@
+//#region src/components/ScalarButton/constants.ts
+/** Styles for the different button variants */
+var BUTTON_VARIANT_STYLES = {
+	solid: ["scalar-button-solid", "bg-b-btn text-c-btn focus-visible:border-c-btn active:bg-b-btn hover:bg-h-btn outline-offset-1"],
+	outlined: ["scalar-button-outlined", "active:bg-btn-1 shadow-border bg-b-1 text-c-1 hover:bg-b-2"],
+	ghost: ["scalar-button-ghost", "bg-transparent text-c-3 active:text-c-1 hover:text-c-1"],
+	gradient: [
+		"scalar-button-gradient",
+		"shadow-border bg-b-1.5 bg-linear-to-b from-b-1 to-b-2 hover:bg-linear-to-t",
+		"dark:bg-linear-to-t dark:hover:bg-linear-to-b"
+	],
+	danger: ["scalar-button-danger", "bg-c-danger text-white active:brightness-90 hover:brightness-90"]
+};
+//#endregion
+export { BUTTON_VARIANT_STYLES };
+
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/ScalarButton/constants.ts"],"sourcesContent":["import type { ButtonVariant, ClassList } from './types'\n\n/** Styles for the different button variants */\nexport const BUTTON_VARIANT_STYLES = {\n  solid: [\n    'scalar-button-solid',\n    'bg-b-btn text-c-btn focus-visible:border-c-btn active:bg-b-btn hover:bg-h-btn outline-offset-1',\n  ],\n  outlined: ['scalar-button-outlined', 'active:bg-btn-1 shadow-border bg-b-1 text-c-1 hover:bg-b-2'],\n  ghost: ['scalar-button-ghost', 'bg-transparent text-c-3 active:text-c-1 hover:text-c-1'],\n  gradient: [\n    'scalar-button-gradient',\n    'shadow-border bg-b-1.5 bg-linear-to-b from-b-1 to-b-2 hover:bg-linear-to-t',\n    // in dark mode we want to reverse the gradient direction\n    'dark:bg-linear-to-t dark:hover:bg-linear-to-b',\n  ],\n  danger: ['scalar-button-danger', 'bg-c-danger text-white active:brightness-90 hover:brightness-90'],\n} as const satisfies Record<ButtonVariant, ClassList>\n"],"mappings":";;AAGA,IAAa,wBAAwB;CACnC,OAAO,CACL,uBACA,iGACD;CACD,UAAU,CAAC,0BAA0B,6DAA6D;CAClG,OAAO,CAAC,uBAAuB,yDAAyD;CACxF,UAAU;EACR;EACA;EAEA;EACD;CACD,QAAQ,CAAC,wBAAwB,kEAAkE;CACpG"}

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

@@ -1,3 +1,3 @@
-export { default as ScalarButton } from './ScalarButton.vue';
+export { default as ScalarButton } from './ScalarButton.vue.js';
 export type { ButtonSize as ScalarButtonSize, ButtonVariant as ScalarButtonVariant } from './types';
 //# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +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(\n        'scalar-card bg-b-2 flex flex-col divide-y rounded-xl border *:first:rounded-t-[inherit] *:last:rounded-b-[inherit]',\n      ),\n    }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCard/ScalarCard.vue.script.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 *:first:rounded-t-[inherit] *:last:rounded-b-[inherit]")
+			}), [renderSlot(_ctx.$slots, "default")], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarCard_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarCard.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCard.vue.script.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(\n        'scalar-card bg-b-2 flex flex-col divide-y rounded-xl border *:first:rounded-t-[inherit] *:last:rounded-b-[inherit]',\n      ),\n    }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;EA6BA,MAAM,EAAE,OAAO,eAAc;EAE7B,MAAM,aAAa,eAAe;AAChC,OAAI,QAAA,MAEF,QAAO,EAAE,cAAc,QAAA,OAAM;AAE/B,OAAI,GAAG,MAEL,QAAO,EAAE,mBAAmB,GAAG,OAAM;AAGvC,UAAO,EAAC;IACT;EAGD,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBASM,OATN,WASM,EARJ,MAAK,SAAO,EAAA;OACO,WAAA;OAAqB,MAAA,GAAE,CAAA,qHAAA;QAM1C,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCardFooter.vue.script.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":";;;;;;;EAkBA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,YAEoB,2BAAA,eAAA,mBAFO,MAAA,GAAE,CAAA,qBAAA,CAAA,CAAA,EAAA;2BACnB,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

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

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

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

@@ -0,0 +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 leading-[22px] font-medium py-[6.75px] px-3 shrink-0',\n      )\n    \">\n    <div\n      :id=\"id\"\n      class=\"scalar-card-header-title min-w-0 flex-1 truncate\">\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.script.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 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-1 truncate"
+				}, [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.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCardHeader.vue.script.js","names":["$slots"],"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 leading-[22px] font-medium py-[6.75px] px-3 shrink-0',\n      )\n    \">\n    <div\n      :id=\"id\"\n      class=\"scalar-card-header-title min-w-0 flex-1 truncate\">\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,WAAU;EAGzB,MAAM,KAAK,OAAM;AAGjB,iBAAe,GAAE;;uBAGf,YAgBoB,2BAAA,eAAA,mBAfH,MAAA,GAAE,CAAA,0EAAA,CAAA,CAAA,EAAA;2BASX,CAJN,mBAIM,OAAA;KAHH,IAAI,MAAA,GAAE;KACP,OAAM;QACN,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA,WAAA,EAGFA,KAAAA,OAAO,WAAA,WAAA,EADf,mBAIM,OAJN,YAIM,CADJ,WAAuB,KAAA,QAAA,UAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}

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

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

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

@@ -0,0 +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 v-bind=\"cx('scalar-card-content flex overflow-auto')\">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCard/ScalarCardSection.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 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"))), [renderSlot(_ctx.$slots, "default")], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarCardSection_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarCardSection.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCardSection.vue.script.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 v-bind=\"cx('scalar-card-content flex overflow-auto')\">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;EAmBA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAEM,OAAA,eAAA,mBAFO,MAAA,GAAE,CAAA,yCAAA,CAAA,CAAA,EAAA,CACb,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}

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

@@ -1,5 +1,5 @@
-export { default as ScalarCard } from './ScalarCard.vue';
-export { default as ScalarCardFooter } from './ScalarCardFooter.vue';
-export { default as ScalarCardHeader } from './ScalarCardHeader.vue';
-export { default as ScalarCardSection } from './ScalarCardSection.vue';
+export { default as ScalarCard } from './ScalarCard.vue.js';
+export { default as ScalarCardFooter } from './ScalarCardFooter.vue.js';
+export { default as ScalarCardHeader } from './ScalarCardHeader.vue.js';
+export { default as ScalarCardSection } from './ScalarCardSection.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ScalarCard/useCardHeading.js

@@ -0,0 +1,29 @@
+import { inject, provide, ref } from "vue";
+//#region src/components/ScalarCard/useCardHeading.ts
+/**
+* Tracks the region heading id for card accessibility
+*/
+var CARD_Heading_SYMBOL = Symbol();
+/**
+* Set the region heading id for a ScalarCardHeader component.
+*
+* This should be called from ScalarCardHeader components.
+*/
+var useCardHeading = (id) => {
+	const region = inject(CARD_Heading_SYMBOL, void 0);
+	if (region) region.value = id;
+};
+/**
+* Get the region heading id if set.
+*
+* This should be called from ScalarCard components.
+*/
+var useCardRegion = () => {
+	const id = ref();
+	provide(CARD_Heading_SYMBOL, id);
+	return { id };
+};
+//#endregion
+export { useCardHeading, useCardRegion };
+
+//# sourceMappingURL=useCardHeading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCardHeading.js","names":[],"sources":["../../../src/components/ScalarCard/useCardHeading.ts"],"sourcesContent":["import { type InjectionKey, type Ref, inject, provide, ref } from 'vue'\n\n/**\n * Tracks the region heading id for card accessibility\n */\nconst CARD_Heading_SYMBOL = Symbol() as InjectionKey<Ref<string | undefined>>\n\n/**\n * Set the region heading id for a ScalarCardHeader component.\n *\n * This should be called from ScalarCardHeader components.\n */\nexport const useCardHeading = (id: string) => {\n  const region = inject(CARD_Heading_SYMBOL, undefined)\n  if (region) {\n    region.value = id\n  }\n}\n\n/**\n * Get the region heading id if set.\n *\n * This should be called from ScalarCard components.\n */\nexport const useCardRegion = () => {\n  // Create a new ref for any child nested items to update\n  const id = ref<string>()\n  provide(CARD_Heading_SYMBOL, id)\n\n  return {\n    /** The region heading id ref */\n    id,\n  }\n}\n"],"mappings":";;;;;AAKA,IAAM,sBAAsB,QAAQ;;;;;;AAOpC,IAAa,kBAAkB,OAAe;CAC5C,MAAM,SAAS,OAAO,qBAAqB,KAAA,EAAU;AACrD,KAAI,OACF,QAAO,QAAQ;;;;;;;AASnB,IAAa,sBAAsB;CAEjC,MAAM,KAAK,KAAa;AACxB,SAAQ,qBAAqB,GAAG;AAEhC,QAAO,EAEL,IACD"}

package/dist/components/ScalarCheckboxInput/ScalarCheckbox.vue.d.ts

@@ -16,9 +16,16 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     selected?: boolean;
+    /** Checkbox only: shows a minus icon when true and `selected` is false (partial selection). */
+    indeterminate?: boolean;
     type?: ScalarCheckboxType;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     selected?: boolean;
+    /** Checkbox only: shows a minus icon when true and `selected` is false (partial selection). */
+    indeterminate?: boolean;
     type?: ScalarCheckboxType;
-}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}> & Readonly<{}>, {
+    indeterminate: boolean;
+    type: ScalarCheckboxType;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 //# sourceMappingURL=ScalarCheckbox.vue.d.ts.map

package/dist/components/ScalarCheckboxInput/ScalarCheckbox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCheckbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckbox.vue"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAGjD;;;;;;;;;;;;GAYG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;eAEL,OAAO;WACX,kBAAkB;;eADd,OAAO;WACX,kBAAkB;iGAwDvB,CAAC"}
+{"version":3,"file":"ScalarCheckbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckbox.vue"],"names":[],"mappings":"AA6DA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAGjD;;;;;;;;;;;;GAYG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;eAEH,OAAO;IAClB,+FAA+F;oBAC/E,OAAO;WAChB,kBAAkB;;eAHd,OAAO;IAClB,+FAA+F;oBAC/E,OAAO;WAChB,kBAAkB;;mBADT,OAAO;UAChB,kBAAkB;6EAsFzB,CAAC"}

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

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

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

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

package/dist/components/ScalarCheckboxInput/ScalarCheckbox.vue.script.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" : "text-transparent shadow-border", 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.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCheckbox.vue.script.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":";;;;;;;;;;;;;EAqBA,MAAM,QAAQ;;uBAcZ,mBAmBM,OAAA,EAlBJ,OAAK,eAAA,CAAC,kDAAgD,CACtC,MAAM,WAAA,yBAAoD,MAAM,iBAAiB,MAAM,SAAI,aAAA,yBAAA,kCAAuG,MAAM,SAAI,aAAA,YAAA,eAAA,CAAA,CAAA,EAAA,EAAA,CASpN,MAAM,YAAA,WAAA,EADd,YAGkB,MAAA,gBAAA,EAAA;;IADhB,OAAM;IACN,QAAO;SAEI,MAAM,iBAAiB,MAAM,SAAI,cAAA,WAAA,EAD9C,YAIkB,MAAA,gBAAA,EAAA;;IAFhB,eAAY;IACZ,OAAM;IACN,QAAO"}

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCheckboxGroup.vue.script.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":";;;;;;;;;;;EAmBA,MAAM,QAAQ,SAAmC,SAAA,aAAgB;EAEjE,MAAM,OAAO,OAAM;;uBAGjB,YAeuB,MAAA,6BAAA,EAAA,MAAA;2BAbM,EAAA,UAAA,KAAA,EAD3B,mBAasB,UAAA,MAAA,WAZH,QAAA,UAAV,WAAM;yBADf,YAasB,6BAAA;MAXnB,KAAK,OAAO;MACZ,YAAY,MAAA,OAAO,MAAI,EAAI,YAAY,UAAU,OAAO,MAAK;MAC7D,MAAA,MAAA,KAAI;MACJ,OAAO,OAAO;MACd,wBAA6B,YAAuB,MAAA,QAAQ,UAAA,CAAA,GAA0B,MAAA,OAAO,OAAM,GAAgB,MAAA,MAAM,QAAM,EAAI,YAAY,UAAU,OAAO,MAAK;;6BAMpJ,CAAA,gBAAA,gBAAf,OAAO,MAAK,EAAA,EAAA,CAAA,CAAA"}

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

@@ -13,17 +13,24 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     type?: ScalarCheckboxType;
+    /** When true and the control is unchecked, the native checkbox is indeterminate (partial selection). */
+    indeterminate?: boolean;
 } & {
     modelValue?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<{
     type?: ScalarCheckboxType;
+    /** When true and the control is unchecked, the native checkbox is indeterminate (partial selection). */
+    indeterminate?: boolean;
 } & {
     modelValue?: boolean;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+}>, {
+    indeterminate: boolean;
+    type: ScalarCheckboxType;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarCheckboxInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxInput.vue"],"names":[],"mappings":"AAsDA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAGjD;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;WAET,kBAAkB;;iBAYd,OAAO;;;;WAZX,kBAAkB;;iBAYd,OAAO;;;;cAgFN,CAAC,KAAK,IAAiB,KAAK,GAAG;EAUzC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarCheckboxInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxInput.vue"],"names":[],"mappings":"AAgEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAGjD;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;WAEP,kBAAkB;IACzB,wGAAwG;oBACxF,OAAO;;iBAiBd,OAAO;;;;WAnBT,kBAAkB;IACzB,wGAAwG;oBACxF,OAAO;;iBAiBd,OAAO;;;;mBAjBA,OAAO;UAFhB,kBAAkB;;cA0Gf,CAAC,KAAK,IAAiB,KAAK,GAAG;EAazC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

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