@zyncat/ui 0.11.0 → 0.12.0

package/src/components/primitives/avatar/avatar.css

@@ -1,200 +1,205 @@
-/* Avatar (image - initials - icon) + AvatarGroup - face/status structure, token sizes, 6 identity slots. */
-
-.avatar {
-  --avatar-size: 2rem;
-  --avatar-bg: var(--bg-muted);
-  --avatar-fg: var(--text-muted);
-  /* --avatar-ring: injected by .avatar-group, cascades to .avatar__face */
-
-  position: relative;
-  display: inline-flex;
-  flex: none;
-  vertical-align: middle;
-  width: var(--avatar-size);
-  height: var(--avatar-size);
-}
-
-.avatar__face {
-  width: 100%;
-  height: 100%;
-  border-radius: var(--radius-full);
-  overflow: hidden;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  background: var(--avatar-bg);
-  color: var(--avatar-fg);
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.components {
+  /* Avatar (image - initials - icon) + AvatarGroup - face/status structure, token sizes, 6 identity slots. */
+
+  .avatar {
+    --avatar-size: 2rem;
+    --avatar-bg: var(--bg-muted);
+    --avatar-fg: var(--text-muted);
+    --avatar-edge: oklch(1 0 0 / 0.5);
+    /* --avatar-ring: injected by .avatar-group, cascades to .avatar__face */
+
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    vertical-align: middle;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+  }
 
-  /* sheen from top, shade from bottom over the slot tint; an image child paints over both (section B3 gradient exception) */
-  background:
-    linear-gradient(to bottom, var(--avatar-sheen), transparent 55%),
-    linear-gradient(to top, var(--avatar-shade), transparent 45%), var(--avatar-bg);
+  .avatar__face {
+    width: 100%;
+    height: 100%;
+    border-radius: var(--radius-full);
+    overflow: hidden;
 
-  /* Crisp 1px edge-catch + optional group separator ring via cascade */
-  box-shadow:
-    inset 0 1px 0 0 oklch(1 0 0 / 0.5),
-    var(--avatar-ring, none);
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-  /* keyline keyed to the slot's own hue (fg at low alpha), not uniform black; outline paints above children so it rings photos too */
-  outline: var(--border-hairline) solid color-mix(in oklch, var(--avatar-fg) 18%, transparent);
-  outline-offset: -1px;
+    background: var(--avatar-bg);
+    color: var(--avatar-fg);
 
-  transition: box-shadow var(--duration-fast) var(--ease-standard);
-}
+    /* sheen from top, shade from bottom over the slot tint; an image child paints over both (section B3 gradient exception) */
+    background:
+      linear-gradient(to bottom, var(--avatar-sheen), transparent 55%),
+      linear-gradient(to top, var(--avatar-shade), transparent 45%), var(--avatar-bg);
 
-.avatar__img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
+    /* Crisp 1px edge-catch + optional group separator ring via cascade */
+    box-shadow:
+      inset 0 1px 0 0 var(--avatar-edge),
+      var(--avatar-ring, none);
 
-/* lettermark, ratio-sized (section A7 exception); text-box trim = true optical centering; negative margin returns the trailing --tracking-caps so the pair stays centered */
-.avatar__initials {
-  font-family: var(--font-sans);
-  font-weight: var(--weight-semibold);
-  font-size: calc(var(--avatar-size) * 0.42);
-  line-height: 1;
-  text-box: trim-both cap alphabetic;
-  letter-spacing: var(--tracking-caps);
-  margin-right: calc(-1 * var(--tracking-caps));
-  text-transform: uppercase;
-  user-select: none;
-  -webkit-user-select: none;
-}
+    /* keyline keyed to the slot's own hue (fg at low alpha), not uniform black; outline paints above children so it rings photos too */
+    outline: var(--border-hairline) solid color-mix(in oklch, var(--avatar-fg) 18%, transparent);
+    outline-offset: -1px;
 
-.avatar__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 56%;
-  height: 56%;
-  opacity: 0.5;
-}
-.avatar__icon svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.avatar--xs {
-  --avatar-size: 1.25rem;
-}
-.avatar--sm {
-  --avatar-size: 1.5rem;
-}
-.avatar--lg {
-  --avatar-size: 2.5rem;
-}
-.avatar--xl {
-  --avatar-size: 3rem;
-}
+    transition: box-shadow var(--duration-fast) var(--ease-standard);
+  }
 
-/* square - radius scales with size (concentric nesting) */
-.avatar--square .avatar__face {
-  border-radius: var(--radius-md);
-}
+  .avatar__img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 
-.avatar--square.avatar--lg .avatar__face,
-.avatar--square.avatar--xl .avatar__face {
-  border-radius: var(--radius-lg);
-}
+  /* lettermark, ratio-sized (section A7 exception); text-box trim = true optical centering; negative margin returns the trailing --tracking-caps so the pair stays centered */
+  .avatar__initials {
+    font-family: var(--font-sans);
+    font-weight: var(--weight-semibold);
+    font-size: calc(var(--avatar-size) * 0.42);
+    line-height: 1;
+    text-box: trim-both cap alphabetic;
+    letter-spacing: var(--tracking-caps);
+    margin-right: calc(-1 * var(--tracking-caps));
+    text-transform: uppercase;
+    user-select: none;
+    -webkit-user-select: none;
+  }
 
