@aggc/ui 0.5.1 → 0.7.0

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

@@ -20,5 +20,10 @@ export declare const statusBadgeClass: import("../../styled-system/types").Recip
             color: "badge.neutralText";
             borderColor: "badge.neutralBorder";
         };
+        danger: {
+            bg: "badge.dangerBg";
+            color: "badge.dangerText";
+            borderColor: "badge.dangerBorder";
+        };
     };
 }>;

package/dist/components/StatusBadge.vue.d.ts

@@ -1,12 +1,12 @@
 type __VLS_Props = {
-    tone?: "success" | "warning" | "info" | "neutral";
+    tone?: "success" | "warning" | "info" | "danger" | "neutral";
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    tone: "success" | "warning" | "info" | "neutral";
+    tone: "success" | "warning" | "info" | "danger" | "neutral";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,15 +1,12 @@
 export declare const uiButtonClass: import("../../styled-system/types").RecipeRuntimeFn<{
     variant: {
         solid: {
-            bg: "linear-gradient(135deg, rgba(31,67,182,0.96) 0%, rgba(49,94,255,0.92) 100%)";
+            bg: "text.accent";
             color: "text.inverse";
             borderWidth: "1px";
-            borderColor: "rgba(255,255,255,0.18)";
-            boxShadow: "0 22px 36px -24px rgba(49,94,255,0.78), inset 0 1px 0 rgba(255,255,255,0.24)";
+            borderColor: "transparent";
             _dark: {
-                color: "#f7f9fd";
-                borderColor: "rgba(255,255,255,0.06)";
-                boxShadow: "0 22px 40px -24px rgba(71,121,255,0.55), inset 0 1px 0 rgba(255,255,255,0.18)";
+                color: "text.inverse";
             };
         };
         outline: {
@@ -17,19 +14,41 @@ export declare const uiButtonClass: import("../../styled-system/types").RecipeRu
             color: "text.secondary";
             borderWidth: "1px";
             borderColor: "border.default";
-            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.18)";
-            _dark: {
-                boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)";
-            };
         };
         subtle: {
             bg: "bg.accentSoft";
             color: "text.accent";
             borderWidth: "1px";
             borderColor: "badge.infoBorder";
-            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22)";
+        };
+    };
+    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";
             _dark: {
-                boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)";
+                color: "text.inverse";
             };
         };
     };

package/dist/components/UiButton.vue.d.ts

@@ -1,5 +1,7 @@
 type __VLS_Props = {
     variant?: "solid" | "outline" | "subtle";
+    size?: "sm" | "md" | "lg";
+    tone?: "default" | "danger";
     loading?: boolean;
     loadingLabel?: string;
     disabled?: boolean;
@@ -11,7 +13,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "md" | "lg";
     variant: "solid" | "outline" | "subtle";
+    tone: "default" | "danger";
     disabled: boolean;
     loading: boolean;
     type: "button" | "submit";

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

@@ -3,12 +3,10 @@ export declare const uiCheckboxRootClass: import("../../styled-system/types").Re
         true: {
             borderColor: "border.accent";
             bg: "bg.selected";
-            boxShadow: "0 18px 40px -30px rgba(49,94,255,0.56)";
         };
         false: {
             borderColor: "border.default";
             bg: "bg.input";
-            boxShadow: "0 14px 32px -30px rgba(15,23,42,0.42)";
         };
     };
     disabled: {
@@ -27,13 +25,13 @@ export declare const uiCheckboxIndicatorClass: import("../../styled-system/types
             borderColor: "border.accent";
             bg: "bg.accentStrong";
             color: "text.inverse";
-            boxShadow: "0 12px 24px -16px rgba(49,94,255,0.7)";
+            transform: "scale(1)";
         };
         false: {
             borderColor: "border.default";
             bg: "bg.buttonOutline";
             color: "transparent";
-            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.32)";
+            transform: "scale(1)";
         };
     };
 }>;

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

@@ -5,10 +5,14 @@ export declare const segmentedControlOptionClass: import("../../styled-system/ty
             borderColor: "border.accent";
             bg: "bg.accentStrong";
             color: "text.inverse";
-            boxShadow: "0 14px 26px -16px rgba(49,94,255,0.68)";
             _hover: {
                 bg: "bg.accentStrong";
             };
+            _dark: {
+                bg: "rgba(138, 180, 255, 0.2)";
+                color: "text.accent";
+                borderColor: "border.accent";
+            };
         };
         false: {
             borderColor: "transparent";

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

@@ -27,12 +27,14 @@ export declare const uiSelectTriggerClass: import("../../styled-system/types").R
         true: {
             borderColor: "border.accent";
             bg: "bg.cardStrong";
-            boxShadow: "0 18px 42px -28px rgba(49,94,255,0.42)";
+            _dark: {
+                borderColor: "border.accent";
+                bg: "bg.input";
+            };
         };
         false: {
             borderColor: "border.default";
             bg: "bg.input";
-            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22)";
         };
     };
     selected: {
@@ -50,6 +52,11 @@ export declare const uiSelectTriggerClass: import("../../styled-system/types").R
         };
         false: {
             cursor: "pointer";
+            _focusVisible: {
+                outline: "2px solid";
+                outlineColor: "text.accent";
+                outlineOffset: "2px";
+            };
         };
     };
 }>;
@@ -73,7 +80,7 @@ export declare const uiSelectOptionClass: import("../../styled-system/types").Re
             py: "2.5";
         };
         md: {
-            py: "3";
+            py: "2.5";
         };
     };
     active: {

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-Lghyrtms.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-Dg-HzSqj.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-Lghyrtms.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-Dg-HzSqj.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-CcJrPX_8.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-DhPY_hNA.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

@@ -1,15 +1,12 @@
 export declare const buttonRecipe: import("../../../styled-system/types").RecipeRuntimeFn<{
     variant: {
         solid: {
-            bg: "linear-gradient(135deg, rgba(31,67,182,0.96) 0%, rgba(49,94,255,0.92) 100%)";
+            bg: "text.accent";
             color: "text.inverse";
             borderWidth: "1px";
-            borderColor: "rgba(255,255,255,0.18)";
-            boxShadow: "0 22px 36px -24px rgba(49,94,255,0.78), inset 0 1px 0 rgba(255,255,255,0.24)";
+            borderColor: "transparent";
             _dark: {
-                color: "#f7f9fd";
-                borderColor: "rgba(255,255,255,0.06)";
-                boxShadow: "0 22px 40px -24px rgba(71,121,255,0.55), inset 0 1px 0 rgba(255,255,255,0.18)";
+                color: "text.inverse";
             };
         };
         outline: {
@@ -17,19 +14,41 @@ export declare const buttonRecipe: import("../../../styled-system/types").Recipe
             color: "text.secondary";
             borderWidth: "1px";
             borderColor: "border.default";
-            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.18)";
-            _dark: {
-                boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)";
-            };
         };
         subtle: {
             bg: "bg.accentSoft";
             color: "text.accent";
             borderWidth: "1px";
             borderColor: "badge.infoBorder";
-            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22)";
+        };
+    };
+    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";
             _dark: {
-                boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)";
+                color: "text.inverse";
             };
         };
     };

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)";
         };
     };
 }>;