@stokelp/styled-system 2.35.0 → 2.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokelp/styled-system",
-  "version": "2.35.0",
+  "version": "2.37.0",
   "description": "Stokelp UI styled-system",
   "type": "module",
   "publishConfig": {

package/panda.buildinfo.json

@@ -56,12 +56,22 @@
       "background]___[value:primary.200]___[cond:_hover",
       "background]___[value:primary.100]___[cond:_hover",
       "paddingBottom]___[value:space-24",
+      "background]___[value:success.500",
+      "borderRadius]___[value:full",
+      "background]___[value:black/10",
+      "color]___[value:secondary.500",
+      "background]___[value:decorative.yellow.mid",
+      "pointerEvents]___[value:none",
+      "background]___[value:decorative.blue.mid",
+      "background]___[value:decorative.green.mid",
+      "background]___[value:secondary.100",
+      "alignItems]___[value:flex-start",
+      "gap]___[value:space-0",
+      "flexDirection]___[value:column",
       "display]___[value:grid",
       "gridTemplateColumns]___[value:repeat(auto-fit, minmax(300px, 1fr))",
       "gap]___[value:10px",
-      "alignItems]___[value:flex-start",
       "gap]___[value:0",
-      "flexDirection]___[value:column",
       "alignItems]___[value:stretch",
       "gap]___[value:space-16",
       "borderColor]___[value:primary.100",
@@ -76,7 +86,6 @@
       "padding]___[value:space-16",
       "marginTop]___[value:100",
       "color]___[value:primary.500",
-      "color]___[value:secondary.500",
       "color]___[value:success.500",
       "color]___[value:warning.500",
       "borderRadius]___[value:radius-24",
@@ -119,7 +128,8 @@
         "size]___[value:lg]___[recipe:iconButton"
       ],
       "avatar": [
-        "size]___[value:md]___[recipe:avatar"
+        "size]___[value:md]___[recipe:avatar",
+        "size]___[value:sm]___[recipe:avatar"
       ],
       "checkbox": [
         "size]___[value:md]___[recipe:checkbox"
@@ -129,9 +139,9 @@
       ],
       "text": [
         "size]___[value:md]___[recipe:text",
+        "bold]___[value:true]___[recipe:text",
         "size]___[value:lg]___[recipe:text",
-        "size]___[value:sm]___[recipe:text",
-        "bold]___[value:true]___[recipe:text"
+        "size]___[value:sm]___[recipe:text"
       ],
       "input": [
         "size]___[value:md]___[recipe:input"
@@ -174,6 +184,9 @@
       ],
       "collapsible": [],
       "productCardCatalog": [],
+      "icon": [
+        "size]___[value:md]___[recipe:icon"
+      ],
       "accordion": [
         "size]___[value:md]___[recipe:accordion"
       ],
@@ -194,8 +207,8 @@
       "drawer": [
         "variant]___[value:right]___[recipe:drawer"
       ],
-      "icon": [
-        "size]___[value:md]___[recipe:icon"
+      "flag": [
+        "shape]___[value:rounded]___[recipe:flag"
       ],
       "illustration": [
         "pattern]___[value:neutral]___[recipe:illustration"

package/recipes/flag.d.ts

@@ -0,0 +1,31 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface FlagVariant {
+  /**
+ * @default "rounded"
+ */
+shape: "rectangle" | "rounded" | "circle" | "square"
+}
+
+type FlagVariantMap = {
+  [key in keyof FlagVariant]: Array<FlagVariant[key]>
+}
+
+export type FlagVariantProps = {
+  [key in keyof FlagVariant]?: ConditionalValue<FlagVariant[key]> | undefined
+}
+
+export interface FlagRecipe {
+  __type: FlagVariantProps
+  (props?: FlagVariantProps): string
+  raw: (props?: FlagVariantProps) => FlagVariantProps
+  variantMap: FlagVariantMap
+  variantKeys: Array<keyof FlagVariant>
+  splitVariantProps<Props extends FlagVariantProps>(props: Props): [FlagVariantProps, Pretty<DistributiveOmit<Props, keyof FlagVariantProps>>]
+  getVariantProps: (props?: FlagVariantProps) => FlagVariantProps
+}
+
+
+export declare const flag: FlagRecipe

package/recipes/flag.mjs

@@ -0,0 +1,33 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const flagFn = /* @__PURE__ */ createRecipe('flag', {
+  "shape": "rounded"
+}, [])
+
+const flagVariantMap = {
+  "shape": [
+    "rectangle",
+    "rounded",
+    "circle",
+    "square"
+  ]
+}
+
+const flagVariantKeys = Object.keys(flagVariantMap)
+
+export const flag = /* @__PURE__ */ Object.assign(memo(flagFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'flag',
+  __getCompoundVariantCss__: flagFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: flagVariantKeys,
+  variantMap: flagVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, flagVariantKeys)
+  },
+  getVariantProps: flagFn.getVariantProps,
+})

