@ecoma-io/loom 0.1.1 → 0.3.0

package/dist/primitives/RadioGroup/RadioGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,63 +0,0 @@
-import { cn } from "../../lib/cn.js";
-import { optional } from "../../lib/props.js";
-import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
-import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from "reka-ui";
-//#region src/primitives/RadioGroup/RadioGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "flex flex-col gap-0.5" };
-var _hoisted_2 = {
-	key: 0,
-	class: "text-xs text-muted-foreground"
-};
-var RadioGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	__name: "RadioGroup",
-	props: {
-		modelValue: {},
-		options: {},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		name: {}
-	},
-	emits: ["update:modelValue"],
-	setup(__props) {
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(RadioGroupRoot), mergeProps(unref(optional)({
-				modelValue: __props.modelValue,
-				name: __props.name
-			}), {
-				disabled: __props.disabled,
-				orientation: "vertical",
-				class: "flex flex-col gap-3",
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", String($event)))
-			}), {
-				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (opt) => {
-					return openBlock(), createElementBlock("label", {
-						key: opt.value,
-						class: normalizeClass(unref(cn)("flex items-start gap-2 text-sm text-foreground", __props.disabled || opt.disabled ? "cursor-not-allowed text-muted-foreground" : "cursor-pointer"))
-					}, [createVNode(unref(RadioGroupItem), {
-						value: opt.value,
-						class: normalizeClass(unref(cn)("mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-input bg-background", "active:scale-90", "data-[state=checked]:border-primary", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", "disabled:cursor-not-allowed disabled:opacity-50")),
-						disabled: opt.disabled ?? false,
-						style: { "transition": "transform var(--duration-fast) var(--ease-spring),\n            border-color var(--duration-instant) var(--ease-out),\n            box-shadow var(--duration-fast) var(--ease-out)" }
-					}, {
-						default: withCtx(() => [createVNode(unref(RadioGroupIndicator), { class: "flex animate-scale-in items-center justify-center" }, {
-							default: withCtx(() => [..._cache[1] || (_cache[1] = [createElementVNode("span", { class: "h-2 w-2 rounded-full bg-primary" }, null, -1)])]),
-							_: 1
-						})]),
-						_: 1
-					}, 8, [
-						"value",
-						"class",
-						"disabled"
-					]), createElementVNode("span", _hoisted_1, [createElementVNode("span", null, toDisplayString(opt.label), 1), opt.description ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(opt.description), 1)) : createCommentVNode("", true)])], 2);
-				}), 128))]),
-				_: 1
-			}, 16, ["disabled"]);
-		};
-	}
-});
-//#endregion
-export { RadioGroup_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=RadioGroup.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/RadioGroup/RadioGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RadioGroup.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/primitives/RadioGroup/RadioGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/** One selectable row in a {@link RadioGroup}. */\nexport interface RadioOption {\n  /** Matched against `modelValue`. */\n  value: string;\n  /** Visible label, rendered beside the control. */\n  label: string;\n  /** Secondary text, rendered small under the label. */\n  description?: string;\n  /** Disables this row alone, leaving its siblings pickable. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\n\n/**\n * RadioGroup — a vertical list of mutually exclusive options, each with a\n * visible (and optionally described) label — for longer or explained\n * choices and settings lists. For a compact horizontal toggle among 2-5\n * short options that are all visible at once, reach for SegmentedControl\n * instead. Built on Reka UI's RadioGroup: roving tabindex (the group is one\n * Tab stop, not N) with arrow-key navigation between items.\n */\nwithDefaults(\n  defineProps<{\n    /** The selected option's `value`. */\n    modelValue?: string;\n    /** The rows to render, in order. */\n    options: RadioOption[];\n    /** Disables every row at once, distinct from a single option's own `disabled`. */\n    disabled?: boolean;\n    /** Set when this group posts inside a real `<form>` — becomes the submitted field name. */\n    name?: string;\n  }>(),\n  { disabled: false },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n</script>\n\n<template>\n  <RadioGroupRoot\n    v-bind=\"optional({ modelValue, name })\"\n    :disabled=\"disabled\"\n    orientation=\"vertical\"\n    class=\"flex flex-col gap-3\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <!-- RadioGroupItem is a labelable <button role=\"radio\">, so wrapping it in\n         <label> names it exactly like a native control; the rule's\n         nesting/id heuristic just doesn't recognize reka-ui's custom element\n         as a \"control\". -->\n    <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->\n    <label\n      v-for=\"opt in options\"\n      :key=\"opt.value\"\n      :class=\"\n        cn(\n          'flex items-start gap-2 text-sm text-foreground',\n          // Disabled text stays readable (AA on the light ground) — only the\n          // control glyph dims; quiet, not illegible.\n          disabled || opt.disabled ? 'cursor-not-allowed text-muted-foreground' : 'cursor-pointer',\n        )\n      \"\n    >\n      <RadioGroupItem\n        :value=\"opt.value\"\n        :class=\"\n          cn(\n            'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-input bg-background',\n            // Springy transform (press squish), steady color — the transform\n            // rides --ease-spring while border stays instant --ease-out (style\n            // below), same press language as Button/Switch/Checkbox.\n            'active:scale-90',\n            // Selected = a human decision (Loom law): the ring turns warp.\n            'data-[state=checked]:border-primary',\n            // Focus draws the weave tight: the brand ring blooms.\n            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n          )\n        \"\n        :disabled=\"opt.disabled ?? false\"\n        style=\"\n          transition:\n            transform var(--duration-fast) var(--ease-spring),\n            border-color var(--duration-instant) var(--ease-out),\n            box-shadow var(--duration-fast) var(--ease-out);\n        \"\n      >\n        <!-- The dot pops in with scale-in — a small causal \"it's selected now\". -->\n        <RadioGroupIndicator class=\"flex animate-scale-in items-center justify-center\">\n          <span class=\"h-2 w-2 rounded-full bg-primary\" />\n        </RadioGroupIndicator>\n      </RadioGroupItem>\n      <span class=\"flex flex-col gap-0.5\">\n        <span>{{ opt.label }}</span>\n        <span v-if=\"opt.description\" class=\"text-xs text-muted-foreground\">{{\n          opt.description\n        }}</span>\n      </span>\n    </label>\n  </RadioGroupRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;GA6CE,OAAA,UAAA,GAAA,YA4DiB,MAAA,cAAA,GA5DjB,WACU,MA2DO,QAAA,CA3DC,CAAA;IAAA,YAAG,QAAA;IAAU,MAAE,QAAA;GAAI,CAAA,GAAA;IAClC,UAAU,QAAA;IACX,aAAY;IACZ,OAAM;IACL,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,OAAO,MAAM,CAAA;;IAQ3D,SAAA,cAAsB,EADxB,UAAA,IAAA,GAAA,mBA+CQ,UAAA,MAAA,WA9CQ,QAAA,UAAP,QAAG;KADZ,OAAA,UAAA,GAAA,mBA+CQ,SAAA;MA7CL,KAAK,IAAI;MACT,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,kDAA6M,QAAA,YAAY,IAAI,WAAQ,6CAAA,gBAAA,CAAA;KASxP,GAAA,CAAA,YA4BiB,MAAA,cAAA,GAAA;MA3Bd,OAAO,IAAI;MACX,OAAK,eAAa,MAAA,EAAA,CAAE,CAAA,2GAAA,mBAAA,uCAAA,+GAAA,iDAAA,CAAA;MAcpB,UAAU,IAAI,YAAQ;MACvB,OAAA,EAAA,cAAA,qLAAA;;MAQA,SAAA,cAEsB,CAFtB,YAEsB,MAAA,mBAAA,GAAA,EAFD,OAAM,oDAAmD,GAAA;OAC5E,SAAA,cAAgD,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAhD,mBAAgD,QAAA,EAA1C,OAAM,kCAAiC,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA;;;;;;;;KAGjD,CAAA,GAAA,mBAKO,QALP,YAKO,CAJL,mBAA4B,QAAA,MAAA,gBAAnB,IAAI,KAAK,GAAA,CAAA,GACN,IAAI,eAAhB,UAAA,GAAA,mBAES,QAFT,YAES,gBADP,IAAI,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/primitives/SegmentedControl/SegmentedControl.js

@@ -1,7 +0,0 @@
-import SegmentedControl_vue_vue_type_script_setup_true_lang_default from "./SegmentedControl.vue_vue_type_script_setup_true_lang.js";
-//#region src/primitives/SegmentedControl/SegmentedControl.vue
-var SegmentedControl_default = SegmentedControl_vue_vue_type_script_setup_true_lang_default;
-//#endregion
-export { SegmentedControl_default as default };
-
-//# sourceMappingURL=SegmentedControl.js.map

package/dist/primitives/SegmentedControl/SegmentedControl.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SegmentedControl.js","names":[],"sources":["../../../src/primitives/SegmentedControl/SegmentedControl.vue"],"sourcesContent":["<script lang=\"ts\">\n/** One segment in a {@link SegmentedControl}. */\nexport interface SegmentedControlOption {\n  /** Matched against `modelValue`. */\n  value: string;\n  /** Visible label, rendered inside the segment. */\n  label: string;\n  /** Disables this segment alone, leaving its neighbours pickable. */\n  disabled?: boolean;\n  /** Forwarded to the segment's DOM node — lets hosts keep stable test hooks. */\n  testId?: string;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, onMounted, onUnmounted, reactive, ref, watch } from \"vue\";\nimport { RadioGroupRoot, RadioGroupItem } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\n\n/**\n * SegmentedControl — pick one of 2-5 mutually exclusive options, all visible\n * at once; one is always active. Built on Reka UI's RadioGroup (single\n * choice, roving tabindex — the group is one Tab stop, not N — with\n * arrow-key navigation). Styled with Loom tokens.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The selected option's `value`. */\n    modelValue?: string;\n    /** The segments to render, in order. */\n    options: SegmentedControlOption[];\n    /** Disables every segment at once, distinct from a single option's own `disabled`. */\n    disabled?: boolean;\n    /** `\"sm\"` is the compressed form for dense chrome — e.g. a status bar density level. */\n    size?: \"default\" | \"sm\";\n  }>(),\n  { disabled: false, size: \"default\" },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n\n// Shared sliding indicator behind the checked segment. Measured off the live\n// DOM (offsetLeft/offsetWidth of the [data-state=checked] item), not derived\n// from index/width math, so \"sm\"/\"default\" sizing and variable-width labels\n// stay correct without per-size indicator code.\nconst indicatorEl = ref<HTMLElement | null>(null);\nconst indicatorStyle = reactive({ left: \"0px\", width: \"0px\", opacity: \"0\" });\n\nlet resizeObserver: ResizeObserver | undefined;\n\n// Re-targets onto the checked item itself (not the container) so a late\n// width settle on exactly that element — e.g. the `font-medium` weight swap\n// on data-[state=checked] reflowing after this function's own read — is\n// caught by the observer and re-measured, instead of going unnoticed because\n// the container's total box happened not to change.\nfunction updateIndicator() {\n  const container = indicatorEl.value?.parentElement;\n  const active = container?.querySelector<HTMLElement>('[role=\"radio\"][data-state=\"checked\"]');\n  if (!active) {\n    indicatorStyle.opacity = \"0\";\n    resizeObserver?.disconnect();\n    return;\n  }\n  indicatorStyle.left = `${active.offsetLeft}px`;\n  indicatorStyle.width = `${active.offsetWidth}px`;\n  indicatorStyle.opacity = \"1\";\n  resizeObserver?.disconnect();\n  resizeObserver?.observe(active);\n}\n\nonMounted(() => {\n  resizeObserver = new ResizeObserver(updateIndicator);\n  updateIndicator();\n});\nonUnmounted(() => resizeObserver?.disconnect());\n\nwatch(\n  () => props.modelValue,\n  () => nextTick(updateIndicator),\n);\nwatch(\n  () => props.options,\n  () => nextTick(updateIndicator),\n  { deep: true },\n);\n</script>\n\n<template>\n  <RadioGroupRoot\n    v-bind=\"optional({ modelValue })\"\n    :disabled=\"disabled\"\n    orientation=\"horizontal\"\n    class=\"relative inline-flex items-center gap-0.5 rounded-md border border-input bg-muted p-0.5\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <span\n      ref=\"indicatorEl\"\n      aria-hidden=\"true\"\n      class=\"pointer-events-none absolute inset-y-0.5 rounded-sm bg-card shadow-sm\"\n      style=\"\n        transition:\n          left var(--duration-fast) var(--ease-spring),\n          width var(--duration-fast) var(--ease-spring);\n      \"\n      :style=\"{\n        left: indicatorStyle.left,\n        width: indicatorStyle.width,\n        opacity: indicatorStyle.opacity,\n      }\"\n    />\n    <RadioGroupItem\n      v-for=\"opt in options\"\n      :key=\"opt.value\"\n      :value=\"opt.value\"\n      :disabled=\"opt.disabled ?? false\"\n      v-bind=\"optional({ 'data-testid': opt.testId })\"\n      style=\"\n        transition:\n          transform var(--duration-fast) var(--ease-spring),\n          color var(--duration-fast) var(--ease-out);\n      \"\n      :class=\"\n        cn(\n          'relative z-10 inline-flex items-center justify-center rounded-sm text-muted-foreground',\n          size === 'sm' ? 'px-1.5 py-px text-[11px]' : 'px-3 py-1 text-sm',\n          'data-[state=checked]:font-medium data-[state=checked]:text-foreground',\n          'data-[state=unchecked]:hover:bg-subtle',\n          'active:scale-[0.97]',\n          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n          'disabled:pointer-events-none disabled:opacity-50',\n        )\n      \"\n    >\n      {{ opt.label }}\n    </RadioGroupItem>\n  </RadioGroupRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/SegmentedControl/SegmentedControl.vue.d.ts

@@ -1,40 +0,0 @@
-/** One segment in a {@link SegmentedControl}. */
-export interface SegmentedControlOption {
-    /** Matched against `modelValue`. */
-    value: string;
-    /** Visible label, rendered inside the segment. */
-    label: string;
-    /** Disables this segment alone, leaving its neighbours pickable. */
-    disabled?: boolean;
-    /** Forwarded to the segment's DOM node — lets hosts keep stable test hooks. */
-    testId?: string;
-}
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{
-    /** The selected option's `value`. */
-    modelValue?: string;
-    /** The segments to render, in order. */
-    options: SegmentedControlOption[];
-    /** Disables every segment at once, distinct from a single option's own `disabled`. */
-    disabled?: boolean;
-    /** `"sm"` is the compressed form for dense chrome — e.g. a status bar density level. */
-    size?: "default" | "sm";
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<{
-    /** The selected option's `value`. */
-    modelValue?: string;
-    /** The segments to render, in order. */
-    options: SegmentedControlOption[];
-    /** Disables every segment at once, distinct from a single option's own `disabled`. */
-    disabled?: boolean;
-    /** `"sm"` is the compressed form for dense chrome — e.g. a status bar density level. */
-    size?: "default" | "sm";
-}> & Readonly<{
-    "onUpdate:modelValue"?: (value: string) => any;
-}>, {
-    size: "default" | "sm";
-    disabled: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-//# sourceMappingURL=SegmentedControl.vue.d.ts.map

package/dist/primitives/SegmentedControl/SegmentedControl.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SegmentedControl.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/SegmentedControl/SegmentedControl.vue"],"names":[],"mappings":"AAmJA,iDAAiD;AACjD,MAAM,WAAW,sBAAsB;IACrC,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;wBACoB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAQd,qCAAqC;iBACxB,MAAM;IACnB,wCAAwC;aAC/B,sBAAsB,EAAE;IACjC,sFAAsF;eAC3E,OAAO;IAClB,wFAAwF;WACjF,SAAS,GAAG,IAAI;;;;IAPvB,qCAAqC;iBACxB,MAAM;IACnB,wCAAwC;aAC/B,sBAAsB,EAAE;IACjC,sFAAsF;eAC3E,OAAO;IAClB,wFAAwF;WACjF,SAAS,GAAG,IAAI;;;;UAAhB,SAAS,GAAG,IAAI;cAFZ,OAAO;6EAwMlB,CAAC"}

package/dist/primitives/SegmentedControl/SegmentedControl.vue_vue_type_script_setup_true_lang.js

@@ -1,89 +0,0 @@
-import { cn } from "../../lib/cn.js";
-import { optional } from "../../lib/props.js";
-import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, nextTick, normalizeStyle, onMounted, onUnmounted, openBlock, reactive, ref, renderList, toDisplayString, unref, watch, withCtx } from "vue";
-import { RadioGroupItem, RadioGroupRoot } from "reka-ui";
-//#region src/primitives/SegmentedControl/SegmentedControl.vue?vue&type=script&setup=true&lang.ts
-var SegmentedControl_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	__name: "SegmentedControl",
-	props: {
-		modelValue: {},
-		options: {},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		size: { default: "default" }
-	},
-	emits: ["update:modelValue"],
-	setup(__props) {
-		const props = __props;
-		const indicatorEl = ref(null);
-		const indicatorStyle = reactive({
-			left: "0px",
-			width: "0px",
-			opacity: "0"
-		});
-		let resizeObserver;
-		function updateIndicator() {
-			const active = (indicatorEl.value?.parentElement)?.querySelector("[role=\"radio\"][data-state=\"checked\"]");
-			if (!active) {
-				indicatorStyle.opacity = "0";
-				resizeObserver?.disconnect();
-				return;
-			}
-			indicatorStyle.left = `${active.offsetLeft}px`;
-			indicatorStyle.width = `${active.offsetWidth}px`;
-			indicatorStyle.opacity = "1";
-			resizeObserver?.disconnect();
-			resizeObserver?.observe(active);
-		}
-		onMounted(() => {
-			resizeObserver = new ResizeObserver(updateIndicator);
-			updateIndicator();
-		});
-		onUnmounted(() => resizeObserver?.disconnect());
-		watch(() => props.modelValue, () => nextTick(updateIndicator));
-		watch(() => props.options, () => nextTick(updateIndicator), { deep: true });
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(RadioGroupRoot), mergeProps(unref(optional)({ modelValue: __props.modelValue }), {
-				disabled: __props.disabled,
-				orientation: "horizontal",
-				class: "relative inline-flex items-center gap-0.5 rounded-md border border-input bg-muted p-0.5",
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", String($event)))
-			}), {
-				default: withCtx(() => [createElementVNode("span", {
-					ref_key: "indicatorEl",
-					ref: indicatorEl,
-					"aria-hidden": "true",
-					class: "pointer-events-none absolute inset-y-0.5 rounded-sm bg-card shadow-sm",
-					style: normalizeStyle([{ "transition": "left var(--duration-fast) var(--ease-spring),\n          width var(--duration-fast) var(--ease-spring)" }, {
-						left: indicatorStyle.left,
-						width: indicatorStyle.width,
-						opacity: indicatorStyle.opacity
-					}])
-				}, null, 4), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (opt) => {
-					return openBlock(), createBlock(unref(RadioGroupItem), mergeProps({
-						key: opt.value,
-						value: opt.value,
-						disabled: opt.disabled ?? false
-					}, { ref_for: true }, unref(optional)({ "data-testid": opt.testId }), {
-						style: { "transition": "transform var(--duration-fast) var(--ease-spring),\n          color var(--duration-fast) var(--ease-out)" },
-						class: unref(cn)("relative z-10 inline-flex items-center justify-center rounded-sm text-muted-foreground", __props.size === "sm" ? "px-1.5 py-px text-[11px]" : "px-3 py-1 text-sm", "data-[state=checked]:font-medium data-[state=checked]:text-foreground", "data-[state=unchecked]:hover:bg-subtle", "active:scale-[0.97]", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", "disabled:pointer-events-none disabled:opacity-50")
-					}), {
-						default: withCtx(() => [createTextVNode(toDisplayString(opt.label), 1)]),
-						_: 2
-					}, 1040, [
-						"value",
-						"disabled",
-						"class"
-					]);
-				}), 128))]),
-				_: 1
-			}, 16, ["disabled"]);
-		};
-	}
-});
-//#endregion
-export { SegmentedControl_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=SegmentedControl.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/SegmentedControl/SegmentedControl.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SegmentedControl.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/primitives/SegmentedControl/SegmentedControl.vue"],"sourcesContent":["<script lang=\"ts\">\n/** One segment in a {@link SegmentedControl}. */\nexport interface SegmentedControlOption {\n  /** Matched against `modelValue`. */\n  value: string;\n  /** Visible label, rendered inside the segment. */\n  label: string;\n  /** Disables this segment alone, leaving its neighbours pickable. */\n  disabled?: boolean;\n  /** Forwarded to the segment's DOM node — lets hosts keep stable test hooks. */\n  testId?: string;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, onMounted, onUnmounted, reactive, ref, watch } from \"vue\";\nimport { RadioGroupRoot, RadioGroupItem } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\n\n/**\n * SegmentedControl — pick one of 2-5 mutually exclusive options, all visible\n * at once; one is always active. Built on Reka UI's RadioGroup (single\n * choice, roving tabindex — the group is one Tab stop, not N — with\n * arrow-key navigation). Styled with Loom tokens.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The selected option's `value`. */\n    modelValue?: string;\n    /** The segments to render, in order. */\n    options: SegmentedControlOption[];\n    /** Disables every segment at once, distinct from a single option's own `disabled`. */\n    disabled?: boolean;\n    /** `\"sm\"` is the compressed form for dense chrome — e.g. a status bar density level. */\n    size?: \"default\" | \"sm\";\n  }>(),\n  { disabled: false, size: \"default\" },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n\n// Shared sliding indicator behind the checked segment. Measured off the live\n// DOM (offsetLeft/offsetWidth of the [data-state=checked] item), not derived\n// from index/width math, so \"sm\"/\"default\" sizing and variable-width labels\n// stay correct without per-size indicator code.\nconst indicatorEl = ref<HTMLElement | null>(null);\nconst indicatorStyle = reactive({ left: \"0px\", width: \"0px\", opacity: \"0\" });\n\nlet resizeObserver: ResizeObserver | undefined;\n\n// Re-targets onto the checked item itself (not the container) so a late\n// width settle on exactly that element — e.g. the `font-medium` weight swap\n// on data-[state=checked] reflowing after this function's own read — is\n// caught by the observer and re-measured, instead of going unnoticed because\n// the container's total box happened not to change.\nfunction updateIndicator() {\n  const container = indicatorEl.value?.parentElement;\n  const active = container?.querySelector<HTMLElement>('[role=\"radio\"][data-state=\"checked\"]');\n  if (!active) {\n    indicatorStyle.opacity = \"0\";\n    resizeObserver?.disconnect();\n    return;\n  }\n  indicatorStyle.left = `${active.offsetLeft}px`;\n  indicatorStyle.width = `${active.offsetWidth}px`;\n  indicatorStyle.opacity = \"1\";\n  resizeObserver?.disconnect();\n  resizeObserver?.observe(active);\n}\n\nonMounted(() => {\n  resizeObserver = new ResizeObserver(updateIndicator);\n  updateIndicator();\n});\nonUnmounted(() => resizeObserver?.disconnect());\n\nwatch(\n  () => props.modelValue,\n  () => nextTick(updateIndicator),\n);\nwatch(\n  () => props.options,\n  () => nextTick(updateIndicator),\n  { deep: true },\n);\n</script>\n\n<template>\n  <RadioGroupRoot\n    v-bind=\"optional({ modelValue })\"\n    :disabled=\"disabled\"\n    orientation=\"horizontal\"\n    class=\"relative inline-flex items-center gap-0.5 rounded-md border border-input bg-muted p-0.5\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <span\n      ref=\"indicatorEl\"\n      aria-hidden=\"true\"\n      class=\"pointer-events-none absolute inset-y-0.5 rounded-sm bg-card shadow-sm\"\n      style=\"\n        transition:\n          left var(--duration-fast) var(--ease-spring),\n          width var(--duration-fast) var(--ease-spring);\n      \"\n      :style=\"{\n        left: indicatorStyle.left,\n        width: indicatorStyle.width,\n        opacity: indicatorStyle.opacity,\n      }\"\n    />\n    <RadioGroupItem\n      v-for=\"opt in options\"\n      :key=\"opt.value\"\n      :value=\"opt.value\"\n      :disabled=\"opt.disabled ?? false\"\n      v-bind=\"optional({ 'data-testid': opt.testId })\"\n      style=\"\n        transition:\n          transform var(--duration-fast) var(--ease-spring),\n          color var(--duration-fast) var(--ease-out);\n      \"\n      :class=\"\n        cn(\n          'relative z-10 inline-flex items-center justify-center rounded-sm text-muted-foreground',\n          size === 'sm' ? 'px-1.5 py-px text-[11px]' : 'px-3 py-1 text-sm',\n          'data-[state=checked]:font-medium data-[state=checked]:text-foreground',\n          'data-[state=unchecked]:hover:bg-subtle',\n          'active:scale-[0.97]',\n          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n          'disabled:pointer-events-none disabled:opacity-50',\n        )\n      \"\n    >\n      {{ opt.label }}\n    </RadioGroupItem>\n  </RadioGroupRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EA0BA,MAAM,QAAQ;EAoBd,MAAM,cAAc,IAAwB,IAAI;EAChD,MAAM,iBAAiB,SAAS;GAAE,MAAM;GAAO,OAAO;GAAO,SAAS;EAAI,CAAC;EAE3E,IAAI;EAOJ,SAAS,kBAAkB;GAEzB,MAAM,UADY,YAAY,OAAO,cAAA,EACX,cAA2B,0CAAsC;GAC3F,IAAI,CAAC,QAAQ;IACX,eAAe,UAAU;IACzB,gBAAgB,WAAW;IAC3B;GACF;GACA,eAAe,OAAO,GAAG,OAAO,WAAW;GAC3C,eAAe,QAAQ,GAAG,OAAO,YAAY;GAC7C,eAAe,UAAU;GACzB,gBAAgB,WAAW;GAC3B,gBAAgB,QAAQ,MAAM;EAChC;EAEA,gBAAgB;GACd,iBAAiB,IAAI,eAAe,eAAe;GACnD,gBAAgB;EAClB,CAAC;EACD,kBAAkB,gBAAgB,WAAW,CAAC;EAE9C,YACQ,MAAM,kBACN,SAAS,eAAe,CAChC;EACA,YACQ,MAAM,eACN,SAAS,eAAe,GAC9B,EAAE,MAAM,KAAK,CACf;;GAIE,OAAA,UAAA,GAAA,YA+CiB,MAAA,cAAA,GA/CjB,WACU,MA8CO,QAAA,CA9CC,CAAA,EAAA,YAAG,QAAA,WAAU,CAAA,GAAA;IAC5B,UAAU,QAAA;IACX,aAAY;IACZ,OAAM;IACL,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,OAAO,MAAM,CAAA;;IAE7D,SAAA,cAcE,CAdF,mBAcE,QAAA;KAbI,SAAA;KAAJ,KAAI;KACJ,eAAY;KACZ,OAAM;KACN,OAIC,eAAA,CAJD,EAAA,cAAA,yGAAA,GAIC;MACuB,MAAA,eAAe;MAAqB,OAAA,eAAe;MAAwB,SAAA,eAAe;;IAMpH,GAAA,MAAA,CAAA,IAAA,UAAA,IAAA,GAAA,mBAwBiB,UAAA,MAAA,WAvBD,QAAA,UAAP,QAAG;KADZ,OAAA,UAAA,GAAA,YAwBiB,MAAA,cAAA,GAxBjB,WAwBiB;MAtBd,KAAK,IAAI;MACT,OAAO,IAAI;MACX,UAAU,IAAI,YAAQ;KACf,GAAA,EAAA,SAAA,KAAA,GAAA,MAAA,QAAA,CAAQ,CAAA,EAAA,eAAkB,IAAI,OAAM,CAAA,GAAA;MAC5C,OAAA,EAAA,cAAA,2GAAA;MAKC,OAAgB,MAAA,EAAA,CAAE,CAAA,0FAAgH,QAAA,SAAI,OAAA,6BAAA,qBAAA,yEAAA,0CAAA,uBAAA,+GAAA,kDAAA;;MAYvI,SAAA,cAAe,CAAZ,gBAAA,gBAAA,IAAI,KAAK,GAAA,CAAA,CAAA,CAAA"}

