@flowtomic/logic 0.1.0 → 0.1.1

package/dist/hooks/useStatCard/useStatCard.js

@@ -8,11 +8,11 @@
  *
  * @example
  * ```tsx
+ * // Cálculo automático do delta a partir de lastMonth
  * function MyCustomStatCard() {
  *   const { formattedValue, trend, getCardProps } = useStatCard({
  *     value: 122380,
- *     delta: 15.1,
- *     lastMonth: 105922,
+ *     lastMonth: 105922, // delta será calculado automaticamente: +15.5%
  *   })
  *
  *   return (
@@ -22,23 +22,48 @@
  *     </div>
  *   )
  * }
+ *
+ * // Ou forneça delta explicitamente para casos especiais
+ * function CustomDeltaCard() {
+ *   const { formattedValue, trend } = useStatCard({
+ *     value: 122380,
+ *     delta: 15.1, // delta explícito tem prioridade
+ *     lastMonth: 105922,
+ *   })
+ * }
  * ```
  */
 import { useCallback, useMemo } from "react";
 /**
- * Formata um número seguindo padrões comuns
- * - Valores >= 1.000.000: formata como "X.XM"
- * - Valores >= 1.000: formata com separador de milhares
- * - Valores < 1.000: retorna como string
+ * Formata um número seguindo padrões comuns com suporte a locale
+ * - Valores >= 1.000.000: formata como "X.XM" (respeitando locale para decimais)
+ * - Valores >= 1.000: formata com separador de milhares conforme locale
+ * - Valores < 1.000: retorna formatado conforme locale
  */
