@mekari/pixel3-styled-system 0.0.0

package/recipes/avatar-recipe.d.ts

@@ -0,0 +1,30 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface AvatarRecipeVariant {
+  variant: "square" | "circle"
+  "variant-color": "gray" | "sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "lime" | "pink"
+  size: "sm" | "md" | "lg" | "xl"
+  "has-border": boolean
+}
+
+type AvatarRecipeVariantMap = {
+  [key in keyof AvatarRecipeVariant]: Array<AvatarRecipeVariant[key]>
+}
+
+export type AvatarRecipeVariantProps = {
+  [key in keyof AvatarRecipeVariant]?: AvatarRecipeVariant[key]
+}
+
+export interface AvatarRecipeRecipe {
+  __type: AvatarRecipeVariantProps
+  (props?: AvatarRecipeVariantProps): Pretty<Record<"root" | "fallback" | "image" | "icon", string>>
+  raw: (props?: AvatarRecipeVariantProps) => AvatarRecipeVariantProps
+  variantMap: AvatarRecipeVariantMap
+  variantKeys: Array<keyof AvatarRecipeVariant>
+  splitVariantProps<Props extends AvatarRecipeVariantProps>(props: Props): [AvatarRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof AvatarRecipeVariantProps>>]
+}
+
+
+export declare const avatarRecipe: AvatarRecipeRecipe

package/recipes/avatar-recipe.mjs

