@true-tech-team/react-components 0.0.9 → 1.0.0

package/lib/hooks/useMediaQuery/useMediaQuery.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Options for media query hook
+ */
+export interface UseMediaQueryOptions {
+    /**
+     * Default value for SSR or when media query can't be evaluated
+     * @default false
+     */
+    defaultValue?: boolean;
+    /**
+     * Callback when media query match changes
+     */
+    onChange?: (matches: boolean) => void;
+}
+/**
+ * Return type for media query hook
+ */
+export interface UseMediaQueryReturn {
+    /**
+     * Whether the media query currently matches
+     */
+    matches: boolean;
+}
+/**
+ * Hook that reacts to CSS media query changes
+ *
+ * @example
+ * ```tsx
+ * // Responsive breakpoints
+ * const { matches: isMobile } = useMediaQuery('(max-width: 768px)');
+ * const { matches: isTablet } = useMediaQuery('(min-width: 769px) and (max-width: 1024px)');
+ * const { matches: isDesktop } = useMediaQuery('(min-width: 1025px)');
+ *
+ * // User preferences
+ * const { matches: prefersDark } = useMediaQuery('(prefers-color-scheme: dark)');
+ * const { matches: prefersReducedMotion } = useMediaQuery('(prefers-reduced-motion: reduce)');
+ *
+ * // With callback
+ * const { matches } = useMediaQuery('(max-width: 768px)', {
+ *   onChange: (isMobile) => console.log('Mobile:', isMobile),
+ * });
+ * ```
+ */
+export declare function useMediaQuery(query: string, options?: UseMediaQueryOptions): UseMediaQueryReturn;
+export default useMediaQuery;

package/lib/hooks/usePopoverPosition/index.d.ts

@@ -1,2 +1,2 @@
 export { usePopoverPosition } from './usePopoverPosition';
-export type { UsePopoverPositionOptions, UsePopoverPositionReturn, } from './usePopoverPosition';
+export type { UsePopoverPositionOptions, UsePopoverPositionReturn } from './usePopoverPosition';

package/lib/hooks/usePopoverPosition/usePopoverPosition.d.ts

@@ -36,11 +36,11 @@ export interface UsePopoverPositionReturn {
     /**
      * Ref to attach to popover element
      */
-    popoverRef: RefObject<HTMLDivElement>;
+    popoverRef: RefObject<HTMLDivElement | null>;
     /**
      * Ref to attach to trigger element
      */
-    triggerRef: RefObject<HTMLElement>;
+    triggerRef: RefObject<HTMLElement | null>;
     /**
      * Style object to apply to popover
      */

package/lib/hooks/usePrevious/index.d.ts

@@ -0,0 +1 @@
+export { usePrevious, default } from './usePrevious';

package/lib/hooks/usePrevious/usePrevious.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Hook that returns the previous value of a state or prop
+ *
+ * @example
+ * ```tsx
+ * function Counter({ count }: { count: number }) {
+ *   const prevCount = usePrevious(count);
+ *
+ *   return (
+ *     <div>
+ *       Current: {count}, Previous: {prevCount ?? 'N/A'}
+ *       {prevCount !== undefined && count > prevCount && ' (increased)'}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * function UserProfile({ userId }: { userId: string }) {
+ *   const prevUserId = usePrevious(userId);
+ *
+ *   useEffect(() => {
+ *     if (prevUserId && prevUserId !== userId) {
+ *       // User changed, reset form or fetch new data
+ *       resetForm();
+ *     }
+ *   }, [userId, prevUserId]);
+ *
+ *   return <Profile userId={userId} />;
+ * }
+ * ```
+ */
+export declare function usePrevious<T>(value: T): T | undefined;
+export default usePrevious;

package/lib/hooks/useTimeout/index.d.ts

@@ -0,0 +1,2 @@
+export { useTimeout, default } from './useTimeout';
+export type { UseTimeoutOptions, UseTimeoutReturn } from './useTimeout';

package/lib/hooks/useTimeout/useTimeout.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Options for timeout hook
+ */
+export interface UseTimeoutOptions {
+    /**
+     * Callback to execute after delay
+     */
+    callback: () => void;
+    /**
+     * Delay in milliseconds (null to pause/disable)
+     */
+    delay: number | null;
+}
+/**
+ * Return type for timeout hook
+ */
+export interface UseTimeoutReturn {
+    /**
+     * Reset the timeout (restart from beginning)
+     */
+    reset: () => void;
+    /**
+     * Clear the timeout (stop without executing)
+     */
+    clear: () => void;
+}
+/**
+ * Declarative timeout hook with cleanup
+ *
+ * @example
+ * ```tsx
+ * // Auto-hide notification
+ * function Notification({ message, onClose }: Props) {
+ *   useTimeout({
+ *     callback: onClose,
+ *     delay: 5000,
+ *   });
+ *
+ *   return <div>{message}</div>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Conditional timeout
+ * const [showHint, setShowHint] = useState(false);
+ *
+ * useTimeout({
+ *   callback: () => setShowHint(true),
+ *   delay: isNewUser ? 3000 : null, // null disables
+ * });
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With controls
+ * const { reset, clear } = useTimeout({
+ *   callback: () => setIdle(true),
+ *   delay: 30000,
+ * });
+ *
+ * // Reset on user activity
+ * useEffect(() => {
+ *   window.addEventListener('mousemove', reset);
+ *   return () => window.removeEventListener('mousemove', reset);
+ * }, [reset]);
+ * ```
+ */
+export declare function useTimeout(options: UseTimeoutOptions): UseTimeoutReturn;
+export default useTimeout;

package/lib/hooks/useUrlState/index.d.ts

@@ -0,0 +1,2 @@
+export { useUrlState, urlStateSerializers, default } from './useUrlState';
+export type { UseUrlStateOptions, UseUrlStateReturn, UrlStateSerializer } from './useUrlState';

package/lib/hooks/useUrlState/useUrlState.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Serializer/deserializer for URL state values
+ */
+export interface UrlStateSerializer<T> {
+    /**
+     * Serialize value to URL string
+     */
+    serialize: (value: T) => string;
+    /**
+     * Deserialize URL string to value
+     */
+    deserialize: (value: string | null, defaultValue: T) => T;
+}
+/**
+ * Options for URL state hook
+ */
+export interface UseUrlStateOptions<T> {
+    /**
+     * Default value when parameter is not present in URL
+     */
+    defaultValue: T;
+    /**
+     * Custom serializer/deserializer for the value
+     * @default Inferred from defaultValue type
+     */
+    serializer?: UrlStateSerializer<T>;
+    /**
+     * Whether to replace history entry instead of push
+     * @default false
+     */
+    replace?: boolean;
+    /**
+     * Debounce delay for URL updates (ms)
+     * @default 0
+     */
+    debounce?: number;
+}
+/**
+ * Return type for URL state hook
+ */
+export type UseUrlStateReturn<T> = [
+    /** Current value */
+    T,
+    /** Setter function (like useState) */
+    (value: T | ((prev: T) => T)) => void,
+    /** Clear the parameter from URL */
+    () => void
+];
+/**
+ * Built-in serializers for common types
+ */
+export declare const urlStateSerializers: {
+    string: UrlStateSerializer<string>;
+    number: UrlStateSerializer<number>;
+    boolean: UrlStateSerializer<boolean>;
+    json: <T>() => UrlStateSerializer<T>;
+    array: <T extends string>() => UrlStateSerializer<T[]>;
+    numberArray: () => UrlStateSerializer<number[]>;
+};
+/**
+ * Hook that synchronizes React state with URL search parameters
+ *
+ * @example
+ * ```tsx
+ * // Basic string parameter
+ * const [search, setSearch] = useUrlState('q', { defaultValue: '' });
+ *
+ * // Number parameter with debounce
+ * const [page, setPage] = useUrlState('page', {
+ *   defaultValue: 1,
+ *   serializer: urlStateSerializers.number,
+ *   debounce: 300,
+ * });
+ *
+ * // Array parameter
+ * const [tags, setTags] = useUrlState('tags', {
+ *   defaultValue: [],
+ *   serializer: urlStateSerializers.array(),
+ * });
+ * ```
+ */
+export declare function useUrlState<T>(paramName: string, options: UseUrlStateOptions<T>): UseUrlStateReturn<T>;
+export default useUrlState;

package/lib/types/component.types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, CSSProperties } from 'react';
+import { ReactNode, CSSProperties, JSX } from 'react';
 /**
  * Base props that all components should accept
  */

