{"name":"Kibo UI Registry","homepage":"https://www.kibo-ui.com/","items":[{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"announcement","type":"registry:ui","title":"announcement","description":"A compound badge designed to display an announcement.","author":"Hayden Bleasel ","dependencies":[],"devDependencies":[],"registryDependencies":["badge"],"files":[{"type":"registry:ui","path":"index.tsx","content":"import type { ComponentProps, HTMLAttributes } from \"react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\n\nexport type AnnouncementProps = ComponentProps & {\n themed?: boolean;\n};\n\nexport const Announcement = ({\n variant = \"outline\",\n themed = false,\n className,\n ...props\n}: AnnouncementProps) => (\n \n);\n\nexport type AnnouncementTagProps = HTMLAttributes;\n\nexport const AnnouncementTag = ({\n className,\n ...props\n}: AnnouncementTagProps) => (\n \n);\n\nexport type AnnouncementTitleProps = HTMLAttributes;\n\nexport const AnnouncementTitle = ({\n className,\n ...props\n}: AnnouncementTitleProps) => (\n \n);\n","target":"components/kibo-ui/announcement/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"avatar-stack","type":"registry:ui","title":"avatar-stack","description":"Avatar Stack is a component that allows you to stack and overlap avatars.","author":"Hayden Bleasel ","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"import { Children, type ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type AvatarStackProps = {\n children: ReactNode;\n className?: string;\n animate?: boolean;\n size?: number;\n};\n\nexport const AvatarStack = ({\n children,\n className,\n animate = false,\n size = 40,\n ...props\n}: AvatarStackProps) => (\n *]:transition-all\",\n className\n )}\n {...props}\n >\n {Children.map(children, (child, index) => {\n if (!child) {\n return null;\n }\n\n return (\n \n {child}\n \n );\n })}\n \n);\n","target":"components/kibo-ui/avatar-stack/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"banner","type":"registry:ui","title":"banner","description":"A banner is a full-width component that can be used to show a message and action to the user.","author":"Hayden Bleasel ","dependencies":["@radix-ui/react-use-controllable-state","lucide-react"],"devDependencies":[],"registryDependencies":["button"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { type LucideIcon, XIcon } from \"lucide-react\";\nimport {\n type ComponentProps,\n createContext,\n type HTMLAttributes,\n type MouseEventHandler,\n useContext,\n} from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\ntype BannerContextProps = {\n show: boolean;\n setShow: (show: boolean) => void;\n};\n\nexport const BannerContext = createContext({\n show: true,\n setShow: () => {},\n});\n\nexport type BannerProps = HTMLAttributes & {\n visible?: boolean;\n defaultVisible?: boolean;\n onClose?: () => void;\n inset?: boolean;\n};\n\nexport const Banner = ({\n children,\n visible,\n defaultVisible = true,\n onClose,\n className,\n inset = false,\n ...props\n}: BannerProps) => {\n const [show, setShow] = useControllableState({\n defaultProp: defaultVisible,\n prop: visible,\n onChange: onClose,\n });\n\n if (!show) {\n return null;\n }\n\n return (\n \n \n {children}\n \n \n );\n};\n\nexport type BannerIconProps = HTMLAttributes & {\n icon: LucideIcon;\n};\n\nexport const BannerIcon = ({\n icon: Icon,\n className,\n ...props\n}: BannerIconProps) => (\n \n \n \n);\n\nexport type BannerTitleProps = HTMLAttributes;\n\nexport const BannerTitle = ({ className, ...props }: BannerTitleProps) => (\n

\n);\n\nexport type BannerActionProps = ComponentProps;\n\nexport const BannerAction = ({\n variant = \"outline\",\n size = \"sm\",\n className,\n ...props\n}: BannerActionProps) => (\n \n);\n\nexport type BannerCloseProps = ComponentProps;\n\nexport const BannerClose = ({\n variant = \"ghost\",\n size = \"icon\",\n onClick,\n className,\n ...props\n}: BannerCloseProps) => {\n const { setShow } = useContext(BannerContext);\n\n const handleClick: MouseEventHandler = (e) => {\n setShow(false);\n onClick?.(e);\n };\n\n return (\n \n \n \n );\n};\n","target":"components/kibo-ui/banner/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"calendar","type":"registry:ui","title":"calendar","description":"The calendar view displays features on a grid calendar. Specifically it shows the end date of each feature, and groups features by day.","author":"Hayden Bleasel ","dependencies":["date-fns","jotai","lucide-react"],"devDependencies":[],"registryDependencies":["button","command","popover"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { getDay, getDaysInMonth, isSameDay } from \"date-fns\";\nimport { atom, useAtom } from \"jotai\";\nimport {\n Check,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronsUpDown,\n} from \"lucide-react\";\nimport {\n createContext,\n memo,\n type ReactNode,\n useCallback,\n useContext,\n useMemo,\n useState,\n} from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/components/ui/command\";\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { cn } from \"@/lib/utils\";\n\nexport type CalendarState = {\n month: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;\n year: number;\n};\n\nconst monthAtom = atom(\n new Date().getMonth() as CalendarState[\"month\"]\n);\nconst yearAtom = atom(new Date().getFullYear());\n\nexport const useCalendarMonth = () => useAtom(monthAtom);\nexport const useCalendarYear = () => useAtom(yearAtom);\n\ntype CalendarContextProps = {\n locale: Intl.LocalesArgument;\n startDay: number;\n};\n\nconst CalendarContext = createContext({\n locale: \"en-US\",\n startDay: 0,\n});\n\nexport type Status = {\n id: string;\n name: string;\n color: string;\n};\n\nexport type Feature = {\n id: string;\n name: string;\n startAt: Date;\n endAt: Date;\n status: Status;\n};\n\ntype ComboboxProps = {\n value: string;\n setValue: (value: string) => void;\n data: {\n value: string;\n label: string;\n }[];\n labels: {\n button: string;\n empty: string;\n search: string;\n };\n className?: string;\n};\n\nexport const monthsForLocale = (\n localeName: Intl.LocalesArgument,\n monthFormat: Intl.DateTimeFormatOptions[\"month\"] = \"long\"\n) => {\n const format = new Intl.DateTimeFormat(localeName, { month: monthFormat })\n .format;\n\n return [...new Array(12).keys()].map((m) =>\n format(new Date(Date.UTC(2021, m, 2)))\n );\n};\n\nexport const daysForLocale = (\n locale: Intl.LocalesArgument,\n startDay: number\n) => {\n const weekdays: string[] = [];\n const baseDate = new Date(2024, 0, startDay);\n\n for (let i = 0; i < 7; i++) {\n weekdays.push(\n new Intl.DateTimeFormat(locale, { weekday: \"short\" }).format(baseDate)\n );\n baseDate.setDate(baseDate.getDate() + 1);\n }\n\n return weekdays;\n};\n\nconst Combobox = ({\n value,\n setValue,\n data,\n labels,\n className,\n}: ComboboxProps) => {\n const [open, setOpen] = useState(false);\n\n return (\n \n \n \n {value\n ? data.find((item) => item.value === value)?.label\n : labels.button}\n \n \n \n \n {\n const label = data.find((item) => item.value === value)?.label;\n\n return label?.toLowerCase().includes(search.toLowerCase()) ? 1 : 0;\n }}\n >\n \n \n {labels.empty}\n \n {data.map((item) => (\n {\n setValue(currentValue === value ? \"\" : currentValue);\n setOpen(false);\n }}\n value={item.value}\n >\n \n {item.label}\n \n ))}\n \n \n \n \n \n );\n};\n\ntype OutOfBoundsDayProps = {\n day: number;\n};\n\nconst OutOfBoundsDay = ({ day }: OutOfBoundsDayProps) => (\n

\n {day}\n
\n);\n\nexport type CalendarBodyProps = {\n features: Feature[];\n children: (props: { feature: Feature }) => ReactNode;\n};\n\nexport const CalendarBody = ({ features, children }: CalendarBodyProps) => {\n const [month] = useCalendarMonth();\n const [year] = useCalendarYear();\n const { startDay } = useContext(CalendarContext);\n\n // Memoize expensive date calculations\n const currentMonthDate = useMemo(\n () => new Date(year, month, 1),\n [year, month]\n );\n const daysInMonth = useMemo(\n () => getDaysInMonth(currentMonthDate),\n [currentMonthDate]\n );\n const firstDay = useMemo(\n () => (getDay(currentMonthDate) - startDay + 7) % 7,\n [currentMonthDate, startDay]\n );\n\n // Memoize previous month calculations\n const prevMonthData = useMemo(() => {\n const prevMonth = month === 0 ? 11 : month - 1;\n const prevMonthYear = month === 0 ? year - 1 : year;\n const prevMonthDays = getDaysInMonth(new Date(prevMonthYear, prevMonth, 1));\n const prevMonthDaysArray = Array.from(\n { length: prevMonthDays },\n (_, i) => i + 1\n );\n return { prevMonthDays, prevMonthDaysArray };\n }, [month, year]);\n\n // Memoize next month calculations\n const nextMonthData = useMemo(() => {\n const nextMonth = month === 11 ? 0 : month + 1;\n const nextMonthYear = month === 11 ? year + 1 : year;\n const nextMonthDays = getDaysInMonth(new Date(nextMonthYear, nextMonth, 1));\n const nextMonthDaysArray = Array.from(\n { length: nextMonthDays },\n (_, i) => i + 1\n );\n return { nextMonthDaysArray };\n }, [month, year]);\n\n // Memoize features filtering by day to avoid recalculating on every render\n const featuresByDay = useMemo(() => {\n const result: { [day: number]: Feature[] } = {};\n for (let day = 1; day <= daysInMonth; day++) {\n result[day] = features.filter((feature) => {\n return isSameDay(new Date(feature.endAt), new Date(year, month, day));\n });\n }\n return result;\n }, [features, daysInMonth, year, month]);\n\n const days: ReactNode[] = [];\n\n for (let i = 0; i < firstDay; i++) {\n const day =\n prevMonthData.prevMonthDaysArray[\n prevMonthData.prevMonthDays - firstDay + i\n ];\n\n if (day) {\n days.push();\n }\n }\n\n for (let day = 1; day <= daysInMonth; day++) {\n const featuresForDay = featuresByDay[day] || [];\n\n days.push(\n \n {day}\n
\n {featuresForDay.slice(0, 3).map((feature) => children({ feature }))}\n
\n {featuresForDay.length > 3 && (\n \n +{featuresForDay.length - 3} more\n \n )}\n \n );\n }\n\n const remainingDays = 7 - ((firstDay + daysInMonth) % 7);\n if (remainingDays < 7) {\n for (let i = 0; i < remainingDays; i++) {\n const day = nextMonthData.nextMonthDaysArray[i];\n\n if (day) {\n days.push();\n }\n }\n }\n\n return (\n
\n {days.map((day, index) => (\n \n {day}\n
\n ))}\n \n );\n};\n\nexport type CalendarDatePickerProps = {\n className?: string;\n children: ReactNode;\n};\n\nexport const CalendarDatePicker = ({\n className,\n children,\n}: CalendarDatePickerProps) => (\n
{children}
\n);\n\nexport type CalendarMonthPickerProps = {\n className?: string;\n};\n\nexport const CalendarMonthPicker = ({\n className,\n}: CalendarMonthPickerProps) => {\n const [month, setMonth] = useCalendarMonth();\n const { locale } = useContext(CalendarContext);\n\n // Memoize month data to avoid recalculating date formatting\n const monthData = useMemo(() => {\n return monthsForLocale(locale).map((month, index) => ({\n value: index.toString(),\n label: month,\n }));\n }, [locale]);\n\n return (\n \n setMonth(Number.parseInt(value, 10) as CalendarState[\"month\"])\n }\n value={month.toString()}\n />\n );\n};\n\nexport type CalendarYearPickerProps = {\n className?: string;\n start: number;\n end: number;\n};\n\nexport const CalendarYearPicker = ({\n className,\n start,\n end,\n}: CalendarYearPickerProps) => {\n const [year, setYear] = useCalendarYear();\n\n return (\n ({\n value: (start + i).toString(),\n label: (start + i).toString(),\n }))}\n labels={{\n button: \"Select year\",\n empty: \"No year found\",\n search: \"Search year\",\n }}\n setValue={(value) => setYear(Number.parseInt(value, 10))}\n value={year.toString()}\n />\n );\n};\n\nexport type CalendarDatePaginationProps = {\n className?: string;\n};\n\nexport const CalendarDatePagination = ({\n className,\n}: CalendarDatePaginationProps) => {\n const [month, setMonth] = useCalendarMonth();\n const [year, setYear] = useCalendarYear();\n\n const handlePreviousMonth = useCallback(() => {\n if (month === 0) {\n setMonth(11);\n setYear(year - 1);\n } else {\n setMonth((month - 1) as CalendarState[\"month\"]);\n }\n }, [month, year, setMonth, setYear]);\n\n const handleNextMonth = useCallback(() => {\n if (month === 11) {\n setMonth(0);\n setYear(year + 1);\n } else {\n setMonth((month + 1) as CalendarState[\"month\"]);\n }\n }, [month, year, setMonth, setYear]);\n\n return (\n
\n \n \n
\n );\n};\n\nexport type CalendarDateProps = {\n children: ReactNode;\n};\n\nexport const CalendarDate = ({ children }: CalendarDateProps) => (\n
{children}
\n);\n\nexport type CalendarHeaderProps = {\n className?: string;\n};\n\nexport const CalendarHeader = ({ className }: CalendarHeaderProps) => {\n const { locale, startDay } = useContext(CalendarContext);\n\n // Memoize days data to avoid recalculating date formatting\n const daysData = useMemo(() => {\n return daysForLocale(locale, startDay);\n }, [locale, startDay]);\n\n return (\n
\n {daysData.map((day) => (\n
\n {day}\n
\n ))}\n
\n );\n};\n\nexport type CalendarItemProps = {\n feature: Feature;\n className?: string;\n};\n\nexport const CalendarItem = memo(\n ({ feature, className }: CalendarItemProps) => (\n
\n \n {feature.name}\n
\n )\n);\n\nCalendarItem.displayName = \"CalendarItem\";\n\nexport type CalendarProviderProps = {\n locale?: Intl.LocalesArgument;\n startDay?: number;\n children: ReactNode;\n className?: string;\n};\n\nexport const CalendarProvider = ({\n locale = \"en-US\",\n startDay = 0,\n children,\n className,\n}: CalendarProviderProps) => (\n \n
{children}
\n \n);\n","target":"components/kibo-ui/calendar/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"choicebox","type":"registry:ui","title":"choicebox","description":"Choiceboxes are a great way to show radio or checkbox options with a card style.","author":"Hayden Bleasel ","dependencies":["lucide-react","radix-ui"],"devDependencies":[],"registryDependencies":["field"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n RadioGroup,\n RadioGroupItem,\n} from \"@repo/shadcn-ui/components/ui/radio-group\";\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport {\n type ComponentProps,\n createContext,\n type HTMLAttributes,\n useContext,\n} from \"react\";\nimport {\n Field,\n FieldContent,\n FieldDescription,\n FieldLabel,\n FieldTitle,\n} from \"@/components/ui/field\";\n\nexport type ChoiceboxProps = ComponentProps;\n\nexport const Choicebox = ({ className, ...props }: ChoiceboxProps) => (\n \n);\n\ntype ChoiceboxItemContextValue = {\n value: ChoiceboxItemProps[\"value\"];\n id?: ChoiceboxItemProps[\"id\"];\n};\n\nconst ChoiceboxItemContext = createContext(\n null\n);\n\nconst useChoiceboxItemContext = () => {\n const context = useContext(ChoiceboxItemContext);\n\n if (!context) {\n throw new Error(\n \"useChoiceboxItemContext must be used within a ChoiceboxItem\"\n );\n }\n\n return context;\n};\n\nexport type ChoiceboxItemProps = ComponentProps;\n\nexport const ChoiceboxItem = ({\n className,\n children,\n value,\n id,\n}: ChoiceboxItemProps) => (\n \n \n \n {children}\n \n \n \n);\n\nexport type ChoiceboxItemHeaderProps = ComponentProps;\n\nexport const ChoiceboxItemHeader = ({\n className,\n ...props\n}: ChoiceboxItemHeaderProps) => (\n \n);\n\nexport type ChoiceboxItemTitleProps = ComponentProps;\n\nexport const ChoiceboxItemTitle = ({\n className,\n ...props\n}: ChoiceboxItemTitleProps) => ;\n\nexport type ChoiceboxItemSubtitleProps = HTMLAttributes;\n\nexport const ChoiceboxItemSubtitle = ({\n className,\n ...props\n}: ChoiceboxItemSubtitleProps) => (\n \n);\n\nexport type ChoiceboxItemDescriptionProps = ComponentProps<\n typeof FieldDescription\n>;\n\nexport const ChoiceboxItemDescription = ({\n className,\n ...props\n}: ChoiceboxItemDescriptionProps) => (\n \n);\n\nexport type ChoiceboxIndicatorProps = Partial<\n ComponentProps\n>;\n\nexport const ChoiceboxIndicator = (props: ChoiceboxIndicatorProps) => {\n const context = useChoiceboxItemContext();\n\n return ;\n};\n","target":"components/kibo-ui/choicebox/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"code-block","type":"registry:ui","title":"code-block","description":"Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.","author":"Hayden Bleasel ","dependencies":["@radix-ui/react-use-controllable-state","@shikijs/transformers","lucide-react","react-icons","shiki"],"devDependencies":[],"registryDependencies":["button","select"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport {\n transformerNotationDiff,\n transformerNotationErrorLevel,\n transformerNotationFocus,\n transformerNotationHighlight,\n transformerNotationWordHighlight,\n} from \"@shikijs/transformers\";\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\nimport type {\n ComponentProps,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n} from \"react\";\nimport {\n cloneElement,\n createContext,\n useContext,\n useEffect,\n useState,\n} from \"react\";\nimport type { IconType } from \"react-icons\";\nimport {\n SiAstro,\n SiBiome,\n SiBower,\n SiBun,\n SiC,\n SiCircleci,\n SiCoffeescript,\n SiCplusplus,\n SiCss3,\n SiCssmodules,\n SiDart,\n SiDocker,\n SiDocusaurus,\n SiDotenv,\n SiEditorconfig,\n SiEslint,\n SiGatsby,\n SiGitignoredotio,\n SiGnubash,\n SiGo,\n SiGraphql,\n SiGrunt,\n SiGulp,\n SiHandlebarsdotjs,\n SiHtml5,\n SiJavascript,\n SiJest,\n SiJson,\n SiLess,\n SiMarkdown,\n SiMdx,\n SiMintlify,\n SiMocha,\n SiMysql,\n SiNextdotjs,\n SiPerl,\n SiPhp,\n SiPostcss,\n SiPrettier,\n SiPrisma,\n SiPug,\n SiPython,\n SiR,\n SiReact,\n SiReadme,\n SiRedis,\n SiRemix,\n SiRive,\n SiRollupdotjs,\n SiRuby,\n SiSanity,\n SiSass,\n SiScala,\n SiSentry,\n SiShadcnui,\n SiStorybook,\n SiStylelint,\n SiSublimetext,\n SiSvelte,\n SiSvg,\n SiSwift,\n SiTailwindcss,\n SiToml,\n SiTypescript,\n SiVercel,\n SiVite,\n SiVuedotjs,\n SiWebassembly,\n} from \"react-icons/si\";\nimport {\n type BundledLanguage,\n type CodeOptionsMultipleThemes,\n codeToHtml,\n} from \"shiki\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { cn } from \"@/lib/utils\";\n\nexport type { BundledLanguage } from \"shiki\";\n\nconst filenameIconMap = {\n \".env\": SiDotenv,\n \"*.astro\": SiAstro,\n \"biome.json\": SiBiome,\n \".bowerrc\": SiBower,\n \"bun.lockb\": SiBun,\n \"*.c\": SiC,\n \"*.cpp\": SiCplusplus,\n \".circleci/config.yml\": SiCircleci,\n \"*.coffee\": SiCoffeescript,\n \"*.module.css\": SiCssmodules,\n \"*.css\": SiCss3,\n \"*.dart\": SiDart,\n Dockerfile: SiDocker,\n \"docusaurus.config.js\": SiDocusaurus,\n \".editorconfig\": SiEditorconfig,\n \".eslintrc\": SiEslint,\n \"eslint.config.*\": SiEslint,\n \"gatsby-config.*\": SiGatsby,\n \".gitignore\": SiGitignoredotio,\n \"*.go\": SiGo,\n \"*.graphql\": SiGraphql,\n \"*.sh\": SiGnubash,\n \"Gruntfile.*\": SiGrunt,\n \"gulpfile.*\": SiGulp,\n \"*.hbs\": SiHandlebarsdotjs,\n \"*.html\": SiHtml5,\n \"*.js\": SiJavascript,\n \"*.json\": SiJson,\n \"*.test.js\": SiJest,\n \"*.less\": SiLess,\n \"*.md\": SiMarkdown,\n \"*.mdx\": SiMdx,\n \"mintlify.json\": SiMintlify,\n \"mocha.opts\": SiMocha,\n \"*.mustache\": SiHandlebarsdotjs,\n \"*.sql\": SiMysql,\n \"next.config.*\": SiNextdotjs,\n \"*.pl\": SiPerl,\n \"*.php\": SiPhp,\n \"postcss.config.*\": SiPostcss,\n \"prettier.config.*\": SiPrettier,\n \"*.prisma\": SiPrisma,\n \"*.pug\": SiPug,\n \"*.py\": SiPython,\n \"*.r\": SiR,\n \"*.rb\": SiRuby,\n \"*.jsx\": SiReact,\n \"*.tsx\": SiReact,\n \"readme.md\": SiReadme,\n \"*.rdb\": SiRedis,\n \"remix.config.*\": SiRemix,\n \"*.riv\": SiRive,\n \"rollup.config.*\": SiRollupdotjs,\n \"sanity.config.*\": SiSanity,\n \"*.sass\": SiSass,\n \"*.scss\": SiSass,\n \"*.sc\": SiScala,\n \"*.scala\": SiScala,\n \"sentry.client.config.*\": SiSentry,\n \"components.json\": SiShadcnui,\n \"storybook.config.*\": SiStorybook,\n \"stylelint.config.*\": SiStylelint,\n \".sublime-settings\": SiSublimetext,\n \"*.svelte\": SiSvelte,\n \"*.svg\": SiSvg,\n \"*.swift\": SiSwift,\n \"tailwind.config.*\": SiTailwindcss,\n \"*.toml\": SiToml,\n \"*.ts\": SiTypescript,\n \"vercel.json\": SiVercel,\n \"vite.config.*\": SiVite,\n \"*.vue\": SiVuedotjs,\n \"*.wasm\": SiWebassembly,\n};\n\nconst lineNumberClassNames = cn(\n \"[&_code]:[counter-reset:line]\",\n \"[&_code]:[counter-increment:line_0]\",\n \"[&_.line]:before:content-[counter(line)]\",\n \"[&_.line]:before:inline-block\",\n \"[&_.line]:before:[counter-increment:line]\",\n \"[&_.line]:before:w-4\",\n \"[&_.line]:before:mr-4\",\n \"[&_.line]:before:text-[13px]\",\n \"[&_.line]:before:text-right\",\n \"[&_.line]:before:text-muted-foreground/50\",\n \"[&_.line]:before:font-mono\",\n \"[&_.line]:before:select-none\"\n);\n\nconst darkModeClassNames = cn(\n \"dark:[&_.shiki]:!text-[var(--shiki-dark)]\",\n // \"dark:[&_.shiki]:!bg-[var(--shiki-dark-bg)]\",\n \"dark:[&_.shiki]:![font-style:var(--shiki-dark-font-style)]\",\n \"dark:[&_.shiki]:![font-weight:var(--shiki-dark-font-weight)]\",\n \"dark:[&_.shiki]:![text-decoration:var(--shiki-dark-text-decoration)]\",\n \"dark:[&_.shiki_span]:!text-[var(--shiki-dark)]\",\n \"dark:[&_.shiki_span]:![font-style:var(--shiki-dark-font-style)]\",\n \"dark:[&_.shiki_span]:![font-weight:var(--shiki-dark-font-weight)]\",\n \"dark:[&_.shiki_span]:![text-decoration:var(--shiki-dark-text-decoration)]\"\n);\n\nconst lineHighlightClassNames = cn(\n \"[&_.line.highlighted]:bg-blue-50\",\n \"[&_.line.highlighted]:after:bg-blue-500\",\n \"[&_.line.highlighted]:after:absolute\",\n \"[&_.line.highlighted]:after:left-0\",\n \"[&_.line.highlighted]:after:top-0\",\n \"[&_.line.highlighted]:after:bottom-0\",\n \"[&_.line.highlighted]:after:w-0.5\",\n \"dark:[&_.line.highlighted]:!bg-blue-500/10\"\n);\n\nconst lineDiffClassNames = cn(\n \"[&_.line.diff]:after:absolute\",\n \"[&_.line.diff]:after:left-0\",\n \"[&_.line.diff]:after:top-0\",\n \"[&_.line.diff]:after:bottom-0\",\n \"[&_.line.diff]:after:w-0.5\",\n \"[&_.line.diff.add]:bg-emerald-50\",\n \"[&_.line.diff.add]:after:bg-emerald-500\",\n \"[&_.line.diff.remove]:bg-rose-50\",\n \"[&_.line.diff.remove]:after:bg-rose-500\",\n \"dark:[&_.line.diff.add]:!bg-emerald-500/10\",\n \"dark:[&_.line.diff.remove]:!bg-rose-500/10\"\n);\n\nconst lineFocusedClassNames = cn(\n \"[&_code:has(.focused)_.line]:blur-[2px]\",\n \"[&_code:has(.focused)_.line.focused]:blur-none\"\n);\n\nconst wordHighlightClassNames = cn(\n \"[&_.highlighted-word]:bg-blue-50\",\n \"dark:[&_.highlighted-word]:!bg-blue-500/10\"\n);\n\nconst codeBlockClassName = cn(\n \"mt-0 bg-background text-sm\",\n \"[&_pre]:py-4\",\n // \"[&_.shiki]:!bg-[var(--shiki-bg)]\",\n \"[&_.shiki]:!bg-transparent\",\n \"[&_code]:w-full\",\n \"[&_code]:grid\",\n \"[&_code]:overflow-x-auto\",\n \"[&_code]:bg-transparent\",\n \"[&_.line]:px-4\",\n \"[&_.line]:w-full\",\n \"[&_.line]:relative\"\n);\n\nconst highlight = (\n html: string,\n language?: BundledLanguage,\n themes?: CodeOptionsMultipleThemes[\"themes\"]\n) =>\n codeToHtml(html, {\n lang: language ?? \"typescript\",\n themes: themes ?? {\n light: \"github-light\",\n dark: \"github-dark-default\",\n },\n transformers: [\n transformerNotationDiff({\n matchAlgorithm: \"v3\",\n }),\n transformerNotationHighlight({\n matchAlgorithm: \"v3\",\n }),\n transformerNotationWordHighlight({\n matchAlgorithm: \"v3\",\n }),\n transformerNotationFocus({\n matchAlgorithm: \"v3\",\n }),\n transformerNotationErrorLevel({\n matchAlgorithm: \"v3\",\n }),\n ],\n });\n\ntype CodeBlockData = {\n language: string;\n filename: string;\n code: string;\n};\n\ntype CodeBlockContextType = {\n value: string | undefined;\n onValueChange: ((value: string) => void) | undefined;\n data: CodeBlockData[];\n};\n\nconst CodeBlockContext = createContext({\n value: undefined,\n onValueChange: undefined,\n data: [],\n});\n\nexport type CodeBlockProps = HTMLAttributes & {\n defaultValue?: string;\n value?: string;\n onValueChange?: (value: string) => void;\n data: CodeBlockData[];\n};\n\nexport const CodeBlock = ({\n value: controlledValue,\n onValueChange: controlledOnValueChange,\n defaultValue,\n className,\n data,\n ...props\n}: CodeBlockProps) => {\n const [value, onValueChange] = useControllableState({\n defaultProp: defaultValue ?? \"\",\n prop: controlledValue,\n onChange: controlledOnValueChange,\n });\n\n return (\n \n \n \n );\n};\n\nexport type CodeBlockHeaderProps = HTMLAttributes;\n\nexport const CodeBlockHeader = ({\n className,\n ...props\n}: CodeBlockHeaderProps) => (\n \n);\n\nexport type CodeBlockFilesProps = Omit<\n HTMLAttributes,\n \"children\"\n> & {\n children: (item: CodeBlockData) => ReactNode;\n};\n\nexport const CodeBlockFiles = ({\n className,\n children,\n ...props\n}: CodeBlockFilesProps) => {\n const { data } = useContext(CodeBlockContext);\n\n return (\n \n {data.map(children)}\n \n );\n};\n\nexport type CodeBlockFilenameProps = HTMLAttributes & {\n icon?: IconType;\n value?: string;\n};\n\nexport const CodeBlockFilename = ({\n className,\n icon,\n value,\n children,\n ...props\n}: CodeBlockFilenameProps) => {\n const { value: activeValue } = useContext(CodeBlockContext);\n const defaultIcon = Object.entries(filenameIconMap).find(([pattern]) => {\n const regex = new RegExp(\n `^${pattern.replace(/\\\\/g, \"\\\\\\\\\").replace(/\\./g, \"\\\\.\").replace(/\\*/g, \".*\")}$`\n );\n return regex.test(children as string);\n })?.[1];\n const Icon = icon ?? defaultIcon;\n\n if (value !== activeValue) {\n return null;\n }\n\n return (\n \n {Icon && }\n {children}\n \n );\n};\n\nexport type CodeBlockSelectProps = ComponentProps;\n\nexport const CodeBlockSelect = (props: CodeBlockSelectProps) => {\n const { value, onValueChange } = useContext(CodeBlockContext);\n\n return \n \n \n \n \n {formats.map((format) => (\n \n {format.toUpperCase()}\n \n ))}\n \n \n );\n};\n\ntype PercentageInputProps = ComponentProps;\n\nconst PercentageInput = ({ className, ...props }: PercentageInputProps) => {\n return (\n
\n \n \n %\n \n
\n );\n};\n\nexport type ColorPickerFormatProps = HTMLAttributes;\n\nexport const ColorPickerFormat = ({\n className,\n ...props\n}: ColorPickerFormatProps) => {\n const { hue, saturation, lightness, alpha, mode } = useColorPicker();\n const color = Color.hsl(hue, saturation, lightness, alpha / 100);\n\n if (mode === \"hex\") {\n const hex = color.hex();\n\n return (\n \n \n \n \n );\n }\n\n if (mode === \"rgb\") {\n const rgb = color\n .rgb()\n .array()\n .map((value) => Math.round(value));\n\n return (\n \n {rgb.map((value, index) => (\n \n ))}\n \n \n );\n }\n\n if (mode === \"css\") {\n const rgb = color\n .rgb()\n .array()\n .map((value) => Math.round(value));\n\n return (\n
\n \n
\n );\n }\n\n if (mode === \"hsl\") {\n const hsl = color\n .hsl()\n .array()\n .map((value) => Math.round(value));\n\n return (\n \n {hsl.map((value, index) => (\n \n ))}\n \n \n );\n }\n\n return null;\n};\n","target":"components/kibo-ui/color-picker/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"combobox","type":"registry:ui","title":"combobox","description":"Autocomplete input and command palette with a list of suggestions.","author":"Hayden Bleasel ","dependencies":["@radix-ui/react-use-controllable-state","lucide-react"],"devDependencies":[],"registryDependencies":["button","command","popover"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { ChevronsUpDownIcon, PlusIcon } from \"lucide-react\";\nimport {\n type ComponentProps,\n createContext,\n type ReactNode,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n} from \"@/components/ui/command\";\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { cn } from \"@/lib/utils\";\n\ntype ComboboxData = {\n label: string;\n value: string;\n};\n\ntype ComboboxContextType = {\n data: ComboboxData[];\n type: string;\n value: string;\n onValueChange: (value: string) => void;\n open: boolean;\n onOpenChange: (open: boolean) => void;\n width: number;\n setWidth: (width: number) => void;\n inputValue: string;\n setInputValue: (value: string) => void;\n};\n\nconst ComboboxContext = createContext({\n data: [],\n type: \"item\",\n value: \"\",\n onValueChange: () => {},\n open: false,\n onOpenChange: () => {},\n width: 200,\n setWidth: () => {},\n inputValue: \"\",\n setInputValue: () => {},\n});\n\nexport type ComboboxProps = ComponentProps & {\n data: ComboboxData[];\n type: string;\n defaultValue?: string;\n value?: string;\n onValueChange?: (value: string) => void;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n};\n\nexport const Combobox = ({\n data,\n type,\n defaultValue,\n value: controlledValue,\n onValueChange: controlledOnValueChange,\n defaultOpen = false,\n open: controlledOpen,\n onOpenChange: controlledOnOpenChange,\n ...props\n}: ComboboxProps) => {\n const [value, onValueChange] = useControllableState({\n defaultProp: defaultValue ?? \"\",\n prop: controlledValue,\n onChange: controlledOnValueChange,\n });\n const [open, onOpenChange] = useControllableState({\n defaultProp: defaultOpen,\n prop: controlledOpen,\n onChange: controlledOnOpenChange,\n });\n const [width, setWidth] = useState(200);\n const [inputValue, setInputValue] = useState(\"\");\n\n return (\n \n \n \n );\n};\n\nexport type ComboboxTriggerProps = ComponentProps;\n\nexport const ComboboxTrigger = ({\n children,\n ...props\n}: ComboboxTriggerProps) => {\n const { value, data, type, setWidth } = useContext(ComboboxContext);\n const ref = useRef(null);\n\n useEffect(() => {\n // Create a ResizeObserver to detect width changes\n const resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n const newWidth = (entry.target as HTMLElement).offsetWidth;\n if (newWidth) {\n setWidth?.(newWidth);\n }\n }\n });\n\n if (ref.current) {\n resizeObserver.observe(ref.current);\n }\n\n // Clean up the observer when component unmounts\n return () => {\n resizeObserver.disconnect();\n };\n }, [setWidth]);\n\n return (\n \n \n \n );\n};\n\nexport type ComboboxContentProps = ComponentProps & {\n popoverOptions?: ComponentProps;\n};\n\nexport const ComboboxContent = ({\n className,\n popoverOptions,\n ...props\n}: ComboboxContentProps) => {\n const { width } = useContext(ComboboxContext);\n\n return (\n \n \n \n );\n};\n\nexport type ComboboxInputProps = ComponentProps & {\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n};\n\nexport const ComboboxInput = ({\n value: controlledValue,\n defaultValue,\n onValueChange: controlledOnValueChange,\n ...props\n}: ComboboxInputProps) => {\n const { type, inputValue, setInputValue } = useContext(ComboboxContext);\n\n const [value, onValueChange] = useControllableState({\n defaultProp: defaultValue ?? inputValue,\n prop: controlledValue,\n onChange: (newValue) => {\n // Sync with context state\n setInputValue(newValue);\n // Call external onChange if provided\n controlledOnValueChange?.(newValue);\n },\n });\n\n return (\n \n );\n};\n\nexport type ComboboxListProps = ComponentProps;\n\nexport const ComboboxList = (props: ComboboxListProps) => (\n \n);\n\nexport type ComboboxEmptyProps = ComponentProps;\n\nexport const ComboboxEmpty = ({ children, ...props }: ComboboxEmptyProps) => {\n const { type } = useContext(ComboboxContext);\n\n return (\n {children ?? `No ${type} found.`}\n );\n};\n\nexport type ComboboxGroupProps = ComponentProps;\n\nexport const ComboboxGroup = (props: ComboboxGroupProps) => (\n \n);\n\nexport type ComboboxItemProps = ComponentProps;\n\nexport const ComboboxItem = (props: ComboboxItemProps) => {\n const { onValueChange, onOpenChange } = useContext(ComboboxContext);\n\n return (\n {\n onValueChange(currentValue);\n onOpenChange(false);\n }}\n {...props}\n />\n );\n};\n\nexport type ComboboxSeparatorProps = ComponentProps;\n\nexport const ComboboxSeparator = (props: ComboboxSeparatorProps) => (\n \n);\n\nexport type ComboboxCreateNewProps = {\n onCreateNew: (value: string) => void;\n children?: (inputValue: string) => ReactNode;\n className?: string;\n};\n\nexport const ComboboxCreateNew = ({\n onCreateNew,\n children,\n className,\n}: ComboboxCreateNewProps) => {\n const { inputValue, type, onValueChange, onOpenChange } =\n useContext(ComboboxContext);\n\n if (!inputValue.trim()) {\n return null;\n }\n\n const handleCreateNew = () => {\n onCreateNew(inputValue.trim());\n onValueChange(inputValue.trim());\n onOpenChange(false);\n };\n\n return (\n \n {children ? (\n children(inputValue)\n ) : (\n <>\n \n {`Create new ${type}: \"${inputValue}\"`}\n \n )}\n \n );\n};\n","target":"components/kibo-ui/combobox/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"comparison","type":"registry:ui","title":"comparison","description":"A slider-based component for comparing two items in an overlay.","author":"Hayden Bleasel ","dependencies":["lucide-react","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { GripVerticalIcon } from \"lucide-react\";\nimport {\n type MotionValue,\n motion,\n useMotionValue,\n useSpring,\n useTransform,\n} from \"motion/react\";\nimport {\n type ComponentProps,\n createContext,\n type HTMLAttributes,\n type MouseEventHandler,\n type ReactNode,\n type TouchEventHandler,\n useContext,\n useState,\n} from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype ImageComparisonContextType = {\n sliderPosition: number;\n setSliderPosition: (pos: number) => void;\n motionSliderPosition: MotionValue;\n mode: \"hover\" | \"drag\";\n};\n\nconst ImageComparisonContext = createContext<\n ImageComparisonContextType | undefined\n>(undefined);\n\nconst useImageComparisonContext = () => {\n const context = useContext(ImageComparisonContext);\n\n if (!context) {\n throw new Error(\n \"useImageComparisonContext must be used within a ImageComparison\"\n );\n }\n\n return context;\n};\n\nexport type ComparisonProps = HTMLAttributes & {\n mode?: \"hover\" | \"drag\";\n onDragStart?: () => void;\n onDragEnd?: () => void;\n};\n\nexport const Comparison = ({\n className,\n mode = \"drag\",\n onDragStart,\n onDragEnd,\n ...props\n}: ComparisonProps) => {\n const [isDragging, setIsDragging] = useState(false);\n const motionValue = useMotionValue(50);\n const motionSliderPosition = useSpring(motionValue, {\n bounce: 0,\n duration: 0,\n });\n const [sliderPosition, setSliderPosition] = useState(50);\n\n const handleDrag = (domRect: DOMRect, clientX: number) => {\n if (!isDragging && mode === \"drag\") {\n return;\n }\n\n const x = clientX - domRect.left;\n const percentage = Math.min(Math.max((x / domRect.width) * 100, 0), 100);\n motionValue.set(percentage);\n setSliderPosition(percentage);\n };\n\n const handleMouseDrag: MouseEventHandler = (event) => {\n if (!event) {\n return;\n }\n\n const containerRect = event.currentTarget.getBoundingClientRect();\n\n handleDrag(containerRect, event.clientX);\n };\n\n const handleTouchDrag: TouchEventHandler = (event) => {\n if (!event) {\n return;\n }\n\n const containerRect = event.currentTarget.getBoundingClientRect();\n const touches = Array.from(event.touches);\n\n handleDrag(containerRect, touches.at(0)?.clientX ?? 0);\n };\n\n const handleDragStart = () => {\n if (mode === \"drag\") {\n setIsDragging(true);\n onDragStart?.();\n }\n };\n\n const handleDragEnd = () => {\n if (mode === \"drag\") {\n setIsDragging(false);\n onDragEnd?.();\n }\n };\n\n return (\n \n \n \n );\n};\n\nexport type ComparisonItemProps = ComponentProps & {\n position: \"left\" | \"right\";\n};\n\nexport const ComparisonItem = ({\n className,\n position,\n ...props\n}: ComparisonItemProps) => {\n const { motionSliderPosition } = useImageComparisonContext();\n const leftClipPath = useTransform(\n motionSliderPosition,\n (value) => `inset(0 0 0 ${value}%)`\n );\n const rightClipPath = useTransform(\n motionSliderPosition,\n (value) => `inset(0 ${100 - value}% 0 0)`\n );\n\n return (\n \n );\n};\n\nexport type ComparisonHandleProps = ComponentProps & {\n children?: ReactNode;\n};\n\nexport const ComparisonHandle = ({\n className,\n children,\n ...props\n}: ComparisonHandleProps) => {\n const { motionSliderPosition, mode } = useImageComparisonContext();\n const left = useTransform(motionSliderPosition, (value) => `${value}%`);\n\n return (\n \n {children ?? (\n <>\n
\n {mode === \"drag\" && (\n
\n \n
\n )}\n \n )}\n \n );\n};\n","target":"components/kibo-ui/comparison/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"contribution-graph","type":"registry:ui","title":"contribution-graph","description":"A GitHub-style contribution graph component that displays activity levels over time.","author":"Hayden Bleasel ","dependencies":["date-fns"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport type { Day as WeekDay } from \"date-fns\";\nimport {\n differenceInCalendarDays,\n eachDayOfInterval,\n formatISO,\n getDay,\n getMonth,\n getYear,\n nextDay,\n parseISO,\n subWeeks,\n} from \"date-fns\";\nimport {\n type CSSProperties,\n createContext,\n Fragment,\n type HTMLAttributes,\n type ReactNode,\n useContext,\n useMemo,\n} from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type Activity = {\n date: string;\n count: number;\n level: number;\n};\n\ntype Week = Array;\n\nexport type Labels = {\n months?: string[];\n weekdays?: string[];\n totalCount?: string;\n legend?: {\n less?: string;\n more?: string;\n };\n};\n\ntype MonthLabel = {\n weekIndex: number;\n label: string;\n};\n\nconst DEFAULT_MONTH_LABELS = [\n \"Jan\",\n \"Feb\",\n \"Mar\",\n \"Apr\",\n \"May\",\n \"Jun\",\n \"Jul\",\n \"Aug\",\n \"Sep\",\n \"Oct\",\n \"Nov\",\n \"Dec\",\n];\n\nconst DEFAULT_LABELS: Labels = {\n months: DEFAULT_MONTH_LABELS,\n weekdays: [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"],\n totalCount: \"{{count}} activities in {{year}}\",\n legend: {\n less: \"Less\",\n more: \"More\",\n },\n};\n\ntype ContributionGraphContextType = {\n data: Activity[];\n weeks: Week[];\n blockMargin: number;\n blockRadius: number;\n blockSize: number;\n fontSize: number;\n labels: Labels;\n labelHeight: number;\n maxLevel: number;\n totalCount: number;\n weekStart: WeekDay;\n year: number;\n width: number;\n height: number;\n};\n\nconst ContributionGraphContext =\n createContext(null);\n\nconst useContributionGraph = () => {\n const context = useContext(ContributionGraphContext);\n\n if (!context) {\n throw new Error(\n \"ContributionGraph components must be used within a ContributionGraph\"\n );\n }\n\n return context;\n};\n\nconst fillHoles = (activities: Activity[]): Activity[] => {\n if (activities.length === 0) {\n return [];\n }\n\n // Sort activities by date to ensure correct date range\n const sortedActivities = [...activities].sort((a, b) =>\n a.date.localeCompare(b.date)\n );\n\n const calendar = new Map(\n activities.map((a) => [a.date, a])\n );\n\n const firstActivity = sortedActivities[0] as Activity;\n const lastActivity = sortedActivities.at(-1);\n\n if (!lastActivity) {\n return [];\n }\n\n return eachDayOfInterval({\n start: parseISO(firstActivity.date),\n end: parseISO(lastActivity.date),\n }).map((day) => {\n const date = formatISO(day, { representation: \"date\" });\n\n if (calendar.has(date)) {\n return calendar.get(date) as Activity;\n }\n\n return {\n date,\n count: 0,\n level: 0,\n };\n });\n};\n\nconst groupByWeeks = (\n activities: Activity[],\n weekStart: WeekDay = 0\n): Week[] => {\n if (activities.length === 0) {\n return [];\n }\n\n const normalizedActivities = fillHoles(activities);\n const firstActivity = normalizedActivities[0] as Activity;\n const firstDate = parseISO(firstActivity.date);\n const firstCalendarDate =\n getDay(firstDate) === weekStart\n ? firstDate\n : subWeeks(nextDay(firstDate, weekStart), 1);\n\n const paddedActivities = [\n ...(new Array(differenceInCalendarDays(firstDate, firstCalendarDate)).fill(\n undefined\n ) as Activity[]),\n ...normalizedActivities,\n ];\n\n const numberOfWeeks = Math.ceil(paddedActivities.length / 7);\n\n return new Array(numberOfWeeks)\n .fill(undefined)\n .map((_, weekIndex) =>\n paddedActivities.slice(weekIndex * 7, weekIndex * 7 + 7)\n );\n};\n\nconst getMonthLabels = (\n weeks: Week[],\n monthNames: string[] = DEFAULT_MONTH_LABELS\n): MonthLabel[] => {\n return weeks\n .reduce((labels, week, weekIndex) => {\n const firstActivity = week.find((activity) => activity !== undefined);\n\n if (!firstActivity) {\n throw new Error(\n `Unexpected error: Week ${weekIndex + 1} is empty: [${week}].`\n );\n }\n\n const month = monthNames[getMonth(parseISO(firstActivity.date))];\n\n if (!month) {\n const monthName = new Date(firstActivity.date).toLocaleString(\"en-US\", {\n month: \"short\",\n });\n throw new Error(\n `Unexpected error: undefined month label for ${monthName}.`\n );\n }\n\n const prevLabel = labels.at(-1);\n\n if (weekIndex === 0 || !prevLabel || prevLabel.label !== month) {\n return labels.concat({ weekIndex, label: month });\n }\n\n return labels;\n }, [])\n .filter(({ weekIndex }, index, labels) => {\n const minWeeks = 3;\n\n if (index === 0) {\n return labels[1] && labels[1].weekIndex - weekIndex >= minWeeks;\n }\n\n if (index === labels.length - 1) {\n return weeks.slice(weekIndex).length >= minWeeks;\n }\n\n return true;\n });\n};\n\nexport type ContributionGraphProps = HTMLAttributes & {\n data: Activity[];\n blockMargin?: number;\n blockRadius?: number;\n blockSize?: number;\n fontSize?: number;\n labels?: Labels;\n maxLevel?: number;\n style?: CSSProperties;\n totalCount?: number;\n weekStart?: WeekDay;\n children: ReactNode;\n className?: string;\n};\n\nexport const ContributionGraph = ({\n data,\n blockMargin = 4,\n blockRadius = 2,\n blockSize = 12,\n fontSize = 14,\n labels: labelsProp = undefined,\n maxLevel: maxLevelProp = 4,\n style = {},\n totalCount: totalCountProp = undefined,\n weekStart = 0,\n className,\n ...props\n}: ContributionGraphProps) => {\n const maxLevel = Math.max(1, maxLevelProp);\n const weeks = useMemo(() => groupByWeeks(data, weekStart), [data, weekStart]);\n const LABEL_MARGIN = 8;\n\n const labels = { ...DEFAULT_LABELS, ...labelsProp };\n const labelHeight = fontSize + LABEL_MARGIN;\n\n const year =\n data.length > 0\n ? getYear(parseISO(data[0].date))\n : new Date().getFullYear();\n\n const totalCount =\n typeof totalCountProp === \"number\"\n ? totalCountProp\n : data.reduce((sum, activity) => sum + activity.count, 0);\n\n const width = weeks.length * (blockSize + blockMargin) - blockMargin;\n const height = labelHeight + (blockSize + blockMargin) * 7 - blockMargin;\n\n if (data.length === 0) {\n return null;\n }\n\n return (\n \n \n \n );\n};\n\nexport type ContributionGraphBlockProps = HTMLAttributes & {\n activity: Activity;\n dayIndex: number;\n weekIndex: number;\n};\n\nexport const ContributionGraphBlock = ({\n activity,\n dayIndex,\n weekIndex,\n className,\n ...props\n}: ContributionGraphBlockProps) => {\n const { blockSize, blockMargin, blockRadius, labelHeight, maxLevel } =\n useContributionGraph();\n\n if (activity.level < 0 || activity.level > maxLevel) {\n throw new RangeError(\n `Provided activity level ${activity.level} for ${activity.date} is out of range. It must be between 0 and ${maxLevel}.`\n );\n }\n\n return (\n \n );\n};\n\nexport type ContributionGraphCalendarProps = Omit<\n HTMLAttributes,\n \"children\"\n> & {\n hideMonthLabels?: boolean;\n className?: string;\n children: (props: {\n activity: Activity;\n dayIndex: number;\n weekIndex: number;\n }) => ReactNode;\n};\n\nexport const ContributionGraphCalendar = ({\n hideMonthLabels = false,\n className,\n children,\n ...props\n}: ContributionGraphCalendarProps) => {\n const { weeks, width, height, blockSize, blockMargin, labels } =\n useContributionGraph();\n\n const monthLabels = useMemo(\n () => getMonthLabels(weeks, labels.months),\n [weeks, labels.months]\n );\n\n return (\n \n \n Contribution Graph\n {!hideMonthLabels && (\n \n {monthLabels.map(({ label, weekIndex }) => (\n \n {label}\n \n ))}\n \n )}\n {weeks.map((week, weekIndex) =>\n week.map((activity, dayIndex) => {\n if (!activity) {\n return null;\n }\n\n return (\n \n {children({ activity, dayIndex, weekIndex })}\n \n );\n })\n )}\n \n
\n );\n};\n\nexport type ContributionGraphFooterProps = HTMLAttributes;\n\nexport const ContributionGraphFooter = ({\n className,\n ...props\n}: ContributionGraphFooterProps) => (\n \n);\n\nexport type ContributionGraphTotalCountProps = Omit<\n HTMLAttributes,\n \"children\"\n> & {\n children?: (props: { totalCount: number; year: number }) => ReactNode;\n};\n\nexport const ContributionGraphTotalCount = ({\n className,\n children,\n ...props\n}: ContributionGraphTotalCountProps) => {\n const { totalCount, year, labels } = useContributionGraph();\n\n if (children) {\n return <>{children({ totalCount, year })};\n }\n\n return (\n
\n {labels.totalCount\n ? labels.totalCount\n .replace(\"{{count}}\", String(totalCount))\n .replace(\"{{year}}\", String(year))\n : `${totalCount} activities in ${year}`}\n
\n );\n};\n\nexport type ContributionGraphLegendProps = Omit<\n HTMLAttributes,\n \"children\"\n> & {\n children?: (props: { level: number }) => ReactNode;\n};\n\nexport const ContributionGraphLegend = ({\n className,\n children,\n ...props\n}: ContributionGraphLegendProps) => {\n const { labels, maxLevel, blockSize, blockRadius } = useContributionGraph();\n\n return (\n \n \n {labels.legend?.less || \"Less\"}\n \n {new Array(maxLevel + 1).fill(undefined).map((_, level) =>\n children ? (\n {children({ level })}\n ) : (\n \n {`${level} contributions`}\n \n \n )\n )}\n \n {labels.legend?.more || \"More\"}\n \n \n );\n};\n","target":"components/kibo-ui/contribution-graph/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"credit-card","type":"registry:ui","title":"credit-card","description":"Credit card components for displaying and validating credit card information.","author":"Hayden Bleasel ","dependencies":["react-svg-credit-card-payment-icons"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n type ComponentProps,\n createContext,\n type HTMLAttributes,\n type ReactNode,\n useContext,\n useEffect,\n useState,\n} from \"react\";\nimport { PaymentIcon } from \"react-svg-credit-card-payment-icons\";\nimport { cn } from \"@/lib/utils\";\n\nconst useSupportsHover = () => {\n const [supportsHover, setSupportsHover] = useState(false);\n\n useEffect(() => {\n const mql = window.matchMedia(\"(hover: hover)\");\n const handler = (e: MediaQueryListEvent) => setSupportsHover(e.matches);\n\n setSupportsHover(mql.matches);\n mql.addEventListener(\"change\", handler);\n\n return () => mql.removeEventListener(\"change\", handler);\n }, []);\n\n return supportsHover;\n};\n\nexport type CreditCardProps = HTMLAttributes;\n\nexport const CreditCard = ({ className, ...props }: CreditCardProps) => (\n \n);\n\nconst CreditCardFlipContext = createContext(false);\n\nexport type CreditCardFlipperProps = HTMLAttributes;\n\nexport const CreditCardFlipper = ({\n className,\n children,\n ...props\n}: CreditCardFlipperProps & { children?: ReactNode }) => {\n const supportsHover = useSupportsHover();\n const [isFlipped, setIsFlipped] = useState(false);\n\n const handleClick = () => {\n if (!supportsHover) {\n setIsFlipped((prev) => !prev);\n }\n };\n\n return (\n \n {/* biome-ignore lint/nursery/noStaticElementInteractions: tap to flip for touch devices */}\n \n {children}\n \n \n );\n};\n\nexport type CreditCardNameProps = HTMLAttributes;\n\nexport const CreditCardName = ({\n className,\n style,\n ...props\n}: CreditCardNameProps) => (\n \n);\n\nexport type CreditCardChipProps = HTMLAttributes;\n\nexport const CreditCardChip = ({\n className,\n children,\n ...props\n}: CreditCardChipProps) =>\n children ? (\n \n {children}\n \n ) : (\n \n Chip\n \n \n \n \n \n \n \n \n \n );\n\nexport type CreditCardLogoProps = HTMLAttributes;\n\nexport const CreditCardLogo = ({\n className,\n ...props\n}: CreditCardLogoProps) => (\n \n);\n\nexport type CreditCardFrontProps = HTMLAttributes & {\n safeArea?: number;\n};\n\nexport const CreditCardFront = ({\n className,\n safeArea = 20,\n children,\n ...props\n}: CreditCardFrontProps) => (\n \n \n {children}\n \n \n);\n\nexport type CreditCardServiceProviderProps = ComponentProps;\n\nexport const CreditCardServiceProvider = ({\n className,\n children,\n type = \"Visa\",\n ...props\n}: CreditCardServiceProviderProps) => {\n if (children) {\n return (\n \n {children}\n \n );\n }\n\n return (\n \n );\n};\n\nexport type CreditCardMagStripeProps = HTMLAttributes;\n\nexport type CreditCardBackContextValue = {\n safeArea: number;\n};\n\nconst CreditCardBackContext = createContext({\n safeArea: 20,\n});\n\nexport type CreditCardBackProps = HTMLAttributes & {\n safeArea?: number;\n};\n\nexport const CreditCardBack = ({\n safeArea = 16,\n children,\n className,\n ...props\n}: CreditCardBackProps) => {\n const isInsideFlipper = useContext(CreditCardFlipContext);\n\n return (\n \n \n \n {children}\n \n \n \n );\n};\n\nexport const CreditCardMagStripe = ({\n className,\n ...props\n}: CreditCardMagStripeProps) => {\n const context = useContext(CreditCardBackContext);\n\n return (\n \n );\n};\n\nexport type CreditCardNumberProps = HTMLAttributes;\n\nexport const CreditCardNumber = ({\n className,\n children,\n style,\n ...props\n}: CreditCardNumberProps) => (\n \n {children}\n

