Merge pull request #102 from Xenial-Devil/i-branch-41

i-branch-41

Author: isubroto

README.md

@@ -5,6 +5,7 @@ export const alertVariants = cva(
   {
     variants: {
       variant: {
+        default: "bg-background text-foreground border border-border",
         solid:
           "shadow-lg shadow-current/20 before:absolute before:inset-0 before:bg-gradient-to-br before:from-white/10 before:to-transparent before:opacity-50 after:absolute after:inset-0 after:bg-gradient-to-t after:from-black/5 after:to-transparent hover:shadow-current/30",
         subtle:
@@ -159,9 +160,9 @@ export const alertVariants = cva(
       },
     ],
     defaultVariants: {
-      variant: "solid",
+      variant: "default",
       status: "info",
       rounded: true,
     },
-  },
+  }
 );

src/components/Alert/Alert.styles.ts

@@ -2,6 +2,7 @@ import React from "react";
 
 // Explicit types for better type safety
 export type AlertVariant =
+  | "default"
   | "solid"
   | "subtle"
   | "left-accent"
@@ -13,7 +14,7 @@ export type AlertStatus = "success" | "danger" | "warning" | "info";
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Visual style variant of the alert
-   * @default "solid"
+   * @default "default"
    */
   variant?: AlertVariant;
 

src/components/Alert/Alert.types.ts

@@ -86,7 +86,7 @@ const StatusIcon: React.FC<{
 const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
   (
     {
-      variant = "solid",
+      variant = "default",
       message = "",
       title,
       status = "info",

src/components/Alert/index.tsx

@@ -29,9 +29,14 @@ const inputWrapperVariants = cva(
         error: "bg-danger/10 border border-danger rounded-lg",
       },
       size: {
+        xs: "h-6 px-1.5 text-xs",
         sm: "h-8 px-2 text-sm",
         md: "h-10 px-3 text-sm",
         lg: "h-12 px-4 text-base",
+        xl: "h-14 px-5 text-lg",
+        "2xl": "h-16 px-6 text-xl",
+        "3xl": "h-20 px-8 text-2xl",
+        "4xl": "h-24 px-10 text-3xl",
       },
       focused: {
         true: "",
@@ -82,9 +87,14 @@ const inputVariants = cva(
   {
     variants: {
       size: {
+        xs: "text-xs",
         sm: "text-sm",
         md: "text-sm",
         lg: "text-base",
+        xl: "text-lg",
+        "2xl": "text-xl",
+        "3xl": "text-2xl",
+        "4xl": "text-3xl",
       },
       disabled: {
         true: "cursor-not-allowed",
@@ -137,9 +147,14 @@ const optionVariants = cva(
         error: "",
       },
       size: {
+        xs: "px-1.5 py-1 text-[10px]",
         sm: "px-2 py-1.5 text-xs",
         md: "px-3 py-2 text-sm",
         lg: "px-4 py-2.5 text-base",
+        xl: "px-5 py-3 text-lg",
+        "2xl": "px-6 py-3.5 text-xl",
+        "3xl": "px-8 py-4 text-2xl",
+        "4xl": "px-10 py-5 text-3xl",
       },
       highlighted: {
         true: "",
@@ -297,9 +312,14 @@ const optionVariants = cva(
 const labelVariants = cva("block mb-1.5 font-medium text-foreground", {
   variants: {
     size: {
+      xs: "text-[10px]",
       sm: "text-xs",
       md: "text-sm",
       lg: "text-base",
+      xl: "text-lg",
+      "2xl": "text-xl",
+      "3xl": "text-2xl",
+      "4xl": "text-3xl",
     },
     required: {
       true: "after:content-['*'] after:ml-1 after:text-danger",

src/components/Autocomplete/Autocomplete.styles.ts

@@ -1,4 +1,12 @@
-export type AutocompleteSize = "sm" | "md" | "lg";
+export type AutocompleteSize =
+  | "xs"
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl"
+  | "2xl"
+  | "3xl"
+  | "4xl";
 
 export type AutocompleteVariant =
   | "default"

src/components/Autocomplete/Autocomplete.types.ts

@@ -11,6 +11,8 @@ const avatarVariants = cva(
         lg: "w-12 h-12 text-base",
         xl: "w-16 h-16 text-lg",
         "2xl": "w-20 h-20 text-xl",
+        "3xl": "w-24 h-24 text-2xl",
+        "4xl": "w-28 h-28 text-3xl",
       },
       shape: {
         circle: "rounded-full",
@@ -47,6 +49,8 @@ const statusVariants = cva(
         lg: "w-3 h-3",
         xl: "w-3.5 h-3.5",
         "2xl": "w-4 h-4",
+        "3xl": "w-5 h-5",
+        "4xl": "w-6 h-6",
       },
       status: {
         online:
@@ -63,4 +67,4 @@ const statusVariants = cva(
     },
   }
 );
-export { avatarVariants, statusVariants };
+export { avatarVariants, statusVariants };

src/components/Avatar/Avatar.styles.ts

@@ -1,7 +1,15 @@
 import React from "react";
 
 // Explicit types for better type safety
-export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type AvatarSize =
+  | "xs"
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl"
+  | "2xl"
+  | "3xl"
+  | "4xl";
 export type AvatarShape = "circle" | "square" | "rounded";
 export type AvatarStatus = "online" | "offline" | "away" | "busy" | "none";
 

src/components/Avatar/Avatar.types.ts

@@ -30,6 +30,8 @@ const avatarWrapperVariants = cva(
         lg: "ring-0",
         xl: "ring-0",
         "2xl": "ring-0",
+        "3xl": "ring-0",
+        "4xl": "ring-0",
       },
     },
     defaultVariants: {
@@ -52,6 +54,8 @@ const moreIndicatorVariants = cva(
         lg: "text-base",
         xl: "text-lg",
         "2xl": "text-xl",
+        "3xl": "text-2xl",
+        "4xl": "text-3xl",
       },
       variant: {
         stack:
@@ -68,8 +72,4 @@ const moreIndicatorVariants = cva(
     },
   }
 );
-export {
-  avatarGroupVariants,
-  avatarWrapperVariants,
-  moreIndicatorVariants,
-};
+export { avatarGroupVariants, avatarWrapperVariants, moreIndicatorVariants };

src/components/AvatarGroup/AvatarGroup.styles.ts

@@ -3,7 +3,15 @@ import { ReactNode } from "react";
 /**
  * Size options for AvatarGroup
  */
-export type AvatarGroupSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type AvatarGroupSize =
+  | "xs"
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl"
+  | "2xl"
+  | "3xl"
+  | "4xl";
 
 /**
  * Variant options for AvatarGroup layout