4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4e:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 50:T1107,"use client"; import * as React from "react"; import { useMorph } from "@/lib/cojeev-motion/use-morph"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { Icon } from "@/components/ui/icon"; import * as Primitive from "@radix-ui/react-toast"; import { useFlowAppearance } from "@/lib/cojeev-motion/use-flow"; export const toastVariants = cva( "v-toast [display:flex] [align-items:center] [gap:var(--s-3)] [padding:var(--s-3)_var(--s-4)] [border-radius:var(--r-card-sm)] [background:var(--v-ink)] [color:var(--v-on-ink)] [font-size:var(--fs-control)]", { variants: { variant: { default: "", cream: "-cream", danger: "-danger" } }, defaultVariants: { variant: "default" }, }, ); export type ToastProviderProps = React.ComponentProps< typeof Primitive.Provider >; export function ToastProvider(props: ToastProviderProps) { return ; } export type ToastViewportProps = React.ComponentProps< typeof Primitive.Viewport >; export function ToastViewport({ className, ...props }: ToastViewportProps) { return ( ); } export type ToastProps = React.ComponentProps & VariantProps & { durable?: boolean; appearance?: "compact" | "actionable" | "receipt"; }; export function Toast({ className, variant, appearance, durable, duration, ref, ...props }: ToastProps) { const morphRef = useMorph("surfaces", ref); const flowRef = useFlowAppearance( props.open ?? true, morphRef, "enter", ); return ( ); } export type ToastTitleProps = React.ComponentProps; export function ToastTitle({ className, ...props }: ToastTitleProps) { return ( ); } export type ToastDescriptionProps = React.ComponentProps< typeof Primitive.Description >; export function ToastDescription({ className, ...props }: ToastDescriptionProps) { return ( ); } export type ToastActionProps = React.ComponentProps; export function ToastAction({ className, asChild, children, ...props }: ToastActionProps) { return ( {asChild ? ( children ) : ( )} ); } export type ToastCloseProps = React.ComponentProps; export function ToastClose({ className, children, asChild, ...props }: ToastCloseProps) { return ( {asChild ? ( children ) : ( )} ); } export function ToastIndicator({ className, ...props }: React.ComponentProps<"span">) { return ( ); } 51:T1762,@layer cojeev-states { /* Cojeev authored subparts, state precedence, and irreducible shapes; scoped to this registry item. */ .v-toast:where([data-slot="toast"], [data-slot^="toast-"]).-danger { color: var(--destructive-foreground); } .v-toaster:where([data-slot="toast"], [data-slot^="toast-"]) { position: fixed; right: var(--s-6); bottom: var(--s-6); display: grid; gap: var(--s-2); z-index: var(--z-toast); width: min(380px, calc(100% - 48px)); } .v-toast:where([data-slot="toast"], [data-slot^="toast-"]) { animation: v-toast-in var(--t-max) var(--enter); } .v-toast:where([data-slot="toast"], [data-slot^="toast-"]).-cream { background: var(--v-canvas); color: var(--v-text); border: 1px solid var(--v-border); } .v-toast:where([data-slot="toast"], [data-slot^="toast-"]).-danger { background: var(--v-danger-fill); color: var(--destructive-foreground); } .v-toast:where([data-slot="toast"], [data-slot^="toast-"]) .v-btn { height: 30px; padding: 0 12px; font-size: 12px; margin-left: auto; background: rgba(251, 244, 230, 0.14); color: inherit; } .v-toast:where([data-slot="toast"], [data-slot^="toast-"]).-cream .v-btn { background: var(--v-beige); } .v-toast:where([data-slot="toast"], [data-slot^="toast-"]).-out { animation: v-toast-out var(--t-element) var(--exit) forwards; } @keyframes v-toast-in { from { opacity: 0; transform: translateY(8px); } } @keyframes v-toast-out { to { opacity: 0; transform: translateY(8px); } } @media (prefers-reduced-motion: reduce) { [data-slot="toast"], [data-slot^="toast-"], [data-slot="toast"]::before, [data-slot="toast"]::after, [data-slot^="toast-"]::before, [data-slot^="toast-"]::after { animation-duration: 0s; animation-iteration-count: 1; transition-duration: 0s; scroll-behavior: auto; } } [data-slot="toast"][data-state="closed"] { animation: v-toast-out var(--t-element) var(--exit) forwards; } [data-slot="toast"][data-swipe="move"] { transform: translateX(var(--radix-toast-swipe-move-x)); } [data-slot="toast"][data-swipe="end"] { transform: translateX(var(--radix-toast-swipe-end-x)); opacity: 0; } [data-slot="toast"] { min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere; } [data-slot="toast-title"], [data-slot="toast-description"] { min-width: 0; } [data-slot="toast-action"], [data-slot="toast-close"] { flex-shrink: 0; } /* Explicit hierarchy; title and description no longer compete in one flex row. */ .v-toast[data-appearance] { display: grid; grid-template-columns: 36px minmax(0, 1fr) 44px; grid-template-areas: "icon title close" "icon description close" ". action ."; align-items: center; column-gap: 12px; row-gap: 6px; width: 100%; padding: 16px; border-radius: 20px; background: var(--card); color: var(--v-text); border: 1px solid var(--v-border); } .v-toast[data-appearance] [data-slot="toast-title"] { grid-area: title; font-size: 15px; font-weight: 600; line-height: 1.35; } .v-toast[data-appearance] [data-slot="toast-description"] { grid-area: description; font-size: 13px; color: var(--toast-secondary, var(--v-text-2)); line-height: 1.6; } .v-toast[data-appearance] [data-slot="toast-indicator"] { grid-area: icon; align-self: start; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 42% 58% 52% 48%; background: var(--v-olive); color: var(--v-on-accent); } :root .v-toast[data-appearance] .v-btn[data-slot="toast-action"] { grid-area: action; justify-self: start; margin: 6px 0 0; min-height: 44px; background: var(--v-blue); color: var(--v-on-accent); padding-inline: 18px; font-size: 13px; } :root .v-toast[data-appearance] .v-btn[data-slot="toast-close"] { grid-area: close; align-self: start; margin: 0; width: 44px; height: 44px; background: transparent; color: inherit; } .v-toast[data-appearance]:not(.-cream):not(.-danger) { background: var(--v-ink); color: var(--v-on-ink); --toast-primary: var(--v-on-ink); --toast-secondary: var(--v-on-ink); } .v-toast[data-appearance].-danger { background: var(--v-danger-fill); color: var(--destructive-foreground); --toast-primary: var(--destructive-foreground); --toast-secondary: var(--destructive-foreground); } .v-toast[data-appearance="compact"] { grid-template-areas: "icon title close"; padding: 10px 12px; border-radius: 999px; } .v-toast[data-appearance="compact"] [data-slot="toast-indicator"] { align-self: center; } .v-toast[data-appearance="receipt"] { grid-template-areas: "icon title close" "icon description close" "receipt receipt receipt"; padding: 20px; border-radius: 20px 20px 8px 8px; } .v-toast__receipt { grid-area: receipt; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 16px; margin-top: 12px; border-top: 1px dashed var(--v-border); font-size: 11px; color: var(--toast-secondary, var(--v-text-2)); } .v-toast__receipt > span { display: grid; gap: 6px; } .v-toast__receipt strong { font-size: 12px; font-weight: 500; color: var(--toast-primary, var(--v-text)); } .v-toast-demo { width: 100%; display: grid; justify-items: start; gap: 16px; } .v-toast-demo__status { font-size: 13px; color: var(--v-text-2); } .v-toast-demo .v-toast-demo__viewport { position: static; width: min(100%, 440px); margin: 0; padding: 0; justify-self: end; list-style: none; outline: none; } .v-toast-demo .v-toast-demo__viewport:empty { display: none; } .v-toast[data-flow-presence][data-state="open"] { animation: none; } .v-toast[data-flow-presence][data-state="closed"] { animation: v-toast-retain var(--flow-exit-duration, 0.22s) linear; } @keyframes v-toast-retain { from { visibility: visible; } to { visibility: visible; } } @media (prefers-reduced-motion: reduce) { .v-toast[data-flow-presence][data-state="closed"] { animation: none; } } } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","@radix-ui/react-toast",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-toast","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-toast"}]]}]}]]}],["$","$L4c",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/button.json","https://000h.cojeev.com/r/icon.json"]}]]}],["$","$L4d",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4e",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/toast.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/toast.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/toast.css","content":"$51","type":"registry:file","target":"styles/cojeev/toast.css"}],"className":"h-[70svh] min-h-80"}]]}]