@okshaun/components 0.4.5 → 0.4.6

package/dist/panda.buildinfo.json

@@ -186,7 +186,62 @@
       "placeItems]___[value:center",
       "gap]___[value:12",
       "marginLeft]___[value:24",
+      "gap]___[value:2",
+      "maxWidth]___[value:600",
+      "fontWeight]___[value:500",
+      "width]___[value:100",
+      "width]___[value:80",
+      "textTransform]___[value:capitalize",
+      "background]___[value:blue.30]___[cond:_hover",
+      "background]___[value:blue.80]___[cond:_hover<___>_dark",
+      "color]___[value:blue.50",
+      "borderColor]___[value:blue.40",
+      "borderColor]___[value:blue.60]___[cond:_dark",
       "background]___[value:transparent",
+      "background]___[value:blue.10]___[cond:_hover",
+      "background]___[value:blue.90/50]___[cond:_hover<___>_dark",
+      "background]___[value:blue.10",
+      "color]___[value:blue.40",
+      "color]___[value:blue.60]___[cond:_dark",
+      "background]___[value:purple.30]___[cond:_hover",
+      "background]___[value:purple.80]___[cond:_hover<___>_dark",
+      "color]___[value:purple.50",
+      "color]___[value:purple.40]___[cond:_dark",
+      "borderColor]___[value:purple.40",
+      "borderColor]___[value:purple.60]___[cond:_dark",
+      "background]___[value:purple.10]___[cond:_hover",
+      "background]___[value:purple.90/50]___[cond:_hover<___>_dark",
+      "background]___[value:purple.10",
+      "color]___[value:purple.40",
+      "color]___[value:purple.60]___[cond:_dark",
+      "background]___[value:orange.30]___[cond:_hover",
+      "background]___[value:orange.90]___[cond:_hover<___>_dark",
+      "color]___[value:orange.50",
+      "color]___[value:orange.40]___[cond:_dark",
+      "borderColor]___[value:orange.40",
+      "borderColor]___[value:orange.60]___[cond:_dark",
+      "background]___[value:orange.10]___[cond:_hover",
+      "background]___[value:orange.90/50]___[cond:_hover<___>_dark",
+      "background]___[value:orange.10",
+      "color]___[value:orange.40",
+      "color]___[value:orange.60]___[cond:_dark",
+      "background]___[value:green.30]___[cond:_hover",
+      "background]___[value:green.80]___[cond:_hover<___>_dark",
+      "color]___[value:green.50",
+      "color]___[value:green.40]___[cond:_dark",
+      "borderColor]___[value:green.40",
+      "borderColor]___[value:green.60]___[cond:_dark",
+      "background]___[value:green.10]___[cond:_hover",
+      "background]___[value:green.90/50]___[cond:_hover<___>_dark",
+      "background]___[value:green.10",
+      "color]___[value:green.40",
+      "color]___[value:green.60]___[cond:_dark",
+      "background]___[value:bg.neutral.hovered]___[cond:_hover",
+      "borderColor]___[value:border.default",
+      "background]___[value:bg.neutral]___[cond:_hover",
+      "color]___[value:text.disabled",
+      "width]___[value:14",
+      "height]___[value:14",
       "flexWrap]___[value:wrap",
       "padding]___[value:80",
       "transitionProperty]___[value:transform",
@@ -197,11 +252,9 @@
       "width]___[value:20",
       "height]___[value:20",
       "fill]___[value:current",
-      "gap]___[value:2",
       "font]___[value:mono",
       "color]___[value:gray.90",
       "color]___[value:gold.50",
-      "color]___[value:blue.50",
       "color]___[value:gray.10]___[cond:_dark",
       "textStyle]___[value:body-md",
       "color]___[value:gray.90]___[cond:_dark",
@@ -322,6 +375,18 @@
         "position]___[value:right]___[recipe:tooltip",
         "caret]___[value:true]___[recipe:tooltip"
       ],