package/recipes/index.d.ts

@@ -17,6 +17,7 @@ export * from './illustration';
 export * from './button-filter';
 export * from './phone-number-input';
 export * from './icon';
+export * from './flag';
 export * from './avatar-group';
 export * from './drawer';
 export * from './radio-button-group';

package/recipes/index.mjs

@@ -16,6 +16,7 @@ export * from './illustration.mjs';
 export * from './button-filter.mjs';
 export * from './phone-number-input.mjs';
 export * from './icon.mjs';
+export * from './flag.mjs';
 export * from './avatar-group.mjs';
 export * from './drawer.mjs';
 export * from './radio-button-group.mjs';

package/recipes/product-card-catalog.d.ts

@@ -16,7 +16,7 @@ export type ProductCardCatalogVariantProps = {
 
 export interface ProductCardCatalogRecipe {
   __type: ProductCardCatalogVariantProps
-  (props?: ProductCardCatalogVariantProps): Pretty<Record<"root" | "title" | "image" | "content" | "description" | "highlight", string>>
+  (props?: ProductCardCatalogVariantProps): Pretty<Record<"root" | "title" | "image" | "imageContainer" | "content" | "description" | "highlight" | "tag" | "badgeList" | "badge" | "shortLivedTag", string>>
   raw: (props?: ProductCardCatalogVariantProps) => ProductCardCatalogVariantProps
   variantMap: ProductCardCatalogVariantMap
   variantKeys: Array<keyof ProductCardCatalogVariant>

package/recipes/product-card-catalog.mjs

@@ -17,6 +17,10 @@ const productCardCatalogSlotNames = [
     "image",
     "product-card-catalog__image"
   ],
+  [
+    "imageContainer",
+    "product-card-catalog__imageContainer"
+  ],
   [
     "content",
     "product-card-catalog__content"
@@ -28,6 +32,22 @@ const productCardCatalogSlotNames = [
   [
     "highlight",
     "product-card-catalog__highlight"
+  ],
+  [
+    "tag",
+    "product-card-catalog__tag"
+  ],
+  [
+    "badgeList",
+    "product-card-catalog__badgeList"
+  ],
+  [
+    "badge",
+    "product-card-catalog__badge"
+  ],
+  [
+    "shortLivedTag",
+    "product-card-catalog__shortLivedTag"
   ]
 ]
 const productCardCatalogSlotFns = /* @__PURE__ */ productCardCatalogSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, productCardCatalogDefaultVariants, getSlotCompoundVariant(productCardCatalogCompoundVariants, slotName))])

package/types/prop-type.d.ts

@@ -146,7 +146,7 @@ export interface UtilityValues {
 	transitionDuration: Tokens["durations"];
 	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform";
 	animation: Tokens["animations"];
-	animationName: "blob" | "bounce" | "fade-in" | "fade-out" | "fadeIn" | "fadeInFromRight" | "fadeInSkew" | "fadeOut" | "fadeOutFromRight" | "fadeOutSkew" | "ping" | "pulse" | "skeleton-pulse" | "slide-in" | "slide-in-left" | "slide-in-modal" | "slide-in-top-modal" | "slide-in-right" | "slide-out" | "slide-out-left" | "slide-out-modal" | "slide-out-top-modal" | "slide-out-right" | "slideInFromBottom" | "slideOutToBottom" | "collapse-in" | "collapse-out" | "spin";
+	animationName: "blob" | "bounce" | "fade-in" | "fade-out" | "slide-from-top" | "slide-from-bottom" | "slide-from-left" | "slide-from-right" | "slide-to-top" | "slide-to-bottom" | "slide-to-left" | "slide-to-right" | "fadeIn" | "fadeInFromRight" | "fadeInSkew" | "fadeOut" | "fadeOutFromRight" | "fadeOutSkew" | "ping" | "pulse" | "skeleton-pulse" | "slide-in" | "slide-in-left" | "slide-in-modal" | "slide-in-top-modal" | "slide-in-right" | "slide-out" | "slide-out-left" | "slide-out-modal" | "slide-out-top-modal" | "slide-out-right" | "slideInFromBottom" | "slideOutToBottom" | "collapse-in" | "collapse-out" | "spin";
 	animationTimingFunction: Tokens["easings"];
 	animationDuration: Tokens["durations"];
 	animationDelay: Tokens["durations"];