52: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"] 53: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"] 54:T15f8,'use client'; import { cva } from 'class-variance-authority'; import * as React from 'react'; import { focusRing } from '@/lib/recipes'; import { cn } from '@/lib/utils'; import { useLabels } from '@/components/ui/labels-context'; import type { LabelProp } from '@/components/ui/labels'; // Figma Pagination dot group (1111:38): Size md|lg, Style Dot|Line, Framed True|False, Color Primary|Gray x light|dark bg. // md: dot 8, gap 12, frame padding 8. lg: dot 10, gap 16, frame padding 12. Line: 40px wide, 6px (md) or 8px (lg) high. // 6px and 10px have no utility in the preset, so they are derived from the space-micro token (2px x 3 and x 5). export type PaginationDotTone = 'primary-light-bg' | 'primary-dark-bg' | 'gray-light-bg' | 'gray-dark-bg'; const toneFrame: Record = { 'primary-light-bg': 'bg-primary-700', 'primary-dark-bg': 'bg-background-brand-subtle', 'gray-light-bg': 'bg-background backdrop-blur-sm', 'gray-dark-bg': 'bg-static-black/90 backdrop-blur-sm', }; // Current and idle indicator colours per tone. The two "dark frame" tones use static white for the current dot: Figma binds // semantic/background/default there, which turns dark in dark mode and would vanish on the dark frame. const toneCurrent: Record = { 'primary-light-bg': 'bg-static-white', 'primary-dark-bg': 'bg-background-brand-bold-default', 'gray-light-bg': 'bg-background-inverse', 'gray-dark-bg': 'bg-static-white', }; const toneIdle: Record = { 'primary-light-bg': 'bg-general-brand-default', 'primary-dark-bg': 'bg-background-neutral-default', 'gray-light-bg': 'bg-muted-strong', 'gray-dark-bg': 'bg-icon-subtle', }; const groupVariants = cva('inline-flex items-center justify-center', { variants: { size: { md: 'gap-3', lg: 'gap-4' }, framed: { true: 'rounded-full', false: '' }, }, compoundVariants: [ { size: 'md', framed: true, className: 'p-2' }, { size: 'lg', framed: true, className: 'p-3' }, ], defaultVariants: { size: 'md', framed: false }, }); const indicatorVariants = cva('block shrink-0 rounded-full transition-colors motion-reduce:transition-none', { variants: { size: { md: '', lg: '' }, style: { dot: '', line: '' }, }, compoundVariants: [ { size: 'md', style: 'dot', className: 'h-2 w-2' }, { size: 'lg', style: 'dot', className: 'h-[calc(var(--space-micro)*5)] w-[calc(var(--space-micro)*5)]' }, { size: 'md', style: 'line', className: 'h-[calc(var(--space-micro)*3)] w-10' }, { size: 'lg', style: 'line', className: 'h-2 w-10' }, ], defaultVariants: { size: 'md', style: 'dot' }, }); export interface PaginationDotGroupProps extends Omit, 'onSelect'> { // Number of pages or slides. count: number; // Zero based index of the current page. current: number; size?: 'md' | 'lg'; // Figma Style: round dots or lines of equal width. Only the colour marks the current one. indicator?: 'dot' | 'line'; // Figma Framed: pill background around the indicators. framed?: boolean; // Figma Color. Default `gray-light-bg`. tone?: PaginationDotTone; // Makes the indicators buttons. Without it the group is a single read-only image. onSelect?: (index: number) => void; // Builds the accessible name of an indicator button. getItemLabel?: (index: number, count: number) => string; // Accessible name of the read-only group, from the 1 based page and the count. Wins over the provider text. pageOfLabel?: LabelProp<[number, number]>; } const PaginationDotGroup = React.forwardRef( ( { className, count, current, size = 'md', indicator = 'dot', framed = false, tone = 'gray-light-bg', onSelect, getItemLabel: getItemLabelProp, pageOfLabel, ...props }, ref, ) => { const l = useLabels({ pageOf: pageOfLabel }); const getItemLabel = getItemLabelProp ?? ((i: number, n: number) => l.goToPage(i + 1, n)); const items = Array.from({ length: Math.max(0, count) }); const readOnly = !onSelect; return (

{items.map((_, i) => { const isCurrent = i === current; const mark = ; if (readOnly) { return ( ); } return ( ); })}

); }, ); PaginationDotGroup.displayName = 'PaginationDotGroup'; export { PaginationDotGroup }; 51:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority@^0.7.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority@^0.7.0"}]]}]}]]}],["$","$L52",null,{"namespace":"@getitdone","registryDependencies":["https://zero-design.itdone.de/r/labels.json","https://zero-design.itdone.de/r/labels-context.json","https://zero-design.itdone.de/r/recipes.json","https://zero-design.itdone.de/r/utils.json","https://zero-design.itdone.de/r/theme.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/ui/pagination-dot-group.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]