@exxatdesignux/ui 0.2.19 → 0.4.0

package/dist/components/ui/key-metrics.js

@@ -0,0 +1,1015 @@
+"use client";
+import * as React2 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Slot, Select as Select$1, Tooltip as Tooltip$1, Separator as Separator$1 } from 'radix-ui';
+import { cva } from 'class-variance-authority';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Card({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      "data-size": size,
+      className: cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn(
+        "font-sans text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-4 group-data-[size=sm]/card:px-3", className),
+      ...props
+    }
+  );
+}
+function Select({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Select$1.Root, { "data-slot": "select", ...props });
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Select$1.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select$1.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "flex w-fit cursor-pointer items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pe-2 ps-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/15 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Select$1.Icon, { asChild: true, children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-chevron-down pointer-events-none size-4 text-muted-foreground", "aria-hidden": "true" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsxs(
+    Select$1.Content,
+    {
+      "data-slot": "select-content",
+      "data-align-trigger": position === "item-aligned",
+      className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 rtl:data-[side=left]:translate-x-1 data-[side=right]:translate-x-1 rtl:data-[side=right]:-translate-x-1 data-[side=top]:-translate-y-1", className),
+      position,
+      align,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(
+          Select$1.Viewport,
+          {
+            "data-position": position,
+            className: cn(
+              "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
+              position === "popper" && ""
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select$1.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pe-8 ps-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_i]:pointer-events-none [&_svg]:shrink-0 [&_i]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute end-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-check pointer-events-none", "aria-hidden": "true" }) }) }),
+        /* @__PURE__ */ jsx(Select$1.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Select$1.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "i",
+        {
+          className: "fa-light fa-chevron-up",
+          "aria-hidden": "true"
+        }
+      )
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Select$1.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "i",
+        {
+          className: "fa-light fa-chevron-down",
+          "aria-hidden": "true"
+        }
+      )
+    }
+  );
+}
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator$1.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var buttonVariants = cva(
+  "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-input bg-background hover:bg-interactive-hover hover:text-interactive-hover-foreground aria-expanded:bg-interactive-hover aria-expanded:text-interactive-hover-foreground dark:bg-input/15 dark:hover:bg-input/25",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-interactive-hover hover:text-interactive-hover-foreground aria-expanded:bg-interactive-hover aria-expanded:text-interactive-hover-foreground dark:hover:bg-interactive-hover-subtle",
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pe-2.5 has-data-[icon=inline-start]:ps-2.5",
+        xs: "h-6 gap-1 px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 px-3 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pe-3.5 has-data-[icon=inline-start]:ps-3.5",
+        icon: "size-9",
+        "icon-xs": "size-6 in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8 in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React2.forwardRef(({ className, variant = "default", size = "default", asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size }), className),
+      ...props
+    }
+  );
+});
+Button.displayName = "Button";
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tooltip$1.Trigger,
+    {
+      "data-slot": "tooltip-trigger",
+      suppressHydrationWarning: true,
+      className: cn("cursor-pointer", className),
+      ...props
+    }
+  );
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsxs(
+    Tooltip$1.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })
+      ]
+    }
+  ) });
+}
+var KeyMetricsContext = React2.createContext({});
+function useKeyMetricsContext() {
+  return React2.useContext(KeyMetricsContext);
+}
+function KeyMetricsProvider({
+  value,
+  children
+}) {
+  const memo2 = React2.useMemo(
+    () => ({
+      defaultInsightAction: value.defaultInsightAction,
+      shortcutHint: value.shortcutHint,
+      defaultActionLabel: value.defaultActionLabel
+    }),
+    [value.defaultInsightAction, value.shortcutHint, value.defaultActionLabel]
+  );
+  return /* @__PURE__ */ jsx(KeyMetricsContext.Provider, { value: memo2, children });
+}
+function InsightDefaultTooltip({
+  actionLabel,
+  children
+}) {
+  const { shortcutHint, defaultActionLabel = "Ask Leo" } = useKeyMetricsContext();
+  const label = actionLabel ?? defaultActionLabel;
+  const showShortcut = !!shortcutHint && (!actionLabel || actionLabel === defaultActionLabel);
+  if (!showShortcut) {
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: label })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxs(TooltipContent, { side: "top", className: "flex flex-wrap items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx("span", { children: label }),
+      shortcutHint
+    ] })
+  ] });
+}
+function metricTrendTone(trend, polarity = "higher_is_better") {
+  if (trend === "neutral") return "muted";
+  if (polarity === "informational") return "muted";
+  if (polarity === "higher_is_better") {
+    return trend === "up" ? "positive" : "negative";
+  }
+  return trend === "up" ? "negative" : "positive";
+}
+function metricTrendAriaQualifier(trend, polarity = "higher_is_better") {
+  if (trend === "neutral") return "no net change";
+  if (polarity === "informational") {
+    return trend === "up" ? "increased" : "decreased";
+  }
+  if (polarity === "higher_is_better") {
+    return trend === "up" ? "increased, favorable" : "decreased, unfavorable";
+  }
+  return trend === "up" ? "increased, unfavorable" : "decreased, favorable";
+}
+function flatMetricsHairlineClass(itemCount, metricsHalfWidthLayout) {
+  if (itemCount <= 1) return "gap-0";
+  const childBorder = "[&>*]:border-[color:var(--key-metrics-flat-divider)]";
+  if (itemCount === 2) {
+    return cn("gap-0", childBorder, "[&>*:first-child]:border-r");
+  }
+  if (itemCount === 4) {
+    const narrow2x2 = metricsHalfWidthLayout ? "@[max-width:25.99rem]" : "@[max-width:29.99rem]";
+    return cn(
+      "gap-0",
+      childBorder,
+      /* Wide strip (matches `@[30rem]:grid-cols-4`) — verticals between all tiles, no horizontal */
+      "[&>*:not(:last-child)]:border-r",
+      /* Narrow strip (`@[18rem]`–`@[30rem]` 2×2) */
+      `${narrow2x2}:[&>*:not(:last-child)]:border-e-0`,
+      `${narrow2x2}:[&>*:nth-child(odd)]:border-r`,
+      `${narrow2x2}:[&>*:not(:nth-last-child(-n+2))]:border-b`
+    );
+  }
+  return cn("gap-0", childBorder, "[&>*:not(:last-child)]:border-r");
+}
+function metricsRowColumnsClass(rowLength, metricsHalfWidthLayout) {
+  const half = metricsHalfWidthLayout;
+  switch (rowLength) {
+    case 1:
+      return "grid-cols-1";
+    case 2:
+      return half ? "grid-cols-1 @[14rem]:grid-cols-2" : "grid-cols-1 @[18rem]:grid-cols-2";
+    case 3:
+      return half ? "grid-cols-1 @[18rem]:grid-cols-3" : "grid-cols-1 @[24rem]:grid-cols-3";
+    case 4:
+      return half ? "grid-cols-1 @[14rem]:grid-cols-2 @[26rem]:grid-cols-4" : "grid-cols-1 @[18rem]:grid-cols-2 @[30rem]:grid-cols-4";
+    default:
+      return half ? "grid-cols-1 @[14rem]:grid-cols-2 @[26rem]:grid-cols-3 @[40rem]:grid-cols-6" : "grid-cols-1 @[18rem]:grid-cols-2 @[30rem]:grid-cols-3 @[56rem]:grid-cols-6";
+  }
+}
+var DEFAULT_PERIODS = [
+  { value: "week", label: "vs last week" },
+  { value: "month", label: "vs last month" },
+  { value: "quarter", label: "vs last quarter" },
+  { value: "year", label: "vs last year" }
+];
+var MetricCell = React2.memo(function MetricCell2({
+  label,
+  value,
+  delta,
+  trend,
+  trendPolarity = "higher_is_better",
+  description,
+  href,
+  onClick,
+  metricVariant = "default",
+  dense = false,
+  edgeGutter = true
+}) {
+  const isUp = trend === "up";
+  const isDown = trend === "down";
+  const tone = metricTrendTone(trend, trendPolarity);
+  const isInteractive = !!(href || onClick);
+  const isHero = metricVariant === "hero";
+  const deltaText = typeof delta === "number" ? delta === 0 ? "" : String(delta) : String(delta ?? "").trim();
+  const showTrendChip = isUp || isDown || deltaText.length > 0;
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-2 gap-y-0.5",
+          dense ? "min-h-[2.125rem]" : "min-h-[2.625rem]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "min-w-0 text-muted-foreground leading-snug wrap-break-word",
+                dense ? "text-xs" : "text-sm",
+                isHero && "font-medium"
+              ),
+              children: label
+            }
+          ),
+          isInteractive ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 inline-flex shrink-0", "aria-hidden": "true", children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-arrow-right text-xs text-foreground/70 transition-colors duration-150 group-hover:text-interactive-hover-foreground sm:group-hover:translate-x-0.5" }) }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 flex-wrap", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "font-bold tabular-nums leading-none text-foreground",
+            dense ? isHero ? "text-lg sm:text-xl" : "text-base sm:text-lg" : isHero ? "text-2xl sm:text-[1.625rem]" : "text-xl sm:text-2xl"
+          ),
+          children: value
+        }
+      ),
+      showTrendChip && /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "inline-flex items-center gap-1 font-medium leading-none",
+            dense ? "text-xs sm:text-xs" : "text-xs sm:text-sm",
+            tone === "positive" && "text-chart-2",
+            tone === "negative" && "text-destructive",
+            tone === "muted" && "text-muted-foreground"
+          ),
+          "aria-label": `${metricTrendAriaQualifier(trend, trendPolarity)} ${deltaText}`.trim(),
+          children: [
+            isUp && /* @__PURE__ */ jsx("i", { className: "fa-light fa-arrow-trend-up text-[0.8rem]", "aria-hidden": "true" }),
+            isDown && /* @__PURE__ */ jsx("i", { className: "fa-light fa-arrow-trend-down text-[0.8rem]", "aria-hidden": "true" }),
+            !isUp && !isDown && deltaText.length > 0 && /* @__PURE__ */ jsx("i", { className: "fa-light fa-minus text-[0.8rem]", "aria-hidden": "true" }),
+            deltaText.length > 0 && /* @__PURE__ */ jsx("span", { children: deltaText })
+          ]
+        }
+      )
+    ] }),
+    description ? /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn(
+          "min-w-0 text-muted-foreground leading-snug wrap-break-word",
+          dense ? "text-[11px]" : "text-xs"
+        ),
+        children: description
+      }
+    ) : null
+  ] });
+  const sharedClass = cn(
+    "group flex min-w-0 flex-col gap-2 text-start outline-none",
+    edgeGutter && "first:ps-0 last:pe-0",
+    dense ? "gap-1.5 px-2 py-2 sm:px-3 sm:py-3" : "gap-2 px-3 py-3 sm:px-5 sm:py-4",
+    isHero && "gap-2.5",
+    isInteractive && [
+      "cursor-pointer transition-colors duration-150",
+      "hover:bg-foreground/5",
+      "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+    ]
+  );
+  if (href) {
+    return /* @__PURE__ */ jsx("a", { href, className: sharedClass, "aria-label": `${label}: ${value}`, children: inner });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx("button", { type: "button", onClick, className: sharedClass, "aria-label": `${label}: ${value}`, children: inner });
+  }
+  return /* @__PURE__ */ jsx("div", { className: sharedClass, children: inner });
+});
+function insightRailBody(insight) {
+  const d = insight.description?.trim();
+  if (d) return d;
+  return insight.statement?.trim() ?? "";
+}
+function InsightRailStatementAction({
+  insight,
+  compact
+}) {
+  const badgeSize = compact ? "sm" : "default";
+  const surface = compact ? "border border-border/50 bg-gradient-to-b from-muted/35 to-card" : "bg-card";
+  const body = insightRailBody(insight);
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      role: "region",
+      "aria-label": "Insight",
+      className: cn(
+        "flex h-full min-h-0 flex-col overflow-hidden rounded-lg border-0 p-0 shadow-none ring-1 ring-foreground/8",
+        surface
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col px-3 py-3 sm:px-4 sm:py-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5", children: [
+          /* @__PURE__ */ jsx(InsightBadge, { severity: insight.severity, size: badgeSize }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold leading-snug text-foreground", children: insight.title }),
+            body ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm leading-snug text-muted-foreground", children: body }) : null
+          ] }),
+          insight.href && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: insight.href,
+              className: "mt-0.5 shrink-0 text-muted-foreground transition-colors hover:text-interactive-hover-foreground focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-ring",
+              "aria-label": `Open ${insight.title} \u2014 details`,
+              children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-arrow-up-right text-xs", "aria-hidden": "true" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-auto flex shrink-0 justify-end pt-3", children: /* @__PURE__ */ jsx(InsightDefaultTooltip, { actionLabel: insight.actionLabel, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: compact ? "outline" : "ghost",
+            size: "sm",
+            className: cn(
+              "h-8 w-full gap-1.5 text-xs sm:w-auto",
+              compact ? "border-border/60 bg-background px-3 text-foreground hover:bg-background" : "px-3 text-muted-foreground hover:text-interactive-hover-foreground"
+            ),
+            onClick: insight.onAction,
+            "aria-label": insight.actionLabel ?? "Ask Leo",
+            children: [
+              /* @__PURE__ */ jsx(
+                "i",
+                {
+                  className: insight.actionIcon ? `fa-light ${insight.actionIcon} text-xs` : "fa-duotone fa-solid fa-star-christmas text-xs text-brand",
+                  "aria-hidden": "true"
+                }
+              ),
+              insight.actionLabel ?? "Ask Leo"
+            ]
+          }
+        ) }) })
+      ] })
+    }
+  );
+}
+function InsightBadge({
+  severity = "warning",
+  size = "default"
+}) {
+  const styles = {
+    warning: {
+      bg: "bg-[var(--insight-severity-warning-bg)]",
+      icon: "fa-circle-exclamation",
+      color: "text-[var(--insight-severity-warning-fg)]"
+    },
+    info: {
+      bg: "bg-[var(--insight-severity-info-bg)]",
+      icon: "fa-circle-info",
+      color: "text-[var(--insight-severity-info-fg)]"
+    },
+    error: { bg: "bg-destructive/15", icon: "fa-circle-xmark", color: "text-destructive" }
+  }[severity];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex shrink-0 items-center justify-center rounded-full",
+        size === "sm" ? "h-6 w-6 text-xs" : "h-7 w-7 text-sm",
+        styles.bg,
+        styles.color
+      ),
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("i", { className: `fa-light ${styles.icon}` })
+    }
+  );
+}
+function KeyMetricsInner({
+  title,
+  description,
+  period,
+  periods,
+  metrics,
+  rows,
+  insight,
+  onPeriodChange,
+  innerPadding = "",
+  showHeader = true,
+  insightCompact = false,
+  insightFullWidth = false,
+  metricsSingleRow = false,
+  metricsHalfWidthLayout = false,
+  metricsCellSurfaceClassName = "bg-background",
+  surfaceVariant = "default"
+}) {
+  const isFlatBand = surfaceVariant === "flat";
+  const metricsGridClassName = isFlatBand ? flatMetricsHairlineClass(metrics.length, metricsHalfWidthLayout) : "gap-px bg-border";
+  const insightSideBySide = insight && !insightFullWidth && !metricsHalfWidthLayout;
+  const stackedRailInsight = insight && !insightFullWidth && metricsHalfWidthLayout;
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "key-metrics", className: "contents", children: [
+    showHeader && /* @__PURE__ */ jsxs("div", { className: cn(
+      "flex flex-col gap-2 pb-3",
+      "sm:flex-row sm:items-center sm:justify-between sm:gap-4",
+      innerPadding
+    ), children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-base font-semibold text-foreground leading-tight", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description })
+      ] }),
+      /* @__PURE__ */ jsxs(Select, { value: period, onValueChange: onPeriodChange, children: [
+        /* @__PURE__ */ jsx(
+          SelectTrigger,
+          {
+            className: "h-8 w-full sm:w-auto sm:min-w-[9rem] shrink-0 text-sm",
+            "aria-label": "Select comparison period",
+            children: /* @__PURE__ */ jsx(SelectValue, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectContent, { align: "end", sideOffset: 4, children: periods.map((p) => /* @__PURE__ */ jsx(SelectItem, { value: p.value, children: p.label }, p.value)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-col gap-0",
+          /* 60% KPIs / 40% insight (3fr:2fr); lg+ only so phones/tablets stack KPIs + insight */
+          insightSideBySide && "lg:grid lg:grid-cols-[minmax(0,3fr)_minmax(13rem,2fr)] lg:items-stretch lg:gap-x-6 lg:gap-y-0",
+          innerPadding
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "min-w-0 lg:flex lg:min-h-0 lg:flex-col",
+                !insightSideBySide && "w-full",
+                insightSideBySide && "lg:self-start"
+              ),
+              children: [
+                metricsHalfWidthLayout ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "@container/metrics-strip grid lg:hidden",
+                      metricsSingleRow ? metricsRowColumnsClass(
+                        metrics.length,
+                        /* half */
+                        true
+                      ) : "grid-cols-2",
+                      metricsGridClassName
+                    ),
+                    children: metrics.map((m) => /* @__PURE__ */ jsx("div", { className: cn("min-w-0", metricsCellSurfaceClassName), children: /* @__PURE__ */ jsx(MetricCell, { ...m, dense: true, edgeGutter: false }) }, m.id))
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "@container/metrics-strip grid lg:hidden",
+                      metricsRowColumnsClass(
+                        metrics.length,
+                        /* half */
+                        false
+                      ),
+                      metricsGridClassName
+                    ),
+                    children: metrics.map((m) => /* @__PURE__ */ jsx("div", { className: cn("min-w-0", metricsCellSurfaceClassName), children: /* @__PURE__ */ jsx(MetricCell, { ...m, dense: false, edgeGutter: false }) }, m.id))
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "@container/metrics-strip hidden lg:block", children: rows.map((row, rowIdx) => /* @__PURE__ */ jsxs(React2.Fragment, { children: [
+                  rowIdx > 0 && !isFlatBand && /* @__PURE__ */ jsx(Separator, { "aria-hidden": "true", className: "my-1" }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "grid",
+                        metricsRowColumnsClass(row.length, metricsHalfWidthLayout),
+                        isFlatBand ? flatMetricsHairlineClass(row.length, metricsHalfWidthLayout) : metricsGridClassName
+                      ),
+                      children: row.map((m) => /* @__PURE__ */ jsx("div", { className: cn("min-w-0", metricsCellSurfaceClassName), children: /* @__PURE__ */ jsx(MetricCell, { ...m, dense: metricsHalfWidthLayout, edgeGutter: false }) }, m.id))
+                    }
+                  )
+                ] }, rowIdx)) })
+              ]
+            }
+          ),
+          insight && /* @__PURE__ */ jsxs(Fragment, { children: [
+            insightFullWidth ? /* @__PURE__ */ jsx(
+              Separator,
+              {
+                "aria-hidden": "true",
+                className: cn("my-4 w-full", isFlatBand && "bg-foreground/[0.06]")
+              }
+            ) : stackedRailInsight ? /* @__PURE__ */ jsx(
+              Separator,
+              {
+                "aria-hidden": "true",
+                className: cn("my-4 w-full", isFlatBand && "bg-foreground/[0.06]")
+              }
+            ) : /* @__PURE__ */ jsx(
+              Separator,
+              {
+                "aria-hidden": "true",
+                className: cn("my-3 lg:hidden", isFlatBand && "bg-foreground/[0.055]")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex min-h-0 min-w-0 w-full flex-col",
+                  /* Divider + padding replace vertical Separator so grid stays 2 columns */
+                  insightSideBySide && !insightFullWidth && cn(
+                    "lg:h-full lg:ps-6",
+                    /* Flat band: insight card ring is the divider — skip `border-l` (double line). */
+                    !isFlatBand && "lg:border-s lg:border-border"
+                  )
+                ),
+                children: insight && !insightFullWidth ? /* @__PURE__ */ jsx(InsightRailStatementAction, { insight, compact: insightCompact }) : /* @__PURE__ */ jsx(
+                  Card,
+                  {
+                    role: "region",
+                    "aria-label": "Insight",
+                    className: cn(
+                      "overflow-hidden rounded-lg p-0 ring-1 ring-foreground/8 shadow-none",
+                      "flex min-h-0 flex-col bg-muted/25"
+                    ),
+                    children: insightCompact ? /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-4 p-4 md:flex-row md:items-center md:justify-between md:gap-8 md:p-5", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5", children: [
+                          /* @__PURE__ */ jsx(InsightBadge, { severity: insight.severity, size: "sm" }),
+                          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start justify-between gap-2", children: [
+                            /* @__PURE__ */ jsx("p", { className: "text-base font-semibold leading-tight text-foreground", children: insight.title }),
+                            insight.href && /* @__PURE__ */ jsx(
+                              "a",
+                              {
+                                href: insight.href,
+                                className: "shrink-0 text-muted-foreground transition-colors hover:text-interactive-hover-foreground focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-ring",
+                                "aria-label": `Open ${insight.title} \u2014 details`,
+                                children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-arrow-up-right text-xs", "aria-hidden": "true" })
+                              }
+                            )
+                          ] })
+                        ] }),
+                        insight.description ? /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: insight.description }) : null
+                      ] }),
+                      /* @__PURE__ */ jsx("div", { className: "flex w-full shrink-0 md:w-auto", children: /* @__PURE__ */ jsx(InsightDefaultTooltip, { actionLabel: insight.actionLabel, children: /* @__PURE__ */ jsxs(
+                        Button,
+                        {
+                          variant: "ghost",
+                          size: "sm",
+                          className: "h-9 w-full gap-1.5 px-4 text-xs text-muted-foreground hover:text-interactive-hover-foreground md:min-w-[8.5rem]",
+                          onClick: insight.onAction,
+                          "aria-label": insight.actionLabel ?? "Ask Leo",
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "i",
+                              {
+                                className: insight.actionIcon ? `fa-light ${insight.actionIcon} text-xs` : "fa-duotone fa-solid fa-star-christmas text-xs text-brand",
+                                "aria-hidden": "true"
+                              }
+                            ),
+                            insight.actionLabel ?? "Ask Leo"
+                          ]
+                        }
+                      ) }) })
+                    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-4 p-4 md:flex-row md:items-center md:justify-between md:gap-8 md:p-5", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+                          /* @__PURE__ */ jsx(InsightBadge, { severity: insight.severity }),
+                          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start justify-between gap-2", children: [
+                            /* @__PURE__ */ jsx("p", { className: "text-base font-semibold leading-snug text-foreground", children: insight.title }),
+                            insight.href && /* @__PURE__ */ jsx(
+                              "a",
+                              {
+                                href: insight.href,
+                                className: "shrink-0 text-muted-foreground transition-colors hover:text-interactive-hover-foreground focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-ring",
+                                "aria-label": `Open ${insight.title} \u2014 details`,
+                                children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-arrow-up-right text-xs", "aria-hidden": "true" })
+                              }
+                            )
+                          ] })
+                        ] }),
+                        insight.description ? /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: insight.description }) : null
+                      ] }),
+                      /* @__PURE__ */ jsx("div", { className: "flex w-full shrink-0 md:w-auto", children: /* @__PURE__ */ jsx(InsightDefaultTooltip, { actionLabel: insight.actionLabel, children: /* @__PURE__ */ jsxs(
+                        Button,
+                        {
+                          variant: "ghost",
+                          size: "sm",
+                          className: "h-9 w-full gap-1.5 px-4 text-xs text-muted-foreground hover:text-interactive-hover-foreground md:min-w-[8.5rem]",
+                          onClick: insight.onAction,
+                          "aria-label": insight.actionLabel ?? "Ask Leo",
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "i",
+                              {
+                                className: insight.actionIcon ? `fa-light ${insight.actionIcon} text-xs` : "fa-duotone fa-solid fa-star-christmas text-xs text-brand",
+                                "aria-hidden": "true"
+                              }
+                            ),
+                            insight.actionLabel ?? "Ask Leo"
+                          ]
+                        }
+                      ) }) })
+                    ] })
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function chunkMetricPairs(metrics) {
+  const out = [];
+  for (let i = 0; i < metrics.length; i += 2) out.push(metrics.slice(i, i + 2));
+  return out;
+}
+function KeyMetrics({
+  variant = "card",
+  title = "Key Metrics",
+  description = "Overview of performance indicators",
+  metrics = [],
+  insight,
+  periods = DEFAULT_PERIODS,
+  defaultPeriod = "week",
+  onPeriodChange,
+  showHeader = true,
+  insightCompact = false,
+  insightFullWidth = false,
+  metricsSingleRow = false,
+  metricsHalfWidthLayout = false,
+  className
+}) {
+  const [period, setPeriod] = React2.useState(defaultPeriod);
+  const {
+    defaultInsightAction,
+    defaultActionLabel = "Ask Leo"
+  } = useKeyMetricsContext();
+  function handlePeriodChange(v) {
+    setPeriod(v);
+    onPeriodChange?.(v);
+  }
+  const rows = metricsSingleRow ? metrics.length ? metricsHalfWidthLayout ? chunkMetricPairs(metrics) : [metrics] : [] : (() => {
+    const out = [];
+    for (let i = 0; i < metrics.length; i += 3) {
+      out.push(metrics.slice(i, i + 3));
+    }
+    return out;
+  })();
+  const metricsCellSurfaceClassName = variant === "flat" ? "bg-transparent" : "bg-card dark:bg-transparent";
+  const innerProps = {
+    title,
+    description,
+    period,
+    periods,
+    metrics,
+    rows,
+    insight,
+    onPeriodChange: handlePeriodChange,
+    insightCompact,
+    insightFullWidth,
+    metricsSingleRow,
+    metricsHalfWidthLayout,
+    metricsCellSurfaceClassName,
+    surfaceVariant: variant === "flat" ? "flat" : "default"
+  };
+  const glowStyle = {
+    background: "var(--key-metrics-card-glow-radial)"
+  };
+  const flatBandStyle = {
+    background: "var(--key-metrics-flat-band-radial)",
+    boxShadow: "var(--key-metrics-flat-band-shadow)"
+  };
+  if (variant === "card") {
+    return /* @__PURE__ */ jsxs(Card, { className: cn("shadow-xs overflow-hidden flex flex-col", className), style: glowStyle, children: [
+      /* @__PURE__ */ jsx(CardHeader, { className: cn("shrink-0 pb-2", metricsHalfWidthLayout && "space-y-2"), children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex gap-2",
+            metricsHalfWidthLayout ? "flex-col min-[400px]:flex-row min-[400px]:items-start min-[400px]:justify-between" : "items-start"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-semibold leading-tight", children: title }),
+              /* @__PURE__ */ jsx(CardDescription, { className: "text-xs mt-0.5", children: description })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 shrink-0", children: [
+              defaultInsightAction ? /* @__PURE__ */ jsx(InsightDefaultTooltip, { actionLabel: defaultActionLabel, children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  size: "sm",
+                  variant: "outline",
+                  className: "h-7 shrink-0 text-xs gap-1.5 px-2",
+                  "aria-label": `${defaultActionLabel} about these metrics`,
+                  onClick: defaultInsightAction,
+                  type: "button",
+                  children: [
+                    /* @__PURE__ */ jsx("i", { className: "fa-duotone fa-solid fa-star-christmas text-xs text-brand", "aria-hidden": "true" }),
+                    /* @__PURE__ */ jsx("span", { children: defaultActionLabel })
+                  ]
+                }
+              ) }) : null,
+              /* @__PURE__ */ jsxs(Select, { value: period, onValueChange: handlePeriodChange, children: [
+                /* @__PURE__ */ jsx(
+                  SelectTrigger,
+                  {
+                    size: "sm",
+                    className: "w-auto min-w-[9rem] shrink-0 text-sm",
+                    "aria-label": "Select comparison period",
+                    children: /* @__PURE__ */ jsx(SelectValue, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(SelectContent, { align: "end", sideOffset: 4, children: periods.map((p) => /* @__PURE__ */ jsx(SelectItem, { value: p.value, children: p.label }, p.value)) })
+              ] })
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(CardContent, { className: "flex-1 pb-4", children: /* @__PURE__ */ jsx(KeyMetricsInner, { ...innerProps, showHeader: false }) })
+    ] });
+  }
+  if (variant === "compact") {
+    return /* @__PURE__ */ jsx(Card, { className: cn("shadow-xs overflow-hidden", className), style: glowStyle, children: /* @__PURE__ */ jsx(CardContent, { className: "py-3 px-4", children: /* @__PURE__ */ jsx(KeyMetricsInner, { ...innerProps, showHeader: false }) }) });
+  }
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "aria-label": title,
+      className: cn("relative w-full overflow-hidden pt-5 pb-8", className),
+      style: flatBandStyle,
+      children: /* @__PURE__ */ jsx(
+        KeyMetricsInner,
+        {
+          ...innerProps,
+          innerPadding: "px-4 lg:px-6",
+          showHeader
+        }
+      )
+    }
+  );
+}
+function KeyMetricsContent({
+  metrics = [],
+  insight,
+  insightCompact = false,
+  insightFullWidth = false
+}) {
+  const rows = [];
+  for (let i = 0; i < metrics.length; i += 3) rows.push(metrics.slice(i, i + 3));
+  return /* @__PURE__ */ jsx(
+    KeyMetricsInner,
+    {
+      title: "",
+      description: "",
+      period: "",
+      periods: [],
+      metrics,
+      rows,
+      insight,
+      onPeriodChange: () => {
+      },
+      showHeader: false,
+      insightCompact,
+      insightFullWidth,
+      metricsCellSurfaceClassName: "bg-card dark:bg-transparent"
+    }
+  );
+}
+
+export { KeyMetrics, KeyMetricsContent, KeyMetricsProvider, metricTrendAriaQualifier, metricTrendTone, useKeyMetricsContext };
+//# sourceMappingURL=key-metrics.js.map
+//# sourceMappingURL=key-metrics.js.map