@mekari/pixel3-styled-system 0.0.5-dev.2 → 0.0.5

package/recipes/radio-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const radioSlotRecipeDefaultVariants = {}
@@ -20,9 +20,9 @@ const radioSlotRecipeSlotNames = [
 ]
 const radioSlotRecipeSlotFns = /* @__PURE__ */ radioSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, radioSlotRecipeDefaultVariants, getSlotCompoundVariant(radioSlotRecipeCompoundVariants, slotName))])
 
-const radioSlotRecipeFn = (props = {}) => {
+const radioSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(radioSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const radioSlotRecipeVariantKeys = []
 

package/recipes/segmented-control-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const segmentedControlSlotRecipeDefaultVariants = {}
@@ -32,9 +32,9 @@ const segmentedControlSlotRecipeSlotNames = [
 ]
 const segmentedControlSlotRecipeSlotFns = /* @__PURE__ */ segmentedControlSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, segmentedControlSlotRecipeDefaultVariants, getSlotCompoundVariant(segmentedControlSlotRecipeCompoundVariants, slotName))])
 
-const segmentedControlSlotRecipeFn = (props = {}) => {
+const segmentedControlSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(segmentedControlSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const segmentedControlSlotRecipeVariantKeys = []
 

package/recipes/select-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const selectSlotRecipeDefaultVariants = {
@@ -26,9 +26,9 @@ const selectSlotRecipeSlotNames = [
 ]
 const selectSlotRecipeSlotFns = /* @__PURE__ */ selectSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, selectSlotRecipeDefaultVariants, getSlotCompoundVariant(selectSlotRecipeCompoundVariants, slotName))])
 
