npm - @ecoma-io/loom - Versions diffs - 0.2.0 → 0.3.0 - Mend

@ecoma-io/loom 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1365) hide show

package/dist/primitives/Button/Button.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Button.js","names":[],"sources":["../../../src/primitives/Button/Button.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * The six weights, and the choice between them is about emphasis rather than\n * colour: `primary` is the one action a screen is asking for, `destructive` is\n * the one it is warning about, and the four between them step down.\n */\nexport type ButtonVariant =\n \"primary\" | \"secondary\" | \"subtle\" | \"outline\" | \"ghost\" | \"destructive\";\n\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\";\n\n/**\n * One row per rest-state variant, naming the fill and the label token the\n * variant paints. Kept separate from the `cva` call because it is also the\n * contract `Button.contrast.test.ts` reads: that file derives every variant's\n * pairing from here, so a variant added to the map is measured on arrival\n * rather than when someone remembers to add a row to a test. The two halves\n * — this map and the `cva` call consuming it — cannot drift apart, because\n * `cva` is handed this very object.\n *\n * `satisfies` is what keeps this map and the union honest. The union above is\n * the name a consumer imports and the documentation prints; the map below is\n * the classes. Adding a member to one and not the other stops compiling, so\n * neither can be the stale copy of the other.\n */\nexport const buttonVariantClasses = {\n primary: \"bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/70\",\n subtle: \"bg-transparent text-foreground hover:bg-subtle\",\n outline: \"border border-input bg-transparent text-foreground hover:bg-subtle\",\n ghost: \"bg-transparent text-muted-foreground hover:bg-subtle hover:text-foreground\",\n destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm\",\n} satisfies Record<ButtonVariant, string>;\n\n/**\n * Button — the workhorse, and the primitive that encodes Loom's press\n * language:\n *\n * • hover lifts by fill, not by shadow\n * • active presses down (scale 0.97) — physical, causal feedback\n * • focus blooms the primary ring\n * • loading plays a kinetic swap under a shimmer sweep: the label rolls up\n * and out, a progress arc springs in, the loading text rises last — and\n * both layers share one grid cell, so the width never jumps mid-film\n *\n * Unavailable is painted in colours rather than dimmed, and it is keyed off the\n * `disabled` prop rather than off the DOM disabled state — a loading button is\n * also DOM-disabled yet has to read as \"working\", not \"unavailable\". See the\n * drained treatment on the root element for the measurements that removed the\n * dim.\n */\nexport const buttonVariants = cva(\n [\n \"relative inline-flex items-center justify-center gap-2 whitespace-nowrap select-none\",\n \"rounded-md text-sm font-medium\",\n \"[transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out),box-shadow_var(--duration-fast)_var(--ease-out)]\",\n \"active:scale-press focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n \"disabled:pointer-events-none\",\n ],\n {\n variants: {\n variant: buttonVariantClasses,\n size: {\n sm: \"h-8 px-3 text-xs\",\n md: \"h-9 px-4\",\n lg: \"h-11 px-6 text-base\",\n icon: \"h-9 w-9 p-0\",\n // A square icon button for dense rows, matching `sm`'s height so a row\n // action lines up with that row's text controls. Still 32px — well\n // over the 24px minimum target size (WCAG 2.2 SC 2.5.8) — so density\n // here costs no reachability. It exists because consumers were\n // reaching for `size=\"icon\"` and then hand-overriding `class=\"h-8 w-8\"`,\n // which silently re-litigates the target-size question at every call\n // site.\n \"icon-sm\": \"h-8 w-8 p-0\",\n } satisfies Record<ButtonSize, string>,\n },\n defaultVariants: { variant: \"primary\", size: \"md\" },\n },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"../../lib/cn\";\n\nwithDefaults(\n defineProps<{\n /** How much emphasis the action carries. */\n variant?: ButtonVariant;\n /** Control height. `icon` and `icon-sm` are square, for a glyph alone. */\n size?: ButtonSize;\n /** Locks the button and plays the kinetic swap (label → arc + loadingText). */\n loading?: boolean;\n /** Text shown beside the progress arc while loading, e.g. \"Saving…\". */\n loadingText?: string;\n /** Unavailable rather than busy — drains the button to the neutral well and blocks pointer events. */\n disabled?: boolean;\n /** The native button type. Defaults to `button`, never an accidental submit. */\n type?: \"button\" | \"submit\" | \"reset\";\n }>(),\n { variant: \"primary\", size: \"md\", loading: false, disabled: false, type: \"button\" },\n);\n</script>\n\n<template>\n <button\n :type=\"type\"\n :disabled=\"disabled || loading\"\n :data-loading=\"loading || undefined\"\n :aria-busy=\"loading || undefined\"\n :class=\"\n cn(\n buttonVariants({ variant, size }),\n 'group',\n // Drained, not dimmed. `opacity-50` here was the library's most visible\n // instance of the mistake, because a button is nothing but a label on a\n // fill and the dim took both together: measured on the built site, a\n // disabled `primary` label came out at 1.62:1 against its own faded fill\n // and a disabled `outline` at 3.14:1 on the page ground. Neither is\n // reachable by recolouring the label, since the fade multiplied whatever\n // colour it was given.\n //\n // One neutral treatment for all six variants rather than six drained\n // pairs: the fill is what carries a variant's emphasis, and an\n // unavailable button has no emphasis to carry. It is the same well Chip\n // and Stepper drain to, so an unavailable control looks the same\n // wherever it appears. Every variant still changes visibly on the way\n // in — the two filled ones give up their hue, the three transparent ones\n // gain a fill — and the native `disabled` attribute carries the fact to\n // assistive tech, so none of it rests on colour alone.\n //\n // `border-border` and not the strong weight, which is what `outline`\n // used to take here. `theme.css` reserves the strong hairline for a\n // block that must *assert* its edge, and an unavailable control is the\n // one thing that must not; slackening from `input` to the lighter\n // `border` is also the same step every other unavailable control in the\n // library now makes, so a disabled Button beside a disabled TextField\n // wears the same rim rather than a heavier one.\n disabled && 'border-border bg-muted text-muted-foreground shadow-none',\n )\n \"\n >\n \n <span\n v-if=\"loading\"\n aria-hidden=\"true\"\n class=\"pointer-events-none absolute inset-0 rounded-md bg-[linear-gradient(110deg,transparent_35%,--alpha(var(--color-primary)/25%)_50%,transparent_65%)] bg-[length:220%_100%] animate-shimmer\"\n />\n \n <span class=\"inline-grid place-items-center\">\n \n <span\n :aria-hidden=\"loading || undefined\"\n class=\"[grid-area:1/1] inline-flex items-center gap-2 transition-[opacity,transform] duration-fast ease-out group-data-[loading]:-translate-y-1 group-data-[loading]:opacity-0\"\n >\n <slot />\n </span>\n <span\n :aria-hidden=\"!loading || undefined\"\n class=\"pointer-events-none [grid-area:1/1] inline-flex items-center gap-2\"\n >\n \n <span\n class=\"transition-[opacity,transform] duration-fast ease-spring opacity-0 scale-50 translate-y-1 group-data-[loading]:translate-y-0 group-data-[loading]:scale-100 group-data-[loading]:opacity-100\"\n >\n <svg class=\"h-4 w-4 animate-spin\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <circle class=\"stroke-current opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke-width=\"4\" />\n <path\n class=\"fill-current opacity-75\"\n d=\"M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4z\"\n />\n </svg>\n </span>\n \n <span\n v-if=\"loadingText\"\n class=\"transition-[opacity,transform] duration-100 ease-out opacity-0 translate-y-1 group-data-[loading]:translate-y-0 group-data-[loading]:opacity-100 group-data-[loading]:delay-75 motion-reduce:group-data-[loading]:delay-0\"\n >\n {{ loadingText }}\n </span>\n </span>\n </span>\n </button>\n</template>\n"],"mappings":""}

package/dist/primitives/Button/Button.vue.d.ts DELETED Viewed

