@stokelp/styled-system 1.7.0 → 1.8.0

package/package.json

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

package/panda.buildinfo.json

@@ -37,6 +37,10 @@
       "paddingInline]___[value:space-8",
       "textAlign]___[value:center",
       "display]___[value:flex",
+      "alignItems]___[value:center",
+      "justifyContent]___[value:center",
+      "flex]___[value:0 0 auto",
+      "borderRadius]___[value:9999px",
       "alignItems]___[value:flex-start",
       "gap]___[value:0",
       "flexDirection]___[value:column",
@@ -44,7 +48,6 @@
       "gap]___[value:space-16",
       "borderColor]___[value:primary.100",
       "marginBlock]___[value:space-24",
-      "alignItems]___[value:center",
       "gap]___[value:10px"
     ],
     "recipes": {
@@ -69,6 +72,13 @@
       "switchRecipe": [
         "size]___[value:md]___[recipe:switchRecipe"
       ],
+      "tag": [
+        "size]___[value:md]___[recipe:tag",
+        "severity]___[value:neutral]___[recipe:tag",
+        "severity]___[value:success]___[recipe:tag",
+        "severity]___[value:warning]___[recipe:tag",
+        "severity]___[value:error]___[recipe:tag"
+      ],
       "heading": [
         "size]___[value:h2]___[recipe:heading"
       ],

package/recipes/index.d.ts

@@ -14,4 +14,5 @@ export * from './accordion';
 export * from './form-label';
 export * from './checkbox';
 export * from './tabs';
+export * from './tag';
 export * from './select';

package/recipes/index.mjs

@@ -13,4 +13,5 @@ export * from './accordion.mjs';
 export * from './form-label.mjs';
 export * from './checkbox.mjs';
 export * from './tabs.mjs';
+export * from './tag.mjs';
 export * from './select.mjs';

package/recipes/tag.d.ts

@@ -0,0 +1,29 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface TagVariant {
+  size: "lg" | "md" | "sm"
+severity: "success" | "warning" | "error" | "neutral"
+}
+
+type TagVariantMap = {
+  [key in keyof TagVariant]: Array<TagVariant[key]>
+}
+
+export type TagVariantProps = {
+  [key in keyof TagVariant]?: ConditionalValue<TagVariant[key]> | undefined
+}
+
+export interface TagRecipe {
+  __type: TagVariantProps
+  (props?: TagVariantProps): Pretty<Record<"root" | "badge", string>>
+  raw: (props?: TagVariantProps) => TagVariantProps
+  variantMap: TagVariantMap
+  variantKeys: Array<keyof TagVariant>
+  splitVariantProps<Props extends TagVariantProps>(props: Props): [TagVariantProps, Pretty<DistributiveOmit<Props, keyof TagVariantProps>>]
+  getVariantProps: (props?: TagVariantProps) => TagVariantProps
+}
+
+/** The styles for the Tag component */
+export declare const tag: TagRecipe

package/recipes/tag.mjs

@@ -0,0 +1,54 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const tagDefaultVariants = {
+  "size": "md",
+  "severity": "neutral"
+}
+const tagCompoundVariants = []
+
+const tagSlotNames = [
+  [
+    "root",
+    "tag__root"
+  ],
+  [
+    "badge",
+    "tag__badge"
+  ]
+]
+const tagSlotFns = /* @__PURE__ */ tagSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, tagDefaultVariants, getSlotCompoundVariant(tagCompoundVariants, slotName))])
+
+const tagFn = memo((props = {}) => {
+  return Object.fromEntries(tagSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const tagVariantKeys = [
+  "size",
+  "severity"
+]
+const getVariantProps = (variants) => ({ ...tagDefaultVariants, ...compact(variants) })
+
+export const tag = /* @__PURE__ */ Object.assign(tagFn, {
+  __recipe__: false,
+  __name__: 'tag',
+  raw: (props) => props,
+  variantKeys: tagVariantKeys,
+  variantMap: {
+  "size": [
+    "lg",
+    "md",
+    "sm"
+  ],
+  "severity": [
+    "success",
+    "warning",
+    "error",
+    "neutral"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, tagVariantKeys)
+  },
+  getVariantProps
+})