@zyncat/ui 0.8.0

package/dist/avatar.css

@@ -0,0 +1,200 @@
+/* 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);
+
+  /* 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);
+
+  /* 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);
+
+  /* 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;
+
+  transition: box-shadow var(--duration-fast) var(--ease-standard);
+}
+
+.avatar__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 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;
+}
+
+.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;
+}
+
+/* square - radius scales with size (concentric nesting) */
+.avatar--square .avatar__face {
+  border-radius: var(--radius-md);
+}
+
+.avatar--square.avatar--lg .avatar__face,
+.avatar--square.avatar--xl .avatar__face {
+  border-radius: var(--radius-lg);
+}
+
+/* data-palette 1-6: identity slots (tokens/avatar.css); no attr = neutral; identity colouring, never status */
+
+.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);
+}
+
+/* status dot lives outside .avatar__face (which clips) so it's never cut; ~27% of size, min 6px */
+
+.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);
+}
+
+.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 {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* inject --avatar-ring on group children - cascades to .avatar__face */
+.avatar-group > .avatar {
+  --avatar-ring: 0 0 0 2px var(--bg-surface);
+}
+
+.avatar-group > .avatar + .avatar {
+  margin-left: calc(var(--avatar-size) * -0.3);
+  transition: margin-left var(--duration-base) var(--ease-entrance);
+}
+
+.avatar-group:hover > .avatar + .avatar {
+  margin-left: var(--space-1);
+}
+
+/* "+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;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .avatar__face {
+    transition: none;
+  }
+  .avatar__status {
+    transition: none;
+  }
+  .avatar-group > .avatar + .avatar {
+    transition: none;
+  }
+}

package/dist/avatar.d.ts

@@ -0,0 +1,35 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties, HTMLAttributes } from 'react';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarShape = 'circle' | 'square';
+type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';
+type AvatarPaletteIndex = 1 | 2 | 3 | 4 | 5 | 6;
+interface AvatarOwnProps {
+    /** Image URL. Falls back to initials / icon / silhouette if absent or fails. */
+    src?: string | null;
+    /** Display name - drives initials generation, palette hash, and aria-label. */
+    name?: string | null;
+    /** Content override - any React node (e.g. <Icon name="globe" />). */
+    icon?: ReactNode | null;
+    /** 'circle' for people; 'square' for channels / brand pages. Default 'circle'. */
+    shape?: AvatarShape;
+    /** Size step. Default 'md' (32 px). */
+    size?: AvatarSize;
+    /** Presence indicator dot at bottom-right. Default null (hidden). */
+    status?: AvatarStatus | null;
+    /** Override identity slot 1-6 (blue - violet - plum - rose - clay - moss); auto from name hash when null, neutral when anonymous. */
+    paletteIndex?: AvatarPaletteIndex | null;
+    /** Extra class(es) merged onto the root. */
+    className?: string;
+    /** Inline styles merged onto the root. */
+    style?: CSSProperties;
+}
+interface AvatarProps extends AvatarOwnProps {
+    /** Standard <span> attributes (onClick, title, data-*, ...) forwarded to the root. */
+    htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof AvatarOwnProps> & DataAttributes;
+}
+declare function Avatar({ src, name, icon, shape, size, status, paletteIndex, className, style, htmlProps, }: AvatarProps): react.JSX.Element;
+
+export { Avatar, type AvatarPaletteIndex, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus };

package/dist/avatar.js

