praxis-kit 2.0.2 → 3.1.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.
- package/dist/{chunk-ACAKUHH5.js → chunk-6RJN5B6L.js} +192 -175
- package/dist/codemod/index.d.ts +1 -20
- package/dist/codemod/index.js +668 -637
- package/dist/contract/index.d.ts +9 -9
- package/dist/contract/index.js +24 -13
- package/dist/eslint/index.js +16 -16
- package/dist/lit/index.d.ts +14 -14
- package/dist/lit/index.js +67 -56
- package/dist/{merge-refs-tA18zYP6.d.ts → merge-refs-CfAbwCKz.d.ts} +16 -14
- package/dist/preact/index.d.ts +16 -16
- package/dist/preact/index.js +63 -52
- package/dist/react/index.d.ts +8 -10
- package/dist/react/index.js +2 -6
- package/dist/react/legacy.d.ts +7 -7
- package/dist/react/legacy.js +3 -1
- package/dist/solid/index.d.ts +17 -17
- package/dist/solid/index.js +63 -52
- package/dist/svelte/index.d.ts +20 -20
- package/dist/svelte/index.js +60 -49
- package/dist/tailwind/index.js +23 -23
- package/dist/vite-plugin/index.d.ts +76 -50
- package/dist/vite-plugin/index.js +146 -41
- package/dist/vue/index.d.ts +16 -16
- package/dist/vue/index.js +63 -52
- package/dist/web/index.d.ts +14 -14
- package/dist/web/index.js +65 -54
- package/package.json +4 -4
package/dist/vue/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { computed, defineComponent as defineComponent2 } from "vue";
|
|
3
3
|
|
|
4
4
|
// ../shared/src/guards/children/component-id.ts
|
|
5
|
-
var COMPONENT_DEFAULT_TAG = /* @__PURE__ */ Symbol("praxis.component-default-tag");
|
|
5
|
+
var COMPONENT_DEFAULT_TAG = /* @__PURE__ */ Symbol.for("praxis.component-default-tag");
|
|
6
6
|
|
|
7
7
|
// ../../adapters/vue/src/apply-display-name.ts
|
|
8
8
|
function applyDisplayName(component, name) {
|
|
@@ -20,7 +20,12 @@ function applyFilter(props, filterProps, variantKeys) {
|
|
|
20
20
|
return out;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
//
|
|
23
|
+
// ../../lib/adapter-utils/src/define-component.ts
|
|
24
|
+
function defineContractComponent(options) {
|
|
25
|
+
return (factory) => factory(options);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// ../core/dist/chunk-KKSHJDE7.js
|
|
24
29
|
function makeResolveTag(defaultTag) {
|
|
25
30
|
return function tag(as) {
|
|
26
31
|
return as ?? defaultTag;
|
|
@@ -89,7 +94,7 @@ function resolveFactoryOptions(options = {}) {
|
|
|
89
94
|
...whenDefined("defaultProps", options.defaults),
|
|
90
95
|
...whenDefined("baseClassName", styling?.base),
|
|
91
96
|
...whenDefined("tagMap", styling?.tags),
|
|
92
|
-
...whenDefined("
|
|
97
|
+
...whenDefined("recipeMap", styling?.presets),
|
|
93
98
|
...whenDefined("variants", styling?.variants),
|
|
94
99
|
...whenDefined("defaultVariants", styling?.defaults),
|
|
95
100
|
...whenDefined("compoundVariants", styling?.compounds),
|
|
@@ -130,10 +135,10 @@ function validateFactoryOptions(resolved) {
|
|
|
130
135
|
}
|
|
131
136
|
}
|
|
132
137
|
};
|
|
133
|
-
const {
|
|
134
|
-
if (
|
|
135
|
-
for (const
|
|
136
|
-
checkSelection(`preset "${
|
|
138
|
+
const { recipeMap } = resolved;
|
|
139
|
+
if (recipeMap) {
|
|
140
|
+
for (const recipeKey in recipeMap) {
|
|
141
|
+
checkSelection(`preset "${recipeKey}"`, recipeMap[recipeKey]);
|
|
137
142
|
}
|
|
138
143
|
}
|
|
139
144
|
if (resolved.defaultVariants) checkSelection("defaults", resolved.defaultVariants);
|
|
@@ -169,12 +174,12 @@ function report2(strict, message) {
|
|
|
169
174
|
function label(name) {
|
|
170
175
|
return name ? `[${name}]` : "[createContractComponent]";
|
|
171
176
|
}
|
|
172
|
-
function validateRenderProps(options, props,
|
|
173
|
-
const { strict,
|
|
177
|
+
function validateRenderProps(options, props, recipeKey) {
|
|
178
|
+
const { strict, recipeMap, variants, displayName } = options;
|
|
174
179
|
if (!strict) return;
|
|
175
180
|
const tag = label(displayName);
|
|
176
|
-
if (
|
|
177
|
-
report2(strict, `${tag} Unknown
|
|
181
|
+
if (recipeKey !== void 0 && (!recipeMap || !Object.hasOwn(recipeMap, recipeKey))) {
|
|
182
|
+
report2(strict, `${tag} Unknown recipeKey "${recipeKey}" \u2014 no preset with that name exists.`);
|
|
178
183
|
}
|
|
179
184
|
if (variants) {
|
|
180
185
|
for (const key in variants) {
|
|
@@ -212,8 +217,8 @@ function assertPluginShape(result) {
|
|
|
212
217
|
}
|
|
213
218
|
function guardPipeline(pipeline) {
|
|
214
219
|
if (process.env.NODE_ENV === "production") return pipeline;
|
|
215
|
-
return function guardedPipeline(tag, props, className,
|
|
216
|
-
const result = pipeline(tag, props, className,
|
|
220
|
+
return function guardedPipeline(tag, props, className, recipe) {
|
|
221
|
+
const result = pipeline(tag, props, className, recipe);
|
|
217
222
|
if (typeof result !== "string")
|
|
218
223
|
panic(`[praxis-kit] Plugin pipeline must return a string. Got: ${describe(result)}.`);
|
|
219
224
|
return result;
|
|
@@ -238,11 +243,11 @@ function createRuntimeMethods(resolved, classPipeline, engine) {
|
|
|
238
243
|
resolveProps(props) {
|
|
239
244
|
return mergeProps(resolved.defaultProps, props);
|
|
240
245
|
},
|
|
241
|
-
resolveClasses(tag, props, className,
|
|
246
|
+
resolveClasses(tag, props, className, recipe) {
|
|
242
247
|
if (process.env.NODE_ENV !== "production") {
|
|
243
|
-
validateRenderProps(resolved, props,
|
|
248
|
+
validateRenderProps(resolved, props, recipe);
|
|
244
249
|
}
|
|
245
|
-
return classPipeline(tag, props, className,
|
|
250
|
+
return classPipeline(tag, props, className, recipe);
|
|
246
251
|
},
|
|
247
252
|
resolveAria(tag, props) {
|
|
248
253
|
if (!engine) return { props };
|
|
@@ -591,7 +596,7 @@ function isKnownAriaRole(value) {
|
|
|
591
596
|
return isString(value) && KNOWN_ARIA_ROLES_SET.has(value);
|
|
592
597
|
}
|
|
593
598
|
|
|
594
|
-
// ../core/dist/chunk-
|
|
599
|
+
// ../core/dist/chunk-2NJ5XLOA.js
|
|
595
600
|
var IMPLICIT_ROLE_RECORD2 = {
|
|
596
601
|
article: "article",
|
|
597
602
|
aside: "complementary",
|
|
@@ -620,26 +625,37 @@ function getImplicitRole(tag) {
|
|
|
620
625
|
if (tag in IMPLICIT_ROLE_RECORD2) return IMPLICIT_ROLE_RECORD2[tag];
|
|
621
626
|
return void 0;
|
|
622
627
|
}
|
|
623
|
-
var COMPONENT_DEFAULT_TAG2 = /* @__PURE__ */ Symbol("praxis.component-default-tag");
|
|
624
|
-
function
|
|
628
|
+
var COMPONENT_DEFAULT_TAG2 = /* @__PURE__ */ Symbol.for("praxis.component-default-tag");
|
|
629
|
+
function getAsProp(child) {
|
|
630
|
+
if (!isObject(child) || !("props" in child)) return void 0;
|
|
631
|
+
const props = child.props;
|
|
632
|
+
if (!isObject(props)) return void 0;
|
|
633
|
+
const as = props.as;
|
|
634
|
+
return isString(as) && as !== "" ? as : void 0;
|
|
635
|
+
}
|
|
636
|
+
function getTag(child) {
|
|
625
637
|
if (!isObject(child) || !("type" in child)) return void 0;
|
|
626
638
|
const t = child.type;
|
|
627
639
|
if (isString(t)) return t;
|
|
628
|
-
if (
|
|
640
|
+
if (typeof t === "function" || isObject(t)) {
|
|
629
641
|
const defaultTag = t[COMPONENT_DEFAULT_TAG2];
|
|
630
642
|
if (!isString(defaultTag)) return void 0;
|
|
631
|
-
|
|
632
|
-
const as = isObject(props) && "as" in props ? props.as : void 0;
|
|
633
|
-
return isString(as) ? as : defaultTag;
|
|
643
|
+
return getAsProp(child) ?? defaultTag;
|
|
634
644
|
}
|
|
635
645
|
return void 0;
|
|
636
646
|
}
|
|
637
|
-
function isTag(...
|
|
647
|
+
function isTag(...args) {
|
|
648
|
+
if (isString(args[0])) {
|
|
649
|
+
const set2 = new Set(args);
|
|
650
|
+
return (child2) => {
|
|
651
|
+
const tag2 = getTag(child2);
|
|
652
|
+
return tag2 !== void 0 && set2.has(tag2);
|
|
653
|
+
};
|
|
654
|
+
}
|
|
655
|
+
const [child, ...tags] = args;
|
|
638
656
|
const set = new Set(tags);
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
return tag !== void 0 && set.has(tag);
|
|
642
|
-
};
|
|
657
|
+
const tag = getTag(child);
|
|
658
|
+
return tag !== void 0 && set.has(tag);
|
|
643
659
|
}
|
|
644
660
|
var pendingAsyncWarns2 = /* @__PURE__ */ new Set();
|
|
645
661
|
var asyncWarnScheduled2 = false;
|
|
@@ -1526,7 +1542,7 @@ function getHtmlPropNormalizers(tag) {
|
|
|
1526
1542
|
return typeof tag === "string" ? HTML_FORM_NORMALIZERS.get(tag) : void 0;
|
|
1527
1543
|
}
|
|
1528
1544
|
|
|
1529
|
-
// ../core/dist/chunk-
|
|
1545
|
+
// ../core/dist/chunk-3T4EM5FG.js
|
|
1530
1546
|
var falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
|
|
1531
1547
|
var cx = clsx;
|
|
1532
1548
|
var cva = (base, config) => (props) => {
|
|
@@ -1603,18 +1619,18 @@ var StaticClassResolver = class {
|
|
|
1603
1619
|
};
|
|
1604
1620
|
var VariantClassResolver = class _VariantClassResolver {
|
|
1605
1621
|
#cvaFn;
|
|
1606
|
-
#
|
|
1622
|
+
#recipeMap;
|
|
1607
1623
|
#variantKeys;
|
|
1608
1624
|
#precomputedClasses;
|
|
1609
1625
|
#cache = /* @__PURE__ */ new Map();
|
|
1610
|
-
constructor(cvaFn,
|
|
1626
|
+
constructor(cvaFn, recipeMap, variantKeys, precomputedClasses) {
|
|
1611
1627
|
this.#cvaFn = cvaFn ?? null;
|
|
1612
|
-
this.#
|
|
1628
|
+
this.#recipeMap = Object.freeze(recipeMap ?? {});
|
|
1613
1629
|
this.#variantKeys = variantKeys ?? null;
|
|
1614
1630
|
this.#precomputedClasses = precomputedClasses ?? null;
|
|
1615
1631
|
}
|
|
1616
|
-
resolve({ props,
|
|
1617
|
-
const normalizedKey =
|
|
1632
|
+
resolve({ props, recipe }) {
|
|
1633
|
+
const normalizedKey = recipe ?? "__none__";
|
|
1618
1634
|
const cacheKey = this.#createCacheKey(props, normalizedKey);
|
|
1619
1635
|
if (this.#precomputedClasses !== null) {
|
|
1620
1636
|
const precomputed = this.#precomputedClasses[cacheKey];
|
|
@@ -1626,7 +1642,7 @@ var VariantClassResolver = class _VariantClassResolver {
|
|
|
1626
1642
|
this.#cache.set(cacheKey, cached);
|
|
1627
1643
|
return cached;
|
|
1628
1644
|
}
|
|
1629
|
-
const result = this.#compute(props,
|
|
1645
|
+
const result = this.#compute(props, recipe);
|
|
1630
1646
|
this.#cache.set(cacheKey, result);
|
|
1631
1647
|
if (this.#cache.size > 1e3) {
|
|
1632
1648
|
const lru = this.#cache.keys().next().value;
|
|
@@ -1634,10 +1650,10 @@ var VariantClassResolver = class _VariantClassResolver {
|
|
|
1634
1650
|
}
|
|
1635
1651
|
return result;
|
|
1636
1652
|
}
|
|
1637
|
-
#compute(props,
|
|
1653
|
+
#compute(props, recipe) {
|
|
1638
1654
|
if (!this.#cvaFn) return "";
|
|
1639
|
-
if (!
|
|
1640
|
-
const preset = this.#
|
|
1655
|
+
if (!recipe) return this.#cvaFn(props);
|
|
1656
|
+
const preset = this.#recipeMap[recipe];
|
|
1641
1657
|
if (!preset) return this.#cvaFn(props);
|
|
1642
1658
|
return this.#cvaFn({ ...preset, ...props });
|
|
1643
1659
|
}
|
|
@@ -1645,15 +1661,15 @@ var VariantClassResolver = class _VariantClassResolver {
|
|
|
1645
1661
|
// props (className, id, etc.) produce identical CVA output and must not fragment the cache.
|
|
1646
1662
|
// Iterating #variantKeys directly (fixed Set insertion order) avoids Object.keys + filter + sort.
|
|
1647
1663
|
// String is built incrementally to avoid a parts[] array allocation on every render.
|
|
1648
|
-
#createCacheKey(props,
|
|
1664
|
+
#createCacheKey(props, recipe) {
|
|
1649
1665
|
if (this.#variantKeys !== null) {
|
|
1650
|
-
let key2 =
|
|
1666
|
+
let key2 = recipe;
|
|
1651
1667
|
for (const k of this.#variantKeys) {
|
|
1652
1668
|
if (k in props) key2 += `|${k}:${_VariantClassResolver.#serializeValue(props[k])}`;
|
|
1653
1669
|
}
|
|
1654
1670
|
return key2;
|
|
1655
1671
|
}
|
|
1656
|
-
let key =
|
|
1672
|
+
let key = recipe;
|
|
1657
1673
|
for (const k of Object.keys(props).sort()) {
|
|
1658
1674
|
key += `|${k}:${_VariantClassResolver.#serializeValue(props[k])}`;
|
|
1659
1675
|
}
|
|
@@ -1678,13 +1694,13 @@ function createClassPipeline(resolved) {
|
|
|
1678
1694
|
const staticResolver = new StaticClassResolver(baseClass, resolved.tagMap);
|
|
1679
1695
|
const variantResolver = new VariantClassResolver(
|
|
1680
1696
|
cvaFn,
|
|
1681
|
-
resolved.
|
|
1697
|
+
resolved.recipeMap,
|
|
1682
1698
|
variantKeys,
|
|
1683
1699
|
resolved.precomputedClasses
|
|
1684
1700
|
);
|
|
1685
|
-
return function resolveClasses(tag, props, className,
|
|
1686
|
-
const staticClasses = staticResolver.resolve(tag,
|
|
1687
|
-
const variantClasses = variantResolver.resolve({ props,
|
|
1701
|
+
return function resolveClasses(tag, props, className, recipe) {
|
|
1702
|
+
const staticClasses = staticResolver.resolve(tag, recipe !== void 0);
|
|
1703
|
+
const variantClasses = variantResolver.resolve({ props, recipe });
|
|
1688
1704
|
if (!className)
|
|
1689
1705
|
return staticClasses && variantClasses ? `${staticClasses} ${variantClasses}` : staticClasses || variantClasses;
|
|
1690
1706
|
return cn(staticClasses, variantClasses, className);
|
|
@@ -1850,7 +1866,7 @@ function buildDirectives(as, asChild) {
|
|
|
1850
1866
|
};
|
|
1851
1867
|
}
|
|
1852
1868
|
function resolveRenderState(runtime, attrs, filterProps) {
|
|
1853
|
-
const { as, asChild, class: className,
|
|
1869
|
+
const { as, asChild, class: className, recipe, ...rest } = attrs;
|
|
1854
1870
|
const tag = runtime.resolveTag(as);
|
|
1855
1871
|
const mergedProps = runtime.resolveProps(rest);
|
|
1856
1872
|
const baseProps = runtime.options.normalizeFn ? runtime.options.normalizeFn(mergedProps) : mergedProps;
|
|
@@ -1860,7 +1876,7 @@ function resolveRenderState(runtime, attrs, filterProps) {
|
|
|
1860
1876
|
tag,
|
|
1861
1877
|
normalizedProps,
|
|
1862
1878
|
typeof className === "string" ? className : void 0,
|
|
1863
|
-
typeof
|
|
1879
|
+
typeof recipe === "string" ? recipe : void 0
|
|
1864
1880
|
);
|
|
1865
1881
|
const filteredProps = applyFilter(normalizedProps, filterProps, runtime.options.variantKeys);
|
|
1866
1882
|
return {
|
|
@@ -1959,11 +1975,6 @@ function createContractComponent(options) {
|
|
|
1959
1975
|
}
|
|
1960
1976
|
return Component;
|
|
1961
1977
|
}
|
|
1962
|
-
|
|
1963
|
-
// ../../adapters/vue/src/define-contract-component.ts
|
|
1964
|
-
function defineContractComponent(options) {
|
|
1965
|
-
return (factory) => factory(options);
|
|
1966
|
-
}
|
|
1967
1978
|
export {
|
|
1968
1979
|
Slottable,
|
|
1969
1980
|
createContractComponent,
|
package/dist/web/index.d.ts
CHANGED
|
@@ -111,25 +111,25 @@ type VariantSelection<V extends VariantMap> = {
|
|
|
111
111
|
* Presets are named bundles of variant props that callers activate by key,
|
|
112
112
|
* avoiding the need to repeat variant combinations at each call site.
|
|
113
113
|
*/
|
|
114
|
-
type
|
|
114
|
+
type RecipeMap<V extends VariantMap = VariantMap> = Readonly<Record<string, VariantSelection<V>>>;
|
|
115
115
|
|
|
116
|
-
type
|
|
116
|
+
type RecipeTarget<TVariants extends VariantMap = VariantMap> = VariantSelection<TVariants>;
|
|
117
117
|
|
|
118
118
|
interface BaseClassOptions {
|
|
119
119
|
baseClassName?: ClassName;
|
|
120
120
|
}
|
|
121
121
|
|
|
122
|
-
type ClassPipelineFn = (tag: unknown, props: AnyRecord, className?: ClassName,
|
|
122
|
+
type ClassPipelineFn = (tag: unknown, props: AnyRecord, className?: ClassName, recipe?: string) => string;
|
|
123
123
|
|
|
124
|
-
interface
|
|
125
|
-
|
|
124
|
+
interface RecipeOptions<TVariants extends VariantMap = VariantMap> {
|
|
125
|
+
recipeMap?: Record<string, RecipeTarget<TVariants>>;
|
|
126
126
|
}
|
|
127
127
|
|
|
128
128
|
interface TagMapOptions {
|
|
129
129
|
tagMap?: TagMap;
|
|
130
130
|
}
|
|
131
131
|
|
|
132
|
-
type CompositionOptions<TVariants extends VariantMap = VariantMap> = Simplify<TagMapOptions &
|
|
132
|
+
type CompositionOptions<TVariants extends VariantMap = VariantMap> = Simplify<TagMapOptions & RecipeOptions<TVariants>>;
|
|
133
133
|
|
|
134
134
|
type CVASystemOptions<TVariants extends VariantMap = VariantMap> = Simplify<CVAVariants<TVariants> & CVADefaults<TVariants> & CVACompounds<TVariants>>;
|
|
135
135
|
|
|
@@ -204,7 +204,7 @@ type EnforcementOptions<TAllowed extends ElementType = ElementType> = {
|
|
|
204
204
|
readonly allowedAs?: readonly TAllowed[];
|
|
205
205
|
};
|
|
206
206
|
|
|
207
|
-
type StylingOptions<V extends Readonly<VariantMap> = Readonly<EmptyRecord>, TPreset extends
|
|
207
|
+
type StylingOptions<V extends Readonly<VariantMap> = Readonly<EmptyRecord>, TPreset extends RecipeMap<V> = Readonly<EmptyRecord>, TPluginProps extends AnyRecord = EmptyRecord> = {
|
|
208
208
|
readonly base?: ClassName;
|
|
209
209
|
readonly variants?: V;
|
|
210
210
|
readonly defaults?: Partial<DefaultVariants<V>>;
|
|
@@ -218,8 +218,8 @@ type StylingOptions<V extends Readonly<VariantMap> = Readonly<EmptyRecord>, TPre
|
|
|
218
218
|
type NormalizeFn<Props extends AnyRecord = AnyRecord> = {
|
|
219
219
|
normalize(props: Readonly<Props & IntrinsicProps>): Props & IntrinsicProps;
|
|
220
220
|
}['normalize'];
|
|
221
|
-
type AnyFactoryOptions = FactoryOptions<ElementType, AnyRecord, VariantMap,
|
|
222
|
-
type FactoryOptions<TDefault extends ElementType = ElementType, Props extends AnyRecord = EmptyRecord, V extends Readonly<VariantMap> = Readonly<EmptyRecord>, TPreset extends
|
|
221
|
+
type AnyFactoryOptions = FactoryOptions<ElementType, AnyRecord, VariantMap, RecipeMap<VariantMap>, AnyRecord>;
|
|
222
|
+
type FactoryOptions<TDefault extends ElementType = ElementType, Props extends AnyRecord = EmptyRecord, V extends Readonly<VariantMap> = Readonly<EmptyRecord>, TPreset extends RecipeMap<V> = Readonly<EmptyRecord>, TPluginProps extends AnyRecord = EmptyRecord, TAllowed extends ElementType = ElementType> = {
|
|
223
223
|
readonly tag?: TDefault;
|
|
224
224
|
readonly name?: string;
|
|
225
225
|
readonly defaults?: Partial<NoInfer<Props>>;
|
|
@@ -230,13 +230,15 @@ type FactoryOptions<TDefault extends ElementType = ElementType, Props extends An
|
|
|
230
230
|
|
|
231
231
|
type FilterPredicate = (key: string, variantKeys: ReadonlySet<string>) => boolean;
|
|
232
232
|
|
|
233
|
+
declare function defineContractComponent<O extends FactoryOptions>(options: O): <R>(factory: (options: O) => R) => R;
|
|
234
|
+
|
|
233
235
|
/**
|
|
234
236
|
* Options accepted by createContractComponent in the web adapter.
|
|
235
237
|
*
|
|
236
238
|
* Identical shape to LitFactoryOptions — a plain HTMLElement subclass with
|
|
237
239
|
* no framework dependency. Light DOM only; Shadow DOM is out of scope.
|
|
238
240
|
*/
|
|
239
|
-
type WebFactoryOptions<TDefault extends ElementType = ElementType, TProps extends AnyRecord = EmptyRecord, TVariants extends Readonly<VariantMap> = Readonly<EmptyRecord>, TPreset extends
|
|
241
|
+
type WebFactoryOptions<TDefault extends ElementType = ElementType, TProps extends AnyRecord = EmptyRecord, TVariants extends Readonly<VariantMap> = Readonly<EmptyRecord>, TPreset extends RecipeMap<TVariants> = Readonly<EmptyRecord>, TPluginProps extends AnyRecord = EmptyRecord> = FactoryOptions<TDefault, TProps, TVariants, TPreset, TPluginProps> & {
|
|
240
242
|
readonly filterProps?: FilterPredicate;
|
|
241
243
|
};
|
|
242
244
|
|
|
@@ -250,7 +252,7 @@ type UnknownProps = Record<string, unknown>;
|
|
|
250
252
|
type WebContractComponent<TVariants extends Readonly<VariantMap> = Readonly<EmptyRecord>> = {
|
|
251
253
|
new (): HTMLElement & {
|
|
252
254
|
as: string | undefined;
|
|
253
|
-
|
|
255
|
+
recipe: string | undefined;
|
|
254
256
|
praxisClass: string | undefined;
|
|
255
257
|
/** Re-runs the pipeline — call after setting non-reactive attributes (aria-*, role, data-*). */
|
|
256
258
|
update(): void;
|
|
@@ -288,9 +290,7 @@ type WebContractComponent<TVariants extends Readonly<VariantMap> = Readonly<Empt
|
|
|
288
290
|
* For non-reactive attributes (`aria-*`, `role`, `data-*`) call `element.update()`
|
|
289
291
|
* after setting them to trigger an explicit pipeline re-run.
|
|
290
292
|
*/
|
|
291
|
-
declare function createContractComponent<TDefault extends ElementType, TProps extends UnknownProps = EmptyRecord, TVariants extends Readonly<VariantMap> = Readonly<EmptyRecord>, TPreset extends
|
|
292
|
-
|
|
293
|
-
declare function defineContractComponent<O extends FactoryOptions>(options: O): <R>(factory: (options: O) => R) => R;
|
|
293
|
+
declare function createContractComponent<TDefault extends ElementType, TProps extends UnknownProps = EmptyRecord, TVariants extends Readonly<VariantMap> = Readonly<EmptyRecord>, TPreset extends RecipeMap<TVariants> = Readonly<EmptyRecord>, TPluginProps extends AnyRecord = EmptyRecord>(options: WebFactoryOptions<TDefault, TProps, TVariants, TPreset, TPluginProps>): WebContractComponent<TVariants>;
|
|
294
294
|
|
|
295
295
|
/**
|
|
296
296
|
* Renders a praxis-kit web component to an HTML string without requiring a DOM.
|
package/dist/web/index.js
CHANGED
|
@@ -9,7 +9,12 @@ function applyFilter(props, filterProps, variantKeys) {
|
|
|
9
9
|
return out;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
//
|
|
12
|
+
// ../../lib/adapter-utils/src/define-component.ts
|
|
13
|
+
function defineContractComponent(options) {
|
|
14
|
+
return (factory) => factory(options);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// ../core/dist/chunk-KKSHJDE7.js
|
|
13
18
|
function makeResolveTag(defaultTag) {
|
|
14
19
|
return function tag(as) {
|
|
15
20
|
return as ?? defaultTag;
|
|
@@ -78,7 +83,7 @@ function resolveFactoryOptions(options = {}) {
|
|
|
78
83
|
...whenDefined("defaultProps", options.defaults),
|
|
79
84
|
...whenDefined("baseClassName", styling?.base),
|
|
80
85
|
...whenDefined("tagMap", styling?.tags),
|
|
81
|
-
...whenDefined("
|
|
86
|
+
...whenDefined("recipeMap", styling?.presets),
|
|
82
87
|
...whenDefined("variants", styling?.variants),
|
|
83
88
|
...whenDefined("defaultVariants", styling?.defaults),
|
|
84
89
|
...whenDefined("compoundVariants", styling?.compounds),
|
|
@@ -119,10 +124,10 @@ function validateFactoryOptions(resolved) {
|
|
|
119
124
|
}
|
|
120
125
|
}
|
|
121
126
|
};
|
|
122
|
-
const {
|
|
123
|
-
if (
|
|
124
|
-
for (const
|
|
125
|
-
checkSelection(`preset "${
|
|
127
|
+
const { recipeMap } = resolved;
|
|
128
|
+
if (recipeMap) {
|
|
129
|
+
for (const recipeKey in recipeMap) {
|
|
130
|
+
checkSelection(`preset "${recipeKey}"`, recipeMap[recipeKey]);
|
|
126
131
|
}
|
|
127
132
|
}
|
|
128
133
|
if (resolved.defaultVariants) checkSelection("defaults", resolved.defaultVariants);
|
|
@@ -158,12 +163,12 @@ function report2(strict, message) {
|
|
|
158
163
|
function label(name) {
|
|
159
164
|
return name ? `[${name}]` : "[createContractComponent]";
|
|
160
165
|
}
|
|
161
|
-
function validateRenderProps(options, props,
|
|
162
|
-
const { strict,
|
|
166
|
+
function validateRenderProps(options, props, recipeKey) {
|
|
167
|
+
const { strict, recipeMap, variants, displayName } = options;
|
|
163
168
|
if (!strict) return;
|
|
164
169
|
const tag = label(displayName);
|
|
165
|
-
if (
|
|
166
|
-
report2(strict, `${tag} Unknown
|
|
170
|
+
if (recipeKey !== void 0 && (!recipeMap || !Object.hasOwn(recipeMap, recipeKey))) {
|
|
171
|
+
report2(strict, `${tag} Unknown recipeKey "${recipeKey}" \u2014 no preset with that name exists.`);
|
|
167
172
|
}
|
|
168
173
|
if (variants) {
|
|
169
174
|
for (const key in variants) {
|
|
@@ -201,8 +206,8 @@ function assertPluginShape(result) {
|
|
|
201
206
|
}
|
|
202
207
|
function guardPipeline(pipeline) {
|
|
203
208
|
if (process.env.NODE_ENV === "production") return pipeline;
|
|
204
|
-
return function guardedPipeline(tag, props, className,
|
|
205
|
-
const result = pipeline(tag, props, className,
|
|
209
|
+
return function guardedPipeline(tag, props, className, recipe) {
|
|
210
|
+
const result = pipeline(tag, props, className, recipe);
|
|
206
211
|
if (typeof result !== "string")
|
|
207
212
|
panic(`[praxis-kit] Plugin pipeline must return a string. Got: ${describe(result)}.`);
|
|
208
213
|
return result;
|
|
@@ -227,11 +232,11 @@ function createRuntimeMethods(resolved, classPipeline, engine) {
|
|
|
227
232
|
resolveProps(props) {
|
|
228
233
|
return mergeProps(resolved.defaultProps, props);
|
|
229
234
|
},
|
|
230
|
-
resolveClasses(tag, props, className,
|
|
235
|
+
resolveClasses(tag, props, className, recipe) {
|
|
231
236
|
if (process.env.NODE_ENV !== "production") {
|
|
232
|
-
validateRenderProps(resolved, props,
|
|
237
|
+
validateRenderProps(resolved, props, recipe);
|
|
233
238
|
}
|
|
234
|
-
return classPipeline(tag, props, className,
|
|
239
|
+
return classPipeline(tag, props, className, recipe);
|
|
235
240
|
},
|
|
236
241
|
resolveAria(tag, props) {
|
|
237
242
|
if (!engine) return { props };
|
|
@@ -577,7 +582,7 @@ function isStandaloneTag(tag) {
|
|
|
577
582
|
return STANDALONE_ROLES_SET.has(IMPLICIT_ROLE_RECORD[tag]);
|
|
578
583
|
}
|
|
579
584
|
|
|
580
|
-
// ../core/dist/chunk-
|
|
585
|
+
// ../core/dist/chunk-2NJ5XLOA.js
|
|
581
586
|
var IMPLICIT_ROLE_RECORD2 = {
|
|
582
587
|
article: "article",
|
|
583
588
|
aside: "complementary",
|
|
@@ -606,26 +611,37 @@ function getImplicitRole(tag) {
|
|
|
606
611
|
if (tag in IMPLICIT_ROLE_RECORD2) return IMPLICIT_ROLE_RECORD2[tag];
|
|
607
612
|
return void 0;
|
|
608
613
|
}
|
|
609
|
-
var COMPONENT_DEFAULT_TAG = /* @__PURE__ */ Symbol("praxis.component-default-tag");
|
|
610
|
-
function
|
|
614
|
+
var COMPONENT_DEFAULT_TAG = /* @__PURE__ */ Symbol.for("praxis.component-default-tag");
|
|
615
|
+
function getAsProp(child) {
|
|
616
|
+
if (!isObject(child) || !("props" in child)) return void 0;
|
|
617
|
+
const props = child.props;
|
|
618
|
+
if (!isObject(props)) return void 0;
|
|
619
|
+
const as = props.as;
|
|
620
|
+
return isString(as) && as !== "" ? as : void 0;
|
|
621
|
+
}
|
|
622
|
+
function getTag(child) {
|
|
611
623
|
if (!isObject(child) || !("type" in child)) return void 0;
|
|
612
624
|
const t = child.type;
|
|
613
625
|
if (isString(t)) return t;
|
|
614
|
-
if (
|
|
626
|
+
if (typeof t === "function" || isObject(t)) {
|
|
615
627
|
const defaultTag = t[COMPONENT_DEFAULT_TAG];
|
|
616
628
|
if (!isString(defaultTag)) return void 0;
|
|
617
|
-
|
|
618
|
-
const as = isObject(props) && "as" in props ? props.as : void 0;
|
|
619
|
-
return isString(as) ? as : defaultTag;
|
|
629
|
+
return getAsProp(child) ?? defaultTag;
|
|
620
630
|
}
|
|
621
631
|
return void 0;
|
|
622
632
|
}
|
|
623
|
-
function isTag(...
|
|
633
|
+
function isTag(...args) {
|
|
634
|
+
if (isString(args[0])) {
|
|
635
|
+
const set2 = new Set(args);
|
|
636
|
+
return (child2) => {
|
|
637
|
+
const tag2 = getTag(child2);
|
|
638
|
+
return tag2 !== void 0 && set2.has(tag2);
|
|
639
|
+
};
|
|
640
|
+
}
|
|
641
|
+
const [child, ...tags] = args;
|
|
624
642
|
const set = new Set(tags);
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
return tag !== void 0 && set.has(tag);
|
|
628
|
-
};
|
|
643
|
+
const tag = getTag(child);
|
|
644
|
+
return tag !== void 0 && set.has(tag);
|
|
629
645
|
}
|
|
630
646
|
var pendingAsyncWarns2 = /* @__PURE__ */ new Set();
|
|
631
647
|
var asyncWarnScheduled2 = false;
|
|
@@ -1512,7 +1528,7 @@ function getHtmlPropNormalizers(tag) {
|
|
|
1512
1528
|
return typeof tag === "string" ? HTML_FORM_NORMALIZERS.get(tag) : void 0;
|
|
1513
1529
|
}
|
|
1514
1530
|
|
|
1515
|
-
// ../core/dist/chunk-
|
|
1531
|
+
// ../core/dist/chunk-3T4EM5FG.js
|
|
1516
1532
|
var falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
|
|
1517
1533
|
var cx = clsx;
|
|
1518
1534
|
var cva = (base, config) => (props) => {
|
|
@@ -1589,18 +1605,18 @@ var StaticClassResolver = class {
|
|
|
1589
1605
|
};
|
|
1590
1606
|
var VariantClassResolver = class _VariantClassResolver {
|
|
1591
1607
|
#cvaFn;
|
|
1592
|
-
#
|
|
1608
|
+
#recipeMap;
|
|
1593
1609
|
#variantKeys;
|
|
1594
1610
|
#precomputedClasses;
|
|
1595
1611
|
#cache = /* @__PURE__ */ new Map();
|
|
1596
|
-
constructor(cvaFn,
|
|
1612
|
+
constructor(cvaFn, recipeMap, variantKeys, precomputedClasses) {
|
|
1597
1613
|
this.#cvaFn = cvaFn ?? null;
|
|
1598
|
-
this.#
|
|
1614
|
+
this.#recipeMap = Object.freeze(recipeMap ?? {});
|
|
1599
1615
|
this.#variantKeys = variantKeys ?? null;
|
|
1600
1616
|
this.#precomputedClasses = precomputedClasses ?? null;
|
|
1601
1617
|
}
|
|
1602
|
-
resolve({ props,
|
|
1603
|
-
const normalizedKey =
|
|
1618
|
+
resolve({ props, recipe }) {
|
|
1619
|
+
const normalizedKey = recipe ?? "__none__";
|
|
1604
1620
|
const cacheKey = this.#createCacheKey(props, normalizedKey);
|
|
1605
1621
|
if (this.#precomputedClasses !== null) {
|
|
1606
1622
|
const precomputed = this.#precomputedClasses[cacheKey];
|
|
@@ -1612,7 +1628,7 @@ var VariantClassResolver = class _VariantClassResolver {
|
|
|
1612
1628
|
this.#cache.set(cacheKey, cached);
|
|
1613
1629
|
return cached;
|
|
1614
1630
|
}
|
|
1615
|
-
const result = this.#compute(props,
|
|
1631
|
+
const result = this.#compute(props, recipe);
|
|
1616
1632
|
this.#cache.set(cacheKey, result);
|
|
1617
1633
|
if (this.#cache.size > 1e3) {
|
|
1618
1634
|
const lru = this.#cache.keys().next().value;
|
|
@@ -1620,10 +1636,10 @@ var VariantClassResolver = class _VariantClassResolver {
|
|
|
1620
1636
|
}
|
|
1621
1637
|
return result;
|
|
1622
1638
|
}
|
|
1623
|
-
#compute(props,
|
|
1639
|
+
#compute(props, recipe) {
|
|
1624
1640
|
if (!this.#cvaFn) return "";
|
|
1625
|
-
if (!
|
|
1626
|
-
const preset = this.#
|
|
1641
|
+
if (!recipe) return this.#cvaFn(props);
|
|
1642
|
+
const preset = this.#recipeMap[recipe];
|
|
1627
1643
|
if (!preset) return this.#cvaFn(props);
|
|
1628
1644
|
return this.#cvaFn({ ...preset, ...props });
|
|
1629
1645
|
}
|
|
@@ -1631,15 +1647,15 @@ var VariantClassResolver = class _VariantClassResolver {
|
|
|
1631
1647
|
// props (className, id, etc.) produce identical CVA output and must not fragment the cache.
|
|
1632
1648
|
// Iterating #variantKeys directly (fixed Set insertion order) avoids Object.keys + filter + sort.
|
|
1633
1649
|
// String is built incrementally to avoid a parts[] array allocation on every render.
|
|
1634
|
-
#createCacheKey(props,
|
|
1650
|
+
#createCacheKey(props, recipe) {
|
|
1635
1651
|
if (this.#variantKeys !== null) {
|
|
1636
|
-
let key2 =
|
|
1652
|
+
let key2 = recipe;
|
|
1637
1653
|
for (const k of this.#variantKeys) {
|
|
1638
1654
|
if (k in props) key2 += `|${k}:${_VariantClassResolver.#serializeValue(props[k])}`;
|
|
1639
1655
|
}
|
|
1640
1656
|
return key2;
|
|
1641
1657
|
}
|
|
1642
|
-
let key =
|
|
1658
|
+
let key = recipe;
|
|
1643
1659
|
for (const k of Object.keys(props).sort()) {
|
|
1644
1660
|
key += `|${k}:${_VariantClassResolver.#serializeValue(props[k])}`;
|
|
1645
1661
|
}
|
|
@@ -1664,13 +1680,13 @@ function createClassPipeline(resolved) {
|
|
|
1664
1680
|
const staticResolver = new StaticClassResolver(baseClass, resolved.tagMap);
|
|
1665
1681
|
const variantResolver = new VariantClassResolver(
|
|
1666
1682
|
cvaFn,
|
|
1667
|
-
resolved.
|
|
1683
|
+
resolved.recipeMap,
|
|
1668
1684
|
variantKeys,
|
|
1669
1685
|
resolved.precomputedClasses
|
|
1670
1686
|
);
|
|
1671
|
-
return function resolveClasses(tag, props, className,
|
|
1672
|
-
const staticClasses = staticResolver.resolve(tag,
|
|
1673
|
-
const variantClasses = variantResolver.resolve({ props,
|
|
1687
|
+
return function resolveClasses(tag, props, className, recipe) {
|
|
1688
|
+
const staticClasses = staticResolver.resolve(tag, recipe !== void 0);
|
|
1689
|
+
const variantClasses = variantResolver.resolve({ props, recipe });
|
|
1674
1690
|
if (!className)
|
|
1675
1691
|
return staticClasses && variantClasses ? `${staticClasses} ${variantClasses}` : staticClasses || variantClasses;
|
|
1676
1692
|
return cn(staticClasses, variantClasses, className);
|
|
@@ -1771,14 +1787,14 @@ function renderToString(component, props = {}, innerHTML = "") {
|
|
|
1771
1787
|
);
|
|
1772
1788
|
}
|
|
1773
1789
|
const { bundle } = entry;
|
|
1774
|
-
const { as, className,
|
|
1790
|
+
const { as, className, recipe, class: classAttr, ...rest } = props;
|
|
1775
1791
|
const tag = bundle.runtime.resolveTag(as);
|
|
1776
1792
|
const mergedProps = bundle.runtime.resolveProps(rest);
|
|
1777
1793
|
const resolvedClass = bundle.runtime.resolveClasses(
|
|
1778
1794
|
tag,
|
|
1779
1795
|
mergedProps,
|
|
1780
1796
|
className ?? classAttr,
|
|
1781
|
-
|
|
1797
|
+
recipe
|
|
1782
1798
|
);
|
|
1783
1799
|
const ariaResult = bundle.runtime.resolveAria(tag, mergedProps);
|
|
1784
1800
|
const filtered = applyFilter(
|
|
@@ -1814,7 +1830,7 @@ function toLooseBundle(bundle) {
|
|
|
1814
1830
|
return bundle;
|
|
1815
1831
|
}
|
|
1816
1832
|
function resolveHostState(bundle, props) {
|
|
1817
|
-
const { as, className,
|
|
1833
|
+
const { as, className, recipe, ...rest } = props;
|
|
1818
1834
|
const tag = bundle.runtime.resolveTag(as);
|
|
1819
1835
|
const mergedProps = bundle.runtime.resolveProps(rest);
|
|
1820
1836
|
const baseProps = bundle.runtime.options.normalizeFn ? bundle.runtime.options.normalizeFn(mergedProps) : mergedProps;
|
|
@@ -1824,7 +1840,7 @@ function resolveHostState(bundle, props) {
|
|
|
1824
1840
|
tag,
|
|
1825
1841
|
normalizedProps,
|
|
1826
1842
|
className,
|
|
1827
|
-
|
|
1843
|
+
recipe
|
|
1828
1844
|
);
|
|
1829
1845
|
const ariaResult = bundle.runtime.resolveAria(tag, normalizedProps);
|
|
1830
1846
|
const attributes = applyFilter(
|
|
@@ -1904,7 +1920,7 @@ function createContractComponent(options) {
|
|
|
1904
1920
|
props[attr.name] = attr.value;
|
|
1905
1921
|
}
|
|
1906
1922
|
props["as"] = self.as ?? this.getAttribute("as") ?? void 0;
|
|
1907
|
-
props["
|
|
1923
|
+
props["recipe"] = self.recipe ?? this.getAttribute("variant-key") ?? void 0;
|
|
1908
1924
|
props["className"] = self.praxisClass ?? this.getAttribute("praxis-class") ?? void 0;
|
|
1909
1925
|
for (const key of variantKeys) {
|
|
1910
1926
|
const val = self[key] ?? this.getAttribute(key);
|
|
@@ -1920,11 +1936,6 @@ function createContractComponent(options) {
|
|
|
1920
1936
|
registerForSsr(PolymorphicWebElement, looseBundle);
|
|
1921
1937
|
return PolymorphicWebElement;
|
|
1922
1938
|
}
|
|
1923
|
-
|
|
1924
|
-
// ../../adapters/web/src/define-contract-component.ts
|
|
1925
|
-
function defineContractComponent(options) {
|
|
1926
|
-
return (factory) => factory(options);
|
|
1927
|
-
}
|
|
1928
1939
|
export {
|
|
1929
1940
|
createContractComponent,
|
|
1930
1941
|
defineContractComponent,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "praxis-kit",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
"./react": {
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"sideEffects": false,
|
|
71
71
|
"dependencies": {
|
|
72
72
|
"clsx": "^2.1.1",
|
|
73
|
-
"type-fest": "^5.
|
|
73
|
+
"type-fest": "^5.7.0"
|
|
74
74
|
},
|
|
75
75
|
"peerDependencies": {
|
|
76
76
|
"react": ">=18",
|
|
@@ -130,8 +130,8 @@
|
|
|
130
130
|
"vite": "^8.0.16",
|
|
131
131
|
"vue": "^3.5.38",
|
|
132
132
|
"@praxis-kit/adapter-utils": "0.0.0",
|
|
133
|
-
"@praxis-kit/
|
|
134
|
-
"@praxis-kit/
|
|
133
|
+
"@praxis-kit/core": "0.8.0-beta.4",
|
|
134
|
+
"@praxis-kit/shared": "0.8.0-beta.4"
|
|
135
135
|
},
|
|
136
136
|
"publishConfig": {
|
|
137
137
|
"access": "public"
|