@thesquad-components/sqd-module-template 0.1.2 → 0.1.6

package/dist/index.d.mts

@@ -1,5 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+declare const HomeScreen: () => react_jsx_runtime.JSX.Element;
+
 type ActivityGaugeDatum = {
     name: string;
     value: number;
@@ -31,4 +33,4 @@ type GetTasksCountOptions = {
 };
 declare const getTasksCount: (daysBack: number, options?: GetTasksCountOptions) => Promise<number>;
 
-export { type ActivityGaugeDatum, ActivityGaugeLg, type ActivityGaugeProps, TasksActivityGauge, type TasksActivityGaugeProps, type TasksCountResponse, getTasksCount };
+export { type ActivityGaugeDatum, ActivityGaugeLg, type ActivityGaugeProps, TasksActivityGauge, type TasksActivityGaugeProps, type TasksCountResponse, HomeScreen as default, getTasksCount };

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+declare const HomeScreen: () => react_jsx_runtime.JSX.Element;
+
 type ActivityGaugeDatum = {
     name: string;
     value: number;
@@ -31,4 +33,4 @@ type GetTasksCountOptions = {
 };
 declare const getTasksCount: (daysBack: number, options?: GetTasksCountOptions) => Promise<number>;
 
-export { type ActivityGaugeDatum, ActivityGaugeLg, type ActivityGaugeProps, TasksActivityGauge, type TasksActivityGaugeProps, type TasksCountResponse, getTasksCount };
+export { type ActivityGaugeDatum, ActivityGaugeLg, type ActivityGaugeProps, TasksActivityGauge, type TasksActivityGaugeProps, type TasksCountResponse, HomeScreen as default, getTasksCount };

package/dist/index.js

@@ -1,11 +1,14 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var nextThemes = require('next-themes');
+var icons = require('@untitledui/icons');
 var recharts = require('recharts');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
 var reactAriaComponents = require('react-aria-components');
-var icons = require('@untitledui/icons');
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -38,6 +41,32 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+
+// 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("/module-template/task-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 twMerge = tailwindMerge.extendTailwindMerge({
   extend: {
     theme: {
@@ -53,8 +82,9 @@ var ChartTooltipContent = ({ active, payload, label, isRadialChart }) => {
   if (!active || !payload || payload.length === 0) {
     return null;
   }
+  const showLabel = Boolean(label) && !isRadialChart;
   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 }),
+    showLabel && /* @__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: [
@@ -86,6 +116,8 @@ var ActivityGaugeLg = ({
   data = radialData,
   maxValue = 1e3
 }) => {
+  var _a, _b;
+  const ringClassName = (_b = (_a = data[0]) == null ? void 0 : _a.className) != null ? _b : "text-utility-brand-700";
   return /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { height: 356, children: /* @__PURE__ */ jsxRuntime.jsxs(
     recharts.RadialBarChart,
     {
@@ -112,6 +144,7 @@ var ActivityGaugeLg = ({
             dataKey: "value",
             cornerRadius: 99,
             fill: "currentColor",
+            className: ringClassName,
             background: {
               className: "fill-utility-gray-100"
             }
@@ -142,32 +175,6 @@ var ActivityGaugeLg = ({
   ) });
 };
 
-// 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("/module-template/task-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;
-};
-
 // src/utils/is-react-component.ts
 var isFunctionComponent = (component) => {
   return typeof component === "function";
@@ -396,6 +403,110 @@ var Button = (_a) => {
     })
   );
 };
+var ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, isSelected, slim, size = "sm" }) => {
+  const styles2 = {
+    default: {
+      sm: {
+        root: "h-5 w-9 p-0.5",
+        switch: cx("size-4", isSelected && "translate-x-4")
+      },
+      md: {
+        root: "h-6 w-11 p-0.5",
+        switch: cx("size-5", isSelected && "translate-x-5")
+      }
+    },
+    slim: {
+      sm: {
+        root: "h-4 w-8",
+        switch: cx("size-4", isSelected && "translate-x-4")
+      },
+      md: {
+        root: "h-5 w-10",
+        switch: cx("size-5", isSelected && "translate-x-5")
+      }
+    }
+  };
+  const classes = slim ? styles2.slim[size] : styles2.default[size];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cx(
+        "cursor-pointer rounded-full bg-tertiary outline-focus-ring transition duration-150 ease-linear",
+        isSelected && "bg-brand-solid",
+        isSelected && isHovered && "bg-brand-solid_hover",
+        isDisabled && "cursor-not-allowed bg-disabled",
+        isFocusVisible && "outline-2 outline-offset-2",
+        slim && "ring-1 ring-secondary ring-inset",
+        slim && isSelected && "ring-transparent",
+        classes.root,
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            transition: "transform 0.15s ease-in-out, translate 0.15s ease-in-out, border-color 0.1s linear, background-color 0.1s linear"
+          },
+          className: cx(
+            "rounded-full bg-fg-white shadow-sm",
+            isDisabled && "bg-toggle-button-fg_disabled",
+            slim && "shadow-xs",
+            slim && "border border-toggle-border",
+            slim && isSelected && "border-toggle-slim-border_pressed",
+            slim && isSelected && isHovered && "border-toggle-slim-border_pressed-hover",
+            classes.switch
+          )
+        }
+      )
+    }
+  );
+};
+var Toggle = (_a) => {
+  var _b = _a, { label, hint, className, size = "sm", slim } = _b, ariaSwitchProps = __objRest(_b, ["label", "hint", "className", "size", "slim"]);
+  const sizes = {
+    sm: {
+      root: "gap-2",
+      textWrapper: "",
+      label: "text-sm font-medium",
+      hint: "text-sm"
+    },
+    md: {
+      root: "gap-3",
+      textWrapper: "gap-0.5",
+      label: "text-md font-medium",
+      hint: "text-md"
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Switch,
+    __spreadProps(__spreadValues({}, ariaSwitchProps), {
+      className: (renderProps) => cx(
+        "flex w-max items-start",
+        renderProps.isDisabled && "cursor-not-allowed",
+        sizes[size].root,
+        typeof className === "function" ? className(renderProps) : className
+      ),
+      children: ({ isSelected, isDisabled, isFocusVisible, isHovered }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ToggleBase,
+          {
+            slim,
+            size,
+            isHovered,
+            isDisabled,
+            isFocusVisible,
+            isSelected,
+            className: slim ? "mt-0.5" : ""
+          }
+        ),
+        (label || hint) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("flex flex-col", sizes[size].textWrapper), children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx("text-secondary select-none", sizes[size].label), children: label }),
+          hint && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("text-tertiary", sizes[size].hint), onClick: (event) => event.stopPropagation(), children: hint })
+        ] })
+      ] })
+    })
+  );
+};
 var HintText = (_a) => {
   var _b = _a, { isInvalid, className } = _b, props = __objRest(_b, ["isInvalid", "className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -726,6 +837,7 @@ var Input = (_a) => {
 };
 Input.displayName = "Input";
 var TasksActivityGauge = ({ daysBack = 14, maxValue = 1e3 }) => {
+  const { resolvedTheme, setTheme } = nextThemes.useTheme();
   const [count, setCount] = react.useState(null);
   const [error, setError] = react.useState(null);
   const [isLoading, setIsLoading] = react.useState(false);
@@ -786,6 +898,7 @@ var TasksActivityGauge = ({ daysBack = 14, maxValue = 1e3 }) => {
       setActiveDaysBack(Math.floor(parsed));
     }
   };
+  const isDarkMode = resolvedTheme === "dark";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-end justify-between gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[180px]", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -811,12 +924,29 @@ var TasksActivityGauge = ({ daysBack = 14, maxValue = 1e3 }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(ActivityGaugeLg, { title, subtitle, data: gaugeData, maxValue: computedMax })
+    /* @__PURE__ */ jsxRuntime.jsx(ActivityGaugeLg, { title, subtitle, data: gaugeData, maxValue: computedMax }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed bottom-4 right-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-full border border-secondary bg-primary px-3 py-2 shadow-lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(icons.Sun, { className: "size-4 text-tertiary" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Toggle,
+        {
+          size: "md",
+          "aria-label": "Toggle theme",
+          isSelected: isDarkMode,
+          onChange: (value) => setTheme(value ? "dark" : "light")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(icons.Moon01, { className: "size-4 text-tertiary" })
+    ] }) })
   ] });
 };
+var HomeScreen = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-dvh items-center justify-center px-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsxRuntime.jsx(TasksActivityGauge, { daysBack: 7 }) }) });
+};
 
 exports.ActivityGaugeLg = ActivityGaugeLg;
 exports.TasksActivityGauge = TasksActivityGauge;
+exports.default = HomeScreen;
 exports.getTasksCount = getTasksCount;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map