var Component=(()=>{var F=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var b=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),B=(e,n)=>{for(var s in n)o(e,s,{get:n[s],enumerable:!0})},h=(e,n,s,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of g(n))!N.call(e,r)&&r!==s&&o(e,r,{get:()=>n[r],enumerable:!(c=u(n,r))||c.enumerable});return e};var _=(e,n,s)=>(s=e!=null?F(x(e)):{},h(n||!e||!e.__esModule?o(s,"default",{value:e,enumerable:!0}):s,e)),f=e=>h(o({},"__esModule",{value:!0}),e);var y=b((D,E)=>{E.exports=_jsx_runtime});var S={};B(S,{default:()=>k,frontmatter:()=>v});var l=_(y()),v={title:"Shiny Button",date:new Date(17165088e5),description:"A shiny button component with dynamic styles in the dark mode or light mode.",author:"nyxb",published:!0};function m(e){let n=Object.assign({div:"div",pre:"pre",code:"code",span:"span",h3:"h3",a:"a",p:"p",h2:"h2",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td"},e.components),{ComponentPreview:s,Tabs:c,TabsList:r,TabsTrigger:i,TabsContent:t,Steps:d,ComponentSource:p}=n;return s||a("ComponentPreview",!0),p||a("ComponentSource",!0),d||a("Steps",!0),c||a("Tabs",!0),t||a("TabsContent",!0),r||a("TabsList",!0),i||a("TabsTrigger",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(s,{name:"shiny-button-demo",children:[(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import ShinyButton from '~/components/ui/shiny-button' export function ShinyButtonDemo() { return } `,__src__:"registry/default/example/shiny-button-demo.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ShinyButton "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'~/components/ui/shiny-button'"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"ShinyButtonDemo"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"ShinyButton"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"text"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Shiny Button"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import ShinyButton from '~/components/ui/shiny-button' export function ShinyButtonDemo() { return } `,__src__:"registry/miami/example/shiny-button-demo.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ShinyButton "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'~/components/ui/shiny-button'"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"ShinyButtonDemo"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"ShinyButton"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"text"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Shiny Button"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(n.h3,{id:"installation",children:[(0,l.jsx)(n.a,{className:"anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsxs)(c,{defaultValue:"cli",children:[(0,l.jsxs)(r,{children:[(0,l.jsx)(i,{value:"cli",children:"CLI"}),(0,l.jsx)(i,{value:"manual",children:"Manual"})]}),(0,l.jsx)(t,{value:"cli",children:(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx nyxbui@latest add shiny-button `,__npmCommand__:`npx nyxbui@latest add shiny-button `,__yarnCommand__:`npx nyxbui@latest add shiny-button `,__pnpmCommand__:`pnpm dlx nyxbui@latest add shiny-button `,__bunCommand__:`bun x --bun nyxbui@latest add shiny-button `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"npx"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"nyxbui@latest"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"add"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"shiny-button"})]})})})})}),(0,l.jsx)(t,{value:"manual",children:(0,l.jsxs)(d,{children:[(0,l.jsx)(n.p,{children:"Copy and paste the following code into your project."}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"text","data-theme":"default",__rawString__:`components/ui/shiny-button.tsx `,children:(0,l.jsx)(n.code,{"data-language":"text","data-theme":"default",children:(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#e1e4e8"},children:"components/ui/shiny-button.tsx"})})})})}),(0,l.jsxs)(p,{name:"shiny-button",children:[(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client' import { type AnimationProps, motion } from 'framer-motion' const animationProps = { initial: { '--x': '100%', 'scale': 0.8 }, animate: { '--x': '-100%', 'scale': 1 }, whileTap: { scale: 0.95 }, transition: { repeat: Infinity, repeatType: 'loop', repeatDelay: 1, type: 'spring', stiffness: 20, damping: 15, mass: 2, scale: { type: 'spring', stiffness: 200, damping: 5, mass: 0.5, }, }, } as AnimationProps function ShinyButton({ text = 'shiny-button' }) { return ( {text} ) } export ShinyButton `,__src__:"registry/default/ui/shiny-button.tsx",__style__:"default",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"type"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" AnimationProps, motion } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'framer-motion'"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"animationProps"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" initial: { "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'--x'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'100%'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'scale'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0.8"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" animate: { "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'--x'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'-100%'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'scale'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" whileTap: { scale: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0.95"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" transition: {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" repeat: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Infinity"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" repeatType: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'loop'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" repeatDelay: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" type: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'spring'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" stiffness: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"20"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" damping: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"15"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" mass: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"2"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" scale: {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" type: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'spring'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" stiffness: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"200"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" damping: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"5"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" mass: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0.5"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"} "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"as"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"AnimationProps"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"ShinyButton"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({ "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"text"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'shiny-button'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }) {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"motion.button"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"animationProps}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"relative rounded-lg px-6 py-2 font-medium backdrop-blur-xl transition-shadow duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,hsl(var(--primary)/10%)_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_hsl(var(--primary)/10%)]"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"span"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"relative block size-full text-sm uppercase tracking-wide text-[rgb(0,0,0,65%)] dark:font-light dark:text-[rgb(255,255,255,90%)]"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"style"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" maskImage:"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'linear-gradient(-75deg,hsl(var(--primary)) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),hsl(var(--primary)) calc(var(--x) + 100%))'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {text}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"span"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"style"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" mask: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box,linear-gradient(rgb(0,0,0), rgb(0,0,0))'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" maskComposite: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'exclude'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"absolute inset-0 z-10 block rounded-[inherit] bg-[linear-gradient(-75deg,hsl(var(--primary)/10%)_calc(var(--x)+20%),hsl(var(--primary)/50%)_calc(var(--x)+25%),hsl(var(--primary)/10%)_calc(var(--x)+100%))] p-px"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ShinyButton"})]})]})})}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client' import { type AnimationProps, motion } from 'framer-motion' const animationProps = { initial: { '--x': '100%', 'scale': 0.8 }, animate: { '--x': '-100%', 'scale': 1 }, whileTap: { scale: 0.95 }, transition: { repeat: Infinity, repeatType: 'loop', repeatDelay: 1, type: 'spring', stiffness: 20, damping: 15, mass: 2, scale: { type: 'spring', stiffness: 200, damping: 5, mass: 0.5, }, }, } as AnimationProps function ShinyButton({ text = 'shiny-button' }) { return ( {text} ) } export ShinyButton `,__src__:"registry/miami/ui/shiny-button.tsx",__style__:"miami",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"type"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" AnimationProps, motion } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'framer-motion'"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"animationProps"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" initial: { "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'--x'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'100%'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'scale'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0.8"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" animate: { "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'--x'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'-100%'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'scale'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" whileTap: { scale: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0.95"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" transition: {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" repeat: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Infinity"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" repeatType: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'loop'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" repeatDelay: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" type: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'spring'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" stiffness: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"20"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" damping: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"15"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" mass: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"2"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" scale: {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" type: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'spring'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" stiffness: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"200"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" damping: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"5"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" mass: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0.5"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"} "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"as"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"AnimationProps"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"ShinyButton"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({ "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"text"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'shiny-button'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }) {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"motion.button"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"animationProps}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"relative rounded-lg px-6 py-2 font-medium backdrop-blur-xl transition-shadow duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,hsl(var(--primary)/10%)_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_hsl(var(--primary)/10%)]"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"span"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"relative block size-full text-sm uppercase tracking-wide text-[rgb(0,0,0,65%)] dark:font-light dark:text-[rgb(255,255,255,90%)]"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"style"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" maskImage:"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'linear-gradient(-75deg,hsl(var(--primary)) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),hsl(var(--primary)) calc(var(--x) + 100%))'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {text}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"span"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"style"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" mask: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box,linear-gradient(rgb(0,0,0), rgb(0,0,0))'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" maskComposite: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'exclude'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"absolute inset-0 z-10 block rounded-[inherit] bg-[linear-gradient(-75deg,hsl(var(--primary)/10%)_calc(var(--x)+20%),hsl(var(--primary)/50%)_calc(var(--x)+25%),hsl(var(--primary)/10%)_calc(var(--x)+100%))] p-px"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ShinyButton"})]})]})})})]})]})})]}),` `,(0,l.jsxs)(n.h2,{id:"props",children:[(0,l.jsx)(n.a,{className:"anchor","aria-label":"Link to section",href:"#props",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{children:"Prop"}),(0,l.jsx)(n.th,{children:"Type"}),(0,l.jsx)(n.th,{children:"Description"}),(0,l.jsx)(n.th,{children:"Default"})]})}),(0,l.jsx)(n.tbody,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"text"}),(0,l.jsx)(n.td,{children:"string"}),(0,l.jsx)(n.td,{children:"The text to display"}),(0,l.jsx)(n.td,{children:'"shiny button"'})]})})]})]})}function C(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,Object.assign({},e,{children:(0,l.jsx)(m,e)})):m(e)}var k=C;function a(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(S);})(); ;return Component;