-/* data-palette 1-6: identity slots (tokens/avatar.css); no attr = neutral; identity colouring, never status */
+  .avatar__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56%;
+    height: 56%;
+    opacity: 0.5;
+  }
+  .avatar__icon svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
 
-.avatar[data-palette='1'] {
-  --avatar-bg: var(--avatar-1-bg);
-  --avatar-fg: var(--avatar-1-fg);
-}
-.avatar[data-palette='2'] {
-  --avatar-bg: var(--avatar-2-bg);
-  --avatar-fg: var(--avatar-2-fg);
-}
-.avatar[data-palette='3'] {
-  --avatar-bg: var(--avatar-3-bg);
-  --avatar-fg: var(--avatar-3-fg);
-}
-.avatar[data-palette='4'] {
-  --avatar-bg: var(--avatar-4-bg);
-  --avatar-fg: var(--avatar-4-fg);
-}
-.avatar[data-palette='5'] {
-  --avatar-bg: var(--avatar-5-bg);
-  --avatar-fg: var(--avatar-5-fg);
-}
-.avatar[data-palette='6'] {
-  --avatar-bg: var(--avatar-6-bg);
-  --avatar-fg: var(--avatar-6-fg);
-}
+  .avatar--xs {
+    --avatar-size: 1.25rem;
+  }
+  .avatar--sm {
+    --avatar-size: 1.5rem;
+  }
+  .avatar--lg {
+    --avatar-size: 2.5rem;
+  }
+  .avatar--xl {
+    --avatar-size: 3rem;
+  }
 
-/* status dot lives outside .avatar__face (which clips) so it's never cut; ~27% of size, min 6px */
+  /* square - radius scales with size (concentric nesting) */
+  .avatar--square .avatar__face {
+    border-radius: var(--radius-md);
+  }
 
-.avatar__status {
-  position: absolute;
-  bottom: 0;
-  right: 0;
+  .avatar--square.avatar--lg .avatar__face,
+  .avatar--square.avatar--xl .avatar__face {
+    border-radius: var(--radius-lg);
+  }
 
-  width: calc(var(--avatar-size) * 0.275);
-  height: calc(var(--avatar-size) * 0.275);
-  min-width: 6px;
-  min-height: 6px;
+  /* data-palette 1-6: identity slots (tokens/avatar.css); no attr = neutral; identity colouring, never status */
 
-  border-radius: var(--radius-full);
-  box-shadow: 0 0 0 2px var(--bg-surface);
-  transition: background-color var(--duration-fast) var(--ease-standard);
-}
+  .avatar[data-palette='1'] {
+    --avatar-bg: var(--avatar-1-bg);
+    --avatar-fg: var(--avatar-1-fg);
+  }
+  .avatar[data-palette='2'] {
+    --avatar-bg: var(--avatar-2-bg);
+    --avatar-fg: var(--avatar-2-fg);
+  }
+  .avatar[data-palette='3'] {
+    --avatar-bg: var(--avatar-3-bg);
+    --avatar-fg: var(--avatar-3-fg);
+  }
+  .avatar[data-palette='4'] {
+    --avatar-bg: var(--avatar-4-bg);
+    --avatar-fg: var(--avatar-4-fg);
+  }
+  .avatar[data-palette='5'] {
+    --avatar-bg: var(--avatar-5-bg);
+    --avatar-fg: var(--avatar-5-fg);
+  }
+  .avatar[data-palette='6'] {
+    --avatar-bg: var(--avatar-6-bg);
+    --avatar-fg: var(--avatar-6-fg);
+  }
 
-.avatar__status--online {
-  background: var(--success);
-}
-.avatar__status--away {
-  background: var(--warning);
-}
-.avatar__status--busy {
-  background: var(--danger);
-}
-.avatar__status--offline {
-  background: var(--border-strong);
-}
+  /* status dot lives outside .avatar__face (which clips) so it's never cut; ~27% of size, min 6px */
 