package/dist/primitives/Select/Select.js

@@ -1,7 +0,0 @@
-import Select_vue_vue_type_script_setup_true_lang_default, { selectVariants } from "./Select.vue_vue_type_script_setup_true_lang.js";
-//#region src/primitives/Select/Select.vue
-var Select_default = Select_vue_vue_type_script_setup_true_lang_default;
-//#endregion
-export { Select_default as default, selectVariants };
-
-//# sourceMappingURL=Select.js.map

package/dist/primitives/Select/Select.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../../src/primitives/Select/Select.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/** One row of the list. `value` is what the model carries; `label` is what a reader sees. */\nexport interface SelectOption {\n  /** The value bound to `v-model` when this row is chosen. Unique within the list. */\n  value: string;\n  /** The text shown on the row, and on the trigger once it is chosen. */\n  label: string;\n  /** Present but unchoosable — visible, skipped by the keyboard, unclickable. */\n  disabled?: boolean;\n}\n\n/**\n * The trigger's height scale. It matches the text input scale exactly, so a\n * form row mixing a Select beside a text field never comes out uneven — which\n * is why reaching past `size` for an `h-*` class is always the wrong fix.\n */\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\n\nexport const selectVariants = cva(\n  [\n    \"group inline-flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background text-foreground\",\n    \"transition-[color,background-color,box-shadow] duration-fast ease-out hover:bg-subtle\",\n    // Rim-lit at rest; the ring blooms on focus.\n    \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\n    \"disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground\",\n  ],\n  {\n    // `satisfies` keeps the two halves honest: the union above is the name a\n    // consumer imports and the documentation prints, the map below is the\n    // classes. Adding a member to one and not the other stops compiling.\n    variants: {\n      size: {\n        sm: \"h-8 px-2.5 text-xs\",\n        md: \"h-9 px-3 text-sm\",\n        lg: \"h-11 px-4 text-base\",\n      } satisfies Record<SelectSize, string>,\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  SelectRoot,\n  SelectTrigger,\n  SelectValue,\n  SelectIcon,\n  SelectPortal,\n  SelectContent,\n  SelectViewport,\n  SelectItem,\n  SelectItemText,\n  SelectItemIndicator,\n} from \"reka-ui\";\nimport { Check, ChevronDown } from \"@lucide/vue\";\nimport { cn } from \"../../lib/cn\";\nimport { listStaggerDelay } from \"../../lib/motion\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\n\n/**\n * Select — pick one value out of a closed list, through a compact trigger and\n * a popover listbox. It suits roughly three to fifteen rows where one value is\n * always chosen: a language, a resolution, a quality preset.\n *\n * Below that, two to five options a reader should see all of at once are\n * better shown than hidden. Above it, a list long enough to need searching\n * wants a combobox, which is a different control rather than a longer version\n * of this one.\n *\n * Built on Reka UI's Select, which supplies the listbox semantics: arrow-key\n * navigation, first-character typeahead, Escape and outside-click to close, and\n * the `role=\"combobox\"` trigger wired to the listbox by `aria-expanded` and\n * `aria-controls`. The active row is tracked by moving real focus onto it, not\n * by `aria-activedescendant`.\n */\nwithDefaults(\n  defineProps<{\n    /** The chosen option's `value`. Leave it unset to show the placeholder. */\n    modelValue?: string;\n    /** The rows, in the order they are shown. */\n    options: SelectOption[];\n    /** Shown on the trigger while nothing is chosen. It is not an option. */\n    placeholder?: string;\n    /** Unavailable: dims the trigger and refuses to open. */\n    disabled?: boolean;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. */\n    invalid?: boolean;\n    /** Trigger height. It shares the text input scale so mixed form rows stay aligned. */\n    size?: SelectSize;\n  }>(),\n  { disabled: false, invalid: false, size: \"md\" },\n);\n\ndefineEmits<{\n  /** The chosen option's `value`. Fires once per choice; the list closes with it. */\n  \"update:modelValue\": [value: string];\n}>();\n\n// The root renders no DOM node at all, so fallthrough attributes would be\n// dropped on the floor rather than landing anywhere. They go to the trigger,\n// which is the interactive element they describe.\n//\n// `class` is pulled out of that spread and merged through `cn()` instead.\n// Spreading it alongside the trigger's own `:class` only concatenates the two\n// lists — Vue's merge is generic, not Tailwind-aware — so a caller's `w-28`\n// silently loses to the trigger's own `w-full` depending on which utility\n// Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: triggerAttrs } = useSplitAttrs();\n</script>\n\n<template>\n  <SelectRoot\n    :model-value=\"modelValue ?? ''\"\n    :disabled=\"disabled\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <SelectTrigger\n      v-bind=\"triggerAttrs\"\n      :aria-invalid=\"invalid || undefined\"\n      :data-invalid=\"invalid || undefined\"\n      :class=\"\n        cn(\n          selectVariants({ size }),\n          !invalid && 'focus-visible:shadow-halo',\n          invalid && 'border-destructive focus-visible:outline-destructive',\n          attrs.class as string,\n        )\n      \"\n    >\n      <SelectValue :placeholder=\"placeholder ?? ''\" />\n      <SelectIcon class=\"shrink-0 text-muted-foreground\">\n        <ChevronDown\n          class=\"h-4 w-4 transition-transform duration-fast ease-out group-data-[state=open]:rotate-180\"\n        />\n      </SelectIcon>\n    </SelectTrigger>\n\n    <SelectPortal>\n      <SelectContent\n        position=\"popper\"\n        :side-offset=\"6\"\n        :class=\"\n          cn(\n            'z-50 min-w-[var(--reka-select-trigger-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md',\n            // Scoped to the open state, never unconditional. Reka keeps the\n            // closed content mounted while it waits for an animationend that a\n            // mount-only animation never fires again — an invisible overlay\n            // eating clicks. Scoping it makes the closed element compute\n            // `animation-name: none`, which is the immediate-unmount branch.\n            'data-[state=open]:animate-fade-rise',\n          )\n        \"\n      >\n        <SelectViewport class=\"p-1\">\n          <!-- The rows reveal one step after another, from the shared stagger\n               vocabulary rather than a per-template delay of its own. -->\n          <SelectItem\n            v-for=\"(option, index) in options\"\n            :key=\"option.value\"\n            :value=\"option.value\"\n            :disabled=\"option.disabled ?? false\"\n            :style=\"{ animationDelay: listStaggerDelay(index) }\"\n            :class=\"\n              cn(\n                'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-3 py-1.5 pr-8 text-sm text-foreground outline-none',\n                'transition-colors duration-fast ease-out',\n                'animate-fade-rise',\n                'data-[highlighted]:bg-subtle',\n                'data-[state=checked]:bg-primary-muted data-[state=checked]:text-primary',\n                'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n              )\n            \"\n          >\n            <SelectItemText>{{ option.label }}</SelectItemText>\n            <SelectItemIndicator class=\"absolute right-2 inline-flex items-center\">\n              <Check class=\"h-4 w-4\" />\n            </SelectItemIndicator>\n          </SelectItem>\n        </SelectViewport>\n      </SelectContent>\n    </SelectPortal>\n  </SelectRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/Select/Select.vue.d.ts

@@ -1,56 +0,0 @@
-/** One row of the list. `value` is what the model carries; `label` is what a reader sees. */
-export interface SelectOption {
-    /** The value bound to `v-model` when this row is chosen. Unique within the list. */
-    value: string;
-    /** The text shown on the row, and on the trigger once it is chosen. */
-    label: string;
-    /** Present but unchoosable — visible, skipped by the keyboard, unclickable. */
-    disabled?: boolean;
-}
-/**
- * The trigger's height scale. It matches the text input scale exactly, so a
- * form row mixing a Select beside a text field never comes out uneven — which
- * is why reaching past `size` for an `h-*` class is always the wrong fix.
- */
-export type SelectSize = "sm" | "md" | "lg";
-export declare const selectVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{
-    /** The chosen option's `value`. Leave it unset to show the placeholder. */
-    modelValue?: string;
-    /** The rows, in the order they are shown. */
-    options: SelectOption[];
-    /** Shown on the trigger while nothing is chosen. It is not an option. */
-    placeholder?: string;
-    /** Unavailable: dims the trigger and refuses to open. */
-    disabled?: boolean;
-    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. */
-    invalid?: boolean;
-    /** Trigger height. It shares the text input scale so mixed form rows stay aligned. */
-    size?: SelectSize;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<{
-    /** The chosen option's `value`. Leave it unset to show the placeholder. */
-    modelValue?: string;
-    /** The rows, in the order they are shown. */
-    options: SelectOption[];
-    /** Shown on the trigger while nothing is chosen. It is not an option. */
-    placeholder?: string;
-    /** Unavailable: dims the trigger and refuses to open. */
-    disabled?: boolean;
-    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. */
-    invalid?: boolean;
-    /** Trigger height. It shares the text input scale so mixed form rows stay aligned. */
-    size?: SelectSize;
-}> & Readonly<{
-    "onUpdate:modelValue"?: (value: string) => any;
-}>, {
-    size: SelectSize;
-    disabled: boolean;
-    invalid: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-//# sourceMappingURL=Select.vue.d.ts.map

package/dist/primitives/Select/Select.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Select.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Select/Select.vue"],"names":[],"mappings":"AAkNA,6FAA6F;AAC7F,MAAM,WAAW,YAAY;IAC3B,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,eAAO,MAAM,cAAc;;8EAqB1B,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAkBd,2EAA2E;iBAC9D,MAAM;IACnB,6CAA6C;aACpC,YAAY,EAAE;IACvB,yEAAyE;kBAC3D,MAAM;IACpB,yDAAyD;eAC9C,OAAO;IAClB,oFAAoF;cAC1E,OAAO;IACjB,sFAAsF;WAC/E,UAAU;;;;IAXjB,2EAA2E;iBAC9D,MAAM;IACnB,6CAA6C;aACpC,YAAY,EAAE;IACvB,yEAAyE;kBAC3D,MAAM;IACpB,yDAAyD;eAC9C,OAAO;IAClB,oFAAoF;cAC1E,OAAO;IACjB,sFAAsF;WAC/E,UAAU;;;;UAAV,UAAU;cAJN,OAAO;aAER,OAAO;6EAyUjB,CAAC"}

package/dist/primitives/Select/Select.vue_vue_type_script_setup_true_lang.js

@@ -1,122 +0,0 @@
-import { cn } from "../../lib/cn.js";
-import { listStaggerDelay } from "../../lib/motion.js";
-import { useSplitAttrs } from "../../lib/attrs.js";
-import { Check, ChevronDown } from "@lucide/vue";
-import { Fragment, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
-import { SelectContent, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectPortal, SelectRoot, SelectTrigger, SelectValue, SelectViewport } from "reka-ui";
-import { cva } from "class-variance-authority";
-//#region src/primitives/Select/Select.vue?vue&type=script&setup=true&lang.ts
-/**
-* Select — pick one value out of a closed list, through a compact trigger and
-* a popover listbox. It suits roughly three to fifteen rows where one value is
-* always chosen: a language, a resolution, a quality preset.
-*
-* Below that, two to five options a reader should see all of at once are
-* better shown than hidden. Above it, a list long enough to need searching
-* wants a combobox, which is a different control rather than a longer version
-* of this one.
-*
-* Built on Reka UI's Select, which supplies the listbox semantics: arrow-key
-* navigation, first-character typeahead, Escape and outside-click to close, and
-* the `role="combobox"` trigger wired to the listbox by `aria-expanded` and
-* `aria-controls`. The active row is tracked by moving real focus onto it, not
-* by `aria-activedescendant`.
-*/
-var selectVariants = cva([
-	"group inline-flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background text-foreground",
-	"transition-[color,background-color,box-shadow] duration-fast ease-out hover:bg-subtle",
-	"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
-	"disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground"
-], {
-	variants: { size: {
-		sm: "h-8 px-2.5 text-xs",
-		md: "h-9 px-3 text-sm",
-		lg: "h-11 px-4 text-base"
-	} },
-	defaultVariants: { size: "md" }
-});
-var Select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	inheritAttrs: false,
-	__name: "Select",
-	props: {
-		modelValue: {},
-		options: {},
-		placeholder: {},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		invalid: {
-			type: Boolean,
-			default: false
-		},
-		size: { default: "md" }
-	},
-	emits: ["update:modelValue"],
-	setup(__props) {
-		const { attrs, rest: triggerAttrs } = useSplitAttrs();
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(SelectRoot), {
-				"model-value": __props.modelValue ?? "",
-				disabled: __props.disabled,
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", String($event)))
-			}, {
-				default: withCtx(() => [createVNode(unref(SelectTrigger), mergeProps(unref(triggerAttrs), {
-					"aria-invalid": __props.invalid || void 0,
-					"data-invalid": __props.invalid || void 0,
-					class: unref(cn)(unref(selectVariants)({ size: __props.size }), !__props.invalid && "focus-visible:shadow-halo", __props.invalid && "border-destructive focus-visible:outline-destructive", unref(attrs).class)
-				}), {
-					default: withCtx(() => [createVNode(unref(SelectValue), { placeholder: __props.placeholder ?? "" }, null, 8, ["placeholder"]), createVNode(unref(SelectIcon), { class: "shrink-0 text-muted-foreground" }, {
-						default: withCtx(() => [createVNode(unref(ChevronDown), { class: "h-4 w-4 transition-transform duration-fast ease-out group-data-[state=open]:rotate-180" })]),
-						_: 1
-					})]),
-					_: 1
-				}, 16, [
-					"aria-invalid",
-					"data-invalid",
-					"class"
-				]), createVNode(unref(SelectPortal), null, {
-					default: withCtx(() => [createVNode(unref(SelectContent), {
-						position: "popper",
-						"side-offset": 6,
-						class: normalizeClass(unref(cn)("z-50 min-w-[var(--reka-select-trigger-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md", "data-[state=open]:animate-fade-rise"))
-					}, {
-						default: withCtx(() => [createVNode(unref(SelectViewport), { class: "p-1" }, {
-							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
-								return openBlock(), createBlock(unref(SelectItem), {
-									key: option.value,
-									value: option.value,
-									disabled: option.disabled ?? false,
-									style: normalizeStyle({ animationDelay: unref(listStaggerDelay)(index) }),
-									class: normalizeClass(unref(cn)("relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-3 py-1.5 pr-8 text-sm text-foreground outline-none", "transition-colors duration-fast ease-out", "animate-fade-rise", "data-[highlighted]:bg-subtle", "data-[state=checked]:bg-primary-muted data-[state=checked]:text-primary", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"))
-								}, {
-									default: withCtx(() => [createVNode(unref(SelectItemText), null, {
-										default: withCtx(() => [createTextVNode(toDisplayString(option.label), 1)]),
-										_: 2
-									}, 1024), createVNode(unref(SelectItemIndicator), { class: "absolute right-2 inline-flex items-center" }, {
-										default: withCtx(() => [createVNode(unref(Check), { class: "h-4 w-4" })]),
-										_: 1
-									})]),
-									_: 2
-								}, 1032, [
-									"value",
-									"disabled",
-									"style",
-									"class"
-								]);
-							}), 128))]),
-							_: 1
-						})]),
-						_: 1
-					}, 8, ["class"])]),
-					_: 1
-				})]),
-				_: 1
-			}, 8, ["model-value", "disabled"]);
-		};
-	}
-});
-//#endregion
-export { Select_vue_vue_type_script_setup_true_lang_default as default, selectVariants };
-
-//# sourceMappingURL=Select.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/Select/Select.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Select.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/primitives/Select/Select.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/** One row of the list. `value` is what the model carries; `label` is what a reader sees. */\nexport interface SelectOption {\n  /** The value bound to `v-model` when this row is chosen. Unique within the list. */\n  value: string;\n  /** The text shown on the row, and on the trigger once it is chosen. */\n  label: string;\n  /** Present but unchoosable — visible, skipped by the keyboard, unclickable. */\n  disabled?: boolean;\n}\n\n/**\n * The trigger's height scale. It matches the text input scale exactly, so a\n * form row mixing a Select beside a text field never comes out uneven — which\n * is why reaching past `size` for an `h-*` class is always the wrong fix.\n */\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\n\nexport const selectVariants = cva(\n  [\n    \"group inline-flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background text-foreground\",\n    \"transition-[color,background-color,box-shadow] duration-fast ease-out hover:bg-subtle\",\n    // Rim-lit at rest; the ring blooms on focus.\n    \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\n    \"disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground\",\n  ],\n  {\n    // `satisfies` keeps the two halves honest: the union above is the name a\n    // consumer imports and the documentation prints, the map below is the\n    // classes. Adding a member to one and not the other stops compiling.\n    variants: {\n      size: {\n        sm: \"h-8 px-2.5 text-xs\",\n        md: \"h-9 px-3 text-sm\",\n        lg: \"h-11 px-4 text-base\",\n      } satisfies Record<SelectSize, string>,\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  SelectRoot,\n  SelectTrigger,\n  SelectValue,\n  SelectIcon,\n  SelectPortal,\n  SelectContent,\n  SelectViewport,\n  SelectItem,\n  SelectItemText,\n  SelectItemIndicator,\n} from \"reka-ui\";\nimport { Check, ChevronDown } from \"@lucide/vue\";\nimport { cn } from \"../../lib/cn\";\nimport { listStaggerDelay } from \"../../lib/motion\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\n\n/**\n * Select — pick one value out of a closed list, through a compact trigger and\n * a popover listbox. It suits roughly three to fifteen rows where one value is\n * always chosen: a language, a resolution, a quality preset.\n *\n * Below that, two to five options a reader should see all of at once are\n * better shown than hidden. Above it, a list long enough to need searching\n * wants a combobox, which is a different control rather than a longer version\n * of this one.\n *\n * Built on Reka UI's Select, which supplies the listbox semantics: arrow-key\n * navigation, first-character typeahead, Escape and outside-click to close, and\n * the `role=\"combobox\"` trigger wired to the listbox by `aria-expanded` and\n * `aria-controls`. The active row is tracked by moving real focus onto it, not\n * by `aria-activedescendant`.\n */\nwithDefaults(\n  defineProps<{\n    /** The chosen option's `value`. Leave it unset to show the placeholder. */\n    modelValue?: string;\n    /** The rows, in the order they are shown. */\n    options: SelectOption[];\n    /** Shown on the trigger while nothing is chosen. It is not an option. */\n    placeholder?: string;\n    /** Unavailable: dims the trigger and refuses to open. */\n    disabled?: boolean;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. */\n    invalid?: boolean;\n    /** Trigger height. It shares the text input scale so mixed form rows stay aligned. */\n    size?: SelectSize;\n  }>(),\n  { disabled: false, invalid: false, size: \"md\" },\n);\n\ndefineEmits<{\n  /** The chosen option's `value`. Fires once per choice; the list closes with it. */\n  \"update:modelValue\": [value: string];\n}>();\n\n// The root renders no DOM node at all, so fallthrough attributes would be\n// dropped on the floor rather than landing anywhere. They go to the trigger,\n// which is the interactive element they describe.\n//\n// `class` is pulled out of that spread and merged through `cn()` instead.\n// Spreading it alongside the trigger's own `:class` only concatenates the two\n// lists — Vue's merge is generic, not Tailwind-aware — so a caller's `w-28`\n// silently loses to the trigger's own `w-full` depending on which utility\n// Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: triggerAttrs } = useSplitAttrs();\n</script>\n\n<template>\n  <SelectRoot\n    :model-value=\"modelValue ?? ''\"\n    :disabled=\"disabled\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <SelectTrigger\n      v-bind=\"triggerAttrs\"\n      :aria-invalid=\"invalid || undefined\"\n      :data-invalid=\"invalid || undefined\"\n      :class=\"\n        cn(\n          selectVariants({ size }),\n          !invalid && 'focus-visible:shadow-halo',\n          invalid && 'border-destructive focus-visible:outline-destructive',\n          attrs.class as string,\n        )\n      \"\n    >\n      <SelectValue :placeholder=\"placeholder ?? ''\" />\n      <SelectIcon class=\"shrink-0 text-muted-foreground\">\n        <ChevronDown\n          class=\"h-4 w-4 transition-transform duration-fast ease-out group-data-[state=open]:rotate-180\"\n        />\n      </SelectIcon>\n    </SelectTrigger>\n\n    <SelectPortal>\n      <SelectContent\n        position=\"popper\"\n        :side-offset=\"6\"\n        :class=\"\n          cn(\n            'z-50 min-w-[var(--reka-select-trigger-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md',\n            // Scoped to the open state, never unconditional. Reka keeps the\n            // closed content mounted while it waits for an animationend that a\n            // mount-only animation never fires again — an invisible overlay\n            // eating clicks. Scoping it makes the closed element compute\n            // `animation-name: none`, which is the immediate-unmount branch.\n            'data-[state=open]:animate-fade-rise',\n          )\n        \"\n      >\n        <SelectViewport class=\"p-1\">\n          <!-- The rows reveal one step after another, from the shared stagger\n               vocabulary rather than a per-template delay of its own. -->\n          <SelectItem\n            v-for=\"(option, index) in options\"\n            :key=\"option.value\"\n            :value=\"option.value\"\n            :disabled=\"option.disabled ?? false\"\n            :style=\"{ animationDelay: listStaggerDelay(index) }\"\n            :class=\"\n              cn(\n                'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-3 py-1.5 pr-8 text-sm text-foreground outline-none',\n                'transition-colors duration-fast ease-out',\n                'animate-fade-rise',\n                'data-[highlighted]:bg-subtle',\n                'data-[state=checked]:bg-primary-muted data-[state=checked]:text-primary',\n                'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n              )\n            \"\n          >\n            <SelectItemText>{{ option.label }}</SelectItemText>\n            <SelectItemIndicator class=\"absolute right-2 inline-flex items-center\">\n              <Check class=\"h-4 w-4\" />\n            </SelectItemIndicator>\n          </SelectItem>\n        </SelectViewport>\n      </SelectContent>\n    </SelectPortal>\n  </SelectRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAa,iBAAiB,IAC5B;CACE;CACA;CAEA;CACA;AACF,GACA;CAIE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;;;;;;;;;;;;;;;;;;;EAsEA,MAAM,EAAE,OAAO,MAAM,iBAAiB,cAAc;;GAIlD,OAAA,UAAA,GAAA,YAsEa,MAAA,UAAA,GAAA;IArEV,eAAa,QAAA,cAAU;IACvB,UAAU,QAAA;IACV,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,OAAO,MAAM,CAAA;;IAE7D,SAAA,cAmBgB,CAnBhB,YAmBgB,MAAA,aAAA,GAnBhB,WACU,MAkBM,YAAA,GAlBM;KACnB,gBAAc,QAAA,WAAW,KAAA;KACzB,gBAAc,QAAA,WAAW,KAAA;KACzB,OAAgB,MAAA,EAAA,CAAE,CAAY,MAAA,cAAA,CAAc,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAgB,CAAA,QAAA,WAAO,6BAA2C,QAAA,WAAO,wDAAsE,MAAA,KAAA,CAAK,CAAC,KAAA;;KASzM,SAAA,cAAgD,CAAhD,YAAgD,MAAA,WAAA,GAAA,EAAlC,aAAa,QAAA,eAAW,GAAA,GAAA,MAAA,GAAA,CAAA,aAAA,CAAA,GACtC,YAIa,MAAA,UAAA,GAAA,EAJD,OAAM,iCAAgC,GAAA;MAChD,SAAA,cAEE,CAFF,YAEE,MAAA,WAAA,GAAA,EADA,OAAM,yFAAwF,CAAA,CAAA,CAAA;;;;;;;;IAKpG,CAAA,GAAA,YA2Ce,MAAA,YAAA,GAAA,MAAA;KA1Cb,SAAA,cAyCgB,CAzChB,YAyCgB,MAAA,aAAA,GAAA;MAxCd,UAAS;MACR,eAAa;MACb,OAAK,eAAa,MAAA,EAAA,CAAE,CAAA,8IAAA,qCAAA,CAAA;;MAYrB,SAAA,cAyBiB,CAzBjB,YAyBiB,MAAA,cAAA,GAAA,EAzBD,OAAM,MAAK,GAAA;OAIvB,SAAA,cAAkC,EADpC,UAAA,IAAA,GAAA,mBAqBa,UAAA,MAAA,WApBe,QAAA,UAAlB,QAAQ,UAAK;QADvB,OAAA,UAAA,GAAA,YAqBa,MAAA,UAAA,GAAA;SAnBV,KAAK,OAAO;SACZ,OAAO,OAAO;SACd,UAAU,OAAO,YAAQ;SACzB,OAAK,eAAA,EAAA,gBAAoB,MAAA,gBAAA,CAAgB,CAAC,KAAK,EAAA,CAAA;SAC/C,OAAK,eAAiB,MAAA,EAAA,CAAE,CAAA,gIAAA,4CAAA,qBAAA,gCAAA,2EAAA,gEAAA,CAAA;;SAWzB,SAAA,cAAmD,CAAnD,YAAmD,MAAA,cAAA,GAAA,MAAA;UAAnC,SAAA,cAAkB,CAAf,gBAAA,gBAAA,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA;;SAC/B,GAAA,IAAA,GAAA,YAEsB,MAAA,mBAAA,GAAA,EAFD,OAAM,4CAA2C,GAAA;UACpE,SAAA,cAAyB,CAAzB,YAAyB,MAAA,KAAA,GAAA,EAAlB,OAAM,UAAS,CAAA,CAAA,CAAA"}

