@stokelp/styled-system 1.19.0 → 1.20.0

package/package.json

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

package/panda.buildinfo.json

@@ -3,9 +3,7 @@
   "styles": {
     "atomic": [
       "fill]___[value:none",
-      "cursor]___[value:pointer",
-      "marginRight]___[value:space-4",
-      "padding]___[value:space-8",
+      "marginLeft]___[value:auto",
       "background]___[value:error.500]___[cond:_disabled<___>_hover",
       "background]___[value:error.500]___[cond:_disabled<___>_active",
       "background]___[value:error.500]___[cond:_disabled",
@@ -30,7 +28,9 @@
       "background]___[value:error.100]___[cond:_hover",
       "color]___[value:error.700]___[cond:_hover",
       "color]___[value:error.700]___[cond:_active",
-      "marginLeft]___[value:auto",
+      "cursor]___[value:pointer",
+      "marginRight]___[value:space-4",
+      "padding]___[value:space-8",
       "truncate]___[value:true",
       "width]___[value:24",
       "height]___[value:24",
@@ -71,12 +71,21 @@
       "textStyle]___[value:heading.h4",
       "textStyle]___[value:heading.h6",
       "fontFamily]___[value:satoshi",
+      "textTransform]___[value:uppercase",
       "color]___[value:grey.100",
       "textStyle]___[value:body.lg",
       "textStyle]___[value:body.md",
       "textStyle]___[value:body.sm"
     ],
     "recipes": {
+      "iconButton": [
+        "size]___[value:sm]___[recipe:iconButton",
+        "variant]___[value:tertiary]___[recipe:iconButton",
+        "severity]___[value:none]___[recipe:iconButton",
+        "variant]___[value:secondary]___[recipe:iconButton",
+        "size]___[value:md]___[recipe:iconButton",
+        "variant]___[value:primary]___[recipe:iconButton"
+      ],
       "checkbox": [
         "size]___[value:md]___[recipe:checkbox"
       ],
@@ -93,14 +102,6 @@
         "variant]___[value:tertiary]___[recipe:button",
         "variant]___[value:primary]___[recipe:button"
       ],
-      "iconButton": [
-        "size]___[value:sm]___[recipe:iconButton",
-        "variant]___[value:secondary]___[recipe:iconButton",
-        "severity]___[value:none]___[recipe:iconButton",
-        "size]___[value:md]___[recipe:iconButton",
-        "variant]___[value:tertiary]___[recipe:iconButton",
-        "variant]___[value:primary]___[recipe:iconButton"
-      ],
       "formControl": [],
       "formLabel": [
         "variant]___[value:absolute]___[recipe:formLabel"

package/recipes/alert.d.ts

@@ -0,0 +1,35 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface AlertVariant {
+  /**
+ * @default "neutral"
+ */
+severity: "neutral" | "info" | "success" | "warning" | "error"
+}
+
+type AlertVariantMap = {
+  [key in keyof AlertVariant]: Array<AlertVariant[key]>
+}
+
+export type AlertVariantProps = {
+  [key in keyof AlertVariant]?: ConditionalValue<AlertVariant[key]> | undefined
+}
+
+export interface AlertRecipe {
+  __type: AlertVariantProps
+  (props?: AlertVariantProps): Pretty<Record<"root" | "icon" | "title" | "description", string>>
+  raw: (props?: AlertVariantProps) => AlertVariantProps
+  variantMap: AlertVariantMap
+  variantKeys: Array<keyof AlertVariant>
+  splitVariantProps<Props extends AlertVariantProps>(props: Props): [AlertVariantProps, Pretty<DistributiveOmit<Props, keyof AlertVariantProps>>]
+  getVariantProps: (props?: AlertVariantProps) => AlertVariantProps
+}
+
+/**
+ * The styles for the Alert component
+
+
+ */
+export declare const alert: AlertRecipe

package/recipes/alert.mjs

@@ -0,0 +1,56 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const alertDefaultVariants = {
+  "severity": "neutral"
+}
+const alertCompoundVariants = []
+
+const alertSlotNames = [
+  [
+    "root",
+    "alert__root"
+  ],
+  [
+    "icon",
+    "alert__icon"
+  ],
+  [
+    "title",
+    "alert__title"
+  ],
+  [
+    "description",
+    "alert__description"
+  ]
+]
+const alertSlotFns = /* @__PURE__ */ alertSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, alertDefaultVariants, getSlotCompoundVariant(alertCompoundVariants, slotName))])
+
+const alertFn = memo((props = {}) => {
+  return Object.fromEntries(alertSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const alertVariantKeys = [
+  "severity"
+]
+const getVariantProps = (variants) => ({ ...alertDefaultVariants, ...compact(variants) })
+
+export const alert = /* @__PURE__ */ Object.assign(alertFn, {
+  __recipe__: false,
+  __name__: 'alert',
+  raw: (props) => props,
+  variantKeys: alertVariantKeys,
+  variantMap: {
+  "severity": [
+    "neutral",
+    "info",
+    "success",
+    "warning",
+    "error"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, alertVariantKeys)
+  },
+  getVariantProps
+})

package/recipes/index.d.ts

@@ -22,4 +22,5 @@ export * from './tag';
 export * from './select';
 export * from './chip';
 export * from './action-card';
-export * from './tooltip';
+export * from './tooltip';
+export * from './alert';

package/recipes/index.mjs

@@ -21,4 +21,5 @@ export * from './tag.mjs';
 export * from './select.mjs';
 export * from './chip.mjs';
 export * from './action-card.mjs';
-export * from './tooltip.mjs';
+export * from './tooltip.mjs';
+export * from './alert.mjs';