@stokelp/styled-system 2.98.0 → 2.100.0

package/package.json

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

package/panda.buildinfo.json

@@ -76,6 +76,45 @@
       "background]___[value:primary.200]___[cond:_hover",
       "background]___[value:primary.100]___[cond:_hover",
       "paddingBottom]___[value:space-24",
+      "color]___[value:white",
+      "flex]___[value:1",
+      "minWidth]___[value:0",
+      "fontSize]___[value:10px",
+      "opacity]___[value:0.8",
+      "fontSize]___[value:12px",
+      "color]___[value:grey.400",
+      "flexShrink]___[value:0",
+      "alignItems]___[value:flex-end",
+      "gap]___[value:space-2",
+      "flexDirection]___[value:column",
+      "alignItems]___[value:stretch",
+      "gap]___[value:space-12",
+      "padding]___[value:space-16",
+      "alignItems]___[value:flex-start",
+      "gap]___[value:space-4",
+      "gap]___[value:space-16",
+      "paddingInline]___[value:space-12",
+      "paddingBlock]___[value:space-8",
+      "borderRadius]___[value:radius-8",
+      "backgroundColor]___[value:grey.50",
+      "gap]___[value:8px",
+      "backgroundColor]___[value:white",
+      "justifyContent]___[value:space-between",
+      "paddingBlock]___[value:space-4",
+      "width]___[value:fit-content",
+      "width]___[value:140px",
+      "height]___[value:14px",
+      "width]___[value:70px",
+      "height]___[value:12px",
+      "width]___[value:size-20",
+      "height]___[value:size-20",
+      "width]___[value:100px",
+      "width]___[value:80px",
+      "width]___[value:60px",
+      "height]___[value:20px",
+      "width]___[value:size-24",
+      "height]___[value:size-24",
+      "width]___[value:120px",
       "background]___[value:black/10",
       "color]___[value:secondary.500",
       "background]___[value:decorative.yellow.mid",
@@ -83,24 +122,17 @@
       "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:8px",
       "gap]___[value:0",
-      "alignItems]___[value:stretch",
-      "gap]___[value:space-16",
       "borderColor]___[value:primary.100",
       "marginBlock]___[value:space-24",
       "gridTemplateColumns]___[value:repeat(3, 1fr)",
       "background]___[value:red.100",
       "color]___[value:red.500",
       "padding]___[value:space-4",
-      "gap]___[value:space-4",
       "gap]___[value:space-32",
-      "padding]___[value:space-16",
       "marginTop]___[value:100",
       "marginTop]___[value:space-16",
       "gridTemplateColumns]___[value:repeat(10, 21px)",
@@ -121,7 +153,20 @@
       "textOverflow]___[value:ellipsis",
       "whiteSpace]___[value:nowrap",
       "overflow]___[value:hidden",
