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:T364d,'use client'; import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'; import { cva, type VariantProps } from 'class-variance-authority'; import * as React from 'react'; import { focusRing } from '@/lib/recipes'; import { cn } from '@/lib/utils'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { useLabels } from '@/components/ui/labels-context'; import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; // Project colours 1..8 (`colors/data/project/N`), the same set Avatar and LogoTile use. Full class strings for the Tailwind scan. const projectSwatchClass = { 'project-1': 'bg-data-project-1', 'project-2': 'bg-data-project-2', 'project-3': 'bg-data-project-3', 'project-4': 'bg-data-project-4', 'project-5': 'bg-data-project-5', 'project-6': 'bg-data-project-6', 'project-7': 'bg-data-project-7', 'project-8': 'bg-data-project-8', } as const; export type ProjectSwatch = keyof typeof projectSwatchClass; export interface ColorSwatchOption { // The value reported on selection. For `color` options this is usually the CSS colour itself. value: string; // Accessible name, e.g. "Teal". Without it the position is used ("Colour 3"). label?: string; // Any CSS colour, applied as the swatch fill. Use it for user data such as stored calendar colours. color?: string; // Token class for the fill, e.g. `bg-data-project-3`. Wins over `color`. className?: string; } // The eight project colours as options (values `project-1`..`project-8`). const projectColorOptions: ColorSwatchOption[] = (Object.keys(projectSwatchClass) as ProjectSwatch[]).map((value) => ({ value, className: projectSwatchClass[value], })); const swatchVariants = cva( [ 'relative inline-flex shrink-0 items-center justify-center rounded-full border border-solid border-border-bold', 'transition-shadow', focusRing, 'disabled:cursor-not-allowed disabled:opacity-disabled', // Selected: a ring in the foreground colour plus a gap to the surface (shape cue, not colour only). 'data-[state=checked]:ring-2 data-[state=checked]:ring-foreground data-[state=checked]:ring-offset-2 data-[state=checked]:ring-offset-background', 'hover:data-[state=unchecked]:ring-2 hover:data-[state=unchecked]:ring-border-bold hover:data-[state=unchecked]:ring-offset-2 hover:data-[state=unchecked]:ring-offset-background', ], { variants: { size: { sm: 'h-icon-md w-icon-md', md: 'h-avatar-xs w-avatar-xs', lg: 'h-avatar-sm w-avatar-sm', }, }, defaultVariants: { size: 'md' }, }, ); export interface ColorSwatchPickerProps extends Omit, 'onChange' | 'children'>, VariantProps { // Swatches in display order. Defaults to the eight project colours. options?: ColorSwatchOption[]; // Called with the option value when the selection changes. onValueChange?: (value: string) => void; invalid?: boolean; // Shows only a small swatch button for the current colour; the swatches open in a popover and picking one closes it. compact?: boolean; // Accessible name of the compact trigger. Defaults to the provider text plus the current colour. triggerLabel?: string; // Adds an apply button next to the swatches. It is disabled until a colour is selected and calls `onApply` with the selected value. In `compact` mode picking a swatch keeps the popover open so the button can be reached, and applying closes it. onApply?: (value: string) => void; // Text of the apply button. Defaults to the provider text `apply`. applyLabel?: string; } // Single-choice colour swatches (calendar and sales colours). A radio group: Tab enters, arrow keys move and select. const ColorSwatchPicker = React.forwardRef, ColorSwatchPickerProps>( ({ className, options = projectColorOptions, size, invalid, disabled, compact, triggerLabel, onApply, applyLabel, value, defaultValue, onValueChange, ...props }, ref) => { const l = useLabels(); const controlled = value !== undefined; const [inner, setInner] = React.useState(defaultValue); const current = controlled ? value : inner; if (compact) { return ( ); } const handleChange = (next: string) => { if (!controlled) setInner(next); onValueChange?.(next); }; const group = ( {options.map((option, index) => ( ))} ); if (!onApply) return group; return (

