chore(release): refresh private package staging

2026-08-10 00:55:12 +05:30
parent bca9549f3a
commit db612df6cd
69 changed files with 5421 additions and 7243 deletions
@@ -1,3 +1,5 @@
+import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
+
 component AvatarGroup {
  outputs {
    overflow(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
@@ -43,7 +45,7 @@ component AvatarGroup {
  view {
    <div
      {...attrs}
-      class="wire-next wire-next--avatar-group {class}"
+      class="wire-component wire-next--avatar-group {class}"
      data-wrn-avatar-group
      data-layout="{layout}"
      data-shape="{shape}"
@@ -146,5 +148,212 @@ component AvatarGroup {
        {/if}
      </div>
    </div>
+    <ComponentBaseStyles hidden />
+  }
+
+  style {
+    /* --- Avatar group -------------------------------------------------------- */
+    .wire-next--avatar-group {
+      --wire-avatar-group-size: 3rem;
+      position: relative;
+      display: inline-flex;
+      width: fit-content;
+      max-width: 100%;
+    }
+
+    .wire-next--avatar-group[data-size="xs"] {
+      --wire-avatar-group-size: 1.75rem;
+    }
+
+    .wire-next--avatar-group[data-size="sm"] {
+      --wire-avatar-group-size: 2.25rem;
+    }
+
+    .wire-next--avatar-group[data-size="md"],
+    .wire-next--avatar-group[data-size="default"] {
+      --wire-avatar-group-size: 3rem;
+    }
+
+    .wire-next--avatar-group[data-size="lg"] {
+      --wire-avatar-group-size: 4rem;
+    }
+
+    .wire-next--avatar-group[data-size="xl"] {
+      --wire-avatar-group-size: 5rem;
+    }
+
+    .wire-next__avatar-group-members {
+      display: flex;
+      align-items: center;
+    }
+
+    .wire-next--avatar-group[data-layout="stack"] .wire-next__avatar-group-member,
+    .wire-next--avatar-group[data-layout="stack"] .wire-next__avatar-group-overflow {
+      margin-left: calc(var(--wire-avatar-group-size) * -0.22);
+    }
+
+    .wire-next--avatar-group[data-layout="stack"] :first-child {
+      margin-left: 0;
+    }
+
+    .wire-next--avatar-group[data-layout="grid"] .wire-next__avatar-group-members {
+      display: grid;
+      grid-template-columns: repeat(var(--wire-avatar-group-columns), var(--wire-avatar-group-size));
+      gap: 0.65rem;
+    }
+
+    .wire-next__avatar-group-member,
+    .wire-next__avatar-group-overflow {
+      --wire-avatar-group-color: var(--wire-color-primary);
+      position: relative;
+      display: inline-grid;
+      width: var(--wire-avatar-group-size);
+      height: var(--wire-avatar-group-size);
+      flex: none;
+      place-items: center;
+      border-radius: 999px;
+      outline: none;
+      transition:
+        z-index var(--wire-motion-fast),
+        transform var(--wire-motion-base) var(--wire-ease-emphasized);
+    }
+
+    .wire-next__avatar-group-member[data-color="secondary"] {
+      --wire-avatar-group-color: #737373;
+    }
+
+    .wire-next__avatar-group-member[data-color="success"] {
+      --wire-avatar-group-color: var(--wire-color-success);
+    }
+
+    .wire-next__avatar-group-member[data-color="info"] {
+      --wire-avatar-group-color: var(--wire-color-info);
+    }
+
+    .wire-next__avatar-group-member[data-color="warning"] {
+      --wire-avatar-group-color: var(--wire-color-warning);
+    }
+
+    .wire-next__avatar-group-member[data-color="danger"] {
+      --wire-avatar-group-color: var(--wire-color-danger);
+    }
+
+    .wire-next__avatar-group-member[data-shape="rounded"] {
+      border-radius: calc(var(--wire-radius-sm, 0.5rem) * 0.72);
+    }
+
+    .wire-next__avatar-group-avatar,
+    .wire-next__avatar-group-overflow-button {
+      display: grid;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      place-items: center;
+      color: white;
+      border: 2px solid var(--wire-avatar-group-ring);
+      border-radius: inherit;
+      background: var(--wire-avatar-group-color, var(--wire-color-primary));
+      box-shadow: 0 5px 14px rgb(0 0 0 / 0.16);
+      font: inherit;
+      font-size: calc(var(--wire-avatar-group-size) * 0.3);
+      font-weight: 800;
+    }
+
+    .wire-next__avatar-group-avatar img,
+    .wire-next__avatar-group-menu-avatar img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .wire-next__avatar-group-overflow-button {
+      cursor: pointer;
+      color: var(--wire-color-text);
+      background: var(--wire-color-surface-2);
+    }
+
+    .wire-next__avatar-group-member:hover,
+    .wire-next__avatar-group-member:focus-visible,
+    .wire-next__avatar-group-overflow:focus-within {
+      z-index: 5;
+      transform: translateY(-3px);
+    }
+
+    .wire-next__avatar-group-member:focus-visible,
+    .wire-next__avatar-group-overflow-button:focus-visible {
+      outline: 2px solid var(--wire-color-primary);
+      outline-offset: 3px;
+    }
+
+    .wire-next__avatar-group-tooltip {
+      position: absolute;
+      left: 50%;
+      bottom: calc(100% + 0.65rem);
+      z-index: 20;
+      width: max-content;
+      max-width: 14rem;
+      padding: 0.4rem 0.6rem;
+      color: var(--wire-color-bg);
+      border-radius: 0.4rem;
+      background: var(--wire-color-text);
+      box-shadow: 0 8px 22px rgb(0 0 0 / 0.22);
+      font-size: 0.75rem;
+      font-weight: 650;
+      pointer-events: none;
+      opacity: 0;
+      transform: translate(-50%, 0.25rem);
+      transition:
+        opacity var(--wire-motion-fast),
+        transform var(--wire-motion-fast);
+    }
+
+    .wire-next__avatar-group-member:hover .wire-next__avatar-group-tooltip,
+    .wire-next__avatar-group-member:focus-visible .wire-next__avatar-group-tooltip {
+      opacity: 1;
+      transform: translate(-50%, 0);
+    }
+
+    .wire-next__avatar-group-menu {
+      position: absolute;
+      top: calc(100% + 0.65rem);
+      right: 0;
+      z-index: 30;
+      display: grid;
+      width: max-content;
+      min-width: 12rem;
+      gap: 0.25rem;
+      padding: 0.45rem;
+      color: var(--wire-color-text);
+      border: 1px solid var(--wire-color-border);
+      border-radius: var(--wire-radius-sm, 0.5rem);
+      background: var(--wire-color-surface);
+      box-shadow: 0 16px 38px rgb(0 0 0 / 0.22);
+    }
+
+    .wire-next__avatar-group-menu-item {
+      display: flex;
+      align-items: center;
+      gap: 0.6rem;
+      padding: 0.45rem 0.55rem;
+      border-radius: 0.4rem;
+      font-size: 0.82rem;
+    }
+
+    .wire-next__avatar-group-menu-item:hover {
+      background: var(--wire-color-surface-2);
+    }
+
+    .wire-next__avatar-group-menu-avatar {
+      display: grid;
+      width: 1.75rem;
+      height: 1.75rem;
+      overflow: hidden;
+      flex: none;
+      place-items: center;
+      border-radius: 999px;
+      background: var(--wire-color-surface-2);
+      font-size: 0.65rem;
+      font-weight: 800;
+    }
  }
 }