@@ -1,93 +0,0 @@
-/**
- * The six weights, and the choice between them is about emphasis rather than
- * colour: `primary` is the one action a screen is asking for, `destructive` is
- * the one it is warning about, and the four between them step down.
- */
-export type ButtonVariant = "primary" | "secondary" | "subtle" | "outline" | "ghost" | "destructive";
-export type ButtonSize = "sm" | "md" | "lg" | "icon" | "icon-sm";
-/**
- * One row per rest-state variant, naming the fill and the label token the
- * variant paints. Kept separate from the `cva` call because it is also the
- * contract `Button.contrast.test.ts` reads: that file derives every variant's
- * pairing from here, so a variant added to the map is measured on arrival
- * rather than when someone remembers to add a row to a test. The two halves
- * — this map and the `cva` call consuming it — cannot drift apart, because
- * `cva` is handed this very object.
- *
- * `satisfies` is what keeps this map and the union honest. The union above is
- * the name a consumer imports and the documentation prints; the map below is
- * the classes. Adding a member to one and not the other stops compiling, so
- * neither can be the stale copy of the other.
- */
-export declare const buttonVariantClasses: {
-    primary: string;
-    secondary: string;
-    subtle: string;
-    outline: string;
-    ghost: string;
-    destructive: string;
-};
-/**
- * Button — the workhorse, and the primitive that encodes Loom's press
- * language:
- *
- *   • hover lifts by fill, not by shadow
- *   • active presses down (scale 0.97) — physical, causal feedback
- *   • focus blooms the primary ring
- *   • loading plays a kinetic swap under a shimmer sweep: the label rolls up
- *     and out, a progress arc springs in, the loading text rises last — and
- *     both layers share one grid cell, so the width never jumps mid-film
- *
- * Unavailable is painted in colours rather than dimmed, and it is keyed off the
- * `disabled` prop rather than off the DOM disabled state — a loading button is
- * also DOM-disabled yet has to read as "working", not "unavailable". See the
- * drained treatment on the root element for the measurements that removed the
- * dim.
- */
-export declare const buttonVariants: (props?: ({
-    variant?: "outline" | "primary" | "destructive" | "secondary" | "subtle" | "ghost" | null | undefined;
-    size?: "sm" | "md" | "lg" | "icon" | "icon-sm" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
-    /** How much emphasis the action carries. */
-    variant?: ButtonVariant;
-    /** Control height. `icon` and `icon-sm` are square, for a glyph alone. */
-    size?: ButtonSize;
-    /** Locks the button and plays the kinetic swap (label → arc + loadingText). */
-    loading?: boolean;
-    /** Text shown beside the progress arc while loading, e.g. "Saving…". */
-    loadingText?: string;
-    /** Unavailable rather than busy — drains the button to the neutral well and blocks pointer events. */
-    disabled?: boolean;
-    /** The native button type. Defaults to `button`, never an accidental submit. */
-    type?: "button" | "submit" | "reset";
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    /** How much emphasis the action carries. */
-    variant?: ButtonVariant;
-    /** Control height. `icon` and `icon-sm` are square, for a glyph alone. */
-    size?: ButtonSize;
-    /** Locks the button and plays the kinetic swap (label → arc + loadingText). */
-    loading?: boolean;
-    /** Text shown beside the progress arc while loading, e.g. "Saving…". */
-    loadingText?: string;
-    /** Unavailable rather than busy — drains the button to the neutral well and blocks pointer events. */
-    disabled?: boolean;
-    /** The native button type. Defaults to `button`, never an accidental submit. */
-    type?: "button" | "submit" | "reset";
-}> & Readonly<{}>, {
-    size: ButtonSize;
-    disabled: boolean;
-    type: "button" | "submit" | "reset";
-    variant: ButtonVariant;
-    loading: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-//# sourceMappingURL=Button.vue.d.ts.map

package/dist/primitives/Button/Button.vue.d.ts.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Button.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Button/Button.vue"],"names":[],"mappings":"AA+MA;;;;GAIG;AACH,MAAM,MAAM,aAAa,GACvB,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAE3E,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;AAEjE;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,oBAAoB;;;;;;;CAOQ,CAAC;AAE1C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc;;;8EA4B1B,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,4CAA4C;cAClC,aAAa;IACvB,0EAA0E;WACnE,UAAU;IACjB,+EAA+E;cACrE,OAAO;IACjB,wEAAwE;kBAC1D,MAAM;IACpB,sGAAsG;eAC3F,OAAO;IAClB,gFAAgF;WACzE,QAAQ,GAAG,QAAQ,GAAG,OAAO;;IAXpC,4CAA4C;cAClC,aAAa;IACvB,0EAA0E;WACnE,UAAU;IACjB,+EAA+E;cACrE,OAAO;IACjB,wEAAwE;kBAC1D,MAAM;IACpB,sGAAsG;eAC3F,OAAO;IAClB,gFAAgF;WACzE,QAAQ,GAAG,QAAQ,GAAG,OAAO;;UAR7B,UAAU;cAMN,OAAO;UAEX,QAAQ,GAAG,QAAQ,GAAG,OAAO;aAV1B,aAAa;aAIb,OAAO;;cAqKP,CAAC,KAAK,IAAgB,KAAK,GAAG;EAUxC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/primitives/Button/Button.vue_vue_type_script_setup_true_lang.js DELETED Viewed

@@ -1,138 +0,0 @@
-import { cn } from "../../lib/cn.js";
-import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref } from "vue";
-import { cva } from "class-variance-authority";
-//#region src/primitives/Button/Button.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = [
-	"type",
-	"disabled",
-	"data-loading",
-	"aria-busy"
-];
-var _hoisted_2 = {
-	key: 0,
-	"aria-hidden": "true",
-	class: "pointer-events-none absolute inset-0 rounded-md bg-[linear-gradient(110deg,transparent_35%,--alpha(var(--color-primary)/25%)_50%,transparent_65%)] bg-[length:220%_100%] animate-shimmer"
-};
-var _hoisted_3 = { class: "inline-grid place-items-center" };
-var _hoisted_4 = ["aria-hidden"];
-var _hoisted_5 = ["aria-hidden"];
-var _hoisted_6 = {
-	key: 0,
-	class: "transition-[opacity,transform] duration-100 ease-out opacity-0 translate-y-1 group-data-[loading]:translate-y-0 group-data-[loading]:opacity-100 group-data-[loading]:delay-75 motion-reduce:group-data-[loading]:delay-0"
-};
-/**
-* One row per rest-state variant, naming the fill and the label token the
-* variant paints. Kept separate from the `cva` call because it is also the
-* contract `Button.contrast.test.ts` reads: that file derives every variant's
-* pairing from here, so a variant added to the map is measured on arrival
-* rather than when someone remembers to add a row to a test. The two halves
-* — this map and the `cva` call consuming it — cannot drift apart, because
-* `cva` is handed this very object.
-*
-* `satisfies` is what keeps this map and the union honest. The union above is
-* the name a consumer imports and the documentation prints; the map below is
-* the classes. Adding a member to one and not the other stops compiling, so
-* neither can be the stale copy of the other.
-*/
-var buttonVariantClasses = {
-	primary: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm",
-	secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/70",
-	subtle: "bg-transparent text-foreground hover:bg-subtle",
-	outline: "border border-input bg-transparent text-foreground hover:bg-subtle",
-	ghost: "bg-transparent text-muted-foreground hover:bg-subtle hover:text-foreground",
-	destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm"
-};
-/**
-* Button — the workhorse, and the primitive that encodes Loom's press
-* language:
-*
-*   • hover lifts by fill, not by shadow
-*   • active presses down (scale 0.97) — physical, causal feedback
-*   • focus blooms the primary ring
-*   • loading plays a kinetic swap under a shimmer sweep: the label rolls up
-*     and out, a progress arc springs in, the loading text rises last — and
-*     both layers share one grid cell, so the width never jumps mid-film
-*
-* Unavailable is painted in colours rather than dimmed, and it is keyed off the
-* `disabled` prop rather than off the DOM disabled state — a loading button is
-* also DOM-disabled yet has to read as "working", not "unavailable". See the
-* drained treatment on the root element for the measurements that removed the
-* dim.
-*/
-var buttonVariants = cva([
-	"relative inline-flex items-center justify-center gap-2 whitespace-nowrap select-none",
-	"rounded-md text-sm font-medium",
-	"[transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out),box-shadow_var(--duration-fast)_var(--ease-out)]",
-	"active:scale-press focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo",
-	"disabled:pointer-events-none"
-], {
-	variants: {
-		variant: buttonVariantClasses,
-		size: {
-			sm: "h-8 px-3 text-xs",
-			md: "h-9 px-4",
-			lg: "h-11 px-6 text-base",
-			icon: "h-9 w-9 p-0",
-			"icon-sm": "h-8 w-8 p-0"
-		}
-	},
-	defaultVariants: {
-		variant: "primary",
-		size: "md"
-	}
-});
-var Button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	__name: "Button",
-	props: {
-		variant: { default: "primary" },
-		size: { default: "md" },
-		loading: {
-			type: Boolean,
-			default: false
-		},
-		loadingText: {},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		type: { default: "button" }
-	},
-	setup(__props) {
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("button", {
-				type: __props.type,
-				disabled: __props.disabled || __props.loading,
-				"data-loading": __props.loading || void 0,
-				"aria-busy": __props.loading || void 0,
-				class: normalizeClass(unref(cn)(unref(buttonVariants)({
-					variant: __props.variant,
-					size: __props.size
-				}), "group", __props.disabled && "border-border bg-muted text-muted-foreground shadow-none"))
-			}, [__props.loading ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("", true), createElementVNode("span", _hoisted_3, [createElementVNode("span", {
-				"aria-hidden": __props.loading || void 0,
-				class: "[grid-area:1/1] inline-flex items-center gap-2 transition-[opacity,transform] duration-fast ease-out group-data-[loading]:-translate-y-1 group-data-[loading]:opacity-0"
-			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_4), createElementVNode("span", {
-				"aria-hidden": !__props.loading || void 0,
-				class: "pointer-events-none [grid-area:1/1] inline-flex items-center gap-2"
-			}, [_cache[0] || (_cache[0] = createElementVNode("span", { class: "transition-[opacity,transform] duration-fast ease-spring opacity-0 scale-50 translate-y-1 group-data-[loading]:translate-y-0 group-data-[loading]:scale-100 group-data-[loading]:opacity-100" }, [createElementVNode("svg", {
-				class: "h-4 w-4 animate-spin",
-				viewBox: "0 0 24 24",
-				fill: "none",
-				"aria-hidden": "true"
-			}, [createElementVNode("circle", {
-				class: "stroke-current opacity-25",
-				cx: "12",
-				cy: "12",
-				r: "10",
-				"stroke-width": "4"
-			}), createElementVNode("path", {
-				class: "fill-current opacity-75",
-				d: "M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4z"
-			})])], -1)), __props.loadingText ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(__props.loadingText), 1)) : createCommentVNode("", true)], 8, _hoisted_5)])], 10, _hoisted_1);
-		};
-	}
-});
-//#endregion
-export { buttonVariantClasses, buttonVariants, Button_vue_vue_type_script_setup_true_lang_default as default };
-//# sourceMappingURL=Button.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/Button/Button.vue_vue_type_script_setup_true_lang.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Button.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/primitives/Button/Button.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * The six weights, and the choice between them is about emphasis rather than\n * colour: `primary` is the one action a screen is asking for, `destructive` is\n * the one it is warning about, and the four between them step down.\n */\nexport type ButtonVariant =\n \"primary\" | \"secondary\" | \"subtle\" | \"outline\" | \"ghost\" | \"destructive\";\n\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\";\n\n/**\n * One row per rest-state variant, naming the fill and the label token the\n * variant paints. Kept separate from the `cva` call because it is also the\n * contract `Button.contrast.test.ts` reads: that file derives every variant's\n * pairing from here, so a variant added to the map is measured on arrival\n * rather than when someone remembers to add a row to a test. The two halves\n * — this map and the `cva` call consuming it — cannot drift apart, because\n * `cva` is handed this very object.\n *\n * `satisfies` is what keeps this map and the union honest. The union above is\n * the name a consumer imports and the documentation prints; the map below is\n * the classes. Adding a member to one and not the other stops compiling, so\n * neither can be the stale copy of the other.\n */\nexport const buttonVariantClasses = {\n primary: \"bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/70\",\n subtle: \"bg-transparent text-foreground hover:bg-subtle\",\n outline: \"border border-input bg-transparent text-foreground hover:bg-subtle\",\n ghost: \"bg-transparent text-muted-foreground hover:bg-subtle hover:text-foreground\",\n destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm\",\n} satisfies Record<ButtonVariant, string>;\n\n/**\n * Button — the workhorse, and the primitive that encodes Loom's press\n * language:\n *\n * • hover lifts by fill, not by shadow\n * • active presses down (scale 0.97) — physical, causal feedback\n * • focus blooms the primary ring\n * • loading plays a kinetic swap under a shimmer sweep: the label rolls up\n * and out, a progress arc springs in, the loading text rises last — and\n * both layers share one grid cell, so the width never jumps mid-film\n *\n * Unavailable is painted in colours rather than dimmed, and it is keyed off the\n * `disabled` prop rather than off the DOM disabled state — a loading button is\n * also DOM-disabled yet has to read as \"working\", not \"unavailable\". See the\n * drained treatment on the root element for the measurements that removed the\n * dim.\n */\nexport const buttonVariants = cva(\n [\n \"relative inline-flex items-center justify-center gap-2 whitespace-nowrap select-none\",\n \"rounded-md text-sm font-medium\",\n \"[transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out),box-shadow_var(--duration-fast)_var(--ease-out)]\",\n \"active:scale-press focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n \"disabled:pointer-events-none\",\n ],\n {\n variants: {\n variant: buttonVariantClasses,\n size: {\n sm: \"h-8 px-3 text-xs\",\n md: \"h-9 px-4\",\n lg: \"h-11 px-6 text-base\",\n icon: \"h-9 w-9 p-0\",\n // A square icon button for dense rows, matching `sm`'s height so a row\n // action lines up with that row's text controls. Still 32px — well\n // over the 24px minimum target size (WCAG 2.2 SC 2.5.8) — so density\n // here costs no reachability. It exists because consumers were\n // reaching for `size=\"icon\"` and then hand-overriding `class=\"h-8 w-8\"`,\n // which silently re-litigates the target-size question at every call\n // site.\n \"icon-sm\": \"h-8 w-8 p-0\",\n } satisfies Record<ButtonSize, string>,\n },\n defaultVariants: { variant: \"primary\", size: \"md\" },\n },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"../../lib/cn\";\n\nwithDefaults(\n defineProps<{\n /** How much emphasis the action carries. */\n variant?: ButtonVariant;\n /** Control height. `icon` and `icon-sm` are square, for a glyph alone. */\n size?: ButtonSize;\n /** Locks the button and plays the kinetic swap (label → arc + loadingText). */\n loading?: boolean;\n /** Text shown beside the progress arc while loading, e.g. \"Saving…\". */\n loadingText?: string;\n /** Unavailable rather than busy — drains the button to the neutral well and blocks pointer events. */\n disabled?: boolean;\n /** The native button type. Defaults to `button`, never an accidental submit. */\n type?: \"button\" | \"submit\" | \"reset\";\n }>(),\n { variant: \"primary\", size: \"md\", loading: false, disabled: false, type: \"button\" },\n);\n</script>\n\n<template>\n <button\n :type=\"type\"\n :disabled=\"disabled || loading\"\n :data-loading=\"loading || undefined\"\n :aria-busy=\"loading || undefined\"\n :class=\"\n cn(\n buttonVariants({ variant, size }),\n 'group',\n // Drained, not dimmed. `opacity-50` here was the library's most visible\n // instance of the mistake, because a button is nothing but a label on a\n // fill and the dim took both together: measured on the built site, a\n // disabled `primary` label came out at 1.62:1 against its own faded fill\n // and a disabled `outline` at 3.14:1 on the page ground. Neither is\n // reachable by recolouring the label, since the fade multiplied whatever\n // colour it was given.\n //\n // One neutral treatment for all six variants rather than six drained\n // pairs: the fill is what carries a variant's emphasis, and an\n // unavailable button has no emphasis to carry. It is the same well Chip\n // and Stepper drain to, so an unavailable control looks the same\n // wherever it appears. Every variant still changes visibly on the way\n // in — the two filled ones give up their hue, the three transparent ones\n // gain a fill — and the native `disabled` attribute carries the fact to\n // assistive tech, so none of it rests on colour alone.\n //\n // `border-border` and not the strong weight, which is what `outline`\n // used to take here. `theme.css` reserves the strong hairline for a\n // block that must *assert* its edge, and an unavailable control is the\n // one thing that must not; slackening from `input` to the lighter\n // `border` is also the same step every other unavailable control in the\n // library now makes, so a disabled Button beside a disabled TextField\n // wears the same rim rather than a heavier one.\n disabled && 'border-border bg-muted text-muted-foreground shadow-none',\n )\n \"\n >\n \n <span\n v-if=\"loading\"\n aria-hidden=\"true\"\n class=\"pointer-events-none absolute inset-0 rounded-md bg-[linear-gradient(110deg,transparent_35%,--alpha(var(--color-primary)/25%)_50%,transparent_65%)] bg-[length:220%_100%] animate-shimmer\"\n />\n \n <span class=\"inline-grid place-items-center\">\n \n <span\n :aria-hidden=\"loading || undefined\"\n class=\"[grid-area:1/1] inline-flex items-center gap-2 transition-[opacity,transform] duration-fast ease-out group-data-[loading]:-translate-y-1 group-data-[loading]:opacity-0\"\n >\n <slot />\n </span>\n <span\n :aria-hidden=\"!loading || undefined\"\n class=\"pointer-events-none [grid-area:1/1] inline-flex items-center gap-2\"\n >\n \n <span\n class=\"transition-[opacity,transform] duration-fast ease-spring opacity-0 scale-50 translate-y-1 group-data-[loading]:translate-y-0 group-data-[loading]:scale-100 group-data-[loading]:opacity-100\"\n >\n <svg class=\"h-4 w-4 animate-spin\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <circle class=\"stroke-current opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke-width=\"4\" />\n <path\n class=\"fill-current opacity-75\"\n d=\"M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4z\"\n />\n </svg>\n </span>\n \n <span\n v-if=\"loadingText\"\n class=\"transition-[opacity,transform] duration-100 ease-out opacity-0 translate-y-1 group-data-[loading]:translate-y-0 group-data-[loading]:opacity-100 group-data-[loading]:delay-75 motion-reduce:group-data-[loading]:delay-0\"\n >\n {{ loadingText }}\n </span>\n </span>\n </span>\n </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,IAAa,uBAAuB;CAClC,SAAS;CACT,WAAW;CACX,QAAQ;CACR,SAAS;CACT,OAAO;CACP,aAAa;AACf;;;;;;;;;;;;;;;;;;AAmBA,IAAa,iBAAiB,IAC5B;CACE;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;EACT,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GAQN,WAAW;EACb;CACF;CACA,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAK;AACpD,CACF;;;;;;;;;;;;;;;;;;;GA0BE,OAAA,UAAA,GAAA,mBA0FS,UAAA;IAzFN,MAAM,QAAA;IACN,UAAU,QAAA,YAAY,QAAA;IACtB,gBAAc,QAAA,WAAW,KAAA;IACzB,aAAW,QAAA,WAAW,KAAA;IACtB,OAAK,eAAS,MAAA,EAAA,CAAE,CAAU,MAAA,cAAA,CAAc,CAAA;KAAA,SAAG,QAAA;KAAO,MAAE,QAAA;IAAI,CAAA,GAAA,SAAuqD,QAAA,YAAQ,0DAAA,CAAA;GAkChuD,GAAA,CAAA,QAAA,WADR,UAAA,GAAA,mBAIE,QAJF,UAIE,KAAA,mBAAA,IAAA,IAAA,GAMF,mBAyCO,QAzCP,YAyCO,CAvCL,mBAKO,QAAA;IAJJ,eAAa,QAAA,WAAW,KAAA;IACzB,OAAM;GAEN,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,UAAA,GAEV,mBAgCO,QAAA;IA/BJ,eAAW,CAAG,QAAA,WAAW,KAAA;IAC1B,OAAM;GASN,GAAA,CAAA,OAAA,OAAA,OAAA,KAAA,mBAUO,QAAA,EATL,OAAM,+LAA8L,GAAA,CAEpM,mBAMM,OAAA;IAND,OAAM;IAAuB,SAAQ;IAAY,MAAK;IAAO,eAAY;GAC5E,GAAA,CAAA,mBAAoF,UAAA;IAA5E,OAAM;IAA4B,IAAG;IAAK,IAAG;IAAK,GAAE;IAAK,gBAAa;GAC9E,CAAA,GAAA,mBAGE,QAAA;IAFA,OAAM;IACN,GAAE;GASA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,IAAA,QAAA,eADR,UAAA,GAAA,mBAKO,QALP,YAKO,gBADF,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,GAAA,UAAA,CAAA,CAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/primitives/Checkbox/Checkbox.js DELETED Viewed

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

