4d: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"] 4e: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"] 4f:T20ca,"use client"; import { motion, useReducedMotion } from "motion/react"; import { type ComponentProps, type ReactNode, useState } from "react"; import { cn } from "@/lib/utils"; export type MorphStackSpring = { bounce?: number; damping?: number; mass?: number; stiffness?: number; visualDuration?: number; }; export type MorphStackTransform = { x?: number; y?: number; z?: number; }; export type MorphStackLayerMotion = { active?: MorphStackTransform; resting?: MorphStackTransform; }; export type MorphStackMotion = { back?: MorphStackLayerMotion & { activeOpacity?: number; restingOpacity?: number; }; delays?: { back?: number; front?: number; middle?: number; }; front?: MorphStackLayerMotion; middle?: MorphStackLayerMotion; perspective?: number; reducedMotionStrength?: number; springs?: { back?: MorphStackSpring; front?: MorphStackSpring; middle?: MorphStackSpring; stack?: MorphStackSpring; }; stack?: { rotateX?: number; rotateZ?: number; scale?: number; }; }; export type MorphStackProps = { /** Any renderable plate, such as an image, inline SVG, or custom component. */ backPlate: ReactNode; className?: string; /** Controls the expanded state. Leave undefined to use fine-pointer hover. */ expanded?: boolean; /** Any renderable plate, such as an image, inline SVG, or custom component. */ frontPlate: ReactNode; interactive?: boolean; /** Any renderable plate, such as an image, inline SVG, or custom component. */ middlePlate: ReactNode; motion?: MorphStackMotion; onExpandedChange?: (expanded: boolean) => void; }; type PlateLayerProps = ComponentProps & { layer: number; }; const DEFAULT_MOTION = { perspective: 900, reducedMotionStrength: 0.25, stack: { rotateX: 58, rotateZ: -42, scale: 1.06, }, front: { active: { x: -14, y: 20, z: 72, }, resting: { x: 4, y: 0, z: 12, }, }, middle: { active: { x: 0, y: 0, z: 0, }, resting: { x: 0, y: 0, z: 0, }, }, back: { active: { x: 0, y: 0, z: -76, }, activeOpacity: 1, resting: { x: 0, y: 0, z: -4, }, restingOpacity: 0, }, delays: { back: 0.2, front: 0.1, middle: 0, }, } satisfies Required>; const DEFAULT_SPRINGS = { stack: { type: "spring", stiffness: 320, damping: 20, mass: 0.65, }, front: { type: "spring", stiffness: 420, damping: 24, mass: 0.6, }, middle: { type: "spring", stiffness: 360, damping: 30, mass: 0.65, }, back: { type: "spring", stiffness: 300, damping: 27, mass: 0.7, }, } as const; function canFineHover() { return window.matchMedia("(hover: hover) and (pointer: fine)").matches; } function PlateLayer({ children, className, layer, style, ...props }: PlateLayerProps) { return ( {children} ); } function resolveSpring(defaultSpring: MorphStackSpring, spring: MorphStackSpring | undefined) { if (spring?.visualDuration !== undefined || spring?.bounce !== undefined) { return { bounce: spring.bounce ?? 0, type: "spring" as const, visualDuration: spring.visualDuration ?? 0.3, }; } return { ...defaultSpring, ...spring, type: "spring" as const, }; } function resolveLayerMotion( defaults: { active: Required; resting: Required; }, motion: MorphStackLayerMotion | undefined, ) { return { active: { x: motion?.active?.x ?? defaults.active.x, y: motion?.active?.y ?? defaults.active.y, z: motion?.active?.z ?? defaults.active.z, }, resting: { x: motion?.resting?.x ?? defaults.resting.x, y: motion?.resting?.y ?? defaults.resting.y, z: motion?.resting?.z ?? defaults.resting.z, }, }; } function clampOpacity(value: number) { return Math.min(1, Math.max(0, value)); } export function MorphStack({ backPlate, className, expanded, frontPlate, interactive = true, middlePlate, motion: motionConfig, onExpandedChange, }: MorphStackProps) { const shouldReduceMotion = useReducedMotion(); const [hovered, setHovered] = useState(false); const isExpanded = expanded ?? (interactive && hovered); const reducedMotionStrength = Math.min( 1, Math.max(0, motionConfig?.reducedMotionStrength ?? DEFAULT_MOTION.reducedMotionStrength), ); const strength = shouldReduceMotion ? reducedMotionStrength : 1; const stack = { ...DEFAULT_MOTION.stack, ...motionConfig?.stack }; const front = resolveLayerMotion(DEFAULT_MOTION.front, motionConfig?.front); const middle = resolveLayerMotion(DEFAULT_MOTION.middle, motionConfig?.middle); const back = { ...resolveLayerMotion(DEFAULT_MOTION.back, motionConfig?.back), activeOpacity: clampOpacity( motionConfig?.back?.activeOpacity ?? DEFAULT_MOTION.back.activeOpacity, ), restingOpacity: clampOpacity( motionConfig?.back?.restingOpacity ?? DEFAULT_MOTION.back.restingOpacity, ), }; const delays = { ...DEFAULT_MOTION.delays, ...motionConfig?.delays }; const springs = { back: resolveSpring(DEFAULT_SPRINGS.back, motionConfig?.springs?.back), front: resolveSpring(DEFAULT_SPRINGS.front, motionConfig?.springs?.front), middle: resolveSpring(DEFAULT_SPRINGS.middle, motionConfig?.springs?.middle), stack: resolveSpring(DEFAULT_SPRINGS.stack, motionConfig?.springs?.stack), }; function handlePointerEnter() { if (!interactive || !canFineHover()) return; setHovered(true); onExpandedChange?.(true); } function handlePointerLeave() { setHovered(false); if (hovered) { onExpandedChange?.(false); } } return ( {backPlate} {middlePlate} {frontPlate} ); } export default MorphStack; 4c:["$","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"}]]}]}]]}],["$","$L4d",null,{"namespace":"@skecher-ui","registryDependencies":[]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ui-components/morph-stack.tsx","content":"$4f","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]