29:I[39703,["/_next/static/immutable/chunks/241nwmfes77zo.js","/_next/static/immutable/chunks/3m-pa8xdalh52.js","/_next/static/immutable/chunks/14i4tf_w_vazb.js","/_next/static/immutable/chunks/0ia1ejdebczqp.js","/_next/static/immutable/chunks/3x60myrm6mkaf.js","/_next/static/immutable/chunks/2_lgl9wqfzibv.js","/_next/static/immutable/chunks/0a3-pj5nuiu5e.js","/_next/static/immutable/chunks/22j-7pdthoiih.js","/_next/static/immutable/chunks/2l3vy4rdbh-p3.js","/_next/static/immutable/chunks/0w98nr7s-0cmz.js","/_next/static/immutable/chunks/1uqb87xt8j2qp.js","/_next/static/immutable/chunks/1zx0ikiien6y1.js","/_next/static/immutable/chunks/1dnf0ltqzh6v6.js"],"ComponentPreview"] 2c:I[36943,["/_next/static/immutable/chunks/241nwmfes77zo.js","/_next/static/immutable/chunks/3m-pa8xdalh52.js","/_next/static/immutable/chunks/14i4tf_w_vazb.js","/_next/static/immutable/chunks/0ia1ejdebczqp.js","/_next/static/immutable/chunks/3x60myrm6mkaf.js","/_next/static/immutable/chunks/2_lgl9wqfzibv.js","/_next/static/immutable/chunks/0a3-pj5nuiu5e.js","/_next/static/immutable/chunks/22j-7pdthoiih.js","/_next/static/immutable/chunks/2l3vy4rdbh-p3.js","/_next/static/immutable/chunks/0w98nr7s-0cmz.js","/_next/static/immutable/chunks/1uqb87xt8j2qp.js","/_next/static/immutable/chunks/1zx0ikiien6y1.js","/_next/static/immutable/chunks/1dnf0ltqzh6v6.js"],"CodeCard"] 2a:T8e8,import { ArrowRight } from "lucide-react"; import Link from "next/link"; import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode, } from "react"; import { cn } from "@/lib/utils"; type CommonProps = { children: ReactNode; className?: string; iconClassName?: string; }; type RevealButtonProps = CommonProps & ( | ({ href: string } & Omit< AnchorHTMLAttributes, "className" >) | ({ href?: undefined } & Omit< ButtonHTMLAttributes, "className" >) ); /** * The same trick as the theme toggle's circle reveal (see theme-toggle.tsx), * scoped to a button instead of the whole page: a circle grows from the * top-left corner until it covers the pill, then shrinks back on hover-out. */ export function RevealButton({ children, className, iconClassName, ...props }: RevealButtonProps) { const frameClassName = cn( "group relative isolate inline-flex items-center gap-2 overflow-hidden rounded-xl border border-border px-5 py-2 text-sm font-medium text-foreground", className, ); const content = ( <> {children} ); if (props.href !== undefined) { const { href, ...rest } = props as Extract< RevealButtonProps, { href: string } >; return ( {content} ); } const rest = props as Extract; return ( ); }2b:T4558,

import { ArrowRight } from "lucide-react";
import Link from "next/link";
import type {
  AnchorHTMLAttributes,
  ButtonHTMLAttributes,
  ReactNode,
} from "react";

import { cn } from "@/lib/utils";

type CommonProps = {
  children: ReactNode;
  className?: string;
  iconClassName?: string;
};

type RevealButtonProps = CommonProps &
  (
    | ({ href: string } & Omit<
        AnchorHTMLAttributes<HTMLAnchorElement>,
        "className"
      >)
    | ({ href?: undefined } & Omit<
        ButtonHTMLAttributes<HTMLButtonElement>,
        "className"
      >)
  );

/**
 * The same trick as the theme toggle's circle reveal (see theme-toggle.tsx),
 * scoped to a button instead of the whole page: a circle grows from the
 * top-left corner until it covers the pill, then shrinks back on hover-out.
 */
export function RevealButton({
  children,
  className,
  iconClassName,
  ...props
}: RevealButtonProps) {
  const frameClassName = cn(
    "group relative isolate inline-flex items-center gap-2 overflow-hidden rounded-xl border border-border px-5 py-2 text-sm font-medium text-foreground",
    className,
  );

  const content = (
    <>
      <span
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-foreground [clip-path:circle(0%_at_0%_0%)] transition-[clip-path] duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:[clip-path:circle(150%_at_0%_0%)] motion-reduce:transition-none"
      />
      <span className="relative z-10 text-foreground transition-colors duration-1000 group-hover:text-background">
        {children}
      </span>
      <ArrowRight
        aria-hidden
        className={cn(
          "relative z-10 size-4 text-foreground transition-all duration-1000 group-hover:translate-x-0.5 group-hover:text-background",
          iconClassName,
        )}
      />
    </>
  );

  if (props.href !== undefined) {
    const { href, ...rest } = props as Extract<
      RevealButtonProps,
      { href: string }
    >;
    return (
      <Link href={href} className={frameClassName} {...rest}>
        {content}
      </Link>
    );
  }

  const rest = props as Extract<RevealButtonProps, { href?: undefined }>;
  return (
    <button type="button" className={frameClassName} {...rest}>
      {content}
    </button>
  );
}

27:["$","div",null,{"className":"","children":["$","$L29",null,{"preview":["$","button",null,{"type":"button","className":"group relative isolate inline-flex items-center gap-2 overflow-hidden rounded-xl border border-border px-5 py-2 text-sm font-medium text-foreground","children":[["$","span",null,{"aria-hidden":true,"className":"pointer-events-none absolute inset-0 bg-foreground [clip-path:circle(0%_at_0%_0%)] transition-[clip-path] duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:[clip-path:circle(150%_at_0%_0%)] motion-reduce:transition-none"}],["$","span",null,{"className":"relative z-10 text-foreground transition-colors duration-1000 group-hover:text-background","children":"View projects"}],["$","$L25",null,{"ref":"$undefined","iconNode":"$1b:props:children:1:props:children:0:props:children:1:props:children:1:props:children:props:iconNode","className":"lucide-arrow-right relative z-10 size-4 text-foreground transition-all duration-1000 group-hover:translate-x-0.5 group-hover:text-background","aria-hidden":true}]]}],"sources":[{"label":"components/ui/reveal-button.tsx","code":"$2a","html":"$2b"}]}]}] 2d:T56b,

import { RevealButton } from "@/components/ui/reveal-button";

export function RevealButtonDemo() {
  return <RevealButton>View projects</RevealButton>;
}

28:["$","section",null,{"children":[["$","h2",null,{"className":"mb-2 font-caveat text-2xl font-semibold tracking-tight","children":"Usage"}],["$","$L2c",null,{"label":"reveal-button-demo.tsx","code":"import { RevealButton } from \"@/components/ui/reveal-button\";\n\nexport function RevealButtonDemo() {\n return View projects;\n}","html":"$2d"}]]}]