package/dist/primitives/Checkbox/Checkbox.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/primitives/Checkbox/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CheckboxIndicator, CheckboxRoot } from \"reka-ui\";\nimport { Check, Minus } from \"@lucide/vue\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useFieldControl } from \"../../lib/field-context\";\n\n/**\n * Checkbox — a single boolean choice inside a form (as opposed to Switch,\n * which flips a setting immediately, no form/\"Save\" involved). Built on Reka\n * UI's Checkbox (role=\"checkbox\" + aria-checked, Space toggles); also\n * supports the third \"indeterminate\" state for a parent checkbox over a\n * partially-selected group — shown as a dash instead of a check.\n *\n * An inline `label` wraps the control in a real `<label>` (a11y name comes\n * free); omit it and pass `ariaLabel`/`ariaLabelledby` instead when the\n * visible label lives elsewhere (e.g. a table header cell).\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()`. CheckboxRoot renders a labelable `<button\n * role=\"checkbox\">`, so the row's id lands on the box and the row's\n * `<label for>` names it, with the row's description, `name`, `required` and\n * `invalid` arriving alongside. **Name it in one place.** A `label` here *and*\n * a label on the row gives one control two accessible names, read one after\n * the other, and nothing reports it — not axe, which has no rule for a name\n * that is merely doubled.\n *\n * There is no `readonly`, and a row's is ignored rather than approximated. A\n * checkbox that may be read but not toggled is a disabled checkbox: the native\n * `readonly` attribute is a no-op on `<input type=\"checkbox\">` for exactly that\n * reason, and painting one as editable-but-filled would promise an edit that\n * never lands.\n */\nconst props = withDefaults(\n defineProps<{\n /** `true`/`false` for a plain toggle, `\"indeterminate\"` for a parent over a partially-selected group. Omit to let the box own its own state. */\n modelValue?: boolean | \"indeterminate\" | undefined;\n /** Blocks both click and keyboard input, and dims the box. Unset defers to a wrapping Field. */\n disabled?: boolean | undefined;\n /** Visible text, rendered inside the wrapping `<label>`. Omit and use `ariaLabel`/`ariaLabelledby` when the label lives elsewhere. */\n label?: string;\n /** Accessible name when no visible `label` is rendered by this component. */\n ariaLabel?: string;\n /** Accessible name sourced from another element's id, when no visible `label` is rendered by this component. */\n ariaLabelledby?: string;\n }>(),\n {\n // Not `false`. A concrete value here would mean \"the host owns this\", and\n // a host that passes nothing would get a box that emits its update event\n // and never moves — a control that looks broken rather than one that\n // reports an error. `undefined` is what leaves it self-managing, and the\n // explicit default is what survives Vue's absent-Boolean-casts-to-false\n // rule.\n modelValue: undefined,\n // Not `false` either, and for the second half of the same reason: absent\n // has to stay tellable from `false` all the way into `useFieldControl()`,\n // or a Field above could never disable the row while `:disabled=\"false\"`\n // could never overrule one that did.\n disabled: undefined,\n },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: boolean | \"indeterminate\"] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: boxAttrs } = useSplitAttrs();\n\n// Routed by hand because nothing was routing it: the two branches and the\n// comment between them make this component's root a *fragment*, and Vue never\n// auto-inherits onto one — it warns and drops the attributes. So `id`,\n// `data-testid` and a caller's `class` all went nowhere until this split.\n// `class` now lands on whichever branch's root renders (a caller sizes the\n// labelled row, or the bare box) and everything else on the CheckboxRoot in\n// both, which is where a row's id has to be: `<label for>` resolves to a\n// labelable element, and the `<button role=\"checkbox\">` is the one here.\n//\n// `field.attrs` spreads **after** `boxAttrs` — see TextField.vue for the full\n// reasoning. The bag has already resolved the caller's own id and merged their\n// description with the row's, and it drops every key that resolved to nothing,\n// so it can only add.\n//\n// `name`, `required` and `invalid` are absent from the bag below because this\n// component has no prop for any of them; the row's answer then stands\n// unopposed, which is what wrapping it in a Field asked for. `readonly` is\n// absent for the different reason the docblock gives.\n//\n// `required` is then the one resolved value that cannot ride in on\n// `field.attrs`: CheckboxRoot renders `aria-required` itself, from its own\n// prop, *after* it spreads the fallthrough attrs — so an `aria-required` in\n// that bag is overwritten by a `false` and the row is silently unheard. It goes\n// through `:required` on the element below instead. That prop also reaches the\n// hidden input Reka mints inside a `<form>`, so unlike TextField this control\n// does carry native enforcement with it; the alternative is a checkbox that\n// tells a screen reader it is optional while its row's asterisk says otherwise.\nconst field = useFieldControl(() => ({\n id: attrs.id as string | undefined,\n describedBy: attrs[\"aria-describedby\"] as string | undefined,\n disabled: props.disabled,\n}));\n\nconst boxClass = cn(\n \"flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-input bg-background\",\n // Transform (the press squish) rides --ease-spring for a restrained release,\n // while fill/border stay on the instant --ease-out — the \"springy transform,\n // steady color\" split (boxStyle below), same language as Button/Switch.\n \"active:scale-90\",\n // Checked = a decision (Loom law): the box fills with primary.\n \"data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n \"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground\",\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\",\n);\n\nconst boxStyle =\n \"transition: transform var(--duration-fast) var(--ease-spring), background-color var(--duration-instant) var(--ease-out), border-color var(--duration-instant) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);\";\n</script>\n\n<template>\n \n \n <label\n v-if=\"label\"\n :class=\"\n cn(\n 'inline-flex items-center gap-2 text-sm text-foreground',\n // Disabled text stays readable (AA on the light ground) — only the box dims.\n field.disabled ? 'cursor-not-allowed text-muted-foreground' : 'cursor-pointer',\n attrs.class as string,\n )\n \"\n >\n <CheckboxRoot\n v-bind=\"{ ...optional({ modelValue }), ...boxAttrs, ...field.attrs }\"\n :disabled=\"field.disabled\"\n :required=\"field.required\"\n :class=\"cn(boxClass, 'disabled:opacity-50')\"\n :style=\"boxStyle\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n >\n <template #default=\"{ state }\">\n \n <CheckboxIndicator class=\"flex animate-scale-in items-center justify-center text-current\">\n <Minus v-if=\"state === 'indeterminate'\" class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n <Check v-else class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n </CheckboxIndicator>\n </template>\n </CheckboxRoot>\n {{ label }}\n </label>\n \n <CheckboxRoot\n v-else\n v-bind=\"{ ...optional({ modelValue }), ...boxAttrs, ...field.attrs }\"\n :disabled=\"field.disabled\"\n :required=\"field.required\"\n :aria-label=\"ariaLabel\"\n :aria-labelledby=\"ariaLabelledby\"\n :class=\"cn(boxClass, 'disabled:opacity-50', attrs.class as string)\"\n :style=\"boxStyle\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n >\n <template #default=\"{ state }\">\n <CheckboxIndicator class=\"flex animate-scale-in items-center justify-center text-current\">\n <Minus v-if=\"state === 'indeterminate'\" class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n <Check v-else class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n </CheckboxIndicator>\n </template>\n </CheckboxRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/Checkbox/Checkbox.vue.d.ts.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Checkbox/Checkbox.vue"],"names":[],"mappings":"AA4LA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,KAAK,WAAW,GAAG;IACf,gJAAgJ;IAChJ,UAAU,CAAC,EAAE,OAAO,GAAG,eAAe,GAAG,SAAS,CAAC;IACnD,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,sIAAsI;IACtI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gHAAgH;IAChH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAuUJ,QAAA,MAAM,YAAY;;;;;cA9UH,OAAO,GAAG,SAAS;gBAFjB,OAAO,GAAG,eAAe,GAAG,SAAS;6EAoVpD,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/primitives/Checkbox/Checkbox.vue_vue_type_script_setup_true_lang.js DELETED Viewed

