4e: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"] 4f: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"] 50:T3262,// Color Picker from Hirael // MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael 'use client'; import * as React from 'react'; import { colord } from 'colord'; import { Pipette } from 'lucide-react'; import { HexColorPicker } from 'react-colorful'; import { cn } from '@/lib/utils'; import { Button } from '@/registry/hirael/bases/radix/ui/button'; import { Input } from '@/registry/hirael/bases/radix/ui/input'; import { Popover, PopoverContent, PopoverTrigger } from '@/registry/hirael/bases/radix/ui/popover'; import { Tabs, TabsList, TabsTrigger } from '@/registry/hirael/bases/radix/ui/tabs'; export type ColorFormat = 'hex' | 'rgb' | 'hsl'; interface ColorPickerContextValue { hex: string; setHex: (hex: string) => void; format: ColorFormat; setFormat: (f: ColorFormat) => void; swatches: string[]; pushSwatch: (hex: string) => void; disabled?: boolean; } const ColorPickerContext = React.createContext(null); const useColorPicker = () => { const ctx = React.useContext(ColorPickerContext); if (!ctx) { throw new Error('ColorPicker compound components must be used inside '); } return ctx; }; const DEFAULT_SWATCHES = ['#0ea5e9', '#22c55e', '#a855f7', '#f43f5e', '#f97316', '#facc15', '#14b8a6', '#64748b']; export interface ColorPickerProps { value?: string; defaultValue?: string; onValueChange?: (hex: string) => void; format?: ColorFormat; defaultFormat?: ColorFormat; onFormatChange?: (format: ColorFormat) => void; swatches?: string[]; recentLimit?: number; disabled?: boolean; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; children?: React.ReactNode; } const ColorPicker = ({ value: valueProp, defaultValue = '#0ea5e9', onValueChange, format: formatProp, defaultFormat = 'hex', onFormatChange, swatches: swatchesProp, recentLimit = 8, disabled, open: openProp, defaultOpen = false, onOpenChange, children, }: ColorPickerProps) => { const [internal, setInternal] = React.useState(defaultValue); const value = valueProp ?? internal; const setValue = React.useCallback( (hex: string) => { if (valueProp === undefined) setInternal(hex); onValueChange?.(hex); }, [valueProp, onValueChange], ); const [formatInternal, setFormatInternal] = React.useState(defaultFormat); const format = formatProp ?? formatInternal; const setFormat = React.useCallback( (next: ColorFormat) => { if (formatProp === undefined) setFormatInternal(next); onFormatChange?.(next); }, [formatProp, onFormatChange], ); const [recent, setRecent] = React.useState([]); const pushSwatch = React.useCallback( (hex: string) => setRecent((prev) => [hex, ...prev.filter((c) => c.toLowerCase() !== hex.toLowerCase())].slice(0, recentLimit)), [recentLimit], ); const [openInternal, setOpenInternal] = React.useState(defaultOpen); const open = openProp ?? openInternal; const setOpen = (next: boolean) => { if (openProp === undefined) setOpenInternal(next); onOpenChange?.(next); // Remember the colour the popover closes on, not every step of a drag. if (!next) pushSwatch(value.toLowerCase()); }; const swatches = React.useMemo(() => { const merged = swatchesProp ? [...swatchesProp, ...recent] : [...recent, ...DEFAULT_SWATCHES]; return merged.filter((c, i) => merged.findIndex((o) => o.toLowerCase() === c.toLowerCase()) === i).slice(0, 16); }, [swatchesProp, recent]); const ctx = React.useMemo( () => ({ hex: value, setHex: setValue, format, setFormat, swatches, pushSwatch, disabled }), [value, setValue, format, setFormat, swatches, pushSwatch, disabled], ); return ( {children} ); }; interface ColorPickerTriggerProps extends Omit, 'children'> { placeholder?: string; children?: React.ReactNode; } const ColorPickerTrigger = ({ placeholder = 'Pick a color', className, children, ...props }: ColorPickerTriggerProps) => { const ctx = useColorPicker(); return ( ); }; /** Saturation, brightness and hue in one control. */ const ColorPickerArea = ({ className, ...props }: React.ComponentProps<'div'>) => { const ctx = useColorPicker(); return (

); }; const ColorPickerFormatTabs = ({ className, ...props }: Omit, 'value' | 'onValueChange'>) => { const ctx = useColorPicker(); return ( ctx.setFormat(v as ColorFormat)} className={className} > {(['hex', 'rgb', 'hsl'] as const).map((f) => ( {f} ))} ); }; interface ChannelInputProps { value: number; max: number; onCommit: (n: number) => void; 'aria-label': string; } // Keeps the raw text while editing, so clearing a field doesn't snap it to 0; out-of-range input clamps on blur or Enter. const ChannelInput = ({ value, max, onCommit, 'aria-label': ariaLabel }: ChannelInputProps) => { const [draft, setDraft] = React.useState(null); const parse = (raw: string) => (/^\d+$/.test(raw.trim()) ? Number(raw) : null); const commit = () => { const n = draft === null ? null : parse(draft); if (n !== null) onCommit(Math.min(max, n)); setDraft(null); }; return ( { setDraft(e.target.value); const n = parse(e.target.value); if (n !== null && n <= max) onCommit(n); }} onBlur={commit} onKeyDown={(e) => { if (e.key === 'Enter') commit(); }} inputMode="numeric" aria-label={ariaLabel} className="h-8 px-2 text-center text-xs tabular-nums" /> ); }; const ColorPickerFormatInputs = ({ className, ...props }: React.ComponentProps<'div'>) => { const ctx = useColorPicker(); const color = colord(ctx.hex); const [hexDraft, setHexDraft] = React.useState(null); if (ctx.format === 'hex') { const commitHex = () => { const next = hexDraft && colord(hexDraft.startsWith('#') ? hexDraft : `#${hexDraft}`); if (next && next.isValid()) { ctx.setHex(next.toHex()); ctx.pushSwatch(next.toHex()); } setHexDraft(null); }; return (

