@umituz/web-design-system 1.9.4 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "1.9.4",
+  "version": "2.0.1",
   "private": false,
   "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications",
   "main": "./src/index.ts",
@@ -73,9 +73,9 @@
     "class-variance-authority": ">=0.7.0",
     "clsx": ">=2.0.0",
     "lucide-react": ">=0.400.0",
-    "react": ">=18.0.0",
+    "react": ">=19.0.0",
     "react-day-picker": ">=9.0.0",
-    "react-dom": ">=18.0.0",
+    "react-dom": ">=19.0.0",
     "react-i18next": ">=13.0.0",
     "tailwind-merge": ">=2.0.0"
   },
@@ -97,14 +97,14 @@
     "@radix-ui/react-toggle": "^1.1.9",
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.2.7",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.577.0",
-    "react": "^18.0.0",
+    "react": "^19.0.0",
     "react-day-picker": "^9.14.0",
-    "react-dom": "^18.0.0",
+    "react-dom": "^19.0.0",
     "react-i18next": "^13.0.0",
     "tailwind-merge": "^3.5.0",
     "typescript": "~5.9.2"

package/src/index.ts

@@ -24,8 +24,68 @@ export * from './infrastructure/constants';
 export * from './infrastructure/security';
 export * from './infrastructure/performance';
 export * from './infrastructure/error';
-export * from './presentation/atoms';
-export * from './presentation/molecules';
-export * from './presentation/organisms';
 export * from './presentation/templates';
 export * from './presentation/hooks';
+
+// Atoms
+export type { ButtonProps } from './presentation/atoms/Button';
+export { Button } from './presentation/atoms/Button';
+export type { BadgeProps } from './presentation/atoms/Badge';
+export { Badge } from './presentation/atoms/Badge';
+export type { InputProps } from './presentation/atoms/Input';
+export { Input } from './presentation/atoms/Input';
+export type { TextProps, TextElement, TextVariant, TextSize } from './presentation/atoms/Text';
+export { Text } from './presentation/atoms/Text';
+export type { IconProps } from './presentation/atoms/Icon';
+export { Icon } from './presentation/atoms/Icon';
+export type { SpinnerProps } from './presentation/atoms/Spinner';
+export { Spinner } from './presentation/atoms/Spinner';
+export type { CheckboxProps } from './presentation/atoms/Checkbox';
+export { Checkbox } from './presentation/atoms/Checkbox';
+export type { RadioProps } from './presentation/atoms/Radio';
+export { Radio } from './presentation/atoms/Radio';
+export type { SliderProps } from './presentation/atoms/Slider';
+export { Slider } from './presentation/atoms/Slider';
+export type { DividerProps } from './presentation/atoms/Divider';
+export { Divider } from './presentation/atoms/Divider';
+export type { SkeletonProps } from './presentation/atoms/Skeleton';
+export { Skeleton } from './presentation/atoms/Skeleton';
+export type { LinkProps } from './presentation/atoms/Link';
+export { Link } from './presentation/atoms/Link';
+export type { TooltipProps } from './presentation/atoms/Tooltip';
+export { Tooltip } from './presentation/atoms/Tooltip';
+export type { ProgressProps } from './presentation/atoms/Progress';
+export { Progress } from './presentation/atoms/Progress';
+export { Label } from './presentation/atoms/Label';
+export type { AspectRatioProps } from './presentation/atoms/AspectRatio';
+export { AspectRatio } from './presentation/atoms/AspectRatio';
+export type { SwitchProps } from './presentation/atoms/Switch';
+export { Switch } from './presentation/atoms/Switch';
+export { Separator } from './presentation/atoms/Separator';
+export { Toggle as ToggleAtom, toggleVariants } from './presentation/atoms/Toggle';
+
+// Molecules
+export type { FormFieldProps } from './presentation/molecules/FormField';
+export { FormField } from './presentation/molecules/FormField';
+export type { SearchBoxProps } from './presentation/molecules/SearchBox';
+export { SearchBox } from './presentation/molecules/SearchBox';
+export type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from './presentation/molecules/Avatar';
+export { Avatar, AvatarImage, AvatarFallback } from './presentation/molecules/Avatar';
+export type { ChipProps } from './presentation/molecules/Chip';
+export { Chip } from './presentation/molecules/Chip';
+export type { ToggleProps } from './presentation/molecules/Toggle';
+export { Toggle } from './presentation/molecules/Toggle';
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton } from './presentation/molecules/Select';
+export type { TextareaProps } from './presentation/molecules/Textarea';
+export { Textarea } from './presentation/molecules/Textarea';
+export type { RadioGroupProps, RadioOption } from './presentation/molecules/RadioGroup';
+export { RadioGroup } from './presentation/molecules/RadioGroup';
+export type { CheckboxGroupProps, CheckboxOption } from './presentation/molecules/CheckboxGroup';
+export { CheckboxGroup } from './presentation/molecules/CheckboxGroup';
+export type { InputGroupProps } from './presentation/molecules/InputGroup';
+export { InputGroup, GroupedInput } from './presentation/molecules/InputGroup';
+export { ScrollArea, ScrollBar } from './presentation/molecules/ScrollArea';
+export type { ListItemProps } from './presentation/molecules/ListItem';
+export { ListItem } from './presentation/molecules/ListItem';
+
+export * from './presentation/organisms';

package/src/infrastructure/error/SuspenseWrapper.tsx