@@ -1,133 +0,0 @@
-import { cn } from "../../lib/cn.js";
-import { optional } from "../../lib/props.js";
-import { useSplitAttrs } from "../../lib/attrs.js";
-import { useFieldControl } from "../../lib/field-context.js";
-import { Check, Minus } from "@lucide/vue";
-import { createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, toDisplayString, unref, withCtx } from "vue";
-import { CheckboxIndicator, CheckboxRoot } from "reka-ui";
-//#region src/primitives/Checkbox/Checkbox.vue?vue&type=script&setup=true&lang.ts
-/**
-* Checkbox — a single boolean choice inside a form (as opposed to Switch,
-* which flips a setting immediately, no form/"Save" involved). Built on Reka
-* UI's Checkbox (role="checkbox" + aria-checked, Space toggles); also
-* supports the third "indeterminate" state for a parent checkbox over a
-* partially-selected group — shown as a dash instead of a check.
-*
-* An inline `label` wraps the control in a real `<label>` (a11y name comes
-* free); omit it and pass `ariaLabel`/`ariaLabelledby` instead when the
-* visible label lives elsewhere (e.g. a table header cell).
-*
-* Inside a [Field](../Field/Field.vue) it wires itself through
-* `useFieldControl()`. CheckboxRoot renders a labelable `<button
-* role="checkbox">`, so the row's id lands on the box and the row's
-* `<label for>` names it, with the row's description, `name`, `required` and
-* `invalid` arriving alongside. **Name it in one place.** A `label` here *and*
-* a label on the row gives one control two accessible names, read one after
-* the other, and nothing reports it — not axe, which has no rule for a name
-* that is merely doubled.
-*
-* There is no `readonly`, and a row's is ignored rather than approximated. A
-* checkbox that may be read but not toggled is a disabled checkbox: the native
-* `readonly` attribute is a no-op on `<input type="checkbox">` for exactly that
-* reason, and painting one as editable-but-filled would promise an edit that
-* never lands.
-*/
-var boxStyle = "transition: transform var(--duration-fast) var(--ease-spring), background-color var(--duration-instant) var(--ease-out), border-color var(--duration-instant) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);";
-var Checkbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	inheritAttrs: false,
-	__name: "Checkbox",
-	props: {
-		modelValue: {
-			type: [Boolean, String],
-			default: void 0
-		},
-		disabled: {
-			type: Boolean,
-			default: void 0
-		},
-		label: {},
-		ariaLabel: {},
-		ariaLabelledby: {}
-	},
-	emits: ["update:modelValue"],
-	setup(__props) {
-		const props = __props;
-		const { attrs, rest: boxAttrs } = useSplitAttrs();
-		const field = useFieldControl(() => ({
-			id: attrs.id,
-			describedBy: attrs["aria-describedby"],
-			disabled: props.disabled
-		}));
-		const boxClass = cn("flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-input bg-background", "active:scale-90", "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", "data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", "disabled:cursor-not-allowed");
-		return (_ctx, _cache) => {
-			return __props.label ? (openBlock(), createElementBlock("label", {
-				key: 0,
-				class: normalizeClass(unref(cn)("inline-flex items-center gap-2 text-sm text-foreground", unref(field).disabled ? "cursor-not-allowed text-muted-foreground" : "cursor-pointer", unref(attrs).class))
-			}, [createVNode(unref(CheckboxRoot), mergeProps({
-				...unref(optional)({ modelValue: __props.modelValue }),
-				...unref(boxAttrs),
-				...unref(field).attrs
-			}, {
-				disabled: unref(field).disabled,
-				required: unref(field).required,
-				class: unref(cn)(unref(boxClass), "disabled:opacity-50"),
-				style: boxStyle,
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event))
-			}), {
-				default: withCtx(({ state }) => [createVNode(unref(CheckboxIndicator), { class: "flex animate-scale-in items-center justify-center text-current" }, {
-					default: withCtx(() => [state === "indeterminate" ? (openBlock(), createBlock(unref(Minus), {
-						key: 0,
-						class: "h-3 w-3",
-						"stroke-width": 2.5
-					})) : (openBlock(), createBlock(unref(Check), {
-						key: 1,
-						class: "h-3 w-3",
-						"stroke-width": 2.5
-					}))]),
-					_: 2
-				}, 1024)]),
-				_: 1
-			}, 16, [
-				"disabled",
-				"required",
-				"class"
-			]), createTextVNode(" " + toDisplayString(__props.label), 1)], 2)) : (openBlock(), createBlock(unref(CheckboxRoot), mergeProps({ key: 1 }, {
-				...unref(optional)({ modelValue: __props.modelValue }),
-				...unref(boxAttrs),
-				...unref(field).attrs
-			}, {
-				disabled: unref(field).disabled,
-				required: unref(field).required,
-				"aria-label": __props.ariaLabel,
-				"aria-labelledby": __props.ariaLabelledby,
-				class: unref(cn)(unref(boxClass), "disabled:opacity-50", unref(attrs).class),
-				style: boxStyle,
-				"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:modelValue", $event))
-			}), {
-				default: withCtx(({ state }) => [createVNode(unref(CheckboxIndicator), { class: "flex animate-scale-in items-center justify-center text-current" }, {
-					default: withCtx(() => [state === "indeterminate" ? (openBlock(), createBlock(unref(Minus), {
-						key: 0,
-						class: "h-3 w-3",
-						"stroke-width": 2.5
-					})) : (openBlock(), createBlock(unref(Check), {
-						key: 1,
-						class: "h-3 w-3",
-						"stroke-width": 2.5
-					}))]),
-					_: 2
-				}, 1024)]),
-				_: 1
-			}, 16, [
-				"disabled",
-				"required",
-				"aria-label",
-				"aria-labelledby",
-				"class"
-			]));
-		};
-	}
-});
-//#endregion
-export { Checkbox_vue_vue_type_script_setup_true_lang_default as default };
-//# sourceMappingURL=Checkbox.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/Checkbox/Checkbox.vue_vue_type_script_setup_true_lang.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Checkbox.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/primitives/Checkbox/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CheckboxIndicator, CheckboxRoot } from \"reka-ui\";\nimport { Check, Minus } from \"@lucide/vue\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useFieldControl } from \"../../lib/field-context\";\n\n/**\n * Checkbox — a single boolean choice inside a form (as opposed to Switch,\n * which flips a setting immediately, no form/\"Save\" involved). Built on Reka\n * UI's Checkbox (role=\"checkbox\" + aria-checked, Space toggles); also\n * supports the third \"indeterminate\" state for a parent checkbox over a\n * partially-selected group — shown as a dash instead of a check.\n *\n * An inline `label` wraps the control in a real `<label>` (a11y name comes\n * free); omit it and pass `ariaLabel`/`ariaLabelledby` instead when the\n * visible label lives elsewhere (e.g. a table header cell).\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()`. CheckboxRoot renders a labelable `<button\n * role=\"checkbox\">`, so the row's id lands on the box and the row's\n * `<label for>` names it, with the row's description, `name`, `required` and\n * `invalid` arriving alongside. **Name it in one place.** A `label` here *and*\n * a label on the row gives one control two accessible names, read one after\n * the other, and nothing reports it — not axe, which has no rule for a name\n * that is merely doubled.\n *\n * There is no `readonly`, and a row's is ignored rather than approximated. A\n * checkbox that may be read but not toggled is a disabled checkbox: the native\n * `readonly` attribute is a no-op on `<input type=\"checkbox\">` for exactly that\n * reason, and painting one as editable-but-filled would promise an edit that\n * never lands.\n */\nconst props = withDefaults(\n defineProps<{\n /** `true`/`false` for a plain toggle, `\"indeterminate\"` for a parent over a partially-selected group. Omit to let the box own its own state. */\n modelValue?: boolean | \"indeterminate\" | undefined;\n /** Blocks both click and keyboard input, and dims the box. Unset defers to a wrapping Field. */\n disabled?: boolean | undefined;\n /** Visible text, rendered inside the wrapping `<label>`. Omit and use `ariaLabel`/`ariaLabelledby` when the label lives elsewhere. */\n label?: string;\n /** Accessible name when no visible `label` is rendered by this component. */\n ariaLabel?: string;\n /** Accessible name sourced from another element's id, when no visible `label` is rendered by this component. */\n ariaLabelledby?: string;\n }>(),\n {\n // Not `false`. A concrete value here would mean \"the host owns this\", and\n // a host that passes nothing would get a box that emits its update event\n // and never moves — a control that looks broken rather than one that\n // reports an error. `undefined` is what leaves it self-managing, and the\n // explicit default is what survives Vue's absent-Boolean-casts-to-false\n // rule.\n modelValue: undefined,\n // Not `false` either, and for the second half of the same reason: absent\n // has to stay tellable from `false` all the way into `useFieldControl()`,\n // or a Field above could never disable the row while `:disabled=\"false\"`\n // could never overrule one that did.\n disabled: undefined,\n },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: boolean | \"indeterminate\"] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: boxAttrs } = useSplitAttrs();\n\n// Routed by hand because nothing was routing it: the two branches and the\n// comment between them make this component's root a *fragment*, and Vue never\n// auto-inherits onto one — it warns and drops the attributes. So `id`,\n// `data-testid` and a caller's `class` all went nowhere until this split.\n// `class` now lands on whichever branch's root renders (a caller sizes the\n// labelled row, or the bare box) and everything else on the CheckboxRoot in\n// both, which is where a row's id has to be: `<label for>` resolves to a\n// labelable element, and the `<button role=\"checkbox\">` is the one here.\n//\n// `field.attrs` spreads **after** `boxAttrs` — see TextField.vue for the full\n// reasoning. The bag has already resolved the caller's own id and merged their\n// description with the row's, and it drops every key that resolved to nothing,\n// so it can only add.\n//\n// `name`, `required` and `invalid` are absent from the bag below because this\n// component has no prop for any of them; the row's answer then stands\n// unopposed, which is what wrapping it in a Field asked for. `readonly` is\n// absent for the different reason the docblock gives.\n//\n// `required` is then the one resolved value that cannot ride in on\n// `field.attrs`: CheckboxRoot renders `aria-required` itself, from its own\n// prop, *after* it spreads the fallthrough attrs — so an `aria-required` in\n// that bag is overwritten by a `false` and the row is silently unheard. It goes\n// through `:required` on the element below instead. That prop also reaches the\n// hidden input Reka mints inside a `<form>`, so unlike TextField this control\n// does carry native enforcement with it; the alternative is a checkbox that\n// tells a screen reader it is optional while its row's asterisk says otherwise.\nconst field = useFieldControl(() => ({\n id: attrs.id as string | undefined,\n describedBy: attrs[\"aria-describedby\"] as string | undefined,\n disabled: props.disabled,\n}));\n\nconst boxClass = cn(\n \"flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-input bg-background\",\n // Transform (the press squish) rides --ease-spring for a restrained release,\n // while fill/border stay on the instant --ease-out — the \"springy transform,\n // steady color\" split (boxStyle below), same language as Button/Switch.\n \"active:scale-90\",\n // Checked = a decision (Loom law): the box fills with primary.\n \"data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n \"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground\",\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\",\n);\n\nconst boxStyle =\n \"transition: transform var(--duration-fast) var(--ease-spring), background-color var(--duration-instant) var(--ease-out), border-color var(--duration-instant) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);\";\n</script>\n\n<template>\n \n \n <label\n v-if=\"label\"\n :class=\"\n cn(\n 'inline-flex items-center gap-2 text-sm text-foreground',\n // Disabled text stays readable (AA on the light ground) — only the box dims.\n field.disabled ? 'cursor-not-allowed text-muted-foreground' : 'cursor-pointer',\n attrs.class as string,\n )\n \"\n >\n <CheckboxRoot\n v-bind=\"{ ...optional({ modelValue }), ...boxAttrs, ...field.attrs }\"\n :disabled=\"field.disabled\"\n :required=\"field.required\"\n :class=\"cn(boxClass, 'disabled:opacity-50')\"\n :style=\"boxStyle\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n >\n <template #default=\"{ state }\">\n \n <CheckboxIndicator class=\"flex animate-scale-in items-center justify-center text-current\">\n <Minus v-if=\"state === 'indeterminate'\" class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n <Check v-else class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n </CheckboxIndicator>\n </template>\n </CheckboxRoot>\n {{ label }}\n </label>\n \n <CheckboxRoot\n v-else\n v-bind=\"{ ...optional({ modelValue }), ...boxAttrs, ...field.attrs }\"\n :disabled=\"field.disabled\"\n :required=\"field.required\"\n :aria-label=\"ariaLabel\"\n :aria-labelledby=\"ariaLabelledby\"\n :class=\"cn(boxClass, 'disabled:opacity-50', attrs.class as string)\"\n :style=\"boxStyle\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n >\n <template #default=\"{ state }\">\n <CheckboxIndicator class=\"flex animate-scale-in items-center justify-center text-current\">\n <Minus v-if=\"state === 'indeterminate'\" class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n <Check v-else class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n </CheckboxIndicator>\n </template>\n </CheckboxRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHA,IAAM,WACJ;;;;;;;;;;;;;;;;;;;EAlFF,MAAM,QAAQ;EAgCd,MAAM,EAAE,OAAO,MAAM,aAAa,cAAc;EA6BhD,MAAM,QAAQ,uBAAuB;GACnC,IAAI,MAAM;GACV,aAAa,MAAM;GACnB,UAAU,MAAM;EAClB,EAAE;EAEF,MAAM,WAAW,GACf,kGAIA,mBAEA,oHACA,sIAEA,+GACA,6BACF;;GAaU,OAAA,QAAA,SADR,UAAA,GAAA,mBA+BQ,SAAA;;IA7BL,OAAK,eAAS,MAAA,EAAA,CAAE,CAAA,0DAAkK,MAAA,KAAA,CAAK,CAAC,WAAQ,6CAAA,kBAA0E,MAAA,KAAA,CAAK,CAAC,KAAA,CAAA;GASjR,GAAA,CAAA,YAkBe,MAAA,YAAA,GAlBf,WAkBe;IAAA,GAjBA,MAAA,QAAA,CAAQ,CAAA,EAAA,YAAG,QAAA,WAAU,CAAA;IAAA,GAAQ,MAAA,QAAA;IAAQ,GAAK,MAAA,KAAA,CAAK,CAAC;GAAK,GAAA;IACjE,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,OAAO,MAAA,EAAA,CAAE,CAAC,MAAA,QAAA,GAAQ,qBAAA;IAClB,OAAO;IACP,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,MAAM;;IAE3C,SAAO,SAQI,EARA,YAAK,CAKzB,YAGoB,MAAA,iBAAA,GAAA,EAHD,OAAM,iEAAgE,GAAA;KACvF,SAAA,cAA8E,CAAjE,UAAK,mBAAlB,UAAA,GAAA,YAA8E,MAAA,KAAA,GAAA;;MAAtC,OAAM;MAAW,gBAAc;KACvE,CAAA,MAAA,UAAA,GAAA,YAAoD,MAAA,KAAA,GAAA;;MAAtC,OAAM;MAAW,gBAAc;;;;;;;;;GAGpC,CAAA,GAAA,gBAAA,MACf,gBAAG,QAAA,KAAK,GAAA,CAAA,CAAA,GAAA,CAAA,MAIV,UAAA,GAAA,YAiBe,MAAA,YAAA,GAjBf,WAiBe,EAAA,KAAA,EAAA,GAAA;IAAA,GAfA,MAAA,QAAA,CAAQ,CAAA,EAAA,YAAG,QAAA,WAAU,CAAA;IAAA,GAAQ,MAAA,QAAA;IAAQ,GAAK,MAAA,KAAA,CAAK,CAAC;GAAK,GAAA;IACjE,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,cAAY,QAAA;IACZ,mBAAiB,QAAA;IACjB,OAAO,MAAA,EAAA,CAAE,CAAC,MAAA,QAAA,GAAQ,uBAAyB,MAAA,KAAA,CAAK,CAAC,KAAK;IACtD,OAAO;IACP,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,MAAM;;IAE3C,SAAO,SAII,EAJA,YAAK,CACzB,YAGoB,MAAA,iBAAA,GAAA,EAHD,OAAM,iEAAgE,GAAA;KACvF,SAAA,cAA8E,CAAjE,UAAK,mBAAlB,UAAA,GAAA,YAA8E,MAAA,KAAA,GAAA;;MAAtC,OAAM;MAAW,gBAAc;KACvE,CAAA,MAAA,UAAA,GAAA,YAAoD,MAAA,KAAA,GAAA;;MAAtC,OAAM;MAAW,gBAAc"}

