@aggc/ui 0.7.1 → 0.8.0

package/dist/ui.css

@@ -83,9 +83,58 @@ body {
   }
 }
 
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes modalIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes toastSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(calc(100% + 1rem));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes toastFadeOut {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(calc(100% + 1rem));
+  }
+}
+
+@keyframes toastSwipeOut {
+  from {
+    transform: translateX(var(--reka-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(calc(100% + 1rem));
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .aggc-spin,
-  [data-ui-loading-pulse] {
+  [data-ui-loading-pulse],
+  [data-state="open"],
+  [data-state="closed"] {
     animation: none !important;
   }
 
@@ -1027,14 +1076,38 @@ body {
     animation: loadingPulse 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
 }
 
-  .p_1 {
-    padding: var(--spacing-1);
+  .bg_rgba\(0\,_0\,_0\,_0\.3\) {
+    background: rgba(0, 0, 0, 0.3);
+}
+
+  .anim_fadeIn_160ms_cubic-bezier\(0\.16\,_1\,_0\.3\,_1\) {
+    animation: fadeIn 160ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+  .bd_none {
+    border: var(--borders-none);
 }
 
   .bg_transparent {
     background: var(--colors-transparent);
 }
 
+  .bg_bg\.menu {
+    background: var(--colors-bg-menu);
+}
+
+  .p_0 {
+    padding: var(--spacing-0);
+}
+
+  .anim_modalIn_240ms_cubic-bezier\(0\.16\,_1\,_0\.3\,_1\) {
+    animation: modalIn 240ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+  .p_1 {
+    padding: var(--spacing-1);
+}
+
   .bg_bg\.cardStrong {
     background: var(--colors-bg-card-strong);
 }
@@ -1071,10 +1144,6 @@ body {
     padding: var(--spacing-3);
 }
 
-  .bg_bg\.menu {
-    background: var(--colors-bg-menu);
-}
-
   .p_1\.5 {
     padding: var(--spacing-1\.5);
 }
@@ -1139,6 +1208,18 @@ body {
     border-color: var(--colors-badge-danger-border);
 }
 
+  .ov_hidden {
+    overflow: hidden;
+}
+
+  .trs_background-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\) {
+    transition: background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+  .bdr_lg {
+    border-radius: var(--radii-lg);
+}
+
   .gap_2 {
     gap: var(--spacing-2);
 }
@@ -1191,6 +1272,18 @@ body {
     gap: var(--spacing-0\.5);
 }
 
+  .trs_color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_background_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\) {
+    transition: color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), background 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+  .px_6 {
+    padding-inline: var(--spacing-6);
+}
+
+  .bd-c_border\.subtle {
+    border-color: var(--colors-border-subtle);
+}
+
   .px_3\.5 {
     padding-inline: var(--spacing-3\.5);
 }
@@ -1207,14 +1300,6 @@ body {
     border-color: var(--colors-transparent);
 }
 
-  .ov_hidden {
-    overflow: hidden;
-}
-
-  .bdr_lg {
-    border-radius: var(--radii-lg);
-}
-
   .px_3 {
     padding-inline: var(--spacing-3);
 }
@@ -1243,12 +1328,16 @@ body {
     border-radius: 999px;
 }
 
-  .gap_5 {
-    gap: var(--spacing-5);
+  .ring_none {
+    outline: var(--borders-none);
 }
 
-  .bd-c_border\.subtle {
-    border-color: var(--colors-border-subtle);
+  .trs_all_240ms_cubic-bezier\(0\.16\,_1\,_0\.3\,_1\) {
+    transition: all 240ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+  .gap_5 {
+    gap: var(--spacing-5);
 }
 
   .bdr_2xl {
@@ -1455,6 +1544,31 @@ body {
     color: var(--colors-badge-danger-text);
 }
 
+  .us_none {
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+  .ff_heading {
+    font-family: var(--fonts-heading);
+}
+
+  .fw_600 {
+    font-weight: 600;
+}
+
+  .fs_md {
+    font-size: var(--font-sizes-md);
+}
+
+  .c_text\.muted {
+    color: var(--colors-text-muted);
+}
+
+  .obj-f_cover {
+    object-fit: cover;
+}
+
   .vis_hidden {
     visibility: hidden;
 }
@@ -1503,10 +1617,6 @@ body {
     line-height: 1.55;
 }
 
-  .fw_600 {
-    font-weight: 600;
-}
-
   .lh_1\.5 {
     line-height: 1.5;
 }
@@ -1515,6 +1625,47 @@ body {
     box-shadow: 0 0 0 0 var(--colors-bg-accentSoft, rgba(49, 94, 255, 0.3));
 }
 
+  .pos_fixed {
+    position: fixed;
+}
+
+  .bkdp_blur\(12px\) {
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+}
+
+  .z_50 {
+    z-index: 50;
+}
+
+  .jc_flex-end {
+    justify-content: flex-end;
+}
+
+  .bx-sh_0_16px_48px_-8px_rgba\(0\,_0\,_0\,_0\.12\)\,_0_4px_16px_-4px_rgba\(0\,_0\,_0\,_0\.06\) {
+    box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.12), 0 4px 16px -4px rgba(0, 0, 0, 0.06);
+}
+
+  .trf_translate\(-50\%\,_-50\%\) {
+    transform: translate(-50%, -50%);
+}
+
+  .z_51 {
+    z-index: 51;
+}
+
+  .sr_true {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+
   .bx-sh_none {
     box-shadow: none;
 }
@@ -1523,10 +1674,6 @@ body {
     z-index: 30;
 }
 
-  .c_text\.muted {
-    color: var(--colors-text-muted);
-}
-
   .trf_rotate\(180deg\) {
     transform: rotate(180deg);
 }
@@ -1555,6 +1702,18 @@ body {
     overflow-wrap: anywhere;
 }
 
+  .lh_1\.4 {
+    line-height: 1.4;
+}
+
+  .bx-sh_0_4px_12px_-4px_rgba\(0\,_0\,_0\,_0\.1\)\,_0_1px_2px_0_rgba\(0\,_0\,_0\,_0\.06\) {
+    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+
+  .pointer-events_auto {
+    pointer-events: auto;
+}
+
   .ac_start {
     align-content: start;
 }
@@ -1610,10 +1769,6 @@ body {
     justify-content: flex-start;
 }
 
-  .jc_flex-end {
-    justify-content: flex-end;
-}
-
   .scr-bar-w_thin {
     scrollbar-width: thin;
 }
@@ -1654,10 +1809,6 @@ body {
     box-shadow: 0 1px 2px 0 rgba(15,23,42,0.04), 0 4px 12px -4px rgba(15,23,42,0.1);
 }
 
-  .ff_heading {
-    font-family: var(--fonts-heading);
-}
-
   .fs_2xl {
     font-size: var(--font-sizes-2xl);
 }
@@ -1674,23 +1825,10 @@ body {
     letter-spacing: 0.005em;
 }
 
-  .us_none {
-    -webkit-user-select: none;
-    user-select: none;
-}
-
-  .fs_md {
-    font-size: var(--font-sizes-md);
-}
-
   .bx-sh_0_4px_16px_-4px_rgba\(15\,23\,42\,0\.1\)\,_0_8px_24px_-8px_rgba\(15\,23\,42\,0\.08\)\,_0_1px_2px_0_rgba\(15\,23\,42\,0\.04\) {
     box-shadow: 0 4px 16px -4px rgba(15,23,42,0.1), 0 8px 24px -8px rgba(15,23,42,0.08), 0 1px 2px 0 rgba(15,23,42,0.04);
 }
 
-  .pos_fixed {
-    position: fixed;
-}
-
   .w_9 {
     width: var(--sizes-9);
 }
@@ -1739,6 +1877,46 @@ body {
     padding-right: var(--spacing-1);
 }
 
+  .w_8 {
+    width: var(--sizes-8);
+}
+
+  .h_8 {
+    height: var(--sizes-8);
+}
+
+  .w_10 {
+    width: var(--sizes-10);
+}
+
+  .h_10 {
+    height: var(--sizes-10);
+}
+
+  .w_12 {
+    width: var(--sizes-12);
+}
+
+  .h_12 {
+    height: var(--sizes-12);
+}
+
+  .w_14 {
+    width: var(--sizes-14);
+}
+
+  .h_14 {
+    height: var(--sizes-14);
+}
+
+  .w_full {
+    width: var(--sizes-full);
+}
+
+  .h_full {
+    height: var(--sizes-full);
+}
+
   .min-w_0 {
     min-width: var(--sizes-0);
 }
@@ -1767,6 +1945,50 @@ body {
     height: var(--sizes-2\.5);
 }
 
+  .pb_4 {
+    padding-bottom: var(--spacing-4);
+}
+
+  .pb_6 {
+    padding-bottom: var(--spacing-6);
+}
+
+  .pt_3 {
+    padding-top: var(--spacing-3);
+}
+
+  .bd-t-w_1px {
+    border-top-width: 1px;
+}
+
+  .bd-t-c_border\.soft {
+    border-top-color: var(--colors-border-soft);
+}
+
+  .max-h_calc\(100dvh_-_2rem\) {
+    max-height: calc(100dvh - 2rem);
+}
+
+  .top_50\% {
+    top: 50%;
+}
+
+  .left_50\% {
+    left: 50%;
+}
+
+  .w_380px {
+    width: 380px;
+}
+
+  .w_480px {
+    width: 480px;
+}
+
+  .w_640px {
+    width: 640px;
+}
+
   .w_fit-content {
     width: fit-content;
 }
@@ -1811,6 +2033,46 @@ body {
     height: 4.75rem;
 }
 
+  .bottom_4 {
+    bottom: var(--spacing-4);
+}
+
+  .right_4 {
+    right: var(--spacing-4);
+}
+
+  .w_360px {
+    width: 360px;
+}
+
+  .max-w_calc\(100vw_-_2rem\) {
+    max-width: calc(100vw - 2rem);
+}
+
+  .top_3 {
+    top: var(--spacing-3);
+}
+
+  .right_3 {
+    right: var(--spacing-3);
+}
+
+  .w_6 {
+    width: var(--sizes-6);
+}
+
+  .h_6 {
+    height: var(--sizes-6);
+}
+
+  .w_5 {
+    width: var(--sizes-5);
+}
+
+  .h_5 {
+    height: var(--sizes-5);
+}
+
   .max-w_100\% {
     max-width: 100%;
 }
@@ -1859,6 +2121,10 @@ body {
     right: var(--spacing-0);
 }
 
+  [data-theme="dark"] .dark\:bg_rgba\(0\,_0\,_0\,_0\.5\) {
+    background: rgba(0, 0, 0, 0.5);
+}
+
   [data-theme="dark"] .dark\:bg_rgba\(138\,_180\,_255\,_0\.2\) {
     background: rgba(138, 180, 255, 0.2);
 }
@@ -1883,6 +2149,18 @@ body {
     background: rgba(255, 255, 255, 0.04);
 }
 
+  .\[\&\[data-state\=\"open\"\]\]\:anim_toastSlideIn_240ms_cubic-bezier\(0\.16\,_1\,_0\.3\,_1\)[data-state="open"] {
+    animation: toastSlideIn 240ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+  .\[\&\[data-state\=\"closed\"\]\]\:anim_toastFadeOut_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)[data-state="closed"] {
+    animation: toastFadeOut 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+  .\[\&\[data-swipe\=\"end\"\]\]\:anim_toastSwipeOut_100ms_ease-out[data-swipe="end"] {
+    animation: toastSwipeOut 100ms ease-out;
+}
+
   [data-theme="dark"] .dark\:bd-c_border\.default {
     border-color: var(--colors-border-default);
 }
@@ -1895,10 +2173,18 @@ body {
     border-color: var(--colors-border-accent);
 }
 
+  .\[\&\[data-swipe\=\"cancel\"\]\]\:trs_transform_200ms_ease-out[data-swipe="cancel"] {
+    transition: transform 200ms ease-out;
+}
+
   [data-theme="dark"] .dark\:bd-c_border\.subtle {
     border-color: var(--colors-border-subtle);
 }
 
+  [data-theme="dark"] .dark\:bx-sh_0_16px_48px_-8px_rgba\(0\,_0\,_0\,_0\.56\)\,_0_4px_16px_-4px_rgba\(0\,_0\,_0\,_0\.32\) {
+    box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.56), 0 4px 16px -4px rgba(0, 0, 0, 0.32);
+}
+
   [data-theme="dark"] .dark\:c_text\.accent {
     color: var(--colors-text-accent);
 }
@@ -1915,6 +2201,18 @@ body {
     transform: translateX(-100%);
 }
 
+  [data-theme="dark"] .dark\:bx-sh_0_4px_12px_-4px_rgba\(0\,_0\,_0\,_0\.4\)\,_0_1px_2px_0_rgba\(0\,_0\,_0\,_0\.24\) {
+    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
+}
+
+  .\[\&\[data-swipe\=\"move\"\]\]\:trf_translateX\(var\(--reka-toast-swipe-move-x\)\)[data-swipe="move"] {
+    transform: translateX(var(--reka-toast-swipe-move-x));
+}
+
+  .\[\&\[data-swipe\=\"cancel\"\]\]\:trf_translateX\(0\)[data-swipe="cancel"] {
+    transform: translateX(0);
+}
+
   [data-theme="dark"] .dark\:scr-bar-c_rgba\(255\,_255\,_255\,_0\.12\)_transparent {
     scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
 }
@@ -1955,20 +2253,20 @@ body {
     border-color: var(--colors-border-accent);
 }
 
-  .focusVisible\:ring-c_text\.accent:is(:focus-visible, [data-focus-visible]) {
-    outline-color: var(--colors-text-accent);
+  .focusVisible\:ring-c_border\.accent:is(:focus-visible, [data-focus-visible]) {
+    outline-color: var(--colors-border-accent);
 }
 
   .focusVisible\:ring-o_2px:is(:focus-visible, [data-focus-visible]) {
     outline-offset: 2px;
 }
 
-  .focusVisible\:ring-o_-2px:is(:focus-visible, [data-focus-visible]) {
-    outline-offset: -2px;
+  .focusVisible\:ring-c_text\.accent:is(:focus-visible, [data-focus-visible]) {
+    outline-color: var(--colors-text-accent);
 }
 
-  .focusVisible\:ring-c_border\.accent:is(:focus-visible, [data-focus-visible]) {
-    outline-color: var(--colors-border-accent);
+  .focusVisible\:ring-o_-2px:is(:focus-visible, [data-focus-visible]) {
+    outline-offset: -2px;
 }
 
   .focusVisible\:bx-sh_0_0_0_3px_rgba\(82\,_121\,_255\,_0\.18\):is(:focus-visible, [data-focus-visible]) {
@@ -1979,14 +2277,14 @@ body {
     box-shadow: 0 0 0 3px var(--colors-bg-accentSoft, rgba(49, 94, 255, 0.12));
 }
 
-  .hover\:bg_bg\.accentStrong:is(:hover, [data-hover]) {
-    background: var(--colors-bg-accent-strong);
-}
-
   .hover\:bg_bg\.hover:is(:hover, [data-hover]) {
     background: var(--colors-bg-hover);
 }
 
+  .hover\:bg_bg\.accentStrong:is(:hover, [data-hover]) {
+    background: var(--colors-bg-accent-strong);
+}
+
   .hover\:bg_bg\.cardStrong:is(:hover, [data-hover]) {
     background: var(--colors-bg-card-strong);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aggc/ui",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Shared Vue UI primitives, patterns, and tokens for AGGC desktop and web.",
   "type": "module",
   "license": "MIT",
@@ -94,7 +94,8 @@
   "dependencies": {
     "@fontsource/ibm-plex-sans": "^5.2.5",
     "@fontsource/space-grotesk": "^5.2.6",
-    "lucide-vue-next": "^0.525.0"
+    "lucide-vue-next": "^0.525.0",
+    "reka-ui": "^2.9.10"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.6.0",

package/src/components/UiAvatar.styles.ts

@@ -0,0 +1,81 @@
+import { css, cva } from "@styled/css";
+
+export const uiAvatarRootClass = cva({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    userSelect: "none",
+    flexShrink: "0",
+    bg: "bg.accentSoft",
+    transition: "background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1)",
+  },
+  variants: {
+    size: {
+      sm: { w: "8", h: "8" },
+      md: { w: "10", h: "10" },
+      lg: { w: "12", h: "12" },
+      xl: { w: "14", h: "14" },
+    },
+    shape: {
+      circle: { borderRadius: "full" },
+      square: { borderRadius: "lg" },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    shape: "circle",
+  },
+});
+
+export const uiAvatarImageClass = css({
+  w: "full",
+  h: "full",
+  objectFit: "cover",
+});
+
+export const uiAvatarFallbackClass = cva({
+  base: {
+    fontFamily: "heading",
+    fontWeight: "600",
+    color: "text.accent",
+    lineHeight: "1",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    w: "full",
+    h: "full",
+  },
+  variants: {
+    size: {
+      sm: { fontSize: "xs" },
+      md: { fontSize: "sm" },
+      lg: { fontSize: "md" },
+      xl: { fontSize: "lg" },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export const uiAvatarIconFallbackClass = cva({
+  base: {
+    color: "text.muted",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  variants: {
+    size: {
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {},
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});