@stokelp/styled-system 1.19.1 → 1.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokelp/styled-system",
-  "version": "1.19.1",
+  "version": "1.21.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,11 @@
       "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",
+      "width]___[value:16",
+      "height]___[value:16",
       "truncate]___[value:true",
       "width]___[value:24",
       "height]___[value:24",
@@ -78,6 +80,14 @@
       "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"
       ],
@@ -94,18 +104,11 @@
         "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"
       ],
+      "tooltip": [],
       "text": [
         "size]___[value:md]___[recipe:text",
         "size]___[value:lg]___[recipe:text",
@@ -138,7 +141,6 @@
       "tabs": [
         "variant]___[value:line]___[recipe:tabs"
       ],
-      "tooltip": [],
       "datepicker": [],
       "formHelperText": [],
       "select": [

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/form-label.d.ts

@@ -19,7 +19,7 @@ export type FormLabelVariantProps = {
 
 export interface FormLabelRecipe {
   __type: FormLabelVariantProps
-  (props?: FormLabelVariantProps): Pretty<Record<"root" | "addon", string>>
+  (props?: FormLabelVariantProps): Pretty<Record<"root" | "addon" | "icon", string>>
   raw: (props?: FormLabelVariantProps) => FormLabelVariantProps
   variantMap: FormLabelVariantMap
   variantKeys: Array<keyof FormLabelVariant>

package/recipes/form-label.mjs

@@ -14,6 +14,10 @@ const formLabelSlotNames = [
   [
     "addon",
     "form-label__addon"
+  ],
+  [
+    "icon",
+    "form-label__icon"
   ]
 ]
 const formLabelSlotFns = /* @__PURE__ */ formLabelSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, formLabelDefaultVariants, getSlotCompoundVariant(formLabelCompoundVariants, slotName))])

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';