@umituz/web-design-system 4.0.0 → 4.0.2

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "private": false,
+  "type": "module",
   "description": "Web Design System - Tailwind v4 authored, precompiled CSS shipped. Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/infrastructure/utils/cn.util.ts

@@ -68,7 +68,7 @@ function generateCacheKey(inputs: ClassValue[]): string {
         // Handle objects (like conditional objects in clsx)
         return JSON.stringify(
           Object.entries(input)
-            .filter(([_, value]) => Boolean(value))
+            .filter(([, value]) => Boolean(value))
             .map(([key]) => key)
             .sort()
         );

package/src/presentation/hooks/useClickOutside.ts

@@ -13,7 +13,9 @@ export function useClickOutside<T extends HTMLElement>(
   // Use a ref to keep the latest callback without retriggering the effect
   // on every render — callers commonly pass inline functions.
   const callbackRef = useRef(callback);
-  callbackRef.current = callback;
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
 
   useEffect(() => {
     if (!enabled) return;

package/src/presentation/hooks/useDebounce.ts

@@ -34,7 +34,7 @@ export function useDebounce<T>(value: T, delay: number = TIMING.DEBOUNCE_DEFAULT
  * useThrottle Hook
  * @description Throttle a function to limit execution rate
  */
-export function useThrottle<T extends (...args: any[]) => any>(
+export function useThrottle<T extends (...args: unknown[]) => unknown>(
   func: T,
   delay: number = TIMING.THROTTLE_DEFAULT_MS
 ): T {

package/src/presentation/hooks/useLocalStorage.ts

@@ -3,7 +3,7 @@
  * @description LocalStorage state management with safe error surfacing
  */
 
-import { useCallback, useState, useRef } from 'react';
+import { useCallback, useEffect, useState, useRef } from 'react';
 
 const isBrowser = (): boolean =>
   typeof window !== 'undefined' && typeof window.localStorage !== 'undefined';
@@ -26,7 +26,9 @@ export function useLocalStorage<T>(
   const [storedValue, setStoredValue] = useState<T>(() => readInitial(key, initialValue));
 
   const valueRef = useRef(storedValue);
-  valueRef.current = storedValue;
+  useEffect(() => {
+    valueRef.current = storedValue;
+  }, [storedValue]);
 
   const setValue = useCallback(
     (value: T | ((prev: T) => T)) => {

package/src/presentation/hooks/useMediaQuery.ts

@@ -3,7 +3,7 @@
  * @description Enhanced responsive breakpoint detection with helper functions
  */
 
-import { useEffect, useState, useCallback, useRef, useMemo } from 'react';
+import { useEffect, useState, useCallback, useRef, useMemo, useSyncExternalStore } from 'react';
 import type {
   Breakpoint,
   UseBreakpointReturn,
@@ -27,22 +27,26 @@ import { TIMING } from '../../infrastructure/constants/timing.constants';
  * ```
  */
 export function useMediaQuery(breakpoint: Breakpoint): boolean {
-  const [matches, setMatches] = useState(false);
-
-  useEffect(() => {
-    // FIX: SSR-safe check
-    if (typeof window === 'undefined') return;
+  const query = useMemo(() => createMediaQuery(breakpoint), [breakpoint]);
+
+  const subscribe = useCallback(
+    (onStoreChange: () => void) => {
+      if (typeof window === 'undefined') return () => {};
+      const media = window.matchMedia(query);
+      media.addEventListener('change', onStoreChange);
+      return () => media.removeEventListener('change', onStoreChange);
+    },
+    [query]
+  );
 
-    const query = createMediaQuery(breakpoint);
-    const media = window.matchMedia(query);
-    setMatches(media.matches);
+  const getSnapshot = useCallback(() => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia(query).matches;
+  }, [query]);
 
-    const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
-    media.addEventListener('change', listener);
-    return () => media.removeEventListener('change', listener);
-  }, [breakpoint]);
+  const getServerSnapshot = useCallback(() => false, []);
 
-  return matches;
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
 
 /**

package/src/presentation/molecules/CodeBlock.tsx

@@ -8,7 +8,6 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { ChevronDown, ChevronUp, Check, Copy } from 'lucide-react';
 import { cn } from '../../infrastructure/utils';
-import { TIMING } from '../../infrastructure/constants/timing.constants';
 import type { BaseProps } from '../../domain/types';
 
 export interface CodeBlockProps extends BaseProps {

package/src/presentation/molecules/InputGroup.tsx

@@ -18,7 +18,7 @@ export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(
     return (
       <div
         ref={ref}
-        className="relative"
+        className={cn('relative', className)}
         {...props}
       >
         {leftElement && (

package/src/presentation/organisms/DataTable.tsx

@@ -22,7 +22,7 @@ import {
   clampPageNumber,
   computePageBounds,
 } from '../../infrastructure/utils/calculation.utils';
-import type { BaseProps, ColorVariant } from '../../domain/types';
+import type { BaseProps } from '../../domain/types';
 import type { MediumSizes } from '../../infrastructure/constants';
 
 export interface Column<T> {
@@ -39,7 +39,6 @@ export interface DataTableProps<T> extends BaseProps {
   columns: Column<T>[];
   caption?: string;
   size?: MediumSizes;
-  variant?: ColorVariant;
   sortable?: boolean;
   paginated?: boolean;
   pageSize?: number;
@@ -50,13 +49,12 @@ export interface DataTableProps<T> extends BaseProps {
   onRowClick?: (row: T) => void;
 }
 
-export function DataTable<T extends Record<string, unknown>>({
+export function DataTable<T>({
   className,
   data,
   columns,
   caption,
   size = 'md',
-  variant = 'primary',
   sortable = false,
   paginated = false,
   pageSize = 10,