"use client";
'use strict';

var React = require('react');
var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
var pressable = require('@page-speed/pressable');
var icon = require('@page-speed/icon');
var jsxRuntime = require('react/jsx-runtime');
var reactSlot = require('@radix-ui/react-slot');
var classVarianceAuthority = require('class-variance-authority');
var TabsPrimitive = require('@radix-ui/react-tabs');
var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespace(React);
var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);

// components/blocks/list/list-metrics-dashboard.tsx
function cn(...inputs) {
  return tailwindMerge.twMerge(clsx.clsx(inputs));
}
function getNestedCardBg(parentBg, variant = "muted", options) {
  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
  if (isDark) {
    switch (variant) {
      case "muted":
        return "bg-background";
      case "card":
        return "bg-card";
      case "accent":
        return "bg-accent";
      case "subtle":
        return "bg-background/50";
    }
  } else {
    switch (variant) {
      case "muted":
        return "bg-muted";
      case "card":
        return "bg-card";
      case "accent":
        return "bg-accent";
      case "subtle":
        return "bg-muted/50";
    }
  }
}
var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
var DynamicIcon = React__namespace.memo(function DynamicIcon2({
  apiKey,
  name,
  ...props
}) {
  if (name == null) return null;
  if (typeof name !== "string") {
    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: name });
  }
  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
});
DynamicIcon.displayName = "DynamicIcon";
var badgeVariants = classVarianceAuthority.cva(
  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
      }
    },
    defaultVariants: {
      variant: "default"
    }
  }
);
function Badge({
  className,
  variant,
  asChild = false,
  ...props
}) {
  const Comp = asChild ? reactSlot.Slot : "span";
  return /* @__PURE__ */ jsxRuntime.jsx(
    Comp,
    {
      "data-slot": "badge",
      className: cn(badgeVariants({ variant }), className),
      ...props
    }
  );
}
function Card({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      "data-slot": "card",
      className: cn(
        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
        className
      ),
      ...props
    }
  );
}
function CardContent({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      "data-slot": "card-content",
      className: cn("px-6", className),
      ...props
    }
  );
}
function Tabs({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    TabsPrimitive__namespace.Root,
    {
      "data-slot": "tabs",
      className: cn("flex flex-col gap-2", className),
      ...props
    }
  );
}
function TabsList({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    TabsPrimitive__namespace.List,
    {
      "data-slot": "tabs-list",
      className: cn(
        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
        className
      ),
      ...props
    }
  );
}
function TabsTrigger({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    TabsPrimitive__namespace.Trigger,
    {
      "data-slot": "tabs-trigger",
      className: cn(
        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      ),
      ...props
    }
  );
}
function TabsContent({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    TabsPrimitive__namespace.Content,
    {
      "data-slot": "tabs-content",
      className: cn("flex-1 outline-none", className),
      ...props
    }
  );
}
function DropdownMenu({
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Root, { "data-slot": "dropdown-menu", ...props });
}
function DropdownMenuTrigger({
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    DropdownMenuPrimitive__namespace.Trigger,
    {
      "data-slot": "dropdown-menu-trigger",
      ...props
    }
  );
}
function DropdownMenuContent({
  className,
  sideOffset = 4,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
    DropdownMenuPrimitive__namespace.Content,
    {
      "data-slot": "dropdown-menu-content",
      sideOffset,
      className: cn(
        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
        className
      ),
      ...props
    }
  ) });
}
function DropdownMenuItem({
  className,
  inset,
  variant = "default",
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    DropdownMenuPrimitive__namespace.Item,
    {
      "data-slot": "dropdown-menu-item",
      "data-inset": inset,
      "data-variant": variant,
      className: cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      ),
      ...props
    }
  );
}
var maxWidthStyles = {
  sm: "max-w-screen-sm",
  md: "max-w-screen-md",
  lg: "max-w-screen-lg",
  xl: "max-w-7xl",
  "2xl": "max-w-screen-2xl",
  "4xl": "max-w-[1536px]",
  full: "max-w-full"
};
var Container = React__namespace.default.forwardRef(
  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
    const Component = as;
    return /* @__PURE__ */ jsxRuntime.jsx(
      Component,
      {
        ref,
        className: cn(
          "mx-auto w-full px-2 sm:px-4 lg:px-8",
          maxWidthStyles[maxWidth],
          className
        ),
        ...props,
        children
      }
    );
  }
);
Container.displayName = "Container";

