entasis 0.4.1 → 0.5.0

package/dist/utils/cva/cva.mcp.js

@@ -3,5 +3,5 @@ export const cvaDescription = `
 
 Import from \`entasis/cva\`.
 
-cva defines class variants and defaults. cx joins class values; compose composes variants. setComponentTheme and useComponentTheme connect component theme definitions to the Svelte theme context. VariantProps and InferComponentTheme derive the corresponding public types. Keep component CVA definitions beside their owner in a .theme.ts file.
+cva defines class variants and defaults. cx joins class values; compose composes variants. setComponentTheme and useComponentTheme connect component theme definitions to the Svelte theme context. A resolver takes an optional second argument, the shared variant values, and then returns every class slot already bound to them, so a template calls \`slots.root()\` instead of passing the same props to each slot. VariantProps and InferComponentTheme derive the corresponding public types. Keep component CVA definitions beside their owner in a .theme.ts file.
 `;

package/dist/utils/cva/index.d.ts

@@ -1,4 +1,4 @@
 export { cva, cx, compose } from './engine.js';
 export { setComponentTheme, useComponentTheme } from './theme.js';
-export type { ComponentVariant, InferComponentTheme } from './theme.js';
+export type { ComponentVariant, InferComponentTheme, SharedThemeProps, BoundTheme } from './theme.js';
 export type { VariantProps, ClassValue, ClassArray, ClassDictionary } from './types.js';

package/dist/utils/cva/theme.d.ts

@@ -27,13 +27,20 @@ export type InferComponentTheme<T extends ComponentTheme> = Partial<{
     override?: boolean;
 };
 export declare const setComponentTheme: <T extends ComponentTheme>(component: string) => (theme: InferComponentTheme<T>) => void;
+/** The resolver `useComponentTheme` returns: the theme's class slots, optionally pre-bound. */
+export type UseComponentTheme<T extends ComponentTheme> = {
+    /** With shared variant values: every class slot already carrying them (`slots.root()`). */
+    (theme: InferComponentTheme<T> | undefined, shared: SharedThemeProps<T>): BoundTheme<T>;
+    /** The resolved theme, one class function per slot. Last, so `ReturnType` reads this one. */
+    (theme?: InferComponentTheme<T>): T;
+};
 /**
  * Resolves a component's class slots through the same ladder `useComponentMotion` walks,
  * lowest first: the component's own theme, the `<Theme components>` registry, a
  * `set<Component>Theme` subtree, then the instance `theme` prop. Each rung layers on the
  * one below it — a subtree that restyles one slot must not drop the registry's others.
  */
-export declare const useComponentTheme: <T extends ComponentTheme>(component: string, defaultTheme: T) => ((theme?: InferComponentTheme<T>) => T);
+export declare const useComponentTheme: <T extends ComponentTheme>(component: string, defaultTheme: T) => UseComponentTheme<T>;
 /**
  * One component's entry in the `<Theme components>` registry: the same object a
  * `set<Component>Theme` call takes — class slots plus the reserved `motion` slot.
@@ -51,4 +58,32 @@ export type ComponentThemeOverride = {
 };
 /** App-wide component theme defaults, keyed by the component's theme context name. */
 export type ComponentThemeRegistry = Record<string, ComponentThemeOverride>;
+type SlotProps<S> = S extends (props?: infer P) => string ? NonNullable<P> : never;
+type KeysOfUnion<U> = U extends unknown ? keyof U : never;
+type ValueIn<U, K> = U extends unknown ? (K extends keyof U ? U[K] : never) : never;
+type ClassSlots<T> = {
+    [K in keyof T as T[K] extends (props?: never) => string ? K : never]: T[K];
+};
+type AnySlotProps<T> = SlotProps<ClassSlots<T>[keyof ClassSlots<T>]>;
+/** Every variant any class slot of the theme accepts, each valued as the union the slots take. */
+export type SharedThemeProps<T extends ComponentTheme> = {
+    [K in Exclude<KeysOfUnion<AnySlotProps<T>>, 'class' | 'className'>]?: ValueIn<AnySlotProps<T>, K>;
+};
+/** The theme's class slots, each already carrying the shared props. */
+export type BoundTheme<T extends ComponentTheme> = {
+    [K in keyof ClassSlots<T>]: (props?: SlotProps<ClassSlots<T>[K]>) => string;
+};
+/**
+ * The primitive behind a `use{Component}Theme(theme, shared)` resolver's second argument.
+ *
+ * Binds a component's variant values to every class slot at once, so a template reads
+ * `slots.root()` instead of threading the same props into each call. A slot can still add its
+ * own on top — `slots.panel({ placement: 'static' })`, `slots.root({ className })` — and a
+ * slot ignores any shared variant it does not declare, exactly as `cva` always has.
+ *
+ * Every slot now sees every prop, so a theme override keyed on a variant the component used
+ * to pass only to its root (`prefix: { color: { primary } }`) reaches the slot it names.
+ * Each slot still resolves and merges its own classes; what this removes is the threading.
+ */
+export declare const bindTheme: <T extends ComponentTheme>(theme: T, shared: SharedThemeProps<T>) => BoundTheme<T>;
 export {};

package/dist/utils/cva/theme.js

@@ -17,7 +17,7 @@ const pick = (o, props) => o && [
 ];
 // `<Theme components>` is the registry every subtree inherits. Read through the Theme
 // context key so this module stays free of Theme imports.
-const registryTheme = (component) => getContext('sveltaiTheme')
+const registryTheme = (component) => getContext('entasisTheme')
     ?.componentThemes?.[component];
 /**
  * Resolves a component's class slots through the same ladder `useComponentMotion` walks,
@@ -26,7 +26,7 @@ const registryTheme = (component) => getContext('sveltaiTheme')
  * one below it — a subtree that restyles one slot must not drop the registry's others.
  */
 export const useComponentTheme = (component, defaultTheme) => {
-    return (rawTheme) => {
+    const resolve = (rawTheme) => {
         const ctx = getContext(`${component}Theme`);
         const registry = registryTheme(component);
         const { override: localOverride, ...local } = rawTheme ?? {};
@@ -56,4 +56,27 @@ export const useComponentTheme = (component, defaultTheme) => {
         }
         return changed ? theme : defaultTheme;
     };
+    return ((rawTheme, shared) => shared ? bindTheme(resolve(rawTheme), shared) : resolve(rawTheme));
+};
+/**
+ * The primitive behind a `use{Component}Theme(theme, shared)` resolver's second argument.
+ *
+ * Binds a component's variant values to every class slot at once, so a template reads
+ * `slots.root()` instead of threading the same props into each call. A slot can still add its
+ * own on top — `slots.panel({ placement: 'static' })`, `slots.root({ className })` — and a
+ * slot ignores any shared variant it does not declare, exactly as `cva` always has.
+ *
+ * Every slot now sees every prop, so a theme override keyed on a variant the component used
+ * to pass only to its root (`prefix: { color: { primary } }`) reaches the slot it names.
+ * Each slot still resolves and merges its own classes; what this removes is the threading.
+ */
+export const bindTheme = (theme, shared) => {
+    const bound = {};
+    for (const slot in theme) {
+        if (slot === 'motion')
+            continue;
+        const resolve = theme[slot];
+        bound[slot] = (props) => resolve(props ? { ...shared, ...props } : shared);
+    }
+    return bound;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "entasis",
-	"version": "0.4.1",
+	"version": "0.5.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",