{group}

); }, ); ColorSwatchPicker.displayName = 'ColorSwatchPicker'; // Compact mode: a swatch-sized button for the current colour that opens the swatch group in a popover. const CompactColorSwatchPicker = React.forwardRef, ColorSwatchPickerProps>( ({ className, options = projectColorOptions, size, invalid, disabled, triggerLabel, value, defaultValue, onValueChange, onApply, applyLabel, ...props }, ref) => { const l = useLabels(); const [open, setOpen] = React.useState(false); const controlled = value !== undefined; const [inner, setInner] = React.useState(defaultValue); const current = controlled ? value : inner; const index = options.findIndex((option) => option.value === current); const selected = index >= 0 ? options[index] : undefined; const selectedName = selected ? (selected.label ?? l.colorOption(index + 1)) : undefined; const name = triggerLabel ?? (selectedName ? `${l.pickColor}: ${selectedName}` : l.pickColor); const handleChange = (next: string) => { if (!controlled) setInner(next); onValueChange?.(next); // With an apply button the popover stays open until the colour is applied. if (!onApply) setOpen(false); }; return ( ) : null} ); }, ); CompactColorSwatchPicker.displayName = 'CompactColorSwatchPicker'; const HEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i; // `#abc` becomes `#aabbcc`, everything is lowercase. Returns null when the text is not a hex colour. export function normalizeHexColor(text: string): string | null { const t = text.trim().startsWith('#') ? text.trim() : `#${text.trim()}`; if (!HEX.test(t)) return null; const lower = t.toLowerCase(); return lower.length === 4 ? `#${lower[1]}${lower[1]}${lower[2]}${lower[2]}${lower[3]}${lower[3]}` : lower; } export interface ColorInputProps extends Omit, 'value' | 'defaultValue' | 'onChange' | 'type' | 'size'> { // Controlled hex value like `#3b82f6`. value?: string; defaultValue?: string; // Called with a normalized `#rrggbb` value when the picker or a valid hex text changes it. onValueChange?: (value: string) => void; invalid?: boolean; compact?: boolean; // Control size. `md` (default) is the 24px swatch with the standard field, `sm` a 16px swatch with the `sm` field height. size?: 'sm' | 'md'; // Accessible names. Win over the provider text. pickLabel?: string; hexLabel?: string; } // Hex text field with a native colour picker swatch. Free text may be incomplete while typing; only valid colours are reported. const ColorInput = React.forwardRef( ({ className, value, defaultValue = '#000000', onValueChange, invalid, compact, size, disabled, pickLabel, hexLabel, name, id, onBlur, ...props }, ref) => { const l = useLabels({ pickColor: pickLabel, hexColor: hexLabel }); const small = size === 'sm'; const controlled = value !== undefined; const [inner, setInner] = React.useState(normalizeHexColor(defaultValue) ?? '#000000'); const current = controlled ? (normalizeHexColor(value) ?? '#000000') : inner; const [text, setText] = React.useState(current); // Keep the text in step with outside changes unless the user is mid-edit on an equivalent value. React.useEffect(() => { setText((prev) => (normalizeHexColor(prev) === current ? prev : current)); }, [current]); const textInvalid = invalid || normalizeHexColor(text) === null; const commit = (next: string) => { if (!controlled) setInner(next); onValueChange?.(next); }; return (

{ const next = normalizeHexColor(event.target.value); if (next) { setText(next); commit(next); } }} className="peer absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed" /> { setText(event.target.value); const next = normalizeHexColor(event.target.value); if (next) commit(next); }} onBlur={(event) => { const next = normalizeHexColor(event.target.value); setText(next ?? current); onBlur?.(event); }} />

); }, ); ColorInput.displayName = 'ColorInput'; export { ColorInput, ColorSwatchPicker, projectColorOptions, swatchVariants as colorSwatchVariants }; 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","@radix-ui/react-radio-group@^1.5.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-radio-group","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":"@radix-ui/react-radio-group@^1.5.1"}]]}]}],["$","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/button.json","https://zero-design.itdone.de/r/input.json","https://zero-design.itdone.de/r/labels-context.json","https://zero-design.itdone.de/r/popover.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/color-picker.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]