@pol-studios/ui 1.0.0

package/dist/cards/index.js

@@ -0,0 +1,872 @@
+"use client";
+
+// src/cards/card.tsx
+import { cn } from "@pol-studios/utils";
+import { motion } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+var Card = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      whileHover: "animate",
+      className: cn(
+        "isolate flex flex-col border border-muted-200 rounded-2xl bg-muted-100  shadow-[0_1px_1px_rgba(0,0,0,0.05),0_4px_6px_rgba(34,42,53,0.04),0_24px_68px_rgba(47,48,55,0.05),0_2px_3px_rgba(0,0,0,0.04)] overflow-hidden",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+var card_default = Card;
+
+// src/cards/card-content.tsx
+import { cn as cn2 } from "@pol-studios/utils";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CardContent = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx2("div", { className: cn2("px-3 pb-5 ", className), ...props, children });
+};
+var card_content_default = CardContent;
+
+// src/cards/card-description.tsx
+import { cn as cn3 } from "@pol-studios/utils";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var CardDescription = ({
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsx3(
+    "p",
+    {
+      className: cn3(
+        "font-sans max-w-xs text-base font-normal tracking-tight  text-text-500 ",
+        className
+      ),
+      children
+    }
+  );
+};
+var card_description_default = CardDescription;
+
+// src/cards/card-header.tsx
+import { cn as cn4 } from "@pol-studios/utils";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var CardHeader = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx4("div", { className: cn4("px-5 py-3", className), ...props, children });
+};
+var card_header_default = CardHeader;
+
+// src/cards/card-row.tsx
+import { cn as cn12 } from "@pol-studios/utils";
+
+// src/animate-primitives/primitives/radix/tooltip.tsx
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import {
+  AnimatePresence,
+  motion as motion2,
+  useMotionValue,
+  useSpring
+} from "motion/react";
+
+// src/lib/get-strict-context.tsx
+import * as React from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function getStrictContext(name) {
+  const Context = React.createContext(null);
+  Context.displayName = name;
+  function Provider({ value, children }) {
+    return /* @__PURE__ */ jsx5(Context.Provider, { value, children });
+  }
+  function useContext2() {
+    const context = React.useContext(Context);
+    if (context === null) {
+      throw new Error(`${name} must be used within its provider`);
+    }
+    return context;
+  }
+  return [Provider, useContext2];
+}
+
+// src/hooks/use-controlled-state.tsx
+import * as React2 from "react";
+function useControlledState(props) {
+  const { value, defaultValue, onChange } = props;
+  const [state, setInternalState] = React2.useState(
+    value !== void 0 ? value : defaultValue
+  );
+  React2.useEffect(() => {
+    if (value !== void 0) setInternalState(value);
+  }, [value]);
+  const setState = React2.useCallback(
+    (next, ...args) => {
+      setInternalState(next);
+      onChange?.(next, ...args);
+    },
+    [onChange]
+  );
+  return [state, setState];
+}
+
+// src/animate-primitives/primitives/radix/tooltip.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var [LocalTooltipProvider, useTooltip] = getStrictContext("TooltipContext");
+function TooltipProvider(props) {
+  return /* @__PURE__ */ jsx6(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", ...props });
+}
+function Tooltip({
+  followCursor = false,
+  followCursorSpringOptions = { stiffness: 200, damping: 17 },
+  ...props
+}) {
+  const [isOpen, setIsOpen] = useControlledState({
+    value: props?.open,
+    defaultValue: props?.defaultOpen,
+    onChange: props?.onOpenChange
+  });
+  const x = useMotionValue(0);
+  const y2 = useMotionValue(0);
+  return /* @__PURE__ */ jsx6(
+    LocalTooltipProvider,
+    {
+      value: {
+        isOpen,
+        setIsOpen,
+        x,
+        y: y2,
+        followCursor,
+        followCursorSpringOptions
+      },
+      children: /* @__PURE__ */ jsx6(
+        TooltipPrimitive.Root,
+        {
+          "data-slot": "tooltip",
+          ...props,
+          onOpenChange: setIsOpen
+        }
+      )
+    }
+  );
+}
+function TooltipTrigger({ onMouseMove, ...props }) {
+  const { x, y: y2, followCursor } = useTooltip();
+  const handleMouseMove = (event) => {
+    onMouseMove?.(event);
+    const target = event.currentTarget.getBoundingClientRect();
+    if (followCursor === "x" || followCursor === true) {
+      const eventOffsetX = event.clientX - target.left;
+      const offsetXFromCenter = (eventOffsetX - target.width / 2) / 2;
+      x.set(offsetXFromCenter);
+    }
+    if (followCursor === "y" || followCursor === true) {
+      const eventOffsetY = event.clientY - target.top;
+      const offsetYFromCenter = (eventOffsetY - target.height / 2) / 2;
+      y2.set(offsetYFromCenter);
+    }
+  };
+  return /* @__PURE__ */ jsx6(
+    TooltipPrimitive.Trigger,
+    {
+      "data-slot": "tooltip-trigger",
+      onMouseMove: handleMouseMove,
+      ...props
+    }
+  );
+}
+function TooltipPortal(props) {
+  const { isOpen } = useTooltip();
+  return /* @__PURE__ */ jsx6(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx6(
+    TooltipPrimitive.Portal,
+    {
+      forceMount: true,
+      "data-slot": "tooltip-portal",
+      ...props
+    }
+  ) });
+}
+function TooltipContent({
+  onEscapeKeyDown,
+  onPointerDownOutside,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  avoidCollisions,
+  collisionBoundary,
+  collisionPadding,
+  arrowPadding,
+  sticky,
+  hideWhenDetached,
+  style,
+  transition = { type: "spring", stiffness: 300, damping: 25 },
+  ...props
+}) {
+  const { x, y: y2, followCursor, followCursorSpringOptions } = useTooltip();
+  const translateX = useSpring(x, followCursorSpringOptions);
+  const translateY = useSpring(y2, followCursorSpringOptions);
+  return /* @__PURE__ */ jsx6(
+    TooltipPrimitive.Content,
+    {
+      asChild: true,
+      forceMount: true,
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      avoidCollisions,
+      collisionBoundary,
+      collisionPadding,
+      arrowPadding,
+      sticky,
+      hideWhenDetached,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      children: /* @__PURE__ */ jsx6(
+        motion2.div,
+        {
+          "data-slot": "popover-content",
+          initial: { opacity: 0, scale: 0.5 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.5 },
+          transition,
+          style: {
+            x: followCursor === "x" || followCursor === true ? translateX : void 0,
+            y: followCursor === "y" || followCursor === true ? translateY : void 0,
+            ...style
+          },
+          ...props
+        },
+        "popover-content"
+      )
+    }
+  );
+}
+function TooltipArrow(props) {
+  return /* @__PURE__ */ jsx6(TooltipPrimitive.Arrow, { "data-slot": "tooltip-arrow", ...props });
+}
+
+// src/animate-primitives/components/radix/tooltip.tsx
+import { cn as cn5 } from "@pol-studios/utils/tailwind";
+import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+function TooltipProvider2({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(TooltipProvider, { delayDuration, ...props });
+}
+function Tooltip2({ delayDuration = 0, ...props }) {
+  return /* @__PURE__ */ jsx7(TooltipProvider2, { delayDuration, children: /* @__PURE__ */ jsx7(Tooltip, { ...props }) });
+}
+function TooltipTrigger2({ ...props }) {
+  return /* @__PURE__ */ jsx7(TooltipTrigger, { ...props });
+}
+function TooltipContent2({
+  className,
+  sideOffset = 4,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(TooltipPortal, { children: /* @__PURE__ */ jsxs(
+    TooltipContent,
+    {
+      sideOffset,
+      className: cn5(
+        "bg-foreground text-background z-50 w-fit origin-[var(--radix-tooltip-content-transform-origin)] rounded-md px-3 py-1.5 text-xs text-balance animate-in fade-in-0 zoom-in-[0.98] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[0.98]",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx7(TooltipArrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+
+// src/components/Skeleton.tsx
+import { cn as cn7 } from "@pol-studios/utils";
+import React4 from "react";
+
+// src/primitives/skeleton.tsx
+import * as React3 from "react";
+import { cn as cn6 } from "@pol-studios/utils";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Skeleton = React3.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      ref,
+      className: cn6("animate-pulse rounded-md bg-muted", className),
+      ...props
+    }
+  );
+});
+Skeleton.displayName = "Skeleton";
+
+// src/components/Skeleton.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Skeleton2 = React4.forwardRef(
+  ({ ...props }, ref) => {
+    return /* @__PURE__ */ jsx9(
+      Skeleton,
+      {
+        ref,
+        ...props,
+        className: cn7("h-full w-full bg-sky-100", props.className)
+      }
+    );
+  }
+);
+Skeleton2.displayName = "Skeleton";
+var Skeleton_default = Skeleton2;
+
+// src/components/Tooltip.tsx
+import { cn as cn8 } from "@pol-studios/utils";
+import { isUsable } from "@pol-studios/utils/types";
+import * as RadixTooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+function Tooltip3({
+  children,
+  tooltipContent,
+  contentClassName,
+  isOpen,
+  onOpenChange,
+  contentProps,
+  delay,
+  triggerClassName,
+  tooltipAsChild = true
+}) {
+  if (isUsable(tooltipContent) === false || tooltipContent === false) {
+    return children;
+  }
+  return /* @__PURE__ */ jsx10(TooltipProvider2, { delayDuration: delay ?? 300, children: /* @__PURE__ */ jsxs2(Tooltip2, { open: isOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx10(TooltipTrigger2, { className: triggerClassName, asChild: tooltipAsChild, children }),
+    /* @__PURE__ */ jsx10(RadixTooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx10(
+      TooltipContent2,
+      {
+        className: cn8("backdrop-blur-lg", contentClassName),
+        ...contentProps ?? {},
+        children: tooltipContent
+      }
+    ) })
+  ] }) });
+}
+var Tooltip_default = Tooltip3;
+
+// src/components/Heading.tsx
+import { cn as cn9 } from "@pol-studios/utils";
+
+// ../../../node_modules/.pnpm/react-wrap-balancer@1.1.1_react@19.1.1/node_modules/react-wrap-balancer/dist/index.mjs
+import a from "react";
+import p from "react";
+var E = typeof window == "undefined";
+var m = E ? p.useEffect : p.useLayoutEffect;
+var B = 0;
+var _ = () => ++B;
+var v = false;
+function O() {
+  let [n, r] = p.useState(v ? _ : void 0);
+  return m(() => {
+    n === void 0 && r(_()), v = true;
+  }, []), n === void 0 ? n : `rwb-${n.toString(32)}`;
+}
+function R() {
+  return p.useMemo(() => "useId" in p ? p.useId : O, [])();
+}
+var y = "__wrap_b";
+var f = "__wrap_n";
+var S = "__wrap_o";
+var T = (n, r, e) => {
+  e = e || document.querySelector(`[data-br="${n}"]`);
+  let t = e == null ? void 0 : e.parentElement;
+  if (!t) return;
+  let l = (u) => e.style.maxWidth = u + "px";
+  e.style.maxWidth = "";
+  let i = t.clientWidth, d = t.clientHeight, o = i / 2 - 0.25, s = i + 0.5, c;
+  if (i) {
+    for (l(o), o = Math.max(e.scrollWidth, o); o + 1 < s; ) c = Math.round((o + s) / 2), l(c), t.clientHeight === d ? s = c : o = c;
+    l(s * r + i * (1 - r));
+  }
+  e.__wrap_o || (typeof ResizeObserver != "undefined" ? (e.__wrap_o = new ResizeObserver(() => {
+    self.__wrap_b(0, +e.dataset.brr, e);
+  })).observe(t) : process.env.NODE_ENV === "development" && console.warn("The browser you are using does not support the ResizeObserver API. Please consider add polyfill for this API to avoid potential layout shifts or upgrade your browser. Read more: https://github.com/shuding/react-wrap-balancer#browser-support-information"));
+};
+var I = T.toString();
+var w = '(self.CSS&&CSS.supports("text-wrap","balance")?1:2)';
+var g = (n, r, e = "") => (e && (e = `self.${f}!=1&&${e}`), a.createElement("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: (n ? "" : `self.${f}=self.${f}||${w};self.${y}=${I};`) + e }, nonce: r }));
+var h = a.createContext({ preferNative: true, hasProvider: false });
+var P = a.forwardRef(({ ratio: n = 1, preferNative: r, nonce: e, children: t, as: l, ...i }, d) => {
+  let o = R(), s = a.useRef(), c = a.useContext(h), u = r != null ? r : c.preferNative, x = l || "span";
+  return a.useImperativeHandle(d, () => s.current, []), m(() => {
+    u && self[f] === 1 || s.current && (self[y] = T)(0, n, s.current);
+  }, [t, u, n]), m(() => {
+    if (!(u && self[f] === 1)) return () => {
+      if (!s.current) return;
+      let b = s.current[S];
+      b && (b.disconnect(), delete s.current[S]);
+    };
+  }, [u]), process.env.NODE_ENV === "development" && t && !Array.isArray(t) && typeof t == "object" && "type" in t && typeof t.type == "string" && t.type !== "span" && console.warn(`<Balancer> should not wrap <${t.type}> inside. Instead, it should directly wrap text or inline nodes.
+
+Try changing this:
+  <Balancer><${t.type}>content</${t.type}></Balancer>
+To:
+  <${t.type}><Balancer>content</Balancer></${t.type}>`), a.createElement(a.Fragment, null, a.createElement(x, { ...i, "data-br": o, "data-brr": n, ref: s, style: { display: "inline-block", verticalAlign: "top", textDecoration: "inherit", textWrap: u ? "balance" : "initial" }, suppressHydrationWarning: true }, t), g(c.hasProvider, e, `self.${y}("${o}",${n})`));
+});
+if (!E && process.env.NODE_ENV !== "production") {
+  let n = document.querySelector("[data-next-hide-fouc]");
+  if (n) {
+    let r = (t) => {
+      for (let l of t) for (let i of Array.from(l.removedNodes)) {
+        if (i !== n) continue;
+        e.disconnect();
+        let d = document.querySelectorAll("[data-br]");
+        for (let o of Array.from(d)) self[y](0, +o.dataset.brr, o);
+      }
+    }, e = new MutationObserver(r);
+    e.observe(document.head, { childList: true });
+  }
+}
+var A = P;
+
+// src/components/Heading.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Heading = ({
+  className,
+  as: Tag = "h2",
+  children,
+  size = "large",
+  ...props
+}) => {
+  const sizeVariants = {
+    sm: "text-large md:text-xl md:leading-snug",
+    md: "text-xl md:text-2xl md:leading-tight",
+    large: "text-2xl md:text-3xl md:leading-tight",
+    xl: "text-3xl md:text-4xl md:leading-none",
+    "2xl": "text-4xl md:text-5xl md:leading-none"
+  };
+  return /* @__PURE__ */ jsx11(
+    Tag,
+    {
+      className: cn9(
+        "mt-2 text-2xl/7 font-bold text-muted-900 sm:truncate sm:text-3xl sm:tracking-tight",
+        sizeVariants[size],
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx11(A, { children })
+    }
+  );
+};
+
+// src/components/PolIcon.tsx
+import { cn as cn10, isUsable as isUsable2 } from "@pol-studios/utils";
+import { useLayoutEffect, useState as useState2 } from "react";
+import React5 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var PolIcon = React5.forwardRef(
+  ({
+    toolTip: tooltip,
+    name,
+    source = "lucide",
+    isIconFilled = false,
+    className,
+    size = "1.5rem",
+    toolTipContentProps,
+    ...props
+  }, ref) => {
+    let icon = null;
+    if (source == "lucide") {
+      icon = /* @__PURE__ */ jsx12(
+        LucideIconLoader,
+        {
+          ref,
+          name,
+          className: cn10(className, "b-0 icon-hover-effect"),
+          style: { fontSize: size },
+          size,
+          ...props,
+          "data-testid": props["data-testid"] ?? name + "Icon"
+        }
+      );
+    }
+    if (isUsable2(tooltip)) {
+      return /* @__PURE__ */ jsx12(Tooltip_default, { tooltipContent: tooltip, contentProps: toolTipContentProps, children: icon });
+    } else {
+      return icon;
+    }
+  }
+);
+var PolIcon_default = PolIcon;
+var modulePromise = import("lucide-react");
+var module = null;
+modulePromise.then((x) => module = x);
+var LucideIconLoader = React5.forwardRef(
+  ({ name, ...props }, ref) => {
+    const [IconComponent, setIconComponent] = useState2(module === null ? null : module[name]);
+    const [isLoaded, setIsLoaded] = useState2(module !== null);
+    useLayoutEffect(() => {
+      setIconComponent(null);
+      modulePromise.then((x) => setIsLoaded(true));
+      if (isLoaded === false) return;
+      if (name in module) {
+        const Icon = module[name];
+        setIconComponent(() => Icon);
+      } else {
+        setIconComponent(() => module["CircleAlert"]);
+      }
+    }, [name, isLoaded]);
+    return IconComponent ? /* @__PURE__ */ jsx12(IconComponent, { ...props, ref }) : /* @__PURE__ */ jsx12(
+      Skeleton_default,
+      {
+        className: cn10(" icon-hover-effect rounded-full", props.className),
+        style: { height: props.size, width: props.size }
+      }
+    );
+  }
+);
+
+// src/components/PolText.tsx
+import { cn as cn11 } from "@pol-studios/utils";
+import React6 from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var PolText = React6.forwardRef(
+  ({ children, type = "p", className, ...rest }, ref) => {
+    switch (type) {
+      case "p":
+        return /* @__PURE__ */ jsx13(
+          "p",
+          {
+            ref,
+            className: cn11(`leading-7  text-text-950`, className),
+            ...rest,
+            children
+          }
+        );
+      case "lead":
+        return /* @__PURE__ */ jsx13(
+          "p",
+          {
+            ref,
+            className: cn11(
+              `text-md text-muted-foreground text-text-950`,
+              className
+            ),
+            ...rest,
+            children
+          }
+        );
+      case "large":
+        return /* @__PURE__ */ jsx13(
+          "div",
+          {
+            ref,
+            className: cn11(`text-lg font-semibold text-text-950`, className),
+            ...rest,
+            children
+          }
+        );
+      case "small":
+        return /* @__PURE__ */ jsx13(
+          "p",
+          {
+            ref,
+            className: cn11(
+              `leading-small text-sm font-medium text-text-950`,
+              className
+            ),
+            ...rest,
+            children
+          }
+        );
+      case "muted":
+        return /* @__PURE__ */ jsx13(
+          "p",
+          {
+            ref,
+            className: cn11(
+              `text-muted-foreground text-xs text-text-600 text-text-950`,
+              className
+            ),
+            ...rest,
+            children
+          }
+        );
+      case "bold":
+        return /* @__PURE__ */ jsx13(
+          "p",
+          {
+            ref,
+            className: cn11(`font-bold leading-7 text-text-950`, className),
+            ...rest,
+            children
+          }
+        );
+    }
+  }
+);
+var PolText_default = PolText;
+
+// src/components/index.ts
+import { redirect } from "@tanstack/react-router";
+
+// src/cards/card-row.tsx
+import { jsx as jsx14, jsxs as jsxs3 } from "react/jsx-runtime";
+function CardRow({
+  label,
+  labelIcon,
+  value,
+  className
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn12(
+        "grid grid-cols-[1fr_1fr] border-t border-muted-300 px-5 py-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs3("span", { className: "flex gap-1 items-center", children: [
+          /* @__PURE__ */ jsx14(PolText_default, { className: "text-muted-700 text-left text-sm", children: label }),
+          labelIcon
+        ] }),
+        /* @__PURE__ */ jsx14(PolText_default, { className: "text-muted-700 text-right text-sm truncate", children: value })
+      ]
+    }
+  );
+}
+
+// src/cards/card-title.tsx
+import { cn as cn13 } from "@pol-studios/utils";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var CardTitle = ({
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsx15(Heading, { size: "md", className: cn13("font-bold text-left", className), children });
+};
+var card_title_default = CardTitle;
+
+// src/cards/card-skeleton-body.tsx
+import { cn as cn14 } from "@pol-studios/utils";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var CardSkeletonBody = ({
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsx16("div", { className: cn14("overflow-hidden relative w-full h-full", className), children });
+};
+var card_skeleton_body_default = CardSkeletonBody;
+
+// src/cards/GlassmorphicCard.tsx
+import React7 from "react";
+import { cn as cn15 } from "@pol-studios/utils";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var GlassmorphicCard = React7.forwardRef(
+  ({ children, className, intensity = "medium", ...props }, ref) => {
+    const intensityStyles = {
+      subtle: [
+        "backdrop-blur-md",
+        "bg-background-50/70 "
+      ].join(" "),
+      medium: [
+        "backdrop-blur-lg",
+        "bg-background-50/60 "
+      ].join(" "),
+      prominent: [
+        "backdrop-blur-xl",
+        "bg-background-50/50 "
+      ].join(" ")
+    };
+    return /* @__PURE__ */ jsx17(
+      "div",
+      {
+        ref,
+        className: cn15(
+          // Base glassmorphic styles
+          "rounded-2xl",
+          "backdrop-saturate-150",
+          intensityStyles[intensity],
+          // Soft borders (NO harsh borders)
+          "border border-background-50/10 ",
+          // Soft shadows for depth
+          "shadow-xl shadow-muted-950/5 ",
+          // Smooth transitions
+          "transition-all duration-300",
+          // Hover enhancement
+          "hover:shadow-2xl",
+          "hover:bg-background-50/70 ",
+          // Accessibility: Respect reduced transparency preference
+          "motion-reduce:backdrop-blur-none",
+          "motion-reduce:bg-background-50 ",
+          // Custom className override
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+GlassmorphicCard.displayName = "GlassmorphicCard";
+var GlassmorphicCard_default = GlassmorphicCard;
+
+// src/cards/HeroKPICard.tsx
+import { Link } from "@tanstack/react-router";
+import { cn as cn16 } from "@pol-studios/utils";
+import { Fragment, jsx as jsx18, jsxs as jsxs4 } from "react/jsx-runtime";
+var colorConfig = {
+  sapphire: {
+    gradient: "from-sapphire-50/80 to-sapphire-100/50",
+    border: "border-sapphire-200/40",
+    iconBg: "from-sapphire-500 to-sapphire-600",
+    text: "text-sapphire-900",
+    label: "text-sapphire-700",
+    shadow: "shadow-sapphire-500/20"
+  },
+  lapis: {
+    gradient: "from-lapis-50/80 to-lapis-100/50",
+    border: "border-lapis-200/40",
+    iconBg: "from-lapis-500 to-lapis-600",
+    text: "text-lapis-900",
+    label: "text-lapis-700",
+    shadow: "shadow-lapis-500/20"
+  },
+  coral: {
+    gradient: "from-coral-50/80 to-coral-100/50",
+    border: "border-coral-200/40",
+    iconBg: "from-coral-500 to-coral-600",
+    text: "text-coral-900",
+    label: "text-coral-700",
+    shadow: "shadow-coral-500/20"
+  },
+  emerald: {
+    gradient: "from-emerald-50/80 to-emerald-100/50",
+    border: "border-emerald-200/40",
+    iconBg: "from-emerald-500 to-emerald-600",
+    text: "text-emerald-900",
+    label: "text-emerald-700",
+    shadow: "shadow-emerald-500/20"
+  },
+  amethyst: {
+    gradient: "from-amethyst-50/80 to-amethyst-100/50",
+    border: "border-amethyst-200/40",
+    iconBg: "from-amethyst-500 to-amethyst-600",
+    text: "text-amethyst-900",
+    label: "text-amethyst-700",
+    shadow: "shadow-amethyst-500/20"
+  },
+  sky: {
+    gradient: "from-sky-50/80 to-sky-100/50",
+    border: "border-sky-200/40",
+    iconBg: "from-sky-500 to-sky-600",
+    text: "text-sky-900",
+    label: "text-sky-700",
+    shadow: "shadow-sky-500/20"
+  }
+};
+var HeroKPICard = ({
+  label,
+  value,
+  icon,
+  color,
+  onClick,
+  href,
+  className
+}) => {
+  const colors = colorConfig[color];
+  const isInteractive = !!onClick || !!href;
+  const cardClasses = cn16(
+    // Base styles
+    "flex flex-col gap-4 p-6 rounded-2xl",
+    "bg-gradient-to-br backdrop-blur-sm",
+    "border transition-all duration-300 ease-out",
+    "min-h-11 min-w-11",
+    // Gradient and border
+    colors.gradient,
+    colors.border,
+    // Interactive styles
+    isInteractive && [
+      "cursor-pointer",
+      "hover:shadow-xl hover:scale-[1.02]",
+      "active:scale-[0.98]",
+      "focus:outline-none focus:ring-2 focus:ring-offset-2",
+      `focus:ring-${color}-500/50`
+    ],
+    // Custom className
+    className
+  );
+  const content = /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx18(
+      "div",
+      {
+        className: cn16(
+          "inline-flex h-12 w-12 items-center justify-center rounded-xl",
+          "bg-gradient-to-br shadow-lg",
+          colors.iconBg,
+          colors.shadow
+        ),
+        children: /* @__PURE__ */ jsx18(PolIcon_default, { name: icon, className: "h-6 w-6 text-muted-50" })
+      }
+    ),
+    /* @__PURE__ */ jsx18("div", { className: cn16("text-4xl font-semibold", colors.text), children: value }),
+    /* @__PURE__ */ jsx18("div", { className: cn16("text-sm font-medium", colors.label), children: label })
+  ] });
+  if (href) {
+    return /* @__PURE__ */ jsx18(
+      Link,
+      {
+        to: href,
+        className: cardClasses,
+        "aria-label": `View ${label}: ${value}`,
+        "data-testid": `hero-kpi-card-${label.toLowerCase().replace(/\s+/g, "-")}`,
+        children: content
+      }
+    );
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx18(
+      "button",
+      {
+        type: "button",
+        onClick,
+        className: cardClasses,
+        "aria-label": `View ${label}: ${value}`,
+        "data-testid": `hero-kpi-card-${label.toLowerCase().replace(/\s+/g, "-")}`,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      className: cardClasses,
+      "aria-label": `${label}: ${value}`,
+      role: "status",
+      "data-testid": `hero-kpi-card-${label.toLowerCase().replace(/\s+/g, "-")}`,
+      children: content
+    }
+  );
+};
+var HeroKPICard_default = HeroKPICard;
+export {
+  card_default as Card,
+  card_content_default as CardContent,
+  card_description_default as CardDescription,
+  card_header_default as CardHeader,
+  CardRow,
+  card_skeleton_body_default as CardSkeletonBody,
+  card_title_default as CardTitle,
+  GlassmorphicCard_default as GlassmorphicCard,
+  HeroKPICard_default as HeroKPICard
+};