{ setHexDraft(e.target.value.toUpperCase()); const next = colord(e.target.value.startsWith('#') ? e.target.value : `#${e.target.value}`); if (/^#?[0-9a-f]{6}$/i.test(e.target.value.trim()) && next.isValid()) ctx.setHex(next.toHex()); }} onBlur={commitHex} onKeyDown={(e) => { if (e.key === 'Enter') commitHex(); }} aria-label="Hex color" className="h-8 text-xs uppercase tabular-nums" />

); } const channels = ctx.format === 'rgb' ? (['r', 'g', 'b'] as const).map((k) => ({ k, value: color.toRgb()[k], max: 255, commit: (n: number) => ctx.setHex(colord({ ...color.toRgb(), [k]: n }).toHex()), })) : (['h', 's', 'l'] as const).map((k) => ({ k, value: color.toHsl()[k], max: k === 'h' ? 360 : 100, commit: (n: number) => ctx.setHex(colord({ ...color.toHsl(), [k]: n }).toHex()), })); return (

{channels.map((c) => ( ))}

); }; interface EyeDropperResult { sRGBHex: string; } type EyeDropperCtor = new () => { open: () => Promise }; const ColorPickerEyedropper = ({ className, ...props }: Omit, 'onClick' | 'children'>) => { const ctx = useColorPicker(); const supported = React.useSyncExternalStore( () => () => {}, () => 'EyeDropper' in window, () => false, ); if (!supported) return null; return ( ); }; const ColorPickerSwatches = ({ className, ...props }: React.ComponentProps<'div'>) => { const ctx = useColorPicker(); if (ctx.swatches.length === 0) return null; return (

{ctx.swatches.map((s) => { const active = s.toLowerCase() === ctx.hex.toLowerCase(); return (

); }; /** Renders the default layout; pass children to compose your own from the parts. */ const ColorPickerContent = ({ className, children, ...props }: React.ComponentProps) => { const ctx = useColorPicker(); return ( {children ?? (

)} ); }; export { ColorPicker, ColorPickerTrigger, ColorPickerContent, ColorPickerArea, ColorPickerFormatTabs, ColorPickerFormatInputs, ColorPickerEyedropper, ColorPickerSwatches, }; 4d:["$","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","colord",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/colord","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":"colord"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","li","react-colorful",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-colorful","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":"react-colorful"}]]}]}]]}],["$","$L4e",null,{"namespace":"@hirael","registryDependencies":["button","input","popover","tabs"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/hirael/bases/radix/components/color-picker.tsx","content":"$50","type":"registry:component","target":"components/color-picker.tsx"}],"className":"h-[70svh] min-h-80"}]]}]