package/dist/primitives/Separator/Separator.js

@@ -1,7 +0,0 @@
-import Separator_vue_vue_type_script_setup_true_lang_default from "./Separator.vue_vue_type_script_setup_true_lang.js";
-//#region src/primitives/Separator/Separator.vue
-var Separator_default = Separator_vue_vue_type_script_setup_true_lang_default;
-//#endregion
-export { Separator_default as default };
-
-//# sourceMappingURL=Separator.js.map

package/dist/primitives/Separator/Separator.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Separator.js","names":[],"sources":["../../../src/primitives/Separator/Separator.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Which axis the hairline draws along. */\nexport type SeparatorOrientation = \"horizontal\" | \"vertical\";\n</script>\n\n<script setup lang=\"ts\">\nimport { Separator as SeparatorRoot } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Separator — thin visual/semantic divider between content groups (a\n * settings section break, a toolbar group boundary). Built on Reka UI's\n * Separator: `role=\"separator\"` unless `decorative` (the common case —\n * visual dividers next to already-structured content don't need a second\n * landmark), matching `orientation` via `aria-orientation`.\n */\nwithDefaults(\n  defineProps<{\n    /** Which axis the hairline draws along. */\n    orientation?: SeparatorOrientation;\n    /** Purely visual, with no `role=\"separator\"` — the default, for a divider next to content that is already structured on its own. Set `false` only when the line is the sole semantic boundary between two regions. */\n    decorative?: boolean;\n  }>(),\n  { orientation: \"horizontal\", decorative: true },\n);\n</script>\n\n<template>\n  <SeparatorRoot\n    :orientation=\"orientation\"\n    :decorative=\"decorative\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border',\n        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px self-stretch',\n      )\n    \"\n  />\n</template>\n"],"mappings":""}

