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[544296,["/_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"],"ItemStyles"] 4f:I[34002,["/_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"],"CodeEditor"] 50: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"] 51:T1a9a,"use client"; import * as React from "react"; import { motion } from "motion/react"; import { Button, type ButtonProps } from "@/components/ui/button"; import { useChoreography, motionTokens, } from "@/lib/cojeev-motion/choreography"; import { cn } from "@/lib/utils"; export const heroButtonAppearances = [ "liquid", "split-arrow", "paper-fold", "pressed-key", "ribbon", "ticket", "seal", "ink-sweep", "orbit", "sliding-window", "stacked-paper", "spotlight", ] as const; export type HeroButtonAppearance = (typeof heroButtonAppearances)[number]; export type HeroButtonProps = Omit & { /** Organic keeps a restrained living contour; capsule has a regular resting rim. */ shape?: "organic" | "capsule"; showArrow?: boolean; /** An authored composition, independent of the existing surface variant and size. */ appearance?: HeroButtonAppearance; }; const arrowHead = "M24 7C26 9 29 12 32 14C29 16 26 19 24 21"; const arrowCoil = "M14 12C3 1 3 25 14 23C25 21 21 4 14 12"; const arrowOpening = "M19 7C24 7 28 10 32 14C29 18 24 21 19 21"; const arrowStem = "M7 14C15 14 24 14 32 14"; const stemCoil = "M7 14C7 14 8 14 9 14"; /** A native Button or slotted link, with one shared morph body and a drawing arrow. */ export function HeroButton({ shape = "organic", appearance = "liquid", showArrow = true, size = "lg", variant = "default", asChild = false, className, children, onPointerEnter, onPointerLeave, onFocus, onBlur, onPointerMove, ...props }: HeroButtonProps) { const { quiet } = useChoreography(); const [hovered, setHovered] = React.useState(false); const [focused, setFocused] = React.useState(false); const blocked = props.disabled || props.loading || props["aria-busy"] === true || props["aria-busy"] === "true" || props["aria-disabled"] === true || props["aria-disabled"] === "true"; const active = !blocked && (hovered || focused); const moving = active && !quiet; const arrowTransition = { type: "tween" as const, duration: quiet ? 0 : moving ? 0.62 : motionTokens.duration.quick, ease: motionTokens.ease.enter, times: moving ? [0, 0.3, 0.66, 1] : undefined, }; const content = (label: React.ReactNode) => ( <> {appearance === "ticket" && ( )} {label} {appearance === "sliding-window" && ( )} {showArrow && ( )} ); const child = asChild ? (React.Children.only(children) as React.ReactElement<{ children?: React.ReactNode; }>) : null; return ( ); } 52:T391b,@layer cojeev-states { /* The SVG face takes the same semantic paint as the native fallback. */ :root .v-btn.v-hero-button[data-slot][data-hero-variant] { --hero-fill: var(--v-ink); --hero-ink: var(--v-on-ink); --hero-edge: var(--v-ink); --mfill: var(--hero-fill); --mstroke: var(--hero-edge); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; height: 62px; min-width: 240px; max-width: 100%; padding: 0 25px 0 29px; gap: 25px; border-radius: 999px; background: var(--hero-fill); color: var(--hero-ink); font: 600 17px/1.2 var(--font-text); letter-spacing: -0.025em; text-decoration: none; box-shadow: none; -webkit-tap-highlight-color: transparent; } :root .v-btn.v-hero-button[data-slot][data-hero-variant="accent"] { --hero-fill: var(--v-pink); --hero-ink: var(--v-on-accent); --hero-edge: var(--v-border); } :root .v-btn.v-hero-button[data-slot][data-hero-variant="secondary"] { --hero-fill: var(--v-blue); --hero-ink: var(--v-on-accent); --hero-edge: var(--v-border); } :root .v-btn.v-hero-button[data-slot][data-hero-variant="danger"] { --hero-fill: var(--v-danger-fill); --hero-ink: var(--destructive-foreground); --hero-edge: var(--v-danger-fill); } :root .v-btn.v-hero-button[data-slot]:is( [data-hero-variant="outline"], [data-hero-variant="ghost"] ) { --hero-fill: var(--v-paper); --hero-ink: var(--v-text); --hero-edge: var(--v-border); } :root .v-btn.v-hero-button[data-slot]:has(> svg.v-morph) { background: transparent; } .v-hero-button[data-slot] > svg.v-morph { filter: drop-shadow( 0 3px 0 color-mix(in oklab, var(--hero-edge) 34%, transparent) ); } .v-hero-button__label { position: relative; min-width: 0; overflow-wrap: anywhere; white-space: normal; } .v-hero-button__arrow { display: grid; place-items: center; flex: none; width: 40px; height: 32px; } .v-hero-button__arrow svg { overflow: visible; } :root .v-btn.v-hero-button[data-slot][data-hero-size="sm"] { height: 48px; min-width: 180px; padding-inline: 21px; gap: 14px; font-size: 14px; } :root .v-btn.v-hero-button[data-slot][data-hero-size="default"] { height: 56px; min-width: 216px; padding-inline: 25px; gap: 20px; font-size: 16px; } :root .v-btn.v-hero-button[data-slot]:focus-visible { outline: 2px solid var(--v-text); outline-offset: 7px; } :root .v-btn.v-hero-button[data-slot]:is( :disabled, [aria-disabled="true"]:not([aria-busy="true"]) ) { --hero-fill: var(--v-disabled-face); --hero-ink: var(--v-disabled-ink); --hero-edge: var(--v-disabled-edge); color: var(--v-disabled-ink); box-shadow: none; } .v-hero-button[data-slot]:is(:disabled, [aria-disabled="true"]) > svg.v-morph { filter: none; } /* Twelve material/interaction concepts, all around one stationary native target. */ .v-hero-button__window { position: relative; min-width: 0; z-index: 1; } .v-hero-button__label { display: block; } .v-hero-button__arrow { position: relative; z-index: 1; transition: transform var(--t-element) var(--enter); } .v-hero-button__paint { position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; overflow: hidden; z-index: 0; } .v-hero-button__paint > i { position: absolute; display: none; pointer-events: none; } .v-hero-button__edition { position: relative; z-index: 1; font-size: 9px; line-height: 1.4; letter-spacing: 0.08em; text-align: center; flex: none; padding-inline-end: 16px; border-inline-end: 1px dashed currentColor; } .v-hero-button__echo { position: absolute; inset: 0; transform: translateY(150%); } .v-hero-button__label, .v-hero-button__echo { transition: transform var(--t-element) var(--enter); } :root .v-btn.v-hero-button[data-slot][data-hero-size][data-hero-appearance="split-arrow"] { padding-inline-end: 10px; gap: 20px; } .v-hero-button[data-hero-appearance="split-arrow"] .v-hero-button__arrow { width: 46px; height: 42px; border-radius: 999px; background: var(--v-pink); color: var(--v-on-accent); } .v-hero-button[data-hero-appearance="split-arrow"][data-arrow-active="true"]:not( [data-motion-quiet="true"] ) .v-hero-button__arrow { transform: translateX(4px); } :root .v-btn.v-hero-button[data-slot][data-hero-size][data-hero-appearance="paper-fold"] { border-radius: 12px 28px 12px 12px; padding-inline: 24px; } :root .v-btn.v-hero-button[data-hero-appearance="paper-fold"][data-hero-variant="default"] { --hero-fill: var(--v-yellow); --hero-ink: var(--v-on-accent); --hero-edge: var(--v-border); } .v-hero-button[data-hero-appearance="paper-fold"] .v-hero-button__paint > i:first-child { display: block; top: 0; right: 0; width: 24px; height: 24px; background: var(--v-on-accent); opacity: 0.16; clip-path: polygon(0 0, 100% 100%, 0 100%); transform-origin: 100% 0; transition: transform var(--t-element) var(--enter); } .v-hero-button[data-hero-appearance="paper-fold"][data-arrow-active="true"]:not( [data-motion-quiet="true"] ) .v-hero-button__paint > i:first-child { transform: scale(1.6); } :root .v-btn.v-hero-button[data-slot][data-hero-size][data-hero-appearance="pressed-key"] { border-radius: 14px; } .v-hero-button[data-hero-appearance="pressed-key"] > svg.v-morph { filter: drop-shadow( 0 6px 0 color-mix(in srgb, var(--hero-edge) 40%, transparent) ); transition: filter var(--t-micro); } .v-hero-button[data-hero-appearance="pressed-key"] .v-hero-button__paint { inset: 5px; border: 1px solid color-mix(in srgb, var(--hero-ink) 25%, transparent); border-radius: 9px; } .v-hero-button[data-hero-appearance="pressed-key"][data-arrow-active="true"]:not( [data-motion-quiet="true"] ) .v-hero-button__window, .v-hero-button[data-hero-appearance="pressed-key"][data-arrow-active="true"]:not( [data-motion-quiet="true"] ) .v-hero-button__arrow { transform: translateY(2px); } .v-hero-button[data-hero-appearance="pressed-key"][data-arrow-active="true"]:not( [data-motion-quiet="true"] ) > svg.v-morph { filter: drop-shadow( 0 2px 0 color-mix(in srgb, var(--hero-edge) 40%, transparent) ); } :root .v-btn.v-hero-button[data-slot][data-hero-size][data-hero-appearance="ribbon"] { border-radius: 8px; padding-inline-start: 34px; } :root .v-btn.v-hero-button[data-hero-appearance="ribbon"][data-hero-variant="default"] { --hero-fill: var(--v-blue); --hero-ink: var(--v-on-accent); --hero-edge: var(--v-border); } .v-hero-button[data-hero-appearance="ribbon"] .v-hero-button__paint { border-radius: 8px; } .v-hero-button[data-hero-appearance="ribbon"] .v-hero-button__paint > i { display: block; top: -15%; bottom: -15%; left: 8px; width: 5px; background: currentColor; opacity: 0.2; transform: skewX(-20deg); transition: transform var(--t-element) var(--enter); } .v-hero-button[data-hero-appearance="ribbon"] .v-hero-button__paint > i:nth-child(2) { left: 17px; } .v-hero-button[data-hero-appearance="ribbon"] .v-hero-button__paint > i:nth-child(3) { display: none; } .v-hero-button[data-hero-appearance="ribbon"][data-arrow-active="true"]:not( [data-motion-quiet="true"] ) .v-hero-button__paint > i { transform: translateX(4px) skewX(-30deg); } :root .v-btn.v-hero-button[data-slot][data-hero-size][data-hero-appearance="ticket"] { border-radius: 12px; gap: 16px; padding-inline: 20px; min-width: min(280px, 100%); } :root .v-btn.v-hero-button[data-hero-appearance="ticket"][data-hero-variant="default"] { --hero-fill: var(--v-olive); --hero-ink: var(--v-on-accent); --hero-edge: var(--v-border); } .v-hero-button[data-hero-appearance="ticket"] .v-hero-button__arrow { border-inline-start: 1px dashed currentColor; padding-inline-start: 8px; } .v-hero-button[data-hero-appearance="ticket"][data-arrow-active="true"]:not( [data-motion-quiet="true"] ) .v-hero-button__arrow { transform: rotate(-7deg) translateX(3px); } :root .v-btn.v-hero-button[data-slot][data-hero-size][data-hero-appearance="seal"] { height: 132px; width: 132px; min-width: 132px; border-radius: 50%; flex-direction: column; gap: 8px; padding: 22px; text-align: center; font-size: 17px; } :root .v-btn.v-hero-button[data-hero-appearance="seal"][data-hero-variant="default"] { --hero-fill: var(--v-pink); --hero-ink: var(--v-on-accent); --hero-edge: var(--v-border); } .v-hero-button[data-hero-appearance="seal"] .v-hero-button__paint { inset: 9px; border: 1px dashed var(--hero-ink); border-radius: 50%; transition: transform var(--t-panel) var(--enter); } .v-hero-button[data-hero-appearance="seal"][data-arrow-active="true"]:not( [data-motion-quiet="true"] ) .v-hero-button__paint { transform: rotate(25deg); } :root .v-btn.v-hero-button[data-hero-appearance="ink-sweep"][data-hero-variant="default"] { --hero-fill: var(--v-canvas); --hero-ink: var(--v-text); --hero-edge: var(--v-border); } .v-hero-button[data-hero-appearance="ink-sweep"] .v-hero-button__paint > i:first-child { display: block; inset: 18% 5%; background: var(--v-pink); border-radius: 50% 30% 55% 20%; opacity: 0.35; transform: scaleX(0.08); transform-origin: left; transition: transform var(--t-panel) var(--enter); } .v-hero-button[data-hero-appearance="ink-sweep"][data-arrow-active="true"]:not( [data-motion-quiet="true"] ) .v-hero-button__paint > i:first-child { transform: scaleX(1); } .v-hero-button[data-hero-appearance="orbit"] .v-hero-button__arrow { border: 1px solid currentColor; border-radius: 50%; width: 46px; height: 46px; } .v-hero-button[data-hero-appearance="orbit"] .v-hero-button__arrow::after { content: ""; position: absolute; inset: -6px; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: 50%; transform: rotate(-35deg) scaleX(0.72); transition: transform var(--t-panel) var(--enter); } .v-hero-button[data-hero-appearance="orbit"] .v-hero-button__arrow::before { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--v-pink); top: -6px; left: 18px; transform-origin: 4px 30px; transition: transform var(--t-panel) var(--enter); } .v-hero-button[data-hero-appearance="orbit"][data-arrow-active="true"]:not( [data-motion-quiet="true"] ) .v-hero-button__arrow::before { transform: rotate(160deg); } .v-hero-button[data-hero-appearance="orbit"][data-arrow-active="true"]:not( [data-motion-quiet="true"] ) .v-hero-button__arrow::after { transform: rotate(35deg) scaleX(0.72); } .v-hero-button[data-hero-appearance="sliding-window"] .v-hero-button__window { overflow: hidden; padding-block: 2px; } .v-hero-button[data-hero-appearance="sliding-window"][data-arrow-active="true"]:not( [data-motion-quiet="true"] ) .v-hero-button__label { transform: translateY(-150%); } .v-hero-button[data-hero-appearance="sliding-window"][data-arrow-active="true"]:not( [data-motion-quiet="true"] ) .v-hero-button__echo { transform: translateY(0); } :root .v-btn.v-hero-button[data-slot][data-hero-size][data-hero-appearance="stacked-paper"] { border-radius: 12px; } :root .v-btn.v-hero-button[data-hero-appearance="stacked-paper"][data-hero-variant="default"] { --hero-fill: var(--v-canvas); --hero-ink: var(--v-text); --hero-edge: var(--v-border); } .v-hero-button[data-hero-appearance="stacked-paper"] .v-hero-button__paint { overflow: visible; inset: 0; } .v-hero-button[data-hero-appearance="stacked-paper"] .v-hero-button__paint > i { display: block; inset: 4px; border: 1px solid var(--hero-edge); border-radius: 9px; transform: translateY(6px) rotate(-2deg); transition: transform var(--t-element) var(--enter); } .v-hero-button[data-hero-appearance="stacked-paper"] .v-hero-button__paint > i:nth-child(2) { transform: translateY(10px) rotate(2deg); } .v-hero-button[data-hero-appearance="stacked-paper"] .v-hero-button__paint > i:nth-child(3) { display: none; } .v-hero-button[data-hero-appearance="stacked-paper"][data-arrow-active="true"]:not( [data-motion-quiet="true"] ) .v-hero-button__paint > i:first-child { transform: translateY(7px) rotate(-4deg); } .v-hero-button[data-hero-appearance="stacked-paper"][data-arrow-active="true"]:not( [data-motion-quiet="true"] ) .v-hero-button__paint > i:nth-child(2) { transform: translateY(12px) rotate(4deg); } .v-hero-button[data-hero-appearance="spotlight"] .v-hero-button__paint { background: radial-gradient( 70px circle at var(--hero-pointer-x, 50%) var(--hero-pointer-y, 50%), color-mix(in srgb, var(--hero-ink) 25%, transparent), transparent ); opacity: 0.35; transition: opacity var(--t-element); } .v-hero-button[data-hero-appearance="spotlight"][data-arrow-active="true"]:not( [data-motion-quiet="true"] ) .v-hero-button__paint { opacity: 1; } .v-hero-button[data-motion-quiet="true"] :is( .v-hero-button__label, .v-hero-button__echo, .v-hero-button__arrow, .v-hero-button__paint, .v-hero-button__paint > i ), .v-hero-button[data-motion-quiet="true"] .v-hero-button__arrow::before, .v-hero-button[data-motion-quiet="true"] .v-hero-button__arrow::after { transition: none; } :root .v-btn.v-hero-button[data-slot][data-hero-appearance="seal"][data-hero-size="sm"] { width: 112px; min-width: 112px; height: 112px; padding: 16px; font-size: 15px; } :root .v-btn.v-hero-button[data-slot][data-hero-appearance="seal"][data-hero-size="lg"] { width: 148px; min-width: 148px; height: 148px; padding: 24px; font-size: 18px; } :root .v-btn.v-hero-button[data-slot][data-hero-appearance][data-hero-variant]:is( :disabled, [aria-disabled="true"]:not([aria-busy="true"]) ) { --hero-fill: var(--v-disabled-face); --hero-ink: var(--v-disabled-ink); --hero-edge: var(--v-disabled-edge); color: var(--v-disabled-ink); } .v-hero-demo { display: grid; justify-items: center; gap: 16px; padding: 32px 12px; text-align: center; min-width: 0; } .v-hero-demo > .v-meta { max-width: 32ch; font-size: 13px; line-height: 1.6; } .v-hero-demo [role="status"] { font-size: 12px; min-height: 1.6em; } .v-hero-demo[data-compact] { padding: 24px 12px; } @media (max-width: 600px) { :root .v-btn.v-hero-button[data-hero-appearance]:not( [data-hero-appearance="seal"] ) { min-width: 0; gap: 16px; padding-inline: 20px; } } } 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":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/button.json"]}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/hero-button.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/hero-button.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/hero-button.css","content":"$52","type":"registry:file","target":"styles/cojeev/hero-button.css"}],"className":"h-[70svh] min-h-80"}]]}]