1c:I[55681,["/_next/static/immutable/chunks/32wiwqr_dmsge.js","/_next/static/immutable/chunks/0bukmq7w_c80m.js","/_next/static/immutable/chunks/3rxrzhpiav1f7.js","/_next/static/immutable/chunks/1qaj0fzi9d-s3.js","/_next/static/immutable/chunks/3g2b2lx2y2nyb.js","/_next/static/immutable/chunks/2a3g5k0ezze1g.js","/_next/static/immutable/chunks/06blemz8y8rbs.js"],"default"] 1d:T27f1,"use client"; import { useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from "react"; import { animate, stagger, useReducedMotion, type AnimationPlaybackControls } from "motion/react"; import "./selection-list.css"; /** * Selection List — a single-choice list whose halves snap together like magnets. * * Each row is a coloured swatch with a dot and a grey label, held a few pixels * apart. Pick one and the two halves accelerate into each other, recoil a hair * on contact and settle; the label's colour wipes in from the left the moment * they touch, the swatch darkens and its dot pops back in the accent. Pick * another and the old one's colour wipes out through the right before its * halves spring apart. Hovering a row teases the halves a little closer. * * Rows take the arrow keys, Home and End; Escape clears the choice. On arrival * the rows slide in one after another and the first one fills. */ export type SelectionListItem = { label: string; /** The swatch, and the label's fill once picked. */ accent: string; /** The dot at rest, and the swatch once picked. */ dark: string; /** The label's text once picked. */ activeText: string; }; export type SelectionListProps = { theme?: "light" | "dark"; items?: SelectionListItem[]; /** Which row fills once the list has arrived; null leaves them all empty. */ defaultValue?: number | null; /** Called with the picked row's index, or null when the choice is cleared. */ onChange?: (index: number | null) => void; /** What the group is announced as. */ label?: string; }; const DEFAULT_ITEMS: SelectionListItem[] = [ { label: "Chat", accent: "#ff5f00", dark: "#6e1526", activeText: "#fff4ec" }, { label: "Questions", accent: "#f4a3ff", dark: "#6e1526", activeText: "#3b0a14" }, { label: "Articles", accent: "#ffcc00", dark: "#3d2e05", activeText: "#231a02" }, { label: "Communities", accent: "#85b02a", dark: "#1f3305", activeText: "#0f1a02" }, ]; const IDLE_TEXT = "#111111"; /* * The magnet: the swatch and the label each travel half the gap (+0.5px of * overlap, so no hairline shows). They accelerate into each other, recoil a * hair on contact, then settle; letting go springs them apart. */ const GAP = 4; const PULL = (GAP + 1) / 2; const RECOIL = 0.5; const SNAP = 0.32; /* the moment the two halves touch */ const CONTACT = SNAP * 0.55; /* hovering pulls the halves slightly together */ const TEASE = 0.75; type Row = { on: boolean; fillAnim: AnimationPlaybackControls | null; /* the fill is clipped by two edges, left and right inset in % */ clip: { l: number; r: number }; }; export default function SelectionList({ theme = "light", items = DEFAULT_ITEMS, defaultValue = 0, onChange, label = "Content types", }: SelectionListProps) { const reduced = useReducedMotion() ?? false; const [selected, setSelected] = useState(null); const rowEls = useRef<(HTMLButtonElement | null)[]>([]); const rows = useRef([]); const onChangeRef = useRef(onChange); onChangeRef.current = onChange; const t = (opts: T) => (reduced ? { duration: 0 } : opts); const parts = (i: number) => { const row = rowEls.current[i]; if (!row) return null; return { row, swatch: row.querySelector(".psel__swatch")!, dot: row.querySelector(".psel__dot")!, label: row.querySelector(".psel__label")!, fill: row.querySelector(".psel__fill")!, text: row.querySelector(".psel__text")!, }; }; /* runs one row to picked or not: snap, then the fill and colours land on contact */ const render = (i: number, on: boolean) => { const state = (rows.current[i] ??= { on: false, fillAnim: null, clip: { l: 0, r: 100 } }); const el = parts(i); const item = items[i]; if (!el || !item || state.on === on) return; state.on = on; const snapT = t({ duration: SNAP, times: [0, 0.55, 0.75, 1], ease: [ [0.55, 0, 1, 0.45], [0.22, 1, 0.36, 1], [0.45, 0, 0.55, 1], ] as [number, number, number, number][], }); const releaseT = t({ type: "spring" as const, stiffness: 520, damping: 19, delay: 0.12 }); const colorT = t({ duration: 0.26, ease: [0.22, 1, 0.36, 1] as const }); const popT = t({ type: "spring" as const, stiffness: 600, damping: 18 }); const fillT = t({ duration: 0.4, ease: [0.32, 0.72, 0, 1] as const }); /* selecting snaps the halves together first; deselecting lets the fill leave, then springs them apart */ if (on) { animate(el.swatch, { x: [null, PULL, PULL - RECOIL, PULL] }, snapT); animate(el.label, { x: [null, -PULL, -PULL + RECOIL, -PULL] }, snapT); } else { animate(el.swatch, { x: 0 }, releaseT); animate(el.label, { x: 0 }, releaseT); } const lead = on && !reduced ? CONTACT : 0; /* selecting wipes in from the left, deselecting wipes out through the right; an interruption reverses from where the edges are */ if (on && state.clip.l >= 100) state.clip = { l: 0, r: 100 }; const from = { ...state.clip }; const to = on ? { l: 0, r: 0 } : { l: 100, r: 0 }; state.fillAnim?.stop(); state.fillAnim = animate(0, 1, { ...fillT, delay: lead, onUpdate: (p) => { state.clip = { l: from.l + (to.l - from.l) * p, r: from.r + (to.r - from.r) * p }; el.fill.style.clipPath = `inset(0% ${state.clip.r}% 0% ${state.clip.l}%)`; }, }); animate(el.text, { color: on ? item.activeText : IDLE_TEXT }, { ...colorT, delay: lead }); animate(el.swatch, { backgroundColor: on ? item.dark : item.accent }, { ...colorT, delay: lead }); animate(el.dot, { backgroundColor: on ? item.accent : item.dark }, { ...colorT, delay: lead }); animate(el.dot, { scale: on ? [0.3, 1] : [0.7, 1] }, on ? { ...popT, delay: lead } : popT); }; /* every change of choice plays out on the rows themselves */ useEffect(() => { items.forEach((_, i) => render(i, i === selected)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [selected]); /* entrance: the rows slide in one after another, then the default fills */ useEffect(() => { const els = rowEls.current.filter((r): r is HTMLButtonElement => !!r); const swatches = els.map((r) => r.querySelector(".psel__swatch")!); const delay = stagger(0.06, { startDelay: 0.1 }); const a = animate(els, { opacity: [0, 1], x: [-14, 0] }, t({ type: "spring" as const, stiffness: 300, damping: 26, delay })); const b = animate(swatches, { scale: [0.4, 1] }, t({ type: "spring" as const, stiffness: 420, damping: 20, delay })); const timer = defaultValue == null ? 0 : window.setTimeout(() => setSelected(defaultValue), reduced ? 0 : 100 + els.length * 60 + 220); return () => { a.stop(); b.stop(); window.clearTimeout(timer); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const pick = (i: number) => { const next = selected === i ? null : i; setSelected(next); onChangeRef.current?.(next); }; const clear = () => { if (selected === null) return; setSelected(null); onChangeRef.current?.(null); }; const softT = t({ type: "spring" as const, stiffness: 500, damping: 32 }); const popT = t({ type: "spring" as const, stiffness: 600, damping: 18 }); const teaseT = t({ type: "spring" as const, stiffness: 380, damping: 24 }); const onEnter = (i: number) => { const el = parts(i); if (!el) return; animate(el.row, { x: 2 }, softT); if (!rows.current[i]?.on) { animate(el.dot, { scale: 1.2 }, popT); animate(el.swatch, { x: TEASE }, teaseT); animate(el.label, { x: -TEASE }, teaseT); el.label.classList.add("psel__label--hover"); } }; const onLeave = (i: number) => { const el = parts(i); if (!el) return; animate(el.row, { x: 0, scale: 1 }, softT); animate(el.dot, { scale: 1 }, popT); if (!rows.current[i]?.on) { animate(el.swatch, { x: 0 }, teaseT); animate(el.label, { x: 0 }, teaseT); } el.label.classList.remove("psel__label--hover"); }; const onKeyDown = (e: ReactKeyboardEvent, i: number) => { const n = items.length; const step = ({ ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 } as Record)[e.key]; if (step) { e.preventDefault(); rowEls.current[(i + step + n) % n]?.focus(); } else if (e.key === "Home") { e.preventDefault(); rowEls.current[0]?.focus(); } else if (e.key === "End") { e.preventDefault(); rowEls.current[n - 1]?.focus(); } else if (e.key === "Escape") { clear(); } }; return (

{items.map((item, i) => ( ))}

); } 1e:Ta2d,/* =========================================================================== Selection List. 32px rows, everything else derived from them: a square swatch and a grey label held 4px apart, which a picked row closes with transforms. The labels are pale chips on either field; the field and the hover tone are tokens, and the dark set swaps in on data-theme="dark". =========================================================================== */ .psel { --psel-h: 32px; --psel-gap: 4px; --psel-idle: #e8e5e1; --psel-idle-hover: #dedad5; --psel-ring: #1a1718; display: flex; justify-content: center; width: 100%; font-family: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 500; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; user-select: none; } .psel[data-theme="dark"] { --psel-idle: #eeeeee; --psel-idle-hover: #e2e2e2; --psel-ring: #f4f1ee; } .psel *, .psel *::before, .psel *::after { box-sizing: border-box; } .psel__list { display: flex; flex-direction: column; align-items: flex-start; } .psel__row { display: flex; align-items: stretch; height: var(--psel-h); margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; outline: none; /* the entrance brings each row in; until then it waits unseen */ opacity: 0; -webkit-appearance: none; appearance: none; } .psel__row + .psel__row { margin-top: 6px; } .psel__row:focus-visible { outline: 2px solid var(--psel-ring); outline-offset: 3px; } .psel__swatch { position: relative; z-index: 1; display: grid; place-items: center; flex-shrink: 0; width: var(--psel-h); height: var(--psel-h); } .psel__dot { display: block; width: 12px; height: 12px; border-radius: 999px; } .psel__label { position: relative; display: flex; align-items: center; height: var(--psel-h); /* the idle gap; a picked row closes it magnetically with transforms */ margin-left: var(--psel-gap); padding: 0 12px 0 9px; overflow: hidden; background: var(--psel-idle); font-size: 20px; line-height: 1; letter-spacing: -0.015em; white-space: nowrap; transition: background-color 0.3s ease; } .psel__label--hover { background: var(--psel-idle-hover); } .psel__fill { position: absolute; inset: 0; clip-path: inset(0% 100% 0% 0%); } .psel__text { position: relative; } @media (prefers-reduced-motion: reduce) { .psel__row { opacity: 1; } .psel__label { transition: none; } } 14:[[["$","script","0",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Selection List — Pin UI\",\"description\":\"A single-choice list whose halves snap together like magnets. Each row is a coloured swatch and a grey label held a few pixels apart. Pick one and the two halves accelerate into each other, recoil a hair on contact and settle, the colour wiping across the label the moment they touch. Pick another an\",\"url\":\"https://www.pinui.xyz/components/selection-list\",\"codeRepository\":\"https://github.com/Rachit315/Pin-UI\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"author\":{\"@id\":\"https://www.pinui.xyz/#organization\"},\"isPartOf\":{\"@id\":\"https://www.pinui.xyz/#software\"},\"license\":\"https://opensource.org/licenses/MIT\"}"}}],["$","script","1",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://www.pinui.xyz\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Components\",\"item\":\"https://www.pinui.xyz/components\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Selection List\",\"item\":\"https://www.pinui.xyz/components/selection-list\"}]}"}}]],["$","$L1c",null,{"entry":{"slug":"selection-list","category":"lists","name":"Selection List","tagline":"A single-choice list whose halves snap together like magnets.","blurb":"Each row is a coloured swatch and a grey label held a few pixels apart. Pick one and the two halves accelerate into each other, recoil a hair on contact and settle, the colour wiping across the label the moment they touch. Pick another and the old one's colour leaves through the right before its halves spring apart.","highlights":["Magnetic snap","Colour wipes in on contact","Wipes out through the right","Arrow keys and Escape"],"clip":"/clips/loop/selection-list.mp4","poster":"/clips/loop/selection-list.jpg","sound":false,"zoom":1,"stage":"#f6f4f1","clipStage":"#f6f4f1","stageDark":"#221f20","usage":"import SelectionList from \"@/components/library/SelectionList\";\n\n console.log(index)} />","props":[{"name":"theme","type":"\"light\" | \"dark\"","fallback":"\"light\"","note":"Pale label chips that read on a warm off-white or on a warm near-black field."},{"name":"items","type":"{ label, accent, dark, activeText }[]","fallback":"Chat · Questions · Articles · Communities","note":"Each row's label, its swatch and fill colour, the dark tone for its dot and picked swatch, and the label's colour once picked."},{"name":"defaultValue","type":"number | null","fallback":"0","note":"Which row fills once the list has arrived; null leaves them all empty."},{"name":"onChange","type":"(index | null) => void","note":"Called with the picked row, or null when the choice is cleared — picking the same row again, or Escape."},{"name":"label","type":"string","fallback":"\"Content types\"","note":"What the group is announced as."}],"files":[{"name":"SelectionList.tsx","lang":"tsx"},{"name":"selection-list.css","lang":"css"}],"info":{"paragraphs":["Every row is 32px and everything else is derived from it: a square swatch with a dot, and a label held 4px away. Picking a row moves each half half the gap plus half a pixel, so the two overlap and no hairline shows — accelerating in, recoiling a hair on contact and settling, on one keyframed tween. The label's colour, the swatch's darker tone and the dot's pop all wait for that moment of contact.","The fill is a clip-path with two edges. Picking wipes it in from the left; letting go wipes it out through the right; and interrupting either one reverses from wherever the edges are, so quick changes never jump. Only one row is picked at a time — the old one lets go as the new one snaps — and picking it again clears the choice.","Hovering a row nudges it right, pops its dot and teases its halves a little closer together. The rows take the arrow keys, Home and End, report their state as pressed buttons, and Escape clears the choice. On arrival the rows slide in one after another and the first one fills; with reduced motion it all simply lands."]},"origin":{"label":"Folder · selection list"},"isNew":true},"panes":[{"name":"SelectionList.tsx","lang":"tsx","code":"$1d"},{"name":"selection-list.css","lang":"css","code":"$1e"}],"registryUrl":"https://www.pinui.xyz/r/selection-list.json"}]]

Selection List — Pin UI Component