\n);\n\nexport type CreditCardExpiryProps = HTMLAttributes;\n\nexport const CreditCardExpiry = ({\n className,\n style,\n ...props\n}: CreditCardExpiryProps) => (\n \n);\n\nexport type CreditCardCvvProps = HTMLAttributes;\n\nexport const CreditCardCvv = ({\n className,\n style,\n ...props\n}: CreditCardCvvProps) => (\n \n);\n","target":"components/kibo-ui/credit-card/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"cursor","type":"registry:ui","title":"cursor","description":"A cursor component, great for realtime interactive applications.","author":"Hayden Bleasel ","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"import { Children, type HTMLAttributes, type SVGProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type CursorProps = HTMLAttributes;\n\nexport const Cursor = ({ className, children, ...props }: CursorProps) => (\n \n {children}\n \n);\n\nexport type CursorPointerProps = SVGProps;\n\nexport const CursorPointer = ({ className, ...props }: CursorPointerProps) => (\n \n \n \n);\n\nexport type CursorBodyProps = HTMLAttributes;\n\nexport const CursorBody = ({\n children,\n className,\n ...props\n}: CursorBodyProps) => (\n 1 && \"rounded-tl [&>:first-child]:opacity-70\",\n \"bg-secondary text-foreground\",\n className\n )}\n {...props}\n >\n {children}\n \n);\n\nexport type CursorNameProps = HTMLAttributes;\n\nexport const CursorName = (props: CursorNameProps) => ;\n\nexport type CursorMessageProps = HTMLAttributes;\n\nexport const CursorMessage = (props: CursorMessageProps) => ;\n","target":"components/kibo-ui/cursor/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"deck","type":"registry:ui","title":"deck","description":"A Tinder-like swipeable card stack component with smooth animations.","author":"Hayden Bleasel ","dependencies":["@radix-ui/react-use-controllable-state","lucide-react","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport {\n motion,\n type PanInfo,\n useMotionValue,\n useTransform,\n} from \"motion/react\";\nimport {\n Children,\n cloneElement,\n type HTMLAttributes,\n type ReactElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type DeckProps = HTMLAttributes;\n\nexport const Deck = ({ className, ...props }: DeckProps) => (\n
\n);\n\nexport type DeckCardsProps = HTMLAttributes & {\n onSwipe?: (index: number, direction: \"left\" | \"right\") => void;\n onSwipeEnd?: (index: number, direction: \"left\" | \"right\") => void;\n threshold?: number;\n stackSize?: number;\n perspective?: number;\n scale?: number;\n currentIndex?: number;\n defaultCurrentIndex?: number;\n onCurrentIndexChange?: (index: number) => void;\n animateOnIndexChange?: boolean;\n indexChangeDirection?: \"left\" | \"right\";\n};\n\nexport const DeckCards = ({\n children,\n className,\n onSwipe,\n onSwipeEnd,\n threshold = 150,\n stackSize = 3,\n perspective = 1000,\n scale = 0.05,\n currentIndex: currentIndexProp,\n defaultCurrentIndex = 0,\n onCurrentIndexChange,\n animateOnIndexChange = true,\n indexChangeDirection = \"left\",\n ...props\n}: DeckCardsProps) => {\n const childrenArray = Children.toArray(children) as ReactElement[];\n const [currentIndex, setCurrentIndex] = useControllableState({\n prop: currentIndexProp,\n defaultProp: defaultCurrentIndex,\n onChange: onCurrentIndexChange,\n });\n const [exitDirection, setExitDirection] = useState<\"left\" | \"right\" | null>(\n null\n );\n const [displayIndex, setDisplayIndex] = useState(currentIndex);\n const isInternalChangeRef = useRef(false);\n const prevIndexRef = useRef(currentIndex);\n\n // Detect external currentIndex changes and trigger animation\n useEffect(() => {\n const prevIndex = prevIndexRef.current;\n\n // Skip initial mount and internal changes\n if (prevIndex === currentIndex || isInternalChangeRef.current) {\n isInternalChangeRef.current = false;\n prevIndexRef.current = currentIndex;\n setDisplayIndex(currentIndex);\n return;\n }\n\n // Only animate if the option is enabled and we have cards to show\n if (animateOnIndexChange && prevIndex < childrenArray.length) {\n setExitDirection(indexChangeDirection);\n\n // Update display index after animation completes\n setTimeout(() => {\n setExitDirection(null);\n setDisplayIndex(currentIndex);\n }, 300);\n } else {\n // No animation, update display index immediately\n setDisplayIndex(currentIndex);\n }\n\n prevIndexRef.current = currentIndex;\n }, [\n currentIndex,\n animateOnIndexChange,\n indexChangeDirection,\n childrenArray.length,\n ]);\n\n const handleSwipe = useCallback(\n (direction: \"left\" | \"right\") => {\n if (displayIndex >= childrenArray.length) {\n return;\n }\n\n setExitDirection(direction);\n\n if (direction === \"left\") {\n onSwipe?.(displayIndex, \"left\");\n } else {\n onSwipe?.(displayIndex, \"right\");\n }\n\n onSwipeEnd?.(displayIndex, direction);\n\n // Move to next card after animation\n setTimeout(() => {\n isInternalChangeRef.current = true;\n const newIndex = displayIndex + 1;\n setCurrentIndex(newIndex);\n setDisplayIndex(newIndex);\n setExitDirection(null);\n }, 300);\n },\n [displayIndex, childrenArray.length, onSwipe, onSwipeEnd, setCurrentIndex]\n );\n\n const visibleCards = childrenArray.slice(\n displayIndex,\n displayIndex + stackSize\n );\n\n if (displayIndex >= childrenArray.length) {\n return null;\n }\n\n return (\n \n {visibleCards.map((child, index) => {\n const isTopCard = !index;\n const zIndex = stackSize - index;\n const scaleValue = 1 - index * scale;\n const yOffset = index * 4;\n const cardKey = `${displayIndex}-${child.key ?? index}`;\n\n if (isTopCard) {\n return (\n \n {child}\n \n );\n }\n\n const nextCardScale = index === 1 && exitDirection ? 1 : scaleValue;\n const nextCardY = index === 1 && exitDirection ? 0 : yOffset;\n\n return (\n \n {child}\n \n );\n })}\n
\n );\n};\n\ntype DeckCardProps = {\n children: ReactElement;\n onSwipe: (direction: \"left\" | \"right\") => void;\n threshold: number;\n style?: object;\n exitDirection: \"left\" | \"right\" | null;\n};\n\nconst DeckCard = ({\n children,\n onSwipe,\n threshold,\n style,\n exitDirection,\n}: DeckCardProps) => {\n const x = useMotionValue(0);\n const rotate = useTransform(x, [-200, 200], [-25, 25]);\n const opacity = useTransform(\n x,\n [-200, -threshold, 0, threshold, 200],\n [0, 1, 1, 1, 0]\n );\n\n const handleDragEnd = (_: unknown, info: PanInfo) => {\n const swipeThreshold = threshold;\n\n if (Math.abs(info.offset.x) > swipeThreshold) {\n const direction = info.offset.x > 0 ? \"right\" : \"left\";\n onSwipe(direction);\n }\n };\n\n let exitX = 0;\n\n if (exitDirection === \"left\") {\n exitX = -500;\n } else if (exitDirection === \"right\") {\n exitX = 500;\n }\n\n const castedChildren = children as ReactElement<\n HTMLAttributes\n >;\n\n return (\n \n {cloneElement(castedChildren, {\n className: cn(\n \"h-full w-full select-none rounded-lg shadow-lg\",\n castedChildren.props.className\n ),\n })}\n \n );\n};\n\nexport type DeckItemProps = HTMLAttributes;\n\nexport const DeckItem = ({ className, ...props }: DeckItemProps) => (\n \n);\n\nexport type DeckEmptyProps = HTMLAttributes;\n\nexport const DeckEmpty = ({\n children,\n className,\n ...props\n}: HTMLAttributes) => (\n \n {children ??

No more cards

}\n \n);\n","target":"components/kibo-ui/deck/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dialog-stack","type":"registry:ui","title":"dialog-stack","description":"Composable stacked dialogs, useful for creating a wizard, nested form or multi-step process. It provides a consistent layout and styling for each dialog, and includes navigation component.","author":"Hayden Bleasel ","dependencies":["@radix-ui/react-use-controllable-state","radix-ui"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { Portal } from \"radix-ui\";\nimport type {\n ButtonHTMLAttributes,\n Dispatch,\n HTMLAttributes,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n SetStateAction,\n} from \"react\";\nimport {\n Children,\n cloneElement,\n createContext,\n useCallback,\n useContext,\n useEffect,\n useState,\n} from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype DialogStackContextType = {\n activeIndex: number;\n setActiveIndex: Dispatch>;\n totalDialogs: number;\n setTotalDialogs: Dispatch>;\n isOpen: boolean;\n setIsOpen: Dispatch>;\n clickable: boolean;\n};\n\nconst DialogStackContext = createContext({\n activeIndex: 0,\n setActiveIndex: () => {},\n totalDialogs: 0,\n setTotalDialogs: () => {},\n isOpen: false,\n setIsOpen: () => {},\n clickable: false,\n});\n\ntype DialogStackChildProps = {\n index?: number;\n};\n\nexport type DialogStackProps = HTMLAttributes & {\n open?: boolean;\n clickable?: boolean;\n onOpenChange?: (open: boolean) => void;\n defaultOpen?: boolean;\n};\n\nexport const DialogStack = ({\n children,\n className,\n open,\n defaultOpen = false,\n onOpenChange,\n clickable = false,\n ...props\n}: DialogStackProps) => {\n const [activeIndex, setActiveIndex] = useState(0);\n const [isOpen, setIsOpen] = useControllableState({\n defaultProp: defaultOpen,\n prop: open,\n onChange: onOpenChange,\n });\n\n useEffect(() => {\n if (onOpenChange && isOpen !== undefined) {\n onOpenChange(isOpen);\n }\n }, [isOpen, onOpenChange]);\n\n return (\n {},\n isOpen: isOpen ?? false,\n setIsOpen: (value) => setIsOpen(Boolean(value)),\n clickable,\n }}\n >\n
\n {children}\n
\n \n );\n};\n\nexport type DialogStackTriggerProps =\n ButtonHTMLAttributes & {\n asChild?: boolean;\n };\n\nexport const DialogStackTrigger = ({\n children,\n className,\n onClick,\n asChild,\n ...props\n}: DialogStackTriggerProps) => {\n const context = useContext(DialogStackContext);\n\n if (!context) {\n throw new Error(\"DialogStackTrigger must be used within a DialogStack\");\n }\n\n const handleClick: MouseEventHandler = (e) => {\n context.setIsOpen(true);\n onClick?.(e);\n };\n\n if (asChild && children) {\n const child = children as ReactElement<{\n onClick: MouseEventHandler;\n className?: string;\n }>;\n return cloneElement(child, {\n onClick: (e: MouseEvent) => {\n handleClick(e);\n child.props.onClick?.(e);\n },\n className: cn(className, child.props.className),\n ...props,\n });\n }\n\n return (\n \n {children}\n \n );\n};\n\nexport type DialogStackOverlayProps = HTMLAttributes;\n\nexport const DialogStackOverlay = ({\n className,\n ...props\n}: DialogStackOverlayProps) => {\n const context = useContext(DialogStackContext);\n\n if (!context) {\n throw new Error(\"DialogStackOverlay must be used within a DialogStack\");\n }\n\n const handleClick = useCallback(() => {\n context.setIsOpen(false);\n }, [context.setIsOpen]);\n\n if (!context.isOpen) {\n return null;\n }\n\n return (\n // biome-ignore lint/a11y/noStaticElementInteractions: \"This is a clickable overlay\"\n // biome-ignore lint/a11y/useKeyWithClickEvents: \"This is a clickable overlay\"\n \n );\n};\n\nexport type DialogStackBodyProps = HTMLAttributes & {\n children:\n | ReactElement[]\n | ReactElement;\n};\n\nexport const DialogStackBody = ({\n children,\n className,\n ...props\n}: DialogStackBodyProps) => {\n const context = useContext(DialogStackContext);\n const [totalDialogs, setTotalDialogs] = useState(Children.count(children));\n\n if (!context) {\n throw new Error(\"DialogStackBody must be used within a DialogStack\");\n }\n\n if (!context.isOpen) {\n return null;\n }\n\n return (\n \n \n \n
\n {Children.map(children, (child, index) => {\n const childElement = child as ReactElement<{\n index: number;\n onClick: MouseEventHandler;\n className?: string;\n }>;\n\n return cloneElement(childElement, {\n ...childElement.props,\n index,\n });\n })}\n
\n \n \n \n );\n};\n\nexport type DialogStackContentProps = HTMLAttributes & {\n index?: number;\n offset?: number;\n};\n\nexport const DialogStackContent = ({\n children,\n className,\n index = 0,\n offset = 10,\n ...props\n}: DialogStackContentProps) => {\n const context = useContext(DialogStackContext);\n\n if (!context) {\n throw new Error(\"DialogStackContent must be used within a DialogStack\");\n }\n\n if (!context.isOpen) {\n return null;\n }\n\n const handleClick = () => {\n if (context.clickable && context.activeIndex > index) {\n context.setActiveIndex(index ?? 0);\n }\n };\n\n const distanceFromActive = index - context.activeIndex;\n const translateY =\n distanceFromActive < 0\n ? `-${Math.abs(distanceFromActive) * offset}px`\n : `${Math.abs(distanceFromActive) * offset}px`;\n\n return (\n // biome-ignore lint/a11y/noStaticElementInteractions: \"This is a clickable dialog\"\n // biome-ignore lint/a11y/useKeyWithClickEvents: \"This is a clickable dialog\"\n 0 ? 0 : 1,\n cursor:\n context.clickable && context.activeIndex > index\n ? \"pointer\"\n : \"default\",\n }}\n {...props}\n >\n \n {children}\n \n \n );\n};\n\nexport type DialogStackTitleProps = HTMLAttributes;\n\nexport const DialogStackTitle = ({\n children,\n className,\n ...props\n}: DialogStackTitleProps) => (\n \n {children}\n \n);\n\nexport type DialogStackDescriptionProps = HTMLAttributes;\n\nexport const DialogStackDescription = ({\n children,\n className,\n ...props\n}: DialogStackDescriptionProps) => (\n

\n {children}\n

\n);\n\nexport type DialogStackHeaderProps = HTMLAttributes;\n\nexport const DialogStackHeader = ({\n className,\n ...props\n}: DialogStackHeaderProps) => (\n \n);\n\nexport type DialogStackFooterProps = HTMLAttributes;\n\nexport const DialogStackFooter = ({\n children,\n className,\n ...props\n}: DialogStackFooterProps) => (\n \n {children}\n \n);\n\nexport type DialogStackNextProps = ButtonHTMLAttributes & {\n asChild?: boolean;\n};\n\nexport const DialogStackNext = ({\n children,\n className,\n asChild,\n ...props\n}: DialogStackNextProps) => {\n const context = useContext(DialogStackContext);\n\n if (!context) {\n throw new Error(\"DialogStackNext must be used within a DialogStack\");\n }\n\n const handleNext = () => {\n if (context.activeIndex < context.totalDialogs - 1) {\n context.setActiveIndex(context.activeIndex + 1);\n }\n };\n\n if (asChild && children) {\n const child = children as ReactElement<{\n onClick: MouseEventHandler;\n className?: string;\n }>;\n\n return cloneElement(child, {\n onClick: (e: MouseEvent) => {\n handleNext();\n child.props.onClick?.(e);\n },\n className: cn(className, child.props.className),\n ...props,\n });\n }\n\n return (\n = context.totalDialogs - 1}\n onClick={handleNext}\n type=\"button\"\n {...props}\n >\n {children || \"Next\"}\n \n );\n};\n\nexport type DialogStackPreviousProps =\n ButtonHTMLAttributes & {\n asChild?: boolean;\n };\n\nexport const DialogStackPrevious = ({\n children,\n className,\n asChild,\n ...props\n}: DialogStackPreviousProps) => {\n const context = useContext(DialogStackContext);\n\n if (!context) {\n throw new Error(\"DialogStackPrevious must be used within a DialogStack\");\n }\n\n const handlePrevious = () => {\n if (context.activeIndex > 0) {\n context.setActiveIndex(context.activeIndex - 1);\n }\n };\n\n if (asChild && children) {\n const child = children as ReactElement<{\n onClick: MouseEventHandler;\n className?: string;\n }>;\n\n return cloneElement(child, {\n onClick: (e: MouseEvent) => {\n handlePrevious();\n child.props.onClick?.(e);\n },\n className: cn(className, child.props.className),\n ...props,\n });\n }\n\n return (\n \n {children || \"Previous\"}\n \n );\n};\n","target":"components/kibo-ui/dialog-stack/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dropzone","type":"registry:ui","title":"dropzone","description":"Allows users to drag-and-drop files into a container to upload or process them.","author":"Hayden Bleasel ","dependencies":["lucide-react","react-dropzone"],"devDependencies":[],"registryDependencies":["button"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { UploadIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { createContext, useContext } from \"react\";\nimport type { DropEvent, DropzoneOptions, FileRejection } from \"react-dropzone\";\nimport { useDropzone } from \"react-dropzone\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\ntype DropzoneContextType = {\n src?: File[];\n accept?: DropzoneOptions[\"accept\"];\n maxSize?: DropzoneOptions[\"maxSize\"];\n minSize?: DropzoneOptions[\"minSize\"];\n maxFiles?: DropzoneOptions[\"maxFiles\"];\n};\n\nconst renderBytes = (bytes: number) => {\n const units = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\"];\n let size = bytes;\n let unitIndex = 0;\n\n while (size >= 1024 && unitIndex < units.length - 1) {\n size /= 1024;\n unitIndex++;\n }\n\n return `${size.toFixed(2)}${units[unitIndex]}`;\n};\n\nconst DropzoneContext = createContext(\n undefined\n);\n\nexport type DropzoneProps = Omit & {\n src?: File[];\n className?: string;\n onDrop?: (\n acceptedFiles: File[],\n fileRejections: FileRejection[],\n event: DropEvent\n ) => void;\n children?: ReactNode;\n};\n\nexport const Dropzone = ({\n accept,\n maxFiles = 1,\n maxSize,\n minSize,\n onDrop,\n onError,\n disabled,\n src,\n className,\n children,\n ...props\n}: DropzoneProps) => {\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n accept,\n maxFiles,\n maxSize,\n minSize,\n onError,\n disabled,\n onDrop: (acceptedFiles, fileRejections, event) => {\n if (fileRejections.length > 0) {\n const message = fileRejections.at(0)?.errors.at(0)?.message;\n onError?.(new Error(message));\n return;\n }\n\n onDrop?.(acceptedFiles, fileRejections, event);\n },\n ...props,\n });\n\n return (\n \n \n \n {children}\n \n \n );\n};\n\nconst useDropzoneContext = () => {\n const context = useContext(DropzoneContext);\n\n if (!context) {\n throw new Error(\"useDropzoneContext must be used within a Dropzone\");\n }\n\n return context;\n};\n\nexport type DropzoneContentProps = {\n children?: ReactNode;\n className?: string;\n};\n\nconst maxLabelItems = 3;\n\nexport const DropzoneContent = ({\n children,\n className,\n}: DropzoneContentProps) => {\n const { src } = useDropzoneContext();\n\n if (!src) {\n return null;\n }\n\n if (children) {\n return children;\n }\n\n return (\n
\n
\n \n
\n

\n {src.length > maxLabelItems\n ? `${new Intl.ListFormat(\"en\").format(\n src.slice(0, maxLabelItems).map((file) => file.name)\n )} and ${src.length - maxLabelItems} more`\n : new Intl.ListFormat(\"en\").format(src.map((file) => file.name))}\n

\n

\n Drag and drop or click to replace\n

\n
\n );\n};\n\nexport type DropzoneEmptyStateProps = {\n children?: ReactNode;\n className?: string;\n};\n\nexport const DropzoneEmptyState = ({\n children,\n className,\n}: DropzoneEmptyStateProps) => {\n const { src, accept, maxSize, minSize, maxFiles } = useDropzoneContext();\n\n if (src) {\n return null;\n }\n\n if (children) {\n return children;\n }\n\n let caption = \"\";\n\n if (accept) {\n caption += \"Accepts \";\n caption += new Intl.ListFormat(\"en\").format(Object.keys(accept));\n }\n\n if (minSize && maxSize) {\n caption += ` between ${renderBytes(minSize)} and ${renderBytes(maxSize)}`;\n } else if (minSize) {\n caption += ` at least ${renderBytes(minSize)}`;\n } else if (maxSize) {\n caption += ` less than ${renderBytes(maxSize)}`;\n }\n\n return (\n
\n
\n \n
\n

\n Upload {maxFiles === 1 ? \"a file\" : \"files\"}\n

\n

\n Drag and drop or click to upload\n

\n {caption && (\n

{caption}.

\n )}\n
\n );\n};\n","target":"components/kibo-ui/dropzone/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"editor","type":"registry:ui","title":"editor","description":"The Editor component is a powerful and flexible text editor that allows you to create and edit rich text content.","author":"Hayden Bleasel ","dependencies":["@floating-ui/dom","@tiptap/core","@tiptap/extension-code-block-lowlight","@tiptap/extension-list","@tiptap/extension-subscript","@tiptap/extension-superscript","@tiptap/extension-table","@tiptap/extension-text-style","@tiptap/extension-typography","@tiptap/extensions","@tiptap/pm","@tiptap/react","@tiptap/starter-kit","@tiptap/suggestion","fuse.js","lowlight","lucide-react","tippy.js"],"devDependencies":[],"registryDependencies":["button","command","dropdown-menu","popover","separator","tooltip"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport type { Editor, Range } from \"@tiptap/core\";\nimport { mergeAttributes, Node } from \"@tiptap/core\";\nimport CodeBlockLowlight from \"@tiptap/extension-code-block-lowlight\";\nimport { TaskItem, TaskList } from \"@tiptap/extension-list\";\nimport Subscript from \"@tiptap/extension-subscript\";\nimport Superscript from \"@tiptap/extension-superscript\";\nimport {\n Table,\n TableCell,\n TableHeader,\n TableRow,\n} from \"@tiptap/extension-table\";\nimport { TextStyleKit } from \"@tiptap/extension-text-style\";\nimport Typography from \"@tiptap/extension-typography\";\nimport { CharacterCount, Placeholder } from \"@tiptap/extensions\";\nimport type { DOMOutputSpec, Node as ProseMirrorNode } from \"@tiptap/pm/model\";\nimport { PluginKey } from \"@tiptap/pm/state\";\nimport {\n ReactRenderer,\n EditorProvider as TiptapEditorProvider,\n type EditorProviderProps as TiptapEditorProviderProps,\n useCurrentEditor,\n} from \"@tiptap/react\";\nimport {\n BubbleMenu,\n type BubbleMenuProps,\n FloatingMenu,\n type FloatingMenuProps,\n} from \"@tiptap/react/menus\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Command,\n CommandEmpty,\n CommandItem,\n CommandList,\n} from \"@/components/ui/command\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { Separator } from \"@/components/ui/separator\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\n\nexport type { Editor, JSONContent } from \"@tiptap/react\";\n\nimport StarterKit from \"@tiptap/starter-kit\";\nimport Suggestion, { type SuggestionOptions } from \"@tiptap/suggestion\";\nimport Fuse from \"fuse.js\";\nimport { all, createLowlight } from \"lowlight\";\nimport {\n ArrowDownIcon,\n ArrowLeftIcon,\n ArrowRightIcon,\n ArrowUpIcon,\n BoldIcon,\n BoltIcon,\n CheckIcon,\n CheckSquareIcon,\n ChevronDownIcon,\n CodeIcon,\n ColumnsIcon,\n EllipsisIcon,\n EllipsisVerticalIcon,\n ExternalLinkIcon,\n Heading1Icon,\n Heading2Icon,\n Heading3Icon,\n ItalicIcon,\n ListIcon,\n ListOrderedIcon,\n type LucideIcon,\n type LucideProps,\n RemoveFormattingIcon,\n RowsIcon,\n StrikethroughIcon,\n SubscriptIcon,\n SuperscriptIcon,\n TableCellsMergeIcon,\n TableColumnsSplitIcon,\n TableIcon,\n TextIcon,\n TextQuoteIcon,\n TrashIcon,\n UnderlineIcon,\n} from \"lucide-react\";\nimport type { FormEventHandler, HTMLAttributes, ReactNode } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport tippy, { type Instance as TippyInstance } from \"tippy.js\";\n\ntype SlashNodeAttrs = {\n id: string | null;\n label?: string | null;\n};\n\ntype SlashOptions<\n SlashOptionSuggestionItem = unknown,\n Attrs = SlashNodeAttrs,\n> = {\n HTMLAttributes: Record;\n renderText: (props: {\n options: SlashOptions;\n node: ProseMirrorNode;\n }) => string;\n renderHTML: (props: {\n options: SlashOptions;\n node: ProseMirrorNode;\n }) => DOMOutputSpec;\n deleteTriggerWithBackspace: boolean;\n suggestion: Omit<\n SuggestionOptions,\n \"editor\"\n >;\n};\n\nconst SlashPluginKey = new PluginKey(\"slash\");\n\nexport type SuggestionItem = {\n title: string;\n description: string;\n icon: LucideIcon;\n searchTerms: string[];\n command: (props: { editor: Editor; range: Range }) => void;\n};\n\nexport const defaultSlashSuggestions: SuggestionOptions[\"items\"] =\n () => [\n {\n title: \"Text\",\n description: \"Just start typing with plain text.\",\n searchTerms: [\"p\", \"paragraph\"],\n icon: TextIcon,\n command: ({ editor, range }) => {\n editor\n .chain()\n .focus()\n .deleteRange(range)\n .toggleNode(\"paragraph\", \"paragraph\")\n .run();\n },\n },\n {\n title: \"To-do List\",\n description: \"Track tasks with a to-do list.\",\n searchTerms: [\"todo\", \"task\", \"list\", \"check\", \"checkbox\"],\n icon: CheckSquareIcon,\n command: ({ editor, range }) => {\n editor\n .chain()\n .focus()\n .deleteRange(range)\n .toggleList(\"taskList\", \"taskItem\")\n .run();\n },\n },\n {\n title: \"Heading 1\",\n description: \"Big section heading.\",\n searchTerms: [\"title\", \"big\", \"large\"],\n icon: Heading1Icon,\n command: ({ editor, range }) => {\n editor\n .chain()\n .focus()\n .deleteRange(range)\n .setNode(\"heading\", { level: 1 })\n .run();\n },\n },\n {\n title: \"Heading 2\",\n description: \"Medium section heading.\",\n searchTerms: [\"subtitle\", \"medium\"],\n icon: Heading2Icon,\n command: ({ editor, range }) => {\n editor\n .chain()\n .focus()\n .deleteRange(range)\n .setNode(\"heading\", { level: 2 })\n .run();\n },\n },\n {\n title: \"Heading 3\",\n description: \"Small section heading.\",\n searchTerms: [\"subtitle\", \"small\"],\n icon: Heading3Icon,\n command: ({ editor, range }) => {\n editor\n .chain()\n .focus()\n .deleteRange(range)\n .setNode(\"heading\", { level: 3 })\n .run();\n },\n },\n {\n title: \"Bullet List\",\n description: \"Create a simple bullet list.\",\n searchTerms: [\"unordered\", \"point\"],\n icon: ListIcon,\n command: ({ editor, range }) => {\n editor.chain().focus().deleteRange(range).toggleBulletList().run();\n },\n },\n {\n title: \"Numbered List\",\n description: \"Create a list with numbering.\",\n searchTerms: [\"ordered\"],\n icon: ListOrderedIcon,\n command: ({ editor, range }) => {\n editor.chain().focus().deleteRange(range).toggleOrderedList().run();\n },\n },\n {\n title: \"Quote\",\n description: \"Capture a quote.\",\n searchTerms: [\"blockquote\"],\n icon: TextQuoteIcon,\n command: ({ editor, range }) =>\n editor\n .chain()\n .focus()\n .deleteRange(range)\n .toggleNode(\"paragraph\", \"paragraph\")\n .toggleBlockquote()\n .run(),\n },\n {\n title: \"Code\",\n description: \"Capture a code snippet.\",\n searchTerms: [\"codeblock\"],\n icon: CodeIcon,\n command: ({ editor, range }) =>\n editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),\n },\n {\n title: \"Table\",\n description: \"Add a table view to organize data.\",\n searchTerms: [\"table\"],\n icon: TableIcon,\n command: ({ editor, range }) =>\n editor\n .chain()\n .focus()\n .deleteRange(range)\n .insertTable({ rows: 3, cols: 3, withHeaderRow: true })\n .run(),\n },\n ];\n\nconst Slash = Node.create({\n name: \"slash\",\n priority: 101,\n addOptions() {\n return {\n HTMLAttributes: {},\n renderText({ options, node }) {\n return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`;\n },\n deleteTriggerWithBackspace: false,\n renderHTML({ options, node }) {\n return [\n \"span\",\n mergeAttributes(this.HTMLAttributes, options.HTMLAttributes),\n `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`,\n ];\n },\n suggestion: {\n char: \"/\",\n pluginKey: SlashPluginKey,\n command: ({ editor, range, props }) => {\n // increase range.to by one when the next node is of type \"text\"\n // and starts with a space character\n const nodeAfter = editor.view.state.selection.$to.nodeAfter;\n const overrideSpace = nodeAfter?.text?.startsWith(\" \");\n\n if (overrideSpace) {\n range.to += 1;\n }\n\n editor\n .chain()\n .focus()\n .insertContentAt(range, [\n {\n type: this.name,\n attrs: props,\n },\n {\n type: \"text\",\n text: \" \",\n },\n ])\n .run();\n\n // get reference to `window` object from editor element, to support cross-frame JS usage\n editor.view.dom.ownerDocument.defaultView\n ?.getSelection()\n ?.collapseToEnd();\n },\n allow: ({ state, range }) => {\n const $from = state.doc.resolve(range.from);\n const type = state.schema.nodes[this.name];\n const allow = !!$from.parent.type.contentMatch.matchType(type);\n\n return allow;\n },\n },\n };\n },\n\n group: \"inline\",\n\n inline: true,\n\n selectable: false,\n\n atom: true,\n\n addAttributes() {\n return {\n id: {\n default: null,\n parseHTML: (element) => element.getAttribute(\"data-id\"),\n renderHTML: (attributes) => {\n if (!attributes.id) {\n return {};\n }\n\n return {\n \"data-id\": attributes.id,\n };\n },\n },\n\n label: {\n default: null,\n parseHTML: (element) => element.getAttribute(\"data-label\"),\n renderHTML: (attributes) => {\n if (!attributes.label) {\n return {};\n }\n\n return {\n \"data-label\": attributes.label,\n };\n },\n },\n };\n },\n\n parseHTML() {\n return [\n {\n tag: `span[data-type=\"${this.name}\"]`,\n },\n ];\n },\n\n renderHTML({ node, HTMLAttributes }) {\n const mergedOptions = { ...this.options };\n\n mergedOptions.HTMLAttributes = mergeAttributes(\n { \"data-type\": this.name },\n this.options.HTMLAttributes,\n HTMLAttributes\n );\n const html = this.options.renderHTML({\n options: mergedOptions,\n node,\n });\n\n if (typeof html === \"string\") {\n return [\n \"span\",\n mergeAttributes(\n { \"data-type\": this.name },\n this.options.HTMLAttributes,\n HTMLAttributes\n ),\n html,\n ];\n }\n return html;\n },\n\n renderText({ node }) {\n return this.options.renderText({\n options: this.options,\n node,\n });\n },\n\n addKeyboardShortcuts() {\n return {\n Backspace: () =>\n this.editor.commands.command(({ tr, state }) => {\n let isMention = false;\n const { selection } = state;\n const { empty, anchor } = selection;\n\n if (!empty) {\n return false;\n }\n\n state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {\n if (node.type.name === this.name) {\n isMention = true;\n tr.insertText(\n this.options.deleteTriggerWithBackspace\n ? \"\"\n : this.options.suggestion.char || \"\",\n pos,\n pos + node.nodeSize\n );\n\n return false;\n }\n });\n\n return isMention;\n }),\n };\n },\n\n addProseMirrorPlugins() {\n return [\n Suggestion({\n editor: this.editor,\n ...this.options.suggestion,\n }),\n ];\n },\n});\n\n// Create a lowlight instance with all languages loaded\nconst lowlight = createLowlight(all);\n\ntype EditorSlashMenuProps = {\n items: SuggestionItem[];\n command: (item: SuggestionItem) => void;\n editor: Editor;\n range: Range;\n};\n\nconst EditorSlashMenu = ({ items, editor, range }: EditorSlashMenuProps) => (\n {\n e.stopPropagation();\n }}\n >\n \n

No results

\n \n \n {items.map((item) => (\n item.command({ editor, range })}\n >\n
\n \n
\n
\n {item.title}\n \n {item.description}\n \n
\n \n ))}\n \n \n);\n\nconst handleCommandNavigation = (event: KeyboardEvent) => {\n if ([\"ArrowUp\", \"ArrowDown\", \"Enter\"].includes(event.key)) {\n const slashCommand = document.querySelector(\"#slash-command\");\n\n if (slashCommand) {\n event.preventDefault();\n\n slashCommand.dispatchEvent(\n new KeyboardEvent(\"keydown\", {\n key: event.key,\n cancelable: true,\n bubbles: true,\n })\n );\n\n return true;\n }\n }\n};\n\nexport type EditorProviderProps = TiptapEditorProviderProps & {\n className?: string;\n limit?: number;\n placeholder?: string;\n};\n\nexport const EditorProvider = ({\n className,\n extensions,\n limit,\n placeholder,\n ...props\n}: EditorProviderProps) => {\n const defaultExtensions = [\n StarterKit.configure({\n codeBlock: false,\n bulletList: {\n HTMLAttributes: {\n class: cn(\"list-outside list-disc pl-4\"),\n },\n },\n orderedList: {\n HTMLAttributes: {\n class: cn(\"list-outside list-decimal pl-4\"),\n },\n },\n listItem: {\n HTMLAttributes: {\n class: cn(\"leading-normal\"),\n },\n },\n blockquote: {\n HTMLAttributes: {\n class: cn(\"border-l border-l-2 pl-2\"),\n },\n },\n code: {\n HTMLAttributes: {\n class: cn(\"rounded-md bg-muted px-1.5 py-1 font-medium font-mono\"),\n spellcheck: \"false\",\n },\n },\n horizontalRule: {\n HTMLAttributes: {\n class: cn(\"mt-4 mb-6 border-muted-foreground border-t\"),\n },\n },\n dropcursor: {\n color: \"var(--border)\",\n width: 4,\n },\n }),\n Typography,\n Placeholder.configure({\n placeholder,\n emptyEditorClass:\n \"before:text-muted-foreground before:content-[attr(data-placeholder)] before:float-left before:h-0 before:pointer-events-none\",\n }),\n CharacterCount.configure({\n limit,\n }),\n CodeBlockLowlight.configure({\n lowlight,\n HTMLAttributes: {\n class: cn(\n \"rounded-md border p-4 text-sm\",\n \"bg-background text-foreground\",\n \"[&_.hljs-doctag]:text-[#d73a49] [&_.hljs-keyword]:text-[#d73a49] [&_.hljs-meta_.hljs-keyword]:text-[#d73a49] [&_.hljs-template-tag]:text-[#d73a49] [&_.hljs-template-variable]:text-[#d73a49] [&_.hljs-type]:text-[#d73a49] [&_.hljs-variable.language_]:text-[#d73a49]\",\n \"[&_.hljs-title.class_.inherited__]:text-[#6f42c1] [&_.hljs-title.class_]:text-[#6f42c1] [&_.hljs-title.function_]:text-[#6f42c1] [&_.hljs-title]:text-[#6f42c1]\",\n \"[&_.hljs-attr]:text-[#005cc5] [&_.hljs-attribute]:text-[#005cc5] [&_.hljs-literal]:text-[#005cc5] [&_.hljs-meta]:text-[#005cc5] [&_.hljs-number]:text-[#005cc5] [&_.hljs-operator]:text-[#005cc5] [&_.hljs-selector-attr]:text-[#005cc5] [&_.hljs-selector-class]:text-[#005cc5] [&_.hljs-selector-id]:text-[#005cc5] [&_.hljs-variable]:text-[#005cc5]\",\n \"[&_.hljs-meta_.hljs-string]:text-[#032f62] [&_.hljs-regexp]:text-[#032f62] [&_.hljs-string]:text-[#032f62]\",\n \"[&_.hljs-built_in]:text-[#e36209] [&_.hljs-symbol]:text-[#e36209]\",\n \"[&_.hljs-code]:text-[#6a737d] [&_.hljs-comment]:text-[#6a737d] [&_.hljs-formula]:text-[#6a737d]\",\n \"[&_.hljs-name]:text-[#22863a] [&_.hljs-quote]:text-[#22863a] [&_.hljs-selector-pseudo]:text-[#22863a] [&_.hljs-selector-tag]:text-[#22863a]\",\n \"[&_.hljs-subst]:text-[#24292e]\",\n \"[&_.hljs-section]:font-bold [&_.hljs-section]:text-[#005cc5]\",\n \"[&_.hljs-bullet]:text-[#735c0f]\",\n \"[&_.hljs-emphasis]:text-[#24292e] [&_.hljs-emphasis]:italic\",\n \"[&_.hljs-strong]:font-bold [&_.hljs-strong]:text-[#24292e]\",\n \"[&_.hljs-addition]:bg-[#f0fff4] [&_.hljs-addition]:text-[#22863a]\",\n \"[&_.hljs-deletion]:bg-[#ffeef0] [&_.hljs-deletion]:text-[#b31d28]\"\n ),\n },\n }),\n Superscript,\n Subscript,\n Slash.configure({\n suggestion: {\n items: async ({ editor, query }) => {\n const items = await defaultSlashSuggestions({ editor, query });\n\n if (!query) {\n return items;\n }\n\n const slashFuse = new Fuse(items, {\n keys: [\"title\", \"description\", \"searchTerms\"],\n threshold: 0.2,\n minMatchCharLength: 1,\n });\n\n const results = slashFuse.search(query);\n\n return results.map((result) => result.item);\n },\n char: \"/\",\n render: () => {\n let component: ReactRenderer;\n let popup: TippyInstance;\n\n return {\n onStart: (onStartProps) => {\n component = new ReactRenderer(EditorSlashMenu, {\n props: onStartProps,\n editor: onStartProps.editor,\n });\n\n popup = tippy(document.body, {\n getReferenceClientRect: () =>\n onStartProps.clientRect?.() || new DOMRect(),\n appendTo: () => document.body,\n content: component.element,\n showOnCreate: true,\n interactive: true,\n trigger: \"manual\",\n placement: \"bottom-start\",\n });\n },\n\n onUpdate(onUpdateProps) {\n component.updateProps(onUpdateProps);\n\n popup.setProps({\n getReferenceClientRect: () =>\n onUpdateProps.clientRect?.() || new DOMRect(),\n });\n },\n\n onKeyDown(onKeyDownProps) {\n if (onKeyDownProps.event.key === \"Escape\") {\n popup.hide();\n component.destroy();\n\n return true;\n }\n\n return handleCommandNavigation(onKeyDownProps.event) ?? false;\n },\n\n onExit() {\n popup.destroy();\n component.destroy();\n },\n };\n },\n },\n }),\n Table.configure({\n HTMLAttributes: {\n class: cn(\n \"relative m-0 mx-auto my-3 w-full table-fixed border-collapse overflow-hidden rounded-none text-sm\"\n ),\n },\n allowTableNodeSelection: true,\n }),\n TableRow.configure({\n HTMLAttributes: {\n class: cn(\n \"relative box-border min-w-[1em] border p-1 text-start align-top\"\n ),\n },\n }),\n TableCell.configure({\n HTMLAttributes: {\n class: cn(\n \"relative box-border min-w-[1em] border p-1 text-start align-top\"\n ),\n },\n }),\n TableHeader.configure({\n HTMLAttributes: {\n class: cn(\n \"relative box-border min-w-[1em] border bg-secondary p-1 text-start align-top font-medium font-semibold text-muted-foreground\"\n ),\n },\n }),\n TaskList.configure({\n HTMLAttributes: {\n // 17px = the width of the checkbox + the gap between the checkbox and the text\n class: \"before:translate-x-[17px]\",\n },\n }),\n TaskItem.configure({\n HTMLAttributes: {\n class: \"flex items-start gap-1\",\n },\n }),\n ];\n\n return (\n \n
\n {\n handleCommandNavigation(event);\n },\n }}\n extensions={[\n ...defaultExtensions,\n TextStyleKit,\n ...(extensions ?? []),\n ]}\n immediatelyRender={false}\n {...props}\n />\n
\n \n );\n};\n\nexport type EditorFloatingMenuProps = Omit;\n\nexport const EditorFloatingMenu = ({\n className,\n ...props\n}: EditorFloatingMenuProps) => {\n const { editor } = useCurrentEditor();\n return (\n \n );\n};\n\nexport type EditorBubbleMenuProps = Omit;\n\nexport const EditorBubbleMenu = ({\n className,\n children,\n ...props\n}: EditorBubbleMenuProps) => {\n const { editor } = useCurrentEditor();\n return (\n *:first-child]:rounded-l-[9px]\",\n \"[&>*:last-child]:rounded-r-[9px]\",\n className\n )}\n editor={editor ?? undefined}\n {...props}\n >\n {children && Array.isArray(children)\n ? children.reduce((acc: ReactNode[], child, index) => {\n if (index === 0) {\n return [child];\n }\n\n // biome-ignore lint/suspicious/noArrayIndexKey: \"only iterator we have\"\n acc.push();\n acc.push(child);\n return acc;\n }, [])\n : children}\n \n );\n};\n\ntype EditorButtonProps = {\n name: string;\n isActive: () => boolean;\n command: () => void;\n icon: LucideIcon | ((props: LucideProps) => ReactNode);\n hideName?: boolean;\n};\n\nconst BubbleMenuButton = ({\n name,\n isActive,\n command,\n icon: Icon,\n hideName,\n}: EditorButtonProps) => (\n command()}\n size=\"sm\"\n variant=\"ghost\"\n >\n \n {!hideName && {name}}\n {isActive() ? (\n \n ) : null}\n \n);\n\nexport type EditorClearFormattingProps = Pick;\n\nexport const EditorClearFormatting = ({\n hideName = true,\n}: EditorClearFormattingProps) => {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n editor.chain().focus().clearNodes().unsetAllMarks().run()}\n hideName={hideName}\n icon={RemoveFormattingIcon}\n isActive={() => false}\n name=\"Clear Formatting\"\n />\n );\n};\n\nexport type EditorNodeTextProps = Pick;\n\nexport const EditorNodeText = ({\n hideName = false,\n}: Pick) => {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n \n editor.chain().focus().toggleNode(\"paragraph\", \"paragraph\").run()\n }\n hideName={hideName}\n // I feel like there has to be a more efficient way to do this – feel free to PR if you know how!\n icon={TextIcon}\n isActive={() =>\n (editor &&\n !editor.isActive(\"paragraph\") &&\n !editor.isActive(\"bulletList\") &&\n !editor.isActive(\"orderedList\")) ??\n false\n }\n name=\"Text\"\n />\n );\n};\n\nexport type EditorNodeHeading1Props = Pick;\n\nexport const EditorNodeHeading1 = ({\n hideName = false,\n}: Pick) => {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n editor.chain().focus().toggleHeading({ level: 1 }).run()}\n hideName={hideName}\n icon={Heading1Icon}\n isActive={() => editor.isActive(\"heading\", { level: 1 }) ?? false}\n name=\"Heading 1\"\n />\n );\n};\n\nexport type EditorNodeHeading2Props = Pick;\n\nexport const EditorNodeHeading2 = ({\n hideName = false,\n}: Pick) => {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n editor.chain().focus().toggleHeading({ level: 2 }).run()}\n hideName={hideName}\n icon={Heading2Icon}\n isActive={() => editor.isActive(\"heading\", { level: 2 }) ?? false}\n name=\"Heading 2\"\n />\n );\n};\n\nexport type EditorNodeHeading3Props = Pick;\n\nexport const EditorNodeHeading3 = ({\n hideName = false,\n}: Pick) => {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n editor.chain().focus().toggleHeading({ level: 3 }).run()}\n hideName={hideName}\n icon={Heading3Icon}\n isActive={() => editor.isActive(\"heading\", { level: 3 }) ?? false}\n name=\"Heading 3\"\n />\n );\n};\n\nexport type EditorNodeBulletListProps = Pick;\n\nexport const EditorNodeBulletList = ({\n hideName = false,\n}: Pick) => {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n editor.chain().focus().toggleBulletList().run()}\n hideName={hideName}\n icon={ListIcon}\n isActive={() => editor.isActive(\"bulletList\") ?? false}\n name=\"Bullet List\"\n />\n );\n};\n\nexport type EditorNodeOrderedListProps = Pick;\n\nexport const EditorNodeOrderedList = ({\n hideName = false,\n}: Pick) => {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n editor.chain().focus().toggleOrderedList().run()}\n hideName={hideName}\n icon={ListOrderedIcon}\n isActive={() => editor.isActive(\"orderedList\") ?? false}\n name=\"Numbered List\"\n />\n );\n};\n\nexport type EditorNodeTaskListProps = Pick;\n\nexport const EditorNodeTaskList = ({\n hideName = false,\n}: Pick) => {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n \n editor.chain().focus().toggleList(\"taskList\", \"taskItem\").run()\n }\n hideName={hideName}\n icon={CheckSquareIcon}\n isActive={() => editor.isActive(\"taskItem\") ?? false}\n name=\"To-do List\"\n />\n );\n};\n\nexport type EditorNodeQuoteProps = Pick;\n\nexport const EditorNodeQuote = ({\n hideName = false,\n}: Pick) => {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n \n editor\n .chain()\n .focus()\n .toggleNode(\"paragraph\", \"paragraph\")\n .toggleBlockquote()\n .run()\n }\n hideName={hideName}\n icon={TextQuoteIcon}\n isActive={() => editor.isActive(\"blockquote\") ?? false}\n name=\"Quote\"\n />\n );\n};\n\nexport type EditorNodeCodeProps = Pick;\n\nexport const EditorNodeCode = ({\n hideName = false,\n}: Pick) => {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n editor.chain().focus().toggleCodeBlock().run()}\n hideName={hideName}\n icon={CodeIcon}\n isActive={() => editor.isActive(\"codeBlock\") ?? false}\n name=\"Code\"\n />\n );\n};\n\nexport type EditorNodeTableProps = Pick;\n\nexport const EditorNodeTable = ({\n hideName = false,\n}: Pick) => {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n \n editor\n .chain()\n .focus()\n .insertTable({ rows: 3, cols: 3, withHeaderRow: true })\n .run()\n }\n hideName={hideName}\n icon={TableIcon}\n isActive={() => editor.isActive(\"table\") ?? false}\n name=\"Table\"\n />\n );\n};\n\nexport type EditorSelectorProps = HTMLAttributes & {\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n title: string;\n};\n\nexport const EditorSelector = ({\n open,\n onOpenChange,\n title,\n className,\n children,\n ...props\n}: EditorSelectorProps) => {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n \n \n \n {title}\n \n \n \n \n {children}\n \n \n );\n};\n\nexport type EditorFormatBoldProps = Pick;\n\nexport const EditorFormatBold = ({\n hideName = false,\n}: Pick) => {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n editor.chain().focus().toggleBold().run()}\n hideName={hideName}\n icon={BoldIcon}\n isActive={() => editor.isActive(\"bold\") ?? false}\n name=\"Bold\"\n />\n );\n};\n\nexport type EditorFormatItalicProps = Pick;\n\nexport const EditorFormatItalic = ({\n hideName = false,\n}: Pick) => {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n editor.chain().focus().toggleItalic().run()}\n hideName={hideName}\n icon={ItalicIcon}\n isActive={() => editor.isActive(\"italic\") ?? false}\n name=\"Italic\"\n />\n );\n};\n\nexport type EditorFormatStrikeProps = Pick;\n\nexport const EditorFormatStrike = ({\n hideName = false,\n}: Pick) => {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n editor.chain().focus().toggleStrike().run()}\n hideName={hideName}\n icon={StrikethroughIcon}\n isActive={() => editor.isActive(\"strike\") ?? false}\n name=\"Strikethrough\"\n />\n );\n};\n\nexport type EditorFormatCodeProps = Pick;\n\nexport const EditorFormatCode = ({\n hideName = false,\n}: Pick) => {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n editor.chain().focus().toggleCode().run()}\n hideName={hideName}\n icon={CodeIcon}\n isActive={() => editor.isActive(\"code\") ?? false}\n name=\"Code\"\n />\n );\n};\n\nexport type EditorFormatSubscriptProps = Pick;\n\nexport const EditorFormatSubscript = ({\n hideName = false,\n}: Pick) => {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n editor.chain().focus().toggleSubscript().run()}\n hideName={hideName}\n icon={SubscriptIcon}\n isActive={() => editor.isActive(\"subscript\") ?? false}\n name=\"Subscript\"\n />\n );\n};\n\nexport type EditorFormatSuperscriptProps = Pick;\n\nexport const EditorFormatSuperscript = ({\n hideName = false,\n}: Pick) => {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n editor.chain().focus().toggleSuperscript().run()}\n hideName={hideName}\n icon={SuperscriptIcon}\n isActive={() => editor.isActive(\"superscript\") ?? false}\n name=\"Superscript\"\n />\n );\n};\n\nexport type EditorFormatUnderlineProps = Pick;\n\nexport const EditorFormatUnderline = ({\n hideName = false,\n}: Pick) => {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n editor.chain().focus().toggleUnderline().run()}\n hideName={hideName}\n icon={UnderlineIcon}\n isActive={() => editor.isActive(\"underline\") ?? false}\n name=\"Underline\"\n />\n );\n};\n\nexport type EditorLinkSelectorProps = {\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n};\n\nexport const EditorLinkSelector = ({\n open,\n onOpenChange,\n}: EditorLinkSelectorProps) => {\n const [url, setUrl] = useState(\"\");\n const inputReference = useRef(null);\n const { editor } = useCurrentEditor();\n\n const isValidUrl = (text: string): boolean => {\n try {\n new URL(text);\n return true;\n } catch {\n return false;\n }\n };\n\n const getUrlFromString = (text: string): string | null => {\n if (isValidUrl(text)) {\n return text;\n }\n try {\n if (text.includes(\".\") && !text.includes(\" \")) {\n return new URL(`https://${text}`).toString();\n }\n\n return null;\n } catch {\n return null;\n }\n };\n\n useEffect(() => {\n inputReference.current?.focus();\n }, []);\n\n if (!editor) {\n return null;\n }\n\n const handleSubmit: FormEventHandler = (event) => {\n event.preventDefault();\n\n const href = getUrlFromString(url);\n\n if (href) {\n editor.chain().focus().setLink({ href }).run();\n onOpenChange?.(false);\n }\n };\n\n const defaultValue = (editor.getAttributes(\"link\") as { href?: string }).href;\n\n return (\n \n \n \n \n \n Link\n

\n \n \n \n
\n setUrl(event.target.value)}\n placeholder=\"Paste a link\"\n ref={inputReference}\n type=\"text\"\n value={url}\n />\n {editor.getAttributes(\"link\").href ? (\n {\n editor.chain().focus().unsetLink().run();\n onOpenChange?.(false);\n }}\n size=\"icon\"\n type=\"button\"\n variant=\"outline\"\n >\n \n \n ) : (\n \n )}\n \n
\n \n );\n};\n\nexport type EditorTableMenuProps = {\n children: ReactNode;\n};\n\nexport const EditorTableMenu = ({ children }: EditorTableMenuProps) => {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n const isActive = editor.isActive(\"table\");\n\n return (\n \n {children}\n \n );\n};\n\nexport type EditorTableGlobalMenuProps = {\n children: ReactNode;\n};\n\nexport const EditorTableGlobalMenu = ({\n children,\n}: EditorTableGlobalMenuProps) => {\n const { editor } = useCurrentEditor();\n const [top, setTop] = useState(0);\n const [left, setLeft] = useState(0);\n\n useEffect(() => {\n if (!editor) {\n return;\n }\n\n editor.on(\"selectionUpdate\", () => {\n const selection = window.getSelection();\n\n if (!selection) {\n return;\n }\n\n const range = selection.getRangeAt(0);\n let startContainer = range.startContainer as HTMLElement | string;\n\n if (!(startContainer instanceof HTMLElement)) {\n startContainer = range.startContainer.parentElement as HTMLElement;\n }\n\n const tableNode = startContainer.closest(\"table\");\n\n if (!tableNode) {\n return;\n }\n\n const tableRect = tableNode.getBoundingClientRect();\n\n setTop(tableRect.top + tableRect.height);\n setLeft(tableRect.left + tableRect.width / 2);\n });\n\n return () => {\n editor.off(\"selectionUpdate\");\n };\n }, [editor]);\n\n return (\n \n {children}\n \n );\n};\n\nexport type EditorTableColumnMenuProps = {\n children: ReactNode;\n};\n\nexport const EditorTableColumnMenu = ({\n children,\n}: EditorTableColumnMenuProps) => {\n const { editor } = useCurrentEditor();\n const [top, setTop] = useState(0);\n const [left, setLeft] = useState(0);\n\n useEffect(() => {\n if (!editor) {\n return;\n }\n\n editor.on(\"selectionUpdate\", () => {\n const selection = window.getSelection();\n\n if (!selection) {\n return;\n }\n\n const range = selection.getRangeAt(0);\n let startContainer = range.startContainer as HTMLElement | string;\n\n if (!(startContainer instanceof HTMLElement)) {\n startContainer = range.startContainer.parentElement as HTMLElement;\n }\n\n // Get the closest table cell (td or th)\n const tableCell = startContainer.closest(\"td, th\");\n\n if (!tableCell) {\n return;\n }\n\n const cellRect = tableCell.getBoundingClientRect();\n\n setTop(cellRect.top);\n setLeft(cellRect.left + cellRect.width / 2);\n });\n\n return () => {\n editor.off(\"selectionUpdate\");\n };\n }, [editor]);\n\n return (\n \n \n \n \n {children}\n \n );\n};\n\nexport type EditorTableRowMenuProps = {\n children: ReactNode;\n};\n\nexport const EditorTableRowMenu = ({ children }: EditorTableRowMenuProps) => {\n const { editor } = useCurrentEditor();\n const [top, setTop] = useState(0);\n const [left, setLeft] = useState(0);\n\n useEffect(() => {\n if (!editor) {\n return;\n }\n\n editor.on(\"selectionUpdate\", () => {\n const selection = window.getSelection();\n\n if (!selection) {\n return;\n }\n\n const range = selection.getRangeAt(0);\n let startContainer = range.startContainer as HTMLElement | string;\n\n if (!(startContainer instanceof HTMLElement)) {\n startContainer = range.startContainer.parentElement as HTMLElement;\n }\n\n const tableRow = startContainer.closest(\"tr\");\n\n if (!tableRow) {\n return;\n }\n\n const rowRect = tableRow.getBoundingClientRect();\n\n setTop(rowRect.top + rowRect.height / 2);\n setLeft(rowRect.left);\n });\n\n return () => {\n editor.off(\"selectionUpdate\");\n };\n }, [editor]);\n\n return (\n \n \n \n \n \n \n {children}\n \n );\n};\n\nexport const EditorTableColumnBefore = () => {\n const { editor } = useCurrentEditor();\n\n const handleClick = useCallback(() => {\n if (editor) {\n editor.chain().focus().addColumnBefore().run();\n }\n }, [editor]);\n\n if (!editor) {\n return null;\n }\n\n return (\n \n \n Add column before\n \n );\n};\n\nexport const EditorTableColumnAfter = () => {\n const { editor } = useCurrentEditor();\n\n const handleClick = useCallback(() => {\n if (editor) {\n editor.chain().focus().addColumnAfter().run();\n }\n }, [editor]);\n\n if (!editor) {\n return null;\n }\n\n return (\n \n \n Add column after\n \n );\n};\n\nexport const EditorTableRowBefore = () => {\n const { editor } = useCurrentEditor();\n\n const handleClick = useCallback(() => {\n if (editor) {\n editor.chain().focus().addRowBefore().run();\n }\n }, [editor]);\n\n if (!editor) {\n return null;\n }\n\n return (\n \n \n Add row before\n \n );\n};\n\nexport const EditorTableRowAfter = () => {\n const { editor } = useCurrentEditor();\n\n const handleClick = useCallback(() => {\n if (editor) {\n editor.chain().focus().addRowAfter().run();\n }\n }, [editor]);\n\n if (!editor) {\n return null;\n }\n\n return (\n \n \n Add row after\n \n );\n};\n\nexport const EditorTableColumnDelete = () => {\n const { editor } = useCurrentEditor();\n\n const handleClick = useCallback(() => {\n if (editor) {\n editor.chain().focus().deleteColumn().run();\n }\n }, [editor]);\n\n if (!editor) {\n return null;\n }\n\n return (\n \n \n Delete column\n \n );\n};\n\nexport const EditorTableRowDelete = () => {\n const { editor } = useCurrentEditor();\n\n const handleClick = useCallback(() => {\n if (editor) {\n editor.chain().focus().deleteRow().run();\n }\n }, [editor]);\n\n if (!editor) {\n return null;\n }\n\n return (\n \n \n Delete row\n \n );\n};\n\nexport const EditorTableHeaderColumnToggle = () => {\n const { editor } = useCurrentEditor();\n\n const handleClick = useCallback(() => {\n if (editor) {\n editor.chain().focus().toggleHeaderColumn().run();\n }\n }, [editor]);\n\n if (!editor) {\n return null;\n }\n\n return (\n \n \n \n \n \n \n \n Toggle header column\n \n \n );\n};\n\nexport const EditorTableHeaderRowToggle = () => {\n const { editor } = useCurrentEditor();\n\n const handleClick = useCallback(() => {\n if (editor) {\n editor.chain().focus().toggleHeaderRow().run();\n }\n }, [editor]);\n\n if (!editor) {\n return null;\n }\n\n return (\n \n \n \n \n \n \n \n Toggle header row\n \n \n );\n};\n\nexport const EditorTableDelete = () => {\n const { editor } = useCurrentEditor();\n\n const handleClick = useCallback(() => {\n if (editor) {\n editor.chain().focus().deleteTable().run();\n }\n }, [editor]);\n\n if (!editor) {\n return null;\n }\n\n return (\n \n \n \n \n \n \n \n Delete table\n \n \n );\n};\n\nexport const EditorTableMergeCells = () => {\n const { editor } = useCurrentEditor();\n\n const handleClick = useCallback(() => {\n if (editor) {\n editor.chain().focus().mergeCells().run();\n }\n }, [editor]);\n\n if (!editor) {\n return null;\n }\n\n return (\n \n \n \n \n \n \n \n Merge cells\n \n \n );\n};\n\nexport const EditorTableSplitCell = () => {\n const { editor } = useCurrentEditor();\n\n const handleClick = useCallback(() => {\n if (editor) {\n editor.chain().focus().splitCell().run();\n }\n }, [editor]);\n\n if (!editor) {\n return null;\n }\n\n return (\n \n \n \n \n \n \n \n Split cell\n \n \n );\n};\n\nexport const EditorTableFix = () => {\n const { editor } = useCurrentEditor();\n\n const handleClick = useCallback(() => {\n if (editor) {\n editor.chain().focus().fixTables().run();\n }\n }, [editor]);\n\n if (!editor) {\n return null;\n }\n\n return (\n \n \n \n \n \n \n \n Fix table\n \n \n );\n};\n\nexport type EditorCharacterCountProps = {\n children: ReactNode;\n className?: string;\n};\n\nexport const EditorCharacterCount = {\n Characters({ children, className }: EditorCharacterCountProps) {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n \n {children}\n {editor.storage.characterCount.characters()}\n \n );\n },\n\n Words({ children, className }: EditorCharacterCountProps) {\n const { editor } = useCurrentEditor();\n\n if (!editor) {\n return null;\n }\n\n return (\n \n {children}\n {editor.storage.characterCount.words()}\n \n );\n },\n};\n","target":"components/kibo-ui/editor/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"gantt","type":"registry:ui","title":"gantt","description":"The Gantt chart is a powerful tool for visualizing project schedules and tracking the progress of tasks. It provides a clear, hierarchical view of tasks, allowing you to easily identify manage project timelines.","author":"Hayden Bleasel ","dependencies":["@dnd-kit/core","@dnd-kit/modifiers","@uidotdev/usehooks","date-fns","jotai","lodash.throttle","lucide-react"],"devDependencies":["@types/lodash.throttle"],"registryDependencies":["card","context-menu"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n DndContext,\n MouseSensor,\n useDraggable,\n useSensor,\n} from \"@dnd-kit/core\";\nimport { restrictToHorizontalAxis } from \"@dnd-kit/modifiers\";\nimport { useMouse, useThrottle, useWindowScroll } from \"@uidotdev/usehooks\";\nimport {\n addDays,\n addMonths,\n differenceInDays,\n differenceInHours,\n differenceInMonths,\n endOfDay,\n endOfMonth,\n format,\n formatDate,\n formatDistance,\n getDate,\n getDaysInMonth,\n isSameDay,\n startOfDay,\n startOfMonth,\n} from \"date-fns\";\nimport { atom, useAtom } from \"jotai\";\nimport throttle from \"lodash.throttle\";\nimport { PlusIcon, TrashIcon } from \"lucide-react\";\nimport type {\n CSSProperties,\n FC,\n KeyboardEventHandler,\n MouseEventHandler,\n ReactNode,\n RefObject,\n} from \"react\";\nimport {\n createContext,\n memo,\n useCallback,\n useContext,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { Card } from \"@/components/ui/card\";\nimport {\n ContextMenu,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuTrigger,\n} from \"@/components/ui/context-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst draggingAtom = atom(false);\nconst scrollXAtom = atom(0);\n\nexport const useGanttDragging = () => useAtom(draggingAtom);\nexport const useGanttScrollX = () => useAtom(scrollXAtom);\n\nexport type GanttStatus = {\n id: string;\n name: string;\n color: string;\n};\n\nexport type GanttFeature = {\n id: string;\n name: string;\n startAt: Date;\n endAt: Date;\n status: GanttStatus;\n lane?: string; // Optional: features with the same lane will share a row\n};\n\nexport type GanttMarkerProps = {\n id: string;\n date: Date;\n label: string;\n};\n\nexport type Range = \"daily\" | \"monthly\" | \"quarterly\";\n\nexport type TimelineData = {\n year: number;\n quarters: {\n months: {\n days: number;\n }[];\n }[];\n}[];\n\nexport type GanttContextProps = {\n zoom: number;\n range: Range;\n columnWidth: number;\n sidebarWidth: number;\n headerHeight: number;\n rowHeight: number;\n onAddItem: ((date: Date) => void) | undefined;\n placeholderLength: number;\n timelineData: TimelineData;\n ref: RefObject | null;\n scrollToFeature?: (feature: GanttFeature) => void;\n};\n\nconst getsDaysIn = (range: Range) => {\n // For when range is daily\n let fn = (_date: Date) => 1;\n\n if (range === \"monthly\" || range === \"quarterly\") {\n fn = getDaysInMonth;\n }\n\n return fn;\n};\n\nconst getDifferenceIn = (range: Range) => {\n let fn = differenceInDays;\n\n if (range === \"monthly\" || range === \"quarterly\") {\n fn = differenceInMonths;\n }\n\n return fn;\n};\n\nconst getInnerDifferenceIn = (range: Range) => {\n let fn = differenceInHours;\n\n if (range === \"monthly\" || range === \"quarterly\") {\n fn = differenceInDays;\n }\n\n return fn;\n};\n\nconst getStartOf = (range: Range) => {\n let fn = startOfDay;\n\n if (range === \"monthly\" || range === \"quarterly\") {\n fn = startOfMonth;\n }\n\n return fn;\n};\n\nconst getEndOf = (range: Range) => {\n let fn = endOfDay;\n\n if (range === \"monthly\" || range === \"quarterly\") {\n fn = endOfMonth;\n }\n\n return fn;\n};\n\nconst getAddRange = (range: Range) => {\n let fn = addDays;\n\n if (range === \"monthly\" || range === \"quarterly\") {\n fn = addMonths;\n }\n\n return fn;\n};\n\nconst getDateByMousePosition = (context: GanttContextProps, mouseX: number) => {\n const timelineStartDate = new Date(context.timelineData[0].year, 0, 1);\n const columnWidth = (context.columnWidth * context.zoom) / 100;\n const offset = Math.floor(mouseX / columnWidth);\n const daysIn = getsDaysIn(context.range);\n const addRange = getAddRange(context.range);\n const month = addRange(timelineStartDate, offset);\n const daysInMonth = daysIn(month);\n const pixelsPerDay = Math.round(columnWidth / daysInMonth);\n const dayOffset = Math.floor((mouseX % columnWidth) / pixelsPerDay);\n const actualDate = addDays(month, dayOffset);\n\n return actualDate;\n};\n\nconst createInitialTimelineData = (today: Date) => {\n const data: TimelineData = [];\n\n data.push(\n { year: today.getFullYear() - 1, quarters: new Array(4).fill(null) },\n { year: today.getFullYear(), quarters: new Array(4).fill(null) },\n { year: today.getFullYear() + 1, quarters: new Array(4).fill(null) }\n );\n\n for (const yearObj of data) {\n yearObj.quarters = new Array(4).fill(null).map((_, quarterIndex) => ({\n months: new Array(3).fill(null).map((_, monthIndex) => {\n const month = quarterIndex * 3 + monthIndex;\n return {\n days: getDaysInMonth(new Date(yearObj.year, month, 1)),\n };\n }),\n }));\n }\n\n return data;\n};\n\nconst getOffset = (\n date: Date,\n timelineStartDate: Date,\n context: GanttContextProps\n) => {\n const parsedColumnWidth = (context.columnWidth * context.zoom) / 100;\n const differenceIn = getDifferenceIn(context.range);\n const startOf = getStartOf(context.range);\n const fullColumns = differenceIn(startOf(date), timelineStartDate);\n\n if (context.range === \"daily\") {\n return parsedColumnWidth * fullColumns;\n }\n\n const partialColumns = date.getDate();\n const daysInMonth = getDaysInMonth(date);\n const pixelsPerDay = parsedColumnWidth / daysInMonth;\n\n return fullColumns * parsedColumnWidth + partialColumns * pixelsPerDay;\n};\n\nconst getWidth = (\n startAt: Date,\n endAt: Date | null,\n context: GanttContextProps\n) => {\n const parsedColumnWidth = (context.columnWidth * context.zoom) / 100;\n\n if (!endAt) {\n return parsedColumnWidth * 2;\n }\n\n const differenceIn = getDifferenceIn(context.range);\n\n if (context.range === \"daily\") {\n const delta = differenceIn(endAt, startAt);\n\n return parsedColumnWidth * (delta ? delta : 1);\n }\n\n const daysInStartMonth = getDaysInMonth(startAt);\n const pixelsPerDayInStartMonth = parsedColumnWidth / daysInStartMonth;\n\n if (isSameDay(startAt, endAt)) {\n return pixelsPerDayInStartMonth;\n }\n\n const innerDifferenceIn = getInnerDifferenceIn(context.range);\n const startOf = getStartOf(context.range);\n\n if (isSameDay(startOf(startAt), startOf(endAt))) {\n return innerDifferenceIn(endAt, startAt) * pixelsPerDayInStartMonth;\n }\n\n const startRangeOffset = daysInStartMonth - getDate(startAt);\n const endRangeOffset = getDate(endAt);\n const fullRangeOffset = differenceIn(startOf(endAt), startOf(startAt));\n const daysInEndMonth = getDaysInMonth(endAt);\n const pixelsPerDayInEndMonth = parsedColumnWidth / daysInEndMonth;\n\n return (\n (fullRangeOffset - 1) * parsedColumnWidth +\n startRangeOffset * pixelsPerDayInStartMonth +\n endRangeOffset * pixelsPerDayInEndMonth\n );\n};\n\nconst calculateInnerOffset = (\n date: Date,\n range: Range,\n columnWidth: number\n) => {\n const startOf = getStartOf(range);\n const endOf = getEndOf(range);\n const differenceIn = getInnerDifferenceIn(range);\n const startOfRange = startOf(date);\n const endOfRange = endOf(date);\n const totalRangeDays = differenceIn(endOfRange, startOfRange);\n const dayOfMonth = date.getDate();\n\n return (dayOfMonth / totalRangeDays) * columnWidth;\n};\n\nconst GanttContext = createContext({\n zoom: 100,\n range: \"monthly\",\n columnWidth: 50,\n headerHeight: 60,\n sidebarWidth: 300,\n rowHeight: 36,\n onAddItem: undefined,\n placeholderLength: 2,\n timelineData: [],\n ref: null,\n scrollToFeature: undefined,\n});\n\nexport type GanttContentHeaderProps = {\n renderHeaderItem: (index: number) => ReactNode;\n title: string;\n columns: number;\n};\n\nexport const GanttContentHeader: FC = ({\n title,\n columns,\n renderHeaderItem,\n}) => {\n const id = useId();\n\n return (\n \n
\n \n

{title}

\n
\n \n \n {Array.from({ length: columns }).map((_, index) => (\n \n {renderHeaderItem(index)}\n \n ))}\n \n \n );\n};\n\nconst DailyHeader: FC = () => {\n const gantt = useContext(GanttContext);\n\n return gantt.timelineData.map((year) =>\n year.quarters\n .flatMap((quarter) => quarter.months)\n .map((month, index) => (\n
\n (\n
\n

\n {format(addDays(new Date(year.year, index, 1), item), \"d\")}\n

\n

\n {format(\n addDays(new Date(year.year, index, 1), item),\n \"EEEEE\"\n )}\n

\n
\n )}\n title={format(new Date(year.year, index, 1), \"MMMM yyyy\")}\n />\n \n [0, 6].includes(\n addDays(new Date(year.year, index, 1), item).getDay()\n )\n }\n />\n
\n ))\n );\n};\n\nconst MonthlyHeader: FC = () => {\n const gantt = useContext(GanttContext);\n\n return gantt.timelineData.map((year) => (\n
\n quarter.months).length}\n renderHeaderItem={(item: number) => (\n

{format(new Date(year.year, item, 1), \"MMM\")}

\n )}\n title={`${year.year}`}\n />\n quarter.months).length}\n />\n
\n ));\n};\n\nconst QuarterlyHeader: FC = () => {\n const gantt = useContext(GanttContext);\n\n return gantt.timelineData.map((year) =>\n year.quarters.map((quarter, quarterIndex) => (\n \n (\n

\n {format(new Date(year.year, quarterIndex * 3 + item, 1), \"MMM\")}\n

\n )}\n title={`Q${quarterIndex + 1} ${year.year}`}\n />\n \n \n ))\n );\n};\n\nconst headers: Record = {\n daily: DailyHeader,\n monthly: MonthlyHeader,\n quarterly: QuarterlyHeader,\n};\n\nexport type GanttHeaderProps = {\n className?: string;\n};\n\nexport const GanttHeader: FC = ({ className }) => {\n const gantt = useContext(GanttContext);\n const Header = headers[gantt.range];\n\n return (\n \n
\n \n );\n};\n\nexport type GanttSidebarItemProps = {\n feature: GanttFeature;\n onSelectItem?: (id: string) => void;\n className?: string;\n};\n\nexport const GanttSidebarItem: FC = ({\n feature,\n onSelectItem,\n className,\n}) => {\n const gantt = useContext(GanttContext);\n const tempEndAt =\n feature.endAt && isSameDay(feature.startAt, feature.endAt)\n ? addDays(feature.endAt, 1)\n : feature.endAt;\n const duration = tempEndAt\n ? formatDistance(feature.startAt, tempEndAt)\n : `${formatDistance(feature.startAt, new Date())} so far`;\n\n const handleClick: MouseEventHandler = (event) => {\n if (event.target === event.currentTarget) {\n // Scroll to the feature in the timeline\n gantt.scrollToFeature?.(feature);\n // Call the original onSelectItem callback\n onSelectItem?.(feature.id);\n }\n };\n\n const handleKeyDown: KeyboardEventHandler = (event) => {\n if (event.key === \"Enter\") {\n // Scroll to the feature in the timeline\n gantt.scrollToFeature?.(feature);\n // Call the original onSelectItem callback\n onSelectItem?.(feature.id);\n }\n };\n\n return (\n \n {/* */}\n \n

\n {feature.name}\n

\n

{duration}

\n \n );\n};\n\nexport const GanttSidebarHeader: FC = () => (\n \n {/* */}\n

Issues

\n

Duration

\n \n);\n\nexport type GanttSidebarGroupProps = {\n children: ReactNode;\n name: string;\n className?: string;\n};\n\nexport const GanttSidebarGroup: FC = ({\n children,\n name,\n className,\n}) => (\n
\n \n {name}\n

\n
{children}
\n
\n);\n\nexport type GanttSidebarProps = {\n children: ReactNode;\n className?: string;\n};\n\nexport const GanttSidebar: FC = ({\n children,\n className,\n}) => (\n \n \n
{children}
\n \n);\n\nexport type GanttAddFeatureHelperProps = {\n top: number;\n className?: string;\n};\n\nexport const GanttAddFeatureHelper: FC = ({\n top,\n className,\n}) => {\n const [scrollX] = useGanttScrollX();\n const gantt = useContext(GanttContext);\n const [mousePosition, mouseRef] = useMouse();\n\n const handleClick = () => {\n const ganttRect = gantt.ref?.current?.getBoundingClientRect();\n const x =\n mousePosition.x - (ganttRect?.left ?? 0) + scrollX - gantt.sidebarWidth;\n const currentDate = getDateByMousePosition(gantt, x);\n\n gantt.onAddItem?.(currentDate);\n };\n\n return (\n \n \n \n \n \n );\n};\n\nexport type GanttColumnProps = {\n index: number;\n isColumnSecondary?: (item: number) => boolean;\n};\n\nexport const GanttColumn: FC = ({\n index,\n isColumnSecondary,\n}) => {\n const gantt = useContext(GanttContext);\n const [dragging] = useGanttDragging();\n const [mousePosition, mouseRef] = useMouse();\n const [hovering, setHovering] = useState(false);\n const [windowScroll] = useWindowScroll();\n\n const handleMouseEnter = () => setHovering(true);\n const handleMouseLeave = () => setHovering(false);\n\n const top = useThrottle(\n mousePosition.y -\n (mouseRef.current?.getBoundingClientRect().y ?? 0) -\n (windowScroll.y ?? 0),\n 10\n );\n\n return (\n // biome-ignore lint/a11y/noStaticElementInteractions: \"This is a clickable column\"\n // biome-ignore lint/nursery/noNoninteractiveElementInteractions: \"This is a clickable column\"\n \n {!dragging && hovering && gantt.onAddItem ? (\n \n ) : null}\n \n );\n};\n\nexport type GanttColumnsProps = {\n columns: number;\n isColumnSecondary?: (item: number) => boolean;\n};\n\nexport const GanttColumns: FC = ({\n columns,\n isColumnSecondary,\n}) => {\n const id = useId();\n\n return (\n \n {Array.from({ length: columns }).map((_, index) => (\n \n ))}\n \n );\n};\n\nexport type GanttCreateMarkerTriggerProps = {\n onCreateMarker: (date: Date) => void;\n className?: string;\n};\n\nexport const GanttCreateMarkerTrigger: FC = ({\n onCreateMarker,\n className,\n}) => {\n const gantt = useContext(GanttContext);\n const [mousePosition, mouseRef] = useMouse();\n const [windowScroll] = useWindowScroll();\n const x = useThrottle(\n mousePosition.x -\n (mouseRef.current?.getBoundingClientRect().x ?? 0) -\n (windowScroll.x ?? 0),\n 10\n );\n\n const date = getDateByMousePosition(gantt, x);\n\n const handleClick = () => onCreateMarker(date);\n\n return (\n \n \n \n \n \n
\n {formatDate(date, \"MMM dd, yyyy\")}\n
\n \n \n );\n};\n\nexport type GanttFeatureDragHelperProps = {\n featureId: GanttFeature[\"id\"];\n direction: \"left\" | \"right\";\n date: Date | null;\n};\n\nexport const GanttFeatureDragHelper: FC = ({\n direction,\n featureId,\n date,\n}) => {\n const [, setDragging] = useGanttDragging();\n const { attributes, listeners, setNodeRef } = useDraggable({\n id: `feature-drag-helper-${featureId}`,\n });\n\n const isPressed = Boolean(attributes[\"aria-pressed\"]);\n\n useEffect(() => setDragging(isPressed), [isPressed, setDragging]);\n\n return (\n \n \n {date && (\n