@@ -0,0 +1,122 @@
+import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const avatarRecipeDefaultVariants = {
+  "size": "md",
+  "variant": "circle",
+  "has-border": false
+}
+const avatarRecipeCompoundVariants = [
+  {
+    "size": "sm",
+    "variant": "square",
+    "css": {
+      "root": {
+        "borderRadius": "sm"
+      },
+      "image": {
+        "borderRadius": "sm"
+      }
+    }
+  },
+  {
+    "size": "lg",
+    "variant": "square",
+    "css": {
+      "root": {
+        "borderRadius": "lg"
+      },
+      "image": {
+        "borderRadius": "lg"
+      }
+    }
+  },
+  {
+    "size": "xl",
+    "variant": "square",
+    "css": {
+      "root": {
+        "borderRadius": "xl"
+      },
+      "image": {
+        "borderRadius": "xl"
+      }
+    }
+  },
+  {
+    "variant-color": "gray",
+    "css": {
+      "root": {
+        "color": "gray.600",
+        "borderColor": "white"
+      }
+    }
+  }
+]
+
+const avatarRecipeSlotNames = [
+  [
+    "root",
+    "avatar__root"
+  ],
+  [
+    "fallback",
+    "avatar__fallback"
+  ],
+  [
+    "image",
+    "avatar__image"
+  ],
+  [
+    "icon",
+    "avatar__icon"
+  ]
+]
+const avatarRecipeSlotFns = /* @__PURE__ */ avatarRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, avatarRecipeDefaultVariants, getSlotCompoundVariant(avatarRecipeCompoundVariants, slotName))])
+
+const avatarRecipeFn = (props = {}) => {
+  return Object.fromEntries(avatarRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
+}
+
+const avatarRecipeVariantKeys = [
+  "variant",
+  "variant-color",
+  "size",
+  "has-border"
+]
+
+export const avatarRecipe = /* @__PURE__ */ Object.assign(avatarRecipeFn, {
+  __recipe__: false,
+  __name__: 'avatarRecipe',
+  raw: (props) => props,
+  variantKeys: avatarRecipeVariantKeys,
+  variantMap: {
+  "variant": [
+    "square",
+    "circle"
+  ],
+  "variant-color": [
+    "gray",
+    "sky",
+    "teal",
+    "violet",
+    "amber",
+    "rose",
+    "stone",
+    "lime",
+    "pink"
+  ],
+  "size": [
+    "sm",
+    "md",
+    "lg",
+    "xl"
+  ],
+  "has-border": [
+    "true"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, avatarRecipeVariantKeys)
+  },
+})

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

@@ -0,0 +1,29 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface AvatarSlotRecipeVariant {
+  variant: "square" | "circle"
+variantColor: "gray" | "sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "lime" | "pink"
+size: "sm" | "md" | "lg" | "xl"
+}
+
+type AvatarSlotRecipeVariantMap = {
+  [key in keyof AvatarSlotRecipeVariant]: Array<AvatarSlotRecipeVariant[key]>
+}
+
+export type AvatarSlotRecipeVariantProps = {
+  [key in keyof AvatarSlotRecipeVariant]?: AvatarSlotRecipeVariant[key] | undefined
+}
+
+export interface AvatarSlotRecipeRecipe {
+  __type: AvatarSlotRecipeVariantProps
+  (props?: AvatarSlotRecipeVariantProps): Pretty<Record<"root" | "fallback" | "image" | "icon", string>>
+  raw: (props?: AvatarSlotRecipeVariantProps) => AvatarSlotRecipeVariantProps
+  variantMap: AvatarSlotRecipeVariantMap
+  variantKeys: Array<keyof AvatarSlotRecipeVariant>
+  splitVariantProps<Props extends AvatarSlotRecipeVariantProps>(props: Props): [AvatarSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof AvatarSlotRecipeVariantProps>>]
+}
+
+
+export declare const avatarSlotRecipe: AvatarSlotRecipeRecipe

package/recipes/avatar-slot-recipe.mjs

@@ -0,0 +1,116 @@
+import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const avatarSlotRecipeDefaultVariants = {
+  "size": "md",
+  "variant": "circle"
+}
+const avatarSlotRecipeCompoundVariants = [
+  {
+    "size": "sm",
+    "variant": "square",
+    "css": {
+      "root": {
+        "borderRadius": "sm"
+      },
+      "image": {
+        "borderRadius": "sm"
+      }
+    }
+  },
+  {
+    "size": "lg",
+    "variant": "square",
+    "css": {
+      "root": {
+        "borderRadius": "lg"
+      },
+      "image": {
+        "borderRadius": "lg"
+      }
+    }
+  },
+  {
+    "size": "xl",
+    "variant": "square",
+    "css": {
+      "root": {
+        "borderRadius": "xl"
+      },
+      "image": {
+        "borderRadius": "xl"
+      }
+    }
+  },
+  {
+    "variantColor": "gray",
+    "css": {
+      "root": {
+        "color": "gray.600"
+      }
+    }
+  }
+]
+
+const avatarSlotRecipeSlotNames = [
+  [
+    "root",
+    "avatar__root"
+  ],
+  [
+    "fallback",
+    "avatar__fallback"
+  ],
+  [
+    "image",
+    "avatar__image"
+  ],
+  [
+    "icon",
+    "avatar__icon"
+  ]
+]
+const avatarSlotRecipeSlotFns = /* @__PURE__ */ avatarSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, avatarSlotRecipeDefaultVariants, getSlotCompoundVariant(avatarSlotRecipeCompoundVariants, slotName))])
+
+const avatarSlotRecipeFn = (props = {}) => {
+  return Object.fromEntries(avatarSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
+}
+
+const avatarSlotRecipeVariantKeys = [
+  "variant",
+  "variantColor",
+  "size"
+]
+
+export const avatarSlotRecipe = /* @__PURE__ */ Object.assign(avatarSlotRecipeFn, {
+  __recipe__: false,
+  __name__: 'avatarSlotRecipe',
+  raw: (props) => props,
+  variantKeys: avatarSlotRecipeVariantKeys,
+  variantMap: {
+  "variant": [
+    "square",
+    "circle"
+  ],
+  "variantColor": [
+    "gray",
+    "sky",
+    "teal",
+    "violet",
+    "amber",
+    "rose",
+    "stone",
+    "lime",
+    "pink"
+  ],
+  "size": [
+    "sm",
+    "md",
+    "lg",
+    "xl"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, avatarSlotRecipeVariantKeys)
+  },
+})

package/recipes/badge-recipe.d.ts

@@ -0,0 +1,29 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface BadgeRecipeVariant {
+  variant: "solid" | "subtle"
+variantColor: "blue" | "green" | "orange" | "red" | "gray"
+size: "sm" | "md"
+}
+
+type BadgeRecipeVariantMap = {
+  [key in keyof BadgeRecipeVariant]: Array<BadgeRecipeVariant[key]>
+}
+
+export type BadgeRecipeVariantProps = {
+  [key in keyof BadgeRecipeVariant]?: BadgeRecipeVariant[key] | undefined
+}
+
+export interface BadgeRecipeRecipe {
+  __type: BadgeRecipeVariantProps
+  (props?: BadgeRecipeVariantProps): string
+  raw: (props?: BadgeRecipeVariantProps) => BadgeRecipeVariantProps
+  variantMap: BadgeRecipeVariantMap
+  variantKeys: Array<keyof BadgeRecipeVariant>
+  splitVariantProps<Props extends BadgeRecipeVariantProps>(props: Props): [BadgeRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof BadgeRecipeVariantProps>>]
+}
+
+
+export declare const badgeRecipe: BadgeRecipeRecipe

package/recipes/badge-recipe.mjs

@@ -0,0 +1,160 @@
+import { splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const badgeRecipeFn = /* @__PURE__ */ createRecipe('badge', {
+  "variant": "solid",
+  "size": "md",
+  "variantColor": "blue"
+}, [
+  {
+    "variant": "solid",
+    "size": "md",
+    "css": {
+      "paddingX": "1.5",
+      "paddingY": "0.5"
+    }
+  },
+  {
+    "variant": "solid",
+    "size": "sm",
+    "css": {
+      "paddingX": "1",
+      "paddingY": "0.5"
+    }
+  },
+  {
+    "variant": "subtle",
+    "size": "md",
+    "css": {
+      "paddingX": "2",
+      "paddingY": "0"
+    }
+  },
+  {
+    "variant": "subtle",
+    "size": "sm",
+    "css": {
+      "paddingX": "1",
+      "paddingY": "0"
+    }
+  },
+  {
+    "variant": "solid",
+    "variantColor": "blue",
+    "css": {
+      "backgroundColor": "sky.400"
+    }
+  },
+  {
+    "variant": "solid",
+    "variantColor": "green",
+    "css": {
+      "backgroundColor": "teal.400"
+    }
+  },
+  {
+    "variant": "solid",
+    "variantColor": "orange",
+    "css": {
+      "backgroundColor": "amber.400"
+    }
+  },
+  {
+    "variant": "solid",
+    "variantColor": "red",
+    "css": {
+      "backgroundColor": "rose.400"
+    }
+  },
+  {
+    "variant": "solid",
+    "variantColor": "gray",
+    "css": {
+      "backgroundColor": "stone.400"
+    }
+  },
+  {
+    "variant": [
+      "subtle"
+    ],
+    "variantColor": "blue",
+    "css": {
+      "backgroundColor": "blue.50",
+      "color": "blue.700"
+    }
+  },
+  {
+    "variant": [
+      "subtle"
+    ],
+    "variantColor": "green",
+    "css": {
+      "backgroundColor": "green.50",
+      "color": "green.700"
+    }
+  },
+  {
+    "variant": [
+      "subtle"
+    ],
+    "variantColor": "orange",
+    "css": {
+      "backgroundColor": "orange.50",
+      "color": "orange.700"
+    }
+  },
+  {
+    "variant": [
+      "subtle"
+    ],
+    "variantColor": "red",
+    "css": {
+      "backgroundColor": "red.50",
+      "color": "red.700"
+    }
+  },
+  {
+    "variant": [
+      "subtle"
+    ],
+    "variantColor": "gray",
+    "css": {
+      "backgroundColor": "gray.50",
+      "color": "black"
+    }
+  }
+])
+
+const badgeRecipeVariantMap = {
+  "variant": [
+    "solid",
+    "subtle"
+  ],
+  "variantColor": [
+    "blue",
+    "green",
+    "orange",
+    "red",
+    "gray"
+  ],
+  "size": [
+    "sm",
+    "md"
+  ]
+}
+
+const badgeRecipeVariantKeys = Object.keys(badgeRecipeVariantMap)
+
+export const badgeRecipe = /* @__PURE__ */ Object.assign(badgeRecipeFn, {
+  __recipe__: true,
+  __name__: 'badgeRecipe',
+  raw: (props) => props,
+  variantKeys: badgeRecipeVariantKeys,
+  variantMap: badgeRecipeVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, badgeRecipeVariantKeys)
+  },
+})

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

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

