@aggc/ui 0.6.0 → 0.7.1

package/dist/components/UiSkeleton.styles.d.ts

@@ -3,65 +3,33 @@ export declare const skeletonClass: import("../../styled-system/types").RecipeRu
         text: {
             width: "100%";
             height: "0.875rem";
-            borderRadius: "md";
-            bg: "rgba(127, 146, 184, 0.14)";
-            _dark: {
-                bg: "rgba(210, 220, 240, 0.09)";
-            };
         };
         title: {
             width: "100%";
             height: "1.75rem";
-            borderRadius: "xl";
-            bg: "rgba(127, 146, 184, 0.14)";
-            _dark: {
-                bg: "rgba(210, 220, 240, 0.09)";
-            };
+            borderRadius: "md";
         };
         rect: {
             width: "100%";
             height: "5rem";
-            borderRadius: "xl";
-            bg: "rgba(127, 146, 184, 0.14)";
-            _dark: {
-                bg: "rgba(210, 220, 240, 0.09)";
-            };
         };
         pill: {
             width: "5rem";
             height: "1.75rem";
             borderRadius: "999px";
-            bg: "rgba(127, 146, 184, 0.14)";
-            _dark: {
-                bg: "rgba(210, 220, 240, 0.09)";
-            };
         };
         circle: {
             width: "2.75rem";
             height: "2.75rem";
             borderRadius: "999px";
-            bg: "rgba(127, 146, 184, 0.14)";
-            _dark: {
-                bg: "rgba(210, 220, 240, 0.09)";
-            };
         };
         stat: {
             width: "100%";
             height: "4.75rem";
-            borderRadius: "xl";
-            bg: "rgba(117, 138, 178, 0.16)";
-            _dark: {
-                bg: "rgba(210, 220, 240, 0.11)";
-            };
         };
         action: {
             width: "100%";
             height: "2.75rem";
-            borderRadius: "xl";
-            bg: "rgba(127, 146, 184, 0.14)";
-            _dark: {
-                bg: "rgba(210, 220, 240, 0.09)";
-            };
         };
     };
 }>;

package/dist/components.js

@@ -1,4 +1,4 @@
-import { _ as s, a as t, b as i, c as o, d as n, e as S, f as U, g as d, h as l, i as c, j as g } from "./chunks/UiSkeleton.vue_vue_type_script_setup_true_lang-B61z8swg.js";
+import { _ as s, a as t, b as i, c as o, d as n, e as S, f as U, g as d, h as l, i as c, j as g } from "./chunks/UiSkeleton.vue_vue_type_script_setup_true_lang-DUse1KRc.js";
 export {
   s as PageSurface,
   t as ResultPanel,

package/dist/index.js

@@ -1,6 +1,6 @@
-import { _ as a, a as l, b as o, c as t, d as i, e as n, f as r, g as C, h as c, i as p, j as d } from "./chunks/UiSkeleton.vue_vue_type_script_setup_true_lang-B61z8swg.js";
+import { _ as a, a as l, b as o, c as t, d as i, e as n, f as r, g as C, h as c, i as p, j as d } from "./chunks/UiSkeleton.vue_vue_type_script_setup_true_lang-DUse1KRc.js";
 import { actionToolbarClass as u, badgeRecipe as f, cardRecipe as m, centeredEmptyStatePanelClass as k, clusterLayout as R, emptyStatePanelClass as T, errorTextClass as S, fieldControlClass as x, fieldControlSmClass as b, fieldTextareaClass as P, focusRingClass as y, infoPanelClass as U, inputRecipe as L, loadingRegionClass as h, metricGridPattern as B, mutedTextClass as D, resultRegionClass as H, resultSkeletonPanelClass as j, selectableDetailClass as w, selectableListClass as v, selectableListDetailRootClass as A, splitLayout as E, stackLayout as F } from "./styles.js";
-import { b as V, c as _, d as q, e as z, a as I, h as J, i as K, m as M, p as N, f as O, g as Q, j as W, k as X, s as Y, l as Z, n as $ } from "./chunks/pageHeader-D9KF7WOO.js";
+import { b as V, c as _, d as q, e as z, a as I, h as J, i as K, m as M, p as N, f as O, g as Q, j as W, k as X, s as Y, l as Z, n as $ } from "./chunks/pageHeader-YZ3BV9dQ.js";
 import { colorTokens as es } from "./tokens.js";
 import { coreColorTokens as ls, motionTokens as os, radiusTokens as ts, spacingTokens as is, typographyTokens as ns } from "./tokens-core.js";
 import { desktopColorTokens as Cs } from "./tokens-desktop.js";

package/dist/styles/recipes/badge.recipe.d.ts

@@ -20,6 +20,11 @@ export declare const badgeRecipe: import("../../../styled-system/types").RecipeR
             bg: "badge.warningBg";
             color: "badge.warningText";
         };