package/dist/primitives/Chip/Chip.js DELETED Viewed

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

package/dist/primitives/Chip/Chip.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Chip.js","names":[],"sources":["../../../src/primitives/Chip/Chip.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * The same eight names Badge carries, deliberately — a chip and a badge sitting\n * in one row are the same object in two moods, so `success` has to mean the\n * same green in both. A ninth name here would be a second vocabulary for one\n * palette.\n */\nexport type ChipVariant =\n \"neutral\" | \"outline\" | \"primary\" | \"success\" | \"warning\" | \"info\" | \"destructive\" | \"accent\";\n\n/**\n * Two heights off the shared control scale (the text input's `sm` and `md`), so\n * a row of chips above a field lines up with it. There is no `lg`: a chip is a\n * token, and one big enough to need the 44px step is a Button.\n */\nexport type ChipSize = \"sm\" | \"md\";\n\n/**\n * The container. It is the coloured pill, and it is deliberately not the\n * interactive node — see the docblock below for why that separation is the\n * whole component.\n *\n * Selection is a state the fill *deepens*; it is never the fill alone that\n * says so. Every selected chip also carries `aria-pressed=\"true\"` and a check\n * glyph, which is what keeps the signal legible to a reader who cannot resolve\n * a 12% wash from a 20% one.\n */\nexport const chipVariants = cva(\n [\n \"group inline-flex max-w-full items-center rounded-full border align-middle font-medium\",\n \"transition-[background-color,border-color,color] duration-fast ease-out\",\n // No `opacity` here, and that is the point. `data-[disabled]:opacity-50`\n // dimmed the pill *and* its label together, taking a 5.01:1 label down to\n // 2.78:1 against its own fill — halving the alpha more than halves the\n // contrast. Unavailability is painted in measured colours instead: the\n // fill and border below, and `disabledText` on the label and the glyph\n // beside it.\n \"data-[disabled]:cursor-not-allowed\",\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 variant: {\n // The two hueless variants take the primary wash when selected —\n // `--color-primary-muted` is the repository's selected/active fill, the\n // one Select's checked row already uses, so a chosen filter reads as a\n // human decision rather than as a new colour invented here.\n neutral:\n \"border-transparent bg-subtle text-subtle-foreground data-[selected]:border-primary/40 data-[selected]:bg-primary-muted data-[selected]:text-primary\",\n outline:\n \"border-border bg-transparent text-muted-foreground data-[selected]:border-primary/40 data-[selected]:bg-primary-muted data-[selected]:text-primary\",\n // The hue-carrying variants deepen their own hue instead of jumping to\n // the primary: a reader picked this chip *because* it is the destructive\n // one, and swapping its colour on selection would throw that away.\n primary:\n \"border-transparent bg-primary/12 text-primary data-[selected]:border-primary/45 data-[selected]:bg-primary/20\",\n success:\n \"border-transparent bg-success/12 text-success data-[selected]:border-success/45 data-[selected]:bg-success/20\",\n warning:\n \"border-transparent bg-warning/12 text-warning data-[selected]:border-warning/45 data-[selected]:bg-warning/20\",\n info: \"border-transparent bg-info/12 text-info data-[selected]:border-info/45 data-[selected]:bg-info/20\",\n destructive:\n \"border-transparent bg-destructive/12 text-destructive data-[selected]:border-destructive/45 data-[selected]:bg-destructive/20\",\n accent:\n \"border-accent/40 bg-accent-muted text-accent data-[selected]:border-accent/70 data-[selected]:bg-accent/20\",\n } satisfies Record<ChipVariant, string>,\n size: {\n sm: \"h-8 text-xs\",\n md: \"h-9 text-sm\",\n } satisfies Record<ChipSize, string>,\n },\n defaultVariants: { variant: \"neutral\", size: \"md\" },\n },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Check, X } from \"@lucide/vue\";\nimport { cn } from \"../../lib/cn\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\n\n/**\n * Chip — an interactive token: a filter that switches on, an entity that can be\n * dismissed, a recipient sitting in a picker.\n *\n * The line against Badge is the one worth knowing, because the two look almost\n * identical: **Badge is a status label a reader only looks at; Chip is a\n * control a reader acts on.** A Badge that gained a click handler would be a\n * Chip, and a Chip nobody can toggle or dismiss is a Badge wearing a button's\n * clothes — it takes a Tab stop and announces itself as pressable while doing\n * nothing. Reach for Button when the token *is* the action rather than a\n * standing state, and for SegmentedControl when exactly one of a small set must\n * be chosen; a row of chips is many-of-many, and none-of-them is a valid answer.\n *\n * The structure is the component. A chip that both toggles and dismisses has\n * two controls, and they are **siblings inside a non-interactive container** —\n * never a dismiss `<button>` nested inside a toggle `<button>`. Nested buttons\n * are invalid HTML: the parser reparents them, and screen readers disagree\n * about which one they are on and what a press means. So the pill is a `<span>`\n * that paints, and everything pressable is a child of it.\n *\n * Both controls stay on the natural Tab order rather than roving. They are two\n * different actions on one object, not N instances of one control, and a reader\n * who tabbed to the chip has to be able to reach \"remove\" without guessing an\n * arrow key.\n */\nconst props = withDefaults(\n defineProps<{\n /** Whether the chip is switched on. Binding it is what makes the chip a toggle — leave it unset for a chip that is only dismissable, and the label renders as inert text instead of a press target. */\n selected?: boolean | undefined;\n /** Renders a dismiss control beside the label, as a sibling of the toggle rather than inside it. */\n removable?: boolean;\n /** The accessible name of the dismiss control. Localise it, or qualify it — \"Remove Ana Duarte\" reads far better in a list of recipients. */\n removeLabel?: string;\n /** Unavailable: drains the pill to a neutral fill, mutes the label, and makes both controls inert to pointer and keyboard. */\n disabled?: boolean;\n /** Which status or meta the token carries. The names and colours are Badge's, so a chip and a badge never disagree. */\n variant?: ChipVariant;\n /** Chip height, off the shared control scale so a row of chips lines up with the field above it. */\n size?: ChipSize;\n }>(),\n {\n // Not `false`. `undefined` is the signal that this chip is not a toggle at\n // all, and Vue casts an absent Boolean prop to `false` unless a default\n // says otherwise — without this line every chip would claim to be a toggle\n // that is switched off, and a dismiss-only chip would grow a dead Tab stop.\n selected: undefined,\n removable: false,\n removeLabel: \"Remove\",\n disabled: false,\n variant: \"neutral\",\n size: \"md\",\n },\n);\n\nconst emit = defineEmits<{\n /** The flipped selection. The chip does not update itself: a filter chip's state is the query it stands for, and a chip that switched on locally would keep claiming a result set the host never fetched. */\n \"update:selected\": [value: boolean];\n /** The dismiss control was activated. Removing the chip from the list is the host's to do. */\n remove: [];\n}>();\n\nconst toggleable = computed(() => props.selected !== undefined);\n\n// The label's horizontal padding, shared by both branches below so the pill is\n// the same width whether or not it is pressable. The dismiss control supplies\n// its own trailing room, so the label gives its right side back when one is\n// present.\nconst labelPad = computed(() =>\n cn(props.size === \"sm\" ? \"px-2.5\" : \"px-3\", props.removable && \"pr-1\"),\n);\n\n// Springy transform, steady colour — the same split Button and Checkbox use, so\n// a chip press feels like every other press in the library.\nconst pressStyle =\n \"transition: transform var(--duration-fast) var(--ease-spring), background-color var(--duration-fast) var(--ease-out);\";\n\n// The unavailable label colour, and it belongs on the label rather than on the\n// pill around it. A colour set on the container is only *inherited* here, and\n// the container already carries `data-[selected]:text-primary` — an attribute\n// selector no plain class on the same element outranks. On the label itself it\n// is a declaration rather than an inheritance, so it wins whatever the pill\n// resolved to: 4.67:1 over the drained `--color-muted` fill, 4.77:1 over the\n// primary wash a selected chip keeps.\nconst disabledText = \"group-data-[disabled]:text-muted-foreground\";\n\n// Both inner controls are surfaces *inside* a 32px pill, so the standard\n// outward `outline-offset-2` would draw the toggle's ring straight through the\n// dismiss control sitting 4px to its right, and vice versa. Inset instead —\n// the ring lands just inside the pill's own border, which is where the eye\n// already is. WindowControls takes the same offset for the same reason.\nconst focusRing =\n \"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\";\n\n// Everything a host passes lands on the container: it is the node with an\n// identity (a data-testid, a key in a list), while the two controls inside it\n// are named by their own content and by `removeLabel`. `class` is pulled out of\n// that spread and merged through `cn()` instead — Vue's own class merge only\n// concatenates, so a caller's `max-w-32` would win or lose against the pill's\n// own utilities depending on Tailwind's emission order rather than on intent.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: containerAttrs } = useSplitAttrs();\n</script>\n\n<template>\n <span\n v-bind=\"containerAttrs\"\n :data-selected=\"selected || undefined\"\n :data-disabled=\"disabled || undefined\"\n :class=\"\n cn(\n chipVariants({ variant, size }),\n // Drained to the neutral well, with the hairline the coloured variants\n // hide: an unavailable chip gives up its hue rather than its legibility.\n // A *selected* one keeps the primary wash — `data-[selected]:bg-primary-muted`\n // outranks a plain class — which is right: switched-on is information,\n // and the label is muted over either fill.\n //\n // `border-border` and not the strong weight it used to take.\n // `theme.css` reserves the strong hairline for a block that must\n // *assert* its edge, which is the opposite of what this state says, and\n // the lighter rim is the same one every other unavailable control in\n // the library slackens to — so a disabled chip in a row of disabled\n // controls is one treatment rather than a second.\n disabled && 'border-border bg-muted',\n removable && 'pr-1',\n attrs.class as string,\n )\n \"\n >\n <button\n v-if=\"toggleable\"\n type=\"button\"\n :aria-pressed=\"selected\"\n :disabled=\"disabled\"\n :style=\"pressStyle\"\n :class=\"\n cn(\n 'inline-flex h-full min-w-0 select-none items-center gap-1 rounded-full',\n labelPad,\n // A neutral darkening rather than a token fill: the pill underneath\n // can be any of eight colours, and a hover state is not an action\n // colour.\n 'hover:bg-foreground/5 active:scale-press',\n focusRing,\n 'disabled:pointer-events-none',\n )\n \"\n @click=\"emit('update:selected', !selected)\"\n >\n \n <span\n aria-hidden=\"true\"\n class=\"inline-flex w-0 shrink-0 items-center overflow-hidden opacity-0 transition-[width,opacity] duration-fast ease-spring group-data-[selected]:w-4 group-data-[selected]:opacity-100\"\n >\n <Check class=\"h-3.5 w-3.5 shrink-0\" />\n </span>\n <span :class=\"cn('truncate', disabledText)\">\n \n <slot />\n </span>\n </button>\n <span v-else :class=\"cn('inline-flex min-w-0 items-center', labelPad)\">\n <span :class=\"cn('truncate', disabledText)\"><slot /></span>\n </span>\n\n \n <button\n v-if=\"removable\"\n type=\"button\"\n :aria-label=\"removeLabel\"\n :disabled=\"disabled\"\n :style=\"pressStyle\"\n :class=\"\n cn(\n 'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full',\n // Not `hover:bg-subtle`, the usual neutral well: it is opaque, and\n // over a coloured pill it punches a grey hole through the fill\n // instead of darkening it.\n 'hover:bg-foreground/10 active:scale-90',\n focusRing,\n disabledText,\n 'disabled:pointer-events-none',\n )\n \"\n @click=\"emit('remove')\"\n >\n <X class=\"h-3.5 w-3.5\" />\n </button>\n </span>\n</template>\n"],"mappings":""}

