react-marketing-ui 0.0.1

package/dist/animated-beam.js

@@ -0,0 +1,130 @@
+'use strict';
+
+var framerMotion = require('framer-motion');
+var react = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function AnimatedBeam({
+  className,
+  containerRef,
+  fromRef,
+  toRef,
+  curvature = 0,
+  reverse = false,
+  duration = 5,
+  delay = 0,
+  pathColor = "gray",
+  pathWidth = 2,
+  pathOpacity = 0.2,
+  gradientStartColor = "#ffaa40",
+  gradientStopColor = "#9c40ff",
+  repeat = Number.POSITIVE_INFINITY,
+  repeatDelay = 0,
+  startXOffset = 0,
+  startYOffset = 0,
+  endXOffset = 0,
+  endYOffset = 0
+}) {
+  const id = react.useId();
+  const [pathD, setPathD] = react.useState("");
+  const [svgDimensions, setSvgDimensions] = react.useState({
+    width: 0,
+    height: 0
+  });
+  const gradientCoordinates = reverse ? {
+    x1: ["90%", "-10%"],
+    x2: ["100%", "0%"],
+    y1: ["0%", "0%"],
+    y2: ["0%", "0%"]
+  } : {
+    x1: ["10%", "110%"],
+    x2: ["0%", "100%"],
+    y1: ["0%", "0%"],
+    y2: ["0%", "0%"]
+  };
+  react.useEffect(() => {
+    const updatePath = () => {
+      if (containerRef.current && fromRef.current && toRef.current) {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const rectA = fromRef.current.getBoundingClientRect();
+        const rectB = toRef.current.getBoundingClientRect();
+        const svgWidth = containerRect.width;
+        const svgHeight = containerRect.height;
+        setSvgDimensions({ width: svgWidth, height: svgHeight });
+        const startX = rectA.left - containerRect.left + rectA.width / 2 + startXOffset;
+        const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
+        const endX = rectB.left - containerRect.left + rectB.width / 2 + endXOffset;
+        const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
+        const controlY = startY - curvature;
+        const d = `M ${startX},${startY} Q ${(startX + endX) / 2},${controlY} ${endX},${endY}`;
+        setPathD(d);
+      }
+    };
+    const resizeObserver = new ResizeObserver(() => {
+      updatePath();
+    });
+    if (containerRef.current) resizeObserver.observe(containerRef.current);
+    updatePath();
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [containerRef, fromRef, toRef, curvature, startXOffset, startYOffset, endXOffset, endYOffset]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      fill: "none",
+      width: svgDimensions.width,
+      height: svgDimensions.height,
+      xmlns: "http://www.w3.org/2000/svg",
+      className: cn("pointer-events-none absolute top-0 left-0 transform-gpu stroke-2", className),
+      viewBox: `0 0 ${svgDimensions.width} ${svgDimensions.height}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: pathD, stroke: pathColor, strokeWidth: pathWidth, strokeOpacity: pathOpacity, strokeLinecap: "round" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: pathD, strokeWidth: pathWidth, stroke: `url(#${id})`, strokeOpacity: "1", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          framerMotion.motion.linearGradient,
+          {
+            className: "transform-gpu",
+            id,
+            gradientUnits: "userSpaceOnUse",
+            initial: {
+              x1: "0%",
+              x2: "0%",
+              y1: "0%",
+              y2: "0%"
+            },
+            animate: {
+              x1: gradientCoordinates.x1,
+              x2: gradientCoordinates.x2,
+              y1: gradientCoordinates.y1,
+              y2: gradientCoordinates.y2
+            },
+            transition: {
+              delay,
+              duration,
+              ease: [0.16, 1, 0.3, 1],
+              repeat,
+              repeatDelay
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: gradientStartColor, stopOpacity: "0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: gradientStartColor }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "32.5%", stopColor: gradientStopColor }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: gradientStopColor, stopOpacity: "0" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+exports.AnimatedBeam = AnimatedBeam;
+//# sourceMappingURL=animated-beam.js.map
+//# sourceMappingURL=animated-beam.js.map

package/dist/animated-beam.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/animated-beam.tsx"],"names":["twMerge","clsx","useId","useState","useEffect","jsxs","jsx","motion"],"mappings":"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","file":"animated-beam.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","'use client';\n\nimport { motion } from 'framer-motion';\nimport { type RefObject, useEffect, useId, useState } from 'react';\nimport { cn } from '../lib/utils.js';\n\nexport type AnimatedBeamProps = {\n  className?: string;\n  containerRef: RefObject<HTMLElement | null>;\n  fromRef: RefObject<HTMLElement | null>;\n  toRef: RefObject<HTMLElement | null>;\n  curvature?: number;\n  reverse?: boolean;\n  pathColor?: string;\n  pathWidth?: number;\n  pathOpacity?: number;\n  gradientStartColor?: string;\n  gradientStopColor?: string;\n  delay?: number;\n  duration?: number;\n  repeat?: number;\n  repeatDelay?: number;\n  startXOffset?: number;\n  startYOffset?: number;\n  endXOffset?: number;\n  endYOffset?: number;\n};\n\nexport function AnimatedBeam({\n  className,\n  containerRef,\n  fromRef,\n  toRef,\n  curvature = 0,\n  reverse = false,\n  duration = 5,\n  delay = 0,\n  pathColor = 'gray',\n  pathWidth = 2,\n  pathOpacity = 0.2,\n  gradientStartColor = '#ffaa40',\n  gradientStopColor = '#9c40ff',\n  repeat = Number.POSITIVE_INFINITY,\n  repeatDelay = 0,\n  startXOffset = 0,\n  startYOffset = 0,\n  endXOffset = 0,\n  endYOffset = 0,\n}: AnimatedBeamProps) {\n  const id = useId();\n  const [pathD, setPathD] = useState('');\n  const [svgDimensions, setSvgDimensions] = useState({\n    width: 0,\n    height: 0,\n  });\n\n  const gradientCoordinates = reverse\n    ? {\n        x1: ['90%', '-10%'],\n        x2: ['100%', '0%'],\n        y1: ['0%', '0%'],\n        y2: ['0%', '0%'],\n      }\n    : {\n        x1: ['10%', '110%'],\n        x2: ['0%', '100%'],\n        y1: ['0%', '0%'],\n        y2: ['0%', '0%'],\n      };\n\n  // biome-ignore lint/plugin: measures live DOM layout to compute beam path — post-render measurement.\n  useEffect(() => {\n    const updatePath = () => {\n      if (containerRef.current && fromRef.current && toRef.current) {\n        const containerRect = containerRef.current.getBoundingClientRect();\n        const rectA = fromRef.current.getBoundingClientRect();\n        const rectB = toRef.current.getBoundingClientRect();\n\n        const svgWidth = containerRect.width;\n        const svgHeight = containerRect.height;\n        setSvgDimensions({ width: svgWidth, height: svgHeight });\n\n        const startX = rectA.left - containerRect.left + rectA.width / 2 + startXOffset;\n        const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset;\n        const endX = rectB.left - containerRect.left + rectB.width / 2 + endXOffset;\n        const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset;\n\n        const controlY = startY - curvature;\n        const d = `M ${startX},${startY} Q ${(startX + endX) / 2},${controlY} ${endX},${endY}`;\n        setPathD(d);\n      }\n    };\n\n    const resizeObserver = new ResizeObserver(() => {\n      updatePath();\n    });\n\n    if (containerRef.current) resizeObserver.observe(containerRef.current);\n\n    updatePath();\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [containerRef, fromRef, toRef, curvature, startXOffset, startYOffset, endXOffset, endYOffset]);\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      width={svgDimensions.width}\n      height={svgDimensions.height}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={cn('pointer-events-none absolute top-0 left-0 transform-gpu stroke-2', className)}\n      viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}\n    >\n      <path d={pathD} stroke={pathColor} strokeWidth={pathWidth} strokeOpacity={pathOpacity} strokeLinecap=\"round\" />\n      <path d={pathD} strokeWidth={pathWidth} stroke={`url(#${id})`} strokeOpacity=\"1\" strokeLinecap=\"round\" />\n      <defs>\n        <motion.linearGradient\n          className=\"transform-gpu\"\n          id={id}\n          gradientUnits=\"userSpaceOnUse\"\n          initial={{\n            x1: '0%',\n            x2: '0%',\n            y1: '0%',\n            y2: '0%',\n          }}\n          animate={{\n            x1: gradientCoordinates.x1,\n            x2: gradientCoordinates.x2,\n            y1: gradientCoordinates.y1,\n            y2: gradientCoordinates.y2,\n          }}\n          transition={{\n            delay,\n            duration,\n            ease: [0.16, 1, 0.3, 1],\n            repeat,\n            repeatDelay,\n          }}\n        >\n          <stop stopColor={gradientStartColor} stopOpacity=\"0\" />\n          <stop stopColor={gradientStartColor} />\n          <stop offset=\"32.5%\" stopColor={gradientStopColor} />\n          <stop offset=\"100%\" stopColor={gradientStopColor} stopOpacity=\"0\" />\n        </motion.linearGradient>\n      </defs>\n    </svg>\n  );\n}\n"]}

package/dist/animated-beam.mjs

@@ -0,0 +1,4 @@
+export { AnimatedBeam } from './chunk-M5MESV26.mjs';
+import './chunk-QAWSH567.mjs';
+//# sourceMappingURL=animated-beam.mjs.map
+//# sourceMappingURL=animated-beam.mjs.map

package/dist/animated-beam.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"animated-beam.mjs"}

package/dist/button.d.cts

@@ -0,0 +1,55 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ReactNode } from 'react';
+/**
+ * Shared marketing-site button styles.
+ *
+ * The `transition` in the base string matches the former `.button-transition`
+ * utility — a pure-CSS morph so the component stays server-renderable.
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "filled" | "bordered" | "ghost" | null | undefined;
+    size?: "icon" | "sm" | "md" | "lg" | null | undefined;
+    shape?: "rounded" | "pill" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ButtonProps = VariantProps<typeof buttonVariants> & {
+    showArrow?: boolean;
+    /**
+     * Set when `actionOrLink` is an off-site URL — renders the anchor with
+     * `target="_blank"` and `rel="noopener noreferrer"`.
+     */
+    external?: boolean;
+    /** Hover tooltip on the rendered anchor/button. */
+    title?: string;
+    /**
+     * String  → renders as a plain anchor <a href={...}>.
+     * Function → renders as a <button type="button" onClick={...}>.
+     */
+    actionOrLink: string | (() => void);
+    children: ReactNode;
+    className?: string;
+    'aria-label'?: string;
+    'aria-expanded'?: boolean;
+};
+/**
+ * Shared marketing-site button.
+ *
+ * variant="filled"   → primary CTA  (inverse theming: bg-(--foreground) + text-(--primary-foreground)
+ *                     + shadow-elevated-3 — flips with the theme so it pops against any surface)
+ * variant="bordered" → elevated surface + border (bg-surface-3 + shadow-elevated-3 + border)
+ * variant="ghost"    → transparent, muted text that gains a surface on hover
+ * size="sm"          → h-8,  px-3.5, text-[15px]   (navbar / compact)
+ * size="md"          → h-9,  px-5,   text-[17px]   (default)
+ * size="lg"          → h-11, px-6,   text-[17px]   (hero CTAs)
+ * size="icon"        → size-11 square              (icon-only buttons)
+ * shape="pill"       → fully rounded (rounded-full); pill is the default
+ * showArrow          → chevron right at rest, morphs to arrow-right on hover
+ *
+ * Server-renderable: the arrow morph is pure CSS (group-hover), so no client
+ * state or animation library is needed. When `actionOrLink` is a function the
+ * component renders a <button>; passing a function requires a client-component
+ * parent (functions can't cross the server→client boundary), which is inherent
+ * to any onClick prop and unchanged by this component being server-capable.
+ */
+export declare function Button({ variant, size, shape, showArrow, external, title, actionOrLink, children, className, 'aria-label': ariaLabel, 'aria-expanded': ariaExpanded, }: ButtonProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=button.d.ts.map

package/dist/button.d.ts

@@ -0,0 +1,55 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ReactNode } from 'react';
+/**
+ * Shared marketing-site button styles.
+ *
+ * The `transition` in the base string matches the former `.button-transition`
+ * utility — a pure-CSS morph so the component stays server-renderable.
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "filled" | "bordered" | "ghost" | null | undefined;
+    size?: "icon" | "sm" | "md" | "lg" | null | undefined;
+    shape?: "rounded" | "pill" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ButtonProps = VariantProps<typeof buttonVariants> & {
+    showArrow?: boolean;
+    /**
+     * Set when `actionOrLink` is an off-site URL — renders the anchor with
+     * `target="_blank"` and `rel="noopener noreferrer"`.
+     */
+    external?: boolean;
+    /** Hover tooltip on the rendered anchor/button. */
+    title?: string;
+    /**
+     * String  → renders as a plain anchor <a href={...}>.
+     * Function → renders as a <button type="button" onClick={...}>.
+     */
+    actionOrLink: string | (() => void);
+    children: ReactNode;
+    className?: string;
+    'aria-label'?: string;
+    'aria-expanded'?: boolean;
+};
+/**
+ * Shared marketing-site button.
+ *
+ * variant="filled"   → primary CTA  (inverse theming: bg-(--foreground) + text-(--primary-foreground)
+ *                     + shadow-elevated-3 — flips with the theme so it pops against any surface)
+ * variant="bordered" → elevated surface + border (bg-surface-3 + shadow-elevated-3 + border)
+ * variant="ghost"    → transparent, muted text that gains a surface on hover
+ * size="sm"          → h-8,  px-3.5, text-[15px]   (navbar / compact)
+ * size="md"          → h-9,  px-5,   text-[17px]   (default)
+ * size="lg"          → h-11, px-6,   text-[17px]   (hero CTAs)
+ * size="icon"        → size-11 square              (icon-only buttons)
+ * shape="pill"       → fully rounded (rounded-full); pill is the default
+ * showArrow          → chevron right at rest, morphs to arrow-right on hover
+ *
+ * Server-renderable: the arrow morph is pure CSS (group-hover), so no client
+ * state or animation library is needed. When `actionOrLink` is a function the
+ * component renders a <button>; passing a function requires a client-component
+ * parent (functions can't cross the server→client boundary), which is inherent
+ * to any onClick prop and unchanged by this component being server-capable.
+ */
+export declare function Button({ variant, size, shape, showArrow, external, title, actionOrLink, children, className, 'aria-label': ariaLabel, 'aria-expanded': ariaExpanded, }: ButtonProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=button.d.ts.map

package/dist/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;GAKG;AACH,QAAA,MAAM,cAAc;;;;8EAuBnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,EAAE,MAAM,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,SAAiB,EACjB,QAAgB,EAChB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,eAAe,EAAE,YAAY,GAC9B,EAAE,WAAW,+BAkEb"}

package/dist/button.js

@@ -0,0 +1,119 @@
+'use strict';
+
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/button.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var buttonVariants = classVarianceAuthority.cva(
+  "group inline-flex items-center justify-center gap-1.5 font-medium [transition:opacity_.24s_80ms,transform_.15s_cubic-bezier(.4,0,.2,1),box-shadow_.15s_cubic-bezier(.4,0,.2,1),filter_.15s_cubic-bezier(.4,0,.2,1)] disabled:[transition:opacity_.1s]",
+  {
+    variants: {
+      variant: {
+        filled: "bg-(--foreground) text-(--primary-foreground) shadow-elevated-3 hover:opacity-90",
+        bordered: "border border-(--border-hi) bg-surface-3 text-foreground shadow-elevated-3 hover:bg-(--muted)",
+        ghost: "text-(--foreground-secondary) hover:bg-(--surface-hover) hover:text-(--foreground)"
+      },
+      size: {
+        sm: "h-8 px-3.5 text-[15px]",
+        md: "h-9 px-5 text-[17px]",
+        lg: "h-11 px-6 text-[17px]",
+        icon: "size-11"
+      },
+      shape: {
+        rounded: "rounded-interactive",
+        pill: "rounded-full"
+      }
+    },
+    // Pill is the house standard — every CTA is fully rounded.
+    defaultVariants: { variant: "filled", size: "md", shape: "pill" }
+  }
+);
+function Button({
+  variant,
+  size,
+  shape,
+  showArrow = false,
+  external = false,
+  title,
+  actionOrLink,
+  children,
+  className,
+  "aria-label": ariaLabel,
+  "aria-expanded": ariaExpanded
+}) {
+  const buttonClassName = cn(buttonVariants({ variant, size, shape }), className);
+  const arrowSlot = showArrow && /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: "0 0 14 14",
+      width: "14",
+      height: "14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      className: "shrink-0",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: "0",
+            y1: "7",
+            x2: "9",
+            y2: "7",
+            strokeDasharray: "9",
+            className: "[stroke-dashoffset:9] [transition:stroke-dashoffset_.08s_cubic-bezier(.22,1,.36,1)] group-hover:[stroke-dashoffset:0] group-hover:[transition-duration:.22s]"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M5 3l4 4-4 4",
+            className: "[transform:translateX(0)] [transition:transform_.22s_cubic-bezier(.22,1,.36,1)] group-hover:[transform:translateX(2px)]"
+          }
+        )
+      ]
+    }
+  );
+  if (typeof actionOrLink === "string")
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "a",
+      {
+        href: actionOrLink,
+        className: cn(buttonClassName, "no-underline"),
+        "aria-label": ariaLabel,
+        title,
+        ...external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+        children: [
+          children,
+          arrowSlot
+        ]
+      }
+    );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: buttonClassName,
+      onClick: actionOrLink,
+      "aria-label": ariaLabel,
+      "aria-expanded": ariaExpanded,
+      title,
+      children: [
+        children,
+        arrowSlot
+      ]
+    }
+  );
+}
+
+exports.Button = Button;
+//# sourceMappingURL=button.js.map
+//# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/button.tsx"],"names":["twMerge","clsx","cva","jsxs","jsx"],"mappings":"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","file":"button.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","import { cva, type VariantProps } from 'class-variance-authority';\nimport type { ReactNode } from 'react';\nimport { cn } from '../lib/utils.js';\n\n/**\n * Shared marketing-site button styles.\n *\n * The `transition` in the base string matches the former `.button-transition`\n * utility — a pure-CSS morph so the component stays server-renderable.\n */\nconst buttonVariants = cva(\n  'group inline-flex items-center justify-center gap-1.5 font-medium [transition:opacity_.24s_80ms,transform_.15s_cubic-bezier(.4,0,.2,1),box-shadow_.15s_cubic-bezier(.4,0,.2,1),filter_.15s_cubic-bezier(.4,0,.2,1)] disabled:[transition:opacity_.1s]',\n  {\n    variants: {\n      variant: {\n        filled: 'bg-(--foreground) text-(--primary-foreground) shadow-elevated-3 hover:opacity-90',\n        bordered: 'border border-(--border-hi) bg-surface-3 text-foreground shadow-elevated-3 hover:bg-(--muted)',\n        ghost: 'text-(--foreground-secondary) hover:bg-(--surface-hover) hover:text-(--foreground)',\n      },\n      size: {\n        sm: 'h-8 px-3.5 text-[15px]',\n        md: 'h-9 px-5 text-[17px]',\n        lg: 'h-11 px-6 text-[17px]',\n        icon: 'size-11',\n      },\n      shape: {\n        rounded: 'rounded-interactive',\n        pill: 'rounded-full',\n      },\n    },\n    // Pill is the house standard — every CTA is fully rounded.\n    defaultVariants: { variant: 'filled', size: 'md', shape: 'pill' },\n  },\n);\n\nexport type ButtonProps = VariantProps<typeof buttonVariants> & {\n  showArrow?: boolean;\n  /**\n   * Set when `actionOrLink` is an off-site URL — renders the anchor with\n   * `target=\"_blank\"` and `rel=\"noopener noreferrer\"`.\n   */\n  external?: boolean;\n  /** Hover tooltip on the rendered anchor/button. */\n  title?: string;\n  /**\n   * String  → renders as a plain anchor <a href={...}>.\n   * Function → renders as a <button type=\"button\" onClick={...}>.\n   */\n  actionOrLink: string | (() => void);\n  children: ReactNode;\n  className?: string;\n  'aria-label'?: string;\n  'aria-expanded'?: boolean;\n};\n\n/**\n * Shared marketing-site button.\n *\n * variant=\"filled\"   → primary CTA  (inverse theming: bg-(--foreground) + text-(--primary-foreground)\n *                     + shadow-elevated-3 — flips with the theme so it pops against any surface)\n * variant=\"bordered\" → elevated surface + border (bg-surface-3 + shadow-elevated-3 + border)\n * variant=\"ghost\"    → transparent, muted text that gains a surface on hover\n * size=\"sm\"          → h-8,  px-3.5, text-[15px]   (navbar / compact)\n * size=\"md\"          → h-9,  px-5,   text-[17px]   (default)\n * size=\"lg\"          → h-11, px-6,   text-[17px]   (hero CTAs)\n * size=\"icon\"        → size-11 square              (icon-only buttons)\n * shape=\"pill\"       → fully rounded (rounded-full); pill is the default\n * showArrow          → chevron right at rest, morphs to arrow-right on hover\n *\n * Server-renderable: the arrow morph is pure CSS (group-hover), so no client\n * state or animation library is needed. When `actionOrLink` is a function the\n * component renders a <button>; passing a function requires a client-component\n * parent (functions can't cross the server→client boundary), which is inherent\n * to any onClick prop and unchanged by this component being server-capable.\n */\nexport function Button({\n  variant,\n  size,\n  shape,\n  showArrow = false,\n  external = false,\n  title,\n  actionOrLink,\n  children,\n  className,\n  'aria-label': ariaLabel,\n  'aria-expanded': ariaExpanded,\n}: ButtonProps) {\n  const buttonClassName = cn(buttonVariants({ variant, size, shape }), className);\n\n  /*\n   * Single SVG that morphs from  ›  to  →  on hover — pure CSS, no JS.\n   * The shaft draws in from the left (stroke-dashoffset 9 → 0) and the arrowhead\n   * nudges right. Draw-in is slower (.22s) than the reverse (.08s), matching the\n   * asymmetric timing of the former framer-motion version. ease = cubic-bezier(.22,1,.36,1).\n   */\n  const arrowSlot = showArrow && (\n    <svg\n      viewBox=\"0 0 14 14\"\n      width=\"14\"\n      height=\"14\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden={true}\n      className=\"shrink-0\"\n    >\n      {/* Shaft — draws in from the left */}\n      <line\n        x1=\"0\"\n        y1=\"7\"\n        x2=\"9\"\n        y2=\"7\"\n        strokeDasharray=\"9\"\n        className=\"[stroke-dashoffset:9] [transition:stroke-dashoffset_.08s_cubic-bezier(.22,1,.36,1)] group-hover:[stroke-dashoffset:0] group-hover:[transition-duration:.22s]\"\n      />\n      {/* Arrowhead — nudges right so the shaft \"connects\" underneath */}\n      <path\n        d=\"M5 3l4 4-4 4\"\n        className=\"[transform:translateX(0)] [transition:transform_.22s_cubic-bezier(.22,1,.36,1)] group-hover:[transform:translateX(2px)]\"\n      />\n    </svg>\n  );\n\n  if (typeof actionOrLink === 'string')\n    return (\n      <a\n        href={actionOrLink}\n        className={cn(buttonClassName, 'no-underline')}\n        aria-label={ariaLabel}\n        title={title}\n        {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}\n      >\n        {children}\n        {arrowSlot}\n      </a>\n    );\n\n  return (\n    <button\n      type=\"button\"\n      className={buttonClassName}\n      onClick={actionOrLink}\n      aria-label={ariaLabel}\n      aria-expanded={ariaExpanded}\n      title={title}\n    >\n      {children}\n      {arrowSlot}\n    </button>\n  );\n}\n"]}