-const selectSlotRecipeFn = (props = {}) => {
+const selectSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(selectSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const selectSlotRecipeVariantKeys = [
   "size"

package/recipes/selected-border-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const selectedBorderRecipeFn = /* @__PURE__ */ createRecipe('selected-border', {
@@ -73,7 +73,7 @@ const selectedBorderRecipeVariantMap = {
 
 const selectedBorderRecipeVariantKeys = Object.keys(selectedBorderRecipeVariantMap)
 
-export const selectedBorderRecipe = /* @__PURE__ */ Object.assign(selectedBorderRecipeFn, {
+export const selectedBorderRecipe = /* @__PURE__ */ Object.assign(memo(selectedBorderRecipeFn), {
   __recipe__: true,
   __name__: 'selectedBorderRecipe',
   raw: (props) => props,

package/recipes/shared-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const sharedSlotRecipeDefaultVariants = {}
@@ -12,9 +12,9 @@ const sharedSlotRecipeSlotNames = [
 ]
 const sharedSlotRecipeSlotFns = /* @__PURE__ */ sharedSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, sharedSlotRecipeDefaultVariants, getSlotCompoundVariant(sharedSlotRecipeCompoundVariants, slotName))])
 
-const sharedSlotRecipeFn = (props = {}) => {
+const sharedSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(sharedSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const sharedSlotRecipeVariantKeys = []
 

package/recipes/spinner-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const spinnerRecipeFn = /* @__PURE__ */ createRecipe('spinner', {
@@ -14,7 +14,7 @@ const spinnerRecipeVariantMap = {
 
 const spinnerRecipeVariantKeys = Object.keys(spinnerRecipeVariantMap)
 
-export const spinnerRecipe = /* @__PURE__ */ Object.assign(spinnerRecipeFn, {
+export const spinnerRecipe = /* @__PURE__ */ Object.assign(memo(spinnerRecipeFn), {
   __recipe__: true,
   __name__: 'spinnerRecipe',
   raw: (props) => props,

package/recipes/tab-list-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const tabListRecipeFn = /* @__PURE__ */ createRecipe('tab-list', {}, [])
@@ -7,7 +7,7 @@ const tabListRecipeVariantMap = {}
 
 const tabListRecipeVariantKeys = Object.keys(tabListRecipeVariantMap)
 
-export const tabListRecipe = /* @__PURE__ */ Object.assign(tabListRecipeFn, {
+export const tabListRecipe = /* @__PURE__ */ Object.assign(memo(tabListRecipeFn), {
   __recipe__: true,
   __name__: 'tabListRecipe',
   raw: (props) => props,

package/recipes/tab-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const tabRecipeFn = /* @__PURE__ */ createRecipe('tab', {
@@ -72,7 +72,7 @@ const tabRecipeVariantMap = {
 
 const tabRecipeVariantKeys = Object.keys(tabRecipeVariantMap)
 
-export const tabRecipe = /* @__PURE__ */ Object.assign(tabRecipeFn, {
+export const tabRecipe = /* @__PURE__ */ Object.assign(memo(tabRecipeFn), {
   __recipe__: true,
   __name__: 'tabRecipe',
   raw: (props) => props,

package/recipes/table-container-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const tableContainerRecipeFn = /* @__PURE__ */ createRecipe('table-container', {}, [])
@@ -7,7 +7,7 @@ const tableContainerRecipeVariantMap = {}
 
 const tableContainerRecipeVariantKeys = Object.keys(tableContainerRecipeVariantMap)
 
-export const tableContainerRecipe = /* @__PURE__ */ Object.assign(tableContainerRecipeFn, {
+export const tableContainerRecipe = /* @__PURE__ */ Object.assign(memo(tableContainerRecipeFn), {
   __recipe__: true,
   __name__: 'tableContainerRecipe',
   raw: (props) => props,

package/recipes/table-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const tableRecipeFn = /* @__PURE__ */ createRecipe('table', {}, [])
@@ -7,7 +7,7 @@ const tableRecipeVariantMap = {}
 
 const tableRecipeVariantKeys = Object.keys(tableRecipeVariantMap)
 
-export const tableRecipe = /* @__PURE__ */ Object.assign(tableRecipeFn, {
+export const tableRecipe = /* @__PURE__ */ Object.assign(memo(tableRecipeFn), {
   __recipe__: true,
   __name__: 'tableRecipe',
   raw: (props) => props,

package/recipes/tag-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const tagSlotRecipeDefaultVariants = {
@@ -44,9 +44,9 @@ const tagSlotRecipeSlotNames = [
 ]
 const tagSlotRecipeSlotFns = /* @__PURE__ */ tagSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, tagSlotRecipeDefaultVariants, getSlotCompoundVariant(tagSlotRecipeCompoundVariants, slotName))])
 
-const tagSlotRecipeFn = (props = {}) => {
+const tagSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(tagSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const tagSlotRecipeVariantKeys = [
   "size",

package/recipes/text-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const textRecipeFn = /* @__PURE__ */ createRecipe('text', {
@@ -25,7 +25,7 @@ const textRecipeVariantMap = {
 
 const textRecipeVariantKeys = Object.keys(textRecipeVariantMap)
 
-export const textRecipe = /* @__PURE__ */ Object.assign(textRecipeFn, {
+export const textRecipe = /* @__PURE__ */ Object.assign(memo(textRecipeFn), {
   __recipe__: true,
   __name__: 'textRecipe',
   raw: (props) => props,

package/recipes/textarea-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const textareaRecipeFn = /* @__PURE__ */ createRecipe('textarea', {}, [])
@@ -11,7 +11,7 @@ const textareaRecipeVariantMap = {
 
 const textareaRecipeVariantKeys = Object.keys(textareaRecipeVariantMap)
 
-export const textareaRecipe = /* @__PURE__ */ Object.assign(textareaRecipeFn, {
+export const textareaRecipe = /* @__PURE__ */ Object.assign(memo(textareaRecipeFn), {
   __recipe__: true,
   __name__: 'textareaRecipe',
   raw: (props) => props,

package/recipes/toast-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const toastSlotRecipeDefaultVariants = {
@@ -39,9 +39,9 @@ const toastSlotRecipeSlotNames = [
 ]
 const toastSlotRecipeSlotFns = /* @__PURE__ */ toastSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, toastSlotRecipeDefaultVariants, getSlotCompoundVariant(toastSlotRecipeCompoundVariants, slotName))])
 
-const toastSlotRecipeFn = (props = {}) => {
+const toastSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(toastSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const toastSlotRecipeVariantKeys = [
   "variant"

package/recipes/toggle-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const toggleSlotRecipeDefaultVariants = {}
@@ -20,9 +20,9 @@ const toggleSlotRecipeSlotNames = [
 ]
 const toggleSlotRecipeSlotFns = /* @__PURE__ */ toggleSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, toggleSlotRecipeDefaultVariants, getSlotCompoundVariant(toggleSlotRecipeCompoundVariants, slotName))])
 
-const toggleSlotRecipeFn = (props = {}) => {
+const toggleSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(toggleSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const toggleSlotRecipeVariantKeys = []
 

package/recipes/tooltip-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps } from '../helpers.mjs';
+import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const tooltipRecipeFn = /* @__PURE__ */ createRecipe('tooltip', {}, [])
@@ -7,7 +7,7 @@ const tooltipRecipeVariantMap = {}
 
 const tooltipRecipeVariantKeys = Object.keys(tooltipRecipeVariantMap)
 
-export const tooltipRecipe = /* @__PURE__ */ Object.assign(tooltipRecipeFn, {
+export const tooltipRecipe = /* @__PURE__ */ Object.assign(memo(tooltipRecipeFn), {
   __recipe__: true,
   __name__: 'tooltipRecipe',
   raw: (props) => props,

package/recipes/upload-list-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const uploadListSlotRecipeDefaultVariants = {}
@@ -20,9 +20,9 @@ const uploadListSlotRecipeSlotNames = [
 ]
 const uploadListSlotRecipeSlotFns = /* @__PURE__ */ uploadListSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, uploadListSlotRecipeDefaultVariants, getSlotCompoundVariant(uploadListSlotRecipeCompoundVariants, slotName))])
 
-const uploadListSlotRecipeFn = (props = {}) => {
+const uploadListSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(uploadListSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const uploadListSlotRecipeVariantKeys = []
 

package/recipes/upload-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const uploadSlotRecipeDefaultVariants = {}
@@ -16,9 +16,9 @@ const uploadSlotRecipeSlotNames = [
 ]
 const uploadSlotRecipeSlotFns = /* @__PURE__ */ uploadSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, uploadSlotRecipeDefaultVariants, getSlotCompoundVariant(uploadSlotRecipeCompoundVariants, slotName))])
 
-const uploadSlotRecipeFn = (props = {}) => {
+const uploadSlotRecipeFn = memo((props = {}) => {
   return Object.fromEntries(uploadSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
-}
+})
 
 const uploadSlotRecipeVariantKeys = []
 

package/tokens/tokens.d.ts

@@ -54,4 +54,4 @@ export type Tokens = {
 		animationName: AnimationName
 } & { [token: string]: never }
 
-export type TokenCategory = "zIndex" | "opacity" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "lineHeights" | "letterSpacings" | "sizes" | "shadows" | "spacing" | "radii" | "borders" | "durations" | "easings" | "animations" | "blurs" | "gradients" | "breakpoints" | "assets"
+export type TokenCategory = "aspectRatios" | "zIndex" | "opacity" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "lineHeights" | "letterSpacings" | "sizes" | "shadows" | "spacing" | "radii" | "borders" | "borderWidths" | "durations" | "easings" | "animations" | "blurs" | "gradients" | "breakpoints" | "assets"

package/types/conditions.d.ts

@@ -116,9 +116,9 @@ export interface Conditions {
 	"_inRange": string
 	/** `&:out-of-range` */
 	"_outOfRange": string
-	/** `&::placeholder` */
+	/** `&::placeholder, &[data-placeholder]` */
 	"_placeholder": string
-	/** `&:placeholder-shown` */
+	/** `&:is(:placeholder-shown, [data-placeholder-shown])` */
 	"_placeholderShown": string
 	/** `&:is([aria-pressed=true], [data-pressed])` */
 	"_pressed": string

package/types/pattern.d.ts

@@ -13,13 +13,20 @@ export type PatternProperty =
 
 export interface PatternHelpers {
   map: (value: any, fn: (value: string) => string | undefined) => any
+  isCssUnit: (value: any) => boolean
+  isCssVar: (value: any) => boolean
+  isCssFunction: (value: any) => boolean
 }
 
 export interface PatternProperties {
   [key: string]: PatternProperty
 }
 
-type Props<T> = Record<LiteralUnion<keyof T>, any>
+type InferProps<T> = Record<LiteralUnion<keyof T>, any>
+
+export type PatternDefaultValue<T> = Partial<InferProps<T>>
+
+export type PatternDefaultValueFn<T> = (props: InferProps<T>) => PatternDefaultValue<T>
 
 export interface PatternConfig<T extends PatternProperties = PatternProperties> {
   /**
@@ -35,10 +42,14 @@ export interface PatternConfig<T extends PatternProperties = PatternProperties>
    * The properties of the pattern.
    */
   properties?: T
+  /**
+   * The default values of the pattern.
+   */
+  defaultValues?: PatternDefaultValue<T> | PatternDefaultValueFn<T>
   /**
    * The css object this pattern will generate.
    */
-  transform?: (props: Props<T>, helpers: PatternHelpers) => SystemStyleObject
+  transform?: (props: InferProps<T>, helpers: PatternHelpers) => SystemStyleObject
   /**
    * The jsx element name this pattern will generate.
    */

package/types/prop-type.d.ts

@@ -4,7 +4,7 @@ import type { CssProperties } from './system-types';
 import type { Tokens } from '../tokens/index';
 
 interface PropertyValueTypes {
-	aspectRatio: "auto" | "square" | "landscape" | "portrait" | "wide" | "ultrawide" | "golden";
+	aspectRatio: Tokens["aspectRatios"];
 	zIndex: Tokens["zIndex"];
 	top: Tokens["spacing"];
 	left: Tokens["spacing"];
@@ -209,6 +209,7 @@ interface PropertyValueTypes {
 	strokeWidth: Tokens["borderWidths"];
 	srOnly: boolean;
 	debug: boolean;
+	containerName: Tokens["containerNames"] | CssProperties["containerName"];
 	colorPalette: "currentcolor" | "dark" | "white" | "background" | "overlay" | "brand" | "whiteAlpha" | "blackAlpha" | "gray" | "blue" | "red" | "green" | "orange" | "sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "lime" | "pink" | "apricot" | "aqua" | "leaf" | "fuchsia" | "ice" | "ash";
 	textStyle: "overline" | "body.sm" | "body.md" | "label.sm" | "label.md" | "h3" | "h2" | "h1";
 }
@@ -309,19 +310,101 @@ interface PropertyValueTypes {
 	y: Shorthand<"translateY">;
 }
 
+type StrictableProps =
+  | 'alignContent'
+  | 'alignItems'
+  | 'alignSelf'
+  | 'all'
+  | 'animationComposition'
+  | 'animationDirection'
+  | 'animationFillMode'
+  | 'appearance'
+  | 'backfaceVisibility'
+  | 'backgroundAttachment'
+  | 'backgroundClip'
+  | 'borderCollapse'
+  | 'border'
+  | 'borderBlock'
+  | 'borderBlockEnd'
+  | 'borderBlockStart'
+  | 'borderBottom'
+  | 'borderInline'
+  | 'borderInlineEnd'
+  | 'borderInlineStart'
+  | 'borderLeft'
+  | 'borderRight'
+  | 'borderTop'
+  | 'borderBlockEndStyle'
+  | 'borderBlockStartStyle'
+  | 'borderBlockStyle'
+  | 'borderBottomStyle'
+  | 'borderInlineEndStyle'
+  | 'borderInlineStartStyle'
+  | 'borderInlineStyle'
+  | 'borderLeftStyle'
+  | 'borderRightStyle'
+  | 'borderTopStyle'
+  | 'boxDecorationBreak'
+  | 'boxSizing'
+  | 'breakAfter'
+  | 'breakBefore'
+  | 'breakInside'
+  | 'captionSide'
+  | 'clear'
+  | 'columnFill'
+  | 'columnRuleStyle'
+  | 'contentVisibility'
+  | 'direction'
+  | 'display'
+  | 'emptyCells'
+  | 'flexDirection'
+  | 'flexWrap'
+  | 'float'
+  | 'fontKerning'
+  | 'forcedColorAdjust'
+  | 'isolation'
+  | 'lineBreak'
+  | 'mixBlendMode'
+  | 'objectFit'
+  | 'outlineStyle'
+  | 'overflow'
+  | 'overflowX'
+  | 'overflowY'
+  | 'overflowBlock'
+  | 'overflowInline'
+  | 'overflowWrap'
+  | 'pointerEvents'
+  | 'position'
+  | 'resize'
+  | 'scrollBehavior'
+  | 'touchAction'
+  | 'transformBox'
+  | 'transformStyle'
+  | 'userSelect'
+  | 'visibility'
+  | 'wordBreak'
+  | 'writingMode'
 
+type WithEscapeHatch<T> = T | `[${string}]`
 
-  type PropertyTypeValue<T extends string> = T extends keyof PropertyTypes
-    ? ConditionalValue<PropertyTypes[T] | CssValue<T> | (string & {})>
-    : never;
+type FilterVagueString<Key, Value> = Value extends boolean
+  ? Value
+  : Key extends StrictableProps
+    ? Value extends `${infer _}` ? Value : never
+    : Value
 
-  type CssPropertyValue<T extends string> = T extends keyof CssProperties
-    ? ConditionalValue<CssProperties[T] | (string & {})>
-    : never;
+type PropOrCondition<Key, Value> = ConditionalValue<Value | (string & {})>
 
-  export type PropertyValue<T extends string> = T extends keyof PropertyTypes
-    ? PropertyTypeValue<T>
-    : T extends keyof CssProperties
-      ? CssPropertyValue<T>
-      : ConditionalValue<string | number>
-  
+type PropertyTypeValue<T extends string> = T extends keyof PropertyTypes
+  ? PropOrCondition<T, PropertyTypes[T] | CssValue<T>>
+  : never;
+
+type CssPropertyValue<T extends string> = T extends keyof CssProperties
+  ? PropOrCondition<T, CssProperties[T]>
+  : never;
+
+export type PropertyValue<T extends string> = T extends keyof PropertyTypes
+  ? PropertyTypeValue<T>
+  : T extends keyof CssProperties
+    ? CssPropertyValue<T>
+    : PropOrCondition<T, string | number>

package/types/recipe.d.ts

@@ -47,7 +47,7 @@ export type RecipeCompoundVariant<T> = T & {
   css: SystemStyleObject
 }
 
-export interface RecipeDefinition<T extends RecipeVariantRecord> {
+export interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantRecord> {
   /**
    * The base styles of the recipe.
    */
@@ -118,7 +118,10 @@ export type SlotRecipeCompoundVariant<S extends string, T> = T & {
   css: SlotRecord<S, SystemStyleObject>
 }
 
-export interface SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> {
+export interface SlotRecipeDefinition<
+  S extends string = string,
+  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,
+> {
   /**
    * The parts/slots of the recipe.
    */

package/types/static-css.d.ts

@@ -33,9 +33,11 @@ export interface StaticCssOptions {
   /**
    * The css recipes to generate.
    */
-  recipes?: {
-    [recipe: string]: RecipeRule[]
-  }
+  recipes?:
+    | '*'
+    | {
+        [recipe: string]: RecipeRule[]
+      }
   /**
    * The css patterns to generate.
    */