fix(class-recipe): accept its own slots in a function generic over the slot recipe it composes

As in @lynstack/recipe, a function generic over the slot recipe that its
sva recipe composes could not name the recipe's own slots in `base`, the
variants, or the compound variants, since their keys were typed with
ComposedSlot. The config now types the slots of the composed recipes
apart and checks the recipe's own slots first. SlotClasses is now one
mapped type, the same type as before, which declarations print by name.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Author: timphandev

api/class-recipe.d.ts

@@ -1,4 +1,4 @@
-import { Composable, ComposableKindRecipe, ComposableKindRecipe as ComposableKindRecipe$1, ComposableKindSlotRecipe, ComposableKindSlotRecipe as ComposableKindSlotRecipe$1, ComposedDefaultedName, ComposedSlot, ComposedSlot as ComposedSlot$1, ComposedVariants, ComposedVariants as ComposedVariants$1, CompoundCondition, DefaultVariants, KindRecipe, KindVariants, RecipeComposition, RecipeComposition as RecipeComposition$1, RecipeFunction, VariantKey, VariantOption, VariantSelection, VariantSelection as VariantSelection$1, VariantsOf as VariantsOf$1 } from "@lynstack/recipe";
+import { Composable, ComposableKindRecipe, ComposableKindRecipe as ComposableKindRecipe$1, ComposableKindSlotRecipe, ComposableKindSlotRecipe as ComposableKindSlotRecipe$1, ComposedDefaultedName, ComposedSlot, ComposedVariants, ComposedVariants as ComposedVariants$1, CompoundCondition, DefaultVariants, KindRecipe, KindVariants, RecipeComposition, RecipeComposition as RecipeComposition$1, RecipeFunction, VariantKey, VariantOption, VariantSelection, VariantSelection as VariantSelection$1, VariantsOf as VariantsOf$1 } from "@lynstack/recipe";
 //#region src/cx.d.ts
 type ClassValue = ClassArray | ClassDictionary | string | number | boolean | null | undefined;
 type ClassDictionary = Readonly<Record<string, unknown>>;
@@ -22,9 +22,10 @@ type VariantDefaults<Props> = KindRecipeOf<Props>["defaultVariants"];
 type VariantsOf<Recipe extends (props: never) => unknown> = OptionsOnly<Omit<VariantsOf$1<Recipe>, OverrideName>>;
 type PropsOf<Recipe extends (props: never) => unknown> = Simplify<NonNullable<Parameters<Recipe>[0]>>;
 type OptionsOnly<Variants> = { [Name in keyof Variants]: Exclude<Variants[Name], object>; };
-type SlotClasses<Slot extends string> = Readonly<Partial<Record<Slot, string | undefined>>>;
+type SlotClasses<Slot extends string> = { readonly [Name in Slot]?: string | undefined; };
 type SlotClassNames<Slot extends string> = Readonly<Record<Slot, string>>;