package/dist/primitives/Separator/Separator.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Separator.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Separator/Separator.vue"],"names":[],"mappings":"AA8CA,2CAA2C;AAC3C,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;wBACxC,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IASd,2CAA2C;kBAC7B,oBAAoB;IAClC,sNAAsN;iBACzM,OAAO;;IAHpB,2CAA2C;kBAC7B,oBAAoB;IAClC,sNAAsN;iBACzM,OAAO;;iBAFN,oBAAoB;gBAErB,OAAO;6EA4DpB,CAAC"}

package/dist/primitives/Separator/Separator.vue_vue_type_script_setup_true_lang.js

@@ -1,31 +0,0 @@
-import { cn } from "../../lib/cn.js";
-import { createBlock, defineComponent, normalizeClass, openBlock, unref } from "vue";
-import { Separator } from "reka-ui";
-//#region src/primitives/Separator/Separator.vue?vue&type=script&setup=true&lang.ts
-var Separator_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	__name: "Separator",
-	props: {
-		orientation: { default: "horizontal" },
-		decorative: {
-			type: Boolean,
-			default: true
-		}
-	},
-	setup(__props) {
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Separator), {
-				orientation: __props.orientation,
-				decorative: __props.decorative,
-				class: normalizeClass(unref(cn)("shrink-0 bg-border", __props.orientation === "horizontal" ? "h-px w-full" : "h-full w-px self-stretch"))
-			}, null, 8, [
-				"orientation",
-				"decorative",
-				"class"
-			]);
-		};
-	}
-});
-//#endregion
-export { Separator_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=Separator.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/Separator/Separator.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Separator.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/primitives/Separator/Separator.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Which axis the hairline draws along. */\nexport type SeparatorOrientation = \"horizontal\" | \"vertical\";\n</script>\n\n<script setup lang=\"ts\">\nimport { Separator as SeparatorRoot } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Separator — thin visual/semantic divider between content groups (a\n * settings section break, a toolbar group boundary). Built on Reka UI's\n * Separator: `role=\"separator\"` unless `decorative` (the common case —\n * visual dividers next to already-structured content don't need a second\n * landmark), matching `orientation` via `aria-orientation`.\n */\nwithDefaults(\n  defineProps<{\n    /** Which axis the hairline draws along. */\n    orientation?: SeparatorOrientation;\n    /** Purely visual, with no `role=\"separator\"` — the default, for a divider next to content that is already structured on its own. Set `false` only when the line is the sole semantic boundary between two regions. */\n    decorative?: boolean;\n  }>(),\n  { orientation: \"horizontal\", decorative: true },\n);\n</script>\n\n<template>\n  <SeparatorRoot\n    :orientation=\"orientation\"\n    :decorative=\"decorative\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border',\n        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px self-stretch',\n      )\n    \"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;GA4BE,OAAA,UAAA,GAAA,YASE,MAAA,SAAA,GAAA;IARC,aAAa,QAAA;IACb,YAAY,QAAA;IACZ,OAAK,eAAS,MAAA,EAAA,CAAE,CAAA,sBAAwC,QAAA,gBAAW,eAAA,gBAAA,0BAAA,CAAA"}