+        danger: {
+            borderColor: "badge.dangerBorder";
+            bg: "badge.dangerBg";
+            color: "badge.dangerText";
+        };
     };
     size: {
         sm: {

package/dist/styles/recipes/button.recipe.d.ts

@@ -6,7 +6,7 @@ export declare const buttonRecipe: import("../../../styled-system/types").Recipe
             borderWidth: "1px";
             borderColor: "transparent";
             _dark: {
-                color: "#f7f9fd";
+                color: "text.inverse";
             };
         };
         outline: {
@@ -22,6 +22,33 @@ export declare const buttonRecipe: import("../../../styled-system/types").Recipe
             borderColor: "badge.infoBorder";
         };
     };
+    size: {
+        sm: {
+            px: "3";
+            py: "1.5";
+            fontSize: "xs";
+            borderRadius: "md";
+        };
+        md: {
+            px: "4";
+            py: "2.5";
+        };
+        lg: {
+            px: "5";
+            py: "3";
+            fontSize: "md";
+            borderRadius: "xl";
+        };
+    };
+    tone: {
+        default: {};
+        danger: {
+            bg: "text.error";
+            color: "text.inverse";
+            borderWidth: "1px";
+            borderColor: "transparent";
+        };
+    };
     disabled: {
         true: {
             cursor: "not-allowed";

package/dist/styles/recipes/card.recipe.d.ts

@@ -2,36 +2,47 @@ export declare const cardRecipe: import("../../../styled-system/types").RecipeRu
     variant: {
         surface: {
             position: "relative";
-            overflow: "hidden";
-            borderRadius: "3xl";
+            borderRadius: "xl";
             borderColor: "border.subtle";
             bg: "bg.card";
-            backdropFilter: "blur(28px) saturate(155%)";
-            boxShadow: "0 25px 30px -35px rgba(15,23,42,0.42)";
+            boxShadow: "0 1px 2px 0 rgba(15,23,42,0.04), 0 1px 3px 0 rgba(15,23,42,0.06)";
+            _dark: {
+                borderColor: "border.default";
+                boxShadow: "0 1px 2px 0 rgba(0,0,0,0.2), 0 1px 3px 0 rgba(0,0,0,0.24)";
+            };
         };
         inset: {
-            borderRadius: "2xl";
+            borderRadius: "lg";
             borderColor: "border.soft";
             bg: "bg.cardAlt";
-            backdropFilter: "blur(24px) saturate(145%)";
-            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22)";
+            _dark: {
+                borderColor: "border.subtle";
+            };
         };
         elevated: {
-            borderRadius: "2xl";
+            borderRadius: "lg";
             borderColor: "border.default";
             bg: "bg.cardStrong";
-            backdropFilter: "blur(24px) saturate(145%)";
-            boxShadow: "0 16px 32px -28px rgba(15,23,42,0.42)";
+            boxShadow: "0 1px 2px 0 rgba(15,23,42,0.04), 0 4px 12px -4px rgba(15,23,42,0.1)";
+            _dark: {
+                borderColor: "border.strong";
+                boxShadow: "0 1px 2px 0 rgba(0,0,0,0.24), 0 4px 12px -4px rgba(0,0,0,0.4)";
+            };
         };
         selectable: {
-            borderRadius: "2xl";
+            borderRadius: "lg";
             borderColor: "border.default";
             bg: "bg.cardAlt";
             cursor: "pointer";
             _hover: {
                 borderColor: "border.strong";
                 bg: "bg.card";
-                transform: "translateY(-1px)";
+            };
+            _dark: {
+                borderColor: "border.strong";
+                _hover: {
+                    borderColor: "border.accent";
+                };
             };
         };
     };

package/dist/styles/recipes/dropdown.recipe.d.ts

@@ -2,7 +2,7 @@ export declare const dropdownRecipe: import("../../../styled-system/types").Reci
     placement: {
         anchored: {
             position: "absolute";
-            top: "calc(100% + 10px)";
+            top: "calc(100% + 6px)";
             left: "0";
             right: "0";
         };
@@ -12,14 +12,14 @@ export declare const dropdownRecipe: import("../../../styled-system/types").Reci
     };
     density: {
         cozy: {
-            borderRadius: "2xl";
-            p: "2";
-            gap: "1";
-        };
-        compact: {
             borderRadius: "xl";
             p: "1.5";
             gap: "0.5";
         };
+        compact: {
+            borderRadius: "lg";
+            p: "1";
+            gap: "0.5";
+        };
     };
 }>;

