d082480849
Three new product-agnostic packages unlock visible elegance lifts
across every product:
═══════════════════════════════════════════════════════════════════════
@bytelyst/motion@0.1.0 — Wave 4 elegance primitives (2.21 KB / 8 KB)
═══════════════════════════════════════════════════════════════════════
<Reveal> — IntersectionObserver-based fade/slide entry,
6 directions, configurable spring + delay
<StaggerList> — sequenced reveal of children with per-item delay
<NumberFlow> — RAF-tweened number counter, cubic-out easing,
Intl-formatted, prefers-reduced-motion aware
<TiltCard> — 3D perspective tilt + cursor-tracking glare
overlay (single-element ref, no React rerenders)
<ScrollProgress> — fixed scroll-position bar (window or any element)
Plus exported `SPRINGS` (4 cubic-bezier presets) + `prefersReducedMotion`
helper. Every primitive accepts `disableMotion` for snapshot tests.
═══════════════════════════════════════════════════════════════════════
@bytelyst/data-viz@0.1.0 — Wave 5b viz primitives (2.63 KB / 10 KB)
═══════════════════════════════════════════════════════════════════════
<Sparkline> — line trend with gradient fill + last-point marker
<BarSparkline> — discrete-bar mini-chart with max-bar highlight
<KpiCard> — label + headline + delta arrow + sparkline; supports
'goodWhen=lower' for latency/cost metrics
<ProgressRing> — circular progress with center content slot,
animated stroke-dashoffset
<Heatmap> — GitHub-style calendar grid with color-mix() intensity
All pure SVG / CSS — zero runtime dependencies.
═══════════════════════════════════════════════════════════════════════
@bytelyst/notifications-ui@0.1.0 — Wave 7 essentials (3.31 KB / 10 KB)
═══════════════════════════════════════════════════════════════════════
<NotificationCenter> — bell trigger + badge + dropdown panel with
All / Unread / Mentions tabs, outside-click
+ Escape close, mark-all-read action
<InboxItem> — single row with unread dot, kind glyph,
relative timestamp, optional action buttons
<BannerStack> — top-of-page strip with maxVisible + +N more,
accent-bordered tone variants, dismissible
<Announcement> — inline 'What's new' pill (3 tone variants)
5 notification kinds (info/success/warning/danger/mention) + 5 banner
kinds (... + announcement gradient).
═══════════════════════════════════════════════════════════════════════
Quality gates
═══════════════════════════════════════════════════════════════════════
All three packages: tsc --noEmit clean, build clean.
Tests: motion 16/16 · data-viz 14/14 · notifications-ui 17/17
Bundles: motion 2.21 KB · data-viz 2.63 KB · noti-ui 3.31 KB
Budgets: added to .size-limit.cjs (8/10/10 KB respectively)
Refs:
learning_ai_uxui_web/docs/ROADMAP_2026.md
§Wave 4 (Motion), §Wave 5b (Charts), §Wave 7 (Productisation)
Decisions doc §13 (mobile-native = tokens-only) leaves room for these
web-first packages to be the canonical surface
91 lines
2.4 KiB
TypeScript
91 lines
2.4 KiB
TypeScript
import type { CSSProperties, ReactNode } from 'react';
|
|
|
|
export interface AnnouncementProps {
|
|
/** Bold short label rendered as a chip on the left. */
|
|
tag?: string;
|
|
/** Main message. */
|
|
children: ReactNode;
|
|
/** Optional CTA. */
|
|
cta?: { label: string; href?: string; onSelect?: () => void };
|
|
/** Visual variant. */
|
|
tone?: 'accent' | 'subtle' | 'gradient';
|
|
className?: string;
|
|
style?: CSSProperties;
|
|
}
|
|
|
|
/**
|
|
* `<Announcement>` — single inline marketing strip (smaller than a
|
|
* `<BannerStack>` row, larger than a toast). Good for "What's new"
|
|
* call-outs above the fold.
|
|
*/
|
|
export function Announcement({
|
|
tag = 'NEW',
|
|
children,
|
|
cta,
|
|
tone = 'gradient',
|
|
className,
|
|
style,
|
|
}: AnnouncementProps) {
|
|
const bg =
|
|
tone === 'gradient'
|
|
? 'linear-gradient(90deg, var(--bl-accent-muted, rgba(99,102,241,0.20)), var(--bl-info-muted, rgba(56,189,248,0.12)) 60%, transparent)'
|
|
: tone === 'subtle'
|
|
? 'var(--bl-surface-muted, rgba(0,0,0,0.04))'
|
|
: 'var(--bl-accent-muted, rgba(99,102,241,0.18))';
|
|
|
|
return (
|
|
<div
|
|
data-testid="bl-announcement"
|
|
role="region"
|
|
className={className}
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 'var(--bl-space-3, 12px)',
|
|
padding: 'var(--bl-space-2, 8px) var(--bl-space-4, 16px)',
|
|
borderRadius: 'var(--bl-radius-pill, 999px)',
|
|
background: bg,
|
|
fontSize: '0.82rem',
|
|
color: 'var(--bl-text-primary, inherit)',
|
|
...style,
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
padding: '2px 8px',
|
|
background: 'var(--bl-accent, #6366f1)',
|
|
color: 'var(--bl-accent-foreground, #fff)',
|
|
fontSize: '0.65rem',
|
|
fontWeight: 800,
|
|
letterSpacing: '0.05em',
|
|
borderRadius: 'var(--bl-radius-pill, 999px)',
|
|
}}
|
|
>
|
|
{tag}
|
|
</span>
|
|
<span style={{ flex: 1, minWidth: 0 }}>{children}</span>
|
|
{cta && (
|
|
<a
|
|
data-testid="bl-announcement-cta"
|
|
href={cta.href}
|
|
onClick={e => {
|
|
if (cta.onSelect) {
|
|
e.preventDefault();
|
|
cta.onSelect();
|
|
}
|
|
}}
|
|
style={{
|
|
fontSize: '0.78rem',
|
|
fontWeight: 700,
|
|
color: 'var(--bl-accent, #6366f1)',
|
|
textDecoration: 'none',
|
|
whiteSpace: 'nowrap',
|
|
}}
|
|
>
|
|
{cta.label} →
|
|
</a>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|