{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"callout","type":"registry:ui","title":"Callout","description":"Callout from react-fancy","package":"react-fancy","dependencies":["lucide-react"],"registryDependencies":[],"files":[{"path":"components\/fancy\/callout\/Callout.colors.ts","content":"\/\/ AUTO-GENERATED by scripts\/gen-callout-colors \u2014 do not edit by hand.\r\n\/\/ Literal Tailwind class strings for every color in the v4 palette so the\r\n\/\/ scanner can detect them in the published dist (template-built names are\r\n\/\/ invisible to Tailwind's JIT). Regenerate after changing the palette.\r\nimport type { Color } from \"..\/..\/utils\/types\";\r\n\r\nexport const calloutContainer: Record<Color, string> = {\r\n  slate: \"border-slate-500 bg-slate-50 text-slate-900 dark:border-slate-400 dark:bg-slate-950\/50 dark:text-slate-100\",\r\n  gray: \"border-gray-500 bg-gray-50 text-gray-900 dark:border-gray-400 dark:bg-gray-950\/50 dark:text-gray-100\",\r\n  zinc: \"border-zinc-500 bg-zinc-50 text-zinc-900 dark:border-zinc-400 dark:bg-zinc-950\/50 dark:text-zinc-100\",\r\n  neutral: \"border-neutral-500 bg-neutral-50 text-neutral-900 dark:border-neutral-400 dark:bg-neutral-950\/50 dark:text-neutral-100\",\r\n  stone: \"border-stone-500 bg-stone-50 text-stone-900 dark:border-stone-400 dark:bg-stone-950\/50 dark:text-stone-100\",\r\n  red: \"border-red-500 bg-red-50 text-red-900 dark:border-red-400 dark:bg-red-950\/50 dark:text-red-100\",\r\n  orange: \"border-orange-500 bg-orange-50 text-orange-900 dark:border-orange-400 dark:bg-orange-950\/50 dark:text-orange-100\",\r\n  amber: \"border-amber-500 bg-amber-50 text-amber-900 dark:border-amber-400 dark:bg-amber-950\/50 dark:text-amber-100\",\r\n  yellow: \"border-yellow-500 bg-yellow-50 text-yellow-900 dark:border-yellow-400 dark:bg-yellow-950\/50 dark:text-yellow-100\",\r\n  lime: \"border-lime-500 bg-lime-50 text-lime-900 dark:border-lime-400 dark:bg-lime-950\/50 dark:text-lime-100\",\r\n  green: \"border-green-500 bg-green-50 text-green-900 dark:border-green-400 dark:bg-green-950\/50 dark:text-green-100\",\r\n  emerald: \"border-emerald-500 bg-emerald-50 text-emerald-900 dark:border-emerald-400 dark:bg-emerald-950\/50 dark:text-emerald-100\",\r\n  teal: \"border-teal-500 bg-teal-50 text-teal-900 dark:border-teal-400 dark:bg-teal-950\/50 dark:text-teal-100\",\r\n  cyan: \"border-cyan-500 bg-cyan-50 text-cyan-900 dark:border-cyan-400 dark:bg-cyan-950\/50 dark:text-cyan-100\",\r\n  sky: \"border-sky-500 bg-sky-50 text-sky-900 dark:border-sky-400 dark:bg-sky-950\/50 dark:text-sky-100\",\r\n  blue: \"border-blue-500 bg-blue-50 text-blue-900 dark:border-blue-400 dark:bg-blue-950\/50 dark:text-blue-100\",\r\n  indigo: \"border-indigo-500 bg-indigo-50 text-indigo-900 dark:border-indigo-400 dark:bg-indigo-950\/50 dark:text-indigo-100\",\r\n  violet: \"border-violet-500 bg-violet-50 text-violet-900 dark:border-violet-400 dark:bg-violet-950\/50 dark:text-violet-100\",\r\n  purple: \"border-purple-500 bg-purple-50 text-purple-900 dark:border-purple-400 dark:bg-purple-950\/50 dark:text-purple-100\",\r\n  fuchsia: \"border-fuchsia-500 bg-fuchsia-50 text-fuchsia-900 dark:border-fuchsia-400 dark:bg-fuchsia-950\/50 dark:text-fuchsia-100\",\r\n  pink: \"border-pink-500 bg-pink-50 text-pink-900 dark:border-pink-400 dark:bg-pink-950\/50 dark:text-pink-100\",\r\n  rose: \"border-rose-500 bg-rose-50 text-rose-900 dark:border-rose-400 dark:bg-rose-950\/50 dark:text-rose-100\",\r\n};\r\n\r\nexport const calloutIcon: Record<Color, string> = {\r\n  slate: \"text-slate-500 dark:text-slate-400\",\r\n  gray: \"text-gray-500 dark:text-gray-400\",\r\n  zinc: \"text-zinc-500 dark:text-zinc-400\",\r\n  neutral: \"text-neutral-500 dark:text-neutral-400\",\r\n  stone: \"text-stone-500 dark:text-stone-400\",\r\n  red: \"text-red-500 dark:text-red-400\",\r\n  orange: \"text-orange-500 dark:text-orange-400\",\r\n  amber: \"text-amber-500 dark:text-amber-400\",\r\n  yellow: \"text-yellow-500 dark:text-yellow-400\",\r\n  lime: \"text-lime-500 dark:text-lime-400\",\r\n  green: \"text-green-500 dark:text-green-400\",\r\n  emerald: \"text-emerald-500 dark:text-emerald-400\",\r\n  teal: \"text-teal-500 dark:text-teal-400\",\r\n  cyan: \"text-cyan-500 dark:text-cyan-400\",\r\n  sky: \"text-sky-500 dark:text-sky-400\",\r\n  blue: \"text-blue-500 dark:text-blue-400\",\r\n  indigo: \"text-indigo-500 dark:text-indigo-400\",\r\n  violet: \"text-violet-500 dark:text-violet-400\",\r\n  purple: \"text-purple-500 dark:text-purple-400\",\r\n  fuchsia: \"text-fuchsia-500 dark:text-fuchsia-400\",\r\n  pink: \"text-pink-500 dark:text-pink-400\",\r\n  rose: \"text-rose-500 dark:text-rose-400\",\r\n};\r\n","type":"registry:ui","target":"components\/fancy\/callout\/Callout.colors.ts"},{"path":"components\/fancy\/callout\/Callout.tsx","content":"import { forwardRef } from \"react\";\r\nimport { X } from \"lucide-react\";\r\nimport { cn } from \"..\/..\/utils\/cn\";\r\nimport type { CalloutProps } from \".\/Callout.types\";\r\nimport { calloutContainer, calloutIcon } from \".\/Callout.colors\";\r\n\r\nexport const Callout = forwardRef<HTMLDivElement, CalloutProps>(\r\n  (\r\n    {\r\n      children,\r\n      color = \"blue\",\r\n      icon,\r\n      dismissible = false,\r\n      onDismiss,\r\n      className,\r\n    },\r\n    ref,\r\n  ) => {\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        role=\"alert\"\r\n        data-react-fancy-callout=\"\"\r\n        className={cn(\r\n          \"flex items-start gap-3 rounded-lg border-l-4 p-4\",\r\n          calloutContainer[color],\r\n          className,\r\n        )}\r\n      >\r\n        {icon && (\r\n          <span className={cn(\"mt-0.5 shrink-0\", calloutIcon[color])}>\r\n            {icon}\r\n          <\/span>\r\n        )}\r\n        <div className=\"min-w-0 flex-1\">{children}<\/div>\r\n        {dismissible && (\r\n          <button\r\n            type=\"button\"\r\n            onClick={onDismiss}\r\n            className={cn(\r\n              \"shrink-0 rounded p-0.5 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-current\",\r\n            )}\r\n            aria-label=\"Dismiss\"\r\n          >\r\n            <X size={16} \/>\r\n          <\/button>\r\n        )}\r\n      <\/div>\r\n    );\r\n  },\r\n);\r\n\r\nCallout.displayName = \"Callout\";\r\n","type":"registry:ui","target":"components\/fancy\/callout\/Callout.tsx"},{"path":"components\/fancy\/callout\/Callout.types.ts","content":"import type { ReactNode } from \"react\";\r\nimport type { Color } from \"..\/..\/utils\/types\";\r\n\r\nexport interface CalloutProps {\r\n  children: ReactNode;\r\n  color?: Color;\r\n  icon?: ReactNode;\r\n  dismissible?: boolean;\r\n  onDismiss?: () => void;\r\n  className?: string;\r\n}\r\n","type":"registry:ui","target":"components\/fancy\/callout\/Callout.types.ts"},{"path":"components\/fancy\/callout\/index.ts","content":"export { Callout } from \".\/Callout\";\r\nexport type { CalloutProps } from \".\/Callout.types\";\r\n","type":"registry:ui","target":"components\/fancy\/callout\/index.ts"}]}