@aggc/ui 0.6.0 → 0.7.0

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-DhPY_hNA.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-DhPY_hNA.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
 };

package/dist/tokens/colors.d.ts

@@ -248,6 +248,12 @@ export declare const colorTokens: {
                 readonly _dark: "rgba(122, 170, 255, 0.82)";
             };
         };
+        readonly dangerSoft: {
+            readonly value: {
+                readonly base: "rgba(217, 45, 32, 0.06)";
+                readonly _dark: "rgba(255, 142, 127, 0.08)";
+            };
+        };
     };
     readonly border: {
         readonly soft: {
@@ -280,6 +286,12 @@ export declare const colorTokens: {
                 readonly _dark: "rgba(125, 171, 255, 0.44)";
             };
         };
+        readonly danger: {
+            readonly value: {
+                readonly base: "rgba(217, 45, 32, 0.35)";
+                readonly _dark: "rgba(255, 142, 127, 0.35)";
+            };
+        };
     };
     readonly badge: {
         readonly successBg: {
@@ -354,6 +366,24 @@ export declare const colorTokens: {
                 readonly _dark: "rgba(183, 195, 215, 0.22)";
             };
         };
+        readonly dangerBg: {
+            readonly value: {
+                readonly base: "rgba(217, 45, 32, 0.12)";
+                readonly _dark: "rgba(255, 142, 127, 0.15)";
+            };
+        };
+        readonly dangerText: {
+            readonly value: {
+                readonly base: "#b42318";
+                readonly _dark: "#ff8e7f";
+            };
+        };
+        readonly dangerBorder: {
+            readonly value: {
+                readonly base: "rgba(217, 45, 32, 0.22)";
+                readonly _dark: "rgba(255, 142, 127, 0.3)";
+            };
+        };
     };
 };
 export { coreColorTokens } from "./core-colors";

package/dist/tokens/core-colors.d.ts

@@ -128,6 +128,12 @@ export declare const coreColorTokens: {
                 readonly _dark: "rgba(122, 170, 255, 0.82)";
             };
         };
+        readonly dangerSoft: {
+            readonly value: {
+                readonly base: "rgba(217, 45, 32, 0.06)";
+                readonly _dark: "rgba(255, 142, 127, 0.08)";
+            };
+        };
     };
     readonly border: {
         readonly soft: {
@@ -160,6 +166,12 @@ export declare const coreColorTokens: {
                 readonly _dark: "rgba(125, 171, 255, 0.44)";
             };
         };
+        readonly danger: {
+            readonly value: {
+                readonly base: "rgba(217, 45, 32, 0.35)";
+                readonly _dark: "rgba(255, 142, 127, 0.35)";
+            };
+        };
     };
     readonly badge: {
         readonly successBg: {
@@ -234,5 +246,23 @@ export declare const coreColorTokens: {
                 readonly _dark: "rgba(183, 195, 215, 0.22)";
             };
         };
+        readonly dangerBg: {
+            readonly value: {
+                readonly base: "rgba(217, 45, 32, 0.12)";
+                readonly _dark: "rgba(255, 142, 127, 0.15)";
+            };
+        };
+        readonly dangerText: {
+            readonly value: {
+                readonly base: "#b42318";
+                readonly _dark: "#ff8e7f";
+            };
+        };
+        readonly dangerBorder: {
+            readonly value: {
+                readonly base: "rgba(217, 45, 32, 0.22)";
+                readonly _dark: "rgba(255, 142, 127, 0.3)";
+            };
+        };
     };
 };

package/dist/tokens/motion.d.ts

@@ -1,10 +1,30 @@
 export declare const motionTokens: {
     readonly durations: {
+        readonly fast: {
+            readonly value: "100ms";
+        };
         readonly moderate: {
             readonly value: "160ms";
         };
         readonly emphasized: {
             readonly value: "240ms";
         };
+        readonly slow: {
+            readonly value: "320ms";
+        };
+    };
+    readonly easings: {
+        readonly default: {
+            readonly value: "cubic-bezier(0.25, 0.1, 0.25, 1)";
+        };
+        readonly out: {
+            readonly value: "cubic-bezier(0.16, 1, 0.3, 1)";
+        };
+        readonly inOut: {
+            readonly value: "cubic-bezier(0.45, 0, 0.55, 1)";
+        };
+        readonly spring: {
+            readonly value: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+        };
     };
 };

package/dist/tokens/radius.d.ts