@@ -14,14 +14,13 @@ export interface SuspenseWrapperProps {
 }
 
 const DefaultLoadingSpinner: React.FC<{ text?: string; className?: string }> = ({ text, className }) => (
-  <div style={{
+  <div className={className} style={{
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
     gap: '16px',
-    padding: '32px',
-    ...({ className } as any)
+    padding: '32px'
   }}>
     <div style={{
       width: '40px',

package/src/presentation/atoms/Text.tsx

@@ -43,6 +43,8 @@ const weightStyles: Record<'normal' | 'medium' | 'semibold' | 'bold', string> =
   bold: 'font-bold',
 };
 
+// NOTE: "as any" is used here for the polymorphic ref, which is a necessary workaround
+// for TypeScript's limitations in typing polymorphic components properly.
 export const Text = forwardRef<HTMLElement, TextProps>(
   ({ className, as = 'p', variant = 'body', size = 'md', weight = 'normal', ...props }, ref) => {
     const Tag = as as any;

package/src/presentation/atoms/Tooltip.tsx

@@ -23,7 +23,7 @@ const placementStyles: Record<'top' | 'bottom' | 'left' | 'right', string> = {
 export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   ({ className, children, content, placement = 'top', delay = 200, ...props }, ref) => {
     const [isOpen, setIsOpen] = useState(false);
-    const timeoutRef = useRef<number>();
+    const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
     const handleMouseEnter = () => {
       timeoutRef.current = setTimeout(() => {

package/src/presentation/atoms/index.ts

@@ -55,7 +55,5 @@ export { Switch } from './Switch';
 export type { SwitchProps } from './Switch';
 
 export { Separator } from './Separator';
-export type { SeparatorProps } from './Separator';
 
 export { Toggle, toggleVariants } from './Toggle';
-export type { ToggleProps } from './Toggle';

package/src/presentation/molecules/ListItem.tsx

@@ -4,7 +4,7 @@
  * Reduces boilerplate in list components throughout the app
  */
 
-import { forwardRef, type ReactNode, type MouseEvent } from 'react';
+import { forwardRef, type ReactNode, type HTMLAttributes, type AnchorHTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
 import { Button } from '../atoms';
 import type { BaseProps } from '../../domain/types';
@@ -22,6 +22,8 @@ export interface ListItemProps extends BaseProps {
   selected?: boolean;
   size?: 'sm' | 'md' | 'lg';
   variant?: 'default' | 'bordered' | 'ghost';
+  className?: string;
+  id?: string;
 }
 
 const sizeStyles = {
@@ -64,7 +66,7 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
       selected = false,
       size = 'md',
       variant = 'default',
-      ...props
+      id,
     },
     ref
   ) => {
@@ -104,9 +106,11 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
       </>
     );
 
+    // NOTE: Polymorphic component - renders as anchor when href is provided
+    // "ref as any" is necessary due to TypeScript limitations with polymorphic refs
     if (href && !disabled) {
       return (
-        <a href={href} ref={ref as any} className={baseClasses} {...(props as any)}>
+        <a href={href} className={baseClasses} id={id} ref={ref as any}>
           {content}
         </a>
       );
@@ -117,7 +121,7 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
         ref={ref}
         className={baseClasses}
         onClick={disabled ? undefined : onClick}
-        {...props}
+        id={id}
       >
         {content}
       </div>

package/src/presentation/molecules/index.ts

@@ -20,7 +20,6 @@ export { Toggle } from './Toggle';
 export type { ToggleProps } from './Toggle';
 
 export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton } from './Select';
-export type { SelectProps } from './Select';
 
 export { Textarea } from './Textarea';
 export type { TextareaProps } from './Textarea';

package/src/presentation/organisms/Calendar.tsx

@@ -63,8 +63,12 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ..._props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ..._props }) => <ChevronRight className="h-4 w-4" />,
+        Chevron: ({ orientation, ...props }) =>
+          orientation === 'left' ? (
+            <ChevronLeft className="h-4 w-4" {...props} />
+          ) : (
+            <ChevronRight className="h-4 w-4" {...props} />
+          ),
       }}
       {...props}
     />

package/src/presentation/organisms/DataTable.tsx

@@ -84,8 +84,9 @@ export function DataTable<T extends Record<string, unknown>>({
       const bValue = typeof column.accessor === 'function' ? column.accessor(b) : b[column.accessor];
 
       if (aValue === bValue) return 0;
+      if (aValue == null || bValue == null) return 0;
 
-      const comparison = aValue < bValue ? -1 : 1;
+      const comparison = (aValue as string | number) < (bValue as string | number) ? -1 : 1;
       return sortDirection === 'asc' ? comparison : -comparison;
     });
   }, [data, sortColumn, sortDirection, columns, sortable]);

package/src/presentation/organisms/Table.tsx

@@ -92,7 +92,7 @@ export const TableHead = forwardRef<HTMLTableCellElement, HTMLAttributes<HTMLTab
 
 TableHead.displayName = 'TableHead';
 
-export const TableCell = forwardRef<HTMLTableCellElement, HTMLAttributes<HTMLTableCellElement>>(
+export const TableCell = forwardRef<HTMLTableCellElement, HTMLAttributes<HTMLTableCellElement> & { colSpan?: number }>(
   ({ className, ...props }, ref) => (
     <td
       ref={ref}

package/src/presentation/organisms/index.ts

@@ -129,7 +129,5 @@ export {
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
 } from './DropdownMenu';
-export type { DropdownMenuProps, DropdownMenuContentProps } from './DropdownMenu';
 
 export { ToggleGroup, ToggleGroupItem } from './ToggleGroup';
-export type { ToggleGroupProps, ToggleGroupItemProps } from './ToggleGroup';