@floegence/floe-webapp-core 0.86.60 → 0.86.63

package/dist/components/ui/Button.js

@@ -1,23 +1,23 @@
-import { spread as u, mergeProps as g, insert as n, createComponent as t, memo as m, Dynamic as h, effect as b, className as f, template as d } from "solid-js/web";
-import { splitProps as p, Show as i } from "solid-js";
-import { cn as s } from "../../utils/cn.js";
-import { Loader2 as v } from "../icons/index.js";
-var x = /* @__PURE__ */ d("<span aria-hidden=true>"), y = /* @__PURE__ */ d("<button type=button data-floe-control=button data-floe-surface-part=action>");
+import { spread as h, mergeProps as m, insert as n, createComponent as t, memo as c, Dynamic as p, effect as d, className as g, template as u } from "solid-js/web";
+import { splitProps as b, Show as l } from "solid-js";
+import { cn as i } from "../../utils/cn.js";
+import { Loader2 as x } from "../icons/index.js";
+var f = /* @__PURE__ */ u("<span aria-hidden=true>"), y = /* @__PURE__ */ u("<button type=button data-floe-control=button data-floe-surface-part=action>");
 const w = {
-  default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:bg-primary/80",
-  primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:bg-primary/80",
-  secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 active:bg-secondary/70",
-  outline: "border border-border bg-background shadow-sm hover:bg-accent hover:text-accent-foreground active:bg-accent/80",
-  ghost: "hover:bg-accent hover:text-accent-foreground active:bg-accent/80",
-  "ghost-destructive": "bg-transparent text-muted-foreground hover:bg-error hover:text-error-foreground active:bg-error/80",
-  destructive: "bg-error text-error-foreground shadow-sm hover:bg-error/90 active:bg-error/80"
-}, z = {
-  xs: "h-6 px-2 text-[11px] rounded",
-  sm: "h-7 px-2.5 text-xs rounded",
-  md: "h-8 px-3 text-xs rounded-md",
-  lg: "h-9 px-4 text-sm rounded-md",
-  icon: "h-8 w-8 rounded-md"
-}, S = {
+  default: "bg-primary text-primary-foreground hover:bg-[color-mix(in_srgb,var(--primary)_92%,var(--primary-foreground))]",
+  primary: "bg-primary text-primary-foreground hover:bg-[color-mix(in_srgb,var(--primary)_92%,var(--primary-foreground))]",
+  secondary: "bg-[var(--floe-well)] text-foreground hover:bg-[var(--floe-well-strong)]",
+  outline: "border border-[var(--floe-line-strong)] bg-transparent text-foreground hover:bg-[var(--floe-state-hover)] hover:border-[color-mix(in_srgb,var(--foreground)_26%,transparent)]",
+  ghost: "bg-transparent text-[var(--floe-ink-soft)] hover:bg-[var(--floe-state-hover)] hover:text-foreground",
+  "ghost-destructive": "bg-transparent text-[var(--floe-ink-soft)] hover:bg-[color-mix(in_srgb,var(--error)_12%,transparent)] hover:text-error",
+  destructive: "bg-error text-error-foreground hover:bg-[color-mix(in_srgb,var(--error)_88%,var(--foreground))]"
+}, _ = {
+  xs: "h-[var(--floe-control-height-xs)] px-2 text-[length:var(--floe-type-caption)] rounded-sm",
+  sm: "h-[var(--floe-control-height-sm)] px-2.5 text-[length:var(--floe-type-control)] rounded-md",
+  md: "h-[var(--floe-control-height-md)] px-3 text-[length:var(--floe-type-control)] rounded-control",
+  lg: "h-[var(--floe-control-height-lg)] px-3.5 text-[length:var(--floe-type-control)] rounded-control",
+  icon: "h-[var(--floe-control-height-md)] w-[var(--floe-control-height-md)] rounded-control"
+}, k = {
   xs: "w-3 h-3",
   sm: "w-3.5 h-3.5",
   md: "w-3.5 h-3.5",
@@ -25,48 +25,56 @@ const w = {
   icon: "w-4 h-4"
 };
 function P(a) {
-  const [e, c] = p(a, ["variant", "size", "loading", "icon", "class", "children", "disabled"]), l = () => S[e.size ?? "md"];
+  const [r, v] = b(a, ["variant", "size", "loading", "icon", "class", "children", "disabled"]), s = () => k[r.size ?? "md"];
   return (() => {
-    var r = y();
-    return u(r, g({
+    var o = y();
+    return h(o, m({
       get "data-floe-surface"() {
-        return e.variant === "ghost" || e.variant === "ghost-destructive" ? void 0 : "raised";
+        return r.variant === "ghost" || r.variant === "ghost-destructive" || r.variant === "outline" ? void 0 : "flat";
       },
       get class() {
-        return s("inline-flex min-w-max items-center justify-center gap-1.5 whitespace-nowrap font-medium cursor-pointer", "transition-[color,background-color,border-color] duration-120", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed", w[e.variant ?? "default"], z[e.size ?? "md"], e.class);
+        return i("inline-flex min-w-max items-center justify-center gap-1.5 whitespace-nowrap font-medium cursor-pointer", "tracking-[var(--floe-tracking-normal)]", "transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "active:scale-[var(--floe-press-scale)]", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--floe-plane)]", "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed", w[r.variant ?? "default"], _[r.size ?? "md"], r.class);
       },
       get disabled() {
-        return e.disabled || e.loading;
+        return r.disabled || r.loading;
       },
       get "aria-busy"() {
-        return e.loading || void 0;
+        return r.loading || void 0;
       }
-    }, c), !1, !0), n(r, t(i, {
+    }, v), !1, !0), n(o, t(l, {
       get when() {
-        return e.icon || "loading" in a;
+        return r.icon || "loading" in a;
       },
       get children() {
-        var o = x();
-        return n(o, t(i, {
+        var e = f();
+        return n(e, t(l, {
           get when() {
-            return e.loading;
+            return r.loading;
           },
           get fallback() {
-            return m(() => !!e.icon)() && t(h, {
+            return c(() => !!r.icon)() && t(p, {
               get component() {
-                return e.icon;
+                return r.icon;
               },
               class: "h-full w-full"
             });
           },
           get children() {
-            return t(v, {
+            return t(x, {
               class: "h-full w-full animate-spin"
             });
           }
-        })), b(() => f(o, s("inline-flex shrink-0 items-center justify-center", l()))), o;
+        })), d(() => g(e, i("inline-flex shrink-0 items-center justify-center", s()))), e;
       }
-    }), null), n(r, () => e.children, null), r;
+    }), null), n(o, () => r.children, null), n(o, t(l, {
+      get when() {
+        return c(() => !r.icon)() && "loading" in a;
+      },
+      get children() {
+        var e = f();
+        return d(() => g(e, i("inline-flex shrink-0", s()))), e;
+      }
+    }), null), o;
   })();
 }
 export {

package/dist/components/ui/Card.d.ts

@@ -1,79 +1,28 @@
 import { type JSX } from 'solid-js';
-export type CardVariant = 'default' | 'hover-lift' | 'gradient-border' | 'glass' | 'spotlight' | 'shimmer' | 'glow';
+export type CardVariant = 'default' | 'interactive' | 'well';
 export interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    /**
+     * `default` is a filled content plane on the canvas. `interactive` adds the
+     * language's hover lift and first elevation step for clickable cards.
+     * `well` recesses the card into its host, for grouped secondary content.
+     */
     variant?: CardVariant;
-    /** Enable 3D perspective tilt on hover (works best with hover-lift and spotlight variants) */
-    enableTilt?: boolean;
-    /** Custom gradient colors for gradient-border variant */
-    gradientColors?: string;
-    /** Glow color for glow variant */
-    glowColor?: string;
 }
 /**
- * Base Card component
+ * Card — a plane, not a box.
+ *
+ * Separation comes from the fill step against the canvas and from the gutter
+ * around it; the card itself carries no contour and no resting shadow. That is
+ * what keeps a page of cards calm instead of drawing a grid of rectangles.
  */
 export declare function Card(props: CardProps): JSX.Element;
-/**
- * Card header component
- */
 export type CardHeaderProps = JSX.HTMLAttributes<HTMLDivElement>;
 export declare function CardHeader(props: CardHeaderProps): JSX.Element;
-/**
- * Card title component
- */
 export type CardTitleProps = JSX.HTMLAttributes<HTMLHeadingElement>;
 export declare function CardTitle(props: CardTitleProps): JSX.Element;
-/**
- * Card description component
- */
 export type CardDescriptionProps = JSX.HTMLAttributes<HTMLParagraphElement>;
 export declare function CardDescription(props: CardDescriptionProps): JSX.Element;
-/**
- * Card content component
- */
 export type CardContentProps = JSX.HTMLAttributes<HTMLDivElement>;
 export declare function CardContent(props: CardContentProps): JSX.Element;
-/**
- * Card footer component
- */
 export type CardFooterProps = JSX.HTMLAttributes<HTMLDivElement>;
 export declare function CardFooter(props: CardFooterProps): JSX.Element;
-/**
- * Interactive 3D Card with mouse tracking
- */
-export interface Interactive3DCardProps extends JSX.HTMLAttributes<HTMLDivElement> {
-    /** Intensity of the 3D effect (1-20, default 10) */
-    intensity?: number;
-    /** Enable shine effect */
-    shine?: boolean;
-    /** Border glow on hover */
-    borderGlow?: boolean;
-}
-export declare function Interactive3DCard(props: Interactive3DCardProps): JSX.Element;
-/**
- * Animated Border Card with rotating gradient
- */
-export interface AnimatedBorderCardProps extends JSX.HTMLAttributes<HTMLDivElement> {
-    /** Animation duration in seconds */
-    duration?: number;
-    /** Border width in pixels */
-    borderWidth?: number;
-    /** Gradient colors (Tailwind classes) */
-    colors?: string;
-}
-export declare function AnimatedBorderCard(props: AnimatedBorderCardProps): JSX.Element;
-/**
- * Neon Glow Card
- */
-export interface NeonCardProps extends JSX.HTMLAttributes<HTMLDivElement> {
-    /** Neon color (CSS color value) */
-    color?: string;
-    /** Pulse animation */
-    pulse?: boolean;
-}
-export declare function NeonCard(props: NeonCardProps): JSX.Element;
-/**
- * Morphing Card with blob-like background
- */
-export type MorphCardProps = JSX.HTMLAttributes<HTMLDivElement>;
-export declare function MorphCard(props: MorphCardProps): JSX.Element;

package/dist/components/ui/Card.js

@@ -1,272 +1,99 @@
-import { spread as m, mergeProps as b, insert as i, effect as A, setStyleProperty as z, memo as E, className as L, template as f, use as q, delegateEvents as W } from "solid-js/web";
-import { splitProps as h, createSignal as F, onCleanup as B } from "solid-js";
-import { cn as p } from "../../utils/cn.js";
-var D = /* @__PURE__ */ f('<div style="background-size:200% 200%;animation:gradient-shift 3s ease infinite">'), G = /* @__PURE__ */ f('<div class="absolute inset-[1px] rounded-[7px] bg-card">'), N = /* @__PURE__ */ f('<div class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">'), Z = /* @__PURE__ */ f('<div class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite]"style="background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 12%, transparent), transparent)">'), J = /* @__PURE__ */ f("<div><div>"), T = /* @__PURE__ */ f("<div>"), K = /* @__PURE__ */ f("<h3>"), O = /* @__PURE__ */ f("<p>"), Q = /* @__PURE__ */ f('<div><div class="relative z-10"style=transform:translateZ(20px)>'), U = /* @__PURE__ */ f('<div class="pointer-events-none absolute inset-0 z-20 opacity-0 transition-opacity duration-300">'), V = /* @__PURE__ */ f('<div><div class="absolute inset-0"style="background:conic-gradient(from 0deg, var(--primary), var(--accent), var(--secondary), var(--primary))"></div><div class="relative rounded-[10px] bg-card h-full">'), ee = /* @__PURE__ */ f('<div><div class="absolute inset-0 -z-10 overflow-hidden"><div class="absolute -top-1/2 -left-1/2 w-full h-full rounded-full bg-primary/20"style="animation:morph 8s ease-in-out infinite;filter:blur(40px)"></div><div class="absolute -bottom-1/2 -right-1/2 w-full h-full rounded-full bg-accent/20"style="animation:morph 8s ease-in-out infinite reverse;filter:blur(40px)"></div></div><div class="relative z-10">');
-function oe(l) {
-  const [e, a] = h(l, ["variant", "enableTilt", "gradientColors", "glowColor", "class", "children", "style"]), r = () => e.variant ?? "default", [d, g] = F({});
-  let c, s = null, _ = 0, y = 0;
-  const u = () => {
-    if (s = null, !c || !e.enableTilt && r() !== "spotlight") return;
-    const t = c.getBoundingClientRect(), o = _ - t.left, v = y - t.top;
-    if (e.enableTilt) {
-      const Y = t.width / 2, I = t.height / 2, R = (v - I) / 10, H = (Y - o) / 10;
-      g({
-        transform: `perspective(1000px) rotateX(${R}deg) rotateY(${H}deg) scale3d(1.02, 1.02, 1.02)`
-      });
-    }
-    r() === "spotlight" && X({
-      x: o,
-      y: v
-    });
-  }, M = (t) => {
-    if (c && !(!e.enableTilt && r() !== "spotlight") && (_ = t.clientX, y = t.clientY, s === null)) {
-      if (typeof requestAnimationFrame > "u") {
-        u();
-        return;
-      }
-      s = requestAnimationFrame(u);
-    }
-  }, S = () => {
-    s !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(s), s = null), e.enableTilt && g({
-      transform: "perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"
-    });
-  }, [C, X] = F({
-    x: 0,
-    y: 0
-  });
-  B(() => {
-    s !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(s), s = null);
-  });
-  const k = "rounded-[10px] duration-180 ease-out", P = () => e.enableTilt || r() === "hover-lift" ? "transition-[color,background-color,border-color,box-shadow,transform]" : "transition-[color,background-color,border-color]", j = {
-    default: "bg-card border border-border shadow-sm hover:shadow-sm",
-    "hover-lift": "bg-card border border-border shadow-sm hover:shadow-md hover:-translate-y-0.5",
-    "gradient-border": "relative bg-card overflow-hidden",
-    glass: "backdrop-blur-xl bg-card/30 border border-border/50 shadow-lg",
-    spotlight: "relative bg-card border border-border overflow-hidden",
-    shimmer: "relative bg-card border border-border overflow-hidden",
-    glow: "bg-card border border-border shadow-sm"
-  }, n = () => {
-    if (r() !== "gradient-border") return null;
-    const t = e.gradientColors ?? "from-primary via-accent to-secondary";
-    return [(() => {
-      var o = D();
-      return A(() => L(o, p("absolute inset-0 bg-gradient-to-r opacity-75", t, "animate-[gradient-rotate_3s_linear_infinite]"))), o;
-    })(), G()];
-  }, x = () => r() !== "spotlight" ? null : (() => {
-    var t = N();
-    return A((o) => z(t, "background", `radial-gradient(
-            400px circle at ${C().x}px ${C().y}px,
-            color-mix(in srgb, var(--primary) 18%, transparent),
-            transparent 40%
-          )`)), t;
-  })(), $ = () => r() !== "shimmer" ? null : Z(), w = () => {
-    if (r() !== "glow") return {};
-    const t = e.glowColor ?? "var(--glow)";
-    return {
-      "box-shadow": [`0 0 0 1px color-mix(in srgb, ${t} 55%, transparent)`, `0 0 16px -4px color-mix(in srgb, ${t} 50%, transparent)`, `0 0 28px -8px color-mix(in srgb, ${t} 28%, transparent)`].join(", ")
-    };
-  };
+import { spread as l, mergeProps as n, insert as s, template as u } from "solid-js/web";
+import { splitProps as o } from "solid-js";
+import { cn as c } from "../../utils/cn.js";
+var i = /* @__PURE__ */ u("<div>"), f = /* @__PURE__ */ u("<h3>"), p = /* @__PURE__ */ u("<p>");
+function b(t) {
+  const [e, a] = o(t, ["variant", "class", "children"]), r = () => e.variant ?? "default";
   return (() => {
-    var t = J(), o = t.firstChild;
-    t.addEventListener("mouseleave", S), t.$$mousemove = M;
-    var v = c;
-    return typeof v == "function" ? q(v, t) : c = t, m(t, b({
-      get "data-floe-card-variant"() {
-        return E(() => !!e.enableTilt)() ? "tilt" : r();
-      },
+    var d = i();
+    return l(d, n({
       get "data-floe-surface"() {
-        return r() === "default" && !e.enableTilt ? "raised" : void 0;
+        return r() === "well" ? "inset" : void 0;
       },
-      get class() {
-        return p(k, P(), j[r()], r() === "spotlight" && "group", e.class);
+      get "data-floe-card-variant"() {
+        return r();
+      },
+      get "data-floe-interactive"() {
+        return r() === "interactive" ? "lift" : void 0;
       },
-      get style() {
-        return {
-          ...typeof e.style == "object" ? e.style : {},
-          ...d(),
-          ...w(),
-          "transform-style": "preserve-3d"
-        };
-      }
-    }, a), !1, !0), i(t, n, o), i(t, x, o), i(t, $, o), i(o, () => e.children), A(() => L(o, p("relative z-10", r() === "gradient-border" && "relative"))), t;
-  })();
-}
-function le(l) {
-  const [e, a] = h(l, ["class", "children"]);
-  return (() => {
-    var r = T();
-    return m(r, b({
-      get class() {
-        return p("flex flex-col space-y-1.5 p-4", e.class);
-      }
-    }, a), !1, !0), i(r, () => e.children), r;
-  })();
-}
-function ae(l) {
-  const [e, a] = h(l, ["class", "children"]);
-  return (() => {
-    var r = K();
-    return m(r, b({
-      get class() {
-        return p("text-sm font-semibold leading-none tracking-tight", e.class);
-      }
-    }, a), !1, !0), i(r, () => e.children), r;
-  })();
-}
-function se(l) {
-  const [e, a] = h(l, ["class", "children"]);
-  return (() => {
-    var r = O();
-    return m(r, b({
       get class() {
-        return p("text-xs text-muted-foreground", e.class);
+        return c(
+          "rounded-card",
+          "bg-card text-card-foreground",
+          "duration-[var(--floe-duration-base)] ease-[var(--floe-ease-out)]",
+          r() === "default" && "border border-transparent",
+          r() === "well" && "bg-[var(--floe-well)] border border-transparent",
+          /* The rise and its shadow live in the interaction contract
+           * (`data-floe-interactive='lift'` in language.css), so every clickable
+           * plane in the app travels the same pixel through the same token. The
+           * class string keeps only what is specific to this card. */
+          r() === "interactive" && "border border-transparent cursor-pointer",
+          e.class
+        );
       }
-    }, a), !1, !0), i(r, () => e.children), r;
+    }, a), !1, !0), s(d, () => e.children), d;
   })();
 }
-function ie(l) {
-  const [e, a] = h(l, ["class", "children"]);
+function m(t) {
+  const [e, a] = o(t, ["class", "children"]);
   return (() => {
-    var r = T();
-    return m(r, b({
+    var r = i();
+    return l(r, n({
       get class() {
-        return p("p-4 pt-0", e.class);
+        return c("flex flex-col gap-1 p-[var(--floe-pad-card)] pb-0", e.class);
       }
-    }, a), !1, !0), i(r, () => e.children), r;
+    }, a), !1, !0), s(r, () => e.children), r;
   })();
 }
-function de(l) {
-  const [e, a] = h(l, ["class", "children"]);
+function _(t) {
+  const [e, a] = o(t, ["class", "children"]);
   return (() => {
-    var r = T();
-    return m(r, b({
-      get class() {
-        return p("flex items-center p-4 pt-0", e.class);
-      }
-    }, a), !1, !0), i(r, () => e.children), r;
-  })();
-}
-function ce(l) {
-  const [e, a] = h(l, ["intensity", "shine", "borderGlow", "class", "children", "style"]), [r, d] = F(""), [g, c] = F({
-    x: 50,
-    y: 50
-  }), [s, _] = F(!1);
-  let y, u = null, M = 0, S = 0;
-  const C = () => e.intensity ?? 10, X = () => {
-    if (u = null, !y) return;
-    const n = y.getBoundingClientRect(), x = M - n.left, $ = S - n.top, w = n.width / 2, t = n.height / 2, o = ($ - t) / t * C(), v = (w - x) / w * C();
-    d(`perspective(1000px) rotateX(${-o}deg) rotateY(${v}deg)`), e.shine && c({
-      x: x / n.width * 100,
-      y: $ / n.height * 100
-    });
-  }, k = (n) => {
-    if (y && (M = n.clientX, S = n.clientY, u === null)) {
-      if (typeof requestAnimationFrame > "u") {
-        X();
-        return;
-      }
-      u = requestAnimationFrame(X);
-    }
-  }, P = () => _(!0), j = () => {
-    u !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(u), u = null), _(!1), d("perspective(1000px) rotateX(0deg) rotateY(0deg)");
-  };
-  return B(() => {
-    u !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(u), u = null);
-  }), (() => {
-    var n = Q(), x = n.firstChild;
-    n.addEventListener("mouseleave", j), n.addEventListener("mouseenter", P), n.$$mousemove = k;
-    var $ = y;
-    return typeof $ == "function" ? q($, n) : y = n, m(n, b({
+    var r = f();
+    return l(r, n({
       get class() {
-        return p("relative rounded-xl bg-card border border-border overflow-hidden", "transition-all duration-200 ease-out", e.borderGlow && s() && "shadow-[0_0_18px_-6px_var(--glow)]", e.class);
-      },
-      get style() {
-        return {
-          ...typeof e.style == "object" ? e.style : {},
-          transform: r(),
-          "transform-style": "preserve-3d"
-        };
+        return c("text-[length:var(--floe-type-body)] font-semibold leading-[var(--floe-line-heading)] tracking-[var(--floe-tracking-tight)]", e.class);
       }
-    }, a), !1, !0), i(n, (() => {
-      var w = E(() => !!e.shine);
-      return () => w() && (() => {
-        var t = U();
-        return A((o) => {
-          var v = !!s(), Y = `radial-gradient(
-              circle at ${g().x}% ${g().y}%,
-              color-mix(in srgb, var(--primary) 18%, transparent) 0%,
-              transparent 50%
-            )`;
-          return v !== o.e && t.classList.toggle("opacity-100", o.e = v), Y !== o.t && z(t, "background", o.t = Y), o;
-        }, {
-          e: void 0,
-          t: void 0
-        }), t;
-      })();
-    })(), x), i(x, () => e.children), n;
+    }, a), !1, !0), s(r, () => e.children), r;
   })();
 }
-function ue(l) {
-  const [e, a] = h(l, ["duration", "borderWidth", "colors", "class", "children", "style"]), r = () => e.duration ?? 3, d = () => e.borderWidth ?? 2;
+function $(t) {
+  const [e, a] = o(t, ["class", "children"]);
   return (() => {
-    var g = V(), c = g.firstChild, s = c.nextSibling;
-    return m(g, b({
+    var r = p();
+    return l(r, n({
       get class() {
-        return p("relative rounded-xl p-[2px] overflow-hidden", e.class);
-      },
-      get style() {
-        return {
-          ...typeof e.style == "object" ? e.style : {},
-          padding: `${d()}px`
-        };
+        return c("text-[length:var(--floe-type-supporting)] leading-[var(--floe-line-body)] text-[var(--floe-ink-soft)]", e.class);
       }
-    }, a), !1, !0), i(s, () => e.children), A((_) => z(c, "animation", `spin ${r()}s linear infinite`)), g;
+    }, a), !1, !0), s(r, () => e.children), r;
   })();
 }
-function pe(l) {
-  const [e, a] = h(l, ["color", "pulse", "class", "children", "style"]), r = () => e.color ?? "var(--glow)";
+function x(t) {
+  const [e, a] = o(t, ["class", "children"]);
   return (() => {
-    var d = T();
-    return m(d, b({
+    var r = i();
+    return l(r, n({
       get class() {
-        return p("relative rounded-xl bg-card border-2 transition-shadow duration-300", e.pulse && "animate-pulse", e.class);
-      },
-      get style() {
-        return {
-          ...typeof e.style == "object" ? e.style : {},
-          "border-color": r(),
-          "box-shadow": [`0 0 4px color-mix(in srgb, ${r()} 80%, transparent)`, `0 0 14px color-mix(in srgb, ${r()} 50%, transparent)`, `0 0 28px color-mix(in srgb, ${r()} 30%, transparent)`, `inset 0 0 14px color-mix(in srgb, ${r()} 10%, transparent)`].join(", ")
-        };
+        return c("p-[var(--floe-pad-card)]", e.class);
       }
-    }, a), !1, !0), i(d, () => e.children), d;
+    }, a), !1, !0), s(r, () => e.children), r;
   })();
 }
-function fe(l) {
-  const [e, a] = h(l, ["class", "children", "style"]);
+function C(t) {
+  const [e, a] = o(t, ["class", "children"]);
   return (() => {
-    var r = ee(), d = r.firstChild, g = d.firstChild;
-    g.nextSibling;
-    var c = d.nextSibling;
-    return m(r, b({
+    var r = i();
+    return l(r, n({
       get class() {
-        return p("relative rounded-2xl bg-card/80 backdrop-blur-sm border border-border overflow-hidden", e.class);
-      },
-      get style() {
-        return e.style;
+        return c("flex items-center gap-[var(--floe-gap-control)] p-[var(--floe-pad-card)] pt-0", e.class);
       }
-    }, a), !1, !0), i(c, () => e.children), r;
+    }, a), !1, !0), s(r, () => e.children), r;
   })();
 }
-W(["mousemove"]);
 export {
-  ue as AnimatedBorderCard,
-  oe as Card,
-  ie as CardContent,
-  se as CardDescription,
-  de as CardFooter,
-  le as CardHeader,
-  ae as CardTitle,
-  ce as Interactive3DCard,
-  fe as MorphCard,
-  pe as NeonCard
+  b as Card,
+  x as CardContent,
+  $ as CardDescription,
+  C as CardFooter,
+  m as CardHeader,
+  _ as CardTitle
 };