@kopexa/sight/dist/components/stat/stat.js

Kopexa Sight Design System — React component library for GRC applications

"use client";
"use strict";
"use client";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/stat/stat.tsx
var stat_exports = {};
__export(stat_exports, {
  Stat: () => Stat,
  StatDownIndicator: () => StatDownIndicator,
  StatGroup: () => StatGroup,
  StatHelpText: () => StatHelpText,
  StatLabel: () => StatLabel,
  StatRoot: () => StatRoot,
  StatUpIndicator: () => StatUpIndicator,
  StatValueText: () => StatValueText,
  StatValueUnit: () => StatValueUnit
});
module.exports = __toCommonJS(stat_exports);
var import_icons = require("@kopexa/icons");
var import_shared_utils = require("@kopexa/shared-utils");
var import_theme = require("@kopexa/theme");
var import_jsx_runtime = require("react/jsx-runtime");
function StatRoot({
  className,
  size,
  trend,
  children,
  ...props
}) {
  const styles = (0, import_theme.stat)({ size, trend });
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dl", { "data-slot": "stat", className: (0, import_shared_utils.cn)(styles.root(), className), ...props, children });
}
function StatLabel({ className, children, ...props }) {
  const styles = (0, import_theme.stat)();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "dt",
    {
      "data-slot": "stat-label",
      className: (0, import_shared_utils.cn)(styles.label(), className),
      ...props,
      children
    }
  );
}
function StatValueText({
  className,
  size,
  children,
  ...props
}) {
  const styles = (0, import_theme.stat)({ size });
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "dd",
    {
      "data-slot": "stat-value",
      className: (0, import_shared_utils.cn)(styles.valueText(), className),
      ...props,
      children
    }
  );
}
function StatValueUnit({
  className,
  children,
  ...props
}) {
  const styles = (0, import_theme.stat)();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "span",
    {
      "data-slot": "stat-value-unit",
      className: (0, import_shared_utils.cn)(styles.valueUnit(), className),
      ...props,
      children
    }
  );
}
function StatHelpText({
  className,
  children,
  ...props
}) {
  const styles = (0, import_theme.stat)();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "span",
    {
      "data-slot": "stat-help-text",
      className: (0, import_shared_utils.cn)(styles.helpText(), className),
      ...props,
      children
    }
  );
}
function StatUpIndicator({
  className,
  icon,
  children,
  ...props
}) {
  const styles = (0, import_theme.stat)({ trend: "up" });
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    "span",
    {
      "data-slot": "stat-indicator",
      "data-type": "up",
      className: (0, import_shared_utils.cn)(styles.indicator(), className),
      ...props,
      children: [
        icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ArrowUp, {}),
        children
      ]
    }
  );
}
function StatDownIndicator({
  className,
  icon,
  children,
  ...props
}) {
  const styles = (0, import_theme.stat)({ trend: "down" });
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    "span",
    {
      "data-slot": "stat-indicator",
      "data-type": "down",
      className: (0, import_shared_utils.cn)(styles.indicator(), className),
      ...props,
      children: [
        icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ArrowDown, {}),
        children
      ]
    }
  );
}
function StatGroup({ className, children, ...props }) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      "data-slot": "stat-group",
      className: (0, import_shared_utils.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
});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Stat,
  StatDownIndicator,
  StatGroup,
  StatHelpText,
  StatLabel,
  StatRoot,
  StatUpIndicator,
  StatValueText,
  StatValueUnit
});