@crisp-ui-kit/crisp 0.32.0 → 0.33.0

package/dist/esm/components/progress/progress.recipe.js

@@ -1,17 +1,57 @@
-import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
 // A progress indicator — a continuous brand-filled track, or a segmented row of
 // pills (a "Getting started 3/6" bar).
-const config = defineRecipe({
+const spec = defineSpec({
     name: "progress",
-    base: `display: block; box-sizing: border-box; height: 6px; border-radius: ${c.radius.full}; background: color-mix(in srgb, ${c.fgPrimary} 8%, transparent); overflow: hidden;
-    & .crisp-progress-fill { display: block; height: 100%; border-radius: ${c.radius.full}; background: ${c.bgBrandSolid}; transition: width 0.25s ease; }
-    &[data-segmented] { display: flex; gap: ${c.space["1"]}; background: transparent; overflow: visible; }
-    &[data-segmented] .crisp-progress-seg { flex: 1; height: 100%; border-radius: ${c.radius.full}; background: color-mix(in srgb, ${c.fgPrimary} 8%, transparent); transition: background 0.2s; }
-    &[data-segmented] .crisp-progress-seg[data-filled] { background: ${c.bgBrandSolid}; }`,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
+    base: {
+        display: "block",
+        boxSizing: "border-box",
+        height: "6px",
+        borderRadius: c.radius.full,
+        background: `color-mix(in srgb, ${c.fgPrimary} 8%, transparent)`,
+        overflow: "hidden",
+    },
+    parts: [
+        {
+            slot: "fill",
+            selector: "& .crisp-progress-fill",
+            decls: {
+                display: "block",
+                height: "100%",
+                borderRadius: c.radius.full,
+                background: c.bgBrandSolid,
+                transition: "width 0.25s ease",
+            },
+        },
+        {
+            selector: "&[data-segmented]",
+            decls: {
+                display: "flex",
+                gap: c.space["1"],
+                background: "transparent",
+                overflow: "visible",
+            },
+        },
+        {
+            slot: "seg",
+            selector: "&[data-segmented] .crisp-progress-seg",
+            decls: {
+                flex: 1,
+                height: "100%",
+                borderRadius: c.radius.full,
+                background: `color-mix(in srgb, ${c.fgPrimary} 8%, transparent)`,
+                transition: "background 0.2s",
+            },
+        },
+        {
+            slot: "seg",
+            selector: "&[data-segmented] .crisp-progress-seg[data-filled]",
+            decls: { background: c.bgBrandSolid },
+        },
+    ],
 });
+const config = specToRecipe(spec);
 export const progressRecipe = resolveRecipe(config);
+export { spec };
 export default config;

package/dist/esm/components/spinner/spinner.recipe.js

@@ -1,13 +1,21 @@
-import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
 // A spinning ring loading indicator.
-const config = defineRecipe({
+const spec = defineSpec({
     name: "spinner",
-    globalCss: `@keyframes crisp-spin { to { transform: rotate(360deg); } }`,
-    base: `display: inline-block; box-sizing: border-box; width: 16px; height: 16px; border-radius: ${c.radius.full}; border: 2px solid color-mix(in srgb, ${c.fgPrimary} 15%, transparent); border-top-color: ${c.fgMuted}; animation: crisp-spin 0.6s linear infinite;`,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
+    globalCss: "@keyframes crisp-spin { to { transform: rotate(360deg); } }",
+    base: {
+        display: "inline-block",
+        boxSizing: "border-box",
+        width: "16px",
+        height: "16px",
+        borderRadius: c.radius.full,
+        border: `2px solid color-mix(in srgb, ${c.fgPrimary} 15%, transparent)`,
+        borderTopColor: c.fgMuted,
+        animation: "crisp-spin 0.6s linear infinite",
+    },
 });
+const config = specToRecipe(spec);
 export const spinnerRecipe = resolveRecipe(config);
+export { spec };
 export default config;

package/dist/esm/core/index.js

@@ -7,6 +7,7 @@ export { placeFloating, } from "./place-floating.js";
 export { Primitive } from "./primitive.js";
 export { resolveRecipe } from "./resolve.js";
 export * from "./rtl.js";
+export { defineSpec, specToRecipe } from "./spec.js";
 export { useFocusAfterRemoval } from "./use-focus-after-removal.js";
 export { useFormReset } from "./use-form-reset.js";
 export { useLabelAssociation } from "./use-label-association.js";

package/dist/esm/core/spec.js

@@ -0,0 +1,66 @@
+const kebab = (p) => p.startsWith("--") ? p : p.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+/** `{ flexShrink: 0 }` -> `flex-shrink: 0;`, in insertion order. */
+export function declsToCss(decls) {
+    return Object.entries(decls)
+        .map(([prop, value]) => `${kebab(prop)}: ${value};`)
+        .join(" ");
+}
+/**
+ * `const` type parameter, not a plain `ComponentSpec` return: widening the
+ * variant keys here loses the literal union that `VariantProps<typeof recipe>`
+ * hands a component, and `BadgeProps["tone"]` silently degrades from
+ * `"neutral" | "brand" | …` to `string`. That is a public API regression that
+ * typechecks everywhere except at the call sites it was meant to protect.
+ */
+export function defineSpec(spec) {
+    return spec;
+}
+/**
+ * Compile a spec into the RecipeConfig the existing pipeline already takes, so
+ * nothing downstream — the CSS generator, the d.ts generator, `resolveRecipe`,
+ * the spec guards — has to know a spec exists. That is what keeps the
+ * conversion provable: `dist/` must not move, and CI's
+ * `git diff --exit-code dist/` is the gate.
+ *
+ * The formatting here is not cosmetic freedom. It reproduces exactly what the
+ * hand-written template strings emit — root declarations space-joined, each
+ * nested rule on its own line indented four spaces — because any other choice
+ * rewrites every committed stylesheet and buries the conversion's real diff.
+ */
+export function specToRecipe(spec) {
+    const root = declsToCss(spec.base);
+    const nested = (spec.parts ?? []).map((p) => `${p.selector} { ${declsToCss(p.decls)} }`);
+    const base = nested.length ? `${root}\n    ${nested.join("\n    ")}` : root;
+    // A variant value compiles the same way the root does: declarations first,
+    // then any nested rules it contributes, so a variant that restyles a part
+    // (Badge's solid dot) stays in the variant rather than leaking into base.
+    const compileValue = (v) => {
+        const decls = "decls" in v ? v.decls : v;
+        const nestedParts = "decls" in v ? (v.parts ?? []) : [];
+        const head = declsToCss(decls);
+        if (!nestedParts.length)
+            return head;
+        const tail = nestedParts
+            .map((p) => `${p.selector} { ${declsToCss(p.decls)} }`)
+            .join("\n    ");
+        return head ? `${head}\n    ${tail}` : tail;
+    };
+    const variants = {};
+    for (const [name, values] of Object.entries(spec.variants ?? {})) {
+        variants[name] = {};
+        for (const [value, v] of Object.entries(values)) {
+            variants[name][value] = compileValue(v);
+        }
+    }
+    return {
+        name: spec.name,
+        base,
+        variants: variants,
+        defaultVariants: (spec.defaultVariants ?? {}),
+        compoundVariants: (spec.compoundVariants ?? []).map(({ decls, ...sel }) => ({
+            ...sel,
+            css: declsToCss(decls),
+        })),
+        ...(spec.globalCss ? { globalCss: spec.globalCss } : {}),
+    };
+}

package/dist/types/components/badge/badge.d.ts

@@ -7,39 +7,39 @@ export type BadgeProps = React.ComponentPropsWithoutRef<"span"> & VariantProps<t
     dot?: boolean;
 };
 export declare const Badge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & VariantProps<import("../..").RecipeFn<{
-    tone: {
-        neutral: string;
-        brand: string;
-        success: string;
-        warning: string;
-        danger: string;
+    readonly tone: {
+        readonly neutral: string;
+        readonly brand: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly danger: string;
     };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
+    readonly size: {
+        readonly small: string;
+        readonly medium: string;
+        readonly large: string;
     };
-    variant: {
-        soft: string;
-        solid: string;
+    readonly variant: {
+        readonly soft: string;
+        readonly solid: string;
     };
 }> & {
     config: import("../..").RecipeConfig<{
-        tone: {
-            neutral: string;
-            brand: string;
-            success: string;
-            warning: string;
-            danger: string;
+        readonly tone: {
+            readonly neutral: string;
+            readonly brand: string;
+            readonly success: string;
+            readonly warning: string;
+            readonly danger: string;
         };
-        size: {
-            small: string;
-            medium: string;
-            large: string;
+        readonly size: {
+            readonly small: string;
+            readonly medium: string;
+            readonly large: string;
         };
-        variant: {
-            soft: string;
-            solid: string;
+        readonly variant: {
+            readonly soft: string;
+            readonly solid: string;
         };
     }>;
 }> & {

package/dist/types/components/badge/badge.recipe.d.ts

@@ -1,56 +1,180 @@
+declare const spec: {
+    readonly name: "badge";
+    readonly base: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: `var(--${string})`;
+        readonly fontFamily: `var(--${string})`;
+        readonly fontWeight: `var(--${string})`;
+        readonly letterSpacing: "-0.1px";
+        readonly whiteSpace: "nowrap";
+    };
+    readonly parts: [{
+        readonly slot: "dot";
+        readonly selector: "& .crisp-badge-dot";
+        readonly decls: {
+            readonly width: "6px";
+            readonly height: "6px";
+            readonly flexShrink: 0;
+            readonly borderRadius: `var(--${string})`;
+            readonly background: "currentColor";
+        };
+    }];
+    readonly variants: {
+        readonly tone: {
+            readonly neutral: {
+                readonly background: `var(--${string})`;
+                readonly color: `var(--${string})`;
+                readonly boxShadow: `inset 0 0 0 1px var(--${string})`;
+            };
+            readonly brand: {
+                background: string;
+                color: `var(--${string})`;
+                boxShadow: string;
+            };
+            readonly success: {
+                background: string;
+                color: `var(--${string})`;
+                boxShadow: string;
+            };
+            readonly warning: {
+                background: string;
+                color: `var(--${string})`;
+                boxShadow: string;
+            };
+            readonly danger: {
+                background: string;
+                color: `var(--${string})`;
+                boxShadow: string;
+            };
+        };
+        readonly size: {
+            readonly small: {
+                readonly height: "16px";
+                readonly paddingInline: `var(--${string})`;
+                readonly fontSize: `var(--${string})`;
+                readonly borderRadius: `var(--${string})`;
+            };
+            readonly medium: {
+                readonly height: "20px";
+                readonly paddingInline: `var(--${string})`;
+                readonly fontSize: `var(--${string})`;
+                readonly borderRadius: `var(--${string})`;
+            };
+            readonly large: {
+                readonly height: `var(--${string})`;
+                readonly paddingInline: "9px";
+                readonly fontSize: `var(--${string})`;
+                readonly borderRadius: `var(--${string})`;
+            };
+        };
+        readonly variant: {
+            soft: {};
+            solid: {};
+        };
+    };
+    readonly defaultVariants: {
+        readonly tone: "neutral";
+        readonly size: "medium";
+        readonly variant: "soft";
+    };
+    readonly compoundVariants: [{
+        readonly variant: "solid";
+        readonly tone: "brand";
+        readonly decls: {
+            readonly background: `var(--${string})`;
+            readonly color: `var(--${string})`;
+            readonly boxShadow: "none";
+        };
+    }, {
+        readonly variant: "solid";
+        readonly tone: "success";
+        readonly decls: {
+            readonly background: `var(--${string})`;
+            readonly color: `var(--${string})`;
+            readonly boxShadow: "none";
+        };
+    }, {
+        readonly variant: "solid";
+        readonly tone: "warning";
+        readonly decls: {
+            readonly background: `var(--${string})`;
+            readonly color: `var(--${string})`;
+            readonly boxShadow: "none";
+        };
+    }, {
+        readonly variant: "solid";
+        readonly tone: "danger";
+        readonly decls: {
+            readonly background: `var(--${string})`;
+            readonly color: `var(--${string})`;
+            readonly boxShadow: "none";
+        };
+    }, {
+        readonly variant: "solid";
+        readonly tone: "neutral";
+        readonly decls: {
+            readonly background: `var(--${string})`;
+            readonly color: `var(--${string})`;
+            readonly boxShadow: "none";
+        };
+    }];
+};
 declare const config: import("../..").RecipeConfig<{
-    tone: {
-        neutral: string;
-        brand: string;
-        success: string;
-        warning: string;
-        danger: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-    variant: {
-        soft: string;
-        solid: string;
+    readonly tone: {
+        readonly neutral: string;
+        readonly brand: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly danger: string;
+    };
+    readonly size: {
+        readonly small: string;
+        readonly medium: string;
+        readonly large: string;
+    };
+    readonly variant: {
+        readonly soft: string;
+        readonly solid: string;
     };
 }>;
 export declare const badgeRecipe: import("../..").RecipeFn<{
-    tone: {
-        neutral: string;
-        brand: string;
-        success: string;
-        warning: string;
-        danger: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-    variant: {
-        soft: string;
-        solid: string;
+    readonly tone: {
+        readonly neutral: string;
+        readonly brand: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly danger: string;
+    };
+    readonly size: {
+        readonly small: string;
+        readonly medium: string;
+        readonly large: string;
+    };
+    readonly variant: {
+        readonly soft: string;
+        readonly solid: string;
     };
 }> & {
     config: import("../..").RecipeConfig<{
-        tone: {
-            neutral: string;
-            brand: string;
-            success: string;
-            warning: string;
-            danger: string;
-        };
-        size: {
-            small: string;
-            medium: string;
-            large: string;
-        };
-        variant: {
-            soft: string;
-            solid: string;
+        readonly tone: {
+            readonly neutral: string;
+            readonly brand: string;
+            readonly success: string;
+            readonly warning: string;
+            readonly danger: string;
+        };
+        readonly size: {
+            readonly small: string;
+            readonly medium: string;
+            readonly large: string;
+        };
+        readonly variant: {
+            readonly soft: string;
+            readonly solid: string;
         };
     }>;
 };
+export { spec };
 export default config;

package/dist/types/components/divider/divider.recipe.d.ts

@@ -1,3 +1,27 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const dividerRecipe: import("../..").RecipeFn<{}>;
+declare const spec: {
+    readonly name: "divider";
+    readonly base: {
+        readonly flexShrink: 0;
+        readonly border: "none";
+        readonly margin: 0;
+        readonly background: `var(--${string})`;
+    };
+    readonly parts: [{
+        readonly selector: "&[data-orientation=\"horizontal\"]";
+        readonly decls: {
+            readonly width: "100%";
+            readonly height: "1px";
+        };
+    }, {
+        readonly selector: "&[data-orientation=\"vertical\"]";
+        readonly decls: {
+            readonly width: "1px";
+            readonly alignSelf: "stretch";
+            readonly minHeight: "1em";
+        };
+    }];
+};
+declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+export declare const dividerRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>>;
+export { spec };
 export default config;

package/dist/types/components/progress/progress.recipe.d.ts

@@ -1,3 +1,50 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const progressRecipe: import("../..").RecipeFn<{}>;
+declare const spec: {
+    readonly name: "progress";
+    readonly base: {
+        readonly display: "block";
+        readonly boxSizing: "border-box";
+        readonly height: "6px";
+        readonly borderRadius: `var(--${string})`;
+        readonly background: `color-mix(in srgb, var(--${string}) 8%, transparent)`;
+        readonly overflow: "hidden";
+    };
+    readonly parts: [{
+        readonly slot: "fill";
+        readonly selector: "& .crisp-progress-fill";
+        readonly decls: {
+            readonly display: "block";
+            readonly height: "100%";
+            readonly borderRadius: `var(--${string})`;
+            readonly background: `var(--${string})`;
+            readonly transition: "width 0.25s ease";
+        };
+    }, {
+        readonly selector: "&[data-segmented]";
+        readonly decls: {
+            readonly display: "flex";
+            readonly gap: `var(--${string})`;
+            readonly background: "transparent";
+            readonly overflow: "visible";
+        };
+    }, {
+        readonly slot: "seg";
+        readonly selector: "&[data-segmented] .crisp-progress-seg";
+        readonly decls: {
+            readonly flex: 1;
+            readonly height: "100%";
+            readonly borderRadius: `var(--${string})`;
+            readonly background: `color-mix(in srgb, var(--${string}) 8%, transparent)`;
+            readonly transition: "background 0.2s";
+        };
+    }, {
+        readonly slot: "seg";
+        readonly selector: "&[data-segmented] .crisp-progress-seg[data-filled]";
+        readonly decls: {
+            background: `var(--${string})`;
+        };
+    }];
+};
+declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+export declare const progressRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>>;
+export { spec };
 export default config;

package/dist/types/components/spinner/spinner.recipe.d.ts

@@ -1,3 +1,18 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const spinnerRecipe: import("../..").RecipeFn<{}>;
+declare const spec: {
+    readonly name: "spinner";
+    readonly globalCss: "@keyframes crisp-spin { to { transform: rotate(360deg); } }";
+    readonly base: {
+        readonly display: "inline-block";
+        readonly boxSizing: "border-box";
+        readonly width: "16px";
+        readonly height: "16px";
+        readonly borderRadius: `var(--${string})`;
+        readonly border: `2px solid color-mix(in srgb, var(--${string}) 15%, transparent)`;
+        readonly borderTopColor: `var(--${string})`;
+        readonly animation: "crisp-spin 0.6s linear infinite";
+    };
+};
+declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+export declare const spinnerRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>>;
+export { spec };
 export default config;

package/dist/types/core/index.d.ts

@@ -7,6 +7,7 @@ export { type FloatingAlign, type PlaceFloatingOptions, placeFloating, } from ".
 export { Primitive } from "./primitive";
 export { resolveRecipe } from "./resolve";
 export * from "./rtl";
+export { defineSpec, specToRecipe } from "./spec";
 export type * from "./types";
 export { useFocusAfterRemoval } from "./use-focus-after-removal";
 export { useFormReset } from "./use-form-reset";

package/dist/types/core/spec.d.ts

@@ -0,0 +1,83 @@
+import type { RecipeConfig } from "./types";
+/**
+ * A component spec: the layer above a recipe, where style intent is DATA
+ * rather than a CSS string.
+ *
+ * ADR 0002 §2. A string cannot be asked a question — `build/emit-lynx.mjs`
+ * mangled every at-rule and the Spinner never span (#174) because the only
+ * thing it could do to CSS text was rewrite it and hope. A spec is a list of
+ * properties, so a target that cannot express one can REFUSE it and fail the
+ * build, which is the difference between a broken build and a silently wrong
+ * one.
+ *
+ * Two deliberate limits:
+ *
+ * - `parts` is an ORDERED array, not a map of slots. The emitted CSS depends on
+ *   rule order (`&[data-segmented] .seg` must follow `&[data-segmented]`), and
+ *   a map of named slots cannot express an interleaving of child-slot rules and
+ *   root state rules. The `slot` field carries the name a non-CSS target needs
+ *   for a declared part; `selector` carries what the web needs.
+ * - Values stay `string | number`. Resolving a token to its `var(--…)` is the
+ *   contract's job, already typed, and re-encoding token references here would
+ *   be a second source of truth for values that lesson 31 says will drift.
+ */
+export type SpecValue = string | number;
+/** Declarations in camelCase, the way a native style object spells them. */
+export type SpecDecls = Record<string, SpecValue>;
+export type SpecPart = {
+    /** Name of the declared part, for targets with no CSS selectors. */
+    slot?: string;
+    /** The nested selector, relative to the component root (`&` is the root). */
+    selector: string;
+    decls: SpecDecls;
+};
+/** One variant value's declarations, plus any nested rules it adds. */
+export type SpecVariantValue = SpecDecls | {
+    decls: SpecDecls;
+    parts?: SpecPart[];
+};
+export type ComponentSpec = {
+    name: string;
+    /** Declarations on the component root. */
+    base: SpecDecls;
+    /** Nested rules, in emission order. */
+    parts?: SpecPart[];
+    /** variant -> value -> declarations. */
+    variants?: Record<string, Record<string, SpecVariantValue>>;
+    defaultVariants?: Record<string, string | boolean>;
+    /** Selections that apply together, in emission order. */
+    compoundVariants?: Array<Record<string, unknown> & {
+        decls: SpecDecls;
+    }>;
+    /** Raw CSS that must sit outside the component rule (`@keyframes`). */
+    globalCss?: string;
+};
+/** `{ flexShrink: 0 }` -> `flex-shrink: 0;`, in insertion order. */
+export declare function declsToCss(decls: SpecDecls): string;
+/**
+ * `const` type parameter, not a plain `ComponentSpec` return: widening the
+ * variant keys here loses the literal union that `VariantProps<typeof recipe>`
+ * hands a component, and `BadgeProps["tone"]` silently degrades from
+ * `"neutral" | "brand" | …` to `string`. That is a public API regression that
+ * typechecks everywhere except at the call sites it was meant to protect.
+ */
+export declare function defineSpec<const S extends ComponentSpec>(spec: S): S;
+/** The recipe variant record a spec implies: same keys, values compiled to CSS. */
+export type SpecVariants<S extends ComponentSpec> = S["variants"] extends Record<string, Record<string, SpecVariantValue>> ? {
+    [K in keyof S["variants"]]: {
+        [P in keyof S["variants"][K]]: string;
+    };
+} : Record<string, Record<string, string>>;
+/**
+ * Compile a spec into the RecipeConfig the existing pipeline already takes, so
+ * nothing downstream — the CSS generator, the d.ts generator, `resolveRecipe`,
+ * the spec guards — has to know a spec exists. That is what keeps the
+ * conversion provable: `dist/` must not move, and CI's
+ * `git diff --exit-code dist/` is the gate.
+ *
+ * The formatting here is not cosmetic freedom. It reproduces exactly what the
+ * hand-written template strings emit — root declarations space-joined, each
+ * nested rule on its own line indented four spaces — because any other choice
+ * rewrites every committed stylesheet and buries the conversion's real diff.
+ */
+export declare function specToRecipe<const S extends ComponentSpec>(spec: S): RecipeConfig<SpecVariants<S>>;