-function formatNumberDefault(n) {
+function formatNumberDefault(n, locale = "pt-BR") {
     if (n >= 1_000_000) {
-        return `${(n / 1_000_000).toFixed(1)}M`;
+        const formatter = new Intl.NumberFormat(locale, {
+            minimumFractionDigits: 1,
+            maximumFractionDigits: 1,
+        });
+        return `${formatter.format(n / 1_000_000)}M`;
     }
     if (n >= 1_000) {
-        return n.toLocaleString();
+        return new Intl.NumberFormat(locale).format(n);
     }
-    return n.toString();
+    return new Intl.NumberFormat(locale).format(n);
+}
+/**
+ * Formata um número como moeda usando locale
+ */
+function formatCurrency(n, locale = "pt-BR", currency = "BRL", currencyDisplay = "symbol") {
+    return new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency,
+        currencyDisplay,
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+    }).format(n);
 }
 /**
  * Hook Headless UI para StatCard
@@ -48,11 +73,11 @@ function formatNumberDefault(n) {
  *
  * @example
  * ```tsx
+ * // Cálculo automático do delta a partir de lastMonth
  * function MyCustomStatCard() {
  *   const { formattedValue, trend, getCardProps } = useStatCard({
  *     value: 122380,
- *     delta: 15.1,
- *     lastMonth: 105922,
+ *     lastMonth: 105922, // delta será calculado automaticamente: +15.5%
  *   })
  *
  *   return (
@@ -62,10 +87,32 @@ function formatNumberDefault(n) {
  *     </div>
  *   )
  * }
+ *
+ * // Ou forneça delta explicitamente para casos especiais
+ * function CustomDeltaCard() {
+ *   const { formattedValue, trend } = useStatCard({
+ *     value: 122380,
+ *     delta: 15.1, // delta explícito tem prioridade
+ *     lastMonth: 105922,
+ *   })
+ * }
  * ```
  */
 export function useStatCard(data) {
-    const { value, delta = 0, lastMonth, prefix = "", suffix = "", format, lastFormat, positive: explicitPositive, } = data;
+    const { value, delta: explicitDelta, lastMonth, prefix = "", suffix = "", locale = "pt-BR", currency, currencyDisplay = "symbol", format, lastFormat, positive: explicitPositive, } = data;
+    // Calcula delta automaticamente se não fornecido mas lastMonth estiver disponível
+    const delta = useMemo(() => {
+        // Se delta foi fornecido explicitamente, usa ele (prioridade)
+        if (explicitDelta !== undefined) {
+            return explicitDelta;
+        }
+        // Se lastMonth foi fornecido, calcula o delta automaticamente
+        if (lastMonth !== undefined && lastMonth !== 0) {
+            return ((Number(value) - Number(lastMonth)) / Number(lastMonth)) * 100;
+        }
+        // Caso contrário, retorna 0
+        return 0;
+    }, [value, lastMonth, explicitDelta]);
     // Calcula se a tendência é positiva
     const isPositive = useMemo(() => {
         if (explicitPositive !== undefined) {
@@ -89,10 +136,16 @@ export function useStatCard(data) {
     // Formata o valor principal
     const formattedValue = useMemo(() => {
         if (format) {
-            return format(value);
+            return format(Number(value));
+        }
+        const numValue = Number(value);
+        if (currency) {
+            // Se currency está definido, usa formatação de moeda (ignora prefix)
+            return (formatCurrency(numValue, locale, currency, currencyDisplay) + (suffix ? ` ${suffix}` : ""));
         }
-        return prefix + formatNumberDefault(value) + suffix;
-    }, [value, prefix, suffix, format]);
+        // Caso contrário, usa formatação numérica padrão com prefix/suffix
+        return prefix + formatNumberDefault(numValue, locale) + suffix;
+    }, [value, prefix, suffix, locale, currency, currencyDisplay, format]);
     // Formata o valor do mês anterior
     const formattedLastMonth = useMemo(() => {
         if (!lastMonth)
@@ -100,8 +153,13 @@ export function useStatCard(data) {
         if (lastFormat) {
             return lastFormat(lastMonth);
         }
-        return prefix + formatNumberDefault(lastMonth) + suffix;
-    }, [lastMonth, prefix, suffix, lastFormat]);
+        if (currency) {
+            // Se currency está definido, usa formatação de moeda (ignora prefix)
+            return formatCurrency(lastMonth, locale, currency, currencyDisplay);
+        }
+        // Caso contrário, usa formatação numérica padrão com prefix/suffix
+        return prefix + formatNumberDefault(lastMonth, locale) + suffix;
+    }, [lastMonth, prefix, suffix, locale, currency, currencyDisplay, lastFormat]);
     // Props helper para o card
     const getCardProps = useCallback((props = {}) => {
         return {
@@ -113,8 +171,11 @@ export function useStatCard(data) {
     }, [formattedValue]);
     // Função utilitária de formatação
     const formatNumber = useCallback((n) => {
-        return formatNumberDefault(n);
-    }, []);
+        if (currency) {
+            return formatCurrency(n, locale, currency, currencyDisplay);
+        }
+        return formatNumberDefault(n, locale);
+    }, [locale, currency, currencyDisplay]);
     return {
         formattedValue,
         formattedLastMonth,

package/dist/hooks/useTimeTracker/index.d.ts

@@ -0,0 +1,3 @@
+export type { UseTimeTrackerOptions, UseTimeTrackerReturn } from "./useTimeTracker";
+export { useTimeTracker } from "./useTimeTracker";
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/useTimeTracker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useTimeTracker/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/hooks/useTimeTracker/index.js

@@ -0,0 +1 @@
+export { useTimeTracker } from "./useTimeTracker";

package/dist/hooks/useTimeTracker/useTimeTracker.d.ts

@@ -0,0 +1,106 @@
+/**
+ * useTimeTracker - Headless UI Hook
+ *
+ * Fornece apenas: lógica, estado, processamento e API
+ * NÃO fornece: markup, styles ou implementações pré-construídas
+ *
+ * Padrão Headless UI: você controla o markup e styles
+ *
+ * @example
+ * ```tsx
+ * function MyTimer() {
+ *   const { time, formattedTime, isRunning, start, pause, stop, reset } = useTimeTracker({
+ *     initialTime: 0,
+ *   })
+ *
+ *   return (
+ *     <div>
+ *       <span>{formattedTime}</span>
+ *       <button onClick={start}>Start</button>
+ *       <button onClick={pause}>Pause</button>
+ *       <button onClick={stop}>Stop</button>
+ *       <button onClick={reset}>Reset</button>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export interface UseTimeTrackerOptions {
+    /**
+     * Tempo inicial em segundos
+     * @default 0
+     */
+    initialTime?: number;
+    /**
+     * Callback quando o timer é pausado
+     */
+    onPause?: (time: number) => void;
+    /**
+     * Callback quando o timer é parado
+     */
+    onStop?: (time: number) => void;
+    /**
+     * Callback quando o timer é iniciado
+     */
+    onStart?: (time: number) => void;
+    /**
+     * Callback quando o timer é retomado
+     */
+    onResume?: (time: number) => void;
+    /**
+     * Callback quando o timer é resetado
+     */
+    onReset?: () => void;
+    /**
+     * Formato de tempo customizado
+     * @default "HH:mm:ss"
+     */
+    format?: "HH:mm:ss" | "mm:ss" | "ss" | ((seconds: number) => string);
+}
+export interface UseTimeTrackerReturn {
+    /**
+     * Tempo atual em segundos
+     */
+    time: number;
+    /**
+     * Tempo formatado como string (HH:mm:ss por padrão)
+     */
+    formattedTime: string;
+    /**
+     * Se o timer está rodando
+     */
+    isRunning: boolean;
+    /**
+     * Se o timer está pausado
+     */
+    isPaused: boolean;
+    /**
+     * Se o timer está parado (não iniciado ou resetado)
+     */
+    isStopped: boolean;
+    /**
+     * Inicia o timer
+     */
+    start: () => void;
+    /**
+     * Pausa o timer
+     */
+    pause: () => void;
+    /**
+     * Para o timer (pausa e mantém o tempo)
+     */
+    stop: () => void;
+    /**
+     * Retoma o timer após pausa
+     */
+    resume: () => void;
+    /**
+     * Reseta o timer para o tempo inicial
+     */
+    reset: () => void;
+}
+/**
+ * Hook headless para gerenciar timer
+ */
+export declare function useTimeTracker(options?: UseTimeTrackerOptions): UseTimeTrackerReturn;
+//# sourceMappingURL=useTimeTracker.d.ts.map

package/dist/hooks/useTimeTracker/useTimeTracker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimeTracker.d.ts","sourceRoot":"","sources":["../../../src/hooks/useTimeTracker/useTimeTracker.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAIH,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;CACtE;AAED,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;IAElB;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;IAElB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,GAAE,qBAA0B,GAAG,oBAAoB,CAyIxF"}

package/dist/hooks/useTimeTracker/useTimeTracker.js

@@ -0,0 +1,143 @@
+/**
+ * useTimeTracker - Headless UI Hook
+ *
+ * Fornece apenas: lógica, estado, processamento e API
+ * NÃO fornece: markup, styles ou implementações pré-construídas
+ *
+ * Padrão Headless UI: você controla o markup e styles
+ *
+ * @example
+ * ```tsx
+ * function MyTimer() {
+ *   const { time, formattedTime, isRunning, start, pause, stop, reset } = useTimeTracker({
+ *     initialTime: 0,
+ *   })
+ *
+ *   return (
+ *     <div>
+ *       <span>{formattedTime}</span>
+ *       <button onClick={start}>Start</button>
+ *       <button onClick={pause}>Pause</button>
+ *       <button onClick={stop}>Stop</button>
+ *       <button onClick={reset}>Reset</button>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+/**
+ * Hook headless para gerenciar timer
+ */
+export function useTimeTracker(options = {}) {
+    const { initialTime = 0, onPause, onStop, onStart, onResume, onReset, format = "HH:mm:ss", } = options;
+    const [time, setTime] = useState(initialTime);
+    const [isRunning, setIsRunning] = useState(false);
+    const [isPaused, setIsPaused] = useState(false);
+    const intervalRef = useRef(null);
+    const startTimeRef = useRef(null);
+    const pausedTimeRef = useRef(0);
+    // Limpar intervalo ao desmontar
+    useEffect(() => {
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+        };
+    }, []);
+    // Formatar tempo
+    const formatTime = useCallback((seconds) => {
+        if (typeof format === "function") {
+            return format(seconds);
+        }
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        const secs = seconds % 60;
+        switch (format) {
+            case "HH:mm:ss":
+                return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+            case "mm:ss":
+                return `${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+            case "ss":
+                return String(seconds);
+            default:
+                return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+        }
+    }, [format]);
+    const formattedTime = formatTime(time);
+    // Limpar intervalo
+    const clearTimerInterval = useCallback(() => {
+        if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+        }
+    }, []);
+    // Iniciar timer
+    const start = useCallback(() => {
+        if (isRunning)
+            return;
+        clearTimerInterval();
+        // Se estava pausado, continuar de onde parou
+        const startFrom = isPaused ? time : initialTime;
+        setTime(startFrom);
+        setIsRunning(true);
+        setIsPaused(false);
+        pausedTimeRef.current = startFrom;
+        startTimeRef.current = Date.now() - startFrom * 1000;
+        intervalRef.current = setInterval(() => {
+            const elapsed = Math.floor((Date.now() - (startTimeRef.current || 0)) / 1000);
+            setTime(elapsed);
+        }, 100);
+        if (!isPaused) {
+            onStart?.(startFrom);
+        }
+        else {
+            onResume?.(startFrom);
+        }
+    }, [isRunning, isPaused, time, initialTime, onStart, onResume, clearTimerInterval]);
+    // Pausar timer
+    const pause = useCallback(() => {
+        if (!isRunning)
+            return;
+        clearTimerInterval();
+        setIsRunning(false);
+        setIsPaused(true);
+        onPause?.(time);
+    }, [isRunning, time, onPause, clearTimerInterval]);
+    // Parar timer
+    const stop = useCallback(() => {
+        clearTimerInterval();
+        setIsRunning(false);
+        setIsPaused(false);
+        onStop?.(time);
+    }, [time, onStop, clearTimerInterval]);
+    // Retomar timer
+    const resume = useCallback(() => {
+        if (!isPaused)
+            return;
+        start();
+    }, [isPaused, start]);
+    // Resetar timer
+    const reset = useCallback(() => {
+        clearTimerInterval();
+        setTime(initialTime);
+        setIsRunning(false);
+        setIsPaused(false);
+        pausedTimeRef.current = 0;
+        startTimeRef.current = null;
+        onReset?.();
+    }, [initialTime, onReset, clearTimerInterval]);
+    return {
+        time,
+        formattedTime,
+        isRunning,
+        isPaused,
+        isStopped: !isRunning && !isPaused,
+        start,
+        pause,
+        stop,
+        resume,
+        reset,
+    };
+}

package/dist/index.d.ts

@@ -4,9 +4,14 @@
  * Biblioteca de hooks headless e lógica reutilizável
  * para projetos React/TypeScript
  */
+export * from "./hooks/useAnimatedIndicator";
+export * from "./hooks/useGenealogy";
+export * from "./hooks/useMoblile";
+export * from "./hooks/useProjectProgress";
+export * from "./hooks/useProjectStats";
 export * from "./hooks/useReactTableBack";
 export * from "./hooks/useReactTableFront";
-export * from "./hooks/useStatCard/useStatCard";
 export * from "./hooks/useResizable";
-export * from "./hooks/useMoblile";
+export * from "./hooks/useStatCard";
+export * from "./hooks/useTimeTracker";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,iCAAiC,CAAC;AAChD,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AAErC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowtomic/logic",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Hooks headless e lógica reutilizável para React",
   "type": "module",
   "main": "./dist/index.js",
@@ -27,7 +27,7 @@
   "license": "MIT",
   "scripts": {
     "dev": "bun run --watch src/index.ts",
-    "build": "bun build ./src/index.ts --outdir ./dist --target browser --format esm --minify",
+    "build": "tsc --emitDeclarationOnly && bun build ./src/index.ts --outdir ./dist --target browser --format esm --minify",
     "type-check": "tsc --noEmit",
     "clean": "rm -rf dist",
     "lint": "biome check .",