@teamofsilicons/silicon-ui 0.0.0-stage → 0.1.0

package/components/avatar/avatar.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { SiliconImage } from "../../lib/silicon-provider.js";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./avatar.module.css";
+export function Avatar({ name, src, size = "md", status, className, ...props }) {
+    const initials = name.trim().split(/\s+/).slice(0, 2).map(part => part[0]?.toUpperCase()).join("");
+    const reduceMotion = !!useReducedMotion();
+    const image = useRef(null);
+    const [failedSrc, setFailedSrc] = useState();
+    // A photo that is already decoded shows at once. One that is still loading waits, then fades in from a soft blur.
+    useLayoutEffect(() => { const node = image.current; if (node && !node.complete)
+        node.dataset.loading = ""; }, [src]);
+    const showImage = src && failedSrc !== src;
+    return _jsxs("span", { ...props, className: [styles.avatar, styles[size], className].filter(Boolean).join(" "), role: "img", "aria-label": `${name}${status ? `, ${status}` : ""}`, children: [showImage ? _jsx(SiliconImage, { ref: image, src: src, alt: "", fill: true, sizes: size === "xl" ? "88px" : size === "lg" ? "48px" : size === "md" ? "36px" : "28px", onLoad: event => { delete event.currentTarget.dataset.loading; }, onError: () => setFailedSrc(src) }, src) : _jsx("span", { className: src ? styles.fallback : undefined, "aria-hidden": "true", children: initials }), _jsx(AnimatePresence, { initial: false, children: status && _jsx(motion.i, { className: [styles.status, styles[status]].join(" "), "aria-hidden": "true", initial: { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: .6, transition: { duration: reduceMotion ? 0 : motionTokens.duration.fast } }, transition: reduceMotion ? { duration: 0 } : motionTokens.spring.snappy }, status) })] });
+}

package/components/avatar/avatar.module.css

@@ -0,0 +1,60 @@
+.avatar {
+  position: relative;
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-items: center;
+  overflow: visible;
+  border: 1px solid var(--border);
+  border-radius: var(--avatar-radius); corner-shape: var(--avatar-corner-shape);
+  background: var(--surface-muted);
+  color: var(--foreground);
+  font-size: var(--text-xs);
+  font-weight: 500;
+}
+
+.avatar img {
+  pointer-events: none;
+  border-radius: inherit; corner-shape: inherit;
+  object-fit: cover;
+  transition: opacity var(--duration-standard) var(--ease-enter), filter var(--duration-standard) var(--ease-enter);
+}
+
+/* Set only while a photo is still downloading after mount, so cached photos never fade. */
+.avatar img[data-loading] {
+  opacity: 0;
+  filter: blur(4px);
+  transition: none;
+}
+
+.fallback { animation: avatar-fallback-in var(--duration-standard) var(--ease-enter) both; }
+
+.sm { width: 28px; height: 28px; font-size: 10px; }
+.md { width: 36px; height: 36px; }
+.lg { width: 48px; height: 48px; font-size: var(--text-sm); }
+.xl { width: 88px; height: 88px; font-size: var(--text-xl); }
+
+.status {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  width: 10px;
+  height: 10px;
+  border: 2px solid var(--surface);
+  border-radius: var(--radius-full); corner-shape: round;
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--border) 70%, transparent);
+}
+
+.sm .status { width: 8px; height: 8px; border-width: 1.5px; }
+.lg .status { width: 12px; height: 12px; }
+.xl .status { width: 14px; height: 14px; right: 4px; bottom: 4px; }
+.online { background: var(--success); }
+.offline { background: var(--text-muted); }
+
+@keyframes avatar-fallback-in { from { opacity: 0; } to { opacity: 1; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .avatar img { transition: none; }
+  .avatar img[data-loading] { filter: none; }
+  .fallback { animation: none; }
+}

package/components/avatar-group/avatar-group.d.ts

@@ -0,0 +1,13 @@
+export interface AvatarGroupMember {
+    name: string;
+    src?: string;
+    status?: "online" | "offline";
+}
+export interface AvatarGroupProps {
+    members: AvatarGroupMember[];
+    max?: number;
+    size?: "sm" | "md" | "lg";
+    label?: string;
+}
+export declare function AvatarGroup({ members, max, size, label }: AvatarGroupProps): import("react").JSX.Element;
+export default AvatarGroup;

package/components/avatar-group/avatar-group.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import { Avatar } from "../avatar/avatar.js";
+import styles from "./avatar-group.module.css";
+/** The overflow count rolls the way it moved: more people rise in from below, fewer drop in from above. */
+const rise = { hidden: (direction) => ({ opacity: 0, y: `${.4 * direction}em`, filter: `blur(${motionTokens.blur.subtle}px)` }), shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] } }, gone: (direction) => ({ opacity: 0, y: `${-.4 * direction}em`, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] } }) };
+// Same keys as `rise` so the settled style is identical whichever branch renders on the server.
+const fade = { hidden: { opacity: 0, y: 0, filter: "blur(0px)" }, shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.instant } }, gone: { opacity: 0, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.instant } } };
+// A person joining or leaving opens or closes their slot, so the rest of the stack slides instead of jumping.
+const slot = { initial: { width: 0, opacity: 0, scale: .9 }, animate: { width: "auto", opacity: 1, scale: 1 }, exit: { width: 0, opacity: 0, scale: .9 } };
+export function AvatarGroup({ members, max = 4, size = "md", label = "Team members" }) {
+    const reduceMotion = !!useReducedMotion();
+    const visible = members.slice(0, Math.max(0, max));
+    const overflow = Math.max(0, members.length - visible.length);
+    const transition = reduceMotion ? { duration: 0 } : motionTokens.spring.morph;
+    const [count, setCount] = useState({ overflow, direction: 1 });
+    if (count.overflow !== overflow)
+        setCount({ overflow, direction: overflow < count.overflow ? -1 : 1 });
+    return _jsx("div", { className: [styles.group, styles[size]].join(" "), role: "group", "aria-label": label, style: { "--count": visible.length + (overflow > 0 ? 1 : 0) }, children: _jsxs(AnimatePresence, { initial: false, children: [visible.map((member, index) => _jsx(motion.span, { className: styles.slot, style: { "--index": index }, ...slot, transition: transition, children: _jsxs("span", { className: styles.lift, children: [_jsx(Avatar, { className: styles.avatar, name: member.name, src: member.src, status: member.status, size: size }), _jsx("span", { className: styles.tip, "aria-hidden": "true", children: member.name })] }) }, member.name)), overflow > 0 ? _jsx(motion.span, { className: styles.slot, style: { "--index": visible.length }, ...slot, transition: transition, children: _jsx("span", { className: [styles.lift, styles.overflow, styles[size]].join(" "), role: "img", "aria-label": `${overflow} more ${label.toLowerCase()}`, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: count.direction, children: _jsxs(motion.span, { className: styles.count, custom: count.direction, variants: reduceMotion ? fade : rise, initial: "hidden", animate: "shown", exit: "gone", "aria-hidden": "true", children: ["+", overflow] }, overflow) }) }) }, "overflow") : null] }) });
+}
+export default AvatarGroup;