@@ -0,0 +1,67 @@
+'use client';import { cx } from './chunk-QGNC7LH5.js';
+import './avatar.css';
+import { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PALETTE_SLOTS = 6;
+function hashName(str) {
+  let h = 0;
+  for (let i = 0; i < str.length; i++) h = (h << 5) - h + str.charCodeAt(i) | 0;
+  return Math.abs(h) % PALETTE_SLOTS + 1;
+}
+function initialsOf(name, max) {
+  if (!name) return "";
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "";
+  if (parts.length === 1 || max === 1) return parts[0][0].toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+function Silhouette() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8.5", r: "3.8", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M4 20.5C4 16.1 7.6 13 12 13s8 3.1 8 7.5", fill: "currentColor", opacity: "0.65" })
+  ] });
+}
+function Avatar({
+  src = null,
+  name = null,
+  icon = null,
+  shape = "circle",
+  size = "md",
+  status = null,
+  paletteIndex = null,
+  className = "",
+  style = {},
+  htmlProps
+}) {
+  const [imgError, setImgError] = useState(false);
+  const showImg = Boolean(src) && !imgError;
+  const maxInits = size === "xs" ? 1 : 2;
+  const inits = initialsOf(name, maxInits);
+  const slot = paletteIndex ?? (name ? hashName(name) : null);
+  const cls = cx("avatar", size !== "md" && `avatar--${size}`, shape === "square" && "avatar--square", className);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cls,
+      role: name ? "img" : void 0,
+      "aria-label": name || void 0,
+      "data-palette": !showImg && slot != null ? slot : void 0,
+      style,
+      ...htmlProps,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "avatar__face", children: [
+          showImg && /* @__PURE__ */ jsx("img", { className: "avatar__img", src, alt: name || "", onError: () => setImgError(true), draggable: false }),
+          !showImg && icon && /* @__PURE__ */ jsx("span", { className: "avatar__icon", "aria-hidden": "true", children: icon }),
+          !showImg && !icon && inits && /* @__PURE__ */ jsx("span", { className: "avatar_initialsOf", "aria-hidden": "true", children: inits }),
+          !showImg && !icon && !inits && /* @__PURE__ */ jsx("span", { className: "avatar__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Silhouette, {}) })
+        ] }),
+        status && /* @__PURE__ */ jsx("span", { className: `avatar__status avatar__status--${status}`, role: "img", "aria-label": status, title: status })
+      ]
+    }
+  );
+}
+
+export { Avatar };
+//# sourceMappingURL=avatar.js.map
+//# sourceMappingURL=avatar.js.map

