@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/tooltip/tooltip.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./tooltip.module.css";
+const DELAY = 250;
+const SKIP_WINDOW = 300;
+/* Every Tooltip brings its own provider, so the skip window is shared here: while any tooltip is open, and briefly after the last one closes, the next opens without delay or travel. */
+let warm = false;
+let openCount = 0;
+let coolTimer = 0;
+const listeners = new Set();
+const warmth = {
+    subscribe(listener) { listeners.add(listener); return () => { listeners.delete(listener); }; },
+    get: () => warm,
+    set(next) { if (warm === next)
+        return; warm = next; listeners.forEach(listener => listener()); },
+    opened() { openCount += 1; window.clearTimeout(coolTimer); warmth.set(true); },
+    closed() { openCount = Math.max(0, openCount - 1); if (openCount)
+        return; window.clearTimeout(coolTimer); coolTimer = window.setTimeout(() => warmth.set(false), SKIP_WINDOW); },
+};
+/** String content crossfades when it changes while open, and the bubble springs to the new text size. */
+function TooltipText({ text }) {
+    const reduced = useReducedMotion();
+    const measure = useRef(null);
+    const measured = useRef(null);
+    const [size, setSize] = useState(null);
+    useLayoutEffect(() => {
+        const node = measure.current;
+        if (!node)
+            return;
+        const observer = new ResizeObserver(([entry]) => {
+            if (!entry)
+                return;
+            const box = entry.borderBoxSize?.[0];
+            const current = node.textContent;
+            const animate = measured.current !== null && measured.current !== current;
+            measured.current = current;
+            setSize({ width: Math.ceil(box?.inlineSize ?? node.offsetWidth), height: Math.ceil(box?.blockSize ?? node.offsetHeight), animate });
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    return _jsxs(motion.span, { className: styles.text, initial: false, animate: size ? { width: size.width, height: size.height } : undefined, transition: size?.animate && !reduced ? motionTokens.spring.morph : { duration: 0 }, children: [_jsx("span", { ref: measure, className: styles.measure, "aria-hidden": "true", children: text }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.span, { className: styles.line, initial: reduced ? false : { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, y: "-0.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, transition: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: text }, text) })] });
+}
+export function Tooltip({ content, children, side = "top" }) {
+    const isWarm = useSyncExternalStore(warmth.subscribe, warmth.get, () => false);
+    // Controlled so the instant flag lands in the same render that mounts the content (Radix reports uncontrolled changes a frame late).
+    const [open, setOpen] = useState(false);
+    const [instant, setInstant] = useState(false);
+    useEffect(() => {
+        if (!open)
+            return;
+        warmth.opened();
+        return warmth.closed;
+    }, [open]);
+    return _jsx(TooltipPrimitive.Provider, { delayDuration: DELAY, skipDelayDuration: 0, children: _jsxs(TooltipPrimitive.Root, { open: open, delayDuration: isWarm ? 0 : DELAY, onOpenChange: next => { if (next)
+                setInstant(warmth.get()); setOpen(next); }, children: [_jsx(TooltipPrimitive.Trigger, { asChild: true, children: children }), _jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { className: styles.tooltip, "data-instant": instant || undefined, side: side, sideOffset: 8, collisionPadding: 12, children: typeof content === "string" || typeof content === "number" ? _jsx(TooltipText, { text: String(content) }) : content }) })] }) });
+}
+export default Tooltip;

package/components/tooltip/tooltip.module.css

@@ -0,0 +1,18 @@
+.tooltip { --tooltip-y: 3px; z-index: 90; max-width: 15rem; padding: var(--space-group) var(--space-inset); border: 1px solid color-mix(in oklab, var(--background) 14%, var(--foreground)); border-radius: var(--radius-control); background: var(--foreground); color: var(--background); box-shadow: var(--shadow-raised); font-size: var(--text-sm); font-weight: 400; line-height: var(--leading-body); transform-origin: var(--radix-tooltip-content-transform-origin); transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-fast) var(--ease-enter); }
+.tooltip[data-side="bottom"] { --tooltip-y: -3px; }
+/* The first tooltip waits, then rises a few pixels from its trigger. Within the skip window the next one only fades.
+   Transitions instead of keyframes, so returning to the trigger while it fades out reverses the fade instead of restarting it. */
+@starting-style {
+  .tooltip[data-state$="-open"] { opacity: 0; transform: translateY(var(--tooltip-y)) scale(.97); }
+  .tooltip[data-instant][data-state$="-open"] { transform: none; }
+}
+.tooltip[data-instant][data-state$="-open"] { transition: opacity var(--duration-instant) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
+/* Radix unmounts when the exit animation ends, so a no-op keyframe times the exit while the transition does the visual work. */
+.tooltip[data-state="closed"] { opacity: 0; transform: scale(.98); transition: opacity var(--duration-instant) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); animation: tooltip-exit var(--duration-instant) linear both; }
+.text { position: relative; display: block; overflow: clip; overflow-clip-margin: var(--space-related); }
+.measure { position: absolute; top: 0; left: 0; width: max-content; max-width: calc(15rem - 2 * var(--space-inset) - 2px); visibility: hidden; pointer-events: none; }
+.line { display: block; width: max-content; max-width: calc(15rem - 2 * var(--space-inset) - 2px); }
+@keyframes tooltip-exit { to { --tooltip-exit: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  .tooltip, .tooltip[data-state="closed"], .tooltip[data-instant][data-state$="-open"] { transform: none; transition: opacity var(--duration-instant) var(--ease-standard); }
+}

package/components/tree-view/tree-view.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+export interface TreeNode {
+    id: string;
+    label: string;
+    children?: TreeNode[];
+    icon?: ReactNode;
+}
+export interface TreeViewProps {
+    nodes: TreeNode[];
+    defaultExpandedIds?: string[];
+    expandedIds?: string[];
+    onExpandedChange?: (expandedIds: string[]) => void;
+    onSelect?: (node: TreeNode) => void;
+    "aria-label"?: string;
+}
+export declare function TreeView({ nodes, defaultExpandedIds, expandedIds, onExpandedChange, onSelect, "aria-label": ariaLabel }: TreeViewProps): import("react").JSX.Element;
+export default TreeView;

package/components/tree-view/tree-view.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { ChevronRight, File, Folder, FolderOpen } from "lucide-react";
+import { AnimatePresence, motion, useIsPresent, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./tree-view.module.css";
+/** A row is 36px plus the 2px gap above it; both collapse together, so nothing snaps when a row leaves. */
+const rowHeight = 38;
+const still = { duration: 0 };
+const fadeIn = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] };
+const fadeOut = { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] };
+const blur = (px) => `blur(${px}px)`;
+function flatten(nodes, expanded, depth = 1, parentId) {
+    return nodes.flatMap((node, index) => [
+        { node, depth, parentId, position: index + 1, setSize: nodes.length },
+        ...(node.children && expanded.has(node.id) ? flatten(node.children, expanded, depth + 1, node.id) : []),
+    ]);
+}
+function fileTone(label, classNames) {
+    const name = label.toLowerCase();
+    if (name.endsWith(".tsx") || name.endsWith(".ts"))
+        return classNames.typescript;
+    if (name.endsWith(".css"))
+        return classNames.stylesheet;
+    if (name.endsWith(".md"))
+        return classNames.markdown;
+    if (name.endsWith(".json"))
+        return classNames.json;
+    return classNames.file;
+}
+/** Same markup with or without reduced motion, so the server render always hydrates cleanly; only the transition changes. */
+function FolderIcon({ open, reduced }) {
+    return _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.span, { className: styles.folderGlyph, initial: reduced ? false : { opacity: 0, scale: .6, filter: blur(motionTokens.blur.subtle) }, animate: { opacity: 1, scale: 1, filter: blur(0) }, exit: reduced ? { opacity: 0, transition: still } : { opacity: 0, scale: .6, filter: blur(motionTokens.blur.subtle), transition: fadeOut }, transition: reduced ? still : { ...motionTokens.spring.snappy, opacity: fadeIn, filter: fadeIn }, children: open ? _jsx(FolderOpen, { size: 16, strokeWidth: 1.7 }) : _jsx(Folder, { size: 16, strokeWidth: 1.7 }) }, open ? "open" : "closed") });
+}
+/**
+ * The selection fill glides between rows through a shared layoutId. A row that is leaving drops its fill at once: left
+ * in place, it held the row's exit open, so the row stayed in the tree with pointer events off and the next click on it
+ * after reopening its folder did nothing.
+ */
+function Selection({ layoutId, reduced }) {
+    const present = useIsPresent();
+    if (!present)
+        return null;
+    return _jsx(motion.span, { "aria-hidden": "true", layoutId: layoutId, className: styles.selection, transition: reduced ? still : motionTokens.spring.morph });
+}
+export function TreeView({ nodes, defaultExpandedIds = [], expandedIds, onExpandedChange, onSelect, "aria-label": ariaLabel = "File tree" }) {
+    const reduced = useReducedMotion() ?? false;
+    const selectionLayoutId = `tree-selection-${useId()}`;
+    const [internalExpanded, setInternalExpanded] = useState(() => new Set(defaultExpandedIds));
+    const [focusedId, setFocusedId] = useState(nodes[0]?.id ?? null);
+    const [selectedId, setSelectedId] = useState(null);
+    /** The folder that opened last; its new children fade in one after another, then everything else stays still. */
+    const [openedId, setOpenedId] = useState(null);
+    const refs = useRef(new Map());
+    const expanded = expandedIds ? new Set(expandedIds) : internalExpanded;
+    const visible = flatten(nodes, expanded);
+    const focusableId = visible.some(({ node }) => node.id === focusedId) ? focusedId : (visible[0]?.node.id ?? null);
+    const openedIndex = visible.findIndex(({ node }) => node.id === openedId);
+    function setExpanded(next) {
+        if (!expandedIds)
+            setInternalExpanded(next);
+        onExpandedChange?.([...next]);
+    }
+    function toggle(node) {
+        if (!node.children?.length)
+            return;
+        const next = new Set(expanded);
+        if (next.has(node.id))
+            next.delete(node.id);
+        else {
+            next.add(node.id);
+            setOpenedId(node.id);
+        }
+        setExpanded(next);
+    }
+    function focus(id) {
+        setFocusedId(id);
+        const row = refs.current.get(id);
+        if (row)
+            row.focus();
+        else
+            requestAnimationFrame(() => refs.current.get(id)?.focus());
+    }
+    function select(node) {
+        setSelectedId(node.id);
+        onSelect?.(node);
+    }
+    function onKeyDown(event, item, index) {
+        const { node } = item;
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            focus(visible[Math.min(index + 1, visible.length - 1)].node.id);
+            return;
+        }
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            focus(visible[Math.max(index - 1, 0)].node.id);
+            return;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            focus(visible[0].node.id);
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            focus(visible[visible.length - 1].node.id);
+            return;
+        }
+        if (event.key === "ArrowRight" && node.children?.length) {
+            event.preventDefault();
+            if (!expanded.has(node.id))
+                toggle(node);
+            else if (visible[index + 1]?.parentId === node.id)
+                focus(visible[index + 1].node.id);
+            return;
+        }
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            if (node.children?.length && expanded.has(node.id))
+                toggle(node);
+            else if (item.parentId)
+                focus(item.parentId);
+            return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            select(node);
+            if (node.children?.length)
+                toggle(node);
+        }
+    }
+    return _jsx("div", { className: styles.tree, role: "tree", "aria-label": ariaLabel, "aria-multiselectable": "false", children: _jsx(AnimatePresence, { initial: false, mode: "sync", children: visible.map((item, index) => {
+                const hasChildren = Boolean(item.node.children?.length);
+                const isExpanded = hasChildren && expanded.has(item.node.id);
+                const isSelected = selectedId === item.node.id;
+                // Only rows that mount use this delay: the space opens in one motion and the new children follow in order.
+                const delay = openedIndex >= 0 && index > openedIndex ? Math.min(index - openedIndex - 1, 7) * motionTokens.stagger.item : 0;
+                return _jsx(motion.div, { className: styles.row, layout: reduced ? false : "position", initial: reduced ? false : { height: 0, opacity: 0, x: -6, overflow: "hidden" }, animate: { height: rowHeight, opacity: 1, x: 0, pointerEvents: "auto", transitionEnd: { overflow: "visible" }, transition: reduced ? still : { height: motionTokens.spring.smooth, opacity: { ...fadeIn, delay }, x: { ...motionTokens.spring.smooth, delay } } }, exit: reduced ? { opacity: 0, transition: still } : { height: 0, opacity: 0, x: -4, overflow: "hidden", pointerEvents: "none", transition: { height: motionTokens.spring.smooth, opacity: fadeOut, x: fadeOut } }, transition: reduced ? still : { layout: motionTokens.spring.smooth }, children: _jsxs("button", { ref: element => { if (element)
+                            refs.current.set(item.node.id, element);
+                        else
+                            refs.current.delete(item.node.id); }, type: "button", className: styles.item, role: "treeitem", "aria-level": item.depth, "aria-posinset": item.position, "aria-setsize": item.setSize, "aria-expanded": hasChildren ? isExpanded : undefined, "aria-selected": isSelected, tabIndex: focusableId === item.node.id ? 0 : -1, style: { "--tree-depth": item.depth }, onFocus: () => setFocusedId(item.node.id), onKeyDown: event => onKeyDown(event, item, index), onClick: () => { setFocusedId(item.node.id); select(item.node); if (hasChildren)
+                            toggle(item.node); }, children: [isSelected && _jsx(Selection, { layoutId: selectionLayoutId, reduced: reduced }), item.depth > 1 && _jsx(motion.span, { "aria-hidden": "true", className: styles.branch, initial: reduced ? false : { opacity: 0, scaleY: 0 }, animate: { opacity: 1, scaleY: 1 }, transition: reduced ? still : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter], delay } }), _jsx(motion.span, { className: styles.disclosure, "aria-hidden": "true", initial: false, animate: { rotate: isExpanded ? 90 : 0 }, transition: reduced ? still : motionTokens.spring.snappy, children: hasChildren ? _jsx(ChevronRight, { size: 14, strokeWidth: 1.9 }) : null }), _jsx("span", { className: [styles.icon, hasChildren ? styles.folder : fileTone(item.node.label, styles)].join(" "), "aria-hidden": "true", children: item.node.icon ?? (hasChildren ? _jsx(FolderIcon, { open: isExpanded, reduced: reduced }) : _jsx(File, { size: 16, strokeWidth: 1.7 })) }), _jsx("span", { className: styles.label, children: item.node.label })] }) }, item.node.id);
+            }) }) });
+}
+export default TreeView;

