63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T2a8e,"use client"; import { useState, type CSSProperties, type ReactNode } from "react"; export type BadgePingCounterProps = { /** Starting count for the uncontrolled counter. Default 0. */ initialCount?: number; /** Controlled count. When set, the component only reports clicks via onCountChange. */ count?: number; /** Called with count + 1 on every press. */ onCountChange?: (next: number) => void; /** Counts above this show as "99+". Default 99. */ max?: number; /** Show a plain dot instead of a number. */ dot?: boolean; /** Built-in icon, or pass children to draw your own (an avatar, a logo). */ icon?: "bell" | "inbox"; /** Accessible name of the button. Default "Notifications". */ label?: string; /** Badge colour (hex, rgb or hsl). Default #ef4444. */ color?: string; /** Button diameter in px. Default 44. */ size?: number; /** "light" inherits the page and works on white; "dark" paints pale-on-black. */ tone?: "light" | "dark"; /** Custom icon content; replaces the built-in icon. */ children?: ReactNode; className?: string; }; const COLOR_RE = /^(#[0-9a-f]{3,8}|(rgb|hsl)a?$[0-9.,%\s/-]+$)$/i; const CSS = [ ".bpc{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;cursor:pointer;color:var(--bpc-fg,#737373);", "background:color-mix(in srgb,currentColor 4%,transparent);border:1px solid color-mix(in srgb,currentColor 24%,transparent);", "transition:transform .38s cubic-bezier(.34,1.56,.64,1),background-color .2s,border-color .2s,color .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}", ".bpc[data-tone=dark]{--bpc-fg:rgba(255,255,255,.74);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px -12px rgba(0,0,0,.8)}", ".bpc:hover{background:color-mix(in srgb,currentColor 9%,transparent);border-color:color-mix(in srgb,currentColor 40%,transparent)}", ".bpc[data-tone=dark]:hover{background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04));border-color:rgba(255,255,255,.22);color:#fff}", ".bpc:active{transform:scale(.9);transition-duration:.1s}", ".bpc-ico{display:flex;align-items:center;justify-content:center;transform-origin:50% 12%;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}", ".bpc:hover .bpc-ico{transform:scale(1.08)}", ".bpc-ico[data-s]{animation:bpc-swing .8s cubic-bezier(.36,.07,.19,.97) both}", ".bpc-ico[data-s=hop]{animation:bpc-hop .55s cubic-bezier(.34,1.56,.64,1) both}", ".bpc-slot{position:absolute;top:calc(-4px*var(--bpc-k,1));right:calc(-4px*var(--bpc-k,1));display:block;z-index:2;pointer-events:none}", ".bpc-slot[data-up]{animation:bpc-pop .55s cubic-bezier(.34,1.56,.64,1) both}", ".bpc-slot[data-dn]{animation:bpc-dip .32s cubic-bezier(.2,.8,.2,1) both}", ".bpc-slot[data-out]{animation:bpc-out .28s cubic-bezier(.4,0,1,1) forwards}", ".bpc-pill{position:relative;display:flex;align-items:center;justify-content:center;height:calc(20px*var(--bpc-k,1));min-width:calc(20px*var(--bpc-k,1));padding:0 calc(6px*var(--bpc-k,1));border-radius:999px;box-sizing:border-box;", "background:linear-gradient(180deg,color-mix(in srgb,var(--bpc-c) 82%,#fff),var(--bpc-c) 55%,color-mix(in srgb,var(--bpc-c) 82%,#000));", "color:#fff;font:700 calc(11px*var(--bpc-k,1))/1 ui-sans-serif,system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.01em;", "box-shadow:0 0 0 2px var(--bpc-cut,transparent),0 6px 14px -4px color-mix(in srgb,var(--bpc-c) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}", ".bpc-pill[data-dot]{height:calc(11px*var(--bpc-k,1));min-width:calc(11px*var(--bpc-k,1));width:calc(11px*var(--bpc-k,1));padding:0}", ".bpc-num{position:relative;display:block;overflow:hidden;height:calc(14px*var(--bpc-k,1));line-height:calc(14px*var(--bpc-k,1));text-align:center}", ".bpc-num>span{display:block;white-space:nowrap}", ".bpc-num[data-roll]>span:first-child{visibility:hidden}", ".bpc-num[data-roll]>span+span{position:absolute;left:0;right:0;top:0}", ".bpc-in{animation:bpc-up .46s cubic-bezier(.2,.9,.25,1.12) both}", ".bpc-in[data-d]{animation-name:bpc-dn}", ".bpc-gone{animation:bpc-away .3s cubic-bezier(.4,0,.6,1) both}", ".bpc-gone[data-d]{animation-name:bpc-away-d}", ".bpc-ring{position:absolute;inset:0;border-radius:999px;pointer-events:none;z-index:-1}", ".bpc-ring[data-a]{background:var(--bpc-c);animation:bpc-ping .8s cubic-bezier(0,0,.2,1) both}", ".bpc-ring[data-b]{border:2px solid var(--bpc-c);animation:bpc-ping2 1s cubic-bezier(0,0,.2,1) .1s both}", ".bpc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}", "@keyframes bpc-pop{0%{transform:scale(.4)}55%{transform:scale(1.28)}100%{transform:scale(1)}}", "@keyframes bpc-dip{0%{transform:scale(1)}40%{transform:scale(.82)}100%{transform:scale(1)}}", "@keyframes bpc-out{to{transform:scale(0);opacity:0}}", "@keyframes bpc-up{from{transform:translateY(120%);opacity:0}to{transform:none;opacity:1}}", "@keyframes bpc-dn{from{transform:translateY(-120%);opacity:0}to{transform:none;opacity:1}}", "@keyframes bpc-away{to{transform:translateY(-120%);opacity:0}}", "@keyframes bpc-away-d{to{transform:translateY(120%);opacity:0}}", "@keyframes bpc-ping{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.6,2.2);opacity:0}}", "@keyframes bpc-ping2{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.4,2.9);opacity:0}}", "@keyframes bpc-swing{0%{transform:rotate(0)}14%{transform:rotate(-17deg)}30%{transform:rotate(13deg)}46%{transform:rotate(-9deg)}62%{transform:rotate(5deg)}80%{transform:rotate(-2deg)}100%{transform:rotate(0)}}", "@keyframes bpc-hop{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-12%) scale(1.08)}60%{transform:translateY(3%) scale(.97)}100%{transform:none}}", "@keyframes bpc-fade{0%{opacity:.5}100%{opacity:0}}", "@media(pointer:coarse){.bpc{min-width:44px;min-height:44px}}", "@media(prefers-reduced-motion:reduce){.bpc,.bpc-ico{transition:none}.bpc:active{transform:none}.bpc:hover .bpc-ico{transform:none}", ".bpc-ico[data-s],.bpc-slot[data-up],.bpc-slot[data-dn],.bpc-in,.bpc-gone,.bpc-ring[data-b]{animation:none}", ".bpc-slot[data-out]{animation:none;opacity:0}.bpc-num>.bpc-gone{display:none}", ".bpc-ring[data-a]{animation:bpc-fade .5s ease-out both;transform:scale(1.5)}}", ].join(""); function fmt(n: number, max: number, dot: boolean) { if (dot) return ""; return n > max ? max + "+" : String(n); } function Bell() { return ( ); } function Inbox() { return ( ); } type Shown = { cur: number; prev: number; tick: number }; export function BadgePingCounter({ initialCount = 0, count: controlled, onCountChange, max = 99, dot = false, icon = "bell", label = "Notifications", color = "#ef4444", size = 44, tone = "light", children, className, }: BadgePingCounterProps) { const [inner, setInner] = useState(initialCount); const count = Math.max(0, Math.floor(controlled ?? inner)); const [shown, setShown] = useState({ cur: count, prev: count, tick: 0 }); // Track the change in render so every new count remounts the animated layer. if (shown.cur !== count) setShown({ cur: count, prev: shown.cur, tick: shown.tick + 1 }); const accent = COLOR_RE.test(color) ? color : "#ef4444"; const up = shown.tick > 0 && shown.cur > shown.prev; const down = shown.tick > 0 && shown.cur < shown.prev; const cur = fmt(shown.cur, max, dot); const prev = fmt(shown.prev, max, dot); const roll = !dot && shown.tick > 0 && shown.prev > 0 && shown.cur > 0 && cur !== prev; const gone = shown.tick > 0 && shown.cur === 0; const present = shown.cur > 0 || shown.tick > 0; const k = shown.tick; const announce = shown.tick > 0 && shown.cur > shown.prev ? shown.cur + " new, " + shown.cur + " unread" : ""; const press = () => { if (controlled === undefined) setInner(count + 1); onCountChange?.(count + 1); }; return ( <> {announce} ); } 62:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L63",null,{"files":[{"path":"components/viberdy/badge-ping-counter.tsx","content":"$64","type":"registry:component","target":"components/viberdy/badge-ping-counter.tsx"}],"className":"h-[70svh] min-h-80"}]]}]