package/dist/styles/recipes/input.recipe.d.ts

@@ -6,7 +6,6 @@ export declare const inputRecipe: import("../../../styled-system/types").RecipeR
             px: "3";
             py: "2.5";
             lineHeight: "1.45";
-            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.2)";
         };
         md: {
             minHeight: "48px";
@@ -14,7 +13,6 @@ export declare const inputRecipe: import("../../../styled-system/types").RecipeR
             px: "4";
             py: "3";
             lineHeight: "1.5";
-            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.24), 0 14px 28px -28px rgba(15,23,42,0.42)";
         };
     };
     kind: {
@@ -26,7 +24,6 @@ export declare const inputRecipe: import("../../../styled-system/types").RecipeR
             py: "4";
             lineHeight: "1.6";
             fontFamily: "mono";
-            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.24), 0 18px 36px -32px rgba(15,23,42,0.42)";
         };
     };
 }>;

package/dist/styles.js

@@ -1,6 +1,6 @@
-import { r as e, o as a, q as r, i as t, h as o } from "./chunks/pageHeader-D9KF7WOO.js";
-import { b as F, c as B, d as P, e as V, a as j, m as I, p as L, f as q, g as A, j as D, k as E, s as G, l as O, n as Y } from "./chunks/pageHeader-D9KF7WOO.js";
-const l = e({
+import { r as e, o as r, q as o, i as a, h as t } from "./chunks/pageHeader-YZ3BV9dQ.js";
+import { b as V, c as B, d as P, e as j, a as I, m as L, p as q, f as A, g as D, j as F, k as E, s as G, l as O, n as J } from "./chunks/pageHeader-YZ3BV9dQ.js";
+const d = e({
   width: "100%",
   minHeight: "48px",
   borderRadius: "xl",
@@ -12,17 +12,20 @@ const l = e({
   lineHeight: "1.5",
   px: "4",
   py: "3",
-  backdropFilter: "blur(22px) saturate(145%)",
-  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.24), 0 14px 28px -28px rgba(15,23,42,0.42)",
-  transition: "border-color 160ms ease, background 160ms ease, transform 160ms ease",
+  transition: "border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease",
   _hover: {
     borderColor: "border.strong"
   },
   _placeholder: {
     color: "text.muted"
   },
+  _focusVisible: {
+    outline: "none",
+    borderColor: "border.accent",
+    boxShadow: "0 0 0 3px rgba(82, 121, 255, 0.18)"
+  },
   _dark: {
-    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03)"
+    borderColor: "border.strong"
   }
 }), n = e({
   width: "100%",
@@ -36,19 +39,22 @@ const l = e({
   lineHeight: "1.45",
   px: "3",
   py: "2.5",
-  backdropFilter: "blur(20px) saturate(145%)",
-  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.2)",
-  transition: "border-color 160ms ease, background 160ms ease",
+  transition: "border-color 160ms ease, background-color 160ms ease",
   _hover: {
     borderColor: "border.strong"
   },
   _placeholder: {
     color: "text.muted"
   },
+  _focusVisible: {
+    outline: "none",
+    borderColor: "border.accent",
+    boxShadow: "0 0 0 3px rgba(82, 121, 255, 0.18)"
+  },
   _dark: {
-    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03)"
+    borderColor: "border.strong"
   }
-}), d = e({
+}), l = e({
   width: "100%",
   minHeight: "420px",
   borderRadius: "2xl",
@@ -61,68 +67,84 @@ const l = e({
   lineHeight: "1.6",
   px: "4",
   py: "4",
-  backdropFilter: "blur(24px) saturate(145%)",
-  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.24), 0 18px 36px -32px rgba(15,23,42,0.42)",
+  transition: "border-color 160ms ease, background-color 160ms ease",
   _hover: {
     borderColor: "border.strong"
   },
+  _focusVisible: {
+    outline: "none",
+    borderColor: "border.accent",
+    boxShadow: "0 0 0 3px rgba(82, 121, 255, 0.18)"
+  },
   _dark: {
-    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03)"
+    borderColor: "border.strong"
   }
-}), p = e({
+}), b = e({
   position: "relative",
   minWidth: "0"
-}), b = e({
+}), g = e({
   color: "text.error",
   fontSize: "sm",
-  fontWeight: "600"
-}), g = e({
+  fontWeight: "600",
+  lineHeight: "1.5"
+}), p = e({
   color: "text.muted",
   fontSize: "sm",
   lineHeight: "1.6"
-}), x = e({
+}), c = e({
   outline: "2px solid var(--colors-text-accent)",
   outlineOffset: "2px"
-}), m = a({
+}), m = r({
   base: {
     minWidth: "0",
     borderWidth: "1px",
-    transition: "all 160ms ease"
+    transition: "border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 160ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 160ms cubic-bezier(0.25, 0.1, 0.25, 1)"
   },
   variants: {
     variant: {
       surface: {
         position: "relative",
-        overflow: "hidden",
-        borderRadius: "3xl",
+        borderRadius: "xl",
         borderColor: "border.subtle",
         bg: "bg.card",
-        backdropFilter: "blur(28px) saturate(155%)",
-        boxShadow: "0 25px 30px -35px rgba(15,23,42,0.42)"
+        boxShadow: "0 1px 2px 0 rgba(15,23,42,0.04), 0 1px 3px 0 rgba(15,23,42,0.06)",
+        _dark: {
+          borderColor: "border.default",
+          boxShadow: "0 1px 2px 0 rgba(0,0,0,0.2), 0 1px 3px 0 rgba(0,0,0,0.24)"
+        }
       },
       inset: {
-        borderRadius: "2xl",
+        borderRadius: "lg",
         borderColor: "border.soft",
         bg: "bg.cardAlt",
-        backdropFilter: "blur(24px) saturate(145%)",
-        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22)"
+        _dark: {
+          borderColor: "border.subtle"
+        }
       },
       elevated: {
-        borderRadius: "2xl",
+        borderRadius: "lg",
         borderColor: "border.default",
         bg: "bg.cardStrong",
-        backdropFilter: "blur(24px) saturate(145%)",
-        boxShadow: "0 16px 32px -28px rgba(15,23,42,0.42)"
+        boxShadow: "0 1px 2px 0 rgba(15,23,42,0.04), 0 4px 12px -4px rgba(15,23,42,0.1)",
+        _dark: {
+          borderColor: "border.strong",
+          boxShadow: "0 1px 2px 0 rgba(0,0,0,0.24), 0 4px 12px -4px rgba(0,0,0,0.4)"
+        }
       },
       selectable: {
-        borderRadius: "2xl",
+        borderRadius: "lg",
         borderColor: "border.default",
         bg: "bg.cardAlt",
         cursor: "pointer",
         _hover: {
           borderColor: "border.strong",
-          bg: "bg.card",
-          transform: "translateY(-1px)"
+          bg: "bg.card"
+        },
+        _dark: {
+          borderColor: "border.strong",
+          _hover: {
+            borderColor: "border.accent"
+          }
         }
       }
     },
@@ -144,7 +166,7 @@ const l = e({
     variant: "surface",
     padding: "md"
   }
-}), c = a({
+}), x = r({
   base: {
     display: "inline-flex",
     alignItems: "center",
@@ -156,12 +178,7 @@ const l = e({
     fontSize: "sm",
     fontWeight: "600",
     lineHeight: "1",
-    whiteSpace: "nowrap",
-    backdropFilter: "blur(16px) saturate(140%)",
-    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.16)",
-    _dark: {
-      boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)"
-    }
+    whiteSpace: "nowrap"
   },
   variants: {
     tone: {
@@ -184,6 +201,11 @@ const l = e({
         borderColor: "badge.warningBorder",
         bg: "badge.warningBg",
         color: "badge.warningText"
+      },
+      danger: {
+        borderColor: "badge.dangerBorder",
+        bg: "badge.dangerBg",
+        color: "badge.dangerText"
       }
     },
     size: {
@@ -195,7 +217,7 @@ const l = e({
     tone: "neutral",
     size: "md"
   }
-}), u = a({
+}), u = r({
   base: {
     width: "100%",
     borderWidth: "1px",
@@ -203,16 +225,23 @@ const l = e({
     bg: "bg.input",
     color: "text.primary",
     fontSize: "sm",
-    backdropFilter: "blur(22px) saturate(145%)",
-    transition: "border-color 160ms ease, background 160ms ease",
+    transition: "border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 160ms cubic-bezier(0.25, 0.1, 0.25, 1)",
     _placeholder: {
       color: "text.muted"
     },
     _hover: {
       borderColor: "border.strong"
     },
+    _focusVisible: {
+      outline: "none",
+      borderColor: "border.accent",
+      boxShadow: "0 0 0 3px var(--colors-bg-accentSoft, rgba(49, 94, 255, 0.12))"
+    },
     _dark: {
-      boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03)"
+      borderColor: "border.strong",
+      _focusVisible: {
+        boxShadow: "0 0 0 3px var(--colors-bg-accentSoft, rgba(138, 180, 255, 0.14))"
+      }
     }
   },
   variants: {
@@ -222,16 +251,14 @@ const l = e({
         borderRadius: "lg",
         px: "3",
         py: "2.5",
-        lineHeight: "1.45",
-        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.2)"
+        lineHeight: "1.45"
       },
       md: {
         minHeight: "48px",
         borderRadius: "xl",
         px: "4",
         py: "3",
-        lineHeight: "1.5",
-        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.24), 0 14px 28px -28px rgba(15,23,42,0.42)"
+        lineHeight: "1.5"
       }
     },
     kind: {
@@ -242,8 +269,7 @@ const l = e({
         px: "4",
         py: "4",
         lineHeight: "1.6",
-        fontFamily: "mono",
-        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.24), 0 18px 36px -32px rgba(15,23,42,0.42)"
+        fontFamily: "mono"
       }
     }
   },
@@ -251,7 +277,7 @@ const l = e({
     size: "md",
     kind: "input"
   }
-}), f = a({
+}), f = r({
   base: {
     display: "grid",
     alignContent: "start",
@@ -269,7 +295,7 @@ const l = e({
   defaultVariants: {
     gap: "md"
   }
-}), h = a({
+}), C = r({
   base: {
     display: "flex",
     flexWrap: "wrap",
@@ -293,7 +319,7 @@ const l = e({
     gap: "sm",
     justify: "start"
   }
-}), C = a({
+}), h = r({
   base: {
     display: "grid",
     gap: "4",
@@ -316,7 +342,7 @@ const l = e({
   defaultVariants: {
     ratio: "equal"
   }
-}), y = a({
+}), y = r({
   base: {
     display: "grid",
     gap: "4",
@@ -341,89 +367,89 @@ const l = e({
   position: "relative",
   minWidth: "0",
   minHeight: "220px"
-}), R = r(
-  t,
+}), v = o(
+  a,
   e({
     padding: "4",
     display: "grid",
     gap: "3"
   })
-), k = r(
-  t,
+), R = o(
+  a,
   e({
     minHeight: "220px",
     padding: "4",
     display: "grid",
     gap: "3"
   })
-), s = r(
+), s = o(
+  a,
   t,
-  o,
   e({
     display: "grid",
     gap: "2",
     padding: "4",
     lineHeight: "1.7"
   })
-), v = r(
+), H = o(
   s,
   e({
     alignContent: "center",
     minHeight: "220px"
   })
-), H = e({
+), _ = e({
   display: "grid",
   gap: "4",
   gridTemplateColumns: { base: "1fr", xl: "minmax(18rem, 0.9fr) minmax(0, 1.4fr)" },
   alignItems: "start"
-}), W = e({
+}), k = e({
   display: "grid",
   gap: "2",
   alignContent: "start",
   minWidth: "0"
-}), T = e({
+}), z = e({
   display: "grid",
   gap: "4",
   minWidth: "0"
 });
 export {
   w as actionToolbarClass,
-  c as badgeRecipe,
-  F as buttonRecipe,
+  x as badgeRecipe,
+  V as buttonRecipe,
   m as cardRecipe,
-  v as centeredEmptyStatePanelClass,
-  h as clusterLayout,
+  H as centeredEmptyStatePanelClass,
+  C as clusterLayout,
   B as codeBlockClass,
   P as dropdownRecipe,
-  V as elevatedPanelClass,
+  j as elevatedPanelClass,
   s as emptyStatePanelClass,
-  b as errorTextClass,
-  j as eyebrowClass,
-  l as fieldControlClass,
+  g as errorTextClass,
+  I as eyebrowClass,
+  d as fieldControlClass,
   n as fieldControlSmClass,
-  d as fieldTextareaClass,
-  x as focusRingClass,
-  o as helperTextClass,
-  R as infoPanelClass,
+  l as fieldTextareaClass,
+  c as focusRingClass,
+  t as helperTextClass,
+  v as infoPanelClass,
   u as inputRecipe,
-  t as insetPanelClass,
-  p as loadingRegionClass,
+  a as insetPanelClass,
+  b as loadingRegionClass,
   y as metricGridPattern,
-  I as metricValueClass,
-  g as mutedTextClass,
-  L as pageHeaderActionsClass,
-  q as pageHeaderContentClass,
-  A as pageHeaderRootClass,
-  D as pageRootClass,
+  L as metricValueClass,
+  p as mutedTextClass,
+  q as pageHeaderActionsClass,
+  A as pageHeaderContentClass,
+  D as pageHeaderRootClass,
+  F as pageRootClass,
   E as pageScrollRegionClass,
   S as resultRegionClass,
-  k as resultSkeletonPanelClass,
+  R as resultSkeletonPanelClass,
   G as sectionDescriptionClass,
   O as sectionTitleClass,
-  T as selectableDetailClass,
-  W as selectableListClass,
-  H as selectableListDetailRootClass,
-  C as splitLayout,
+  z as selectableDetailClass,
+  k as selectableListClass,
+  _ as selectableListDetailRootClass,
+  h as splitLayout,
   f as stackLayout,
-  Y as surfacePanelClass
+  J as surfacePanelClass
 };