@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/code-block/code-block.js

@@ -0,0 +1,133 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { ChevronDown, FileCode2 } from "lucide-react";
+import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import { CopyButton } from "../copy-button/copy-button.js";
+import styles from "./code-block.module.css";
+const keywordPattern = /^(?:abstract|as|async|await|break|case|catch|class|const|continue|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|of|private|protected|public|readonly|return|set|static|switch|throw|try|type|typeof|var|void|while|with|yield|SELECT|FROM|WHERE|INSERT|UPDATE|DELETE)$/;
+const literalPattern = /^(?:true|false|null|undefined|NaN|Infinity)$/;
+const typePattern = /^(?:Array|Boolean|Date|Error|Map|Number|Promise|Record|Set|String|ReactNode|HTMLElement|HTMLButtonElement|Event|unknown|never|void|any|boolean|number|string|object)$/;
+const tokenPattern = /\/\*[\s\S]*?\*\/|\/\/[^\n]*|<!--[\s\S]*?-->|`(?:\\.|[^`\\])*`|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\b\d+(?:\.\d+)?\b|\b[A-Za-z_$][\w$-]*\b|[{}[\]();,.<>:=+*/!?|&-]/g;
+function normaliseLanguage(language) {
+    return language.toLowerCase().replace(/^\./, "");
+}
+function tokenKind(value, source, index, language) {
+    if (value.startsWith("//") || value.startsWith("/*") || value.startsWith("<!--"))
+        return "comment";
+    if (value.startsWith("\"") || value.startsWith("'") || value.startsWith("`")) {
+        return language === "json" && /^\s*:/.test(source.slice(index + value.length)) ? "property" : "string";
+    }
+    if (/^\d/.test(value))
+        return "number";
+    if (keywordPattern.test(value) || literalPattern.test(value))
+        return "keyword";
+    if (typePattern.test(value))
+        return "type";
+    if (/^[{}[\]();,.<>:=+*/!?|&-]$/.test(value))
+        return "punctuation";
+    const before = source.slice(0, index);
+    const after = source.slice(index + value.length);
+    if ((language === "tsx" || language === "jsx" || language === "html" || language === "vue") && /<\/?$/.test(before))
+        return "tag";
+    if (/^\s*\(/.test(after) && language !== "json")
+        return "function";
+    if ((language === "css" || language === "tsx" || language === "jsx") && /^\s*[:=]/.test(after))
+        return "property";
+    return undefined;
+}
+function highlight(code, language) {
+    const parts = [];
+    let cursor = 0;
+    for (const match of code.matchAll(tokenPattern)) {
+        const value = match[0];
+        const index = match.index ?? 0;
+        if (cursor < index)
+            parts.push(code.slice(cursor, index));
+        const kind = tokenKind(value, code, index, language);
+        parts.push(kind ? _jsx("span", { className: styles[kind], children: value }, `${index}-${value}`) : _jsx(Fragment, { children: value }, `${index}-${value}`));
+        cursor = index + value.length;
+    }
+    if (cursor < code.length)
+        parts.push(code.slice(cursor));
+    return parts;
+}
+const textEnter = { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] };
+const textExit = { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] };
+/** Text that changes in place: the new words rise in with a soft blur while the old ones leave upward, faster. */
+function SwapText({ value, reduced }) {
+    return _jsx(AnimatePresence, { initial: false, children: _jsx(motion.span, { className: styles.swapText, 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: textExit }, transition: reduced ? { duration: 0 } : textEnter, children: value }, value) });
+}
+/** A new file name swaps in while its box follows the new width on a spring, then returns to auto so it can still truncate. */
+function FileName({ name, reduced }) {
+    const sizer = useRef(null);
+    const rest = useRef(0);
+    const width = useMotionValue("auto");
+    useEffect(() => {
+        const node = sizer.current;
+        if (!node)
+            return;
+        const observer = new ResizeObserver(() => { rest.current = node.offsetWidth; });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    useLayoutEffect(() => {
+        const moving = width.get(), to = sizer.current?.offsetWidth ?? 0;
+        const from = typeof moving === "number" ? moving : rest.current;
+        rest.current = to;
+        if (reduced || !from || !to || Math.abs(from - to) < 1) {
+            width.jump("auto");
+            return;
+        }
+        width.jump(from);
+        const controls = animate(width, to, { ...motionTokens.spring.morph, onComplete: () => width.jump("auto") });
+        return () => controls.stop();
+    }, [name, reduced, width]);
+    return _jsxs(motion.span, { className: `${styles.swap} ${styles.filename}`, style: { width }, children: [_jsx("span", { ref: sizer, className: styles.sizer, "aria-hidden": "true", children: name }), _jsx("span", { className: styles.swapStack, "aria-hidden": "true", children: _jsx(SwapText, { value: name, reduced: reduced }) }), _jsx("span", { className: styles.srOnly, children: name })] });
+}
+export function CodeBlock({ code, filename, language = "tsx", maxLines }) {
+    const displayLanguage = normaliseLanguage(language);
+    const reduced = useReducedMotion() ?? false;
+    const preId = useId();
+    const lineCount = code.split("\n").length;
+    const collapsible = maxLines != null && maxLines > 0 && lineCount > maxLines;
+    const [expanded, setExpanded] = useState(false);
+    const open = !collapsible || expanded;
+    const preRef = useRef(null);
+    const measured = useRef(null);
+    // Before the first measurement the clip height comes from CSS, so the server render is already collapsed.
+    const height = useMotionValue(open ? "auto" : "var(--code-collapsed)");
+    const target = useRef({ open, reduced });
+    const settleRef = useRef(() => { });
+    // The source area follows its content on a spring: expanding, collapsing, and new code all resize smoothly.
+    useLayoutEffect(() => {
+        const pre = preRef.current;
+        if (!pre)
+            return;
+        const settle = (instant) => {
+            const sizes = measured.current;
+            if (!sizes)
+                return;
+            const next = target.current.open ? sizes.full : sizes.collapsed;
+            if (instant || target.current.reduced || typeof height.get() !== "number")
+                height.jump(next);
+            else
+                animate(height, next, motionTokens.spring.smooth);
+        };
+        const observer = new ResizeObserver(() => {
+            const style = getComputedStyle(pre);
+            const full = pre.offsetHeight;
+            const collapsed = maxLines ? Math.min(full, Math.round(maxLines * parseFloat(style.lineHeight) + parseFloat(style.paddingTop) + parseFloat(style.paddingBottom))) : full;
+            const first = !measured.current;
+            measured.current = { full, collapsed };
+            settle(first);
+        });
+        observer.observe(pre);
+        settleRef.current = settle;
+        return () => observer.disconnect();
+    }, [height, maxLines]);
+    useLayoutEffect(() => { target.current = { open, reduced }; settleRef.current(false); }, [open, reduced]);
+    const expandLabels = [`Show all ${lineCount} lines`, "Show fewer lines"];
+    return (_jsxs("section", { className: styles.block, "aria-label": filename ? `${filename} source code` : `${displayLanguage} source code`, style: maxLines ? { "--code-lines": maxLines } : undefined, children: [_jsxs("header", { className: styles.header, children: [_jsxs("div", { className: styles.file, children: [_jsx(FileCode2, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx(FileName, { name: filename ?? "Source code", reduced: reduced }), _jsx("span", { className: styles.language, children: displayLanguage })] }), _jsx(CopyButton, { value: code, label: "Copy code" })] }), _jsx(motion.div, { className: styles.viewport, style: { height }, children: _jsx("pre", { ref: preRef, id: preId, className: styles.pre, tabIndex: 0, "aria-label": "Selectable source code", children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.code, { className: styles.code, initial: reduced ? false : { opacity: 0, y: 4 }, animate: { opacity: 1, y: 0 }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, transition: textExit }, transition: reduced ? { duration: 0 } : textEnter, children: highlight(code, displayLanguage) }, code) }) }) }), collapsible && _jsxs("button", { type: "button", className: styles.expand, "aria-expanded": expanded, "aria-controls": preId, onClick: () => setExpanded(value => !value), children: [_jsxs("span", { className: styles.swap, "aria-hidden": "true", children: [expandLabels.map(text => _jsx("span", { className: styles.reserve, children: text }, text)), _jsx("span", { className: styles.swapStack, children: _jsx(SwapText, { value: expandLabels[expanded ? 1 : 0], reduced: reduced }) })] }), _jsx("span", { className: styles.srOnly, children: expandLabels[expanded ? 1 : 0] }), _jsx(motion.span, { className: styles.chevron, "aria-hidden": "true", initial: false, animate: { rotate: expanded ? 180 : 0 }, transition: reduced ? { duration: 0 } : motionTokens.spring.snappy, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) })] })] }));
+}

