@kopexa/sight/dist/chunk-5LLYOCGQ.mjs

Kopexa Sight Design System — React component library for GRC applications

"use client";

// src/components/stat/stat.tsx
import { ArrowDown, ArrowUp } from "@kopexa/icons";
import { cn } from "@kopexa/shared-utils";
import { stat } from "@kopexa/theme";
import { jsx, jsxs } from "react/jsx-runtime";
function StatRoot({
  className,
  size,
  trend,
  children,
  ...props
}) {
  const styles = stat({ size, trend });
  return /* @__PURE__ */ jsx("dl", { "data-slot": "stat", className: cn(styles.root(), className), ...props, children });
}
function StatLabel({ className, children, ...props }) {
  const styles = stat();
  return /* @__PURE__ */ jsx(
    "dt",
    {
      "data-slot": "stat-label",
      className: cn(styles.label(), className),
      ...props,
      children
    }
  );
}
function StatValueText({
  className,
  size,
  children,
  ...props
}) {
  const styles = stat({ size });
  return /* @__PURE__ */ jsx(
    "dd",
    {
      "data-slot": "stat-value",
      className: cn(styles.valueText(), className),
      ...props,
      children
    }
  );
}
function StatValueUnit({
  className,
  children,
  ...props
}) {
  const styles = stat();
  return /* @__PURE__ */ jsx(
    "span",
    {
      "data-slot": "stat-value-unit",
      className: cn(styles.valueUnit(), className),
      ...props,
      children
    }
  );
}
function StatHelpText({
  className,
  children,
  ...props
}) {
  const styles = stat();
  return /* @__PURE__ */ jsx(
    "span",
    {
      "data-slot": "stat-help-text",
      className: cn(styles.helpText(), className),
      ...props,
      children
    }
  );
}
function StatUpIndicator({
  className,
  icon,
  children,
  ...props
}) {
  const styles = stat({ trend: "up" });
  return /* @__PURE__ */ jsxs(
    "span",
    {
      "data-slot": "stat-indicator",
      "data-type": "up",
      className: cn(styles.indicator(), className),
      ...props,
      children: [
        icon != null ? icon : /* @__PURE__ */ jsx(ArrowUp, {}),
        children
      ]
    }
  );
}
function StatDownIndicator({
  className,
  icon,
  children,
  ...props
}) {
  const styles = stat({ trend: "down" });
  return /* @__PURE__ */ jsxs(
    "span",
    {
      "data-slot": "stat-indicator",
      "data-type": "down",
      className: cn(styles.indicator(), className),
      ...props,
      children: [
        icon != null ? icon : /* @__PURE__ */ jsx(ArrowDown, {}),
        children
      ]
    }
  );
}
function StatGroup({ className, children, ...props }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      "data-slot": "stat-group",
      className: cn("flex flex-wrap justify-around gap-4", className),
      ...props,
      children
    }
  );
}
var Stat = Object.assign(StatRoot, {
  Root: StatRoot,
  Label: StatLabel,
  ValueText: StatValueText,
  ValueUnit: StatValueUnit,
  HelpText: StatHelpText,
  UpIndicator: StatUpIndicator,
  DownIndicator: StatDownIndicator,
  Group: StatGroup
});

export {
  StatRoot,
  StatLabel,
  StatValueText,
  StatValueUnit,
  StatHelpText,
  StatUpIndicator,
  StatDownIndicator,
  StatGroup,
  Stat
};