{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toast",
  "title": "UI Toast",
  "description": "A toast notification whose hidden/visible state is a pure function of the timeline. The Toast renderer is a pure function of a ToastStyle (opacity, translateY, scale); useToastTransition eases both the slide-in enter and the auto-dismiss exit. Variants default/success/error change the leading icon and its color.",
  "dependencies": ["remotion"],
  "registryDependencies": ["@remocn/remocn-ui"],
  "files": [
    {
      "path": "registry/remocn-ui/toast/index.tsx",
      "content": "\"use client\";\n\nimport { type RemocnTheme, useRemocnTheme } from \"@/lib/remocn-ui\";\n\nexport type ToastState = \"hidden\" | \"visible\";\n\nexport type ToastVariant = \"default\" | \"success\" | \"error\";\n\nexport interface ToastProps {\n  state?: ToastState;\n  style?: ToastStyle;\n  title: string;\n  description?: string;\n  variant?: ToastVariant;\n  theme?: Partial<RemocnTheme>;\n  className?: string;\n}\n\nconst TOAST_WIDTH = 356;\n\nexport interface ToastStyle {\n  opacity: number;\n  translateY: number;\n  scale: number;\n}\n\nexport interface ToastStyleContext {\n  iconColor: string;\n}\n\nexport function toastStyleContext(\n  variant: ToastVariant,\n  theme: RemocnTheme,\n): ToastStyleContext {\n  if (variant === \"success\") return { iconColor: \"oklch(0.6 0.17 150)\" };\n  if (variant === \"error\") return { iconColor: theme.destructive };\n  return { iconColor: theme.mutedForeground };\n}\n\nexport function toastStyle(state: ToastState): ToastStyle {\n  switch (state) {\n    case \"visible\":\n      return { opacity: 1, translateY: 0, scale: 1 };\n    default:\n      return { opacity: 0, translateY: 16, scale: 0.97 };\n  }\n}\n\nfunction ToastIcon({\n  variant,\n  color,\n}: {\n  variant: ToastVariant;\n  color: string;\n}) {\n  if (variant === \"success\") {\n    return (\n      <svg width={18} height={18} viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke={color} strokeWidth=\"2\" />\n        <path\n          d=\"M8 12.5l2.6 2.6L16 9\"\n          stroke={color}\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    );\n  }\n  if (variant === \"error\") {\n    return (\n      <svg width={18} height={18} viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke={color} strokeWidth=\"2\" />\n        <path\n          d=\"M12 7.5v5\"\n          stroke={color}\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n        <circle cx=\"12\" cy=\"16\" r=\"1.1\" fill={color} />\n      </svg>\n    );\n  }\n  return (\n    <svg width={18} height={18} viewBox=\"0 0 24 24\" fill=\"none\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke={color} strokeWidth=\"2\" />\n      <path d=\"M12 11v5\" stroke={color} strokeWidth=\"2\" strokeLinecap=\"round\" />\n      <circle cx=\"12\" cy=\"8\" r=\"1.1\" fill={color} />\n    </svg>\n  );\n}\n\nexport function Toast({\n  state = \"hidden\",\n  style,\n  title,\n  description,\n  variant = \"default\",\n  theme: themeOverride,\n  className,\n}: ToastProps) {\n  const theme = useRemocnTheme(themeOverride, \"light\");\n  const ctx = toastStyleContext(variant, theme);\n  const v = style ?? toastStyle(state);\n\n  return (\n    <div\n      className={className}\n      style={{\n        display: \"flex\",\n\n        alignItems: description ? \"flex-start\" : \"center\",\n        gap: 12,\n        width: TOAST_WIDTH,\n        padding: \"16px\",\n        background: theme.popover,\n        color: theme.popoverForeground,\n        border: `1px solid ${theme.border}`,\n        borderRadius: theme.radius,\n        boxShadow:\n          \"0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)\",\n        opacity: v.opacity,\n        transform: `translateY(${v.translateY}px) scale(${v.scale})`,\n        transformOrigin: \"bottom center\",\n        fontFamily:\n          \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\",\n      }}\n    >\n      <span\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          marginTop: description ? 1 : 0,\n        }}\n      >\n        <ToastIcon variant={variant} color={ctx.iconColor} />\n      </span>\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: 4,\n          minWidth: 0,\n        }}\n      >\n        <span\n          style={{\n            fontSize: 14,\n            fontWeight: 500,\n            lineHeight: 1.3,\n            letterSpacing: \"-0.01em\",\n          }}\n        >\n          {title}\n        </span>\n        {description !== undefined && (\n          <span\n            style={{\n              fontSize: 13,\n              lineHeight: 1.4,\n              color: theme.mutedForeground,\n            }}\n          >\n            {description}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/toast.tsx"
    },
    {
      "path": "registry/remocn-ui/toast/use-toast-transition.ts",
      "content": "\"use client\";\n\nimport {\n  type ToastState,\n  type ToastStyle,\n  toastStyle,\n} from \"@/components/remocn/toast\";\nimport { easings, type Step, useStateTransition } from \"@/lib/remocn-ui\";\n\nexport const DEFAULT_DURATION = 12;\n\nexport function tweenToastStyle(\n  a: ToastStyle,\n  b: ToastStyle,\n  t: number,\n): ToastStyle {\n  return {\n    opacity: a.opacity + (b.opacity - a.opacity) * t,\n    translateY: a.translateY + (b.translateY - a.translateY) * t,\n    scale: a.scale + (b.scale - a.scale) * t,\n  };\n}\n\nexport interface ToastTransitionOptions {\n  mode?: \"light\" | \"dark\";\n  speed?: number;\n  defaultDuration?: number;\n}\n\nexport function useToastTransition(\n  steps: Step<ToastState>[],\n  opts: ToastTransitionOptions = {},\n): ToastStyle {\n  const { speed = 1, defaultDuration = DEFAULT_DURATION } = opts;\n  const { from, to, progress } = useStateTransition(\n    steps,\n    \"hidden\",\n    speed,\n    defaultDuration,\n  );\n  const t = easings.out(progress);\n  return tweenToastStyle(toastStyle(from), toastStyle(to), t);\n}\n",
      "type": "registry:component",
      "target": "components/remocn/use-toast-transition.ts"
    }
  ],
  "type": "registry:component"
}