-      "gap]___[value:20"
+      "gap]___[value:20",
+      "cursor]___[value:pointer",
+      "backgroundColor]___[value:primary.300",
+      "paddingInline]___[value:space-16",
+      "paddingBlock]___[value:space-12",
+      "placeContent]___[value:center",
+      "backgroundColor]___[value:error.500",
+      "borderRadius]___[value:radius-16",
+      "background]___[value:linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)",
+      "backgroundSize]___[value:200% 100%",
+      "animation]___[value:shimmer 1.5s infinite",
+      "borderRadius]___[value:radius-4",
+      "border]___[value:1px solid",
+      "backgroundColor]___[value:primary.100"
     ],
     "recipes": {
       "icon": [
@@ -185,12 +230,12 @@
       "tag": [
         "size]___[value:md]___[recipe:tag",
         "severity]___[value:neutral]___[recipe:tag",
-        "severity]___[value:success]___[recipe:tag",
+        "size]___[value:sm]___[recipe:tag",
+        "severity]___[value:info]___[recipe:tag",
         "severity]___[value:warning]___[recipe:tag",
+        "severity]___[value:success]___[recipe:tag",
         "severity]___[value:error]___[recipe:tag",
-        "severity]___[value:info]___[recipe:tag",
-        "size]___[value:lg]___[recipe:tag",
-        "size]___[value:sm]___[recipe:tag"
+        "size]___[value:lg]___[recipe:tag"
       ],
       "appNavigation": [
         "variant]___[value:prod]___[recipe:appNavigation",
@@ -209,6 +254,12 @@
         "size]___[value:h6]___[recipe:heading"
       ],
       "collapsible": [],
+      "mobileNavigation": [
+        "variant]___[value:prod]___[recipe:mobileNavigation",
+        "variant]___[value:staging]___[recipe:mobileNavigation",
+        "variant]___[value:dev]___[recipe:mobileNavigation",
+        "variant]___[value:neutral]___[recipe:mobileNavigation"
+      ],
       "productCardCatalog": [],
       "priceTag": [
         "size]___[value:sm]___[recipe:priceTag",
@@ -227,8 +278,8 @@
       "chip": [
         "size]___[value:md]___[recipe:chip",
         "colorScheme]___[value:secondary]___[recipe:chip",
-        "size]___[value:lg]___[recipe:chip",
         "size]___[value:sm]___[recipe:chip",
+        "size]___[value:lg]___[recipe:chip",
         "colorScheme]___[value:grey]___[recipe:chip",
         "colorScheme]___[value:red]___[recipe:chip",
         "colorScheme]___[value:yellow]___[recipe:chip",

package/recipes/index.d.ts

@@ -52,6 +52,7 @@ export * from './checkbox-card';
 export * from './combobox';
 export * from './collapsible';
 export * from './app-navigation';
+export * from './mobile-navigation';
 export * from './dialog';
 export * from './app-navigation-language-select';
 export * from './avatar';

package/recipes/index.mjs

@@ -51,6 +51,7 @@ export * from './checkbox-card.mjs';
 export * from './combobox.mjs';
 export * from './collapsible.mjs';
 export * from './app-navigation.mjs';
+export * from './mobile-navigation.mjs';
 export * from './dialog.mjs';
 export * from './app-navigation-language-select.mjs';
 export * from './avatar.mjs';

package/recipes/mobile-navigation.d.ts

@@ -0,0 +1,36 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface MobileNavigationVariant {
+  /**
+ * @default "prod"
+ */
+variant: "prod" | "staging" | "dev" | "neutral"
+}
+
+type MobileNavigationVariantMap = {
+  [key in keyof MobileNavigationVariant]: Array<MobileNavigationVariant[key]>
+}
+
+type MobileNavigationSlot = "root" | "item" | "itemIcon" | "itemLabel"
+
+export type MobileNavigationVariantProps = {
+  [key in keyof MobileNavigationVariant]?: ConditionalValue<MobileNavigationVariant[key]> | undefined
+}
+
+export interface MobileNavigationRecipe {
+  __slot: MobileNavigationSlot
+  __type: MobileNavigationVariantProps
+  (props?: MobileNavigationVariantProps): Pretty<Record<MobileNavigationSlot, string>>
+  raw: (props?: MobileNavigationVariantProps) => MobileNavigationVariantProps
+  variantMap: MobileNavigationVariantMap
+  variantKeys: Array<keyof MobileNavigationVariant>
+  splitVariantProps<Props extends MobileNavigationVariantProps>(props: Props): [MobileNavigationVariantProps, Pretty<DistributiveOmit<Props, keyof MobileNavigationVariantProps>>]
+  getVariantProps: (props?: MobileNavigationVariantProps) => MobileNavigationVariantProps
+}
+
+/**
+ * The styles for the MobileNavigation component
+ */
+export declare const mobileNavigation: MobileNavigationRecipe

package/recipes/mobile-navigation.mjs

@@ -0,0 +1,56 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const mobileNavigationDefaultVariants = {
+  "variant": "prod"
+}
+const mobileNavigationCompoundVariants = []
+
+const mobileNavigationSlotNames = [
+  [
+    "root",
+    "mobile-navigation__root"
+  ],
+  [
+    "item",
+    "mobile-navigation__item"
+  ],
+  [
+    "itemIcon",
+    "mobile-navigation__itemIcon"
+  ],
+  [
+    "itemLabel",
+    "mobile-navigation__itemLabel"
+  ]
+]
+const mobileNavigationSlotFns = /* @__PURE__ */ mobileNavigationSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, mobileNavigationDefaultVariants, getSlotCompoundVariant(mobileNavigationCompoundVariants, slotName))])
+
+const mobileNavigationFn = memo((props = {}) => {
+  return Object.fromEntries(mobileNavigationSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const mobileNavigationVariantKeys = [
+  "variant"
+]
+const getVariantProps = (variants) => ({ ...mobileNavigationDefaultVariants, ...compact(variants) })
+
+export const mobileNavigation = /* @__PURE__ */ Object.assign(mobileNavigationFn, {
+  __recipe__: false,
+  __name__: 'mobileNavigation',
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: mobileNavigationVariantKeys,
+  variantMap: {
+  "variant": [
+    "prod",
+    "staging",
+    "dev",
+    "neutral"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, mobileNavigationVariantKeys)
+  },
+  getVariantProps
+})