50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T815,.cr-scroller { position: relative; } .cr-scroller__track { display: flex; gap: var(--cr-space-3); padding: var(--cr-space-1); overflow-x: auto; scroll-snap-type: x proximity; /* Snap to the padding edge, so the strip rests at scrollLeft 0 and shows no start fade. */ scroll-padding-inline: var(--cr-space-1); scrollbar-width: none; } .cr-scroller__track::-webkit-scrollbar { display: none; } .cr-scroller__track > * { flex: none; scroll-snap-align: start; } .cr-scroller__track:focus-visible { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: var(--cr-focus-offset); border-radius: var(--cr-radius-md); } /* Fade only the edges that have more beyond them. */ .cr-scroller[data-start] .cr-scroller__track { -webkit-mask-image: linear-gradient(to right, transparent, black 80px); mask-image: linear-gradient(to right, transparent, black 80px); } .cr-scroller[data-end] .cr-scroller__track { -webkit-mask-image: linear-gradient(to left, transparent, black 80px); mask-image: linear-gradient(to left, transparent, black 80px); } .cr-scroller[data-start][data-end] .cr-scroller__track { -webkit-mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent); mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent); } .cr-scroller__arrow { position: absolute; top: 50%; display: none; place-items: center; width: 36px; height: 36px; border: 1px solid var(--cr-color-glass-edge); border-radius: var(--cr-radius-full); background: var(--cr-color-glass-popover); box-shadow: var(--cr-shadow-sheet); color: var(--cr-color-text-default); cursor: pointer; transform: translateY(-50%); } .cr-scroller__arrow[data-side='start'] { left: 8px; } .cr-scroller__arrow[data-side='end'] { right: 8px; } .cr-scroller:is(:hover, :focus-within)[data-start] .cr-scroller__arrow[data-side='start'], .cr-scroller:is(:hover, :focus-within)[data-end] .cr-scroller__arrow[data-side='end'] { display: grid; } 53:T8f1,'use client'; import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react'; import { cx } from '@/lib/creance/cx'; import { ChevronIcon, ChevronLeftIcon } from '@/lib/creance/icons'; import './Scroller.css'; export interface ScrollerProps { children: ReactNode; /** Names the scrolling region, which is focusable so keyboard users can scroll it. */ label: string; className?: string; } /** A horizontal strip that fades at an edge with more beyond it, with arrows on hover and focus. */ export function Scroller({ children, label, className }: ScrollerProps) { const ref = useRef(null); const [edges, setEdges] = useState({ start: false, end: false }); const measure = useCallback(() => { const el = ref.current; if (!el) return; setEdges({ start: el.scrollLeft > 1, end: el.scrollLeft + el.clientWidth < el.scrollWidth - 1 }); }, []); useEffect(() => { const el = ref.current; if (!el) return; const observer = new ResizeObserver(measure); observer.observe(el); return () => observer.disconnect(); }, [measure]); const page = (dir: 1 | -1) => { const el = ref.current; if (!el) return; const smooth = !window.matchMedia?.('(prefers-reduced-motion: reduce)').matches; el.scrollBy({ left: dir * el.clientWidth * 0.8, behavior: smooth ? 'smooth' : 'auto' }); }; return (

{/* The region is focusable so arrow keys scroll it; its contents keep their own focus order. */} {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}

{children}

{/* Mouse helpers: keyboard users scroll the focused region directly. */}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/creance-base.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"scroller/Scroller.css","content":"$52","type":"registry:file","target":"@components/creance/scroller/Scroller.css"},{"path":"scroller/Scroller.tsx","content":"$53","type":"registry:ui","target":"@components/creance/scroller/Scroller.tsx"}],"className":"h-[70svh] min-h-80"}]]}]