-type NoUnknownSlots<Variants, Slot extends string> = { readonly [Name in keyof Variants]: { readonly [Option in keyof Variants[Name]]: string extends keyof Variants[Name][Option] ? unknown : Readonly<Record<Exclude<keyof Variants[Name][Option], Slot>, never>>; }; };
+type NoUnknownSlots<Variants, Slot extends string, Inherited extends string = never> = { readonly [Name in keyof Variants]: { readonly [Option in keyof Variants[Name]]: string extends keyof Variants[Name][Option] ? unknown : Readonly<Record<Exclude<Exclude<keyof Variants[Name][Option], Slot>, Inherited>, never>>; }; };
+type InheritedSlot<Composed extends readonly ComposableKindSlotRecipe$1<string>[]> = NonNullable<Composed[number]["~composition"]>["slots"][number];
 type WideSelection<Slot extends string> = Readonly<Record<string, string | SlotClasses<Slot> | undefined>>;
 type SlotRecipeProps<Slot extends string, Variants, DefaultedName extends keyof Variants> = Simplify<(string extends keyof Variants ? WideSelection<Slot> : VariantSelection$1<Variants, DefaultedName>) & {
   readonly classNames?: SlotClasses<Slot> | undefined;
@@ -69,12 +70,12 @@ interface SlotCompoundVariant<Slot extends string, Variants> {
 interface SlotRecipeConfig<Slot extends string, Variants extends SlotRecipeVariants, DefaultedName extends keyof ComposedVariants$1<Composed, Variants>, Composed extends readonly ComposableKindSlotRecipe$1<string>[] = readonly []> {
   readonly composes?: Composed | undefined;
   readonly slots: readonly Slot[];
-  readonly base?: SlotClasses<NoInfer<ComposedSlot$1<Composed, Slot>>> | undefined;
-  readonly variants: Variants & NoUnknownSlots<Variants, NoInfer<ComposedSlot$1<Composed, Slot>>> & {
+  readonly base?: SlotClasses<NoInfer<Slot> | InheritedSlot<Composed>> | undefined;
+  readonly variants: Variants & NoUnknownSlots<Variants, NoInfer<Slot>, InheritedSlot<Composed>> & {
     readonly className?: never;
     readonly classNames?: never;
   };
-  readonly compoundVariants?: readonly SlotCompoundVariant<NoInfer<ComposedSlot$1<Composed, Slot>>, NoInfer<ComposedVariants$1<Composed, Variants>>>[] | undefined;
+  readonly compoundVariants?: readonly SlotCompoundVariant<NoInfer<Slot> | InheritedSlot<Composed>, NoInfer<ComposedVariants$1<Composed, Variants>>>[] | undefined;
   readonly defaultVariants?: DefaultVariants<ComposedVariants$1<Composed, Variants>, DefaultedName> | undefined;
   readonly cache?: boolean | undefined;
 }

api/consumers/class-recipe/chain.d.ts

@@ -1,5 +1,5 @@
 declare const level0: NoInfer<((props: {
-    readonly classNames?: Readonly<Partial<Record<"root", string | undefined>>> | undefined;
+    readonly classNames?: import("@lynstack/class-recipe").SlotClasses<"root"> | undefined;
     readonly size: import("@lynstack/class-recipe").VariantOption<{
         readonly md: {
             readonly root: "h-8";
@@ -34,7 +34,7 @@ declare const level0: NoInfer<((props: {
     }, never, string, readonly "root"[]> | undefined;
 }>;
 declare const level1: NoInfer<((props: {
-    readonly classNames?: Readonly<Partial<Record<"icon" | "root", string | undefined>>> | undefined;
+    readonly classNames?: import("@lynstack/class-recipe").SlotClasses<"icon" | "root"> | undefined;
     readonly size: import("@lynstack/class-recipe").VariantOption<{
         readonly md: {
             readonly root: "h-8";
@@ -76,7 +76,7 @@ declare const level1: NoInfer<((props: {
     }, never, string, readonly ("icon" | "root")[]> | undefined;
 }>;
 declare const level2: NoInfer<((props: {
-    readonly classNames?: Readonly<Partial<Record<"icon" | "label" | "root", string | undefined>>> | undefined;
+    readonly classNames?: import("@lynstack/class-recipe").SlotClasses<"icon" | "label" | "root"> | undefined;
     readonly size: import("@lynstack/class-recipe").VariantOption<{
         readonly md: {
             readonly root: "h-8";
@@ -125,7 +125,7 @@ declare const level2: NoInfer<((props: {
     }, never, string, readonly ("icon" | "label" | "root")[]> | undefined;
 }>;
 declare const level3: NoInfer<((props: {
-    readonly classNames?: Readonly<Partial<Record<"badge" | "icon" | "label" | "root", string | undefined>>> | undefined;
+    readonly classNames?: import("@lynstack/class-recipe").SlotClasses<"badge" | "icon" | "label" | "root"> | undefined;
     readonly shape: "round";
     readonly size: import("@lynstack/class-recipe").VariantOption<{
         readonly md: {
@@ -181,7 +181,7 @@ declare const level3: NoInfer<((props: {
     }, never, string, readonly ("badge" | "icon" | "label" | "root")[]> | undefined;
 }>;
 declare const level4: NoInfer<((props: {
-    readonly classNames?: Readonly<Partial<Record<"badge" | "hint" | "icon" | "label" | "root", string | undefined>>> | undefined;
+    readonly classNames?: import("@lynstack/class-recipe").SlotClasses<"badge" | "hint" | "icon" | "label" | "root"> | undefined;
     readonly muted?: import("@lynstack/class-recipe").VariantOption<{
         readonly true: {
             readonly hint: "opacity-50";

api/consumers/class-recipe/configured-recipes.d.ts

@@ -120,7 +120,7 @@ declare const tag: ((props?: {
     }, "size" | "tone", string, undefined> | undefined;
 };
 declare const look: NoInfer<((props: {
-    readonly classNames?: Readonly<Partial<Record<"root", string | undefined>>> | undefined;
+    readonly classNames?: import("@lynstack/class-recipe").SlotClasses<"root"> | undefined;
     readonly size: import("@lynstack/class-recipe").VariantOption<{
         readonly md: {
             readonly root: "h-8";
@@ -155,7 +155,7 @@ declare const look: NoInfer<((props: {
     }, never, string, readonly "root"[]> | undefined;
 }>;
 declare const field: NoInfer<((props: {
-    readonly classNames?: Readonly<Partial<Record<"label" | "root", string | undefined>>> | undefined;
+    readonly classNames?: import("@lynstack/class-recipe").SlotClasses<"label" | "root"> | undefined;
     readonly invalid?: import("@lynstack/class-recipe").VariantOption<{
         readonly true: {
             readonly label: "text-red-700";
@@ -205,7 +205,7 @@ declare const field: NoInfer<((props: {
     }, never, string, readonly ("label" | "root")[]> | undefined;
 }>;
 declare const select: NoInfer<((props?: {
-    readonly classNames?: Readonly<Partial<Record<"label" | "root" | "trigger", string | undefined>>> | undefined;
+    readonly classNames?: import("@lynstack/class-recipe").SlotClasses<"label" | "root" | "trigger"> | undefined;
     readonly invalid?: import("@lynstack/class-recipe").VariantOption<{
         readonly true: {
             readonly label: "text-red-700";

api/consumers/class-recipe/define.d.ts

@@ -8,4 +8,12 @@ declare function defineComposed<const Variants extends RecipeVariants, const Def
 declare function defineSlots<const Slot extends string, const Variants extends SlotRecipeVariants, const DefaultedName extends keyof Variants = never>(config: SlotRecipeConfig<Slot, Variants, DefaultedName>): SlotRecipe<Slot, SlotRecipeProps<Slot, Variants, DefaultedName>>;
 /** Creates a slot recipe that may compose others, as a library's helper does. */
 declare function defineComposedSlots<const Slot extends string, const Variants extends SlotRecipeVariants, const DefaultedName extends keyof ComposedVariants<Composed, Variants> = never, const Composed extends readonly ComposableKindSlotRecipe<string>[] = readonly []>(config: SlotRecipeConfig<Slot, Variants, DefaultedName, Composed>): ReturnType<typeof sva<Slot, Variants, DefaultedName, Composed>>;
-export { define, defineComposed, defineComposedSlots, defineSlots };
+/** Adds a footer to any slot recipe, as a library's own helper does. */
+declare function withFooter<const Base extends ComposableKindSlotRecipe<string>>(base: Base): ReturnType<typeof sva<"footer", {
+    readonly dense: {
+        readonly true: {
+            readonly footer: "pt-2";
+        };
+    };
+}, never, readonly [Base]>>;
+export { define, defineComposed, defineComposedSlots, defineSlots, withFooter };

api/consumers/class-recipe/index.d.ts

@@ -50,7 +50,7 @@ declare const button: ((props: {
 type ButtonVariants = VariantsOf<typeof button>;
 type ButtonProps = PropsOf<typeof button>;
 declare const card: NoInfer<((props: {
-    readonly classNames?: Readonly<Partial<Record<"root" | "title", string | undefined>>> | undefined;
+    readonly classNames?: import("@lynstack/class-recipe").SlotClasses<"root" | "title"> | undefined;
     readonly size: "md";
 }) => Readonly<Record<"root" | "title", string>>) & {
     readonly variantKeys: readonly "size"[];
@@ -92,7 +92,7 @@ declare const pill: ((props: {
     }, never, string, undefined> | undefined;
 };
 declare const field: NoInfer<((props?: {
-    readonly classNames?: Readonly<Partial<Record<"input" | "label", string | undefined>>> | undefined;
+    readonly classNames?: import("@lynstack/class-recipe").SlotClasses<"input" | "label"> | undefined;
     readonly invalid?: import("@lynstack/class-recipe").VariantOption<{
         readonly true: {
             readonly input: "border-red-600";
@@ -170,7 +170,7 @@ declare const iconButton: ((props: {
     }, "size", string, undefined> | undefined;
 };
 declare const select: NoInfer<((props?: {
-    readonly classNames?: Readonly<Partial<Record<"input" | "label" | "trigger", string | undefined>>> | undefined;
+    readonly classNames?: import("@lynstack/class-recipe").SlotClasses<"input" | "label" | "trigger"> | undefined;
     readonly invalid?: import("@lynstack/class-recipe").VariantOption<{
         readonly true: {
             readonly input: "border-red-600";
@@ -259,12 +259,12 @@ declare const compactButton: ((props: {
 };
 declare const compactButtonClassName: string;
 declare const alert: import("@lynstack/class-recipe").SlotRecipe<"root" | "title", {
-    readonly classNames?: Readonly<Partial<Record<"root" | "title", string | undefined>>> | undefined;
+    readonly classNames?: import("@lynstack/class-recipe").SlotClasses<"root" | "title"> | undefined;
     readonly tone: "danger";
 }>;
 declare const alertClassNames: Readonly<Record<"root" | "title", string>>;
 declare const toggle: NoInfer<((props?: {
-    readonly classNames?: Readonly<Partial<Record<"icon" | "root", string | undefined>>> | undefined;
+    readonly classNames?: import("@lynstack/class-recipe").SlotClasses<"icon" | "root"> | undefined;
     readonly pressed?: import("@lynstack/class-recipe").VariantOption<{
         readonly true: {
             readonly icon: "opacity-100";
@@ -338,7 +338,7 @@ declare const cardOptions: {
 declare const buttonProps: ButtonProps;
 declare const cardProps: PropsOf<typeof card>;
 declare const panel: NoInfer<((props: {
-    readonly classNames?: Readonly<Partial<Record<"footer" | "root" | "title", string | undefined>>> | undefined;
+    readonly classNames?: import("@lynstack/class-recipe").SlotClasses<"footer" | "root" | "title"> | undefined;
     readonly size: import("@lynstack/class-recipe").VariantOption<{
         readonly md: {
             readonly root: "p-4";
@@ -376,5 +376,38 @@ declare const panel: NoInfer<((props: {
     }, never, string, readonly ("footer" | "root" | "title")[]> | undefined;
 }>;
 declare const panelClassNames: Readonly<Record<"root" | "title" | "footer", string>>;
-export { alert, alertClassNames, badge, badgeClassName, button, buttonDefaults, buttonProps, buttonKeys, buttonOptions, card, cardKeys, cardOptions, cardProps, className, compactButton, compactButtonClassName, field, iconButton, iconClassName, merged, panel, panelClassNames, pill, select, selectClassNames, toggle, toggleClassNames, toggleRoot, };
+declare const footedCard: NoInfer<((props: {
+    readonly classNames?: import("@lynstack/class-recipe").SlotClasses<"footer" | "root" | "title"> | undefined;
+    readonly dense?: import("@lynstack/class-recipe").VariantOption<{
+        readonly true: {
+            readonly footer: "pt-2";
+        };
+    }> | undefined;
+    readonly size: "md";
+}) => Readonly<Record<"footer" | "root" | "title", string>>) & {
+    readonly variantKeys: readonly ("dense" | "size")[];
+    readonly variantOptions: {
+        readonly dense: readonly ("false" | "true")[];
+        readonly size: readonly "md"[];
+    };
+    readonly defaultVariants: {
+        readonly dense: "false" | "true";
+    };
+} & {
+    readonly "~composition"?: import("@lynstack/class-recipe").RecipeComposition<{
+        readonly dense: {
+            readonly true: {
+                readonly footer: "pt-2";
+            };
+        };
+        readonly size: {
+            readonly md: {
+                readonly root: "p-4";
+                readonly title: "text-base";
+            };
+        };
+    }, never, string, readonly ("footer" | "root" | "title")[]> | undefined;
+}>;
+declare const footedCardClasses: Readonly<Record<"root" | "title" | "footer", string>>;
+export { alert, alertClassNames, badge, badgeClassName, button, buttonDefaults, buttonKeys, buttonOptions, buttonProps, card, cardKeys, cardOptions, cardProps, className, compactButton, compactButtonClassName, field, footedCard, footedCardClasses, iconButton, iconClassName, merged, panel, panelClassNames, pill, select, selectClassNames, toggle, toggleClassNames, toggleRoot, };
 export type { ButtonProps, ButtonVariants };

api/consumers/class-recipe/look.d.ts

@@ -1,6 +1,6 @@
 import type { VariantsOf } from "@lynstack/class-recipe";
 declare const look: NoInfer<((props: {
-    readonly classNames?: Readonly<Partial<Record<"root", string | undefined>>> | undefined;
+    readonly classNames?: import("@lynstack/class-recipe").SlotClasses<"root"> | undefined;
     readonly size: import("@lynstack/class-recipe").VariantOption<{
         readonly md: {
             readonly root: "h-8";

consumers/class-recipe/define.ts

@@ -60,4 +60,23 @@ function defineComposedSlots<
   return sva(config);
 }
 
-export { define, defineComposed, defineComposedSlots, defineSlots };
+/** Adds a footer to any slot recipe, as a library's own helper does. */
+function withFooter<const Base extends ComposableKindSlotRecipe<string>>(
+  base: Base,
+): ReturnType<
+  typeof sva<
+    "footer",
+    { readonly dense: { readonly true: { readonly footer: "pt-2" } } },
+    never,
+    readonly [Base]
+  >
+> {
+  return sva({
+    base: { footer: "pt-4" },
+    composes: [base],
+    slots: ["footer"],
+    variants: { dense: { true: { footer: "pt-2" } } },
+  });
+}
+
+export { define, defineComposed, defineComposedSlots, defineSlots, withFooter };

consumers/class-recipe/index.ts

@@ -13,6 +13,7 @@ import {
   defineComposed,
   defineComposedSlots,
   defineSlots,
+  withFooter,
 } from "./define.js";
 import { look } from "./look.js";
 
@@ -124,16 +125,20 @@ const panel = defineComposedSlots({
 const panelClassNames: Readonly<Record<"root" | "title" | "footer", string>> =
   panel({ size: "sm" });
 
+const footedCard = withFooter(card);
+const footedCardClasses: Readonly<Record<"root" | "title" | "footer", string>> =
+  footedCard({ dense: true, size: "md" });
+
 export {
   alert,
   alertClassNames,
   badge,
   badgeClassName,
   button,
   buttonDefaults,
-  buttonProps,
   buttonKeys,
   buttonOptions,
+  buttonProps,
   card,
   cardKeys,
   cardOptions,
@@ -142,6 +147,8 @@ export {
   compactButton,
   compactButtonClassName,
   field,
+  footedCard,
+  footedCardClasses,
   iconButton,
   iconClassName,
   merged,

packages/class-recipe/.oxlintrc.json

@@ -2,6 +2,13 @@
   "$schema": "../../node_modules/oxlint/configuration_schema.json",
   "extends": ["../../.oxlintrc.json"],
   "overrides": [
+    {
+      // TypeScript relates an object to one mapped type over slots that
+      // are generic, as in a function generic over the slot recipe that a
+      // recipe composes, but not to a Record nested in Partial and Readonly.
+      "files": ["src/types.ts"],
+      "rules": { "typescript/consistent-indexed-object-style": "off" }
+    },
     {
       // Guarding each key halves the speed of objects and drops inherited
       // keys, which clsx keeps.

packages/class-recipe/CHANGELOG.md

@@ -6,6 +6,9 @@ tagged `class-recipe@<version>`.
 
 ## Unreleased
 
+- Declarations and error messages print the classes of each slot as
+  `SlotClasses<…>`, and a function generic over the slot recipe it
+  composes can name its own slots.
 - `cva` and `sva` warn, once, with `console.warn`, about a default, a
   compound variant, or classes that name a variant, an option, or a slot
   that the config does not declare, such as a misspelled name in a config