package/dist/button.mjs

@@ -0,0 +1,4 @@
+export { Button } from './chunk-AYY7D2RJ.mjs';
+import './chunk-QAWSH567.mjs';
+//# sourceMappingURL=button.mjs.map
+//# sourceMappingURL=button.mjs.map

package/dist/button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"button.mjs"}

package/dist/card.d.cts

@@ -0,0 +1,20 @@
+import { type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+import { type SurfaceLevel } from '../lib/surface.js';
+declare const cardVariants: (props?: ({
+    variant?: "inset" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+    level?: SurfaceLevel;
+    shadowLevel?: SurfaceLevel;
+}
+declare function Card({ className, variant, level, shadowLevel, ...props }: CardProps): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export type { CardProps };
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+//# sourceMappingURL=card.d.ts.map

package/dist/card.d.ts

@@ -0,0 +1,20 @@
+import { type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+import { type SurfaceLevel } from '../lib/surface.js';
+declare const cardVariants: (props?: ({
+    variant?: "inset" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+    level?: SurfaceLevel;
+    shadowLevel?: SurfaceLevel;
+}
+declare function Card({ className, variant, level, shadowLevel, ...props }: CardProps): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export type { CardProps };
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+//# sourceMappingURL=card.d.ts.map

package/dist/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,mBAAmB,CAAC;AAGpE,QAAA,MAAM,YAAY;;8EAUhB,CAAC;AAEH,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,OAAO,YAAY,CAAC;IACjG,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,YAAY,CAAC;CAC5B;AAED,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,KAAS,EAAE,WAAe,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAiBhG;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAavE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAItE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAE5E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAYxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAavE;AAED,YAAY,EAAE,SAAS,EAAE,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC"}

package/dist/card.js

@@ -0,0 +1,146 @@
+'use strict';
+
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/card.tsx
+
+// src/lib/surface.ts
+var SURFACE_BG = {
+  1: "bg-surface-1",
+  2: "bg-surface-2",
+  3: "bg-surface-3",
+  4: "bg-surface-4",
+  5: "bg-surface-5",
+  6: "bg-surface-6",
+  7: "bg-surface-7",
+  8: "bg-surface-8"
+};
+var SURFACE_VAR = {
+  1: "[--popup-surface:var(--surface-1)]",
+  2: "[--popup-surface:var(--surface-2)]",
+  3: "[--popup-surface:var(--surface-3)]",
+  4: "[--popup-surface:var(--surface-4)]",
+  5: "[--popup-surface:var(--surface-5)]",
+  6: "[--popup-surface:var(--surface-6)]",
+  7: "[--popup-surface:var(--surface-7)]",
+  8: "[--popup-surface:var(--surface-8)]"
+};
+var SURFACE_SHADOW_COMBINED = {
+  1: "shadow-elevated-1",
+  2: "shadow-elevated-2",
+  3: "shadow-elevated-3",
+  4: "shadow-elevated-4",
+  5: "shadow-elevated-5",
+  6: "shadow-elevated-6",
+  7: "shadow-elevated-7",
+  8: "shadow-elevated-8"
+};
+function solidSurface(level, shadowLevel = level) {
+  return `${SURFACE_BG[level]} ${SURFACE_SHADOW_COMBINED[shadowLevel]} ${SURFACE_VAR[level]}`;
+}
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var cardVariants = classVarianceAuthority.cva("text-foreground flex flex-col", {
+  variants: {
+    variant: {
+      default: "gap-6 rounded-2xl py-6",
+      inset: "rounded-2xl p-1"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function Card({ className, variant = "default", level = 3, shadowLevel = 1, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card",
+      "data-variant": variant,
+      "data-level": level,
+      className: cn(
+        cardVariants({ variant }),
+        solidSurface(level, shadowLevel),
+        // bg-muted overrides solidSurface's bg, making the outer a gray frame
+        // while keeping its shadow, rim, and --popup-surface.
+        variant === "inset" && "bg-muted",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start has-[[data-slot=card-action]]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        "[[data-variant=default]>_&]:gap-1.5 [[data-variant=default]>_&]:px-6",
+        "[[data-variant=inset]>_&]:px-3 [[data-variant=inset]>_&]:py-2 [[data-variant=inset]>_&]:pt-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "card-title", className: cn("font-semibold [[data-variant=default]_&]:leading-none", className), ...props });
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "card-description", className: cn("text-muted-foreground text-sm", className), ...props });
+}
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn(
+        "[[data-variant=default]>_&]:px-6",
+        "[[data-variant=inset]>_&]:flex [[data-variant=inset]>_&]:flex-1 [[data-variant=inset]>_&]:flex-col [[data-variant=inset]>_&]:rounded-lg [[data-variant=inset]>_&]:bg-surface-3 [[data-variant=inset]>_&]:p-4 [[data-variant=inset]>_&]:shadow-elevated-3 [[data-variant=inset]>_&]:[--popup-surface:var(--surface-3)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn(
+        "flex items-center [.border-t]:pt-6",
+        "[[data-variant=default]>_&]:px-6",
+        "[[data-variant=inset]>_&]:mt-auto [[data-variant=inset]>_&]:justify-end [[data-variant=inset]>_&]:pt-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+exports.Card = Card;
+exports.CardAction = CardAction;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardTitle = CardTitle;
+//# sourceMappingURL=card.js.map
+//# sourceMappingURL=card.js.map

package/dist/card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/surface.ts","../src/lib/utils.ts","../src/components/card.tsx"],"names":["twMerge","clsx","cva","jsx"],"mappings":"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","file":"card.js","sourcesContent":["export type SurfaceLevel = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n\nconst SURFACE_BG: Record<SurfaceLevel, string> = {\n  1: 'bg-surface-1',\n  2: 'bg-surface-2',\n  3: 'bg-surface-3',\n  4: 'bg-surface-4',\n  5: 'bg-surface-5',\n  6: 'bg-surface-6',\n  7: 'bg-surface-7',\n  8: 'bg-surface-8',\n};\n\nconst SURFACE_VAR: Record<SurfaceLevel, string> = {\n  1: '[--popup-surface:var(--surface-1)]',\n  2: '[--popup-surface:var(--surface-2)]',\n  3: '[--popup-surface:var(--surface-3)]',\n  4: '[--popup-surface:var(--surface-4)]',\n  5: '[--popup-surface:var(--surface-5)]',\n  6: '[--popup-surface:var(--surface-6)]',\n  7: '[--popup-surface:var(--surface-7)]',\n  8: '[--popup-surface:var(--surface-8)]',\n};\n\n/**\n * Drops + rim insets in a single `box-shadow` (no `::after`). Used by `solidSurface()`.\n * Literal Tailwind classes so the scanner picks them up.\n */\nconst SURFACE_SHADOW_COMBINED: Record<SurfaceLevel, string> = {\n  1: 'shadow-elevated-1',\n  2: 'shadow-elevated-2',\n  3: 'shadow-elevated-3',\n  4: 'shadow-elevated-4',\n  5: 'shadow-elevated-5',\n  6: 'shadow-elevated-6',\n  7: 'shadow-elevated-7',\n  8: 'shadow-elevated-8',\n};\n\n/**\n * Elevation for a free-floating surface: background, elevation variable, and the drop shadow with\n * its rim inset painted in the same `box-shadow` — which leaves `::after` free for other purposes.\n *\n * Suits containers with no opaque children near their edges. A child painted over the rim (a sticky\n * label, a pinned input, a dialog header) covers it, since nothing re-paints the rim above the\n * children.\n *\n * When `level !== shadowLevel` the rim color tracks `shadowLevel` — the two cannot be controlled\n * independently.\n */\nexport function solidSurface(level: SurfaceLevel, shadowLevel: SurfaceLevel = level): string {\n  return `${SURFACE_BG[level]} ${SURFACE_SHADOW_COMBINED[shadowLevel]} ${SURFACE_VAR[level]}`;\n}\n","import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","import { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\nimport { type SurfaceLevel, solidSurface } from '../lib/surface.js';\nimport { cn } from '../lib/utils.js';\n\nconst cardVariants = cva('text-foreground flex flex-col', {\n  variants: {\n    variant: {\n      default: 'gap-6 rounded-2xl py-6',\n      inset: 'rounded-2xl p-1',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {\n  level?: SurfaceLevel;\n  shadowLevel?: SurfaceLevel;\n}\n\nfunction Card({ className, variant = 'default', level = 3, shadowLevel = 1, ...props }: CardProps) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-variant={variant}\n      data-level={level}\n      className={cn(\n        cardVariants({ variant }),\n        solidSurface(level, shadowLevel),\n        // bg-muted overrides solidSurface's bg, making the outer a gray frame\n        // while keeping its shadow, rim, and --popup-surface.\n        variant === 'inset' && 'bg-muted',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start has-[[data-slot=card-action]]:grid-cols-[1fr_auto] [.border-b]:pb-6',\n        '[[data-variant=default]>_&]:gap-1.5 [[data-variant=default]>_&]:px-6',\n        '[[data-variant=inset]>_&]:px-3 [[data-variant=inset]>_&]:py-2 [[data-variant=inset]>_&]:pt-1',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div data-slot=\"card-title\" className={cn('font-semibold [[data-variant=default]_&]:leading-none', className)} {...props} />\n  );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"card-description\" className={cn('text-muted-foreground text-sm', className)} {...props} />;\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\n        '[[data-variant=default]>_&]:px-6',\n        '[[data-variant=inset]>_&]:flex [[data-variant=inset]>_&]:flex-1 [[data-variant=inset]>_&]:flex-col [[data-variant=inset]>_&]:rounded-lg [[data-variant=inset]>_&]:bg-surface-3 [[data-variant=inset]>_&]:p-4 [[data-variant=inset]>_&]:shadow-elevated-3 [[data-variant=inset]>_&]:[--popup-surface:var(--surface-3)]',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        'flex items-center [.border-t]:pt-6',\n        '[[data-variant=default]>_&]:px-6',\n        '[[data-variant=inset]>_&]:mt-auto [[data-variant=inset]>_&]:justify-end [[data-variant=inset]>_&]:pt-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type { CardProps };\nexport { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };\n"]}