@thesquad-components/sqd-module-template 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ActivityGaugeDatum = {
+    name: string;
+    value: number;
+    className?: string;
+};
+type ActivityGaugeProps = {
+    title?: string;
+    subtitle?: string;
+    data?: ActivityGaugeDatum[];
+    maxValue?: number;
+};
+declare const ActivityGaugeLg: ({ title, subtitle, data, maxValue, }: ActivityGaugeProps) => react_jsx_runtime.JSX.Element;
+
+type TasksActivityGaugeProps = {
+    daysBack?: number;
+};
+declare const TasksActivityGauge: ({ daysBack }: TasksActivityGaugeProps) => react_jsx_runtime.JSX.Element;
+
+type TasksCountResponse = {
+    count: number;
+    daysBack: number;
+    since: string;
+};
+type GetTasksCountOptions = {
+    baseUrl?: string;
+    moduleKey?: string;
+    signal?: AbortSignal;
+};
+declare const getTasksCount: (daysBack: number, options?: GetTasksCountOptions) => Promise<number>;
+
+export { type ActivityGaugeDatum, ActivityGaugeLg, type ActivityGaugeProps, TasksActivityGauge, type TasksActivityGaugeProps, type TasksCountResponse, getTasksCount };

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ActivityGaugeDatum = {
+    name: string;
+    value: number;
+    className?: string;
+};
+type ActivityGaugeProps = {
+    title?: string;
+    subtitle?: string;
+    data?: ActivityGaugeDatum[];
+    maxValue?: number;
+};
+declare const ActivityGaugeLg: ({ title, subtitle, data, maxValue, }: ActivityGaugeProps) => react_jsx_runtime.JSX.Element;
+
+type TasksActivityGaugeProps = {
+    daysBack?: number;
+};
+declare const TasksActivityGauge: ({ daysBack }: TasksActivityGaugeProps) => react_jsx_runtime.JSX.Element;
+
+type TasksCountResponse = {
+    count: number;
+    daysBack: number;
+    since: string;
+};
+type GetTasksCountOptions = {
+    baseUrl?: string;
+    moduleKey?: string;
+    signal?: AbortSignal;
+};
+declare const getTasksCount: (daysBack: number, options?: GetTasksCountOptions) => Promise<number>;
+
+export { type ActivityGaugeDatum, ActivityGaugeLg, type ActivityGaugeProps, TasksActivityGauge, type TasksActivityGaugeProps, type TasksCountResponse, getTasksCount };

package/dist/index.js

