@mekari/pixel3-styled-system 0.0.7-dev.3 → 0.0.8-dev.0

package/recipes/banner-icon-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const bannerIconSlotRecipeDefaultVariants = {}
@@ -17,10 +17,11 @@ const bannerIconSlotRecipeSlotNames = [
 const bannerIconSlotRecipeSlotFns = /* @__PURE__ */ bannerIconSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, bannerIconSlotRecipeDefaultVariants, getSlotCompoundVariant(bannerIconSlotRecipeCompoundVariants, slotName))])
 
 const bannerIconSlotRecipeFn = memo((props = {}) => {
-  return Object.fromEntries(bannerIconSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
+  return Object.fromEntries(bannerIconSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
 })
 
 const bannerIconSlotRecipeVariantKeys = []
+const getVariantProps = (variants) => ({ ...bannerIconSlotRecipeDefaultVariants, ...compact(variants) })
 
 export const bannerIconSlotRecipe = /* @__PURE__ */ Object.assign(bannerIconSlotRecipeFn, {
   __recipe__: false,
@@ -31,4 +32,5 @@ export const bannerIconSlotRecipe = /* @__PURE__ */ Object.assign(bannerIconSlot
   splitVariantProps(props) {
     return splitProps(props, bannerIconSlotRecipeVariantKeys)
   },
+  getVariantProps
 })

package/recipes/banner-link-recipe.d.ts

@@ -21,6 +21,7 @@ export interface BannerLinkRecipeRecipe {
   variantMap: BannerLinkRecipeVariantMap
   variantKeys: Array<keyof BannerLinkRecipeVariant>
   splitVariantProps<Props extends BannerLinkRecipeVariantProps>(props: Props): [BannerLinkRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof BannerLinkRecipeVariantProps>>]
+  getVariantProps: (props?: BannerLinkRecipeVariantProps) => BannerLinkRecipeVariantProps
 }
 
 

package/recipes/banner-link-recipe.mjs

@@ -7,9 +7,10 @@ const bannerLinkRecipeVariantMap = {}
 
 const bannerLinkRecipeVariantKeys = Object.keys(bannerLinkRecipeVariantMap)
 
-export const bannerLinkRecipe = /* @__PURE__ */ Object.assign(memo(bannerLinkRecipeFn), {
+export const bannerLinkRecipe = /* @__PURE__ */ Object.assign(memo(bannerLinkRecipeFn.recipeFn), {
   __recipe__: true,
   __name__: 'bannerLinkRecipe',
+  __getCompoundVariantCss__: bannerLinkRecipeFn.__getCompoundVariantCss__,
   raw: (props) => props,
   variantKeys: bannerLinkRecipeVariantKeys,
   variantMap: bannerLinkRecipeVariantMap,
@@ -19,4 +20,5 @@ export const bannerLinkRecipe = /* @__PURE__ */ Object.assign(memo(bannerLinkRec
   splitVariantProps(props) {
     return splitProps(props, bannerLinkRecipeVariantKeys)
   },
+  getVariantProps: bannerLinkRecipeFn.getVariantProps,
 })

package/recipes/banner-slot-recipe.d.ts

@@ -21,6 +21,7 @@ export interface BannerSlotRecipeRecipe {
   variantMap: BannerSlotRecipeVariantMap
   variantKeys: Array<keyof BannerSlotRecipeVariant>
   splitVariantProps<Props extends BannerSlotRecipeVariantProps>(props: Props): [BannerSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof BannerSlotRecipeVariantProps>>]
+  getVariantProps: (props?: BannerSlotRecipeVariantProps) => BannerSlotRecipeVariantProps
 }
 
 

package/recipes/banner-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const bannerSlotRecipeDefaultVariants = {
@@ -19,12 +19,13 @@ const bannerSlotRecipeSlotNames = [
 const bannerSlotRecipeSlotFns = /* @__PURE__ */ bannerSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, bannerSlotRecipeDefaultVariants, getSlotCompoundVariant(bannerSlotRecipeCompoundVariants, slotName))])
 
 const bannerSlotRecipeFn = memo((props = {}) => {
-  return Object.fromEntries(bannerSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
+  return Object.fromEntries(bannerSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
 })
 
 const bannerSlotRecipeVariantKeys = [
   "variant"
 ]
+const getVariantProps = (variants) => ({ ...bannerSlotRecipeDefaultVariants, ...compact(variants) })
 
 export const bannerSlotRecipe = /* @__PURE__ */ Object.assign(bannerSlotRecipeFn, {
   __recipe__: false,
@@ -42,4 +43,5 @@ export const bannerSlotRecipe = /* @__PURE__ */ Object.assign(bannerSlotRecipeFn
   splitVariantProps(props) {
     return splitProps(props, bannerSlotRecipeVariantKeys)
   },
+  getVariantProps
 })

package/recipes/banner-title-recipe.d.ts

@@ -21,6 +21,7 @@ export interface BannerTitleRecipeRecipe {
   variantMap: BannerTitleRecipeVariantMap
   variantKeys: Array<keyof BannerTitleRecipeVariant>
   splitVariantProps<Props extends BannerTitleRecipeVariantProps>(props: Props): [BannerTitleRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof BannerTitleRecipeVariantProps>>]
+  getVariantProps: (props?: BannerTitleRecipeVariantProps) => BannerTitleRecipeVariantProps
 }
 
 

package/recipes/banner-title-recipe.mjs

@@ -7,9 +7,10 @@ const bannerTitleRecipeVariantMap = {}
 
 const bannerTitleRecipeVariantKeys = Object.keys(bannerTitleRecipeVariantMap)
 
-export const bannerTitleRecipe = /* @__PURE__ */ Object.assign(memo(bannerTitleRecipeFn), {
+export const bannerTitleRecipe = /* @__PURE__ */ Object.assign(memo(bannerTitleRecipeFn.recipeFn), {
   __recipe__: true,
   __name__: 'bannerTitleRecipe',
+  __getCompoundVariantCss__: bannerTitleRecipeFn.__getCompoundVariantCss__,
   raw: (props) => props,
   variantKeys: bannerTitleRecipeVariantKeys,
   variantMap: bannerTitleRecipeVariantMap,
@@ -19,4 +20,5 @@ export const bannerTitleRecipe = /* @__PURE__ */ Object.assign(memo(bannerTitleR
   splitVariantProps(props) {
     return splitProps(props, bannerTitleRecipeVariantKeys)
   },
+  getVariantProps: bannerTitleRecipeFn.getVariantProps,
 })

package/recipes/broadcast-slot-recipe.d.ts

@@ -21,6 +21,7 @@ export interface BroadcastSlotRecipeRecipe {
   variantMap: BroadcastSlotRecipeVariantMap
   variantKeys: Array<keyof BroadcastSlotRecipeVariant>
   splitVariantProps<Props extends BroadcastSlotRecipeVariantProps>(props: Props): [BroadcastSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof BroadcastSlotRecipeVariantProps>>]
+  getVariantProps: (props?: BroadcastSlotRecipeVariantProps) => BroadcastSlotRecipeVariantProps
 }
 
 

package/recipes/broadcast-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const broadcastSlotRecipeDefaultVariants = {
@@ -43,12 +43,13 @@ const broadcastSlotRecipeSlotNames = [
 const broadcastSlotRecipeSlotFns = /* @__PURE__ */ broadcastSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, broadcastSlotRecipeDefaultVariants, getSlotCompoundVariant(broadcastSlotRecipeCompoundVariants, slotName))])
 
 const broadcastSlotRecipeFn = memo((props = {}) => {
-  return Object.fromEntries(broadcastSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
+  return Object.fromEntries(broadcastSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
 })
 
 const broadcastSlotRecipeVariantKeys = [
   "variant"
 ]
+const getVariantProps = (variants) => ({ ...broadcastSlotRecipeDefaultVariants, ...compact(variants) })
 
 export const broadcastSlotRecipe = /* @__PURE__ */ Object.assign(broadcastSlotRecipeFn, {
   __recipe__: false,
@@ -65,4 +66,5 @@ export const broadcastSlotRecipe = /* @__PURE__ */ Object.assign(broadcastSlotRe
   splitVariantProps(props) {
     return splitProps(props, broadcastSlotRecipeVariantKeys)
   },
+  getVariantProps
 })

package/recipes/button-group-recipe.d.ts

@@ -21,6 +21,7 @@ export interface ButtonGroupRecipeRecipe {
   variantMap: ButtonGroupRecipeVariantMap
   variantKeys: Array<keyof ButtonGroupRecipeVariant>
   splitVariantProps<Props extends ButtonGroupRecipeVariantProps>(props: Props): [ButtonGroupRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof ButtonGroupRecipeVariantProps>>]
+  getVariantProps: (props?: ButtonGroupRecipeVariantProps) => ButtonGroupRecipeVariantProps
 }
 
 

package/recipes/button-group-recipe.mjs

@@ -7,9 +7,10 @@ const buttonGroupRecipeVariantMap = {}
 
 const buttonGroupRecipeVariantKeys = Object.keys(buttonGroupRecipeVariantMap)
 
-export const buttonGroupRecipe = /* @__PURE__ */ Object.assign(memo(buttonGroupRecipeFn), {
+export const buttonGroupRecipe = /* @__PURE__ */ Object.assign(memo(buttonGroupRecipeFn.recipeFn), {
   __recipe__: true,
   __name__: 'buttonGroupRecipe',
+  __getCompoundVariantCss__: buttonGroupRecipeFn.__getCompoundVariantCss__,
   raw: (props) => props,
   variantKeys: buttonGroupRecipeVariantKeys,
   variantMap: buttonGroupRecipeVariantMap,
@@ -19,4 +20,5 @@ export const buttonGroupRecipe = /* @__PURE__ */ Object.assign(memo(buttonGroupR
   splitVariantProps(props) {
     return splitProps(props, buttonGroupRecipeVariantKeys)
   },
+  getVariantProps: buttonGroupRecipeFn.getVariantProps,
 })

package/recipes/button-recipe.d.ts

@@ -22,6 +22,7 @@ export interface ButtonRecipeRecipe {
   variantMap: ButtonRecipeVariantMap
   variantKeys: Array<keyof ButtonRecipeVariant>
   splitVariantProps<Props extends ButtonRecipeVariantProps>(props: Props): [ButtonRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof ButtonRecipeVariantProps>>]
+  getVariantProps: (props?: ButtonRecipeVariantProps) => ButtonRecipeVariantProps
 }
 
 

package/recipes/button-recipe.mjs

@@ -77,9 +77,10 @@ const buttonRecipeVariantMap = {
 
 const buttonRecipeVariantKeys = Object.keys(buttonRecipeVariantMap)
 
-export const buttonRecipe = /* @__PURE__ */ Object.assign(memo(buttonRecipeFn), {
+export const buttonRecipe = /* @__PURE__ */ Object.assign(memo(buttonRecipeFn.recipeFn), {
   __recipe__: true,
   __name__: 'buttonRecipe',
+  __getCompoundVariantCss__: buttonRecipeFn.__getCompoundVariantCss__,
   raw: (props) => props,
   variantKeys: buttonRecipeVariantKeys,
   variantMap: buttonRecipeVariantMap,
@@ -89,4 +90,5 @@ export const buttonRecipe = /* @__PURE__ */ Object.assign(memo(buttonRecipeFn),
   splitVariantProps(props) {
     return splitProps(props, buttonRecipeVariantKeys)
   },
+  getVariantProps: buttonRecipeFn.getVariantProps,
 })

package/recipes/calendar-panel-range-recipe.d.ts

@@ -21,6 +21,7 @@ export interface CalendarPanelRangeRecipeRecipe {
   variantMap: CalendarPanelRangeRecipeVariantMap
   variantKeys: Array<keyof CalendarPanelRangeRecipeVariant>
   splitVariantProps<Props extends CalendarPanelRangeRecipeVariantProps>(props: Props): [CalendarPanelRangeRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof CalendarPanelRangeRecipeVariantProps>>]
+  getVariantProps: (props?: CalendarPanelRangeRecipeVariantProps) => CalendarPanelRangeRecipeVariantProps
 }
 
 

package/recipes/calendar-panel-range-recipe.mjs

@@ -7,9 +7,10 @@ const calendarPanelRangeRecipeVariantMap = {}
 
 const calendarPanelRangeRecipeVariantKeys = Object.keys(calendarPanelRangeRecipeVariantMap)
 
-export const calendarPanelRangeRecipe = /* @__PURE__ */ Object.assign(memo(calendarPanelRangeRecipeFn), {
+export const calendarPanelRangeRecipe = /* @__PURE__ */ Object.assign(memo(calendarPanelRangeRecipeFn.recipeFn), {
   __recipe__: true,
   __name__: 'calendarPanelRangeRecipe',
+  __getCompoundVariantCss__: calendarPanelRangeRecipeFn.__getCompoundVariantCss__,
   raw: (props) => props,
   variantKeys: calendarPanelRangeRecipeVariantKeys,
   variantMap: calendarPanelRangeRecipeVariantMap,
@@ -19,4 +20,5 @@ export const calendarPanelRangeRecipe = /* @__PURE__ */ Object.assign(memo(calen
   splitVariantProps(props) {
     return splitProps(props, calendarPanelRangeRecipeVariantKeys)
   },
+  getVariantProps: calendarPanelRangeRecipeFn.getVariantProps,
 })

package/recipes/carousel-slot-recipe.d.ts

@@ -21,6 +21,7 @@ export interface CarouselSlotRecipeRecipe {
   variantMap: CarouselSlotRecipeVariantMap
   variantKeys: Array<keyof CarouselSlotRecipeVariant>
   splitVariantProps<Props extends CarouselSlotRecipeVariantProps>(props: Props): [CarouselSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof CarouselSlotRecipeVariantProps>>]
+  getVariantProps: (props?: CarouselSlotRecipeVariantProps) => CarouselSlotRecipeVariantProps
 }
 
 

package/recipes/carousel-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const carouselSlotRecipeDefaultVariants = {}
@@ -21,10 +21,11 @@ const carouselSlotRecipeSlotNames = [
 const carouselSlotRecipeSlotFns = /* @__PURE__ */ carouselSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, carouselSlotRecipeDefaultVariants, getSlotCompoundVariant(carouselSlotRecipeCompoundVariants, slotName))])
 
 const carouselSlotRecipeFn = memo((props = {}) => {
-  return Object.fromEntries(carouselSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
+  return Object.fromEntries(carouselSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
 })
 
 const carouselSlotRecipeVariantKeys = []
+const getVariantProps = (variants) => ({ ...carouselSlotRecipeDefaultVariants, ...compact(variants) })
 
 export const carouselSlotRecipe = /* @__PURE__ */ Object.assign(carouselSlotRecipeFn, {
   __recipe__: false,
@@ -35,4 +36,5 @@ export const carouselSlotRecipe = /* @__PURE__ */ Object.assign(carouselSlotReci
   splitVariantProps(props) {
     return splitProps(props, carouselSlotRecipeVariantKeys)
   },
+  getVariantProps
 })

package/recipes/chart-slot-recipe.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface ChartSlotRecipeVariant {
+  
+}
+
+type ChartSlotRecipeVariantMap = {
+  [key in keyof ChartSlotRecipeVariant]: Array<ChartSlotRecipeVariant[key]>
+}
+
+export type ChartSlotRecipeVariantProps = {
+  [key in keyof ChartSlotRecipeVariant]?: ConditionalValue<ChartSlotRecipeVariant[key]> | undefined
+}
+
+export interface ChartSlotRecipeRecipe {
+  __type: ChartSlotRecipeVariantProps
+  (props?: ChartSlotRecipeVariantProps): Pretty<Record<"root" | "chartHeader" | "chartWrapper" | "chartContainer" | "canvasContainer" | "chartLegend" | "legendWrapper" | "legendBox" | "chartTooltip" | "tooltipWrapper" | "tooltipRow" | "tooltipItem" | "tooltipBox", string>>
+  raw: (props?: ChartSlotRecipeVariantProps) => ChartSlotRecipeVariantProps
+  variantMap: ChartSlotRecipeVariantMap
+  variantKeys: Array<keyof ChartSlotRecipeVariant>
+  splitVariantProps<Props extends ChartSlotRecipeVariantProps>(props: Props): [ChartSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof ChartSlotRecipeVariantProps>>]
+  getVariantProps: (props?: ChartSlotRecipeVariantProps) => ChartSlotRecipeVariantProps
+}
+
+
+export declare const chartSlotRecipe: ChartSlotRecipeRecipe

package/recipes/chart-slot-recipe.mjs

@@ -0,0 +1,80 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const chartSlotRecipeDefaultVariants = {}
+const chartSlotRecipeCompoundVariants = []
+
+const chartSlotRecipeSlotNames = [
+  [
+    "root",
+    "chart__root"
+  ],
+  [
+    "chartHeader",
+    "chart__chartHeader"
+  ],
+  [
+    "chartWrapper",
+    "chart__chartWrapper"
+  ],
+  [
+    "chartContainer",
+    "chart__chartContainer"
+  ],
+  [
+    "canvasContainer",
+    "chart__canvasContainer"
+  ],
+  [
+    "chartLegend",
+    "chart__chartLegend"
+  ],
+  [
+    "legendWrapper",
+    "chart__legendWrapper"
+  ],
+  [
+    "legendBox",
+    "chart__legendBox"
+  ],
+  [
+    "chartTooltip",
+    "chart__chartTooltip"
+  ],
+  [
+    "tooltipWrapper",
+    "chart__tooltipWrapper"
+  ],
+  [
+    "tooltipRow",
+    "chart__tooltipRow"
+  ],
+  [
+    "tooltipItem",
+    "chart__tooltipItem"
+  ],
+  [
+    "tooltipBox",
+    "chart__tooltipBox"
+  ]
+]
+const chartSlotRecipeSlotFns = /* @__PURE__ */ chartSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, chartSlotRecipeDefaultVariants, getSlotCompoundVariant(chartSlotRecipeCompoundVariants, slotName))])
+
+const chartSlotRecipeFn = memo((props = {}) => {
+  return Object.fromEntries(chartSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const chartSlotRecipeVariantKeys = []
+const getVariantProps = (variants) => ({ ...chartSlotRecipeDefaultVariants, ...compact(variants) })
+
+export const chartSlotRecipe = /* @__PURE__ */ Object.assign(chartSlotRecipeFn, {
+  __recipe__: false,
+  __name__: 'chartSlotRecipe',
+  raw: (props) => props,
+  variantKeys: chartSlotRecipeVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps(props, chartSlotRecipeVariantKeys)
+  },
+  getVariantProps
+})

package/recipes/checkbox-slot-recipe.d.ts

@@ -21,6 +21,7 @@ export interface CheckboxSlotRecipeRecipe {
   variantMap: CheckboxSlotRecipeVariantMap
   variantKeys: Array<keyof CheckboxSlotRecipeVariant>
   splitVariantProps<Props extends CheckboxSlotRecipeVariantProps>(props: Props): [CheckboxSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof CheckboxSlotRecipeVariantProps>>]
+  getVariantProps: (props?: CheckboxSlotRecipeVariantProps) => CheckboxSlotRecipeVariantProps
 }
 
 

package/recipes/checkbox-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const checkboxSlotRecipeDefaultVariants = {}
@@ -21,10 +21,11 @@ const checkboxSlotRecipeSlotNames = [
 const checkboxSlotRecipeSlotFns = /* @__PURE__ */ checkboxSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, checkboxSlotRecipeDefaultVariants, getSlotCompoundVariant(checkboxSlotRecipeCompoundVariants, slotName))])
 
 const checkboxSlotRecipeFn = memo((props = {}) => {
-  return Object.fromEntries(checkboxSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
+  return Object.fromEntries(checkboxSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
 })
 
 const checkboxSlotRecipeVariantKeys = []
+const getVariantProps = (variants) => ({ ...checkboxSlotRecipeDefaultVariants, ...compact(variants) })
 
 export const checkboxSlotRecipe = /* @__PURE__ */ Object.assign(checkboxSlotRecipeFn, {
   __recipe__: false,
@@ -35,4 +36,5 @@ export const checkboxSlotRecipe = /* @__PURE__ */ Object.assign(checkboxSlotReci
   splitVariantProps(props) {
     return splitProps(props, checkboxSlotRecipeVariantKeys)
   },
+  getVariantProps
 })

package/recipes/create-recipe.mjs

@@ -5,7 +5,7 @@ import { cx } from '../css/cx.mjs';
 import { compact, createCss, splitProps, uniq, withoutSpace } from '../helpers.mjs';
 
 export const createRecipe = (name, defaultVariants, compoundVariants) => {
- const getRecipeStyles = (variants) => {
+ const getVariantProps = (variants) => {
    return {
      [name]: '__ignore__',
      ...defaultVariants,
@@ -34,11 +34,12 @@ export const createRecipe = (name, defaultVariants, compoundVariants) => {
      },
      utility: {
        prefix: "mp",
+       toHash: (path, hashFn) => hashFn(path.join(":")),
        transform,
      }
    })
 
-   const recipeStyles = getRecipeStyles(variants)
+   const recipeStyles = getVariantProps(variants)
 
    if (withCompoundVariants) {
      const compoundVariantStyles = getCompoundVariantCss(compoundVariants, recipeStyles)
@@ -48,11 +49,13 @@ export const createRecipe = (name, defaultVariants, compoundVariants) => {
    return recipeCss(recipeStyles)
   }
 
-   return Object.assign(recipeFn, {
+   return {
+     recipeFn,
+     getVariantProps,
      __getCompoundVariantCss__: (variants) => {
-       return getCompoundVariantCss(compoundVariants, getRecipeStyles(variants));
+       return getCompoundVariantCss(compoundVariants, getVariantProps(variants));
      },
-   })
+   }
 }
 
 export const mergeRecipes = (recipeA, recipeB) => {

package/recipes/date-item-recipe.d.ts

@@ -21,6 +21,7 @@ export interface DateItemRecipeRecipe {
   variantMap: DateItemRecipeVariantMap
   variantKeys: Array<keyof DateItemRecipeVariant>
   splitVariantProps<Props extends DateItemRecipeVariantProps>(props: Props): [DateItemRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DateItemRecipeVariantProps>>]
+  getVariantProps: (props?: DateItemRecipeVariantProps) => DateItemRecipeVariantProps
 }
 
 

package/recipes/date-item-recipe.mjs

@@ -22,9 +22,10 @@ const dateItemRecipeVariantMap = {
 
 const dateItemRecipeVariantKeys = Object.keys(dateItemRecipeVariantMap)
 
-export const dateItemRecipe = /* @__PURE__ */ Object.assign(memo(dateItemRecipeFn), {
+export const dateItemRecipe = /* @__PURE__ */ Object.assign(memo(dateItemRecipeFn.recipeFn), {
   __recipe__: true,
   __name__: 'dateItemRecipe',
+  __getCompoundVariantCss__: dateItemRecipeFn.__getCompoundVariantCss__,
   raw: (props) => props,
   variantKeys: dateItemRecipeVariantKeys,
   variantMap: dateItemRecipeVariantMap,
@@ -34,4 +35,5 @@ export const dateItemRecipe = /* @__PURE__ */ Object.assign(memo(dateItemRecipeF
   splitVariantProps(props) {
     return splitProps(props, dateItemRecipeVariantKeys)
   },
+  getVariantProps: dateItemRecipeFn.getVariantProps,
 })

package/recipes/date-picker-slot-recipe.d.ts

@@ -21,6 +21,7 @@ export interface DatePickerSlotRecipeRecipe {
   variantMap: DatePickerSlotRecipeVariantMap
   variantKeys: Array<keyof DatePickerSlotRecipeVariant>
   splitVariantProps<Props extends DatePickerSlotRecipeVariantProps>(props: Props): [DatePickerSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DatePickerSlotRecipeVariantProps>>]
+  getVariantProps: (props?: DatePickerSlotRecipeVariantProps) => DatePickerSlotRecipeVariantProps
 }
 
 

package/recipes/date-picker-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const datePickerSlotRecipeDefaultVariants = {}
@@ -17,10 +17,11 @@ const datePickerSlotRecipeSlotNames = [
 const datePickerSlotRecipeSlotFns = /* @__PURE__ */ datePickerSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, datePickerSlotRecipeDefaultVariants, getSlotCompoundVariant(datePickerSlotRecipeCompoundVariants, slotName))])
 
 const datePickerSlotRecipeFn = memo((props = {}) => {
-  return Object.fromEntries(datePickerSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
+  return Object.fromEntries(datePickerSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
 })
 
 const datePickerSlotRecipeVariantKeys = []
+const getVariantProps = (variants) => ({ ...datePickerSlotRecipeDefaultVariants, ...compact(variants) })
 
 export const datePickerSlotRecipe = /* @__PURE__ */ Object.assign(datePickerSlotRecipeFn, {
   __recipe__: false,
@@ -31,4 +32,5 @@ export const datePickerSlotRecipe = /* @__PURE__ */ Object.assign(datePickerSlot
   splitVariantProps(props) {
     return splitProps(props, datePickerSlotRecipeVariantKeys)
   },
+  getVariantProps
 })

package/recipes/day-item-recipe.d.ts

@@ -21,6 +21,7 @@ export interface DayItemRecipeRecipe {
   variantMap: DayItemRecipeVariantMap
   variantKeys: Array<keyof DayItemRecipeVariant>
   splitVariantProps<Props extends DayItemRecipeVariantProps>(props: Props): [DayItemRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DayItemRecipeVariantProps>>]
+  getVariantProps: (props?: DayItemRecipeVariantProps) => DayItemRecipeVariantProps
 }
 
 

package/recipes/day-item-recipe.mjs

@@ -7,9 +7,10 @@ const dayItemRecipeVariantMap = {}
 
 const dayItemRecipeVariantKeys = Object.keys(dayItemRecipeVariantMap)
 
-export const dayItemRecipe = /* @__PURE__ */ Object.assign(memo(dayItemRecipeFn), {
+export const dayItemRecipe = /* @__PURE__ */ Object.assign(memo(dayItemRecipeFn.recipeFn), {
   __recipe__: true,
   __name__: 'dayItemRecipe',
+  __getCompoundVariantCss__: dayItemRecipeFn.__getCompoundVariantCss__,
   raw: (props) => props,
   variantKeys: dayItemRecipeVariantKeys,
   variantMap: dayItemRecipeVariantMap,
@@ -19,4 +20,5 @@ export const dayItemRecipe = /* @__PURE__ */ Object.assign(memo(dayItemRecipeFn)
   splitVariantProps(props) {
     return splitProps(props, dayItemRecipeVariantKeys)
   },
+  getVariantProps: dayItemRecipeFn.getVariantProps,
 })

package/recipes/divider-recipe.d.ts

@@ -21,6 +21,7 @@ export interface DividerRecipeRecipe {
   variantMap: DividerRecipeVariantMap
   variantKeys: Array<keyof DividerRecipeVariant>
   splitVariantProps<Props extends DividerRecipeVariantProps>(props: Props): [DividerRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DividerRecipeVariantProps>>]
+  getVariantProps: (props?: DividerRecipeVariantProps) => DividerRecipeVariantProps
 }
 
 

package/recipes/divider-recipe.mjs

@@ -14,9 +14,10 @@ const dividerRecipeVariantMap = {
 
 const dividerRecipeVariantKeys = Object.keys(dividerRecipeVariantMap)
 
-export const dividerRecipe = /* @__PURE__ */ Object.assign(memo(dividerRecipeFn), {
+export const dividerRecipe = /* @__PURE__ */ Object.assign(memo(dividerRecipeFn.recipeFn), {
   __recipe__: true,
   __name__: 'dividerRecipe',
+  __getCompoundVariantCss__: dividerRecipeFn.__getCompoundVariantCss__,
   raw: (props) => props,
   variantKeys: dividerRecipeVariantKeys,
   variantMap: dividerRecipeVariantMap,
@@ -26,4 +27,5 @@ export const dividerRecipe = /* @__PURE__ */ Object.assign(memo(dividerRecipeFn)
   splitVariantProps(props) {
     return splitProps(props, dividerRecipeVariantKeys)
   },
+  getVariantProps: dividerRecipeFn.getVariantProps,
 })

package/recipes/dropzone-slot-recipe.d.ts

@@ -21,6 +21,7 @@ export interface DropzoneSlotRecipeRecipe {
   variantMap: DropzoneSlotRecipeVariantMap
   variantKeys: Array<keyof DropzoneSlotRecipeVariant>
   splitVariantProps<Props extends DropzoneSlotRecipeVariantProps>(props: Props): [DropzoneSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DropzoneSlotRecipeVariantProps>>]
+  getVariantProps: (props?: DropzoneSlotRecipeVariantProps) => DropzoneSlotRecipeVariantProps
 }
 
 

package/recipes/dropzone-slot-recipe.mjs

@@ -1,4 +1,4 @@
-import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const dropzoneSlotRecipeDefaultVariants = {}
@@ -53,10 +53,11 @@ const dropzoneSlotRecipeSlotNames = [
 const dropzoneSlotRecipeSlotFns = /* @__PURE__ */ dropzoneSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dropzoneSlotRecipeDefaultVariants, getSlotCompoundVariant(dropzoneSlotRecipeCompoundVariants, slotName))])
 
 const dropzoneSlotRecipeFn = memo((props = {}) => {
-  return Object.fromEntries(dropzoneSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
+  return Object.fromEntries(dropzoneSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
 })
 
 const dropzoneSlotRecipeVariantKeys = []
+const getVariantProps = (variants) => ({ ...dropzoneSlotRecipeDefaultVariants, ...compact(variants) })
 
 export const dropzoneSlotRecipe = /* @__PURE__ */ Object.assign(dropzoneSlotRecipeFn, {
   __recipe__: false,
@@ -67,4 +68,5 @@ export const dropzoneSlotRecipe = /* @__PURE__ */ Object.assign(dropzoneSlotReci
   splitVariantProps(props) {
     return splitProps(props, dropzoneSlotRecipeVariantKeys)
   },
+  getVariantProps
 })

package/recipes/form-control-slot-recipe.d.ts

@@ -21,6 +21,7 @@ export interface FormControlSlotRecipeRecipe {
   variantMap: FormControlSlotRecipeVariantMap
   variantKeys: Array<keyof FormControlSlotRecipeVariant>
   splitVariantProps<Props extends FormControlSlotRecipeVariantProps>(props: Props): [FormControlSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof FormControlSlotRecipeVariantProps>>]
+  getVariantProps: (props?: FormControlSlotRecipeVariantProps) => FormControlSlotRecipeVariantProps
 }
 
 

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

@@ -1,4 +1,4 @@
-import { getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
 import { createRecipe } from './create-recipe.mjs';
 
 const formControlSlotRecipeDefaultVariants = {}
@@ -29,10 +29,11 @@ const formControlSlotRecipeSlotNames = [
 const formControlSlotRecipeSlotFns = /* @__PURE__ */ formControlSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, formControlSlotRecipeDefaultVariants, getSlotCompoundVariant(formControlSlotRecipeCompoundVariants, slotName))])
 
 const formControlSlotRecipeFn = memo((props = {}) => {
-  return Object.fromEntries(formControlSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
+  return Object.fromEntries(formControlSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
 })
 
 const formControlSlotRecipeVariantKeys = []
+const getVariantProps = (variants) => ({ ...formControlSlotRecipeDefaultVariants, ...compact(variants) })
 
 export const formControlSlotRecipe = /* @__PURE__ */ Object.assign(formControlSlotRecipeFn, {
   __recipe__: false,
@@ -43,4 +44,5 @@ export const formControlSlotRecipe = /* @__PURE__ */ Object.assign(formControlSl
   splitVariantProps(props) {
     return splitProps(props, formControlSlotRecipeVariantKeys)
   },
+  getVariantProps
 })