4e: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/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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"],"RegistryDependencies"] 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/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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 50:T37b9,"use client"; // karaui.kamisama-v0.my.id/components/motion/badge import { X } from "lucide-react"; import { AnimatePresence, motion, PresenceContext, useAnimate, useReducedMotion, type Variants, } from "motion/react"; import { type KeyboardEvent as ReactKeyboardEvent, type ReactNode, useContext, useEffect, useRef, useState, } from "react"; import { EASE_OUT, SPRING_LAYOUT, SPRING_PANEL, SPRING_SWAP } from "@/lib/ease"; import { cn } from "@/lib/utils"; export type BadgeVariant = | "default" | "secondary" | "outline" | "destructive" | "success" | "warning"; export type BadgeSize = "sm" | "md" | "lg"; /** Soft tinted surface or a filled one. Only the status variants differ. */ export type BadgeTone = "soft" | "solid"; const BASE: Record<"default" | "secondary" | "outline", string> = { default: "border-transparent bg-primary text-primary-foreground", secondary: "border-transparent bg-foreground/[0.07] text-foreground", outline: "border-border-strong bg-transparent text-foreground", }; // Status tints mix the token toward --foreground/--background (as `alert` // does), so the text keeps its contrast in both themes and every design style. const SOFT: Record<"destructive" | "success" | "warning", string> = { destructive: "border-[color-mix(in_oklab,var(--destructive)_30%,transparent)] bg-[color-mix(in_oklab,var(--destructive)_10%,var(--background))] text-[color-mix(in_oklab,var(--destructive)_78%,var(--foreground))]", success: "border-[color-mix(in_oklab,var(--success)_32%,transparent)] bg-[color-mix(in_oklab,var(--success)_11%,var(--background))] text-[color-mix(in_oklab,var(--success)_60%,var(--foreground))]", warning: "border-[color-mix(in_oklab,var(--warning)_40%,transparent)] bg-[color-mix(in_oklab,var(--warning)_13%,var(--background))] text-[color-mix(in_oklab,var(--warning)_52%,var(--foreground))]", }; // Filled status badges. Red reads best with light text in both themes; // green and amber are light hues, so they always get dark text. const SOLID: Record<"destructive" | "success" | "warning", string> = { destructive: "border-transparent bg-destructive text-background dark:text-foreground", success: "border-transparent bg-success text-[color-mix(in_oklab,var(--success)_22%,var(--foreground))] dark:text-[color-mix(in_oklab,var(--success)_22%,var(--background))]", warning: "border-transparent bg-warning text-[color-mix(in_oklab,var(--warning)_22%,var(--foreground))] dark:text-[color-mix(in_oklab,var(--warning)_22%,var(--background))]", }; const SIZE: Record = { sm: "h-5 gap-1 px-1.5 text-[11px] [&_svg]:size-3", md: "h-6 gap-1.5 px-2 text-xs [&_svg]:size-3.5", lg: "h-7 gap-1.5 px-2.5 text-[13px] [&_svg]:size-3.5", }; // Count badges are circles at one digit and pills beyond. const COUNT_SIZE: Record = { sm: "h-4 min-w-4 px-1 text-[10px]", md: "h-5 min-w-5 px-1.5 text-[11px]", lg: "h-6 min-w-6 px-1.5 text-xs", }; function variantClass(variant: BadgeVariant, tone: BadgeTone) { if (variant === "default" || variant === "secondary" || variant === "outline") { return BASE[variant]; } return tone === "solid" ? SOLID[variant] : SOFT[variant]; } export interface BadgeProps { children?: ReactNode; variant?: BadgeVariant; /** Status variants only (destructive/success/warning). Default "soft". */ tone?: BadgeTone; size?: BadgeSize; /** Leading status dot in the text color; `"pulse"` adds a radiating ring. */ dot?: boolean | "pulse"; /** Leading icon (sized to the badge). Ignored when `dot` is set. */ icon?: ReactNode; /** * Makes the badge removable: an × button plays the exit, then calls this. * Focus moves to the neighbouring chip's × when the removal came from it. */ onRemove?: () => void; /** Accessible name of the × button. Default `Remove `. */ removeLabel?: string; /** * Count mode: renders a compact number that rolls up or down as it changes * and bumps when it rises. Hidden at 0 unless `showZero`. */ count?: number; /** Counts above this read "max+". Default 99. */ max?: number; showZero?: boolean; /** Spoken label for count mode, e.g. `(n) => \`${n} unread\``. */ countLabel?: (count: number) => string; className?: string; } /** * General-purpose badge: six variants, three sizes, an optional (pulsing) dot * or icon, removable chips with an exit animation, and a count mode with * rolling digits capped at "99+". For animated status transitions * (loading → success) use `AnimatedBadge` instead. */ export function Badge(props: BadgeProps) { if (props.count !== undefined) return ; return ; } /* -------------------------------------------------------------------------- */ /* Label badge */ /* -------------------------------------------------------------------------- */ function LabelBadge({ children, variant = "default", tone = "soft", size = "md", dot = false, icon, onRemove, removeLabel, className, }: BadgeProps) { const reduce = useReducedMotion() ?? false; // Inside an AnimatePresence the badge pops in when added; anywhere else it // renders as-is so server HTML is visible before hydration. const inPresence = useContext(PresenceContext) !== null; const rootRef = useRef(null); const [leaving, setLeaving] = useState(false); const refocus = useRef(null); const removable = Boolean(onRemove); const hidden = reduce ? { opacity: 0 } : { opacity: 0, scale: 0.8 }; const startRemove = (fromKeyboardFocus: boolean) => { if (leaving) return; if (fromKeyboardFocus) refocus.current = neighbourRemoveButton(rootRef.current); setLeaving(true); }; const finishRemove = () => { if (!leaving) return; const target = refocus.current; refocus.current = null; onRemove?.(); if (target) requestAnimationFrame(() => target.focus({ preventScroll: true })); }; const text = typeof children === "string" ? children : undefined; return ( ); } /** The × of the next chip in the row, else the previous one. */ function neighbourRemoveButton(node: HTMLElement | null) { if (!node) return null; const pick = (el: Element | null) => el?.querySelector("[data-badge-remove]") ?? null; let next = node.nextElementSibling; while (next && !pick(next)) next = next.nextElementSibling; if (next) return pick(next); let prev = node.previousElementSibling; while (prev && !pick(prev)) prev = prev.previousElementSibling; return prev ? pick(prev) : null; } // One pulse cycle of the dot's radiating ring, in seconds. Slow on purpose: // an ambient "live" signal, not feedback, so it sits well outside UI timing. const PULSE_DURATION = 1.6; function Dot({ pulse }: { pulse: boolean }) { return ( {pulse ? ( ) : null} ); } /* -------------------------------------------------------------------------- */ /* Count badge */ /* -------------------------------------------------------------------------- */ function CountBadge({ count, max = 99, showZero = false, countLabel, variant = "destructive", tone = "solid", size = "md", className, }: BadgeProps & { count: number }) { const reduce = useReducedMotion() ?? false; const [scope, animate] = useAnimate(); const value = Math.max(0, Math.round(count)); const visible = value > 0 || showZero; const text = value > max ? `${max}+` : String(value); // Direction is derived during render (not in an effect) so the very render // that swaps the digits already rolls them the right way. const [seen, setSeen] = useState(value); const [direction, setDirection] = useState<1 | -1>(1); if (value !== seen) { setSeen(value); setDirection(value > seen ? 1 : -1); } // Rising counts bump the pill (not on the pop-in from zero, which has its // own entrance). const previous = useRef(value); useEffect(() => { const prev = previous.current; previous.current = value; if (value > prev && prev > 0 && !reduce && scope.current) { animate(scope.current, { scale: [1, 1.18, 1] }, { duration: 0.32, ease: EASE_OUT }); } }, [value, reduce, animate, scope]); return ( {visible ? ( {countLabel ? countLabel(value) : text} ) : null} ); } const roll: Variants = { enter: (dir: 1 | -1) => ({ y: dir > 0 ? "100%" : "-100%", opacity: 0 }), center: { y: "0%", opacity: 1 }, exit: (dir: 1 | -1) => ({ y: dir > 0 ? "-100%" : "100%", opacity: 0, transition: { duration: 0.14, ease: EASE_OUT }, }), }; const fade: Variants = { enter: { opacity: 0 }, center: { opacity: 1 }, exit: { opacity: 0, transition: { duration: 0.1 } }, }; /** * Direction-aware digit roll. `NumberTicker` spins each digit along a 0–9 * strip, so 9 → 10 would roll the ones digit backwards; here every changed * glyph slides in from the direction of change instead. */ function RollingCount({ text, direction, reduce, }: { text: string; direction: 1 | -1; reduce: boolean; }) { const chars = text.split(""); // Keyed by place value from the right so a digit keeps its slot as the // number grows on the left. const glyphs = chars.map((char, i) => ({ char, place: chars.length - 1 - i })); return ( ); } 51:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 4d:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L4e",null,{"namespace":"@karaui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/motion/badge.tsx","content":"$50","type":"registry:component","target":"@components/motion/badge.tsx"},{"path":"lib/ease.ts","content":"$51","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]