package/dist/primitives/Skeleton/Skeleton.js

@@ -1,7 +0,0 @@
-import Skeleton_vue_vue_type_script_setup_true_lang_default, { skeletonVariants } from "./Skeleton.vue_vue_type_script_setup_true_lang.js";
-//#region src/primitives/Skeleton/Skeleton.vue
-var Skeleton_default = Skeleton_vue_vue_type_script_setup_true_lang_default;
-//#endregion
-export { Skeleton_default as default, skeletonVariants };
-
-//# sourceMappingURL=Skeleton.js.map

package/dist/primitives/Skeleton/Skeleton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../src/primitives/Skeleton/Skeleton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\nexport type SkeletonVariant = \"text\" | \"circle\" | \"rect\";\n\n// A faint light band sweeps a muted base (background-color muted + a moving\n// transparent→light→transparent gradient image) — the shimmer language,\n// kept neutral and low-contrast so a loading page reads as \"coming\", not busy.\n// Under prefers-reduced-motion the sweep simply stops on a flat muted block.\n//\n// The band's colour goes through `--alpha()` rather than `hsl(var(…)/…)`.\n// Loom's tokens are whole colours (`--color-foreground: hsl(213 29% 15%)`),\n// not the bare channel triplets that idiom expects, so wrapping one in `hsl()`\n// produces a value the browser cannot compute — and a single invalid stop\n// takes the entire gradient with it, leaving a flat block that still animates\n// its own absence. `--alpha()` is Tailwind's own function for this and takes\n// the token as it is actually written.\nexport const skeletonVariants = cva(\n  \"bg-muted bg-[linear-gradient(90deg,transparent_0%,--alpha(var(--color-foreground)/6%)_50%,transparent_100%)] bg-[length:200%_100%] animate-shimmer\",\n  {\n    variants: {\n      variant: {\n        text: \"h-4 rounded\",\n        circle: \"rounded-full\",\n        rect: \"rounded-md\",\n      } satisfies Record<SkeletonVariant, string>,\n    },\n    defaultVariants: { variant: \"text\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Skeleton — content-loading placeholder for a KNOWN layout (a card, a list\n * row, an avatar) so the page's shape reads as \"coming\" instead of jumping\n * once real content lands. For an indeterminate wait with no layout shape\n * yet, use Spinner instead. Purely decorative (`aria-hidden`) — the loading\n * state itself is announced elsewhere (e.g. a Spinner or a live region), not\n * by the placeholder shapes. Width/height are the caller's concern via a\n * passthrough `class` (e.g. `class=\"h-10 w-10\"`).\n */\nwithDefaults(\n  defineProps<{\n    /** Which shape stands in for the real content: a text line, a round avatar, or a rectangular block. */\n    variant?: SkeletonVariant;\n  }>(),\n  { variant: \"text\" },\n);\n</script>\n\n<template>\n  <div aria-hidden=\"true\" :class=\"cn(skeletonVariants({ variant }))\" />\n</template>\n"],"mappings":""}

package/dist/primitives/Skeleton/Skeleton.vue.d.ts

@@ -1,16 +0,0 @@
-export type SkeletonVariant = "text" | "circle" | "rect";
-export declare const skeletonVariants: (props?: ({
-    variant?: "circle" | "rect" | "text" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{
-    /** Which shape stands in for the real content: a text line, a round avatar, or a rectangular block. */
-    variant?: SkeletonVariant;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    /** Which shape stands in for the real content: a text line, a round avatar, or a rectangular block. */
-    variant?: SkeletonVariant;
-}> & Readonly<{}>, {
-    variant: SkeletonVariant;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-//# sourceMappingURL=Skeleton.vue.d.ts.map

package/dist/primitives/Skeleton/Skeleton.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Skeleton.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Skeleton/Skeleton.vue"],"names":[],"mappings":"AAgEA,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAczD,eAAO,MAAM,gBAAgB;;8EAY5B,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAWd,uGAAuG;cAC7F,eAAe;;IADzB,uGAAuG;cAC7F,eAAe;;aAAf,eAAe;6EAsCzB,CAAC"}