) } `,__src__:"registry/new-york/examples/designer-marks-button-demo.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { DesignerMarksButton } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/prodkt/designer-marks-button"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" DesignerMarksButtonDemo"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"flex flex-row items-center space-x-[4px]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"DesignerMarksButton"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Login"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"DesignerMarksButton"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Signup"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { DesignerMarksButton } from "@/components/prodkt/designer-marks-button" export function DesignerMarksButtonDemo() { return (

) } `,__src__:"registry/default/examples/designer-marks-button-demo.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { DesignerMarksButton } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/prodkt/designer-marks-button"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" DesignerMarksButtonDemo"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"flex flex-row items-center space-x-[-3px]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"DesignerMarksButton"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"outline"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Login"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"DesignerMarksButton"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"outline"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Signup"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(0,n.jsxs)(e.h2,{id:"installation",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(p,{defaultValue:"cli",children:[(0,n.jsxs)(h,{children:[(0,n.jsx)(t,{value:"cli",children:"CLI"}),(0,n.jsx)(t,{value:"manual",children:"Manual"})]}),(0,n.jsx)(c,{value:"cli",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx sparkstack@latest add designer-marks-button `,__npmCommand__:`npx sparkstack@latest add designer-marks-button `,__yarnCommand__:`npx sparkstack@latest add designer-marks-button `,__pnpmCommand__:`pnpm dlx sparkstack@latest add designer-marks-button `,__bunCommand__:`bunx --bun sparkstack@latest add designer-marks-button `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"npx"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" sparkstack@latest"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" add"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" designer-marks-button"})]})})})})}),(0,n.jsx)(c,{value:"manual",children:(0,n.jsxs)(d,{children:[(0,n.jsx)(s,{children:"Copy and paste the following code into your project."}),(0,n.jsxs)(o,{name:"designer-marks-button",children:[(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { forwardRef } from "react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" export const DesignerMarksButton = forwardRef< HTMLButtonElement, React.ComponentProps >(function DesignerMarksButtonComponent( { className, children, ...props }, ref ) { return ( //

{/*

*/}

) }) `,__src__:"registry/new-york/prodkt/designer-marks-button.tsx",__style__:"new-york",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { forwardRef } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" DesignerMarksButton"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" forwardRef"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"<"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" HTMLButtonElement,"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ComponentProps"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:""})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" DesignerMarksButtonComponent"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:" ref"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:' //

'})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"group/item relative min-h-fit min-w-fit z-0 hover:z-[1] hover:bg-gray-a3 has-[&_>div:focus-visible]:z-[1] p-2 motion-duration-300 -m-1"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:'/*

*/'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Button"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" tabIndex"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"ghost"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "min-w-min pointer-events-auto whitespace-nowrap relative z-0 flex cursor-pointer items-center justify-center !bg-transparent !ring-transparent pb-[.345rem] pe-3 ps-4 align-baseline text-xs font-semibold tracking-[0.0925rem] ring-1 ring-inset ring-input hover:bg-gray-4 focus-visible:rounded-none focus-visible:bg-gray focus-visible:outline-0 focus-visible:outline-offset-0 focus-visible:outline-muted focus-visible:ring-0 group-hover/item:border-transparent group-hover/item:ring-gray has-[:focus-visible]:ring-transparent xl:tracking-[-0.01125rem]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" className,"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"transition-all hover:shadow-2xl"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"]:"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" props.variant "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "destructive"'}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ||"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" !"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props.variant,"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ref"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {children}"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"pointer-events-none absolute inset-0 z-[1] select-none size-full self-stretch whitespace-nowrap p-0 m-0 motion-duration-300 transition-all"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"relative m-0 size-full border border-gray-a2 group-hover/item:border-gray-a4"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute m-0 size-2 translate-x-[calc(-25%-3px)] translate-y-[calc(-25%-2px)] border bg-gray-a2 focus-visible:border-gray-a2 transition-all motion-duration-300 group-hover/item:border-gray-9 rounded"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute bottom-0 m-0 size-2 translate-x-[calc(-25%-3px)] translate-y-[calc(25%+3px)] border bg-gray-a2 focus-visible:border-gray-a2 transition-all motion-duration-300 group-hover/item:border-gray-9 rounded"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute right-0 m-0 size-2 translate-x-[calc(25%+3px)] translate-y-[calc(-25%-2px)] border bg-gray-a2 focus-visible:border-gray-a2 transition-all motion-duration-300 group-hover/item:border-gray-9 rounded"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute bottom-0 right-0 m-0 size-2 translate-x-[calc(25%+3px)] translate-y-[calc(25%+3px)] border bg-gray-a2 focus-visible:border-gray-a2 transition-all motion-duration-300 group-hover/item:border-gray-9 rounded"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"})"})})]})})}),(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { forwardRef } from "react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" export const DesignerMarksButton = forwardRef< HTMLButtonElement, React.ComponentProps >(function DesignerMarksButtonComponent( { className, children, ...props }, ref ) { return ( //

{/*

*/}

) }) `,__src__:"registry/default/prodkt/designer-marks-button.tsx",__style__:"default",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { forwardRef } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" DesignerMarksButton"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" forwardRef"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"<"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" HTMLButtonElement,"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ComponentProps"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:""})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" DesignerMarksButtonComponent"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:" ref"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:' //