// lib/patternSvgs.ts
var patternSvgs = {
  squareAltGrid: "https://cdn.ing/assets/files/record/286187/4gpn0yq2ptra8iwlvmwwv860ggwv",
  grid1: "https://cdn.ing/assets/files/record/286186/nbdflpgp4ostrno079hygibsflp3",
  noise: "https://cdn.ing/assets/i/r/286188/zrqcp9hynh3j7p2laihwzfbujgrl/noise.png",
  dots: "https://cdn.ing/assets/files/record/286198/yfsjx9thvtxzhl2qtshxyhkrm524",
  dotPattern: "https://cdn.ing/assets/files/record/286192/7ig0cku8aqbboiza8nuk6hw0nnsr",
  dotPattern2: "https://cdn.ing/assets/files/record/286189/arez6gd2s7isn9i1o6c7sexdq7bl",
  circles: "https://cdn.ing/assets/files/record/286190/gtmia3sncjtzetdshc20zf1d3c17",
  waves: "https://cdn.ing/assets/files/record/286191/mqlb33fzxz9cdth1bx7if0wmpkp1",
  crossPattern: "https://cdn.ing/assets/files/record/286193/9yfqwdbnqaipbp7fsb3wbzzmq472",
  architect: "https://cdn.ing/assets/files/record/286194/vgs88ugpvyhxu13wqgy0acvae6re",
  tinyCheckers: "https://cdn.ing/assets/files/record/286195/65efaknsw8kcpf9o3c2gybytsl5b",
  p6: "https://cdn.ing/assets/i/r/286196/6kl0rqnd6mjk8j7e525fo8fo0vkc/p6.webp"
};
var maskTop = "radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)";
var maskBottom = "radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)";
var maskCenter = "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)";
var maskTopLeft = "radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%)";
var maskTopRight = "radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%)";
var maskBottomLeft = "radial-gradient(ellipse 80% 80% at 0% 100%, #000 50%, transparent 90%)";
var maskBottomRight = "radial-gradient(ellipse 80% 80% at 100% 100%, #000 50%, transparent 90%)";
var circuitBoardPattern = (id, mask) => /* @__PURE__ */ jsxRuntime.jsxs(
  "svg",
  {
    className: "h-full w-full",
    xmlns: "http://www.w3.org/2000/svg",
    style: mask ? {
      maskImage: mask,
      WebkitMaskImage: mask
    } : void 0,
    children: [
      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
        "pattern",
        {
          id,
          x: "0",
          y: "0",
          width: "100",
          height: "100",
          patternUnits: "userSpaceOnUse",
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              "path",
              {
                d: "M0 50h40M60 50h40M50 0v40M50 60v40",
                stroke: "hsl(var(--muted))",
                strokeWidth: "1",
                fill: "none"
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "50", r: "3", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "0", cy: "50", r: "2", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "100", cy: "50", r: "2", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "0", r: "2", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "100", r: "2", fill: "hsl(var(--muted))" })
          ]
        }
      ) }),
      /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })
    ]
  }
);
var gridDotsPattern = (id, mask) => /* @__PURE__ */ jsxRuntime.jsxs(
  "svg",
  {
    className: "h-full w-full",
    xmlns: "http://www.w3.org/2000/svg",
    style: mask ? {
      maskImage: mask,
      WebkitMaskImage: mask
    } : void 0,
    children: [
      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
        "pattern",
        {
          id,
          x: "0",
          y: "0",
          width: "40",
          height: "40",
          patternUnits: "userSpaceOnUse",
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              "path",
              {
                d: "M0 20h40M20 0v40",
                stroke: "hsl(var(--muted))",
                strokeWidth: "0.5",
                fill: "none"
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "20", cy: "20", r: "2", fill: "hsl(var(--muted))" })
          ]
        }
      ) }),
      /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })
    ]
  }
);
var gridPattern = (size, mask) => /* @__PURE__ */ jsxRuntime.jsx(
  "div",
  {
    className: "h-full w-full bg-[linear-gradient(to_right,_hsl(var(--muted))_1px,_transparent_1px),linear-gradient(to_bottom,_hsl(var(--muted))_1px,_transparent_1px)]",
    style: {
      backgroundSize: `${size}px ${size}px`,
      ...mask ? {
        maskImage: mask,
        WebkitMaskImage: mask
      } : {}
    }
  }
);
var diagonalCrossPattern = (mask) => /* @__PURE__ */ jsxRuntime.jsx(
  "div",
  {
    className: "h-full w-full",
    style: {
      backgroundImage: "repeating-linear-gradient(45deg, transparent, transparent 32px, hsl(var(--muted)) 32px, hsl(var(--muted)) 33px), repeating-linear-gradient(135deg, transparent, transparent 32px, hsl(var(--muted)) 32px, hsl(var(--muted)) 33px)",
      ...mask ? {
        maskImage: mask,
        WebkitMaskImage: mask
      } : {}
    }
  }
);
var dashedGridMaskBase = "repeating-linear-gradient(to right, black 0px, black 3px, transparent 3px, transparent 8px), repeating-linear-gradient(to bottom, black 0px, black 3px, transparent 3px, transparent 8px)";
var dashedGridPattern = (fadeMask) => {
  const mask = fadeMask ? `${dashedGridMaskBase}, ${fadeMask}` : dashedGridMaskBase;
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      className: "h-full w-full",
      style: {
        backgroundImage: "linear-gradient(to right, hsl(var(--muted)) 1px, transparent 1px), linear-gradient(to bottom, hsl(var(--muted)) 1px, transparent 1px)",
        backgroundSize: "20px 20px",
        backgroundPosition: "0 0, 0 0",
        maskImage: mask,
        WebkitMaskImage: mask,
        maskComposite: "intersect",
        WebkitMaskComposite: "source-in"
      }
    }
  );
};
var gradientGlow = (position) => /* @__PURE__ */ jsxRuntime.jsx(
  "div",
  {
    className: cn(
      "pointer-events-none absolute left-1/2 z-0 aspect-square w-3/4 -translate-x-1/2 rounded-full opacity-50 blur-3xl",
      position === "top" ? "-top-1/4" : "-bottom-1/4"
    ),
    style: {
      background: "radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%)"
    }
  }
);
var spotlight = (position) => /* @__PURE__ */ jsxRuntime.jsx(
  "div",
  {
    className: cn(
      "pointer-events-none absolute top-1/2 z-0 aspect-square w-3/4 -translate-y-1/2 rounded-full opacity-40 blur-3xl",
      position === "left" ? "-left-1/4" : "-right-1/4"
    ),
    style: {
      background: "radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%)"
    }
  }
);
var patternOverlays = {
  circuitBoardBasic: () => circuitBoardPattern("circuit-board-basic"),
  circuitBoardFadeTop: () => circuitBoardPattern("circuit-board-fade-top", maskTop),
  circuitBoardFadeBottom: () => circuitBoardPattern("circuit-board-fade-bottom", maskBottom),
  circuitBoardFadeCenter: () => circuitBoardPattern("circuit-board-fade-center", maskCenter),
  circuitBoardFadeTopLeft: () => circuitBoardPattern("circuit-board-fade-top-left", maskTopLeft),
  circuitBoardFadeTopRight: () => circuitBoardPattern("circuit-board-fade-top-right", maskTopRight),
  circuitBoardFadeBottomLeft: () => circuitBoardPattern("circuit-board-fade-bottom-left", maskBottomLeft),
  circuitBoardFadeBottomRight: () => circuitBoardPattern("circuit-board-fade-bottom-right", maskBottomRight),
  dashedGridBasic: () => dashedGridPattern(),
  dashedGridFadeTop: () => dashedGridPattern(maskTop),
  dashedGridFadeBottom: () => dashedGridPattern(maskBottom),
  dashedGridFadeCenter: () => dashedGridPattern(maskCenter),
  dashedGridFadeTopLeft: () => dashedGridPattern(maskTopLeft),
  dashedGridFadeTopRight: () => dashedGridPattern(maskTopRight),
  dashedGridFadeBottomLeft: () => dashedGridPattern(maskBottomLeft),
  dashedGridFadeBottomRight: () => dashedGridPattern(maskBottomRight),
  diagonalCrossBasic: () => diagonalCrossPattern(),
  diagonalCrossFadeTop: () => diagonalCrossPattern(maskTop),
  diagonalCrossFadeBottom: () => diagonalCrossPattern(maskBottom),
  diagonalCrossFadeCenter: () => diagonalCrossPattern(maskCenter),
  diagonalCrossFadeTopLeft: () => diagonalCrossPattern(maskTopLeft),
  diagonalCrossFadeTopRight: () => diagonalCrossPattern(maskTopRight),
  diagonalCrossFadeBottomLeft: () => diagonalCrossPattern(maskBottomLeft),
  diagonalCrossFadeBottomRight: () => diagonalCrossPattern(maskBottomRight),
  gridBasic: () => gridPattern(40),
  gridFadeTop: () => gridPattern(32, maskTop),
  gridFadeBottom: () => gridPattern(32, maskBottom),
  gridFadeCenter: () => gridPattern(40, maskCenter),
  gridFadeTopLeft: () => gridPattern(32, maskTopLeft),
  gridFadeTopRight: () => gridPattern(32, maskTopRight),
  gridFadeBottomLeft: () => gridPattern(32, maskBottomLeft),
  gridFadeBottomRight: () => gridPattern(32, maskBottomRight),
  gridDotsBasic: () => gridDotsPattern("grid-dots-basic"),
  gridDotsFadeCenter: () => gridDotsPattern("grid-dots-fade-center", maskCenter),
  gradientGlowTop: () => gradientGlow("top"),
  gradientGlowBottom: () => gradientGlow("bottom"),
  spotlightLeft: () => spotlight("left"),
  spotlightRight: () => spotlight("right")
};
var inlinePatternStyles = {
  radialGradientTop: {
    background: "radial-gradient(125% 125% at 50% 10%, hsl(var(--background)) 40%, hsl(var(--primary)) 100%)"
  },
  radialGradientBottom: {
    background: "radial-gradient(125% 125% at 50% 90%, hsl(var(--background)) 40%, hsl(var(--primary)) 100%)"
  }
};
function PatternBackground({
  pattern,
  opacity = 0.08,
  className,
  style
}) {
  if (!pattern) {
    return null;
  }
  if (pattern in inlinePatternStyles) {
    const inlineStyle = inlinePatternStyles[pattern];
    return /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        className: cn("pointer-events-none absolute inset-0 z-0", className),
        style: { ...inlineStyle, opacity, ...style },
        "aria-hidden": "true"
      }
    );
  }
  if (pattern in patternOverlays) {
    const Overlay = patternOverlays[pattern];
    return /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        className: cn("pointer-events-none absolute inset-0 z-0", className),
        style: { opacity, ...style },
        "aria-hidden": "true",
        children: Overlay()
      }
    );
  }
  const patternUrl = pattern in patternSvgs ? patternSvgs[pattern] : pattern;
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      className: cn("pointer-events-none absolute inset-0 z-0", className),
      style: {
        backgroundImage: `url(${patternUrl})`,
        backgroundRepeat: "repeat",
        backgroundSize: "auto",
        opacity,
        ...style
      },
      "aria-hidden": "true"
    }
  );
}
var backgroundStyles = {
  default: "bg-background text-foreground",
  white: "bg-white text-dark",
  gray: "bg-muted/30 text-foreground",
  dark: "bg-foreground text-background",
  transparent: "bg-transparent text-foreground",
  gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
  primary: "bg-primary text-primary-foreground",
  secondary: "bg-secondary text-secondary-foreground",
  muted: "bg-muted text-muted-foreground"
};
var spacingStyles = {
  none: "py-0 md:py-0",
  sm: "py-12 md:py-16",
  md: "py-16 md:py-24",
  lg: "py-20 md:py-32",
  xl: "py-24 md:py-40",
  hero: "pt-32 pb-12 md:pt-40 md:pb-40"
};
var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
var Section = React__namespace.default.forwardRef(
  ({
    id,
    title,
    subtitle,
    children,
    className,
    style,
    background = "default",
    spacing = "lg",
    pattern,
    patternOpacity,
    patternClassName,
    containerClassName,
    containerMaxWidth = "xl",
    ...props
  }, ref) => {
    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
    return /* @__PURE__ */ jsxRuntime.jsxs(
      "section",
      {
        ref,
        id,
        className: cn(
          "relative",
          pattern ? "overflow-hidden" : null,
          backgroundStyles[background],
          isPredefinedSpacing(spacing) ? spacingStyles[spacing] : spacing,
          className
        ),
        style,
        ...props,
        children: [
          /* @__PURE__ */ jsxRuntime.jsx(
            PatternBackground,
            {
              pattern,
              opacity: effectivePatternOpacity,
              className: patternClassName
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsxs(
            Container,
            {
              maxWidth: containerMaxWidth,
              className: cn("relative z-10", containerClassName),
              children: [
                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                ] }),
                children
              ]
            }
          )
        ]
      }
    );
  }
);
Section.displayName = "Section";
function ListMetricsDashboard({
  sectionId = "list-metrics-dashboard",
  badge,
  badgeSlot,
  badgeClassName,
  heading,
  headingClassName,
  description,
  descriptionClassName,
  metrics,
  metricsSlot,
  metricsClassName,
  categories,
  lastUpdated,
  lastUpdatedClassName,
  dashboardAction,
  dashboardActionSlot,
  dashboardActionClassName,
  cardClassName,
  tabsClassName,
  headerClassName,
  footerClassName,
  className,
  background,
  spacing,
  pattern,
  patternOpacity,
  activeCategory: controlledActiveCategory,
  onActiveCategoryChange
}) {
  const [internalActiveTab, setInternalActiveTab] = React__namespace.useState("all");
  const activeTab = controlledActiveCategory ?? internalActiveTab;
  const handleTabChange = (value) => {
    if (onActiveCategoryChange) {
      onActiveCategoryChange(value);
    } else {
      setInternalActiveTab(value);
    }
  };
  const filteredMetrics = activeTab === "all" ? metrics : metrics?.filter((metric) => metric.category === activeTab);
  const renderBadge = React.useMemo(() => {
    if (badgeSlot) return badgeSlot;
    if (!badge) return null;
    return typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("px-3.5 py-1.5", badgeClassName), children: badge }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badge });
  }, [badgeSlot, badge, badgeClassName]);
  const renderDashboardAction = React.useMemo(() => {
    if (dashboardActionSlot) return dashboardActionSlot;
    if (!dashboardAction) return null;
    const {
      label,
      icon,
      iconAfter,
      children,
      className: actionClassName,
      ...pressableProps
    } = dashboardAction;
    return /* @__PURE__ */ jsxRuntime.jsx(
      pressable.Pressable,
      {
        asButton: true,
        className: cn("group", actionClassName, dashboardActionClassName),
        ...pressableProps,
        children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
          icon,
          label,
          iconAfter
        ] })
      }
    );
  }, [dashboardActionSlot, dashboardAction, dashboardActionClassName]);
  const renderMetrics = React.useMemo(() => {
    if (metricsSlot) return metricsSlot;
    if (!filteredMetrics || filteredMetrics.length === 0) {
      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground py-8 text-center", children: "No metrics available for this category." });
    }
    return filteredMetrics.map((metric) => /* @__PURE__ */ jsxRuntime.jsxs(
      "div",
      {
        className: cn(
          "hover:bg-muted/50 flex items-center justify-between px-4 py-4 transition-colors md:px-6",
          metricsClassName
        ),
        children: [
          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3 md:space-x-4", children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              "div",
              {
                className: cn(
                  "flex h-8 w-8 items-center justify-center rounded-full",
                  metric.status === "positive" && "bg-primary/10 text-primary",
                  metric.status === "negative" && "bg-destructive/10 text-destructive",
                  metric.status === "warning" && "bg-accent text-accent-foreground",
                  metric.status === "neutral" && "bg-muted text-muted-foreground"
                ),
                children: metric.icon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: metric.icon, size: 16 })
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: metric.name }),
                metric.info && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group relative ml-1.5", children: [
                  /* @__PURE__ */ jsxRuntime.jsx(
                    DynamicIcon,
                    {
                      name: "lucide/info",
                      size: 14,
                      className: "text-muted-foreground cursor-help"
                    }
                  ),
                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-background invisible absolute bottom-full left-1/2 z-10 mb-2 w-48 -translate-x-1/2 transform rounded border p-2 text-xs opacity-0 shadow-md transition-all group-hover:visible group-hover:opacity-100", children: metric.info })
                ] })
              ] }),
              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-xs capitalize", children: metric.category })
            ] })
          ] }),
          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 md:space-x-4", children: [
            metric.previousValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground hidden text-sm md:inline-block", children: metric.previousValue }),
            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", children: metric.value }),
              metric.changePercentage !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(
                "div",
                {
                  className: cn(
                    "flex items-center text-xs",
                    metric.status === "positive" && "text-primary",
                    metric.status === "negative" && "text-destructive",
                    metric.status === "warning" && "text-accent-foreground",
                    metric.status === "neutral" && "text-muted-foreground"
                  ),
                  children: [
                    metric.changePercentage > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
                      DynamicIcon,
                      {
                        name: "lucide/chevron-up",
                        size: 12,
                        className: "mr-0.5"
                      }
                    ) : metric.changePercentage < 0 ? /* @__PURE__ */ jsxRuntime.jsx(
                      DynamicIcon,
                      {
                        name: "lucide/chevron-down",
                        size: 12,
                        className: "mr-0.5"
                      }
                    ) : null,
                    Math.abs(metric.changePercentage),
                    "%"
                  ]
                }
              )
            ] })
          ] })
        ]
      },
      metric.id
    ));
  }, [metricsSlot, filteredMetrics, metricsClassName]);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    Section,
    {
      id: sectionId,
      background,
      spacing,
      className,
      pattern,
      patternOpacity,
      children: [
        /* @__PURE__ */ jsxRuntime.jsxs(
          "div",
          {
            className: cn(
              "mb-8 flex flex-col items-center justify-center space-y-4 text-center",
              headerClassName
            ),
            children: [
              renderBadge,
              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                "h2",
                {
                  className: cn(
                    "text-3xl font-bold tracking-tighter sm:text-4xl",
                    headingClassName
                  ),
                  children: heading
                }
              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                "p",
                {
                  className: cn(
                    "text-muted-foreground max-w-[700px] md:text-lg",
                    descriptionClassName
                  ),
                  children: description
                }
              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
            ]
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("border p-0 shadow-sm", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
          Tabs,
          {
            defaultValue: "all",
            value: activeTab,
            onValueChange: handleTabChange,
            className: cn("w-full gap-0", tabsClassName),
            children: [
              categories && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b p-3 md:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
                  /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "flex w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background", children: [
                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: activeTab === "all" ? "All Metrics" : categories.find((c) => c.value === activeTab)?.label || activeTab.charAt(0).toUpperCase() + activeTab.slice(1) }),
                    /* @__PURE__ */ jsxRuntime.jsx(
                      DynamicIcon,
                      {
                        name: "lucide/menu",
                        size: 16,
                        className: "ml-2"
                      }
                    )
                  ] }) }),
                  /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", className: "w-[200px]", children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
                    DropdownMenuItem,
                    {
                      onClick: () => handleTabChange(category.value),
                      children: category.label
                    },
                    category.value
                  )) })
                ] }) }),
                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden border-b px-4 md:block", children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "h-12 bg-transparent", children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
                  TabsTrigger,
                  {
                    value: category.value,
                    className: cn("rounded-none data-[state=active]:shadow-none", `data-[state=active]:${getNestedCardBg(background)}`),
                    children: category.label
                  },
                  category.value
                )) }) })
              ] }),
              /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: activeTab, className: "mt-0 p-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 divide-y", children: renderMetrics }) })
            ]
          }
        ) }) }),
        /* @__PURE__ */ jsxRuntime.jsxs(
          "div",
          {
            className: cn(
              "mt-8 flex flex-col items-center justify-between gap-4 sm:flex-row",
              footerClassName
            ),
            children: [
              lastUpdated && /* @__PURE__ */ jsxRuntime.jsxs(
                "div",
                {
                  className: cn(
                    "text-muted-foreground order-2 text-sm sm:order-1",
                    lastUpdatedClassName
                  ),
                  children: [
                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Last updated:" }),
                    " ",
                    typeof lastUpdated === "string" ? lastUpdated : lastUpdated
                  ]
                }
              ),
              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "order-1 sm:order-2", children: renderDashboardAction })
            ]
          }
        )
      ]
    }
  );
}

exports.ListMetricsDashboard = ListMetricsDashboard;
