@arolariu/components/dist/cjs/components/ui/flip-button.cjs.map

A collection of reusable components for React applications, built as ESM & CJS modules with tree shake, minify and bundler optimizations enabled, for the lowest bundle size (import cost)! 😍

{"version":3,"file":"components\\ui\\flip-button.cjs","sources":["webpack://@arolariu/components/./src/components/ui/flip-button.tsx"],"sourcesContent":["\n\nimport * as React from \"react\";\nimport {\n  type HTMLMotionProps,\n  type Transition,\n  type Variant,\n  motion,\n} from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype FlipDirection = \"top\" | \"bottom\" | \"left\" | \"righ\";\n\ninterface FlipButtonProps extends HTMLMotionProps<\"button\"> {\n  frontText: string;\n  backText: string;\n  transition?: Transition;\n  frontClassName?: string;\n  backClassName?: string;\n  from?: FlipDirection;\n}\n\nconst defaultSpanClassName =\n  \"absolute inset-0 flex items-center justify-center rounded-lg\";\n\nconst FlipButton = React.forwardRef<HTMLButtonElement, FlipButtonProps>(\n  (\n    {\n      frontText,\n      backText,\n      transition = { type: \"spring\", stiffness: 280, damping: 20 },\n      className,\n      frontClassName,\n      backClassName,\n      from = \"top\",\n      ...props\n    },\n    ref\n  ) => {\n    const isVertical = from === \"top\" || from === \"bottom\";\n    const rotateAxis = isVertical ? \"rotateX\" : \"rotateY\";\n\n    const frontOffset = from === \"top\" || from === \"left\" ? \"50%\" : \"-50%\";\n    const backOffset = from === \"top\" || from === \"left\" ? \"-50%\" : \"50%\";\n\n    const buildVariant = (\n      opacity: number,\n      rotation: number,\n      offset: string | null = null\n    ): Variant => ({\n      opacity,\n      [rotateAxis]: rotation,\n      ...(isVertical && offset !== null ? { y: offset } : {}),\n      ...(!isVertical && offset !== null ? { x: offset } : {}),\n    });\n\n    const frontVariants = {\n      initial: buildVariant(1, 0, \"0%\"),\n      hover: buildVariant(0, 90, frontOffset),\n    };\n\n    const backVariants = {\n      initial: buildVariant(0, 90, backOffset),\n      hover: buildVariant(1, 0, \"0%\"),\n    };\n\n    return (\n      <motion.button\n        ref={ref}\n        initial=\"initial\"\n        whileHover=\"hover\"\n        whileTap={{ scale: 0.95 }}\n        className={cn(\n          \"relative inline-block h-10 px-4 py-2 text-sm font-medium cursor-pointer perspective-[1000px] focus:outline-none\",\n          className\n        )}\n        {...props}\n      >\n        <motion.span\n          variants={frontVariants}\n          transition={transition}\n          className={cn(\n            defaultSpanClassName,\n            \"bg-muted text-black dark:text-white\",\n            frontClassName\n          )}\n        >\n          {frontText}\n        </motion.span>\n        <motion.span\n          variants={backVariants}\n          transition={transition}\n          className={cn(\n            defaultSpanClassName,\n            \"bg-primary text-primary-foreground\",\n            backClassName\n          )}\n        >\n          {backText}\n        </motion.span>\n        <span className=\"invisible\">{frontText}</span>\n      </motion.button>\n    );\n  }\n);\n\nFlipButton.displayName = \"FlipButton\";\n\nexport { FlipButton, type FlipButtonProps, type FlipDirection };\n"],"names":["defaultSpanClassName","FlipButton","React","frontText","backText","transition","className","frontClassName","backClassName","from","props","ref","isVertical","rotateAxis","frontOffset","backOffset","buildVariant","opacity","rotation","offset","frontVariants","backVariants","motion","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAMA,uBACJ;AAEF,MAAMC,aAAa,WAAbA,GAAaC,+BAAAA,UAAgB,CACjC,CACE,EACEC,SAAS,EACTC,QAAQ,EACRC,aAAa;IAAE,MAAM;IAAU,WAAW;IAAK,SAAS;AAAG,CAAC,EAC5DC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,OAAO,KAAK,EACZ,GAAGC,OACJ,EACDC;IAEA,MAAMC,aAAaH,UAAAA,QAAkBA,aAAAA;IACrC,MAAMI,aAAaD,aAAa,YAAY;IAE5C,MAAME,cAAcL,UAAAA,QAAkBA,WAAAA,OAAkB,QAAQ;IAChE,MAAMM,aAAaN,UAAAA,QAAkBA,WAAAA,OAAkB,SAAS;IAEhE,MAAMO,eAAe,CACnBC,SACAC,UACAC,SAAwB,IAAI,GACf;YACbF;YACA,CAACJ,WAAW,EAAEK;YACd,GAAIN,cAAcO,SAAAA,SAAkB;gBAAE,GAAGA;YAAO,IAAI,CAAC,CAAC;YACtD,GAAI,CAACP,cAAcO,SAAAA,SAAkB;gBAAE,GAAGA;YAAO,IAAI,CAAC,CAAC;QACzD;IAEA,MAAMC,gBAAgB;QACpB,SAASJ,aAAa,GAAG,GAAG;QAC5B,OAAOA,aAAa,GAAG,IAAIF;IAC7B;IAEA,MAAMO,eAAe;QACnB,SAASL,aAAa,GAAG,IAAID;QAC7B,OAAOC,aAAa,GAAG,GAAG;IAC5B;IAEA,OACE,WADF,GACE,sCAACM,sBAAAA,MAAAA,CAAAA,MAAa;QACZ,KAAKX;QACL,SAAQ;QACR,YAAW;QACX,UAAU;YAAE,OAAO;QAAK;QACxB,WAAWY,IAAAA,0BAAAA,EAAAA,EACT,mHACAjB;QAED,GAAGI,KAAK;;0BAET,qCAACY,sBAAAA,MAAAA,CAAAA,IAAW;gBACV,UAAUF;gBACV,YAAYf;gBACZ,WAAWkB,IAAAA,0BAAAA,EAAAA,EACTvB,sBACA,uCACAO;0BAGDJ;;0BAEH,qCAACmB,sBAAAA,MAAAA,CAAAA,IAAW;gBACV,UAAUD;gBACV,YAAYhB;gBACZ,WAAWkB,IAAAA,0BAAAA,EAAAA,EACTvB,sBACA,sCACAQ;0BAGDJ;;0BAEH,qCAAC;gBAAK,WAAU;0BAAaD;;;;AAGnC;AAGFF,WAAW,WAAW,GAAG"}