@okshaun/components 0.5.3 → 0.5.5

package/dist/panda.buildinfo.json

@@ -179,8 +179,6 @@
       "color]___[value:text.brand",
       "cursor]___[value:pointer",
       "fontWeight]___[value:medium",
-      "width]___[value:24",
-      "height]___[value:24",
       "gap]___[value:6",
       "gap]___[value:2",
       "gap]___[value:3",
@@ -199,6 +197,8 @@
       "height]___[value:12",
       "gap]___[value:12",
       "marginInline]___[value:16",
+      "width]___[value:24",
+      "height]___[value:24",
       "width]___[value:20",
       "height]___[value:20",
       "width]___[value:32",
@@ -213,6 +213,12 @@
       "animationDuration]___[value:normal",
       "animationTimingFunction]___[value:default",
       "animationName]___[value:badgePopStandalone",
+      "justifyContent]___[value:flex-end",
+      "width]___[value:300px",
+      "marginBottom]___[value:2",
+      "fontSize]___[value:sm",
+      "fontWeight]___[value:semibold",
+      "textTransform]___[value:capitalize",
       "opacity]___[value:0",
       "opacity]___[value:1",
       "position]___[value:absolute",
@@ -268,7 +274,15 @@
         "iconAfter]___[value:plus]___[recipe:button",
         "iconBefore]___[value:aa-placeholder]___[recipe:button",
         "size]___[value:small]___[recipe:button",
-        "size]___[value:large]___[recipe:button"
+        "size]___[value:large]___[recipe:button",
+        "size]___[value:xlarge]___[recipe:button",
+        "iconBefore]___[value:plus]___[recipe:button",
+        "iconBefore]___[value:check]___[recipe:button",
+        "iconBefore]___[value:edit]___[recipe:button",
+        "iconAfter]___[value:arrow-square-out]___[recipe:button",
+        "iconAfter]___[value:arrow-right]___[recipe:button",
+        "iconBefore]___[value:arrow-left]___[recipe:button",
+        "iconBefore]___[value:trash]___[recipe:button"
       ],
       "themeSwitcher": [],
       "heading": [
@@ -295,7 +309,8 @@
       "spinner": [
         "size]___[value:small]___[recipe:spinner",
         "size]___[value:standard]___[recipe:spinner",
-        "size]___[value:large]___[recipe:spinner"
+        "size]___[value:large]___[recipe:spinner",
+        "inverse]___[value:true]___[recipe:spinner"
       ],
       "badge": [
         "size]___[value:sm]___[recipe:badge",

package/dist/preset.js

@@ -4534,7 +4534,7 @@ const conditions = {
   onlyOfType: "&:only-of-type",
   peerFocus: ".peer:is(:focus, [data-focus]) ~ &",
   peerHover: ".peer:is(:hover, [data-hover]) ~ &",
-  peerActive: ".peer:is(:active, [data-active]) ~ &",
+  peerActive: ".peer:is(:active, [data-active=true]) ~ &",
   peerFocusWithin: ".peer:focus-within ~ &",
   peerFocusVisible: ".peer:is(:focus-visible, [data-focus-visible]) ~ &",
   peerDisabled: ".peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &",
@@ -4544,7 +4544,7 @@ const conditions = {
   peerPlaceholderShown: ".peer:placeholder-shown ~ &",
   groupFocus: ".group:is(:focus, [data-focus]) &",
   groupHover: ".group:is(:hover, [data-hover]) &",
-  groupActive: ".group:is(:active, [data-active]) &",
+  groupActive: ".group:is(:active, [data-active=true]) &",
   groupFocusWithin: ".group:focus-within &",
   groupFocusVisible: ".group:is(:focus-visible, [data-focus-visible]) &",
   groupDisabled: ".group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &",
@@ -5113,11 +5113,11 @@ const spinnerBase = {
   borderWidth: "3",
   borderStyle: "solid",
   borderColor: "transparent",
-  borderTopColor: "gray.90",
-  borderBottomColor: "gray.90",
+  borderTopColor: "icon",
+  borderBottomColor: "icon",
   animation: "spin",
-  filter: "invert(1)",
-  mixBlendMode: "difference",
+  // filter: 'invert(1)',
+  // mixBlendMode: 'difference',
   isolation: "isolate"
 };
 const spinnerVariants = {
@@ -5134,6 +5134,12 @@ const spinnerVariants = {
       height: "32",
       minHeight: "32"
     }
+  },
+  inverse: {
+    true: {
+      borderTopColor: "icon.inverse",
+      borderBottomColor: "icon.inverse"
+    }
   }
 };
 const spinnerRecipe = defineRecipe({
@@ -6526,9 +6532,6 @@ const menuBase = {
     _focusVisible: {
       bg: "surface.overlay.hovered"
     },
-    _active: {
-      bg: "surface.overlay.hovered"
-    },
     _disabled: {
       opacity: 0.5,
       cursor: "not-allowed",
@@ -6567,7 +6570,7 @@ const menuBase = {
     w: "24",
     h: "24",
     ml: "auto",
-    color: "icon.subtlest"
+    color: "icon.decorative"
   },
   // Content wrapper (label + description)
   menuItemContent: {
@@ -6698,15 +6701,21 @@ const chipBase = {
     verticalAlign: "middle",
     cursor: "pointer",
     transitionDuration: "fast",
-    transitionProperty: "background, border-color, color, box-shadow",
+    transitionProperty: "background, color",
     transitionTimingFunction: "default",
     userSelect: "none",
+    border: "none",
     outlineWidth: 2,
     outlineStyle: "solid",
     outlineColor: "transparent",
     bg: "bg.neutral",
     color: "text",
-    icon: { fill: "icon.decorative" },
+    icon: {
+      fill: "icon.decorative",
+      transitionDuration: "fast",
+      transitionProperty: "fill",
+      transitionTimingFunction: "default"
+    },
     _hover: {
       bg: "bg.neutral.hovered",
       icon: { fill: "icon.decorative.hovered" }