@catalystsoftware/ui 1.0.2 → 1.0.5

package/dist/components/catalyst-ui/hooks/use-timeout.tsx

@@ -0,0 +1,21 @@
+// app/hooks/index.ts
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+export function useTimeout(callback: () => void, delay: number | null) {
+  const savedCallback = useRef<() => void>();
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    if (delay !== null) {
+      const id = setTimeout(() => {
+        if (savedCallback.current) {
+          savedCallback.current();
+        }
+      }, delay);
+      return () => clearTimeout(id);
+    }
+  }, [delay]);
+}

package/dist/components/catalyst-ui/hooks/use-timer.tsx

@@ -0,0 +1,209 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+
+
+export type UseTimerReturn = {
+  /** Total elapsed seconds */
+  elapsedTime: number
+  /** Current milliseconds (0-999) */
+  milliseconds: number
+  /** Formatted time strings */
+  formattedTime: {
+    seconds: string
+    milliseconds: string
+    display: string
+  }
+  /** Whether timer is currently running */
+  isRunning: boolean
+  /** Reset timer to 0 */
+  reset: () => void
+  /** Start the timer */
+  start: () => void
+  /** Stop the timer */
+  stop: () => void
+}
+
+export function useTimer({
+  loading = false,
+  onTick,
+  resetOnLoadingChange = true,
+  format = "SS.MS",
+}: UseTimerOptions = {}): UseTimerReturn {
+  const [elapsedTime, setElapsedTime] = useState(0)
+  const [milliseconds, setMilliseconds] = useState(0)
+  const [isRunning, setIsRunning] = useState(false)
+  const startTimeRef = useRef<number>(0)
+  const rafRef = useRef<number | null>(null)
+
+  const reset = useCallback(() => {
+    setElapsedTime(0)
+    setMilliseconds(0)
+    startTimeRef.current = 0
+  }, [])
+
+  const start = useCallback(() => {
+    setIsRunning(true)
+    startTimeRef.current = performance.now()
+  }, [])
+
+  const stop = useCallback(() => {
+    setIsRunning(false)
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!isRunning) return
+
+    const updateTimer = () => {
+      const now = performance.now()
+      const elapsed = now - startTimeRef.current
+
+      const newElapsedTime = Math.floor(elapsed / 1000)
+      const newMilliseconds = Math.floor(elapsed % 1000)
+
+      setElapsedTime(newElapsedTime)
+      setMilliseconds(newMilliseconds)
+
+      rafRef.current = requestAnimationFrame(updateTimer)
+    }
+
+    rafRef.current = requestAnimationFrame(updateTimer)
+
+    return () => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current)
+      }
+    }
+  }, [isRunning])
+
+  useEffect(() => {
+    if (loading) {
+      if (resetOnLoadingChange) {
+        reset()
+      }
+      start()
+    } else {
+      stop()
+    }
+  }, [loading, resetOnLoadingChange, reset, start, stop])
+
+  useEffect(() => {
+    if (onTick) {
+      onTick(elapsedTime, milliseconds)
+    }
+  }, [elapsedTime, milliseconds, onTick])
+
+  const formatTime = useCallback(
+    (totalSeconds: number, ms: number) => {
+      const hours = Math.floor(totalSeconds / 3600)
+      const minutes = Math.floor((totalSeconds % 3600) / 60)
+      const seconds = totalSeconds % 60
+
+      switch (format) {
+        case "HH:MM:SS":
+          return {
+            seconds: seconds.toString().padStart(2, "0"),
+            milliseconds: Math.floor(ms / 10)
+              .toString()
+              .padStart(2, "0"),
+            display: `${hours.toString().padStart(2, "0")}:${minutes
+              .toString()
+              .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`,
+          }
+        case "MM:SS":
+          const totalMinutes = Math.floor(totalSeconds / 60)
+          const remainingSeconds = totalSeconds % 60
+          return {
+            seconds: remainingSeconds.toString().padStart(2, "0"),
+            milliseconds: Math.floor(ms / 10)
+              .toString()
+              .padStart(2, "0"),
+            display: `${totalMinutes
+              .toString()
+              .padStart(2, "0")}:${remainingSeconds
+              .toString()
+              .padStart(2, "0")}`,
+          }
+        case "SS.MS":
+        default:
+          return {
+            seconds: totalSeconds.toString().padStart(2, "0"),
+            milliseconds: Math.floor(ms / 10)
+              .toString()
+              .padStart(2, "0"),
+            display: `${totalSeconds.toString().padStart(2, "0")}.${Math.floor(
+              ms / 10
+            )
+              .toString()
+              .padStart(2, "0")}`,
+          }
+      }
+    },
+    [format]
+  )
+
+  const formattedTime = formatTime(elapsedTime, milliseconds)
+
+  return {
+    elapsedTime,
+    milliseconds,
+    formattedTime,
+    isRunning,
+    reset,
+    start,
+    stop,
+  }
+}
+
+
+
+
+/**export function useTimer({ interval, callback, immediate = false }: TimerOptions) {
+  const [isRunning, setIsRunning] = useState(false);
+  const intervalRef = useRef<NodeJS.Timeout>();
+  const callbackRef = useRef(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  const start = useCallback(() => {
+    if (intervalRef.current) return;
+    
+    setIsRunning(true);
+    if (immediate) callbackRef.current();
+    
+    intervalRef.current = setInterval(() => {
+      callbackRef.current();
+    }, interval);
+  }, [interval, immediate]);
+
+  const stop = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = undefined;
+    }
+    setIsRunning(false);
+  }, []);
+
+  const reset = useCallback(() => {
+    stop();
+    start();
+  }, [stop, start]);
+
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
+
+  return { start, stop, reset, isRunning };
+}
+
+
+
+ 
+ */

package/dist/components/catalyst-ui/hooks/use-toggle.tsx

@@ -0,0 +1,12 @@
+// app/hooks/index.ts
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+export function useToggle(initialValue = false) {
+  const [value, setValue] = useState<boolean>(initialValue);
+
+  const toggle = useCallback(() => setValue(v => !v), []);
+  const setTrue = useCallback(() => setValue(true), []);
+  const setFalse = useCallback(() => setValue(false), []);
+
+  return [value, toggle, setTrue, setFalse] as const;
+}

package/dist/components/catalyst-ui/media/image.tsx

@@ -0,0 +1,13 @@
+import { cn } from "~/components/catalyst-ui";
+
+interface Props
+  extends React.DetailedHTMLProps<
+    React.ImgHTMLAttributes<HTMLImageElement>,
+    HTMLImageElement
+  > {}
+
+export function Image({ src, alt, className, ...props }: Props) {
+  return (
+    <img src={src} alt={alt} className={cn("rounded", className)} {...props} />
+  );
+}