@teja-app/ui 0.0.13 → 0.0.15

package/dist/theme/index.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useMemo, useState, useEffect, useRef, useCallback, useContext, createContext, forwardRef, useId as useId$1, useLayoutEffect, Fragment as Fragment$1, isValidElement, cloneElement, createElement, useSyncExternalStore } from "react";
+import { useInstrumentedClick } from "@teja-app/ui/instrumentation";
 import * as ReactDOM from "react-dom";
 import { flushSync, createPortal } from "react-dom";
 const PRIMARY_OPTIONS = {
@@ -656,9 +657,17 @@ const Button$1 = forwardRef(function Button2({
   type = "button",
   disabled,
   testId,
+  telemetryId,
+  onClick,
   ...rest
 }, ref) {
   const dims = SIZE_DIMS$2[size2];
+  const instrumentedClick = useInstrumentedClick(onClick, {
+    telemetryId,
+    testId,
+    kind: "Button",
+    variant
+  });
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -666,6 +675,7 @@ const Button$1 = forwardRef(function Button2({
       type,
       disabled,
       "data-testid": testId,
+      onClick: instrumentedClick,
       style: {
         height: dims.h,
         padding: dims.pad,
@@ -767,6 +777,61 @@ function Badge({
     children
   ] });
 }
+const TONE_COLORS = {
+  waiting: { bg: "var(--ai-soft)", fg: "var(--ai)", dot: "var(--ai)" },
+  soon: { bg: "var(--warning-soft)", fg: "var(--warning)", dot: "var(--warning)" },
+  ready: { bg: "var(--success-soft)", fg: "var(--success)", dot: "var(--success)" }
+};
+function CountdownPill({
+  tone,
+  label,
+  icon = "clock",
+  dot,
+  testId,
+  "data-testid": dataTestId
+}) {
+  const showDot = dot ?? tone !== "ready";
+  return /* @__PURE__ */ jsxs(
+    Badge,
+    {
+      tone: "neutral",
+      colors: TONE_COLORS[tone],
+      dot: showDot,
+      testId,
+      "data-testid": dataTestId,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: icon, size: 12 }),
+        /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--font-mono)", fontWeight: 600 }, children: label })
+      ]
+    }
+  );
+}
+const DAY_S = 86400;
+const HOUR_S = 3600;
+const MIN_S = 60;
+function countdownParts(startMs, nowMs, soonThresholdSeconds = 120) {
+  const deltaMs = startMs - nowMs;
+  if (deltaMs <= 0) {
+    return {
+      tone: "ready",
+      days: 0,
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+      unit: "now",
+      clock: "00:00"
+    };
+  }
+  const total = Math.floor(deltaMs / 1e3);
+  const days = Math.floor(total / DAY_S);
+  const hours = Math.floor(total % DAY_S / HOUR_S);
+  const minutes = Math.floor(total % HOUR_S / MIN_S);
+  const seconds = total % MIN_S;
+  const unit = days > 0 ? "days" : hours > 0 ? "hours" : "minutes";
+  const clock = `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+  const tone = total <= soonThresholdSeconds ? "soon" : "waiting";
+  return { tone, days, hours, minutes, seconds, unit, clock };
+}
 const Card = forwardRef(function Card2({
   padding = 20,
   children,
@@ -16505,8 +16570,14 @@ const Switch = forwardRef(function Switch2({ on = false, onChange, size: size2 =
 });
 const SIZE_PX$1 = { sm: 22, md: 26, lg: 32 };
 const IconButton = forwardRef(
-  function IconButton2({ children, size: size2 = "md", tone = "default", style, testId, type = "button", ...rest }, ref) {
+  function IconButton2({ children, size: size2 = "md", tone = "default", style, testId, telemetryId, onClick, type = "button", ...rest }, ref) {
     const dim = SIZE_PX$1[size2];
+    const instrumentedClick = useInstrumentedClick(onClick, {
+      telemetryId,
+      testId,
+      kind: "IconButton",
+      variant: tone
+    });
     const merged = {
       width: dim,
       height: dim,
@@ -16530,6 +16601,7 @@ const IconButton = forwardRef(
         type,
         "data-testid": testId,
         "data-tone": tone,
+        onClick: instrumentedClick,
         style: merged,
         ...rest,
         children
@@ -17222,8 +17294,14 @@ function AIBadge({
   ] });
 }
 const AIComposeButton = forwardRef(
-  function AIComposeButton2({ size: size2 = "md", children = "Compose with AI", style, testId, type = "button", ...rest }, ref) {
+  function AIComposeButton2({ size: size2 = "md", children = "Compose with AI", style, testId, telemetryId, onClick, type = "button", ...rest }, ref) {
     const h2 = size2 === "sm" ? 28 : 32;
+    const instrumentedClick = useInstrumentedClick(onClick, {
+      telemetryId,
+      testId,
+      kind: "AIComposeButton",
+      variant: size2
+    });
     const fz = size2 === "sm" ? 12 : 13;
     const merged = {
       height: h2,
@@ -17248,6 +17326,7 @@ const AIComposeButton = forwardRef(
         type,
         "data-testid": testId,
         "data-size": size2,
+        onClick: instrumentedClick,
         style: merged,
         ...rest,
         children: [
@@ -19069,6 +19148,7 @@ export {
   Chip,
   Combobox,
   ConfirmDialog,
+  CountdownPill,
   CountryPicker,
   DEFAULT_LANG_OPTIONS,
   DENSITY_OPTIONS,
@@ -19161,6 +19241,7 @@ export {
   ViewToggle,
   applyTheme,
   controlBoxStyle,
+  countdownParts,
   ensureAIStyles,
   ensureSidebarNavStyles,
   ensureSkeletonStyles,