package/lib/utils/index.d.ts

@@ -1,5 +1,5 @@
 export { getThemeValue, getColorValue, setThemeValue, applyThemeValues, pxToRem, gridSpacing, isDarkMode, getThemeMode, } from './theme-utils';
-export { getElementBounds, getViewportSize, getScrollPosition, isElementInViewport, } from './dom';
+export { getElementBounds, getViewportSize, getScrollPosition, isElementInViewport } from './dom';
 export type { ElementBounds, ViewportSize, ScrollPosition } from './dom';
-export { calculatePopoverPosition, findBestPosition, } from './positioning';
+export { calculatePopoverPosition, findBestPosition } from './positioning';
 export type { PopoverPosition, PositionCoordinates, PositionOptions, PopoverSize, PopoverWidth, } from './positioning';

package/lib/utils/validation.d.ts

@@ -73,7 +73,7 @@ export declare const validators: {
      * @param otherValue Value to match against
      * @param message Custom error message
      */
-    matches: (otherValue: any, message?: string) => Validator;
+    matches: (otherValue: unknown, message?: string) => Validator;
     /**
      * Validates file size
      * @param maxSize Maximum size in bytes
@@ -99,14 +99,14 @@ export declare const combineValidators: (...validators: Validator[]) => Validato
  * @param validator Single validator or array of validators
  * @returns ValidationResult object
  */
-export declare const validate: (value: any, validator: Validator | Validator[]) => ValidationResult;
+export declare const validate: (value: unknown, validator: Validator | Validator[]) => ValidationResult;
 /**
  * Validates multiple fields
  * @param values Object with field values
  * @param validators Object with field validators
  * @returns Object with validation results
  */
-export declare const validateForm: (values: Record<string, any>, validators: Record<string, Validator | Validator[]>) => Record<string, ValidationResult>;
+export declare const validateForm: (values: Record<string, unknown>, validators: Record<string, Validator | Validator[]>) => Record<string, ValidationResult>;
 /**
  * Checks if all validation results are valid
  * @param results Validation results object

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-tech-team/react-components",
-  "version": "0.0.9",
+  "version": "1.0.0",
   "description": "React TypeScript component library",
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -23,8 +23,8 @@
     "typecheck": "tsc --noEmit -p tsconfig.lib.json"
   },
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "files": [
     "index.js",
@@ -52,4 +52,3 @@
   ],
   "license": "MIT"
 }
-