package/components/avatar-group/avatar-group.module.css

@@ -0,0 +1,27 @@
+.group { --avatar-size: 36px; display: inline-flex; height: var(--avatar-size); align-items: center; padding-left: 6px; }
+.group.sm { --avatar-size: 28px; }
+.group.lg { --avatar-size: 48px; }
+/* Each slot is the avatar's visible width, so a slot that opens or closes moves the rest of the stack smoothly. */
+.slot { position: relative; display: inline-flex; flex: 0 0 auto; height: var(--avatar-size); align-items: center; }
+/* One wrapper per person carries every hover move as a single translate, so the stack never changes size. */
+.lift { --fan: 0px; --aside: 0px; --rise: 0px; position: relative; display: inline-flex; margin-left: -6px; border-radius: var(--avatar-radius); corner-shape: var(--avatar-corner-shape); transform: translate(calc(var(--fan) + var(--aside)), var(--rise)); transition: transform var(--duration-standard) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
+.avatar, .overflow { border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); transition: box-shadow var(--duration-fast) var(--ease-standard); }
+.overflow { position: relative; display: inline-grid; place-items: center; overflow: hidden; border-radius: var(--avatar-radius); corner-shape: var(--avatar-corner-shape); background: var(--surface-muted); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
+.count { display: inline-block; }
+.overflow.sm { width: 28px; height: 28px; font-size: 10px; }
+.overflow.md { width: 36px; height: 36px; }
+.overflow.lg { width: 48px; height: 48px; font-size: var(--text-sm); }
+/* The name floats above the stack, outside the layout, so showing it never moves anything. */
+.tip { position: absolute; z-index: 2; bottom: calc(100% + 8px); left: 50%; padding: 4px 8px; border-radius: var(--radius-full); corner-shape: round; background: var(--foreground); color: var(--background); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 3px); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
+/* Pointing at the stack loosens its overlap from the center; the person under the pointer lifts with a crisp ring and names themselves, and their neighbors ease aside. */
+@media (hover: hover) and (pointer: fine) {
+  .group:hover .lift { --fan: calc((var(--index) - (var(--count) - 1) / 2) * 4px); }
+  .slot:hover { z-index: 1; }
+  .slot:hover .lift { --rise: -2px; }
+  .slot:hover ~ .slot .lift { --aside: 3px; }
+  .slot:has(~ .slot:hover) .lift { --aside: -3px; }
+  .slot:hover .avatar, .slot:hover .overflow { box-shadow: 0 0 0 1px var(--border-strong); }
+  .slot:hover .tip { opacity: 1; transform: translate(-50%, 0); transition-delay: 60ms; }
+}
+/* Reduced motion keeps the stack still; the ring and name still answer the pointer. */
+@media (prefers-reduced-motion: reduce) { .lift { transform: none !important; transition: none; } .tip { transform: translate(-50%, 0); transition: none; } }

package/components/badge/badge.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type BadgeTone = "neutral" | "success" | "info" | "warning" | "danger";
+export type BadgeSize = "sm" | "md";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    tone?: BadgeTone;
+    size?: BadgeSize;
+    icon?: ReactNode;
+}
+export declare function Badge({ tone, size, icon, className, children, ...props }: BadgeProps): import("react").JSX.Element;
+export default Badge;