package/recipes/button-group-recipe.mjs

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

package/recipes/button-recipe.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface ButtonRecipeVariant {
+  variant: "primary" | "secondary" | "ghost" | "danger" | "textLink"
+size: "sm" | "md"
+}
+
+type ButtonRecipeVariantMap = {
+  [key in keyof ButtonRecipeVariant]: Array<ButtonRecipeVariant[key]>
+}
+
+export type ButtonRecipeVariantProps = {
+  [key in keyof ButtonRecipeVariant]?: ButtonRecipeVariant[key] | undefined
+}
+
+export interface ButtonRecipeRecipe {
+  __type: ButtonRecipeVariantProps
+  (props?: ButtonRecipeVariantProps): string
+  raw: (props?: ButtonRecipeVariantProps) => ButtonRecipeVariantProps
+  variantMap: ButtonRecipeVariantMap
+  variantKeys: Array<keyof ButtonRecipeVariant>
+  splitVariantProps<Props extends ButtonRecipeVariantProps>(props: Props): [ButtonRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof ButtonRecipeVariantProps>>]
+}
+
+
+export declare const buttonRecipe: ButtonRecipeRecipe

package/recipes/button-recipe.mjs

@@ -0,0 +1,94 @@
+import { splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const buttonRecipeFn = /* @__PURE__ */ createRecipe('button', {
+  "variant": "primary",
+  "size": "md"
+}, [
+  {
+    "variant": [
+      "textLink"
+    ],
+    "css": {
+      "paddingX": "0",
+      "paddingY": "0",
+      "borderRadius": "sm",
+      "_focusVisible": {
+        "borderColor": "white",
+        "boxShadow": "focus"
+      }
+    }
+  },
+  {
+    "variant": [
+      "ghost",
+      "textLink"
+    ],
+    "css": {
+      "fontWeight": "regular"
+    }
+  },
+  {
+    "variant": [
+      "primary",
+      "secondary",
+      "ghost"
+    ],
+    "css": {
+      "_focusVisible": {
+        "borderColor": "blue.400",
+        "boxShadow": "focus"
+      }
+    }
+  },
+  {
+    "variant": [
+      "primary",
+      "secondary",
+      "ghost",
+      "danger"
+    ],
+    "css": {
+      "_disabled": {
+        "cursor": "not-allowed",
+        "color": "gray.400",
+        "background": "gray.50",
+        "borderColor": "gray.50",
+        "_hover": {
+          "background": "gray.50",
+          "borderColor": "gray.50"
+        }
+      }
+    }
+  }
+])
+
+const buttonRecipeVariantMap = {
+  "variant": [
+    "primary",
+    "secondary",
+    "ghost",
+    "danger",
+    "textLink"
+  ],
+  "size": [
+    "sm",
+    "md"
+  ]
+}
+
+const buttonRecipeVariantKeys = Object.keys(buttonRecipeVariantMap)
+
+export const buttonRecipe = /* @__PURE__ */ Object.assign(buttonRecipeFn, {
+  __recipe__: true,
+  __name__: 'buttonRecipe',
+  raw: (props) => props,
+  variantKeys: buttonRecipeVariantKeys,
+  variantMap: buttonRecipeVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, buttonRecipeVariantKeys)
+  },
+})

package/recipes/checkbox-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 CheckboxSlotRecipeVariant {
+  
+}
+
+type CheckboxSlotRecipeVariantMap = {
+  [key in keyof CheckboxSlotRecipeVariant]: Array<CheckboxSlotRecipeVariant[key]>
+}
+
+export type CheckboxSlotRecipeVariantProps = {
+  [key in keyof CheckboxSlotRecipeVariant]?: ConditionalValue<CheckboxSlotRecipeVariant[key]> | undefined
+}
+
+export interface CheckboxSlotRecipeRecipe {
+  __type: CheckboxSlotRecipeVariantProps
+  (props?: CheckboxSlotRecipeVariantProps): Pretty<Record<"root" | "control" | "label", string>>
+  raw: (props?: CheckboxSlotRecipeVariantProps) => CheckboxSlotRecipeVariantProps
+  variantMap: CheckboxSlotRecipeVariantMap
+  variantKeys: Array<keyof CheckboxSlotRecipeVariant>
+  splitVariantProps<Props extends CheckboxSlotRecipeVariantProps>(props: Props): [CheckboxSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof CheckboxSlotRecipeVariantProps>>]
+}
+
+
+export declare const checkboxSlotRecipe: CheckboxSlotRecipeRecipe