@umituz/web-design-system 1.9.1 → 1.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "1.9.1",
+  "version": "1.9.3",
   "private": false,
   "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications",
   "main": "./src/index.ts",

package/src/presentation/atoms/Button.tsx

@@ -1,54 +1,52 @@
 /**
- * Button Component (Atom)
- * @description Interactive button element
+ * Button Component (Atom) - Shadcn/ui format
+ * @description Interactive button element using class-variance-authority
  */
 
-import { forwardRef, type ButtonHTMLAttributes } from 'react';
-import { cn } from '../../infrastructure/utils';
-import type { BaseProps, SizeVariant, ColorVariant } from '../../domain/types';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, BaseProps {
-  variant?: ColorVariant;
-  size?: SizeVariant;
-  fullWidth?: boolean;
-}
+import { cn } from '../../infrastructure/utils';
 
-const variantStyles: Record<ColorVariant, string> = {
-  primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
-  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-  success: 'bg-success text-success-foreground hover:bg-success/90',
-  warning: 'bg-warning text-warning-foreground hover:bg-warning/90',
-  destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-};
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
 
-const sizeStyles: Record<SizeVariant, string> = {
-  xs: 'h-7 px-2 text-xs',
-  sm: 'h-8 px-3 text-sm',
-  md: 'h-9 px-4 text-sm',
-  lg: 'h-10 px-5 text-base',
-  xl: 'h-11 px-6 text-lg',
-};
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant = 'primary', size = 'md', fullWidth = false, disabled, type = 'button', ...props }, ref) => {
-    return (
-      <button
-        ref={ref}
-        type={type}
-        disabled={disabled}
-        className={cn(
-          'inline-flex items-center justify-center rounded-md font-medium transition-colors',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-          'disabled:pointer-events-none disabled:opacity-50',
-          variantStyles[variant],
-          sizeStyles[size],
-          fullWidth && 'w-full',
-          className
-        )}
-        {...props}
-      />
-    );
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
   }
 );
-
 Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/src/presentation/hooks/useLocalStorage.ts

@@ -3,7 +3,7 @@
  * @description LocalStorage state management
  */
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 export function useLocalStorage<T>(
   key: string,

package/src/presentation/organisms/AlertDialog.tsx

@@ -25,7 +25,26 @@ import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
 import { cn } from "../../infrastructure/utils";
-import { buttonVariants } from "../../atoms/Button";
+
+// Import buttonVariants from the atoms folder
+// We need to define it here since Button uses cva
+import { cva } from "class-variance-authority";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+  }
+);
 
 const AlertDialog = AlertDialogPrimitive.Root;
 

package/src/presentation/templates/Form.tsx

@@ -5,7 +5,7 @@
 
 import { forwardRef, type FormHTMLAttributes, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
-import type { BaseProps, ChildrenProps } from '../../domain/types';
+import type { BaseProps } from '../../domain/types';
 
 export interface FormProps extends FormHTMLAttributes<HTMLFormElement>, BaseProps {
   onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;

package/src/presentation/templates/List.tsx

@@ -5,7 +5,7 @@
 
 import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
-import type { BaseProps, ChildrenProps } from '../../domain/types';
+import type { BaseProps } from '../../domain/types';
 
 export interface ListProps extends HTMLAttributes<HTMLUListElement>, BaseProps {
   variant?: 'default' | 'bordered' | 'spaced';

package/src/presentation/templates/PageLayout.tsx

@@ -5,7 +5,7 @@
 
 import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
-import type { BaseProps, ChildrenProps } from '../../domain/types';
+import type { BaseProps } from '../../domain/types';
 
 export type MaxWidth = '4xl' | '7xl' | 'full';
 

package/src/presentation/templates/ResponsiveContainer.tsx

@@ -3,17 +3,17 @@
  * @description Responsive wrapper with mobile/desktop optimizations
  */
 
-import { forwardRef, type HTMLAttributes } from 'react';
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 import { cn } from '../../infrastructure/utils';
 import { useBreakpoint } from '../hooks/useMediaQuery';
-import type { BaseProps, ChildrenProps } from '../../domain/types';
+import type { BaseProps } from '../../domain/types';
 
 export type ResponsiveSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 
 export interface ResponsiveContainerProps
-  extends HTMLAttributes<HTMLDivElement>,
-    BaseProps,
-    ChildrenProps {
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>,
+    BaseProps {
+  children?: ReactNode;
   /**
    * Maximum width on mobile devices
    * @default 'full'
@@ -77,12 +77,6 @@ const maxWidthClasses: Record<ResponsiveSize, string> = {
   full: 'max-w-full',
 };
 
-const sizeBreakpointMap: Record<string, ResponsiveSize> = {
-  sm: 'mobileMaxWidth',
-  md: 'tabletMaxWidth',
-  lg: 'desktopMaxWidth',
-};
-
 export const ResponsiveContainer = forwardRef<
   HTMLDivElement,
   ResponsiveContainerProps

package/src/presentation/templates/Section.tsx

@@ -5,7 +5,7 @@
 
 import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
-import type { BaseProps, ChildrenProps } from '../../domain/types';
+import type { BaseProps } from '../../domain/types';
 
 export interface SectionProps extends HTMLAttributes<HTMLElement>, BaseProps {
   title?: string;