@@ -0,0 +1,194 @@
+'use strict';
+
+var recharts = require('recharts');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+var twMerge = tailwindMerge.extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+var ChartLegendContent = ({ payload = [] }) => {
+  if (payload.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-2", children: payload.map((entry, index) => {
+    var _a, _b;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: cx(
+            "size-2 rounded-full bg-utility-gray-300",
+            ((_b = entry.payload) == null ? void 0 : _b.className) ? entry.payload.className.replace("text-", "bg-") : void 0
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-secondary", children: entry.value })
+    ] }, `${(_a = entry.value) != null ? _a : "item"}-${index}`);
+  }) });
+};
+var ChartTooltipContent = ({ active, payload, label, isRadialChart }) => {
+  if (!active || !payload || payload.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-secondary bg-primary px-3 py-2 shadow-sm", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-tertiary", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 space-y-1", children: payload.map((entry, index) => {
+      var _a, _b, _c;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cx(
+              "size-2 rounded-full bg-utility-gray-300",
+              ((_b = entry.payload) == null ? void 0 : _b.className) ? entry.payload.className.replace("text-", "bg-") : void 0
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-secondary", children: (_c = entry.name) != null ? _c : isRadialChart ? "Value" : label }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto font-medium text-primary", children: entry.value })
+      ] }, `${(_a = entry.name) != null ? _a : "value"}-${index}`);
+    }) })
+  ] });
+};
+var radialData = [
+  {
+    name: "Series 3",
+    value: 660,
+    className: "text-utility-brand-400"
+  },
+  {
+    name: "Series 2",
+    value: 774,
+    className: "text-utility-brand-600"
+  },
+  {
+    name: "Series 1",
+    value: 866,
+    className: "text-utility-brand-700"
+  }
+];
+var ActivityGaugeLg = ({
+  title = "1,000",
+  subtitle = "Active users",
+  data = radialData,
+  maxValue = 1e3
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { height: 356, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    recharts.RadialBarChart,
+    {
+      data,
+      accessibilityLayer: true,
+      innerRadius: 84,
+      outerRadius: 154,
+      startAngle: 90,
+      endAngle: 360 + 90,
+      className: "font-medium text-tertiary [&_.recharts-polar-grid]:text-utility-gray-100 [&_.recharts-text]:text-sm",
+      margin: {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.PolarAngleAxis, { tick: false, domain: [0, maxValue], type: "number", reversed: true }),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { verticalAlign: "bottom", align: "center", layout: "horizontal", content: /* @__PURE__ */ jsxRuntime.jsx(ChartLegendContent, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(ChartTooltipContent, { isRadialChart: true }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.RadialBar,
+          {
+            isAnimationActive: false,
+            dataKey: "value",
+            cornerRadius: 99,
+            fill: "currentColor",
+            background: {
+              className: "fill-utility-gray-100"
+            }
+          }
+        ),
+        (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("text", { x: "50%", y: "50%", textAnchor: "middle", dominantBaseline: "middle", children: [
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx(
+            "tspan",
+            {
+              x: "50%",
+              dy: title ? "-1.4em" : "1%",
+              className: cx("fill-current text-tertiary", "text-sm font-medium"),
+              children: subtitle
+            }
+          ),
+          title && /* @__PURE__ */ jsxRuntime.jsx(
+            "tspan",
+            {
+              x: "50%",
+              dy: subtitle ? "1em" : "1%",
+              className: cx("fill-current text-primary", "text-display-md font-semibold"),
+              children: title
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+};
+
+// src/api/tasks.ts
+var DEFAULT_API_BASE_URL = "https://api.thesqd.com";
+var DEFAULT_MODULE_KEY = "e166f127e73167b6646eeaeff8837566d3c27d4002fb122bc49d4fb06d97d67e";
+var getTasksCount = async (daysBack, options = {}) => {
+  var _a, _b, _c, _d, _e;
+  const resolvedDaysBack = Number.isFinite(daysBack) && daysBack > 0 ? Math.floor(daysBack) : 7;
+  const baseUrl = (_b = (_a = options.baseUrl) != null ? _a : process.env.NEXT_PUBLIC_SQD_API_BASE_URL) != null ? _b : DEFAULT_API_BASE_URL;
+  const moduleKey = (_d = (_c = options.moduleKey) != null ? _c : process.env.NEXT_PUBLIC_SQD_MODULE_KEY) != null ? _d : DEFAULT_MODULE_KEY;
+  const url = new URL("/api/tasks/count", baseUrl);
+  url.searchParams.set("daysBack", String(resolvedDaysBack));
+  const response = await fetch(url.toString(), {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "x-sqd-module-key": moduleKey
+    },
+    cache: "no-store",
+    signal: options.signal
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to fetch tasks count (${response.status})`);
+  }
+  const payload = await response.json();
+  return (_e = payload.count) != null ? _e : 0;
+};
+var TasksActivityGauge = ({ daysBack = 7 }) => {
+  const [count, setCount] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const subtitle = react.useMemo(() => `Tasks last ${daysBack} days`, [daysBack]);
+  react.useEffect(() => {
+    let isActive = true;
+    setError(null);
+    setCount(null);
+    getTasksCount(daysBack).then((total) => {
+      if (isActive) {
+        setCount(total);
+      }
+    }).catch((err) => {
+      if (isActive) {
+        setError(err instanceof Error ? err.message : "Failed to load tasks count");
+      }
+    });
+    return () => {
+      isActive = false;
+    };
+  }, [daysBack]);
+  const title = error ? "\u2014" : count === null ? "\u2026" : count.toLocaleString();
+  return /* @__PURE__ */ jsxRuntime.jsx(ActivityGaugeLg, { title, subtitle });
+};
+
+exports.ActivityGaugeLg = ActivityGaugeLg;
+exports.TasksActivityGauge = TasksActivityGauge;
+exports.getTasksCount = getTasksCount;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/cx.ts","../src/components/application/charts/charts-base.tsx","../src/components/application/charts/activity-gauge-lg.tsx","../src/api/tasks.ts","../src/components/application/charts/tasks-activity-gauge.tsx"],"names":["extendTailwindMerge","jsx","jsxs","ResponsiveContainer","RadialBarChart","PolarAngleAxis","Legend","Tooltip","RadialBar","useState","useMemo","useEffect"],"mappings":"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","file":"index.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","\"use client\";\n\nimport type { TooltipProps } from \"recharts\";\n\nimport { cx } from \"@/utils/cx\";\n\ntype LegendPayload = {\n    value?: string;\n    payload?: {\n        className?: string;\n    };\n};\n\ntype LegendProps = {\n    payload?: LegendPayload[];\n};\n\nexport const ChartLegendContent = ({ payload = [] }: LegendProps) => {\n    if (payload.length === 0) {\n        return null;\n    }\n\n    return (\n        <div className=\"flex flex-wrap items-center justify-center gap-x-4 gap-y-2\">\n            {payload.map((entry, index) => (\n                <div key={`${entry.value ?? \"item\"}-${index}`} className=\"flex items-center gap-2\">\n                    <span\n                        className={cx(\n                            \"size-2 rounded-full bg-utility-gray-300\",\n                            entry.payload?.className ? entry.payload.className.replace(\"text-\", \"bg-\") : undefined,\n                        )}\n                    />\n                    <span className=\"text-xs font-medium text-secondary\">{entry.value}</span>\n                </div>\n            ))}\n        </div>\n    );\n};\n\ntype ChartTooltipContentProps = TooltipProps<number, string> & {\n    isRadialChart?: boolean;\n};\n\nexport const ChartTooltipContent = ({ active, payload, label, isRadialChart }: ChartTooltipContentProps) => {\n    if (!active || !payload || payload.length === 0) {\n        return null;\n    }\n\n    return (\n        <div className=\"rounded-lg border border-secondary bg-primary px-3 py-2 shadow-sm\">\n            {label && <div className=\"text-xs font-medium text-tertiary\">{label}</div>}\n            <div className=\"mt-1 space-y-1\">\n                {payload.map((entry, index) => (\n                    <div key={`${entry.name ?? \"value\"}-${index}`} className=\"flex items-center gap-2 text-xs\">\n                        <span\n                            className={cx(\n                                \"size-2 rounded-full bg-utility-gray-300\",\n                                entry.payload?.className ? entry.payload.className.replace(\"text-\", \"bg-\") : undefined,\n                            )}\n                        />\n                        <span className=\"text-secondary\">{entry.name ?? (isRadialChart ? \"Value\" : label)}</span>\n                        <span className=\"ml-auto font-medium text-primary\">{entry.value}</span>\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n};\n","\"use client\";\n\nimport { Legend, PolarAngleAxis, RadialBar, RadialBarChart, ResponsiveContainer, Tooltip } from \"recharts\";\n\nimport { ChartLegendContent, ChartTooltipContent } from \"@/components/application/charts/charts-base\";\nimport { cx } from \"@/utils/cx\";\n\nexport type ActivityGaugeDatum = {\n    name: string;\n    value: number;\n    className?: string;\n};\n\nexport type ActivityGaugeProps = {\n    title?: string;\n    subtitle?: string;\n    data?: ActivityGaugeDatum[];\n    maxValue?: number;\n};\n\nconst radialData: ActivityGaugeDatum[] = [\n    {\n        name: \"Series 3\",\n        value: 660,\n        className: \"text-utility-brand-400\",\n    },\n    {\n        name: \"Series 2\",\n        value: 774,\n        className: \"text-utility-brand-600\",\n    },\n    {\n        name: \"Series 1\",\n        value: 866,\n        className: \"text-utility-brand-700\",\n    },\n];\n\nexport const ActivityGaugeLg = ({\n    title = \"1,000\",\n    subtitle = \"Active users\",\n    data = radialData,\n    maxValue = 1000,\n}: ActivityGaugeProps) => {\n    return (\n        <ResponsiveContainer height={356}>\n            <RadialBarChart\n                data={data}\n                accessibilityLayer\n                innerRadius={84}\n                outerRadius={154}\n                startAngle={90}\n                endAngle={360 + 90}\n                className=\"font-medium text-tertiary [&_.recharts-polar-grid]:text-utility-gray-100 [&_.recharts-text]:text-sm\"\n                margin={{\n                    left: 0,\n                    right: 0,\n                    top: 0,\n                    bottom: 0,\n                }}\n            >\n                <PolarAngleAxis tick={false} domain={[0, maxValue]} type=\"number\" reversed />\n\n                <Legend verticalAlign=\"bottom\" align=\"center\" layout=\"horizontal\" content={<ChartLegendContent />} />\n\n                <Tooltip content={<ChartTooltipContent isRadialChart />} />\n\n                <RadialBar\n                    isAnimationActive={false}\n                    dataKey=\"value\"\n                    cornerRadius={99}\n                    fill=\"currentColor\"\n                    background={{\n                        className: \"fill-utility-gray-100\",\n                    }}\n                />\n\n                {(title || subtitle) && (\n                    <text x=\"50%\" y=\"50%\" textAnchor=\"middle\" dominantBaseline=\"middle\">\n                        {subtitle && (\n                            <tspan\n                                x=\"50%\"\n                                dy={title ? \"-1.4em\" : \"1%\"}\n                                className={cx(\"fill-current text-tertiary\", \"text-sm font-medium\")}\n                            >\n                                {subtitle}\n                            </tspan>\n                        )}\n                        {title && (\n                            <tspan\n                                x=\"50%\"\n                                dy={subtitle ? \"1em\" : \"1%\"}\n                                className={cx(\"fill-current text-primary\", \"text-display-md font-semibold\")}\n                            >\n                                {title}\n                            </tspan>\n                        )}\n                    </text>\n                )}\n            </RadialBarChart>\n        </ResponsiveContainer>\n    );\n};\n","export type TasksCountResponse = {\n    count: number;\n    daysBack: number;\n    since: string;\n};\n\ntype GetTasksCountOptions = {\n    baseUrl?: string;\n    moduleKey?: string;\n    signal?: AbortSignal;\n};\n\nconst DEFAULT_API_BASE_URL = \"https://api.thesqd.com\";\nconst DEFAULT_MODULE_KEY = \"e166f127e73167b6646eeaeff8837566d3c27d4002fb122bc49d4fb06d97d67e\";\n\nexport const getTasksCount = async (daysBack: number, options: GetTasksCountOptions = {}) => {\n    const resolvedDaysBack = Number.isFinite(daysBack) && daysBack > 0 ? Math.floor(daysBack) : 7;\n    const baseUrl = options.baseUrl ?? process.env.NEXT_PUBLIC_SQD_API_BASE_URL ?? DEFAULT_API_BASE_URL;\n    const moduleKey = options.moduleKey ?? process.env.NEXT_PUBLIC_SQD_MODULE_KEY ?? DEFAULT_MODULE_KEY;\n    const url = new URL(\"/api/tasks/count\", baseUrl);\n\n    url.searchParams.set(\"daysBack\", String(resolvedDaysBack));\n\n    const response = await fetch(url.toString(), {\n        method: \"GET\",\n        headers: {\n            \"Content-Type\": \"application/json\",\n            \"x-sqd-module-key\": moduleKey,\n        },\n        cache: \"no-store\",\n        signal: options.signal,\n    });\n\n    if (!response.ok) {\n        throw new Error(`Failed to fetch tasks count (${response.status})`);\n    }\n\n    const payload = (await response.json()) as TasksCountResponse;\n\n    return payload.count ?? 0;\n};\n","\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\n\nimport { getTasksCount } from \"@/api/tasks\";\nimport { ActivityGaugeLg } from \"@/components/application/charts/activity-gauge-lg\";\n\nexport type TasksActivityGaugeProps = {\n    daysBack?: number;\n};\n\nexport const TasksActivityGauge = ({ daysBack = 7 }: TasksActivityGaugeProps) => {\n    const [count, setCount] = useState<number | null>(null);\n    const [error, setError] = useState<string | null>(null);\n\n    const subtitle = useMemo(() => `Tasks last ${daysBack} days`, [daysBack]);\n\n    useEffect(() => {\n        let isActive = true;\n\n        setError(null);\n        setCount(null);\n\n        getTasksCount(daysBack)\n            .then((total) => {\n                if (isActive) {\n                    setCount(total);\n                }\n            })\n            .catch((err: unknown) => {\n                if (isActive) {\n                    setError(err instanceof Error ? err.message : \"Failed to load tasks count\");\n                }\n            });\n\n        return () => {\n            isActive = false;\n        };\n    }, [daysBack]);\n\n    const title = error ? \"—\" : count === null ? \"…\" : count.toLocaleString();\n\n    return <ActivityGaugeLg title={title} subtitle={subtitle} />;\n};\n"]}

package/dist/index.mjs

@@ -0,0 +1,190 @@
+import { ResponsiveContainer, RadialBarChart, PolarAngleAxis, Legend, Tooltip, RadialBar } from 'recharts';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect } from 'react';
+
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+var ChartLegendContent = ({ payload = [] }) => {
+  if (payload.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-2", children: payload.map((entry, index) => {
+    var _a, _b;
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cx(
+            "size-2 rounded-full bg-utility-gray-300",
+            ((_b = entry.payload) == null ? void 0 : _b.className) ? entry.payload.className.replace("text-", "bg-") : void 0
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-secondary", children: entry.value })
+    ] }, `${(_a = entry.value) != null ? _a : "item"}-${index}`);
+  }) });
+};
+var ChartTooltipContent = ({ active, payload, label, isRadialChart }) => {
+  if (!active || !payload || payload.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-secondary bg-primary px-3 py-2 shadow-sm", children: [
+    label && /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-tertiary", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1 space-y-1", children: payload.map((entry, index) => {
+      var _a, _b, _c;
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cx(
+              "size-2 rounded-full bg-utility-gray-300",
+              ((_b = entry.payload) == null ? void 0 : _b.className) ? entry.payload.className.replace("text-", "bg-") : void 0
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-secondary", children: (_c = entry.name) != null ? _c : isRadialChart ? "Value" : label }),
+        /* @__PURE__ */ jsx("span", { className: "ml-auto font-medium text-primary", children: entry.value })
+      ] }, `${(_a = entry.name) != null ? _a : "value"}-${index}`);
+    }) })
+  ] });
+};
+var radialData = [
+  {
+    name: "Series 3",
+    value: 660,
+    className: "text-utility-brand-400"
+  },
+  {
+    name: "Series 2",
+    value: 774,
+    className: "text-utility-brand-600"
+  },
+  {
+    name: "Series 1",
+    value: 866,
+    className: "text-utility-brand-700"
+  }
+];
+var ActivityGaugeLg = ({
+  title = "1,000",
+  subtitle = "Active users",
+  data = radialData,
+  maxValue = 1e3
+}) => {
+  return /* @__PURE__ */ jsx(ResponsiveContainer, { height: 356, children: /* @__PURE__ */ jsxs(
+    RadialBarChart,
+    {
+      data,
+      accessibilityLayer: true,
+      innerRadius: 84,
+      outerRadius: 154,
+      startAngle: 90,
+      endAngle: 360 + 90,
+      className: "font-medium text-tertiary [&_.recharts-polar-grid]:text-utility-gray-100 [&_.recharts-text]:text-sm",
+      margin: {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+      },
+      children: [
+        /* @__PURE__ */ jsx(PolarAngleAxis, { tick: false, domain: [0, maxValue], type: "number", reversed: true }),
+        /* @__PURE__ */ jsx(Legend, { verticalAlign: "bottom", align: "center", layout: "horizontal", content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
+        /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, { isRadialChart: true }) }),
+        /* @__PURE__ */ jsx(
+          RadialBar,
+          {
+            isAnimationActive: false,
+            dataKey: "value",
+            cornerRadius: 99,
+            fill: "currentColor",
+            background: {
+              className: "fill-utility-gray-100"
+            }
+          }
+        ),
+        (title || subtitle) && /* @__PURE__ */ jsxs("text", { x: "50%", y: "50%", textAnchor: "middle", dominantBaseline: "middle", children: [
+          subtitle && /* @__PURE__ */ jsx(
+            "tspan",
+            {
+              x: "50%",
+              dy: title ? "-1.4em" : "1%",
+              className: cx("fill-current text-tertiary", "text-sm font-medium"),
+              children: subtitle
+            }
+          ),
+          title && /* @__PURE__ */ jsx(
+            "tspan",
+            {
+              x: "50%",
+              dy: subtitle ? "1em" : "1%",
+              className: cx("fill-current text-primary", "text-display-md font-semibold"),
+              children: title
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+};
+
+// src/api/tasks.ts
+var DEFAULT_API_BASE_URL = "https://api.thesqd.com";
+var DEFAULT_MODULE_KEY = "e166f127e73167b6646eeaeff8837566d3c27d4002fb122bc49d4fb06d97d67e";
+var getTasksCount = async (daysBack, options = {}) => {
+  var _a, _b, _c, _d, _e;
+  const resolvedDaysBack = Number.isFinite(daysBack) && daysBack > 0 ? Math.floor(daysBack) : 7;
+  const baseUrl = (_b = (_a = options.baseUrl) != null ? _a : process.env.NEXT_PUBLIC_SQD_API_BASE_URL) != null ? _b : DEFAULT_API_BASE_URL;
+  const moduleKey = (_d = (_c = options.moduleKey) != null ? _c : process.env.NEXT_PUBLIC_SQD_MODULE_KEY) != null ? _d : DEFAULT_MODULE_KEY;
+  const url = new URL("/api/tasks/count", baseUrl);
+  url.searchParams.set("daysBack", String(resolvedDaysBack));
+  const response = await fetch(url.toString(), {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "x-sqd-module-key": moduleKey
+    },
+    cache: "no-store",
+    signal: options.signal
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to fetch tasks count (${response.status})`);
+  }
+  const payload = await response.json();
+  return (_e = payload.count) != null ? _e : 0;
+};
+var TasksActivityGauge = ({ daysBack = 7 }) => {
+  const [count, setCount] = useState(null);
+  const [error, setError] = useState(null);
+  const subtitle = useMemo(() => `Tasks last ${daysBack} days`, [daysBack]);
+  useEffect(() => {
+    let isActive = true;
+    setError(null);
+    setCount(null);
+    getTasksCount(daysBack).then((total) => {
+      if (isActive) {
+        setCount(total);
+      }
+    }).catch((err) => {
+      if (isActive) {
+        setError(err instanceof Error ? err.message : "Failed to load tasks count");
+      }
+    });
+    return () => {
+      isActive = false;
+    };
+  }, [daysBack]);
+  const title = error ? "\u2014" : count === null ? "\u2026" : count.toLocaleString();
+  return /* @__PURE__ */ jsx(ActivityGaugeLg, { title, subtitle });
+};
+
+export { ActivityGaugeLg, TasksActivityGauge, getTasksCount };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/cx.ts","../src/components/application/charts/charts-base.tsx","../src/components/application/charts/activity-gauge-lg.tsx","../src/api/tasks.ts","../src/components/application/charts/tasks-activity-gauge.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"index.mjs","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","\"use client\";\n\nimport type { TooltipProps } from \"recharts\";\n\nimport { cx } from \"@/utils/cx\";\n\ntype LegendPayload = {\n    value?: string;\n    payload?: {\n        className?: string;\n    };\n};\n\ntype LegendProps = {\n    payload?: LegendPayload[];\n};\n\nexport const ChartLegendContent = ({ payload = [] }: LegendProps) => {\n    if (payload.length === 0) {\n        return null;\n    }\n\n    return (\n        <div className=\"flex flex-wrap items-center justify-center gap-x-4 gap-y-2\">\n            {payload.map((entry, index) => (\n                <div key={`${entry.value ?? \"item\"}-${index}`} className=\"flex items-center gap-2\">\n                    <span\n                        className={cx(\n                            \"size-2 rounded-full bg-utility-gray-300\",\n                            entry.payload?.className ? entry.payload.className.replace(\"text-\", \"bg-\") : undefined,\n                        )}\n                    />\n                    <span className=\"text-xs font-medium text-secondary\">{entry.value}</span>\n                </div>\n            ))}\n        </div>\n    );\n};\n\ntype ChartTooltipContentProps = TooltipProps<number, string> & {\n    isRadialChart?: boolean;\n};\n\nexport const ChartTooltipContent = ({ active, payload, label, isRadialChart }: ChartTooltipContentProps) => {\n    if (!active || !payload || payload.length === 0) {\n        return null;\n    }\n\n    return (\n        <div className=\"rounded-lg border border-secondary bg-primary px-3 py-2 shadow-sm\">\n            {label && <div className=\"text-xs font-medium text-tertiary\">{label}</div>}\n            <div className=\"mt-1 space-y-1\">\n                {payload.map((entry, index) => (\n                    <div key={`${entry.name ?? \"value\"}-${index}`} className=\"flex items-center gap-2 text-xs\">\n                        <span\n                            className={cx(\n                                \"size-2 rounded-full bg-utility-gray-300\",\n                                entry.payload?.className ? entry.payload.className.replace(\"text-\", \"bg-\") : undefined,\n                            )}\n                        />\n                        <span className=\"text-secondary\">{entry.name ?? (isRadialChart ? \"Value\" : label)}</span>\n                        <span className=\"ml-auto font-medium text-primary\">{entry.value}</span>\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n};\n","\"use client\";\n\nimport { Legend, PolarAngleAxis, RadialBar, RadialBarChart, ResponsiveContainer, Tooltip } from \"recharts\";\n\nimport { ChartLegendContent, ChartTooltipContent } from \"@/components/application/charts/charts-base\";\nimport { cx } from \"@/utils/cx\";\n\nexport type ActivityGaugeDatum = {\n    name: string;\n    value: number;\n    className?: string;\n};\n\nexport type ActivityGaugeProps = {\n    title?: string;\n    subtitle?: string;\n    data?: ActivityGaugeDatum[];\n    maxValue?: number;\n};\n\nconst radialData: ActivityGaugeDatum[] = [\n    {\n        name: \"Series 3\",\n        value: 660,\n        className: \"text-utility-brand-400\",\n    },\n    {\n        name: \"Series 2\",\n        value: 774,\n        className: \"text-utility-brand-600\",\n    },\n    {\n        name: \"Series 1\",\n        value: 866,\n        className: \"text-utility-brand-700\",\n    },\n];\n\nexport const ActivityGaugeLg = ({\n    title = \"1,000\",\n    subtitle = \"Active users\",\n    data = radialData,\n    maxValue = 1000,\n}: ActivityGaugeProps) => {\n    return (\n        <ResponsiveContainer height={356}>\n            <RadialBarChart\n                data={data}\n                accessibilityLayer\n                innerRadius={84}\n                outerRadius={154}\n                startAngle={90}\n                endAngle={360 + 90}\n                className=\"font-medium text-tertiary [&_.recharts-polar-grid]:text-utility-gray-100 [&_.recharts-text]:text-sm\"\n                margin={{\n                    left: 0,\n                    right: 0,\n                    top: 0,\n                    bottom: 0,\n                }}\n            >\n                <PolarAngleAxis tick={false} domain={[0, maxValue]} type=\"number\" reversed />\n\n                <Legend verticalAlign=\"bottom\" align=\"center\" layout=\"horizontal\" content={<ChartLegendContent />} />\n\n                <Tooltip content={<ChartTooltipContent isRadialChart />} />\n\n                <RadialBar\n                    isAnimationActive={false}\n                    dataKey=\"value\"\n                    cornerRadius={99}\n                    fill=\"currentColor\"\n                    background={{\n                        className: \"fill-utility-gray-100\",\n                    }}\n                />\n\n                {(title || subtitle) && (\n                    <text x=\"50%\" y=\"50%\" textAnchor=\"middle\" dominantBaseline=\"middle\">\n                        {subtitle && (\n                            <tspan\n                                x=\"50%\"\n                                dy={title ? \"-1.4em\" : \"1%\"}\n                                className={cx(\"fill-current text-tertiary\", \"text-sm font-medium\")}\n                            >\n                                {subtitle}\n                            </tspan>\n                        )}\n                        {title && (\n                            <tspan\n                                x=\"50%\"\n                                dy={subtitle ? \"1em\" : \"1%\"}\n                                className={cx(\"fill-current text-primary\", \"text-display-md font-semibold\")}\n                            >\n                                {title}\n                            </tspan>\n                        )}\n                    </text>\n                )}\n            </RadialBarChart>\n        </ResponsiveContainer>\n    );\n};\n","export type TasksCountResponse = {\n    count: number;\n    daysBack: number;\n    since: string;\n};\n\ntype GetTasksCountOptions = {\n    baseUrl?: string;\n    moduleKey?: string;\n    signal?: AbortSignal;\n};\n\nconst DEFAULT_API_BASE_URL = \"https://api.thesqd.com\";\nconst DEFAULT_MODULE_KEY = \"e166f127e73167b6646eeaeff8837566d3c27d4002fb122bc49d4fb06d97d67e\";\n\nexport const getTasksCount = async (daysBack: number, options: GetTasksCountOptions = {}) => {\n    const resolvedDaysBack = Number.isFinite(daysBack) && daysBack > 0 ? Math.floor(daysBack) : 7;\n    const baseUrl = options.baseUrl ?? process.env.NEXT_PUBLIC_SQD_API_BASE_URL ?? DEFAULT_API_BASE_URL;\n    const moduleKey = options.moduleKey ?? process.env.NEXT_PUBLIC_SQD_MODULE_KEY ?? DEFAULT_MODULE_KEY;\n    const url = new URL(\"/api/tasks/count\", baseUrl);\n\n    url.searchParams.set(\"daysBack\", String(resolvedDaysBack));\n\n    const response = await fetch(url.toString(), {\n        method: \"GET\",\n        headers: {\n            \"Content-Type\": \"application/json\",\n            \"x-sqd-module-key\": moduleKey,\n        },\n        cache: \"no-store\",\n        signal: options.signal,\n    });\n\n    if (!response.ok) {\n        throw new Error(`Failed to fetch tasks count (${response.status})`);\n    }\n\n    const payload = (await response.json()) as TasksCountResponse;\n\n    return payload.count ?? 0;\n};\n","\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\n\nimport { getTasksCount } from \"@/api/tasks\";\nimport { ActivityGaugeLg } from \"@/components/application/charts/activity-gauge-lg\";\n\nexport type TasksActivityGaugeProps = {\n    daysBack?: number;\n};\n\nexport const TasksActivityGauge = ({ daysBack = 7 }: TasksActivityGaugeProps) => {\n    const [count, setCount] = useState<number | null>(null);\n    const [error, setError] = useState<string | null>(null);\n\n    const subtitle = useMemo(() => `Tasks last ${daysBack} days`, [daysBack]);\n\n    useEffect(() => {\n        let isActive = true;\n\n        setError(null);\n        setCount(null);\n\n        getTasksCount(daysBack)\n            .then((total) => {\n                if (isActive) {\n                    setCount(total);\n                }\n            })\n            .catch((err: unknown) => {\n                if (isActive) {\n                    setError(err instanceof Error ? err.message : \"Failed to load tasks count\");\n                }\n            });\n\n        return () => {\n            isActive = false;\n        };\n    }, [daysBack]);\n\n    const title = error ? \"—\" : count === null ? \"…\" : count.toLocaleString();\n\n    return <ActivityGaugeLg title={title} subtitle={subtitle} />;\n};\n"]}