50: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"] 51: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"] 52:T1e7a,"use client"; import { cn } from "@/lib/utils"; import { useReducedMotion } from "motion/react"; import type { ReactNode } from "react"; export type BookVariant = "stripe" | "simple"; export interface BookProps { /** Additional CSS classes */ className?: string; /** Cover accent color (CSS color value) */ color?: string; /** Custom illustration for the stripe area (stripe variant only) */ illustration?: ReactNode; /** Logo or icon displayed at the bottom of the content area */ logo?: ReactNode; /** Title text color override */ textColor?: string; /** Book title text displayed on the cover */ title: string; /** Visual variant of the book */ variant?: BookVariant; /** Book width in pixels */ width?: number; } const BOOK_DEPTH = "29cqw"; const BOOK_BORDER_RADIUS = "6px 4px 4px 6px"; const DEFAULT_WIDTH = 196; const DEFAULT_COLOR = "#e5a00d"; const BG_SHADOW = "linear-gradient(90deg, #fff0 0%, #fff0 12%, #ffffff40 29.25%, #fff0 50.5%, #fff0 75.25%, #ffffff40 91%, #fff0 100%), linear-gradient(90deg, #00000008 0%, #0000001a 12%, #0000 30%, #00000005 50%, #0003 73.5%, #00000080 75.25%, #00000026 85.25%, #0000 100%)"; const Book = ({ title, variant = "stripe", color = DEFAULT_COLOR, textColor, width = DEFAULT_WIDTH, illustration, logo, className, }: BookProps) => { const shouldReduceMotion = useReducedMotion(); const bookWidth = `${width}px`; return (

{/* Rotate wrapper - handles 3D rotation on hover */}

{/* Front cover */}

{variant === "stripe" ? ( ) : ( )} {/* Border overlay */}

{/* Page edges (right side) */}

{/* Back cover */}

); }; /** Stripe variant: color band at top, white body below */ const StripeContent = ({ title, illustration, logo, width, }: { title: string; illustration?: ReactNode; logo?: ReactNode; width: number; }) => ( <> {/* Colored stripe area */}

{illustration ? (

{illustration}

) : (

)} {/* Spine binding overlay on stripe */}

{/* Body with title */}

{/* Spine binding on body */}

{/* Content */}

{title} {logo ?

{logo}

: null}

); /** Simple variant: full-color cover with title */ const SimpleContent = ({ title, logo, width, }: { title: string; logo?: ReactNode; width: number; }) => (

{/* Spine binding */}

{/* Content */}

{title} {logo ?

{logo}

: null}

); export default Book; 4f:["$","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","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@smoothui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"index.tsx","content":"$52","type":"registry:ui","target":"components/smoothui/book/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]