@@ -1,5 +1,14 @@
 export declare const radiusTokens: {
+    readonly "2xs": {
+        readonly value: "0.125rem";
+    };
+    readonly "3xs": {
+        readonly value: "0.0625rem";
+    };
     readonly "4xl": {
         readonly value: "2rem";
     };
+    readonly "5xl": {
+        readonly value: "2.5rem";
+    };
 };

package/dist/tokens-core.js

@@ -21,14 +21,16 @@ const a = {
     header: { value: { base: "rgba(250, 252, 255, 0.58)", _dark: "rgba(0, 0, 0, 0.84)" } },
     menu: { value: { base: "rgba(255, 255, 255, 0.9)", _dark: "rgba(9, 12, 18, 0.99)" } },
     accentSoft: { value: { base: "rgba(49, 94, 255, 0.1)", _dark: "rgba(138, 180, 255, 0.18)" } },
-    accentStrong: { value: { base: "rgba(49, 94, 255, 0.86)", _dark: "rgba(122, 170, 255, 0.82)" } }
+    accentStrong: { value: { base: "rgba(49, 94, 255, 0.86)", _dark: "rgba(122, 170, 255, 0.82)" } },
+    dangerSoft: { value: { base: "rgba(217, 45, 32, 0.06)", _dark: "rgba(255, 142, 127, 0.08)" } }
   },
   border: {
     soft: { value: { base: "rgba(148, 163, 184, 0.14)", _dark: "rgba(255, 255, 255, 0.035)" } },
     subtle: { value: { base: "rgba(125, 146, 182, 0.2)", _dark: "rgba(255, 255, 255, 0.09)" } },
     default: { value: { base: "rgba(109, 130, 164, 0.28)", _dark: "rgba(255, 255, 255, 0.14)" } },
     strong: { value: { base: "rgba(80, 98, 127, 0.42)", _dark: "rgba(255, 255, 255, 0.22)" } },
-    accent: { value: { base: "rgba(82, 121, 255, 0.5)", _dark: "rgba(125, 171, 255, 0.44)" } }
+    accent: { value: { base: "rgba(82, 121, 255, 0.5)", _dark: "rgba(125, 171, 255, 0.44)" } },
+    danger: { value: { base: "rgba(217, 45, 32, 0.35)", _dark: "rgba(255, 142, 127, 0.35)" } }
   },
   badge: {
     successBg: { value: { base: "rgba(19, 163, 74, 0.12)", _dark: "rgba(19, 80, 58, 0.7)" } },
@@ -42,15 +44,29 @@ const a = {
     infoBorder: { value: { base: "rgba(37, 99, 235, 0.2)", _dark: "rgba(154, 193, 255, 0.3)" } },
     neutralBg: { value: { base: "rgba(99, 115, 148, 0.08)", _dark: "rgba(21, 26, 35, 0.92)" } },
     neutralText: { value: { base: "#4b5d7a", _dark: "#d0d7e4" } },
-    neutralBorder: { value: { base: "rgba(109, 130, 164, 0.18)", _dark: "rgba(183, 195, 215, 0.22)" } }
+    neutralBorder: { value: { base: "rgba(109, 130, 164, 0.18)", _dark: "rgba(183, 195, 215, 0.22)" } },
+    dangerBg: { value: { base: "rgba(217, 45, 32, 0.12)", _dark: "rgba(255, 142, 127, 0.15)" } },
+    dangerText: { value: { base: "#b42318", _dark: "#ff8e7f" } },
+    dangerBorder: { value: { base: "rgba(217, 45, 32, 0.22)", _dark: "rgba(255, 142, 127, 0.3)" } }
   }
 }, e = {
   durations: {
+    fast: { value: "100ms" },
     moderate: { value: "160ms" },
-    emphasized: { value: "240ms" }
+    emphasized: { value: "240ms" },
+    slow: { value: "320ms" }
+  },
+  easings: {
+    default: { value: "cubic-bezier(0.25, 0.1, 0.25, 1)" },
+    out: { value: "cubic-bezier(0.16, 1, 0.3, 1)" },
+    inOut: { value: "cubic-bezier(0.45, 0, 0.55, 1)" },
+    spring: { value: "cubic-bezier(0.34, 1.56, 0.64, 1)" }
   }
 }, r = {
-  "4xl": { value: "2rem" }
+  "2xs": { value: "0.125rem" },
+  "3xs": { value: "0.0625rem" },
+  "4xl": { value: "2rem" },
+  "5xl": { value: "2.5rem" }
 }, b = {
   18: { value: "4.5rem" },
   22: { value: "5.5rem" }