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

package/dist/index.mjs

@@ -1,8 +1,41 @@
-import { ResponsiveContainer, RadialBarChart, PolarAngleAxis, Legend, Tooltip, RadialBar } from 'recharts';
+import { ResponsiveContainer, RadialBarChart, PolarAngleAxis, Tooltip, RadialBar } from 'recharts';
 import { extendTailwindMerge } from 'tailwind-merge';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useMemo, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, useState, useMemo, useCallback, useEffect, isValidElement, useContext } from 'react';
+import { Link, Button as Button$1, TextField as TextField$1, Label as Label$1, Group, Input as Input$1, Text, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, OverlayArrow } from 'react-aria-components';
+import { HelpCircle, InfoCircle } from '@untitledui/icons';
 
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var twMerge = extendTailwindMerge({
   extend: {
     theme: {
@@ -11,26 +44,9 @@ var twMerge = extendTailwindMerge({
   }
 });
 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}`);
-  }) });
-};
+function sortCx(classes) {
+  return classes;
+}
 var ChartTooltipContent = ({ active, payload, label, isRadialChart }) => {
   if (!active || !payload || payload.length === 0) {
     return null;
@@ -57,18 +73,8 @@ var ChartTooltipContent = ({ active, payload, label, isRadialChart }) => {
 };
 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,
+    name: "Tasks",
+    value: 1e3,
     className: "text-utility-brand-700"
   }
 ];
@@ -96,7 +102,6 @@ var ActivityGaugeLg = ({
       },
       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,
@@ -143,7 +148,7 @@ var getTasksCount = async (daysBack, options = {}) => {
   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);
+  const url = new URL("/module-template/task-count", baseUrl);
   url.searchParams.set("daysBack", String(resolvedDaysBack));
   const response = await fetch(url.toString(), {
     method: "GET",
@@ -160,15 +165,592 @@ var getTasksCount = async (daysBack, options = {}) => {
   const payload = await response.json();
   return (_e = payload.count) != null ? _e : 0;
 };
-var TasksActivityGauge = ({ daysBack = 7 }) => {
+
+// src/utils/is-react-component.ts
+var isFunctionComponent = (component) => {
+  return typeof component === "function";
+};
+var isClassComponent = (component) => {
+  return typeof component === "function" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);
+};
+var isForwardRefComponent = (component) => {
+  return typeof component === "object" && component !== null && component.$$typeof.toString() === "Symbol(react.forward_ref)";
+};
+var isReactComponent = (component) => {
+  return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);
+};
+var styles = sortCx({
+  common: {
+    root: [
+      "group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap outline-brand transition duration-100 ease-linear before:absolute focus-visible:outline-2 focus-visible:outline-offset-2",
+      // When button is used within `InputGroup`
+      "in-data-input-wrapper:shadow-xs in-data-input-wrapper:focus:!z-50 in-data-input-wrapper:in-data-leading:-mr-px in-data-input-wrapper:in-data-leading:rounded-r-none in-data-input-wrapper:in-data-leading:before:rounded-r-none in-data-input-wrapper:in-data-trailing:-ml-px in-data-input-wrapper:in-data-trailing:rounded-l-none in-data-input-wrapper:in-data-trailing:before:rounded-l-none",
+      // Disabled styles
+      "disabled:cursor-not-allowed disabled:text-fg-disabled",
+      // Icon styles
+      "disabled:*:data-icon:text-fg-disabled_subtle",
+      // Same as `icon` but for SSR icons that cannot be passed to the client as functions.
+      "*:data-icon:pointer-events-none *:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:transition-inherit-all"
+    ].join(" "),
+    icon: "pointer-events-none size-5 shrink-0 transition-inherit-all"
+  },
+  sizes: {
+    sm: {
+      root: [
+        "gap-1 rounded-lg px-3 py-2 text-sm font-semibold before:rounded-[7px] data-icon-only:p-2",
+        "in-data-input-wrapper:px-3.5 in-data-input-wrapper:py-2.5 in-data-input-wrapper:data-icon-only:p-2.5"
+      ].join(" "),
+      linkRoot: "gap-1"
+    },
+    md: {
+      root: [
+        "gap-1 rounded-lg px-3.5 py-2.5 text-sm font-semibold before:rounded-[7px] data-icon-only:p-2.5",
+        "in-data-input-wrapper:gap-1.5 in-data-input-wrapper:px-4 in-data-input-wrapper:text-md in-data-input-wrapper:data-icon-only:p-3"
+      ].join(" "),
+      linkRoot: "gap-1"
+    },
+    lg: {
+      root: "gap-1.5 rounded-lg px-4 py-2.5 text-md font-semibold before:rounded-[7px] data-icon-only:p-3",
+      linkRoot: "gap-1.5"
+    },
+    xl: {
+      root: "gap-1.5 rounded-lg px-4.5 py-3 text-md font-semibold before:rounded-[7px] data-icon-only:p-3.5",
+      linkRoot: "gap-1.5"
+    }
+  },
+  colors: {
+    primary: {
+      root: [
+        "bg-brand-solid text-white shadow-xs-skeumorphic ring-1 ring-transparent ring-inset hover:bg-brand-solid_hover data-loading:bg-brand-solid_hover",
+        // Inner border gradient
+        "before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%",
+        // Disabled styles
+        "disabled:bg-disabled disabled:shadow-xs disabled:ring-disabled_subtle",
+        // Icon styles
+        "*:data-icon:text-button-primary-icon hover:*:data-icon:text-button-primary-icon_hover"
+      ].join(" ")
+    },
+    secondary: {
+      root: [
+        "bg-primary text-secondary shadow-xs-skeumorphic ring-1 ring-primary ring-inset hover:bg-primary_hover hover:text-secondary_hover data-loading:bg-primary_hover",
+        // Disabled styles
+        "disabled:shadow-xs disabled:ring-disabled_subtle",
+        // Icon styles
+        "*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover"
+      ].join(" ")
+    },
+    tertiary: {
+      root: [
+        "text-tertiary hover:bg-primary_hover hover:text-tertiary_hover data-loading:bg-primary_hover",
+        // Icon styles
+        "*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover"
+      ].join(" ")
+    },
+    "link-gray": {
+      root: [
+        "justify-normal rounded p-0! text-tertiary hover:text-tertiary_hover",
+        // Inner text underline
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-2 hover:*:data-text:decoration-current",
+        // Icon styles
+        "*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover"
+      ].join(" ")
+    },
+    "link-color": {
+      root: [
+        "justify-normal rounded p-0! text-brand-secondary hover:text-brand-secondary_hover",
+        // Inner text underline
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-2 hover:*:data-text:decoration-current",
+        // Icon styles
+        "*:data-icon:text-fg-brand-secondary_alt hover:*:data-icon:text-fg-brand-secondary_hover"
+      ].join(" ")
+    },
+    "primary-destructive": {
+      root: [
+        "bg-error-solid text-white shadow-xs-skeumorphic ring-1 ring-transparent outline-error ring-inset hover:bg-error-solid_hover data-loading:bg-error-solid_hover",
+        // Inner border gradient
+        "before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%",
+        // Disabled styles
+        "disabled:bg-disabled disabled:shadow-xs disabled:ring-disabled_subtle",
+        // Icon styles
+        "*:data-icon:text-button-destructive-primary-icon hover:*:data-icon:text-button-destructive-primary-icon_hover"
+      ].join(" ")
+    },
+    "secondary-destructive": {
+      root: [
+        "bg-primary text-error-primary shadow-xs-skeumorphic ring-1 ring-error_subtle outline-error ring-inset hover:bg-error-primary hover:text-error-primary_hover data-loading:bg-error-primary",
+        // Disabled styles
+        "disabled:bg-primary disabled:shadow-xs disabled:ring-disabled_subtle",
+        // Icon styles
+        "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
+      ].join(" ")
+    },
+    "tertiary-destructive": {
+      root: [
+        "text-error-primary outline-error hover:bg-error-primary hover:text-error-primary_hover data-loading:bg-error-primary",
+        // Icon styles
+        "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
+      ].join(" ")
+    },
+    "link-destructive": {
+      root: [
+        "justify-normal rounded p-0! text-error-primary outline-error hover:text-error-primary_hover",
+        // Inner text underline
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-2 hover:*:data-text:decoration-current",
+        // Icon styles
+        "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
+      ].join(" ")
+    }
+  }
+});
+var Button = (_a) => {
+  var _b = _a, {
+    size = "sm",
+    color = "primary",
+    children,
+    className,
+    noTextPadding,
+    iconLeading: IconLeading,
+    iconTrailing: IconTrailing,
+    isDisabled: disabled,
+    isLoading: loading,
+    showTextWhileLoading
+  } = _b, otherProps = __objRest(_b, [
+    "size",
+    "color",
+    "children",
+    "className",
+    "noTextPadding",
+    "iconLeading",
+    "iconTrailing",
+    "isDisabled",
+    "isLoading",
+    "showTextWhileLoading"
+  ]);
+  const href = "href" in otherProps ? otherProps.href : void 0;
+  const Component = href ? Link : Button$1;
+  const isIcon = (IconLeading || IconTrailing) && !children;
+  const isLinkType = ["link-gray", "link-color", "link-destructive"].includes(color);
+  noTextPadding = isLinkType || noTextPadding;
+  let props = {};
+  if (href) {
+    props = __spreadProps(__spreadValues({}, otherProps), {
+      href: disabled ? void 0 : href
+    });
+  } else {
+    props = __spreadProps(__spreadValues({}, otherProps), {
+      type: otherProps.type || "button",
+      isPending: loading
+    });
+  }
+  return /* @__PURE__ */ jsxs(
+    Component,
+    __spreadProps(__spreadValues({
+      "data-loading": loading ? true : void 0,
+      "data-icon-only": isIcon ? true : void 0
+    }, props), {
+      isDisabled: disabled,
+      className: cx(
+        styles.common.root,
+        styles.sizes[size].root,
+        styles.colors[color].root,
+        isLinkType && styles.sizes[size].linkRoot,
+        (loading || href && (disabled || loading)) && "pointer-events-none",
+        // If in `loading` state, hide everything except the loading icon (and text if `showTextWhileLoading` is true).
+        loading && (showTextWhileLoading ? "[&>*:not([data-icon=loading]):not([data-text])]:hidden" : "[&>*:not([data-icon=loading])]:invisible"),
+        className
+      ),
+      children: [
+        isValidElement(IconLeading) && IconLeading,
+        isReactComponent(IconLeading) && /* @__PURE__ */ jsx(IconLeading, { "data-icon": "leading", className: styles.common.icon }),
+        loading && /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            fill: "none",
+            "data-icon": "loading",
+            viewBox: "0 0 20 20",
+            className: cx(styles.common.icon, !showTextWhileLoading && "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"),
+            children: [
+              /* @__PURE__ */ jsx("circle", { className: "stroke-current opacity-30", cx: "10", cy: "10", r: "8", fill: "none", strokeWidth: "2" }),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: "origin-center animate-spin stroke-current",
+                  cx: "10",
+                  cy: "10",
+                  r: "8",
+                  fill: "none",
+                  strokeWidth: "2",
+                  strokeDasharray: "12.5 50",
+                  strokeLinecap: "round"
+                }
+              )
+            ]
+          }
+        ),
+        children && /* @__PURE__ */ jsx("span", { "data-text": true, className: cx("transition-inherit-all", !noTextPadding && "px-0.5"), children }),
+        isValidElement(IconTrailing) && IconTrailing,
+        isReactComponent(IconTrailing) && /* @__PURE__ */ jsx(IconTrailing, { "data-icon": "trailing", className: styles.common.icon })
+      ]
+    })
+  );
+};
+var HintText = (_a) => {
+  var _b = _a, { isInvalid, className } = _b, props = __objRest(_b, ["isInvalid", "className"]);
+  return /* @__PURE__ */ jsx(
+    Text,
+    __spreadProps(__spreadValues({}, props), {
+      slot: isInvalid ? "errorMessage" : "description",
+      className: cx(
+        "text-sm text-tertiary",
+        // Invalid state
+        isInvalid && "text-error-primary",
+        "group-invalid:text-error-primary",
+        className
+      )
+    })
+  );
+};
+HintText.displayName = "HintText";
+var Tooltip2 = (_a) => {
+  var _b = _a, {
+    title,
+    description,
+    children,
+    arrow = false,
+    delay = 300,
+    closeDelay = 0,
+    trigger,
+    isDisabled,
+    isOpen,
+    defaultOpen,
+    offset = 6,
+    crossOffset,
+    placement = "top",
+    onOpenChange
+  } = _b, tooltipProps = __objRest(_b, [
+    "title",
+    "description",
+    "children",
+    "arrow",
+    "delay",
+    "closeDelay",
+    "trigger",
+    "isDisabled",
+    "isOpen",
+    "defaultOpen",
+    "offset",
+    "crossOffset",
+    "placement",
+    "onOpenChange"
+  ]);
+  const isTopOrBottomLeft = ["top left", "top end", "bottom left", "bottom end"].includes(placement);
+  const isTopOrBottomRight = ["top right", "top start", "bottom right", "bottom start"].includes(placement);
+  const calculatedCrossOffset = isTopOrBottomLeft ? -12 : isTopOrBottomRight ? 12 : 0;
+  return /* @__PURE__ */ jsxs(TooltipTrigger$1, __spreadProps(__spreadValues({}, { trigger, delay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange }), { children: [
+    children,
+    /* @__PURE__ */ jsx(
+      Tooltip$1,
+      __spreadProps(__spreadValues({}, tooltipProps), {
+        offset,
+        placement,
+        crossOffset: crossOffset != null ? crossOffset : calculatedCrossOffset,
+        className: ({ isEntering, isExiting }) => cx(isEntering && "ease-out animate-in", isExiting && "ease-in animate-out"),
+        children: ({ isEntering, isExiting }) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx(
+              "z-50 flex max-w-xs origin-(--trigger-anchor-point) flex-col items-start gap-1 rounded-lg bg-primary-solid px-3 shadow-lg will-change-transform",
+              description ? "py-3" : "py-2",
+              isEntering && "ease-out animate-in fade-in zoom-in-95 in-placement-left:slide-in-from-right-0.5 in-placement-right:slide-in-from-left-0.5 in-placement-top:slide-in-from-bottom-0.5 in-placement-bottom:slide-in-from-top-0.5",
+              isExiting && "ease-in animate-out fade-out zoom-out-95 in-placement-left:slide-out-to-right-0.5 in-placement-right:slide-out-to-left-0.5 in-placement-top:slide-out-to-bottom-0.5 in-placement-bottom:slide-out-to-top-0.5"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-white", children: title }),
+              description && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-tooltip-supporting-text", children: description }),
+              arrow && /* @__PURE__ */ jsx(OverlayArrow, { children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 100 100",
+                  className: "size-2.5 fill-bg-primary-solid in-placement-left:-rotate-90 in-placement-right:rotate-90 in-placement-top:rotate-0 in-placement-bottom:rotate-180",
+                  children: /* @__PURE__ */ jsx("path", { d: "M0,0 L35.858,35.858 Q50,50 64.142,35.858 L100,0 Z" })
+                }
+              ) })
+            ]
+          }
+        )
+      })
+    )
+  ] }));
+};
+var TooltipTrigger = (_a) => {
+  var _b = _a, { children, className } = _b, buttonProps = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ jsx(Button$1, __spreadProps(__spreadValues({}, buttonProps), { className: (values) => cx("h-max w-max outline-hidden", typeof className === "function" ? className(values) : className), children }));
+};
+var Label = (_a) => {
+  var _b = _a, { isRequired, tooltip, tooltipDescription, className } = _b, props = __objRest(_b, ["isRequired", "tooltip", "tooltipDescription", "className"]);
+  return /* @__PURE__ */ jsxs(
+    Label$1,
+    __spreadProps(__spreadValues({
+      "data-label": "true"
+    }, props), {
+      className: cx("flex cursor-default items-center gap-0.5 text-sm font-medium text-secondary", className),
+      children: [
+        props.children,
+        /* @__PURE__ */ jsx("span", { className: cx("hidden text-brand-tertiary", isRequired && "block", typeof isRequired === "undefined" && "group-required:block"), children: "*" }),
+        tooltip && /* @__PURE__ */ jsx(Tooltip2, { title: tooltip, description: tooltipDescription, placement: "top", children: /* @__PURE__ */ jsx(
+          TooltipTrigger,
+          {
+            isDisabled: false,
+            className: "cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
+            children: /* @__PURE__ */ jsx(HelpCircle, { className: "size-4" })
+          }
+        ) })
+      ]
+    })
+  );
+};
+Label.displayName = "Label";
+var InputBase = (_a) => {
+  var _b = _a, {
+    ref,
+    tooltip,
+    shortcut,
+    groupRef,
+    size = "sm",
+    isInvalid,
+    isDisabled,
+    icon: Icon,
+    placeholder,
+    wrapperClassName,
+    tooltipClassName,
+    inputClassName,
+    iconClassName,
+    isRequired: _isRequired
+  } = _b, inputProps = __objRest(_b, [
+    "ref",
+    "tooltip",
+    "shortcut",
+    "groupRef",
+    "size",
+    "isInvalid",
+    "isDisabled",
+    "icon",
+    "placeholder",
+    "wrapperClassName",
+    "tooltipClassName",
+    "inputClassName",
+    "iconClassName",
+    // Omit this prop to avoid invalid HTML attribute warning
+    "isRequired"
+  ]);
+  const hasTrailingIcon = tooltip || isInvalid;
+  const hasLeadingIcon = Icon;
+  const context = useContext(TextFieldContext);
+  const inputSize = (context == null ? void 0 : context.size) || size;
+  const sizes = sortCx({
+    sm: {
+      root: cx("px-3 py-2", hasTrailingIcon && "pr-9", hasLeadingIcon && "pl-10"),
+      iconLeading: "left-3",
+      iconTrailing: "right-3",
+      shortcut: "pr-2.5"
+    },
+    md: {
+      root: cx("px-3.5 py-2.5", hasTrailingIcon && "pr-9.5", hasLeadingIcon && "pl-10.5"),
+      iconLeading: "left-3.5",
+      iconTrailing: "right-3.5",
+      shortcut: "pr-3"
+    }
+  });
+  return /* @__PURE__ */ jsxs(
+    Group,
+    __spreadProps(__spreadValues({}, { isDisabled, isInvalid }), {
+      ref: groupRef,
+      className: ({ isFocusWithin, isDisabled: isDisabled2, isInvalid: isInvalid2 }) => cx(
+        "relative flex w-full flex-row place-content-center place-items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary transition-shadow duration-100 ease-linear ring-inset",
+        isFocusWithin && !isDisabled2 && "ring-2 ring-brand",
+        // Disabled state styles
+        isDisabled2 && "cursor-not-allowed bg-disabled_subtle ring-disabled",
+        "group-disabled:cursor-not-allowed group-disabled:bg-disabled_subtle group-disabled:ring-disabled",
+        // Invalid state styles
+        isInvalid2 && "ring-error_subtle",
+        "group-invalid:ring-error_subtle",
+        // Invalid state with focus-within styles
+        isInvalid2 && isFocusWithin && "ring-2 ring-error",
+        isFocusWithin && "group-invalid:ring-2 group-invalid:ring-error",
+        context == null ? void 0 : context.wrapperClassName,
+        wrapperClassName
+      ),
+      children: [
+        Icon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: cx(
+              "pointer-events-none absolute size-5 text-fg-quaternary",
+              isDisabled && "text-fg-disabled",
+              sizes[inputSize].iconLeading,
+              context == null ? void 0 : context.iconClassName,
+              iconClassName
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input$1,
+          __spreadProps(__spreadValues({}, inputProps), {
+            ref,
+            placeholder,
+            className: cx(
+              "m-0 w-full bg-transparent text-md text-primary ring-0 outline-hidden placeholder:text-placeholder autofill:rounded-lg autofill:text-primary",
+              isDisabled && "cursor-not-allowed text-disabled",
+              sizes[inputSize].root,
+              context == null ? void 0 : context.inputClassName,
+              inputClassName
+            )
+          })
+        ),
+        tooltip && !isInvalid && /* @__PURE__ */ jsx(Tooltip2, { title: tooltip, placement: "top", children: /* @__PURE__ */ jsx(
+          TooltipTrigger,
+          {
+            className: cx(
+              "absolute cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
+              sizes[inputSize].iconTrailing,
+              context == null ? void 0 : context.tooltipClassName,
+              tooltipClassName
+            ),
+            children: /* @__PURE__ */ jsx(HelpCircle, { className: "size-4" })
+          }
+        ) }),
+        isInvalid && /* @__PURE__ */ jsx(
+          InfoCircle,
+          {
+            className: cx(
+              "pointer-events-none absolute size-4 text-fg-error-secondary",
+              sizes[inputSize].iconTrailing,
+              context == null ? void 0 : context.tooltipClassName,
+              tooltipClassName
+            )
+          }
+        ),
+        shortcut && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              "pointer-events-none absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8",
+              sizes[inputSize].shortcut
+            ),
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cx(
+                  "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
+                  isDisabled && "bg-transparent text-disabled"
+                ),
+                "aria-hidden": "true",
+                children: typeof shortcut === "string" ? shortcut : "\u2318K"
+              }
+            )
+          }
+        )
+      ]
+    })
+  );
+};
+InputBase.displayName = "InputBase";
+var TextFieldContext = createContext({});
+var TextField = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(TextFieldContext.Provider, { value: props, children: /* @__PURE__ */ jsx(
+    TextField$1,
+    __spreadProps(__spreadValues({}, props), {
+      "data-input-wrapper": true,
+      className: (state) => cx("group flex h-max w-full flex-col items-start justify-start gap-1.5", typeof className === "function" ? className(state) : className)
+    })
+  ) });
+};
+TextField.displayName = "TextField";
+var Input = (_a) => {
+  var _b = _a, {
+    size = "sm",
+    placeholder,
+    icon: Icon,
+    label,
+    hint,
+    shortcut,
+    hideRequiredIndicator,
+    className,
+    ref,
+    groupRef,
+    tooltip,
+    iconClassName,
+    inputClassName,
+    wrapperClassName,
+    tooltipClassName
+  } = _b, props = __objRest(_b, [
+    "size",
+    "placeholder",
+    "icon",
+    "label",
+    "hint",
+    "shortcut",
+    "hideRequiredIndicator",
+    "className",
+    "ref",
+    "groupRef",
+    "tooltip",
+    "iconClassName",
+    "inputClassName",
+    "wrapperClassName",
+    "tooltipClassName"
+  ]);
+  return /* @__PURE__ */ jsx(TextField, __spreadProps(__spreadValues({ "aria-label": !label ? placeholder : void 0 }, props), { className, children: ({ isRequired, isInvalid }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    label && /* @__PURE__ */ jsx(Label, { isRequired: hideRequiredIndicator ? !hideRequiredIndicator : isRequired, children: label }),
+    /* @__PURE__ */ jsx(
+      InputBase,
+      __spreadValues({}, {
+        ref,
+        groupRef,
+        size,
+        placeholder,
+        icon: Icon,
+        shortcut,
+        iconClassName,
+        inputClassName,
+        wrapperClassName,
+        tooltipClassName,
+        tooltip
+      })
+    ),
+    hint && /* @__PURE__ */ jsx(HintText, { isInvalid, children: hint })
+  ] }) }));
+};
+Input.displayName = "Input";
+var TasksActivityGauge = ({ daysBack = 14, maxValue = 1e3 }) => {
   const [count, setCount] = useState(null);
   const [error, setError] = useState(null);
-  const subtitle = useMemo(() => `Tasks last ${daysBack} days`, [daysBack]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [daysBackValue, setDaysBackValue] = useState(daysBack.toString());
+  const [activeDaysBack, setActiveDaysBack] = useState(daysBack);
+  const subtitle = useMemo(() => `Tasks last ${activeDaysBack} days`, [activeDaysBack]);
+  const fetchCount = useCallback(
+    async (value) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const total = await getTasksCount(value);
+        setCount(total);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to load tasks count");
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    []
+  );
   useEffect(() => {
     let isActive = true;
+    setIsLoading(true);
     setError(null);
     setCount(null);
-    getTasksCount(daysBack).then((total) => {
+    getTasksCount(activeDaysBack).then((total) => {
       if (isActive) {
         setCount(total);
       }
@@ -176,13 +758,59 @@ var TasksActivityGauge = ({ daysBack = 7 }) => {
       if (isActive) {
         setError(err instanceof Error ? err.message : "Failed to load tasks count");
       }
+    }).finally(() => {
+      if (isActive) {
+        setIsLoading(false);
+      }
     });
     return () => {
       isActive = false;
     };
-  }, [daysBack]);
+  }, [activeDaysBack]);
   const title = error ? "\u2014" : count === null ? "\u2026" : count.toLocaleString();
-  return /* @__PURE__ */ jsx(ActivityGaugeLg, { title, subtitle });
+  const gaugeValue = count != null ? count : 0;
+  const computedMax = Math.max(maxValue, gaugeValue, 1);
+  const gaugeData = [
+    {
+      name: "Tasks",
+      value: gaugeValue,
+      className: "text-utility-brand-700"
+    }
+  ];
+  const handleDaysBackChange = (value) => {
+    setDaysBackValue(value);
+    const parsed = Number(value);
+    if (Number.isFinite(parsed) && parsed > 0) {
+      setActiveDaysBack(Math.floor(parsed));
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-[180px]", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          label: "Days back",
+          type: "number",
+          value: daysBackValue,
+          onChange: handleDaysBackChange,
+          size: "sm",
+          placeholder: "14"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          color: "primary",
+          size: "sm",
+          isLoading,
+          showTextWhileLoading: true,
+          onClick: () => fetchCount(activeDaysBack),
+          children: "Refresh"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(ActivityGaugeLg, { title, subtitle, data: gaugeData, maxValue: computedMax })
+  ] });
 };
 
 export { ActivityGaugeLg, TasksActivityGauge, getTasksCount };