@mekari/pixel3-styled-system 0.0.1 → 0.0.2

package/jsx/link-overlay.mjs

@@ -1,16 +1,18 @@
 import { defineComponent, h, computed } from 'vue'
-import { styled } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
 import { getLinkOverlayStyle } from '../patterns/link-overlay.mjs';
+import { Pixel } from './factory.mjs';
 
-export const LinkOverlay = defineComponent({
+export const LinkOverlay = /* @__PURE__ */ defineComponent({
     name: 'LinkOverlay',
     inheritAttrs: false,
     props: [],
     setup(props, { attrs, slots }) {
-        const styleProps = computed(() => getLinkOverlayStyle(props))
-        return () => {
-            const computedProps = { ...styleProps.value, ...attrs }
-            return h(styled.a, computedProps, slots)
-        }
+      const styleProps = computed(() => getLinkOverlayStyle(props))
+
+return () => {
+  const mergedProps = { ...styleProps.value, ...attrs }
+  return h(Pixel.a, mergedProps, slots)
+}
     }
 })

package/jsx/spacer.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import type { FunctionalComponent } from 'vue'
 import type { SpacerProperties } from '../patterns/spacer';
-import type { HTMLStyledProps } from '../types/jsx';
+import type { HTMLPixelProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface SpacerProps extends SpacerProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof SpacerProperties > {}
+export interface SpacerProps extends SpacerProperties, DistributiveOmit<HTMLPixelProps<'div'>, keyof SpacerProperties > {}
 
 
 export declare const Spacer: FunctionalComponent<SpacerProps>

package/jsx/spacer.mjs

@@ -1,16 +1,18 @@
 import { defineComponent, h, computed } from 'vue'
-import { styled } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
 import { getSpacerStyle } from '../patterns/spacer.mjs';
+import { Pixel } from './factory.mjs';
 
-export const Spacer = defineComponent({
+export const Spacer = /* @__PURE__ */ defineComponent({
     name: 'Spacer',
     inheritAttrs: false,
     props: ["size"],
     setup(props, { attrs, slots }) {
-        const styleProps = computed(() => getSpacerStyle(props))
-        return () => {
-            const computedProps = { ...styleProps.value, ...attrs }
-            return h(styled.div, computedProps, slots)
-        }
+      const styleProps = computed(() => getSpacerStyle(props))
+
+return () => {
+  const mergedProps = { ...styleProps.value, ...attrs }
+  return h(Pixel.div, mergedProps, slots)
+}
     }
 })

package/jsx/square.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import type { FunctionalComponent } from 'vue'
 import type { SquareProperties } from '../patterns/square';
-import type { HTMLStyledProps } from '../types/jsx';
+import type { HTMLPixelProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface SquareProps extends SquareProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof SquareProperties > {}
+export interface SquareProps extends SquareProperties, DistributiveOmit<HTMLPixelProps<'div'>, keyof SquareProperties > {}
 
 
 export declare const Square: FunctionalComponent<SquareProps>

package/jsx/square.mjs

@@ -1,16 +1,18 @@
 import { defineComponent, h, computed } from 'vue'
-import { styled } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
 import { getSquareStyle } from '../patterns/square.mjs';
+import { Pixel } from './factory.mjs';
 
-export const Square = defineComponent({
+export const Square = /* @__PURE__ */ defineComponent({
     name: 'Square',
     inheritAttrs: false,
     props: ["size"],
     setup(props, { attrs, slots }) {
-        const styleProps = computed(() => getSquareStyle(props))
-        return () => {
-            const computedProps = { ...styleProps.value, ...attrs }
-            return h(styled.div, computedProps, slots)
-        }
+      const styleProps = computed(() => getSquareStyle(props))
+
+return () => {
+  const mergedProps = { ...styleProps.value, ...attrs }
+  return h(Pixel.div, mergedProps, slots)
+}
     }
 })

package/jsx/stack.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import type { FunctionalComponent } from 'vue'
 import type { StackProperties } from '../patterns/stack';
-import type { HTMLStyledProps } from '../types/jsx';
+import type { HTMLPixelProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface StackProps extends StackProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof StackProperties > {}
+export interface StackProps extends StackProperties, DistributiveOmit<HTMLPixelProps<'div'>, keyof StackProperties > {}
 
 
 export declare const Stack: FunctionalComponent<StackProps>

package/jsx/stack.mjs

@@ -1,16 +1,18 @@
 import { defineComponent, h, computed } from 'vue'
-import { styled } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
 import { getStackStyle } from '../patterns/stack.mjs';
+import { Pixel } from './factory.mjs';
 
-export const Stack = defineComponent({
+export const Stack = /* @__PURE__ */ defineComponent({
     name: 'Stack',
     inheritAttrs: false,
-    props: ["align", "justify", "direction", "gap"],
+    props: ["align","justify","direction","gap"],
     setup(props, { attrs, slots }) {
-        const styleProps = computed(() => getStackStyle(props))
-        return () => {
-            const computedProps = { ...styleProps.value, ...attrs }
-            return h(styled.div, computedProps, slots)
-        }
+      const styleProps = computed(() => getStackStyle(props))
+
+return () => {
+  const mergedProps = { ...styleProps.value, ...attrs }
+  return h(Pixel.div, mergedProps, slots)
+}
     }
 })

package/jsx/visually-hidden.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import type { FunctionalComponent } from 'vue'
 import type { VisuallyHiddenProperties } from '../patterns/visually-hidden';
-import type { HTMLStyledProps } from '../types/jsx';
+import type { HTMLPixelProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface VisuallyHiddenProps extends VisuallyHiddenProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof VisuallyHiddenProperties > {}
+export interface VisuallyHiddenProps extends VisuallyHiddenProperties, DistributiveOmit<HTMLPixelProps<'div'>, keyof VisuallyHiddenProperties > {}
 
 
 export declare const VisuallyHidden: FunctionalComponent<VisuallyHiddenProps>

package/jsx/visually-hidden.mjs

@@ -1,16 +1,18 @@
 import { defineComponent, h, computed } from 'vue'
-import { styled } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
 import { getVisuallyHiddenStyle } from '../patterns/visually-hidden.mjs';
+import { Pixel } from './factory.mjs';
 
-export const VisuallyHidden = defineComponent({
+export const VisuallyHidden = /* @__PURE__ */ defineComponent({
     name: 'VisuallyHidden',
     inheritAttrs: false,
     props: [],
     setup(props, { attrs, slots }) {
-        const styleProps = computed(() => getVisuallyHiddenStyle(props))
-        return () => {
-            const computedProps = { ...styleProps.value, ...attrs }
-            return h(styled.div, computedProps, slots)
-        }
+      const styleProps = computed(() => getVisuallyHiddenStyle(props))
+
+return () => {
+  const mergedProps = { ...styleProps.value, ...attrs }
+  return h(Pixel.div, mergedProps, slots)
+}
     }
 })

package/jsx/vstack.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import type { FunctionalComponent } from 'vue'
 import type { VstackProperties } from '../patterns/vstack';
-import type { HTMLStyledProps } from '../types/jsx';
+import type { HTMLPixelProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface VstackProps extends VstackProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof VstackProperties > {}
+export interface VstackProps extends VstackProperties, DistributiveOmit<HTMLPixelProps<'div'>, keyof VstackProperties > {}
 
 
 export declare const VStack: FunctionalComponent<VstackProps>

package/jsx/vstack.mjs

@@ -1,16 +1,18 @@
 import { defineComponent, h, computed } from 'vue'
-import { styled } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
 import { getVstackStyle } from '../patterns/vstack.mjs';
+import { Pixel } from './factory.mjs';
 
-export const VStack = defineComponent({
+export const VStack = /* @__PURE__ */ defineComponent({
     name: 'VStack',
     inheritAttrs: false,
-    props: ["justify", "gap"],
+    props: ["justify","gap"],
     setup(props, { attrs, slots }) {
-        const styleProps = computed(() => getVstackStyle(props))
-        return () => {
-            const computedProps = { ...styleProps.value, ...attrs }
-            return h(styled.div, computedProps, slots)
-        }
+      const styleProps = computed(() => getVstackStyle(props))
+
+return () => {
+  const mergedProps = { ...styleProps.value, ...attrs }
+  return h(Pixel.div, mergedProps, slots)
+}
     }
 })

package/jsx/wrap.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import type { FunctionalComponent } from 'vue'
 import type { WrapProperties } from '../patterns/wrap';
-import type { HTMLStyledProps } from '../types/jsx';
+import type { HTMLPixelProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface WrapProps extends WrapProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof WrapProperties > {}
+export interface WrapProps extends WrapProperties, DistributiveOmit<HTMLPixelProps<'div'>, keyof WrapProperties > {}
 
 
 export declare const Wrap: FunctionalComponent<WrapProps>

package/jsx/wrap.mjs

@@ -1,16 +1,18 @@
 import { defineComponent, h, computed } from 'vue'
-import { styled } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
 import { getWrapStyle } from '../patterns/wrap.mjs';
+import { Pixel } from './factory.mjs';
 
-export const Wrap = defineComponent({
+export const Wrap = /* @__PURE__ */ defineComponent({
     name: 'Wrap',
     inheritAttrs: false,
-    props: ["gap", "rowGap", "columnGap", "align", "justify"],
+    props: ["gap","rowGap","columnGap","align","justify"],
     setup(props, { attrs, slots }) {
-        const styleProps = computed(() => getWrapStyle(props))
-        return () => {
-            const computedProps = { ...styleProps.value, ...attrs }
-            return h(styled.div, computedProps, slots)
-        }
+      const styleProps = computed(() => getWrapStyle(props))
+
+return () => {
+  const mergedProps = { ...styleProps.value, ...attrs }
+  return h(Pixel.div, mergedProps, slots)
+}
     }
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mekari/pixel3-styled-system",
   "description": "This package is auto-generated by Panda CSS",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/recipes/banner-close-button-recipe.d.ts

@@ -0,0 +1,27 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface BannerCloseButtonRecipeVariant {
+  
+}
+
+type BannerCloseButtonRecipeVariantMap = {
+  [key in keyof BannerCloseButtonRecipeVariant]: Array<BannerCloseButtonRecipeVariant[key]>
+}
+
+export type BannerCloseButtonRecipeVariantProps = {
+  [key in keyof BannerCloseButtonRecipeVariant]?: ConditionalValue<BannerCloseButtonRecipeVariant[key]> | undefined
+}
+
+export interface BannerCloseButtonRecipeRecipe {
+  __type: BannerCloseButtonRecipeVariantProps
+  (props?: BannerCloseButtonRecipeVariantProps): string
+  raw: (props?: BannerCloseButtonRecipeVariantProps) => BannerCloseButtonRecipeVariantProps
+  variantMap: BannerCloseButtonRecipeVariantMap
+  variantKeys: Array<keyof BannerCloseButtonRecipeVariant>
+  splitVariantProps<Props extends BannerCloseButtonRecipeVariantProps>(props: Props): [BannerCloseButtonRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof BannerCloseButtonRecipeVariantProps>>]
+}
+
+
+export declare const bannerCloseButtonRecipe: BannerCloseButtonRecipeRecipe

package/recipes/banner-close-button-recipe.mjs

@@ -0,0 +1,22 @@
+import { splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const bannerCloseButtonRecipeFn = /* @__PURE__ */ createRecipe('banner-close-button', {}, [])
+
+const bannerCloseButtonRecipeVariantMap = {}
+
+const bannerCloseButtonRecipeVariantKeys = Object.keys(bannerCloseButtonRecipeVariantMap)
+
+export const bannerCloseButtonRecipe = /* @__PURE__ */ Object.assign(bannerCloseButtonRecipeFn, {
+  __recipe__: true,
+  __name__: 'bannerCloseButtonRecipe',
+  raw: (props) => props,
+  variantKeys: bannerCloseButtonRecipeVariantKeys,
+  variantMap: bannerCloseButtonRecipeVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, bannerCloseButtonRecipeVariantKeys)
+  },
+})

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

@@ -0,0 +1,27 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface BannerDescriptionRecipeVariant {
+  
+}
+
+type BannerDescriptionRecipeVariantMap = {
+  [key in keyof BannerDescriptionRecipeVariant]: Array<BannerDescriptionRecipeVariant[key]>
+}
+
+export type BannerDescriptionRecipeVariantProps = {
+  [key in keyof BannerDescriptionRecipeVariant]?: ConditionalValue<BannerDescriptionRecipeVariant[key]> | undefined
+}
+
+export interface BannerDescriptionRecipeRecipe {
+  __type: BannerDescriptionRecipeVariantProps
+  (props?: BannerDescriptionRecipeVariantProps): string
+  raw: (props?: BannerDescriptionRecipeVariantProps) => BannerDescriptionRecipeVariantProps
+  variantMap: BannerDescriptionRecipeVariantMap
+  variantKeys: Array<keyof BannerDescriptionRecipeVariant>
+  splitVariantProps<Props extends BannerDescriptionRecipeVariantProps>(props: Props): [BannerDescriptionRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof BannerDescriptionRecipeVariantProps>>]
+}
+
+
+export declare const bannerDescriptionRecipe: BannerDescriptionRecipeRecipe

package/recipes/banner-description-recipe.mjs

@@ -0,0 +1,22 @@
+import { splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const bannerDescriptionRecipeFn = /* @__PURE__ */ createRecipe('banner-description', {}, [])
+
+const bannerDescriptionRecipeVariantMap = {}
+
+const bannerDescriptionRecipeVariantKeys = Object.keys(bannerDescriptionRecipeVariantMap)
+
+export const bannerDescriptionRecipe = /* @__PURE__ */ Object.assign(bannerDescriptionRecipeFn, {
+  __recipe__: true,
+  __name__: 'bannerDescriptionRecipe',
+  raw: (props) => props,
+  variantKeys: bannerDescriptionRecipeVariantKeys,
+  variantMap: bannerDescriptionRecipeVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, bannerDescriptionRecipeVariantKeys)
+  },
+})

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

@@ -0,0 +1,27 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface BannerIconRecipeVariant {
+  
+}
+
+type BannerIconRecipeVariantMap = {
+  [key in keyof BannerIconRecipeVariant]: Array<BannerIconRecipeVariant[key]>
+}
+
+export type BannerIconRecipeVariantProps = {
+  [key in keyof BannerIconRecipeVariant]?: ConditionalValue<BannerIconRecipeVariant[key]> | undefined
+}
+
+export interface BannerIconRecipeRecipe {
+  __type: BannerIconRecipeVariantProps
+  (props?: BannerIconRecipeVariantProps): Pretty<Record<"root" | "custom", string>>
+  raw: (props?: BannerIconRecipeVariantProps) => BannerIconRecipeVariantProps
+  variantMap: BannerIconRecipeVariantMap
+  variantKeys: Array<keyof BannerIconRecipeVariant>
+  splitVariantProps<Props extends BannerIconRecipeVariantProps>(props: Props): [BannerIconRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof BannerIconRecipeVariantProps>>]
+}
+
+
+export declare const bannerIconRecipe: BannerIconRecipeRecipe

package/recipes/banner-icon-recipe.mjs

@@ -0,0 +1,34 @@
+import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const bannerIconRecipeDefaultVariants = {}
+const bannerIconRecipeCompoundVariants = []
+
+const bannerIconRecipeSlotNames = [
+  [
+    "root",
+    "banner-icon__root"
+  ],
+  [
+    "custom",
+    "banner-icon__custom"
+  ]
+]
+const bannerIconRecipeSlotFns = /* @__PURE__ */ bannerIconRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, bannerIconRecipeDefaultVariants, getSlotCompoundVariant(bannerIconRecipeCompoundVariants, slotName))])
+
+const bannerIconRecipeFn = (props = {}) => {
+  return Object.fromEntries(bannerIconRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
+}
+
+const bannerIconRecipeVariantKeys = []
+
+export const bannerIconRecipe = /* @__PURE__ */ Object.assign(bannerIconRecipeFn, {
+  __recipe__: false,
+  __name__: 'bannerIconRecipe',
+  raw: (props) => props,
+  variantKeys: bannerIconRecipeVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps(props, bannerIconRecipeVariantKeys)
+  },
+})

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

@@ -0,0 +1,27 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface BannerIconSlotRecipeVariant {
+  
+}
+
+type BannerIconSlotRecipeVariantMap = {
+  [key in keyof BannerIconSlotRecipeVariant]: Array<BannerIconSlotRecipeVariant[key]>
+}
+
+export type BannerIconSlotRecipeVariantProps = {
+  [key in keyof BannerIconSlotRecipeVariant]?: ConditionalValue<BannerIconSlotRecipeVariant[key]> | undefined
+}
+
+export interface BannerIconSlotRecipeRecipe {
+  __type: BannerIconSlotRecipeVariantProps
+  (props?: BannerIconSlotRecipeVariantProps): Pretty<Record<"root" | "custom", string>>
+  raw: (props?: BannerIconSlotRecipeVariantProps) => BannerIconSlotRecipeVariantProps
+  variantMap: BannerIconSlotRecipeVariantMap
+  variantKeys: Array<keyof BannerIconSlotRecipeVariant>
+  splitVariantProps<Props extends BannerIconSlotRecipeVariantProps>(props: Props): [BannerIconSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof BannerIconSlotRecipeVariantProps>>]
+}
+
+
+export declare const bannerIconSlotRecipe: BannerIconSlotRecipeRecipe

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

@@ -0,0 +1,34 @@
+import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const bannerIconSlotRecipeDefaultVariants = {}
+const bannerIconSlotRecipeCompoundVariants = []
+
+const bannerIconSlotRecipeSlotNames = [
+  [
+    "root",
+    "banner-icon__root"
+  ],
+  [
+    "custom",
+    "banner-icon__custom"
+  ]
+]
+const bannerIconSlotRecipeSlotFns = /* @__PURE__ */ bannerIconSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, bannerIconSlotRecipeDefaultVariants, getSlotCompoundVariant(bannerIconSlotRecipeCompoundVariants, slotName))])
+
+const bannerIconSlotRecipeFn = (props = {}) => {
+  return Object.fromEntries(bannerIconSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
+}
+
+const bannerIconSlotRecipeVariantKeys = []
+
+export const bannerIconSlotRecipe = /* @__PURE__ */ Object.assign(bannerIconSlotRecipeFn, {
+  __recipe__: false,
+  __name__: 'bannerIconSlotRecipe',
+  raw: (props) => props,
+  variantKeys: bannerIconSlotRecipeVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps(props, bannerIconSlotRecipeVariantKeys)
+  },
+})

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

@@ -0,0 +1,27 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface BannerLinkRecipeVariant {
+  
+}
+
+type BannerLinkRecipeVariantMap = {
+  [key in keyof BannerLinkRecipeVariant]: Array<BannerLinkRecipeVariant[key]>
+}
+
+export type BannerLinkRecipeVariantProps = {
+  [key in keyof BannerLinkRecipeVariant]?: ConditionalValue<BannerLinkRecipeVariant[key]> | undefined
+}
+
+export interface BannerLinkRecipeRecipe {
+  __type: BannerLinkRecipeVariantProps
+  (props?: BannerLinkRecipeVariantProps): string
+  raw: (props?: BannerLinkRecipeVariantProps) => BannerLinkRecipeVariantProps
+  variantMap: BannerLinkRecipeVariantMap
+  variantKeys: Array<keyof BannerLinkRecipeVariant>
+  splitVariantProps<Props extends BannerLinkRecipeVariantProps>(props: Props): [BannerLinkRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof BannerLinkRecipeVariantProps>>]
+}
+
+
+export declare const bannerLinkRecipe: BannerLinkRecipeRecipe

package/recipes/banner-link-recipe.mjs

@@ -0,0 +1,22 @@
+import { splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const bannerLinkRecipeFn = /* @__PURE__ */ createRecipe('banner-link', {}, [])
+
+const bannerLinkRecipeVariantMap = {}
+
+const bannerLinkRecipeVariantKeys = Object.keys(bannerLinkRecipeVariantMap)
+
+export const bannerLinkRecipe = /* @__PURE__ */ Object.assign(bannerLinkRecipeFn, {
+  __recipe__: true,
+  __name__: 'bannerLinkRecipe',
+  raw: (props) => props,
+  variantKeys: bannerLinkRecipeVariantKeys,
+  variantMap: bannerLinkRecipeVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, bannerLinkRecipeVariantKeys)
+  },
+})

package/recipes/banner-recipe.d.ts

@@ -0,0 +1,27 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface BannerRecipeVariant {
+  variant: "info" | "success" | "danger" | "warning"
+}
+
+type BannerRecipeVariantMap = {
+  [key in keyof BannerRecipeVariant]: Array<BannerRecipeVariant[key]>
+}
+
+export type BannerRecipeVariantProps = {
+  [key in keyof BannerRecipeVariant]?: ConditionalValue<BannerRecipeVariant[key]> | undefined
+}
+
+export interface BannerRecipeRecipe {
+  __type: BannerRecipeVariantProps
+  (props?: BannerRecipeVariantProps): string
+  raw: (props?: BannerRecipeVariantProps) => BannerRecipeVariantProps
+  variantMap: BannerRecipeVariantMap
+  variantKeys: Array<keyof BannerRecipeVariant>
+  splitVariantProps<Props extends BannerRecipeVariantProps>(props: Props): [BannerRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof BannerRecipeVariantProps>>]
+}
+
+
+export declare const bannerRecipe: BannerRecipeRecipe

package/recipes/banner-recipe.mjs

@@ -0,0 +1,31 @@
+import { splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const bannerRecipeFn = /* @__PURE__ */ createRecipe('banner', {
+  "variant": "info"
+}, [])
+
+const bannerRecipeVariantMap = {
+  "variant": [
+    "info",
+    "success",
+    "danger",
+    "warning"
+  ]
+}
+
+const bannerRecipeVariantKeys = Object.keys(bannerRecipeVariantMap)
+
+export const bannerRecipe = /* @__PURE__ */ Object.assign(bannerRecipeFn, {
+  __recipe__: true,
+  __name__: 'bannerRecipe',
+  raw: (props) => props,
+  variantKeys: bannerRecipeVariantKeys,
+  variantMap: bannerRecipeVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, bannerRecipeVariantKeys)
+  },
+})