*/'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Button"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" tabIndex"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"ghost"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "min-w-min pointer-events-auto whitespace-nowrap relative z-0 flex cursor-pointer items-center justify-center !bg-transparent !ring-transparent pb-[.345rem] pe-3 ps-4 align-baseline text-xs font-semibold tracking-[0.0925rem] ring-1 ring-inset ring-input hover:bg-gray-4 focus-visible:rounded-none focus-visible:bg-gray focus-visible:outline-0 focus-visible:outline-offset-0 focus-visible:outline-muted focus-visible:ring-0 group-hover/item:border-transparent group-hover/item:ring-gray has-[:focus-visible]:ring-transparent xl:tracking-[-0.01125rem]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" className,"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"transition-all hover:shadow-2xl"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"]:"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" props.variant "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "destructive"'}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ||"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" !"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props.variant,"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ref"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {children}"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"pointer-events-none absolute inset-0 z-[1] select-none size-full self-stretch whitespace-nowrap p-0 m-0 motion-duration-300 transition-all"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"relative m-0 size-full border border-gray-a2 group-hover/item:border-gray-a4"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute m-0 size-2 translate-x-[calc(-25%-3px)] translate-y-[calc(-25%-2px)] border bg-gray-a2 focus-visible:border-gray-a2 transition-all motion-duration-300 group-hover/item:border-gray-9 rounded"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute bottom-0 m-0 size-2 translate-x-[calc(-25%-3px)] translate-y-[calc(25%+3px)] border bg-gray-a2 focus-visible:border-gray-a2 transition-all motion-duration-300 group-hover/item:border-gray-9 rounded"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute right-0 m-0 size-2 translate-x-[calc(25%+3px)] translate-y-[calc(-25%-2px)] border bg-gray-a2 focus-visible:border-gray-a2 transition-all motion-duration-300 group-hover/item:border-gray-9 rounded"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute bottom-0 right-0 m-0 size-2 translate-x-[calc(25%+3px)] translate-y-[calc(25%+3px)] border bg-gray-a2 focus-visible:border-gray-a2 transition-all motion-duration-300 group-hover/item:border-gray-9 rounded"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"})"})})]})})})]}),(0,n.jsx)(s,{children:"Update the import paths to match your project setup."}),(0,n.jsxs)(s,{children:["Update ",(0,n.jsx)(e.code,{children:"tailwind.config.js"})]}),(0,n.jsxs)(e.p,{children:["Add the following animations to your ",(0,n.jsx)(e.code,{children:"tailwind.config.js"})," file:"]}),(0,n.jsxs)(e.div,{"data-rehype-pretty-code-fragment":"",children:[(0,n.jsx)(e.div,{"data-rehype-pretty-code-title":"","data-language":"js","data-theme":"default",children:"tailwind.config.js"}),(0,n.jsx)(e.pre,{"data-language":"js","data-theme":"default",__withMeta__:!0,__rawString__:`/** @type {import('tailwindcss').Config} */ module.exports = { theme: { extend: {}, }, } `,children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line line--highlighted",children:[(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"/** "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"@type"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" {import('tailwindcss').Config}"}),(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" */"})]}),` `,(0,n.jsxs)(e.span,{className:"line line--highlighted",children:[(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"module"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"exports"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" theme: {"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" extend: {},"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})]})})]}),` `,(0,n.jsxs)(e.h2,{id:"usage",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { DesignerMarksButton } from "@/components/ui/designer-marks-button" `,children:(0,n.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { DesignerMarksButton } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/designer-marks-button"'})]})})})}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:` `,children:(0,n.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"DesignerMarksButton"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]})})})})]})}function g(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(u,{...l})}):u(l)}function a(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return k(D);})(); ;return Component;

Designer Marks Button

Installation

Usage