package/dist/primitives/Chip/Chip.vue.d.ts DELETED Viewed

@@ -1,79 +0,0 @@
-/**
- * The same eight names Badge carries, deliberately — a chip and a badge sitting
- * in one row are the same object in two moods, so `success` has to mean the
- * same green in both. A ninth name here would be a second vocabulary for one
- * palette.
- */
-export type ChipVariant = "neutral" | "outline" | "primary" | "success" | "warning" | "info" | "destructive" | "accent";
-/**
- * Two heights off the shared control scale (the text input's `sm` and `md`), so
- * a row of chips above a field lines up with it. There is no `lg`: a chip is a
- * token, and one big enough to need the 44px step is a Button.
- */
-export type ChipSize = "sm" | "md";
-/**
- * The container. It is the coloured pill, and it is deliberately not the
- * interactive node — see the docblock below for why that separation is the
- * whole component.
- *
- * Selection is a state the fill *deepens*; it is never the fill alone that
- * says so. Every selected chip also carries `aria-pressed="true"` and a check
- * glyph, which is what keeps the signal legible to a reader who cannot resolve
- * a 12% wash from a 20% one.
- */
-export declare const chipVariants: (props?: ({
-    variant?: "accent" | "neutral" | "outline" | "primary" | "success" | "warning" | "info" | "destructive" | null | undefined;
-    size?: "sm" | "md" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
-    /** Whether the chip is switched on. Binding it is what makes the chip a toggle — leave it unset for a chip that is only dismissable, and the label renders as inert text instead of a press target. */
-    selected?: boolean | undefined;
-    /** Renders a dismiss control beside the label, as a sibling of the toggle rather than inside it. */
-    removable?: boolean;
-    /** The accessible name of the dismiss control. Localise it, or qualify it — "Remove Ana Duarte" reads far better in a list of recipients. */
-    removeLabel?: string;
-    /** Unavailable: drains the pill to a neutral fill, mutes the label, and makes both controls inert to pointer and keyboard. */
-    disabled?: boolean;
-    /** Which status or meta the token carries. The names and colours are Badge's, so a chip and a badge never disagree. */
-    variant?: ChipVariant;
-    /** Chip height, off the shared control scale so a row of chips lines up with the field above it. */
-    size?: ChipSize;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:selected": (value: boolean) => any;
-    remove: () => any;
-}, string, import("vue").PublicProps, Readonly<{
-    /** Whether the chip is switched on. Binding it is what makes the chip a toggle — leave it unset for a chip that is only dismissable, and the label renders as inert text instead of a press target. */
-    selected?: boolean | undefined;
-    /** Renders a dismiss control beside the label, as a sibling of the toggle rather than inside it. */
-    removable?: boolean;
-    /** The accessible name of the dismiss control. Localise it, or qualify it — "Remove Ana Duarte" reads far better in a list of recipients. */
-    removeLabel?: string;
-    /** Unavailable: drains the pill to a neutral fill, mutes the label, and makes both controls inert to pointer and keyboard. */
-    disabled?: boolean;
-    /** Which status or meta the token carries. The names and colours are Badge's, so a chip and a badge never disagree. */
-    variant?: ChipVariant;
-    /** Chip height, off the shared control scale so a row of chips lines up with the field above it. */
-    size?: ChipSize;
-}> & Readonly<{
-    "onUpdate:selected"?: (value: boolean) => any;
-    onRemove?: () => any;
-}>, {
-    size: ChipSize;
-    disabled: boolean;
-    variant: ChipVariant;
-    selected: boolean | undefined;
-    removable: boolean;
-    removeLabel: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
-} & {
-    default?: (props: {}) => any;
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-//# sourceMappingURL=Chip.vue.d.ts.map