@pandacss/generator 0.36.1 → 0.37.1

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 (3) hide show
  1. package/dist/index.js +121 -96
  2. package/dist/index.mjs +121 -96
  3. package/package.json +7 -7
package/dist/index.js CHANGED
@@ -292,9 +292,10 @@ function generateCvaFn(ctx) {
292
292
 
293
293
  export function cva(config) {
294
294
  const { base, variants, defaultVariants, compoundVariants } = defaults(config)
295
+ const getVariantProps = (variants) => ({ ...defaultVariants, ...compact(variants) })
295
296
 
296
297
  function resolve(props = {}) {
297
- const computedVariants = { ...defaultVariants, ...compact(props) }
298
+ const computedVariants = getVariantProps(props)
298
299
  let variantCss = { ...base }
299
300
  for (const [key, value] of Object.entries(computedVariants)) {
300
301
  if (variants[key]?.[value]) {
@@ -338,6 +339,7 @@ function generateCvaFn(ctx) {
338
339
  config,
339
340
  merge,
340
341
  splitVariantProps,
342
+ getVariantProps
341
343
  })
342
344
  }
343
345
 
@@ -416,7 +418,7 @@ var astish_mjs_default = {
416
418
 
417
419
  // src/artifacts/generated/helpers.mjs.json
418
420
  var helpers_mjs_default = {
419
- content: '// src/assert.ts\nfunction isObject(value) {\n return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/hash.ts\nfunction toChar(code) {\n return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n let name = "";\n let x;\n for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n name = toChar(x % 52) + name;\n return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n let i = x.length;\n while (i)\n h = h * 33 ^ x.charCodeAt(--i);\n return h;\n}\nfunction toHash(value) {\n return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/important.ts\nvar importantRegex = /\\s*!(important)?/i;\nfunction isImportant(value) {\n return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n const cache = /* @__PURE__ */ new Map();\n const get = (...args) => {\n const key = JSON.stringify(args);\n if (cache.has(key)) {\n return cache.get(key);\n }\n const result = fn(...args);\n cache.set(key, result);\n return result;\n };\n return get;\n};\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n const objects = sources.filter(Boolean);\n return objects.reduce((prev, obj) => {\n Object.keys(obj).forEach((key) => {\n const prevValue = prev[key];\n const value = obj[key];\n if (isObject(prevValue) && isObject(value)) {\n prev[key] = mergeProps(prevValue, value);\n } else {\n prev[key] = value;\n }\n });\n return prev;\n }, {});\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n const { stop, getKey } = options;\n function inner(value, path = []) {\n if (isObject(value) || Array.isArray(value)) {\n const result = {};\n for (const [prop, child] of Object.entries(value)) {\n const key = getKey?.(prop, child) ?? prop;\n const childPath = [...path, key];\n if (stop?.(value, childPath)) {\n return predicate(value, path);\n }\n const next = inner(child, childPath);\n if (isNotNullish(next)) {\n result[key] = next;\n }\n }\n return result;\n }\n return predicate(value, path);\n }\n return inner(target);\n}\nfunction mapObject(obj, fn) {\n if (Array.isArray(obj))\n return obj.map((value) => fn(value));\n if (!isObject(obj))\n return fn(obj);\n return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n return values.reduce(\n (acc, current, index) => {\n const key = breakpoints[index];\n if (current != null) {\n acc[key] = current;\n }\n return acc;\n },\n {}\n );\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n const { utility, conditions } = context;\n const { hasShorthand, resolveShorthand } = utility;\n return walkObject(\n styles,\n (value) => {\n return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n },\n {\n stop: (value) => Array.isArray(value),\n getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n }\n );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n shift: (v) => v,\n finalize: (v) => v,\n breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n const { utility, hash, conditions: conds = fallbackCondition } = context;\n const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n const hashFn = (conditions, className) => {\n let result;\n if (hash) {\n const baseArray = [...conds.finalize(conditions), className];\n result = formatClassName(utility.toHash(baseArray, toHash));\n } else {\n const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n result = baseArray.join(":");\n }\n return result;\n };\n return memo(({ base, ...styles } = {}) => {\n const styleObject = Object.assign(styles, base);\n const normalizedObject = normalizeStyleObject(styleObject, context);\n const classNames = /* @__PURE__ */ new Set();\n walkObject(normalizedObject, (value, paths) => {\n const important = isImportant(value);\n if (value == null)\n return;\n const [prop, ...allConditions] = conds.shift(paths);\n const conditions = filterBaseConditions(allConditions);\n const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n let className = hashFn(conditions, transformed.className);\n if (important)\n className = `${className}!`;\n classNames.add(className);\n });\n return Array.from(classNames).join(" ");\n });\n}\nfunction compactStyles(...styles) {\n return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n function resolve(styles) {\n const allStyles = compactStyles(...styles);\n if (allStyles.length === 1)\n return allStyles;\n return allStyles.map((style) => normalizeStyleObject(style, context));\n }\n function mergeCss(...styles) {\n return mergeProps(...resolve(styles));\n }\n function assignCss(...styles) {\n return Object.assign({}, ...resolve(styles));\n }\n return { mergeCss: memo(mergeCss), assignCss };\n}\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n if (property.startsWith("--"))\n return property;\n return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/is-css-function.ts\nvar fns = ["min", "max", "clamp", "calc"];\nvar fnRegExp = new RegExp(`^(${fns.join("|")})\\\\(.*\\\\)`);\nvar isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v);\n\n// src/is-css-unit.ts\nvar lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";\nvar lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`;\nvar lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);\nvar isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v);\n\n// src/is-css-var.ts\nvar isCssVar = (v) => typeof v === "string" && /^var\\(--.+\\)$/.test(v);\n\n// src/pattern-fns.ts\nvar patternFns = {\n map: mapObject,\n isCssFunction,\n isCssVar,\n isCssUnit\n};\nvar getPatternStyles = (pattern, styles) => {\n if (!pattern.defaultValues)\n return styles;\n const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues;\n return Object.assign({}, defaults, compact(styles));\n};\n\n// src/slot.ts\nvar getSlotRecipes = (recipe = {}) => {\n const init = (slot) => ({\n className: [recipe.className, slot].filter(Boolean).join("__"),\n base: recipe.base?.[slot] ?? {},\n variants: {},\n defaultVariants: recipe.defaultVariants ?? {},\n compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n });\n const slots = recipe.slots ?? [];\n const recipeParts = slots.map((slot) => [slot, init(slot)]);\n for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n recipeParts.forEach(([slot, slotRecipe]) => {\n slotRecipe.variants[variantsKey] ??= {};\n slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n });\n }\n }\n return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n const descriptors = Object.getOwnPropertyDescriptors(props);\n const dKeys = Object.keys(descriptors);\n const split = (k) => {\n const clone = {};\n for (let i = 0; i < k.length; i++) {\n const key = k[i];\n if (descriptors[key]) {\n Object.defineProperty(clone, key, descriptors[key]);\n delete descriptors[key];\n }\n }\n return clone;\n };\n const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n return keys.map(fn).concat(split(dKeys));\n}\n\n// src/uniq.ts\nvar uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);\nexport {\n compact,\n createCss,\n createMergeCss,\n filterBaseConditions,\n getPatternStyles,\n getSlotCompoundVariant,\n getSlotRecipes,\n hypenateProperty,\n isBaseCondition,\n isObject,\n mapObject,\n memo,\n mergeProps,\n patternFns,\n splitProps,\n toHash,\n uniq,\n walkObject,\n withoutSpace\n};\n'
421
+ content: '// src/assert.ts\nfunction isObject(value) {\n return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/hash.ts\nfunction toChar(code) {\n return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n let name = "";\n let x;\n for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n name = toChar(x % 52) + name;\n return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n let i = x.length;\n while (i)\n h = h * 33 ^ x.charCodeAt(--i);\n return h;\n}\nfunction toHash(value) {\n return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/important.ts\nvar importantRegex = /\\s*!(important)?/i;\nfunction isImportant(value) {\n return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n const cache = /* @__PURE__ */ new Map();\n const get = (...args) => {\n const key = JSON.stringify(args);\n if (cache.has(key)) {\n return cache.get(key);\n }\n const result = fn(...args);\n cache.set(key, result);\n return result;\n };\n return get;\n};\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n const objects = sources.filter(Boolean);\n return objects.reduce((prev, obj) => {\n Object.keys(obj).forEach((key) => {\n const prevValue = prev[key];\n const value = obj[key];\n if (isObject(prevValue) && isObject(value)) {\n prev[key] = mergeProps(prevValue, value);\n } else {\n prev[key] = value;\n }\n });\n return prev;\n }, {});\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n const { stop, getKey } = options;\n function inner(value, path = []) {\n if (isObject(value) || Array.isArray(value)) {\n const result = {};\n for (const [prop, child] of Object.entries(value)) {\n const key = getKey?.(prop, child) ?? prop;\n const childPath = [...path, key];\n if (stop?.(value, childPath)) {\n return predicate(value, path);\n }\n const next = inner(child, childPath);\n if (isNotNullish(next)) {\n result[key] = next;\n }\n }\n return result;\n }\n return predicate(value, path);\n }\n return inner(target);\n}\nfunction mapObject(obj, fn) {\n if (Array.isArray(obj))\n return obj.map((value) => fn(value));\n if (!isObject(obj))\n return fn(obj);\n return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n return values.reduce(\n (acc, current, index) => {\n const key = breakpoints[index];\n if (current != null) {\n acc[key] = current;\n }\n return acc;\n },\n {}\n );\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n const { utility, conditions } = context;\n const { hasShorthand, resolveShorthand } = utility;\n return walkObject(\n styles,\n (value) => {\n return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n },\n {\n stop: (value) => Array.isArray(value),\n getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n }\n );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n shift: (v) => v,\n finalize: (v) => v,\n breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n const { utility, hash, conditions: conds = fallbackCondition } = context;\n const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n const hashFn = (conditions, className) => {\n let result;\n if (hash) {\n const baseArray = [...conds.finalize(conditions), className];\n result = formatClassName(utility.toHash(baseArray, toHash));\n } else {\n const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n result = baseArray.join(":");\n }\n return result;\n };\n return memo(({ base, ...styles } = {}) => {\n const styleObject = Object.assign(styles, base);\n const normalizedObject = normalizeStyleObject(styleObject, context);\n const classNames = /* @__PURE__ */ new Set();\n walkObject(normalizedObject, (value, paths) => {\n const important = isImportant(value);\n if (value == null)\n return;\n const [prop, ...allConditions] = conds.shift(paths);\n const conditions = filterBaseConditions(allConditions);\n const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n let className = hashFn(conditions, transformed.className);\n if (important)\n className = `${className}!`;\n classNames.add(className);\n });\n return Array.from(classNames).join(" ");\n });\n}\nfunction compactStyles(...styles) {\n return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n function resolve(styles) {\n const allStyles = compactStyles(...styles);\n if (allStyles.length === 1)\n return allStyles;\n return allStyles.map((style) => normalizeStyleObject(style, context));\n }\n function mergeCss(...styles) {\n return mergeProps(...resolve(styles));\n }\n function assignCss(...styles) {\n return Object.assign({}, ...resolve(styles));\n }\n return { mergeCss: memo(mergeCss), assignCss };\n}\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n if (property.startsWith("--"))\n return property;\n return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/is-css-function.ts\nvar fns = ["min", "max", "clamp", "calc"];\nvar fnRegExp = new RegExp(`^(${fns.join("|")})\\\\(.*\\\\)`);\nvar isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v);\n\n// src/is-css-unit.ts\nvar lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";\nvar lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`;\nvar lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);\nvar isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v);\n\n// src/is-css-var.ts\nvar isCssVar = (v) => typeof v === "string" && /^var\\(--.+\\)$/.test(v);\n\n// src/pattern-fns.ts\nvar patternFns = {\n map: mapObject,\n isCssFunction,\n isCssVar,\n isCssUnit\n};\nvar getPatternStyles = (pattern, styles) => {\n if (!pattern?.defaultValues)\n return styles;\n const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues;\n return Object.assign({}, defaults, compact(styles));\n};\n\n// src/slot.ts\nvar getSlotRecipes = (recipe = {}) => {\n const init = (slot) => ({\n className: [recipe.className, slot].filter(Boolean).join("__"),\n base: recipe.base?.[slot] ?? {},\n variants: {},\n defaultVariants: recipe.defaultVariants ?? {},\n compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n });\n const slots = recipe.slots ?? [];\n const recipeParts = slots.map((slot) => [slot, init(slot)]);\n for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n recipeParts.forEach(([slot, slotRecipe]) => {\n slotRecipe.variants[variantsKey] ??= {};\n slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n });\n }\n }\n return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n const descriptors = Object.getOwnPropertyDescriptors(props);\n const dKeys = Object.keys(descriptors);\n const split = (k) => {\n const clone = {};\n for (let i = 0; i < k.length; i++) {\n const key = k[i];\n if (descriptors[key]) {\n Object.defineProperty(clone, key, descriptors[key]);\n delete descriptors[key];\n }\n }\n return clone;\n };\n const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n return keys.map(fn).concat(split(dKeys));\n}\n\n// src/uniq.ts\nvar uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);\nexport {\n compact,\n createCss,\n createMergeCss,\n filterBaseConditions,\n getPatternStyles,\n getSlotCompoundVariant,\n getSlotRecipes,\n hypenateProperty,\n isBaseCondition,\n isObject,\n mapObject,\n memo,\n mergeProps,\n patternFns,\n splitProps,\n toHash,\n uniq,\n walkObject,\n withoutSpace\n};\n'
420
422
  };
421
423
 
422
424
  // src/artifacts/generated/normalize-html.mjs.json
@@ -634,7 +636,7 @@ function generateCreateRecipe(ctx) {
634
636
  ${ctx.file.import("compact, createCss, splitProps, uniq, withoutSpace", "../helpers")}
635
637
 
636
638
  export const createRecipe = (name, defaultVariants, compoundVariants) => {
637
- const getRecipeStyles = (variants) => {
639
+ const getVariantProps = (variants) => {
638
640
  return {
639
641
  [name]: '__ignore__',
640
642
  ...defaultVariants,
@@ -668,7 +670,7 @@ function generateCreateRecipe(ctx) {
668
670
  }
669
671
  })
670
672
 
671
- const recipeStyles = getRecipeStyles(variants)
673
+ const recipeStyles = getVariantProps(variants)
672
674
 
673
675
  if (withCompoundVariants) {
674
676
  const compoundVariantStyles = getCompoundVariantCss(compoundVariants, recipeStyles)
@@ -678,11 +680,13 @@ function generateCreateRecipe(ctx) {
678
680
  return recipeCss(recipeStyles)
679
681
  }
680
682
 
681
- return Object.assign(recipeFn, {
683
+ return {
684
+ recipeFn,
685
+ getVariantProps,
682
686
  __getCompoundVariantCss__: (variants) => {
683
- return getCompoundVariantCss(compoundVariants, getRecipeStyles(variants));
687
+ return getCompoundVariantCss(compoundVariants, getVariantProps(variants));
684
688
  },
685
- })
689
+ }
686
690
  }
687
691
 
688
692
  export const mergeRecipes = (recipeA, recipeB) => {
@@ -732,7 +736,7 @@ function generateRecipes(ctx, filters) {
732
736
  const ${baseName}SlotFns = /* @__PURE__ */ ${baseName}SlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, ${baseName}DefaultVariants, getSlotCompoundVariant(${baseName}CompoundVariants, slotName))])
733
737
 
734
738
  const ${baseName}Fn = memo((props = {}) => {
735
- return Object.fromEntries(${baseName}SlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
739
+ return Object.fromEntries(${baseName}SlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
736
740
  })
737
741
 
738
742
  const ${baseName}VariantKeys = ${stringify2(Object.keys(variantKeyMap))}
@@ -761,9 +765,10 @@ function generateRecipes(ctx, filters) {
761
765
 
762
766
  const ${baseName}VariantKeys = Object.keys(${baseName}VariantMap)
763
767
 
764
- export const ${baseName} = /* @__PURE__ */ Object.assign(memo(${baseName}Fn), {
768
+ export const ${baseName} = /* @__PURE__ */ Object.assign(memo(${baseName}Fn.recipeFn), {
765
769
  __recipe__: true,
766
770
  __name__: '${baseName}',
771
+ __getCompoundVariantCss__: ${baseName}Fn.__getCompoundVariantCss__,
767
772
  raw: (props) => props,
768
773
  variantKeys: ${baseName}VariantKeys,
769
774
  variantMap: ${baseName}VariantMap,
@@ -773,6 +778,7 @@ function generateRecipes(ctx, filters) {
773
778
  splitVariantProps(props) {
774
779
  return splitProps(props, ${baseName}VariantKeys)
775
780
  },
781
+ getVariantProps: ${baseName}Fn.getVariantProps,
776
782
  })
777
783
  `
778
784
  );
@@ -807,6 +813,7 @@ function generateRecipes(ctx, filters) {
807
813
  variantMap: ${upperName}VariantMap
808
814
  variantKeys: Array<keyof ${upperName}Variant>
809
815
  splitVariantProps<Props extends ${upperName}VariantProps>(props: Props): [${upperName}VariantProps, Pretty<DistributiveOmit<Props, keyof ${upperName}VariantProps>>]
816
+ getVariantProps: (props?: ${upperName}VariantProps) => ${upperName}VariantProps
810
817
  }
811
818
 
812
819
  ${description ? `/** ${description} */` : ""}
@@ -3510,7 +3517,7 @@ var pattern_d_ts_default = {
3510
3517
 
3511
3518
  // src/artifacts/generated/recipe.d.ts.json
3512
3519
  var recipe_d_ts_default = {
3513
- content: "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n ? {}\n : {\n [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined\n }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\n/**\n * Extract the variant as optional props from a `cva` function.\n * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type.\n */\nexport type RecipeVariantProps<\n T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\n/**\n * Extract the variants from a `cva` function.\n */\nexport type RecipeVariant<\n T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Exclude<Pretty<Required<RecipeVariantProps<T>>>, undefined>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n __type: RecipeSelection<T>\n variantKeys: (keyof T)[]\n variantMap: RecipeVariantMap<T>\n raw: (props?: RecipeSelection<T>) => SystemStyleObject\n config: RecipeConfig<T>\n splitVariantProps<Props extends RecipeSelection<T>>(\n props: Props,\n ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantRecord> {\n /**\n * The base styles of the recipe.\n */\n base?: SystemStyleObject\n /**\n * The multi-variant styles of the recipe.\n */\n variants?: T\n /**\n * The default variants of the recipe.\n */\n defaultVariants?: RecipeSelection<T>\n /**\n * The styles to apply when a combination of variants is selected.\n */\n compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n /**\n * The class name of the recipe.\n */\n className: string\n /**\n * The description of the recipe. This will be used in the JSDoc comment.\n */\n description?: string\n /**\n * The jsx elements to track for this recipe. Can be string or Regexp.\n *\n * @default capitalize(recipe.name)\n * @example ['Button', 'Link', /Button$/]\n */\n jsx?: Array<string | RegExp>\n /**\n * Variants to pre-generate, will be include in the final `config.staticCss`\n */\n staticCss?: RecipeRule[]\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n extends RecipeDefinition<T>,\n RecipeConfigMeta {}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n extends SlotRecipeVariantFn<S, T> {\n raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n variantKeys: (keyof T)[]\n variantMap: RecipeVariantMap<T>\n splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<\n S extends string = string,\n T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> {\n /**\n * An optional class name that can be used to target slots in the DOM.\n */\n className?: string\n /**\n * The parts/slots of the recipe.\n */\n slots: S[] | Readonly<S[]>\n /**\n * The base styles of the recipe.\n */\n base?: SlotRecord<S, SystemStyleObject>\n /**\n * The multi-variant styles of the recipe.\n */\n variants?: T\n /**\n * The default variants of the recipe.\n */\n defaultVariants?: RecipeSelection<T>\n /**\n * The styles to apply when a combination of variants is selected.\n */\n compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n S extends string = string,\n T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
3520
+ content: "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n ? {}\n : {\n [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined\n }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\n/**\n * Extract the variant as optional props from a `cva` function.\n * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type.\n */\nexport type RecipeVariantProps<\n T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\n/**\n * Extract the variants from a `cva` function.\n */\nexport type RecipeVariant<\n T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Exclude<Pretty<Required<RecipeVariantProps<T>>>, undefined>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n __type: RecipeSelection<T>\n variantKeys: (keyof T)[]\n variantMap: RecipeVariantMap<T>\n raw: (props?: RecipeSelection<T>) => SystemStyleObject\n config: RecipeConfig<T>\n splitVariantProps<Props extends RecipeSelection<T>>(\n props: Props,\n ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantRecord> {\n /**\n * The base styles of the recipe.\n */\n base?: SystemStyleObject\n /**\n * The multi-variant styles of the recipe.\n */\n variants?: T\n /**\n * The default variants of the recipe.\n */\n defaultVariants?: RecipeSelection<T>\n /**\n * The styles to apply when a combination of variants is selected.\n */\n compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n /**\n * The class name of the recipe.\n */\n className: string\n /**\n * The description of the recipe. This will be used in the JSDoc comment.\n */\n description?: string\n /**\n * The jsx elements to track for this recipe. Can be string or Regexp.\n *\n * @default capitalize(recipe.name)\n * @example ['Button', 'Link', /Button$/]\n */\n jsx?: Array<string | RegExp>\n /**\n * Variants to pre-generate, will be include in the final `config.staticCss`\n */\n staticCss?: RecipeRule[]\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n extends RecipeDefinition<T>,\n RecipeConfigMeta {}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n extends SlotRecipeVariantFn<S, T> {\n raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n variantKeys: (keyof T)[]\n variantMap: RecipeVariantMap<T>\n getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<\n S extends string = string,\n T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> {\n /**\n * An optional class name that can be used to target slots in the DOM.\n */\n className?: string\n /**\n * The parts/slots of the recipe.\n */\n slots: S[] | Readonly<S[]>\n /**\n * The base styles of the recipe.\n */\n base?: SlotRecord<S, SystemStyleObject>\n /**\n * The multi-variant styles of the recipe.\n */\n variants?: T\n /**\n * The default variants of the recipe.\n */\n defaultVariants?: RecipeSelection<T>\n /**\n * The styles to apply when a combination of variants is selected.\n */\n compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n S extends string = string,\n T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
3514
3521
  };
3515
3522
 
3516
3523
  // src/artifacts/generated/selectors.d.ts.json
@@ -3696,7 +3703,9 @@ function generateStyleProps(ctx) {
3696
3703
  if (strictPropertyList.has(key)) {
3697
3704
  union.push([utilityValue, "CssVars"].join(" | "));
3698
3705
  } else {
3699
- union.push([utilityValue, ctx.config.strictTokens ? "" : cssFallback].filter(Boolean).join(" | "));
3706
+ union.push(
3707
+ [utilityValue, "CssVars", ctx.config.strictTokens ? "" : cssFallback].filter(Boolean).join(" | ")
3708
+ );
3700
3709
  }
3701
3710
  } else {
3702
3711
  union.push([strictPropertyList.has(key) ? "CssVars" : "", cssFallback].filter(Boolean).join(" | "));
@@ -4516,39 +4525,7 @@ var generateArtifacts = (ctx, ids) => {
4516
4525
  var generateGlobalCss = (ctx, sheet) => {
4517
4526
  const { globalCss = {} } = ctx.config;
4518
4527
  sheet.processGlobalCss({
4519
- ":root": {
4520
- "--made-with-panda": `'\u{1F43C}'`
4521
- },
4522
- "*, *::before, *::after, ::backdrop": {
4523
- "--blur": "/*-*/ /*-*/",
4524
- "--brightness": "/*-*/ /*-*/",
4525
- "--contrast": "/*-*/ /*-*/",
4526
- "--grayscale": "/*-*/ /*-*/",
4527
- "--hue-rotate": "/*-*/ /*-*/",
4528
- "--invert": "/*-*/ /*-*/",
4529
- "--saturate": "/*-*/ /*-*/",
4530
- "--sepia": "/*-*/ /*-*/",
4531
- "--drop-shadow": "/*-*/ /*-*/",
4532
- "--backdrop-blur": "/*-*/ /*-*/",
4533
- "--backdrop-brightness": "/*-*/ /*-*/",
4534
- "--backdrop-contrast": "/*-*/ /*-*/",
4535
- "--backdrop-grayscale": "/*-*/ /*-*/",
4536
- "--backdrop-hue-rotate": "/*-*/ /*-*/",
4537
- "--backdrop-invert": "/*-*/ /*-*/",
4538
- "--backdrop-opacity": "/*-*/ /*-*/",
4539
- "--backdrop-saturate": "/*-*/ /*-*/",
4540
- "--backdrop-sepia": "/*-*/ /*-*/",
4541
- "--scroll-snap-strictness": "proximity",
4542
- "--border-spacing-x": 0,
4543
- "--border-spacing-y": 0,
4544
- "--translate-x": 0,
4545
- "--translate-y": 0,
4546
- "--rotate": 0,
4547
- "--skew-x": 0,
4548
- "--skew-y": 0,
4549
- "--scale-x": 1,
4550
- "--scale-y": 1
4551
- }
4528
+ ":root": { "--made-with-panda": `'\u{1F43C}'` }
4552
4529
  });
4553
4530
  sheet.processGlobalCss(globalCss);
4554
4531
  };
@@ -4598,93 +4575,141 @@ function generateResetCss(ctx, sheet) {
4598
4575
  selector = `&${scope}`;
4599
4576
  }
4600
4577
  const scoped = {
4601
- "*": { margin: "0px", padding: "0px", font: "inherit" },
4602
- "*, *::before, *::after": {
4578
+ "*, ::before, ::after, ::backdrop, ::first-letter, ::file-selector-button": {
4579
+ margin: "0px",
4580
+ padding: "0px",
4603
4581
  boxSizing: "border-box",
4604
4582
  borderWidth: "0px",
4605
4583
  borderStyle: "solid",
4606
4584
  borderColor: "var(--global-color-border, currentColor)"
4607
4585
  },
4608
- hr: { height: "0px", color: "inherit", borderTopWidth: "1px" },
4609
- body: { height: "100%" },
4610
- img: { borderStyle: "none" },
4611
- "img, svg, video, canvas, audio, iframe, embed, object": {
4586
+ hr: {
4587
+ height: "0px",
4588
+ color: "inherit",
4589
+ borderTopWidth: "1px"
4590
+ },
4591
+ body: {
4592
+ height: "100%",
4593
+ lineHeight: "inherit"
4594
+ },
4595
+ img: {
4596
+ borderStyle: "none"
4597
+ },
4598
+ "img, svg, video, canvas, audio, iframe, embed, object": {
4612
4599
  display: "block",
4613
4600
  verticalAlign: "middle"
4614
4601
  },
4615
- "img, video": { maxWidth: "100%", height: "auto" },
4616
- "p, h1, h2, h3, h4, h5, h6": { overflowWrap: "break-word" },
4617
- "ol, ul": { listStyle: "none" },
4618
- "code, kbd, pre, samp": { fontSize: "1em" },
4619
- "button, [type='button'], [type='reset'], [type='submit']": {
4620
- WebkitAppearance: "button",
4621
- backgroundColor: "transparent",
4622
- backgroundImage: "none"
4602
+ "img, video": {
4603
+ maxWidth: "100%",
4604
+ height: "auto"
4605
+ },
4606
+ "h1, h2, h3, h4, h5, h6": {
4607
+ fontSize: "inherit",
4608
+ fontWeight: "inherit",
4609
+ textWrap: "balance"
4610
+ },
4611
+ "p, h1, h2, h3, h4, h5, h6": {
4612
+ overflowWrap: "break-word"
4613
+ },
4614
+ "ol, ul, menu": {
4615
+ listStyle: "none"
4616
+ },
4617
+ "button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button": {
4618
+ appearance: "button"
4619
+ },
4620
+ "button, input, optgroup, select, textarea, ::file-selector-button": {
4621
+ font: "inherit",
4622
+ fontFeatureSettings: "inherit",
4623
+ fontVariationSettings: "inherit",
4624
+ letterSpacing: "inherit",
4625
+ color: "inherit",
4626
+ background: "transparent"
4627
+ },
4628
+ "::placeholder": {
4629
+ opacity: 1,
4630
+ "--placeholder-fallback": "color-mix(in srgb, currentColor 50%, transparent)",
4631
+ color: "var(--global-color-placeholder, var(--placeholder-fallback))"
4632
+ },
4633
+ "select, textarea, input:where(:not([type='button'], [type='reset'], [type='submit']))": {
4634
+ borderWidth: "1px",
4635
+ borderStyle: "solid"
4636
+ },
4637
+ textarea: {
4638
+ resize: "vertical"
4623
4639
  },
4624
- "button, input, optgroup, select, textarea": { color: "inherit" },
4625
- "button, select": { textTransform: "none" },
4626
4640
  table: {
4627
4641
  textIndent: "0px",
4628
4642
  borderColor: "inherit",
4629
4643
  borderCollapse: "collapse"
4630
4644
  },
4631
- "input::placeholder, textarea::placeholder": {
4632
- opacity: 1,
4633
- color: "var(--global-color-placeholder, #9ca3af)"
4645
+ summary: {
4646
+ display: "list-item"
4647
+ },
4648
+ small: {
4649
+ fontSize: "80%"
4634
4650
  },
4635
- textarea: { resize: "vertical" },
4636
- summary: { display: "list-item" },
4637
- small: { fontSize: "80%" },
4638
- "sub, sup": {
4651
+ "sub, sup": {
4639
4652
  fontSize: "75%",
4640
4653
  lineHeight: 0,
4641
4654
  position: "relative",
4642
4655
  verticalAlign: "baseline"
4643
4656
  },
4644
- sub: { bottom: "-0.25em" },
4645
- sup: { top: "-0.5em" },
4646
- dialog: { padding: "0px" },
4647
- a: { color: "inherit", textDecoration: "inherit" },
4648
- "abbr:where([title])": { textDecoration: "underline dotted" },
4649
- "b, strong": { fontWeight: "bolder" },
4650
- "code, kbd, samp, pre": {
4651
- fontSize: "1em",
4652
- "--font-mono-fallback": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New'",
4653
- fontFamily: "var(--global-font-mono, var(--font-mono-fallback))"
4657
+ sub: {
4658
+ bottom: "-0.25em"
4654
4659
  },
4655
- 'input[type="text"], input[type="email"], input[type="search"], input[type="password"]': {
4656
- WebkitAppearance: "none",
4657
- MozAppearance: "none"
4660
+ sup: {
4661
+ top: "-0.5em"
4658
4662
  },
4659
- "input[type='search']": {
4660
- WebkitAppearance: "textfield",
4661
- outlineOffset: "-2px"
4663
+ dialog: {
4664
+ padding: "0px"
4662
4665
  },
4663
- "::-webkit-search-decoration, ::-webkit-search-cancel-button": {
4664
- WebkitAppearance: "none"
4666
+ a: {
4667
+ color: "inherit",
4668
+ textDecoration: "inherit"
4669
+ },
4670
+ "abbr:where([title])": {
4671
+ textDecoration: "underline dotted"
4665
4672
  },
4666
- "::-webkit-file-upload-button": {
4667
- WebkitAppearance: "button",
4668
- font: "inherit"
4673
+ "b, strong": {
4674
+ fontWeight: "bolder"
4669
4675
  },
4670
- 'input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button': {
4676
+ "code, kbd, samp, pre": {
4677
+ "--font-mono-fallback": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New'",
4678
+ fontFamily: "var(--global-font-mono, var(--font-mono-fallback))",
4679
+ fontSize: "1em",
4680
+ fontFeatureSettings: "normal",
4681
+ fontVariationSettings: "normal"
4682
+ },
4683
+ progress: {
4684
+ verticalAlign: "baseline"
4685
+ },
4686
+ "::-webkit-search-decoration, ::-webkit-search-cancel-button": {
4687
+ WebkitAppearance: "none"
4688
+ },
4689
+ "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
4671
4690
  height: "auto"
4672
4691
  },
4673
- "input[type='number']": { MozAppearance: "textfield" },
4674
- ":-moz-ui-invalid": { boxShadow: "none" },
4675
- ":-moz-focusring": { outline: "auto" },
4676
- "[hidden]": { display: "none !important" }
4692
+ ":-moz-ui-invalid": {
4693
+ boxShadow: "none"
4694
+ },
4695
+ ":-moz-focusring": {
4696
+ outline: "auto"
4697
+ },
4698
+ "[hidden]": {
4699
+ display: "none !important"
4700
+ }
4677
4701
  };
4678
4702
  const reset = {
4679
- [scope || "html"]: {
4680
- lineHeight: 1.5,
4703
+ [scope || "html, :host"]: {
4704
+ lineHeight: "1.5",
4681
4705
  "--font-fallback": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
4682
4706
  WebkitTextSizeAdjust: "100%",
4683
4707
  WebkitFontSmoothing: "antialiased",
4684
4708
  MozOsxFontSmoothing: "grayscale",
4685
4709
  MozTabSize: "[4]",
4686
4710
  tabSize: "[4]",
4687
- fontFamily: "var(--global-font-body, var(--font-fallback))"
4711
+ fontFamily: "var(--global-font-body, var(--font-fallback))",
4712
+ WebkitTapHighlightColor: "transparent"
4688
4713
  }
4689
4714
  };
4690
4715
  if (level === "element") {
package/dist/index.mjs CHANGED
@@ -256,9 +256,10 @@ function generateCvaFn(ctx) {
256
256
 
257
257
  export function cva(config) {
258
258
  const { base, variants, defaultVariants, compoundVariants } = defaults(config)
259
+ const getVariantProps = (variants) => ({ ...defaultVariants, ...compact(variants) })
259
260
 
260
261
  function resolve(props = {}) {
261
- const computedVariants = { ...defaultVariants, ...compact(props) }
262
+ const computedVariants = getVariantProps(props)
262
263
  let variantCss = { ...base }
263
264
  for (const [key, value] of Object.entries(computedVariants)) {
264
265
  if (variants[key]?.[value]) {
@@ -302,6 +303,7 @@ function generateCvaFn(ctx) {
302
303
  config,
303
304
  merge,
304
305
  splitVariantProps,
306
+ getVariantProps
305
307
  })
306
308
  }
307
309
 
@@ -380,7 +382,7 @@ var astish_mjs_default = {
380
382
 
381
383
  // src/artifacts/generated/helpers.mjs.json
382
384
  var helpers_mjs_default = {
383
- content: '// src/assert.ts\nfunction isObject(value) {\n return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/hash.ts\nfunction toChar(code) {\n return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n let name = "";\n let x;\n for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n name = toChar(x % 52) + name;\n return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n let i = x.length;\n while (i)\n h = h * 33 ^ x.charCodeAt(--i);\n return h;\n}\nfunction toHash(value) {\n return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/important.ts\nvar importantRegex = /\\s*!(important)?/i;\nfunction isImportant(value) {\n return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n const cache = /* @__PURE__ */ new Map();\n const get = (...args) => {\n const key = JSON.stringify(args);\n if (cache.has(key)) {\n return cache.get(key);\n }\n const result = fn(...args);\n cache.set(key, result);\n return result;\n };\n return get;\n};\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n const objects = sources.filter(Boolean);\n return objects.reduce((prev, obj) => {\n Object.keys(obj).forEach((key) => {\n const prevValue = prev[key];\n const value = obj[key];\n if (isObject(prevValue) && isObject(value)) {\n prev[key] = mergeProps(prevValue, value);\n } else {\n prev[key] = value;\n }\n });\n return prev;\n }, {});\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n const { stop, getKey } = options;\n function inner(value, path = []) {\n if (isObject(value) || Array.isArray(value)) {\n const result = {};\n for (const [prop, child] of Object.entries(value)) {\n const key = getKey?.(prop, child) ?? prop;\n const childPath = [...path, key];\n if (stop?.(value, childPath)) {\n return predicate(value, path);\n }\n const next = inner(child, childPath);\n if (isNotNullish(next)) {\n result[key] = next;\n }\n }\n return result;\n }\n return predicate(value, path);\n }\n return inner(target);\n}\nfunction mapObject(obj, fn) {\n if (Array.isArray(obj))\n return obj.map((value) => fn(value));\n if (!isObject(obj))\n return fn(obj);\n return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n return values.reduce(\n (acc, current, index) => {\n const key = breakpoints[index];\n if (current != null) {\n acc[key] = current;\n }\n return acc;\n },\n {}\n );\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n const { utility, conditions } = context;\n const { hasShorthand, resolveShorthand } = utility;\n return walkObject(\n styles,\n (value) => {\n return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n },\n {\n stop: (value) => Array.isArray(value),\n getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n }\n );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n shift: (v) => v,\n finalize: (v) => v,\n breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n const { utility, hash, conditions: conds = fallbackCondition } = context;\n const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n const hashFn = (conditions, className) => {\n let result;\n if (hash) {\n const baseArray = [...conds.finalize(conditions), className];\n result = formatClassName(utility.toHash(baseArray, toHash));\n } else {\n const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n result = baseArray.join(":");\n }\n return result;\n };\n return memo(({ base, ...styles } = {}) => {\n const styleObject = Object.assign(styles, base);\n const normalizedObject = normalizeStyleObject(styleObject, context);\n const classNames = /* @__PURE__ */ new Set();\n walkObject(normalizedObject, (value, paths) => {\n const important = isImportant(value);\n if (value == null)\n return;\n const [prop, ...allConditions] = conds.shift(paths);\n const conditions = filterBaseConditions(allConditions);\n const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n let className = hashFn(conditions, transformed.className);\n if (important)\n className = `${className}!`;\n classNames.add(className);\n });\n return Array.from(classNames).join(" ");\n });\n}\nfunction compactStyles(...styles) {\n return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n function resolve(styles) {\n const allStyles = compactStyles(...styles);\n if (allStyles.length === 1)\n return allStyles;\n return allStyles.map((style) => normalizeStyleObject(style, context));\n }\n function mergeCss(...styles) {\n return mergeProps(...resolve(styles));\n }\n function assignCss(...styles) {\n return Object.assign({}, ...resolve(styles));\n }\n return { mergeCss: memo(mergeCss), assignCss };\n}\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n if (property.startsWith("--"))\n return property;\n return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/is-css-function.ts\nvar fns = ["min", "max", "clamp", "calc"];\nvar fnRegExp = new RegExp(`^(${fns.join("|")})\\\\(.*\\\\)`);\nvar isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v);\n\n// src/is-css-unit.ts\nvar lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";\nvar lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`;\nvar lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);\nvar isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v);\n\n// src/is-css-var.ts\nvar isCssVar = (v) => typeof v === "string" && /^var\\(--.+\\)$/.test(v);\n\n// src/pattern-fns.ts\nvar patternFns = {\n map: mapObject,\n isCssFunction,\n isCssVar,\n isCssUnit\n};\nvar getPatternStyles = (pattern, styles) => {\n if (!pattern.defaultValues)\n return styles;\n const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues;\n return Object.assign({}, defaults, compact(styles));\n};\n\n// src/slot.ts\nvar getSlotRecipes = (recipe = {}) => {\n const init = (slot) => ({\n className: [recipe.className, slot].filter(Boolean).join("__"),\n base: recipe.base?.[slot] ?? {},\n variants: {},\n defaultVariants: recipe.defaultVariants ?? {},\n compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n });\n const slots = recipe.slots ?? [];\n const recipeParts = slots.map((slot) => [slot, init(slot)]);\n for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n recipeParts.forEach(([slot, slotRecipe]) => {\n slotRecipe.variants[variantsKey] ??= {};\n slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n });\n }\n }\n return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n const descriptors = Object.getOwnPropertyDescriptors(props);\n const dKeys = Object.keys(descriptors);\n const split = (k) => {\n const clone = {};\n for (let i = 0; i < k.length; i++) {\n const key = k[i];\n if (descriptors[key]) {\n Object.defineProperty(clone, key, descriptors[key]);\n delete descriptors[key];\n }\n }\n return clone;\n };\n const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n return keys.map(fn).concat(split(dKeys));\n}\n\n// src/uniq.ts\nvar uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);\nexport {\n compact,\n createCss,\n createMergeCss,\n filterBaseConditions,\n getPatternStyles,\n getSlotCompoundVariant,\n getSlotRecipes,\n hypenateProperty,\n isBaseCondition,\n isObject,\n mapObject,\n memo,\n mergeProps,\n patternFns,\n splitProps,\n toHash,\n uniq,\n walkObject,\n withoutSpace\n};\n'
385
+ content: '// src/assert.ts\nfunction isObject(value) {\n return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/hash.ts\nfunction toChar(code) {\n return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n let name = "";\n let x;\n for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n name = toChar(x % 52) + name;\n return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n let i = x.length;\n while (i)\n h = h * 33 ^ x.charCodeAt(--i);\n return h;\n}\nfunction toHash(value) {\n return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/important.ts\nvar importantRegex = /\\s*!(important)?/i;\nfunction isImportant(value) {\n return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n const cache = /* @__PURE__ */ new Map();\n const get = (...args) => {\n const key = JSON.stringify(args);\n if (cache.has(key)) {\n return cache.get(key);\n }\n const result = fn(...args);\n cache.set(key, result);\n return result;\n };\n return get;\n};\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n const objects = sources.filter(Boolean);\n return objects.reduce((prev, obj) => {\n Object.keys(obj).forEach((key) => {\n const prevValue = prev[key];\n const value = obj[key];\n if (isObject(prevValue) && isObject(value)) {\n prev[key] = mergeProps(prevValue, value);\n } else {\n prev[key] = value;\n }\n });\n return prev;\n }, {});\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n const { stop, getKey } = options;\n function inner(value, path = []) {\n if (isObject(value) || Array.isArray(value)) {\n const result = {};\n for (const [prop, child] of Object.entries(value)) {\n const key = getKey?.(prop, child) ?? prop;\n const childPath = [...path, key];\n if (stop?.(value, childPath)) {\n return predicate(value, path);\n }\n const next = inner(child, childPath);\n if (isNotNullish(next)) {\n result[key] = next;\n }\n }\n return result;\n }\n return predicate(value, path);\n }\n return inner(target);\n}\nfunction mapObject(obj, fn) {\n if (Array.isArray(obj))\n return obj.map((value) => fn(value));\n if (!isObject(obj))\n return fn(obj);\n return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n return values.reduce(\n (acc, current, index) => {\n const key = breakpoints[index];\n if (current != null) {\n acc[key] = current;\n }\n return acc;\n },\n {}\n );\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n const { utility, conditions } = context;\n const { hasShorthand, resolveShorthand } = utility;\n return walkObject(\n styles,\n (value) => {\n return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n },\n {\n stop: (value) => Array.isArray(value),\n getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n }\n );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n shift: (v) => v,\n finalize: (v) => v,\n breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n const { utility, hash, conditions: conds = fallbackCondition } = context;\n const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n const hashFn = (conditions, className) => {\n let result;\n if (hash) {\n const baseArray = [...conds.finalize(conditions), className];\n result = formatClassName(utility.toHash(baseArray, toHash));\n } else {\n const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n result = baseArray.join(":");\n }\n return result;\n };\n return memo(({ base, ...styles } = {}) => {\n const styleObject = Object.assign(styles, base);\n const normalizedObject = normalizeStyleObject(styleObject, context);\n const classNames = /* @__PURE__ */ new Set();\n walkObject(normalizedObject, (value, paths) => {\n const important = isImportant(value);\n if (value == null)\n return;\n const [prop, ...allConditions] = conds.shift(paths);\n const conditions = filterBaseConditions(allConditions);\n const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n let className = hashFn(conditions, transformed.className);\n if (important)\n className = `${className}!`;\n classNames.add(className);\n });\n return Array.from(classNames).join(" ");\n });\n}\nfunction compactStyles(...styles) {\n return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n function resolve(styles) {\n const allStyles = compactStyles(...styles);\n if (allStyles.length === 1)\n return allStyles;\n return allStyles.map((style) => normalizeStyleObject(style, context));\n }\n function mergeCss(...styles) {\n return mergeProps(...resolve(styles));\n }\n function assignCss(...styles) {\n return Object.assign({}, ...resolve(styles));\n }\n return { mergeCss: memo(mergeCss), assignCss };\n}\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n if (property.startsWith("--"))\n return property;\n return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/is-css-function.ts\nvar fns = ["min", "max", "clamp", "calc"];\nvar fnRegExp = new RegExp(`^(${fns.join("|")})\\\\(.*\\\\)`);\nvar isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v);\n\n// src/is-css-unit.ts\nvar lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";\nvar lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`;\nvar lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);\nvar isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v);\n\n// src/is-css-var.ts\nvar isCssVar = (v) => typeof v === "string" && /^var\\(--.+\\)$/.test(v);\n\n// src/pattern-fns.ts\nvar patternFns = {\n map: mapObject,\n isCssFunction,\n isCssVar,\n isCssUnit\n};\nvar getPatternStyles = (pattern, styles) => {\n if (!pattern?.defaultValues)\n return styles;\n const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues;\n return Object.assign({}, defaults, compact(styles));\n};\n\n// src/slot.ts\nvar getSlotRecipes = (recipe = {}) => {\n const init = (slot) => ({\n className: [recipe.className, slot].filter(Boolean).join("__"),\n base: recipe.base?.[slot] ?? {},\n variants: {},\n defaultVariants: recipe.defaultVariants ?? {},\n compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n });\n const slots = recipe.slots ?? [];\n const recipeParts = slots.map((slot) => [slot, init(slot)]);\n for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n recipeParts.forEach(([slot, slotRecipe]) => {\n slotRecipe.variants[variantsKey] ??= {};\n slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n });\n }\n }\n return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n const descriptors = Object.getOwnPropertyDescriptors(props);\n const dKeys = Object.keys(descriptors);\n const split = (k) => {\n const clone = {};\n for (let i = 0; i < k.length; i++) {\n const key = k[i];\n if (descriptors[key]) {\n Object.defineProperty(clone, key, descriptors[key]);\n delete descriptors[key];\n }\n }\n return clone;\n };\n const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n return keys.map(fn).concat(split(dKeys));\n}\n\n// src/uniq.ts\nvar uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);\nexport {\n compact,\n createCss,\n createMergeCss,\n filterBaseConditions,\n getPatternStyles,\n getSlotCompoundVariant,\n getSlotRecipes,\n hypenateProperty,\n isBaseCondition,\n isObject,\n mapObject,\n memo,\n mergeProps,\n patternFns,\n splitProps,\n toHash,\n uniq,\n walkObject,\n withoutSpace\n};\n'
384
386
  };
385
387
 
386
388
  // src/artifacts/generated/normalize-html.mjs.json
@@ -598,7 +600,7 @@ function generateCreateRecipe(ctx) {
598
600
  ${ctx.file.import("compact, createCss, splitProps, uniq, withoutSpace", "../helpers")}
599
601
 
600
602
  export const createRecipe = (name, defaultVariants, compoundVariants) => {
601
- const getRecipeStyles = (variants) => {
603
+ const getVariantProps = (variants) => {
602
604
  return {
603
605
  [name]: '__ignore__',
604
606
  ...defaultVariants,
@@ -632,7 +634,7 @@ function generateCreateRecipe(ctx) {
632
634
  }
633
635
  })
634
636
 
635
- const recipeStyles = getRecipeStyles(variants)
637
+ const recipeStyles = getVariantProps(variants)
636
638
 
637
639
  if (withCompoundVariants) {
638
640
  const compoundVariantStyles = getCompoundVariantCss(compoundVariants, recipeStyles)
@@ -642,11 +644,13 @@ function generateCreateRecipe(ctx) {
642
644
  return recipeCss(recipeStyles)
643
645
  }
644
646
 
645
- return Object.assign(recipeFn, {
647
+ return {
648
+ recipeFn,
649
+ getVariantProps,
646
650
  __getCompoundVariantCss__: (variants) => {
647
- return getCompoundVariantCss(compoundVariants, getRecipeStyles(variants));
651
+ return getCompoundVariantCss(compoundVariants, getVariantProps(variants));
648
652
  },
649
- })
653
+ }
650
654
  }
651
655
 
652
656
  export const mergeRecipes = (recipeA, recipeB) => {
@@ -696,7 +700,7 @@ function generateRecipes(ctx, filters) {
696
700
  const ${baseName}SlotFns = /* @__PURE__ */ ${baseName}SlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, ${baseName}DefaultVariants, getSlotCompoundVariant(${baseName}CompoundVariants, slotName))])
697
701
 
698
702
  const ${baseName}Fn = memo((props = {}) => {
699
- return Object.fromEntries(${baseName}SlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
703
+ return Object.fromEntries(${baseName}SlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
700
704
  })
701
705
 
702
706
  const ${baseName}VariantKeys = ${stringify2(Object.keys(variantKeyMap))}
@@ -725,9 +729,10 @@ function generateRecipes(ctx, filters) {
725
729
 
726
730
  const ${baseName}VariantKeys = Object.keys(${baseName}VariantMap)
727
731
 
728
- export const ${baseName} = /* @__PURE__ */ Object.assign(memo(${baseName}Fn), {
732
+ export const ${baseName} = /* @__PURE__ */ Object.assign(memo(${baseName}Fn.recipeFn), {
729
733
  __recipe__: true,
730
734
  __name__: '${baseName}',
735
+ __getCompoundVariantCss__: ${baseName}Fn.__getCompoundVariantCss__,
731
736
  raw: (props) => props,
732
737
  variantKeys: ${baseName}VariantKeys,
733
738
  variantMap: ${baseName}VariantMap,
@@ -737,6 +742,7 @@ function generateRecipes(ctx, filters) {
737
742
  splitVariantProps(props) {
738
743
  return splitProps(props, ${baseName}VariantKeys)
739
744
  },
745
+ getVariantProps: ${baseName}Fn.getVariantProps,
740
746
  })
741
747
  `
742
748
  );
@@ -771,6 +777,7 @@ function generateRecipes(ctx, filters) {
771
777
  variantMap: ${upperName}VariantMap
772
778
  variantKeys: Array<keyof ${upperName}Variant>
773
779
  splitVariantProps<Props extends ${upperName}VariantProps>(props: Props): [${upperName}VariantProps, Pretty<DistributiveOmit<Props, keyof ${upperName}VariantProps>>]
780
+ getVariantProps: (props?: ${upperName}VariantProps) => ${upperName}VariantProps
774
781
  }
775
782
 
776
783
  ${description ? `/** ${description} */` : ""}
@@ -3474,7 +3481,7 @@ var pattern_d_ts_default = {
3474
3481
 
3475
3482
  // src/artifacts/generated/recipe.d.ts.json
3476
3483
  var recipe_d_ts_default = {
3477
- content: "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n ? {}\n : {\n [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined\n }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\n/**\n * Extract the variant as optional props from a `cva` function.\n * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type.\n */\nexport type RecipeVariantProps<\n T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\n/**\n * Extract the variants from a `cva` function.\n */\nexport type RecipeVariant<\n T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Exclude<Pretty<Required<RecipeVariantProps<T>>>, undefined>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n __type: RecipeSelection<T>\n variantKeys: (keyof T)[]\n variantMap: RecipeVariantMap<T>\n raw: (props?: RecipeSelection<T>) => SystemStyleObject\n config: RecipeConfig<T>\n splitVariantProps<Props extends RecipeSelection<T>>(\n props: Props,\n ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantRecord> {\n /**\n * The base styles of the recipe.\n */\n base?: SystemStyleObject\n /**\n * The multi-variant styles of the recipe.\n */\n variants?: T\n /**\n * The default variants of the recipe.\n */\n defaultVariants?: RecipeSelection<T>\n /**\n * The styles to apply when a combination of variants is selected.\n */\n compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n /**\n * The class name of the recipe.\n */\n className: string\n /**\n * The description of the recipe. This will be used in the JSDoc comment.\n */\n description?: string\n /**\n * The jsx elements to track for this recipe. Can be string or Regexp.\n *\n * @default capitalize(recipe.name)\n * @example ['Button', 'Link', /Button$/]\n */\n jsx?: Array<string | RegExp>\n /**\n * Variants to pre-generate, will be include in the final `config.staticCss`\n */\n staticCss?: RecipeRule[]\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n extends RecipeDefinition<T>,\n RecipeConfigMeta {}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n extends SlotRecipeVariantFn<S, T> {\n raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n variantKeys: (keyof T)[]\n variantMap: RecipeVariantMap<T>\n splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<\n S extends string = string,\n T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> {\n /**\n * An optional class name that can be used to target slots in the DOM.\n */\n className?: string\n /**\n * The parts/slots of the recipe.\n */\n slots: S[] | Readonly<S[]>\n /**\n * The base styles of the recipe.\n */\n base?: SlotRecord<S, SystemStyleObject>\n /**\n * The multi-variant styles of the recipe.\n */\n variants?: T\n /**\n * The default variants of the recipe.\n */\n defaultVariants?: RecipeSelection<T>\n /**\n * The styles to apply when a combination of variants is selected.\n */\n compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n S extends string = string,\n T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
3484
+ content: "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n ? {}\n : {\n [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined\n }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\n/**\n * Extract the variant as optional props from a `cva` function.\n * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type.\n */\nexport type RecipeVariantProps<\n T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\n/**\n * Extract the variants from a `cva` function.\n */\nexport type RecipeVariant<\n T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Exclude<Pretty<Required<RecipeVariantProps<T>>>, undefined>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n __type: RecipeSelection<T>\n variantKeys: (keyof T)[]\n variantMap: RecipeVariantMap<T>\n raw: (props?: RecipeSelection<T>) => SystemStyleObject\n config: RecipeConfig<T>\n splitVariantProps<Props extends RecipeSelection<T>>(\n props: Props,\n ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantRecord> {\n /**\n * The base styles of the recipe.\n */\n base?: SystemStyleObject\n /**\n * The multi-variant styles of the recipe.\n */\n variants?: T\n /**\n * The default variants of the recipe.\n */\n defaultVariants?: RecipeSelection<T>\n /**\n * The styles to apply when a combination of variants is selected.\n */\n compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n /**\n * The class name of the recipe.\n */\n className: string\n /**\n * The description of the recipe. This will be used in the JSDoc comment.\n */\n description?: string\n /**\n * The jsx elements to track for this recipe. Can be string or Regexp.\n *\n * @default capitalize(recipe.name)\n * @example ['Button', 'Link', /Button$/]\n */\n jsx?: Array<string | RegExp>\n /**\n * Variants to pre-generate, will be include in the final `config.staticCss`\n */\n staticCss?: RecipeRule[]\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n extends RecipeDefinition<T>,\n RecipeConfigMeta {}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n extends SlotRecipeVariantFn<S, T> {\n raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n variantKeys: (keyof T)[]\n variantMap: RecipeVariantMap<T>\n getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<\n S extends string = string,\n T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> {\n /**\n * An optional class name that can be used to target slots in the DOM.\n */\n className?: string\n /**\n * The parts/slots of the recipe.\n */\n slots: S[] | Readonly<S[]>\n /**\n * The base styles of the recipe.\n */\n base?: SlotRecord<S, SystemStyleObject>\n /**\n * The multi-variant styles of the recipe.\n */\n variants?: T\n /**\n * The default variants of the recipe.\n */\n defaultVariants?: RecipeSelection<T>\n /**\n * The styles to apply when a combination of variants is selected.\n */\n compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n S extends string = string,\n T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
3478
3485
  };
3479
3486
 
3480
3487
  // src/artifacts/generated/selectors.d.ts.json
@@ -3660,7 +3667,9 @@ function generateStyleProps(ctx) {
3660
3667
  if (strictPropertyList.has(key)) {
3661
3668
  union.push([utilityValue, "CssVars"].join(" | "));
3662
3669
  } else {
3663
- union.push([utilityValue, ctx.config.strictTokens ? "" : cssFallback].filter(Boolean).join(" | "));
3670
+ union.push(
3671
+ [utilityValue, "CssVars", ctx.config.strictTokens ? "" : cssFallback].filter(Boolean).join(" | ")
3672
+ );
3664
3673
  }
3665
3674
  } else {
3666
3675
  union.push([strictPropertyList.has(key) ? "CssVars" : "", cssFallback].filter(Boolean).join(" | "));
@@ -4480,39 +4489,7 @@ var generateArtifacts = (ctx, ids) => {
4480
4489
  var generateGlobalCss = (ctx, sheet) => {
4481
4490
  const { globalCss = {} } = ctx.config;
4482
4491
  sheet.processGlobalCss({
4483
- ":root": {
4484
- "--made-with-panda": `'\u{1F43C}'`
4485
- },
4486
- "*, *::before, *::after, ::backdrop": {
4487
- "--blur": "/*-*/ /*-*/",
4488
- "--brightness": "/*-*/ /*-*/",
4489
- "--contrast": "/*-*/ /*-*/",
4490
- "--grayscale": "/*-*/ /*-*/",
4491
- "--hue-rotate": "/*-*/ /*-*/",
4492
- "--invert": "/*-*/ /*-*/",
4493
- "--saturate": "/*-*/ /*-*/",
4494
- "--sepia": "/*-*/ /*-*/",
4495
- "--drop-shadow": "/*-*/ /*-*/",
4496
- "--backdrop-blur": "/*-*/ /*-*/",
4497
- "--backdrop-brightness": "/*-*/ /*-*/",
4498
- "--backdrop-contrast": "/*-*/ /*-*/",
4499
- "--backdrop-grayscale": "/*-*/ /*-*/",
4500
- "--backdrop-hue-rotate": "/*-*/ /*-*/",
4501
- "--backdrop-invert": "/*-*/ /*-*/",
4502
- "--backdrop-opacity": "/*-*/ /*-*/",
4503
- "--backdrop-saturate": "/*-*/ /*-*/",
4504
- "--backdrop-sepia": "/*-*/ /*-*/",
4505
- "--scroll-snap-strictness": "proximity",
4506
- "--border-spacing-x": 0,
4507
- "--border-spacing-y": 0,
4508
- "--translate-x": 0,
4509
- "--translate-y": 0,
4510
- "--rotate": 0,
4511
- "--skew-x": 0,
4512
- "--skew-y": 0,
4513
- "--scale-x": 1,
4514
- "--scale-y": 1
4515
- }
4492
+ ":root": { "--made-with-panda": `'\u{1F43C}'` }
4516
4493
  });
4517
4494
  sheet.processGlobalCss(globalCss);
4518
4495
  };
@@ -4562,93 +4539,141 @@ function generateResetCss(ctx, sheet) {
4562
4539
  selector = `&${scope}`;
4563
4540
  }
4564
4541
  const scoped = {
4565
- "*": { margin: "0px", padding: "0px", font: "inherit" },
4566
- "*, *::before, *::after": {
4542
+ "*, ::before, ::after, ::backdrop, ::first-letter, ::file-selector-button": {
4543
+ margin: "0px",
4544
+ padding: "0px",
4567
4545
  boxSizing: "border-box",
4568
4546
  borderWidth: "0px",
4569
4547
  borderStyle: "solid",
4570
4548
  borderColor: "var(--global-color-border, currentColor)"
4571
4549
  },
4572
- hr: { height: "0px", color: "inherit", borderTopWidth: "1px" },
4573
- body: { height: "100%" },
4574
- img: { borderStyle: "none" },
4575
- "img, svg, video, canvas, audio, iframe, embed, object": {
4550
+ hr: {
4551
+ height: "0px",
4552
+ color: "inherit",
4553
+ borderTopWidth: "1px"
4554
+ },
4555
+ body: {
4556
+ height: "100%",
4557
+ lineHeight: "inherit"
4558
+ },
4559
+ img: {
4560
+ borderStyle: "none"
4561
+ },
4562
+ "img, svg, video, canvas, audio, iframe, embed, object": {
4576
4563
  display: "block",
4577
4564
  verticalAlign: "middle"
4578
4565
  },
4579
- "img, video": { maxWidth: "100%", height: "auto" },
4580
- "p, h1, h2, h3, h4, h5, h6": { overflowWrap: "break-word" },
4581
- "ol, ul": { listStyle: "none" },
4582
- "code, kbd, pre, samp": { fontSize: "1em" },
4583
- "button, [type='button'], [type='reset'], [type='submit']": {
4584
- WebkitAppearance: "button",
4585
- backgroundColor: "transparent",
4586
- backgroundImage: "none"
4566
+ "img, video": {
4567
+ maxWidth: "100%",
4568
+ height: "auto"
4569
+ },
4570
+ "h1, h2, h3, h4, h5, h6": {
4571
+ fontSize: "inherit",
4572
+ fontWeight: "inherit",
4573
+ textWrap: "balance"
4574
+ },
4575
+ "p, h1, h2, h3, h4, h5, h6": {
4576
+ overflowWrap: "break-word"
4577
+ },
4578
+ "ol, ul, menu": {
4579
+ listStyle: "none"
4580
+ },
4581
+ "button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button": {
4582
+ appearance: "button"
4583
+ },
4584
+ "button, input, optgroup, select, textarea, ::file-selector-button": {
4585
+ font: "inherit",
4586
+ fontFeatureSettings: "inherit",
4587
+ fontVariationSettings: "inherit",
4588
+ letterSpacing: "inherit",
4589
+ color: "inherit",
4590
+ background: "transparent"
4591
+ },
4592
+ "::placeholder": {
4593
+ opacity: 1,
4594
+ "--placeholder-fallback": "color-mix(in srgb, currentColor 50%, transparent)",
4595
+ color: "var(--global-color-placeholder, var(--placeholder-fallback))"
4596
+ },
4597
+ "select, textarea, input:where(:not([type='button'], [type='reset'], [type='submit']))": {
4598
+ borderWidth: "1px",
4599
+ borderStyle: "solid"
4600
+ },
4601
+ textarea: {
4602
+ resize: "vertical"
4587
4603
  },
4588
- "button, input, optgroup, select, textarea": { color: "inherit" },
4589
- "button, select": { textTransform: "none" },
4590
4604
  table: {
4591
4605
  textIndent: "0px",
4592
4606
  borderColor: "inherit",
4593
4607
  borderCollapse: "collapse"
4594
4608
  },
4595
- "input::placeholder, textarea::placeholder": {
4596
- opacity: 1,
4597
- color: "var(--global-color-placeholder, #9ca3af)"
4609
+ summary: {
4610
+ display: "list-item"
4611
+ },
4612
+ small: {
4613
+ fontSize: "80%"
4598
4614
  },
4599
- textarea: { resize: "vertical" },
4600
- summary: { display: "list-item" },
4601
- small: { fontSize: "80%" },
4602
- "sub, sup": {
4615
+ "sub, sup": {
4603
4616
  fontSize: "75%",
4604
4617
  lineHeight: 0,
4605
4618
  position: "relative",
4606
4619
  verticalAlign: "baseline"
4607
4620
  },
4608
- sub: { bottom: "-0.25em" },
4609
- sup: { top: "-0.5em" },
4610
- dialog: { padding: "0px" },
4611
- a: { color: "inherit", textDecoration: "inherit" },
4612
- "abbr:where([title])": { textDecoration: "underline dotted" },
4613
- "b, strong": { fontWeight: "bolder" },
4614
- "code, kbd, samp, pre": {
4615
- fontSize: "1em",
4616
- "--font-mono-fallback": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New'",
4617
- fontFamily: "var(--global-font-mono, var(--font-mono-fallback))"
4621
+ sub: {
4622
+ bottom: "-0.25em"
4618
4623
  },
4619
- 'input[type="text"], input[type="email"], input[type="search"], input[type="password"]': {
4620
- WebkitAppearance: "none",
4621
- MozAppearance: "none"
4624
+ sup: {
4625
+ top: "-0.5em"
4622
4626
  },
4623
- "input[type='search']": {
4624
- WebkitAppearance: "textfield",
4625
- outlineOffset: "-2px"
4627
+ dialog: {
4628
+ padding: "0px"
4626
4629
  },
4627
- "::-webkit-search-decoration, ::-webkit-search-cancel-button": {
4628
- WebkitAppearance: "none"
4630
+ a: {
4631
+ color: "inherit",
4632
+ textDecoration: "inherit"
4633
+ },
4634
+ "abbr:where([title])": {
4635
+ textDecoration: "underline dotted"
4629
4636
  },
4630
- "::-webkit-file-upload-button": {
4631
- WebkitAppearance: "button",
4632
- font: "inherit"
4637
+ "b, strong": {
4638
+ fontWeight: "bolder"
4633
4639
  },
4634
- 'input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button': {
4640
+ "code, kbd, samp, pre": {
4641
+ "--font-mono-fallback": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New'",
4642
+ fontFamily: "var(--global-font-mono, var(--font-mono-fallback))",
4643
+ fontSize: "1em",
4644
+ fontFeatureSettings: "normal",
4645
+ fontVariationSettings: "normal"
4646
+ },
4647
+ progress: {
4648
+ verticalAlign: "baseline"
4649
+ },
4650
+ "::-webkit-search-decoration, ::-webkit-search-cancel-button": {
4651
+ WebkitAppearance: "none"
4652
+ },
4653
+ "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
4635
4654
  height: "auto"
4636
4655
  },
4637
- "input[type='number']": { MozAppearance: "textfield" },
4638
- ":-moz-ui-invalid": { boxShadow: "none" },
4639
- ":-moz-focusring": { outline: "auto" },
4640
- "[hidden]": { display: "none !important" }
4656
+ ":-moz-ui-invalid": {
4657
+ boxShadow: "none"
4658
+ },
4659
+ ":-moz-focusring": {
4660
+ outline: "auto"
4661
+ },
4662
+ "[hidden]": {
4663
+ display: "none !important"
4664
+ }
4641
4665
  };
4642
4666
  const reset = {
4643
- [scope || "html"]: {
4644
- lineHeight: 1.5,
4667
+ [scope || "html, :host"]: {
4668
+ lineHeight: "1.5",
4645
4669
  "--font-fallback": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
4646
4670
  WebkitTextSizeAdjust: "100%",
4647
4671
  WebkitFontSmoothing: "antialiased",
4648
4672
  MozOsxFontSmoothing: "grayscale",
4649
4673
  MozTabSize: "[4]",
4650
4674
  tabSize: "[4]",
4651
- fontFamily: "var(--global-font-body, var(--font-fallback))"
4675
+ fontFamily: "var(--global-font-body, var(--font-fallback))",
4676
+ WebkitTapHighlightColor: "transparent"
4652
4677
  }
4653
4678
  };
4654
4679
  if (level === "element") {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pandacss/generator",
3
- "version": "0.36.1",
3
+ "version": "0.37.1",
4
4
  "description": "The css generator for css panda",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -37,12 +37,12 @@
37
37
  "pluralize": "8.0.0",
38
38
  "postcss": "8.4.35",
39
39
  "ts-pattern": "5.0.8",
40
- "@pandacss/core": "0.36.1",
41
- "@pandacss/is-valid-prop": "^0.36.1",
42
- "@pandacss/logger": "0.36.1",
43
- "@pandacss/shared": "0.36.1",
44
- "@pandacss/token-dictionary": "0.36.1",
45
- "@pandacss/types": "0.36.1"
40
+ "@pandacss/core": "0.37.1",
41
+ "@pandacss/is-valid-prop": "^0.37.1",
42
+ "@pandacss/logger": "0.37.1",
43
+ "@pandacss/shared": "0.37.1",
44
+ "@pandacss/token-dictionary": "0.37.1",
45
+ "@pandacss/types": "0.37.1"
46
46
  },
47
47
  "devDependencies": {
48
48
  "@types/pluralize": "0.0.33"