+      "chip": [
+        "state]___[value:resolved]___[recipe:chip",
+        "hue]___[value:blue]___[recipe:chip",
+        "hasIcon]___[value:false]___[recipe:chip",
+        "state]___[value:placeholder]___[recipe:chip",
+        "state]___[value:loading]___[recipe:chip",
+        "state]___[value:deleted]___[recipe:chip",
+        "hue]___[value:purple]___[recipe:chip",
+        "hue]___[value:orange]___[recipe:chip",
+        "hue]___[value:green]___[recipe:chip",
+        "hue]___[value:gray]___[recipe:chip"
+      ],
       "code": [],
       "radioInput": [],
       "toggle": [],

package/dist/preset.js

@@ -5725,6 +5725,265 @@ const tagRecipe = defineRecipe({
     }
   ]
 });
+const chipBase = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "1",
+  px: "2",
+  py: "0",
+  borderRadius: "2",
+  fontFamily: "sans",
+  fontSize: "inherit",
+  lineHeight: "inherit",
+  fontWeight: "500",
+  whiteSpace: "nowrap",
+  verticalAlign: "baseline",
+  cursor: "pointer",
+  transitionProperty: "common",
+  transitionDuration: "fast",
+  userSelect: "none"
+};
+const chipRecipe = defineRecipe({
+  className: "chip",
+  jsx: ["Chip"],
+  base: chipBase,
+  variants: {
+    state: {
+      resolved: {},
+      placeholder: {
+        borderStyle: "dashed",
+        borderWidth: "1px"
+      },
+      loading: {
+        cursor: "wait",
+        animation: "pulse"
+      },
+      deleted: {
+        textDecoration: "line-through",
+        cursor: "not-allowed",
+        opacity: 0.5
+      }
+    },
+    hue: {
+      blue: {},
+      purple: {},
+      orange: {},
+      green: {},
+      gray: {}
+    },
+    hasIcon: {
+      true: { pl: "1" },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    state: "resolved",
+    hue: "blue",
+    hasIcon: false
+  },
+  compoundVariants: [
+    // Blue hue (page)
+    {
+      hue: "blue",
+      state: "resolved",
+      css: {
+        color: { base: "blue.70", _dark: "blue.20" },
+        bg: { base: "blue.20", _dark: "blue.90" },
+        _hover: {
+          bg: { base: "blue.30", _dark: "blue.80" }
+        }
+      }
+    },
+    {
+      hue: "blue",
+      state: "placeholder",
+      css: {
+        color: { base: "blue.50", _dark: "blue.40" },
+        borderColor: { base: "blue.40", _dark: "blue.60" },
+        bg: "transparent",
+        _hover: {
+          bg: { base: "blue.10", _dark: "blue.90/50" }
+        }
+      }
+    },
+    {
+      hue: "blue",
+      state: "loading",
+      css: {
+        color: { base: "blue.50", _dark: "blue.40" },
+        bg: { base: "blue.10", _dark: "blue.90" }
+      }
+    },
+    {
+      hue: "blue",
+      state: "deleted",
+      css: {
+        color: { base: "blue.40", _dark: "blue.60" },
+        bg: { base: "blue.10", _dark: "blue.90" }
+      }
+    },
+    // Purple hue (daily_note)
+    {
+      hue: "purple",
+      state: "resolved",
+      css: {
+        color: { base: "purple.70", _dark: "purple.20" },
+        bg: { base: "purple.20", _dark: "purple.90" },
+        _hover: {
+          bg: { base: "purple.30", _dark: "purple.80" }
+        }
+      }
+    },
+    {
+      hue: "purple",
+      state: "placeholder",
+      css: {
+        color: { base: "purple.50", _dark: "purple.40" },
+        borderColor: { base: "purple.40", _dark: "purple.60" },
+        bg: "transparent",
+        _hover: {
+          bg: { base: "purple.10", _dark: "purple.90/50" }
+        }
+      }
+    },
+    {
+      hue: "purple",
+      state: "loading",
+      css: {
+        color: { base: "purple.50", _dark: "purple.40" },
+        bg: { base: "purple.10", _dark: "purple.90" }
+      }
+    },
+    {
+      hue: "purple",
+      state: "deleted",
+      css: {
+        color: { base: "purple.40", _dark: "purple.60" },
+        bg: { base: "purple.10", _dark: "purple.90" }
+      }
+    },
+    // Orange hue (event)
+    {
+      hue: "orange",
+      state: "resolved",
+      css: {
+        color: { base: "orange.70", _dark: "orange.20" },
+        bg: { base: "orange.20", _dark: "orange.100" },
+        _hover: {
+          bg: { base: "orange.30", _dark: "orange.90" }
+        }
+      }
+    },
+    {
+      hue: "orange",
+      state: "placeholder",
+      css: {
+        color: { base: "orange.50", _dark: "orange.40" },
+        borderColor: { base: "orange.40", _dark: "orange.60" },
+        bg: "transparent",
+        _hover: {
+          bg: { base: "orange.10", _dark: "orange.90/50" }
+        }
+      }
+    },
+    {
+      hue: "orange",
+      state: "loading",
+      css: {
+        color: { base: "orange.50", _dark: "orange.40" },
+        bg: { base: "orange.10", _dark: "orange.100" }
+      }
+    },
+    {
+      hue: "orange",
+      state: "deleted",
+      css: {
+        color: { base: "orange.40", _dark: "orange.60" },
+        bg: { base: "orange.10", _dark: "orange.100" }
+      }
+    },
+    // Green hue (person)
+    {
+      hue: "green",
+      state: "resolved",
+      css: {
+        color: { base: "green.70", _dark: "green.20" },
+        bg: { base: "green.20", _dark: "green.90" },
+        _hover: {
+          bg: { base: "green.30", _dark: "green.80" }
+        }
+      }
+    },
+    {
+      hue: "green",
+      state: "placeholder",
+      css: {
+        color: { base: "green.50", _dark: "green.40" },
+        borderColor: { base: "green.40", _dark: "green.60" },
+        bg: "transparent",
+        _hover: {
+          bg: { base: "green.10", _dark: "green.90/50" }
+        }
+      }
+    },
+    {
+      hue: "green",
+      state: "loading",
+      css: {
+        color: { base: "green.50", _dark: "green.40" },
+        bg: { base: "green.10", _dark: "green.90" }
+      }
+    },
+    {
+      hue: "green",
+      state: "deleted",
+      css: {
+        color: { base: "green.40", _dark: "green.60" },
+        bg: { base: "green.10", _dark: "green.90" }
+      }
+    },
+    // Gray hue (default/fallback)
+    {
+      hue: "gray",
+      state: "resolved",
+      css: {
+        color: "text.subtle",
+        bg: "bg.neutral",
+        _hover: {
+          bg: "bg.neutral.hovered"
+        }
+      }
+    },
+    {
+      hue: "gray",
+      state: "placeholder",
+      css: {
+        color: "text.subtlest",
+        borderColor: "border.default",
+        bg: "transparent",
+        _hover: {
+          bg: "bg.neutral"
+        }
+      }
+    },
+    {
+      hue: "gray",
+      state: "loading",
+      css: {
+        color: "text.subtlest",
+        bg: "bg.neutral"
+      }
+    },
+    {
+      hue: "gray",
+      state: "deleted",
+      css: {
+        color: "text.disabled",
+        bg: "bg.neutral"
+      }
+    }
+  ]
+});
 const themeSwitcherRecipe = defineRecipe({
   className: "themeSwitcher",
   jsx: ["ThemeSwitcher"],
@@ -6740,6 +6999,7 @@ const componentRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.de
   cardRecipe,
   checkboxInputRecipe,
   checkboxRecipe: checkboxRecipe$1,
+  chipRecipe,
   codeRecipe,
   dividerRecipe,
   headingRecipe,