package/dist/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/avatar/Avatar.tsx"],"names":[],"mappings":"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","file":"avatar.js","sourcesContent":["'use client';\n\nimport './avatar.css';\nimport { useState, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type AvatarShape = 'circle' | 'square';\nexport type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';\nexport type AvatarPaletteIndex = 1 | 2 | 3 | 4 | 5 | 6;\n\ninterface AvatarOwnProps {\n  /** Image URL. Falls back to initials / icon / silhouette if absent or fails. */\n  src?: string | null;\n  /** Display name - drives initials generation, palette hash, and aria-label. */\n  name?: string | null;\n  /** Content override - any React node (e.g. <Icon name=\"globe\" />). */\n  icon?: ReactNode | null;\n  /** 'circle' for people; 'square' for channels / brand pages. Default 'circle'. */\n  shape?: AvatarShape;\n  /** Size step. Default 'md' (32 px). */\n  size?: AvatarSize;\n  /** Presence indicator dot at bottom-right. Default null (hidden). */\n  status?: AvatarStatus | null;\n  /** Override identity slot 1-6 (blue - violet - plum - rose - clay - moss); auto from name hash when null, neutral when anonymous. */\n  paletteIndex?: AvatarPaletteIndex | null;\n  /** Extra class(es) merged onto the root. */\n  className?: string;\n  /** Inline styles merged onto the root. */\n  style?: CSSProperties;\n}\n\nexport interface AvatarProps extends AvatarOwnProps {\n  /** Standard <span> attributes (onClick, title, data-*, ...) forwarded to the root. */\n  htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof AvatarOwnProps> & DataAttributes;\n}\n\nconst PALETTE_SLOTS = 6;\n\nfunction hashName(str: string) {\n  let h = 0;\n  for (let i = 0; i < str.length; i++) h = ((h << 5) - h + str.charCodeAt(i)) | 0;\n  return (Math.abs(h) % PALETTE_SLOTS) + 1;\n}\n\nfunction initialsOf(name: string | null, max: number) {\n  if (!name) return '';\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return '';\n  if (parts.length === 1 || max === 1) return parts[0][0].toUpperCase();\n  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n}\n\nfunction Silhouette() {\n  return (\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <circle cx=\"12\" cy=\"8.5\" r=\"3.8\" fill=\"currentColor\" />\n      <path d=\"M4 20.5C4 16.1 7.6 13 12 13s8 3.1 8 7.5\" fill=\"currentColor\" opacity=\"0.65\" />\n    </svg>\n  );\n}\n\nexport function Avatar({\n  src = null,\n  name = null,\n  icon = null,\n  shape = 'circle',\n  size = 'md',\n  status = null,\n  paletteIndex = null,\n  className = '',\n  style = {},\n  htmlProps,\n}: AvatarProps) {\n  const [imgError, setImgError] = useState(false);\n  const showImg = Boolean(src) && !imgError;\n\n  const maxInits = size === 'xs' ? 1 : 2;\n  const inits = initialsOf(name, maxInits);\n  const slot = paletteIndex ?? (name ? hashName(name) : null);\n\n  const cls = cx('avatar', size !== 'md' && `avatar--${size}`, shape === 'square' && 'avatar--square', className);\n\n  return (\n    <span\n      className={cls}\n      role={name ? 'img' : undefined}\n      aria-label={name || undefined}\n      data-palette={!showImg && slot != null ? slot : undefined}\n      style={style}\n      {...htmlProps}\n    >\n      <span className=\"avatar__face\">\n        {showImg && (\n          <img className=\"avatar__img\" src={src} alt={name || ''} onError={() => setImgError(true)} draggable={false} />\n        )}\n        {!showImg && icon && (\n          <span className=\"avatar__icon\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        {!showImg && !icon && inits && (\n          <span className=\"avatar_initialsOf\" aria-hidden=\"true\">\n            {inits}\n          </span>\n        )}\n        {!showImg && !icon && !inits && (\n          <span className=\"avatar__icon\" aria-hidden=\"true\">\n            <Silhouette />\n          </span>\n        )}\n      </span>\n\n      {status && (\n        <span className={`avatar__status avatar__status--${status}`} role=\"img\" aria-label={status} title={status} />\n      )}\n    </span>\n  );\n}\n"]}

package/dist/badge.css

@@ -0,0 +1,182 @@
+/* Badge / status pill - shape, tones, dot, status morph. */
+
+.badge {
+  /* wire the tone vars into the glass surface hooks */
+  --glass-fg: var(--badge-fg);
+  --glass-tint: var(--badge-tint);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding-block: var(--space-1);
+  padding-inline: var(--space-2);
+  border-radius: var(--radius-sm);
+
+  font-family: var(--font-mono);
+  font-size: var(--size-micro);
+  line-height: var(--leading-micro);
+  font-weight: var(--weight-medium);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0;
+  white-space: nowrap;
+  vertical-align: middle;
+  color: var(--badge-fg);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.badge--sm {
+  padding-block: var(--space-px);
+  gap: var(--space-px);
+}
+
+.badge--pill {
+  border-radius: var(--radius-full);
+}
+
+.badge__dot {
+  position: relative;
+  width: 0.5em;
+  height: 0.5em;
+  flex: none;
+  border-radius: var(--radius-full);
+  background: var(--badge-dot, var(--badge-fg));
+  /* hue cross-fades as the status morphs */
+  transition: background-color var(--duration-base) var(--ease-standard);
+}
+.badge__dot--live::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: inherit;
+  animation: badge-pulse var(--duration-pulse) var(--ease-entrance) infinite;
+}
+@keyframes badge-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  70% {
+    transform: scale(2.6);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(2.6);
+    opacity: 0;
+  }
+}
+
+.badge__icon {
+  display: inline-flex;
+  flex: none;
+  width: 1em;
+  height: 1em;
+  margin-left: calc(var(--space-px) * -1);
+}
+.badge__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.badge--neutral {
+  --badge-fg: var(--text-muted);
+  --badge-tint: var(--glass-tint-neutral);
+  --badge-dot: var(--gray-500);
+}
+.badge--info {
+  --badge-fg: var(--info-text);
+  --badge-tint: var(--glass-tint-info);
+  --badge-dot: var(--info);
+}
+.badge--success {
+  --badge-fg: var(--success-text);
+  --badge-tint: var(--glass-tint-success);
+  --badge-dot: var(--success);
+}
+.badge--warning {
+  --badge-fg: var(--warning-text);
+  --badge-tint: var(--glass-tint-warning);
+  --badge-dot: var(--warning);
+}
+.badge--danger {
+  --badge-fg: var(--danger-text);
+  --badge-tint: var(--glass-tint-danger);
+  --badge-dot: var(--danger);
+}
+
+/* Outline variant - deliberately NOT glass: a flat, engraved hairline chip. */
+.badge--outline {
+  position: relative;
+  isolation: isolate;
+  background: color-mix(in oklab, var(--badge-fg) 6%, transparent);
+  box-shadow:
+    inset 0 0 0 var(--border-hairline) color-mix(in oklab, var(--badge-fg) 30%, transparent),
+    inset 0 1px 0 0 rgb(255 255 255 / 0.5),
+    var(--shadow-xs);
+  transition:
+    transform var(--duration-base) var(--ease-standard),
+    box-shadow var(--duration-base) var(--ease-standard),
+    background-color var(--duration-fast) var(--ease-standard);
+}
+.badge--outline .badge__dot {
+  box-shadow: 0 0 0 2.5px color-mix(in oklab, var(--badge-dot) 16%, transparent);
+}
+.badge--outline:hover {
+  transform: translateY(calc(var(--space-px) * -1));
+  box-shadow:
+    inset 0 0 0 var(--border-hairline) color-mix(in oklab, var(--badge-fg) 42%, transparent),
+    inset 0 1px 0 0 rgb(255 255 255 / 0.6),
+    var(--shadow-sm);
+}
+
+/* Status morph - a clipped one-cell grid stack: the ghost measures the next width, the box eases, words roll; shrink mirrors grow. */
+.badge__morph {
+  position: relative;
+  display: inline-grid;
+  align-items: center;
+  justify-items: start;
+  overflow: hidden;
+  transition: width var(--duration-base) var(--ease-entrance);
+}
+.badge__morph > * {
+  grid-area: 1 / 1;
+}
+.badge__ghost {
+  visibility: hidden;
+  pointer-events: none;
+}
+.badge__word {
+  display: inline-block;
+  transition:
+    transform var(--duration-base) var(--ease-entrance),
+    opacity var(--duration-base) var(--ease-standard);
+}
+.badge__word--out {
+  transform: translateY(-52%);
+  opacity: 0;
+}
+.badge__word--in {
+  transform: translateY(52%);
+  opacity: 0;
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .badge--outline {
+    transition: none;
+  }
+  .badge--outline:hover {
+    transform: none;
+  }
+  .badge__dot--live::after {
+    animation: none;
+  }
+  .badge__morph {
+    transition: none;
+  }
+  .badge__word {
+    transition: none;
+  }
+}