package/components/code-block/code-block.module.css

@@ -0,0 +1,43 @@
+.block { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); background: var(--surface); }
+.header { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: var(--space-group); border-bottom: 1px solid var(--border-subtle); padding: var(--space-related) var(--space-group) var(--space-related) var(--space-inset); background: var(--surface-raised); }
+/* Baseline alignment keeps the smaller mono language label on the file name's baseline; the icon centres on its own. */
+.file { display: flex; min-width: 0; align-items: baseline; gap: var(--space-related); color: var(--text-secondary); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-body); line-height: var(--leading-body); }
+.file > svg { flex: none; align-self: center; color: var(--text-muted); }
+.filename { position: relative; min-width: 0; overflow: hidden; color: var(--foreground); }
+/* Changing text stacks old and new words in one cell; reserve spans hold the widest label so the cell never snaps. */
+.swap { display: inline-grid; min-width: 0; white-space: nowrap; }
+.swap > span, .swapStack > span { grid-area: 1 / 1; min-width: 0; }
+.swapStack { display: grid; min-width: 0; }
+.swapText { display: block; overflow: hidden; text-overflow: ellipsis; }
+.reserve { visibility: hidden; }
+.sizer { position: absolute; top: 0; left: 0; white-space: nowrap; visibility: hidden; pointer-events: none; }
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.language { flex: none; color: var(--text-muted); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: var(--text-xs); font-weight: 400; }
+.language::before { content: "·"; margin-right: var(--space-related); color: var(--border-strong); }
+/* The source area follows its content height on a spring. Before it measures, a collapsed block clips from CSS. */
+.viewport { --code-collapsed: calc(var(--code-lines, 0) * var(--text-sm) * 1.7 + var(--space-comfort) * 2); overflow: hidden; }
+.pre { position: relative; overflow: auto; margin: 0; padding: var(--space-comfort); color: var(--foreground); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; font-size: var(--text-sm); font-variant-ligatures: none; line-height: 1.7; tab-size: 2; white-space: pre; }
+/* Block so new source can rise in with a transform; inline code ignores transforms. */
+.code { display: block; }
+.expand { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: var(--space-related); border: 0; border-top: 1px solid var(--border-subtle); padding: 0 var(--space-inset); background: var(--surface-raised); color: var(--text-secondary); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
+.chevron { display: grid; flex: none; place-items: center; color: var(--text-muted); }
+/* Each role has contrast in both themes; color supports, but never replaces, source text. */
+.comment { color: var(--text-muted); font-style: italic; }
+.string { color: oklch(46% .13 150); }
+.number { color: oklch(50% .14 55); }
+.keyword { color: oklch(48% .15 285); }
+.type { color: oklch(46% .13 230); }
+.function { color: oklch(43% .12 25); }
+.property { color: oklch(44% .12 85); }
+.tag { color: oklch(46% .13 230); }
+.punctuation { color: var(--text-secondary); }
+:global(:root[data-theme="dark"]) .string { color: oklch(77% .15 150); }
+:global(:root[data-theme="dark"]) .number { color: oklch(80% .14 75); }
+:global(:root[data-theme="dark"]) .keyword { color: oklch(78% .16 285); }
+:global(:root[data-theme="dark"]) .type { color: oklch(79% .13 230); }
+:global(:root[data-theme="dark"]) .function { color: oklch(80% .13 25); }
+:global(:root[data-theme="dark"]) .property { color: oklch(79% .12 85); }
+:global(:root[data-theme="dark"]) .tag { color: oklch(79% .13 230); }
+@media (hover: hover) and (pointer: fine) { .expand:hover { background: var(--surface-muted); color: var(--foreground); } .expand:hover .chevron { color: var(--foreground); } }
+@media (max-width: 420px) { .header { padding-left: var(--space-group); } .header :global(button) { width: var(--control-height-sm); padding-inline: 0; } .header :global(button) > span:last-of-type { display: none; } .viewport { --code-collapsed: calc(var(--code-lines, 0) * var(--text-xs) * 1.7 + var(--space-inset) * 2); } .pre { padding: var(--space-inset); font-size: var(--text-xs); } }
+@media (prefers-reduced-motion: reduce) { .expand { transition: none; } }

package/components/color-picker/color-picker.d.ts

@@ -0,0 +1,40 @@
+export type ColorFormat = "hex" | "rgb" | "hsl" | "oklch";
+export interface ColorSwatch {
+    id: string;
+    color: string;
+}
+/**
+ * A color field whose swatch grows into a full picker. Pick saturation and brightness on the area, hue and opacity on the sliders, or type a value
+ * in hex, RGB, HSL, or OKLCH; the format button morphs the text between them. The eyedropper appears where the browser supports it, saved
+ * swatches can be added, applied, dragged or moved with Alt and the arrow keys, and removed with Delete. A contrast readout compares the color with
+ * the background it will sit on. Arrow keys move every thumb, Shift takes bigger steps, and Escape closes the panel.
+ */
+export interface ColorPickerProps {
+    /** Any color the picker can read: hex, rgb(), hsl(), or oklch(). */
+    value?: string;
+    defaultValue?: string;
+    /** Receives the color as hex, with two alpha digits when it is not opaque. */
+    onValueChange?: (hex: string) => void;
+    /** The background the color will sit on, for the contrast readout. */
+    background?: string;
+    /** Name shown on the swatch, such as "Accent". */
+    label?: string;
+    swatches?: ColorSwatch[];
+    defaultSwatches?: ColorSwatch[];
+    onSwatchesChange?: (swatches: ColorSwatch[]) => void;
+    /** Most saved swatches. Saving past it drops the oldest. */
+    maxSwatches?: number;
+    defaultFormat?: ColorFormat;
+    className?: string;
+}
+export type Hsva = {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+};
+export declare function toHex(hsva: Hsva): string;
+/** Reads hex, rgb(), hsl(), and oklch() in modern or comma syntax. Returns null for anything else. */
+export declare function parseColor(input: string, hue?: number): Hsva | null;
+export declare function ColorPicker({ value, defaultValue, onValueChange, background, label, swatches: swatchesProp, defaultSwatches, onSwatchesChange, maxSwatches, defaultFormat, className, }: ColorPickerProps): import("react").JSX.Element;
+export default ColorPicker;