package/components/badge/badge.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement, useEffect, useLayoutEffect, useRef } from "react";
+import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./badge.module.css";
+const exitFast = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] };
+const textIn = { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` };
+const textOut = { opacity: 0, y: "-0.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: exitFast };
+const iconIn = { opacity: 0, scale: .6, filter: `blur(${motionTokens.blur.subtle}px)` };
+const shown = { opacity: 1, y: "0em", scale: 1, filter: "blur(0px)" };
+const fadeOnly = { opacity: 0, transition: { duration: motionTokens.duration.instant } };
+/** Outgoing copies are hidden from assistive tech while they fade, so only the current text is read. */
+function Swap(props) {
+    const present = useIsPresent();
+    return _jsx(motion.span, { ...props, "aria-hidden": present ? props["aria-hidden"] : true });
+}
+/** A new icon component crossfades in; re-rendering the same icon stays still. */
+function iconKey(icon) {
+    if (!isValidElement(icon))
+        return "icon";
+    const type = icon.type;
+    return typeof type === "string" ? type : type.displayName ?? type.name ?? "icon";
+}
+export function Badge({ tone = "neutral", size = "md", icon, className, children, ...props }) {
+    const reduce = useReducedMotion();
+    const text = typeof children === "string" || typeof children === "number" ? String(children) : null;
+    const glyphKey = icon ? iconKey(icon) : "";
+    const body = useRef(null);
+    const content = useRef(null);
+    // Width stays auto at rest. Only a new label or icon springs it from the old size to the new one; passive reflows (a font swap, a hidden parent) follow instantly.
+    const width = useMotionValue("auto");
+    const changedAt = useRef(0);
+    useLayoutEffect(() => { changedAt.current = performance.now(); }, [text, glyphKey]);
+    useEffect(() => {
+        const node = content.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        let last;
+        let controls;
+        const settle = () => { width.jump("auto"); if (body.current)
+            body.current.style.width = "auto"; };
+        const observer = new ResizeObserver(([entry]) => {
+            if (!entry)
+                return;
+            const next = entry.borderBoxSize?.[0]?.inlineSize ?? node.offsetWidth;
+            const current = width.get();
+            const from = typeof current === "number" ? current : last;
+            last = next;
+            controls?.stop();
+            if (reduce || from === undefined || from === next || performance.now() - changedAt.current > 120)
+                return settle();
+            // Pin the old width before this frame paints, then spring to the new one.
+            if (body.current)
+                body.current.style.width = `${from}px`;
+            controls = animate(width, [from, next], { ...motionTokens.spring.morph, onComplete: settle });
+        });
+        observer.observe(node);
+        return () => { observer.disconnect(); controls?.stop(); };
+    }, [width, reduce]);
+    const enter = reduce ? { duration: motionTokens.duration.instant } : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] };
+    const classes = [styles.badge, styles[tone], styles[size], className].filter(Boolean).join(" ");
+    // The pill follows its content: text and icon swap in place while the width springs to the new size.
+    return _jsx("span", { ...props, className: classes, children: _jsx(motion.span, { ref: body, className: styles.body, style: { width }, children: _jsxs("span", { ref: content, className: styles.content, children: [icon ? _jsx("span", { className: styles.icon, "aria-hidden": "true", children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(Swap, { className: styles.glyph, initial: reduce ? { opacity: 0 } : iconIn, animate: shown, exit: reduce ? fadeOnly : { ...iconIn, transition: exitFast }, transition: reduce ? enter : motionTokens.spring.snappy, children: icon }, glyphKey) }) }) : null, text === null ? children : _jsx("span", { className: styles.label, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(Swap, { className: styles.text, initial: reduce ? { opacity: 0 } : textIn, animate: shown, exit: reduce ? fadeOnly : textOut, transition: enter, children: text }, text) }) })] }) }) });
+}
+export default Badge;

package/components/badge/badge.module.css

@@ -0,0 +1,52 @@
+.badge {
+  display: inline-flex;
+  min-height: 26px;
+  align-items: center;
+  border: 1px solid var(--badge-border, var(--border));
+  border-radius: var(--radius-full); corner-shape: round;
+  padding: 0 10px;
+  color: var(--badge-foreground, var(--foreground));
+  background: var(--badge-background, var(--surface));
+  font-size: var(--text-xs);
+  font-weight: 500;
+  letter-spacing: -.01em;
+  line-height: 1;
+  white-space: nowrap;
+  /* Clip keeps the inline baseline while the pill morphs around swapped text. */
+  overflow: clip;
+  transition: border-color var(--duration-standard) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .badge:hover { border-color: color-mix(in oklab, var(--badge-color, var(--foreground)) 32%, var(--border)); background: color-mix(in oklab, var(--badge-color, var(--foreground)) 10%, var(--surface)); }
+}
+.sm { min-height: 22px; padding: 0 8px; font-size: 11px; }
+.md { font-size: var(--text-xs); }
+
+.body { display: block; }
+.content { position: relative; display: inline-flex; width: max-content; align-items: center; gap: 5px; }
+.sm .content { gap: 4px; }
+.label, .glyph { position: relative; display: inline-flex; align-items: center; }
+.text { display: block; }
+
+.icon {
+  position: relative;
+  display: inline-flex;
+  width: auto;
+  height: auto;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  color: var(--badge-color, var(--foreground));
+  line-height: 1;
+}
+
+.neutral { --badge-color: var(--text-secondary); --badge-foreground: var(--text-secondary); --badge-background: var(--surface-muted); --badge-border: var(--border); }
+.success { --badge-color: var(--success); --badge-foreground: var(--success); --badge-background: color-mix(in oklab, var(--success) 10%, var(--surface)); --badge-border: color-mix(in oklab, var(--success) 25%, var(--border)); }
+.info { --badge-color: var(--accent); --badge-foreground: var(--accent-strong); --badge-background: var(--accent-subtle); --badge-border: color-mix(in oklab, var(--accent) 24%, var(--border)); }
+.warning { --badge-color: var(--warning); --badge-foreground: var(--warning); --badge-background: color-mix(in oklab, var(--warning) 11%, var(--surface)); --badge-border: color-mix(in oklab, var(--warning) 27%, var(--border)); }
+.danger { --badge-color: var(--danger); --badge-foreground: var(--danger); --badge-background: color-mix(in oklab, var(--danger) 10%, var(--surface)); --badge-border: color-mix(in oklab, var(--danger) 26%, var(--border)); }
+
+@media (prefers-reduced-motion: reduce) {
+  .badge { transition-duration: var(--duration-instant); }
+}

package/components/bar-chart/bar-chart.d.ts

@@ -0,0 +1,32 @@
+export interface BarChartDatum {
+    /** Stable identity, such as an ISO date. A bar whose key survives a data change keeps its place, so switching ranges morphs instead of redrawing. */
+    key: string;
+    /** Full label for the headline and screen readers, such as "Tue, Sep 15". */
+    label: string;
+    /** Short label under the bar, such as "T" or "Sep 14". Leave it out to keep the axis quiet. */
+    axisLabel?: string;
+    value: number;
+}
+/** Use a bar chart for one measure across a run of days, weeks, or months, when people compare each period against the rest and against the average. */
+export interface BarChartProps {
+    data: BarChartDatum[];
+    /** What is measured, such as "Active minutes". Names the chart for assistive technology. */
+    label: string;
+    /** The range on show, such as "Sep 15–21, 2026". It rests under the headline. */
+    period: string;
+    /** Unit after each value, such as "min". */
+    unit?: string;
+    /** Headline label at rest, above the average. */
+    averageLabel?: string;
+    /** Headline label while a bar is scrubbed. */
+    valueLabel?: string;
+    /** Header of the first column in the data table read by screen readers. */
+    categoryLabel?: string;
+    /** Draws the average as a reference line that springs to each new range. */
+    showAverage?: boolean;
+    /** Plot height in pixels. */
+    height?: number;
+    formatValue?: (value: number) => string;
+}
+export declare function BarChart({ data, label, period, unit, averageLabel, valueLabel, categoryLabel, showAverage, height, formatValue }: BarChartProps): import("react").JSX.Element;
+export default BarChart;