-.avatar-group {
-  display: inline-flex;
-  align-items: center;
-}
+  .avatar__status {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+
+    width: calc(var(--avatar-size) * 0.275);
+    height: calc(var(--avatar-size) * 0.275);
+    min-width: 6px;
+    min-height: 6px;
+
+    border-radius: var(--radius-full);
+    box-shadow: 0 0 0 2px var(--bg-surface);
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
 
-/* inject --avatar-ring on group children - cascades to .avatar__face */
-.avatar-group > .avatar {
-  --avatar-ring: 0 0 0 2px var(--bg-surface);
-}
+  .avatar__status--online {
+    background: var(--success);
+  }
+  .avatar__status--away {
+    background: var(--warning);
+  }
+  .avatar__status--busy {
+    background: var(--danger);
+  }
+  .avatar__status--offline {
+    background: var(--border-strong);
+  }
 
-.avatar-group > .avatar + .avatar {
-  margin-left: calc(var(--avatar-size) * -0.3);
-  transition: margin-left var(--duration-base) var(--ease-entrance);
-}
+  .avatar-group {
+    display: inline-flex;
+    align-items: center;
+  }
 
-.avatar-group:hover > .avatar + .avatar {
-  margin-left: var(--space-1);
-}
+  /* inject --avatar-ring on group children - cascades to .avatar__face */
+  .avatar-group > .avatar {
+    --avatar-ring: 0 0 0 2px var(--bg-surface);
+  }
 
-/* "+N" chip - mono numerals, tracking off (mono is already spaced), smaller ratio to fit "+12" */
-.avatar--overflow .avatar__initials {
-  font-family: var(--font-mono);
-  font-variant-numeric: tabular-nums;
-  font-size: calc(var(--avatar-size) * 0.36);
-  letter-spacing: var(--tracking-normal);
-  margin-right: 0;
-}
+  .avatar-group > .avatar + .avatar {
+    margin-left: calc(var(--avatar-size) * -0.3);
+    transition: margin-left var(--duration-base) var(--ease-entrance);
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .avatar__face {
-    transition: none;
+  .avatar-group:hover > .avatar + .avatar {
+    margin-left: var(--space-1);
   }
-  .avatar__status {
-    transition: none;
+
+  /* "+N" chip - mono numerals, tracking off (mono is already spaced), smaller ratio to fit "+12" */
+  .avatar--overflow .avatar__initials {
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    font-size: calc(var(--avatar-size) * 0.36);
+    letter-spacing: var(--tracking-normal);
+    margin-right: 0;
   }
-  .avatar-group > .avatar + .avatar {
-    transition: none;
+
+  @media (prefers-reduced-motion: reduce) {
+    .avatar__face {
+      transition: none;
+    }
+    .avatar__status {
+      transition: none;
+    }
+    .avatar-group > .avatar + .avatar {
+      transition: none;
+    }
   }
 }

package/src/components/primitives/badge/Badge.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import './badge.css';
+
 import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+
 import type { DataAttributes } from '../../../dom-props';
 import { cx } from '../../internal/utils/cx';
 
@@ -12,7 +14,7 @@ interface BadgeOwnProps {
   tone?: BadgeTone;
   /** Surface. @default 'glass' */
   variant?: 'glass' | 'outline';
-  /** @default 'md' */
+  /** Chip density - `sm` tightens the vertical padding for inline use. @default 'md' */
   size?: 'sm' | 'md';
   /** Leading status dot. */
   dot?: boolean;

package/src/components/primitives/badge/Badge.usage.md

@@ -0,0 +1,14 @@
+# Badge - @zyncat/ui/badge
+
+Group: primitives
+Docs: https://ui.zyncat.app/badge
+
+Glass or outline chip for ambient status - toned, dotted, live or pill.
+
+tone neutral|info|success|warning|danger, dot, live, variant="outline", pill, size="sm".
+
+```tsx
+<Badge tone="success" pill>
+  Published
+</Badge>
+```

package/src/components/primitives/badge/CountBadge.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Badge, type BadgeProps } from './Badge';
-import { Odometer } from './odometer';
+import { DigitStrip } from './digit-strip';
 
 export interface CountBadgeProps extends Omit<BadgeProps, 'children'> {
   /** The chip content - stringified; in `roll` mode each digit becomes an odometer column. */
@@ -14,7 +14,7 @@ export function CountBadge({ value, tone = 'neutral', roll = false, ...rest }: C
   const str = String(value);
   return (
     <Badge tone={tone} {...rest}>
-      {roll ? <Odometer value={str} /> : str}
+      {roll ? <DigitStrip value={str} /> : str}
     </Badge>
   );
 }

package/src/components/primitives/badge/CountBadge.usage.md

@@ -0,0 +1,13 @@
+# CountBadge - @zyncat/ui/count-badge
+
+Group: primitives
+Docs: https://ui.zyncat.app/count-badge
+
+Mono tabular count; `roll` animates digits like an odometer.
+
+value: number | string.
+
+```tsx
+<CountBadge value="7 / 10" />
+<CountBadge value={count} roll tone="info" />
+```

package/src/components/primitives/badge/StatusBadge.tsx

@@ -1,11 +1,13 @@
 'use client';
 
 import './badge.css';
+
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { Badge, type BadgeProps } from './Badge';
+
 import { UIMotion } from '../../../tokens/motion-tokens';
 import { fireGlint } from '../../internal/glass/glint';
 import { cx } from '../../internal/utils/cx';
+import { Badge, type BadgeProps } from './Badge';
 
 const SM = UIMotion;
 

package/src/components/primitives/badge/StatusBadge.usage.md

@@ -0,0 +1,14 @@
+# StatusBadge - @zyncat/ui/status-badge
+
+Group: primitives
+Docs: https://ui.zyncat.app/status-badge
+
+Canonical post status - tone + one-word label.
+
+status draft|scheduled|processing|published|failed; add `morph` to animate in place as status
+changes.
+
+```tsx
+<StatusBadge status="published" />
+<StatusBadge status={s} morph />
+```