package/components/tree-view/tree-view.module.css

@@ -0,0 +1,22 @@
+.tree { display: block; width: 100%; min-width: 0; box-sizing: border-box; padding: 6px 8px 8px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: var(--foreground); overflow: hidden; }
+/* Rows clip only while their height animates (Motion sets overflow), so the selection can glide between them unclipped. */
+.row { position: relative; display: flow-root; min-width: 0; height: 38px; }
+.item { position: relative; display: flex; width: 100%; min-width: 0; height: 36px; margin-top: 2px; align-items: center; gap: 8px; padding: 0 10px; padding-left: calc(10px + (var(--tree-depth) - 1) * 18px); border: 0; border-radius: var(--radius-detail); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); line-height: 1; text-align: left; cursor: pointer; outline: none; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
+/* Selection changes color only; a heavier weight would reflow the label. */
+.item[aria-selected="true"] { color: var(--foreground); }
+.selection { position: absolute; inset: 0; z-index: 0; border-radius: var(--radius-detail); background: var(--surface-muted); }
+.branch { position: absolute; top: 4px; bottom: 4px; left: calc(16.5px + (var(--tree-depth) - 2) * 18px); z-index: 1; width: 1px; background: var(--border); transform-origin: top; pointer-events: none; }
+.disclosure, .icon, .label { position: relative; z-index: 1; }
+.disclosure { display: grid; width: 14px; height: 16px; flex: 0 0 14px; place-items: center; color: var(--text-muted); }
+.icon { display: grid; width: 16px; height: 16px; flex: 0 0 16px; place-items: center; color: var(--text-muted); transition: color var(--duration-fast) var(--ease-standard); }
+.folder { color: var(--text-secondary); }
+.item[aria-expanded="true"] .folder, .item[aria-selected="true"] .folder { color: var(--foreground); }
+.folderGlyph { position: absolute; inset: 0; display: grid; place-items: center; }
+.typescript { color: color-mix(in oklab, #3178c6 78%, var(--foreground)); }
+.stylesheet { color: color-mix(in oklab, #8b6ace 73%, var(--foreground)); }
+.markdown { color: color-mix(in oklab, #38896b 74%, var(--foreground)); }
+.json { color: color-mix(in oklab, #c48637 78%, var(--foreground)); }
+/* Its own line height: the row sets 1, and the clipped box (needed for the ellipsis) would cut descenders like g. */
+.label { min-width: 0; overflow: hidden; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
+@media (hover: hover) and (pointer: fine) { .item:hover { background: var(--surface-muted); color: var(--foreground); } }
+@media (prefers-reduced-motion: reduce) { .item, .icon { transition: none; } }

package/components/treemap/treemap.d.ts

@@ -0,0 +1,35 @@
+import { type Ref } from "react";
+export interface TreemapNode {
+    /** Stable identity, unique in the tree. A tile that survives a data change morphs to its new size. */
+    id: string;
+    label: string;
+    /** Leaf size. A branch's size is the sum of its children. */
+    value?: number;
+    /** Optional second measure for shading, such as growth. A branch uses the size weighted mean of its children. */
+    color?: number;
+    children?: TreemapNode[];
+}
+/** Use a treemap for a hierarchy of parts, such as revenue by region, country, and plan, when sizes matter more than exact comparisons. */
+export interface TreemapProps {
+    /** The root. Its label names the whole in the first breadcrumb. */
+    data: TreemapNode;
+    /** What the whole is, such as "Revenue". Names the chart for assistive technology. */
+    label: string;
+    formatValue?: (value: number) => string;
+    /** Names the shading measure in the tooltip and scale, such as "Growth". Tiles take the hue of their top level branch and grow deeper with the measure. Leave it out to draw every tile at one depth. */
+    colorLabel?: string;
+    formatColor?: (value: number) => string;
+    /** Range of the color measure. Defaults to the range of the leaves. */
+    colorDomain?: [number, number];
+    /** Controlled id of the node that fills the view. */
+    focus?: string;
+    defaultFocus?: string;
+    onFocusChange?: (id: string) => void;
+    /** Height of the tiles in pixels. */
+    height?: number;
+    emptyLabel?: string;
+    ref?: Ref<HTMLElement>;
+    className?: string;
+}
+export declare function Treemap({ data, label, formatValue, colorLabel, formatColor, colorDomain, focus, defaultFocus, onFocusChange, height, emptyLabel, ref, className }: TreemapProps): import("react").JSX.Element;
+export default Treemap;