package/dist/badge.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties, HTMLAttributes } from 'react';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+
+type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+interface BadgeOwnProps {
+    /** Status hue. @default 'neutral' */
+    tone?: BadgeTone;
+    /** Surface. @default 'glass' */
+    variant?: 'glass' | 'outline';
+    /** @default 'md' */
+    size?: 'sm' | 'md';
+    /** Leading status dot. */
+    dot?: boolean;
+    /** Dot pulses (implies dot) - for in-progress status. */
+    live?: boolean;
+    /** Fully-rounded shape. */
+    pill?: boolean;
+    /** Optional leading <Icon> (overrides dot if both set). */
+    icon?: ReactNode;
+    /** Extra class(es) merged onto the chip. */
+    className?: string;
+    /** Inline styles merged onto the chip. */
+    style?: CSSProperties;
+    /** Chip label. */
+    children?: ReactNode;
+}
+interface BadgeProps extends BadgeOwnProps {
+    /** Standard <span> attributes (aria-*, data-*, title, ...) forwarded to the chip. */
+    htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof BadgeOwnProps> & DataAttributes;
+}
+declare function Badge({ tone, variant, size, dot, live, pill, icon, className, style, children, htmlProps, }: BadgeProps): react.JSX.Element;
+
+export { Badge, type BadgeProps, type BadgeTone };

package/dist/badge.js

@@ -0,0 +1,4 @@
+'use client';export { Badge } from './chunk-PMECHR3A.js';
+import './chunk-QGNC7LH5.js';
+//# sourceMappingURL=badge.js.map
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"badge.js"}