@mbao01/common 0.5.2 → 0.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.5.2",
+  "version": "0.6.0",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -71,23 +71,23 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-hover-card": "^1.1.15",
-    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-menubar": "^1.1.16",
     "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
@@ -100,63 +100,63 @@
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "lucide-react": "^0.546.0",
-    "react-day-picker": "^9.11.1",
+    "react-day-picker": "^9.12.0",
     "react-dropzone": "^14.3.8",
-    "react-international-phone": "^4.6.0",
+    "react-international-phone": "^4.6.1",
     "react-otp-input": "^3.1.1",
     "react-resizable-panels": "^3.0.6",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.3.1",
+    "tailwind-merge": "^3.4.0",
     "timescape": "^0.8.0",
     "universal-cookie": "^8.0.1",
     "vaul": "^1.1.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.38.0",
+    "@eslint/js": "^9.39.1",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
-    "@storybook/addon-a11y": "^9.1.13",
-    "@storybook/addon-coverage": "^2.0.0",
-    "@storybook/addon-docs": "^9.1.13",
-    "@storybook/addon-links": "^9.1.13",
-    "@storybook/addon-onboarding": "^9.1.13",
-    "@storybook/addon-themes": "^9.1.13",
-    "@storybook/react-vite": "^9.1.13",
-    "@storybook/test-runner": "^0.23.0",
-    "@tailwindcss/postcss": "^4.1.15",
-    "@tailwindcss/vite": "^4.1.15",
+    "@storybook/addon-a11y": "^10.1.6",
+    "@storybook/addon-coverage": "^3.0.0",
+    "@storybook/addon-docs": "^10.1.6",
+    "@storybook/addon-links": "^10.1.6",
+    "@storybook/addon-onboarding": "^10.1.6",
+    "@storybook/addon-themes": "^10.1.6",
+    "@storybook/react-vite": "^10.1.6",
+    "@storybook/test-runner": "^0.24.2",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@tailwindcss/vite": "^4.1.17",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@types/node": "^24.9.1",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
-    "@typescript-eslint/eslint-plugin": "^8.46.2",
-    "@typescript-eslint/parser": "^8.46.2",
-    "@vitejs/plugin-react": "^5.0.4",
+    "@types/node": "^24.10.2",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.49.0",
+    "@typescript-eslint/parser": "^8.49.0",
+    "@vitejs/plugin-react": "^5.1.2",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
     "axe-playwright": "^2.2.2",
-    "daisyui": "^5.3.7",
-    "eslint": "^9.38.0",
+    "daisyui": "^5.5.11",
+    "eslint": "^9.39.1",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
-    "eslint-plugin-storybook": "^9.1.13",
-    "globals": "^16.4.0",
+    "eslint-plugin-storybook": "^10.1.6",
+    "globals": "^16.5.0",
     "jest-image-snapshot": "^6.5.1",
-    "jsdom": "^27.0.1",
+    "jsdom": "^27.3.0",
     "path": "^0.12.7",
     "postcss": "^8.5.6",
-    "prettier": "^3.6.2",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-router-dom": "^7.9.4",
-    "recharts": "^3.3.0",
-    "storybook": "^9.1.13",
-    "tailwindcss": "^4.1.15",
+    "prettier": "^3.7.4",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "react-router-dom": "^7.10.1",
+    "recharts": "^3.5.1",
+    "storybook": "^10.1.6",
+    "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.2",
+    "typescript-eslint": "^8.49.0",
     "vite": "^6.4.1",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4"
@@ -168,5 +168,5 @@
     "recharts": "2",
     "typescript": "5"
   },
-  "gitHead": "30eba9ab76ef0ae78f5acbfb4b309204ca39971d"
+  "gitHead": "8a77b018bca2938c499639bb4e0afa17ae30df87"
 }

package/src/components/Alert/constants.ts

@@ -1,9 +1,10 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getAlertClasses = cva(
   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg]:absolute [&>svg]:left-4 [&>svg]:text-inherit",
   {
-    variants: {
+    variants: createVariants({
       variant: {
         accent: "bg-accent text-accent-content border-accent",
         default: "bg-default text-default-content border-default",
@@ -19,7 +20,7 @@ export const getAlertClasses = cva(
       outline: {
         true: "border bg-default",
       },
-    },
+    }),
     compoundVariants: [
       { outline: true, variant: "accent", className: "text-accent" },
       { outline: true, variant: "default", className: "text-default" },

package/src/components/Anchor/Anchor.tsx

@@ -1,6 +1,6 @@
 import { ExternalLinkIcon } from "lucide-react";
 import { cn } from "../../utilities";
-import { getAnchorClasses } from "./constant";
+import { getAnchorClasses } from "./constants";
 import { type AnchorProps } from "./types";
 
 export const Anchor = ({

package/src/components/Anchor/{constant.ts → constants.ts}

@@ -1,13 +1,13 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getAnchorClasses = cva("link transition-all", {
-  variants: {
+  variants: createVariants({
     variant: {
       accent: "link-accent",
-      default: "link-default",
       error: "link-error",
       info: "link-info",
-      link: "link-link",
+      default: "text-base-content",
       neutral: "link-neutral",
       primary: "link-primary",
       secondary: "link-secondary",
@@ -20,5 +20,5 @@ export const getAnchorClasses = cva("link transition-all", {
     underline: {
       false: "no-underline",
     },
-  },
+  }),
 });

package/src/components/Anchor/types.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from "../../libs";
-import { getAnchorClasses } from "./constant";
+import { getAnchorClasses } from "./constants";
 
 export type AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
   isExternal?: boolean;

package/src/components/AspectRatio/AspectRatio.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { cn } from "../../utilities";
+import { getAspectRatioClasses } from "./constants";
+import { type AspectRatioProps } from "./types";
+
+export const AspectRatio = React.forwardRef<HTMLDivElement, AspectRatioProps>(
+  ({ className, ratio, value, style, children, ...props }, ref) => {
+    const computedStyle = value ? { aspectRatio: `${value}` } : {};
+
+    return (
+      <div
+        ref={ref}
+        className={cn(getAspectRatioClasses({ ratio: value ? undefined : ratio }), className)}
+        style={{ ...computedStyle, ...style }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+AspectRatio.displayName = "AspectRatio";

package/src/components/AspectRatio/constants.ts

@@ -0,0 +1,17 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getAspectRatioClasses = cva("relative w-full overflow-hidden", {
+  variants: createVariants({
+    ratio: {
+      "16/9": "aspect-video",
+      "4/3": "aspect-[4/3]",
+      "1/1": "aspect-square",
+      "21/9": "aspect-[21/9]",
+      auto: "aspect-auto",
+    },
+  }),
+  defaultVariants: {
+    ratio: "16/9",
+  },
+});

package/src/components/AspectRatio/index.ts

@@ -0,0 +1,2 @@
+export { AspectRatio } from "./AspectRatio";
+export type { AspectRatioProps } from "./types";

package/src/components/AspectRatio/types.ts

@@ -0,0 +1,7 @@
+import { type VariantProps } from "../../libs";
+import { getAspectRatioClasses } from "./constants";
+
+export type AspectRatioProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getAspectRatioClasses> & {
+    value?: number; // Custom ratio value (width/height)
+  };

package/src/components/Avatar/constants.ts

@@ -1,26 +1,24 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getAvatarClasses = cva("avatar", {
-  variants: {
+  variants: createVariants({
     size: {
-      4: "w-4 h-4",
-      8: "w-8 h-8",
-      12: "w-12 h-12",
-      16: "w-16 h-16",
-      24: "w-24 h-24",
-      32: "w-32 h-32",
-      48: "w-48 h-48",
-      64: "w-64 h-64",
+      xs: "w-6 h-6",
+      sm: "w-12 h-12",
+      md: "w-16 h-16",
+      lg: "w-24 h-24",
+      xl: "w-32 h-32",
     },
     status: {
       online: "avatar-online",
       offline: "avatar-offline",
     },
-  },
+  }),
 });
 
 const classesConfig = {
-  variants: {
+  variants: createVariants({
     variant: {
       accent: "bg-accent text-accent-content ring-accent",
       default: "bg-base-200 text-base-content ring-default",
@@ -43,24 +41,21 @@ const classesConfig = {
     ring: {
       true: "ring-3 ring-offset-base-100 ring-offset-2",
     },
-  },
+  }),
 };
 
 export const getAvatarImageClasses = cva("", classesConfig);
 
 export const getAvatarFallbackClasses = cva("flex items-center justify-center w-full", {
   ...classesConfig,
-  variants: {
+  variants: createVariants({
     ...classesConfig.variants,
     size: {
-      4: "text-[4px]",
-      8: "text-base",
-      12: "text-lg",
-      16: "text-xl",
-      24: "text-2xl",
-      32: "text-3xl",
-      48: "text-4xl",
-      64: "text-5xl",
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
     },
-  },
+  }),
 });

package/src/components/Badge/constants.ts

@@ -1,7 +1,8 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getBadgeClasses = cva("badge", {
-  variants: {
+  variants: createVariants({
     variant: {
       accent: "badge-accent",
       error: "badge-error",
@@ -28,7 +29,7 @@ export const getBadgeClasses = cva("badge", {
       md: "rounded-md",
       lg: "rounded-lg",
     },
-  },
+  }),
   compoundVariants: [
     {
       size: undefined,

package/src/components/Banner/Banner.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { X } from "lucide-react";
+import { cn } from "../../utilities";
+import { getBannerClasses } from "./constants";
+import { type BannerProps } from "./types";
+
+export const Banner = React.forwardRef<HTMLDivElement, BannerProps>(
+  (
+    { className, variant, border, icon, title, description, action, onClose, children, ...props },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(getBannerClasses({ variant, border }), className)}
+        {...props}
+      >
+        {icon && <div className="flex-none">{icon}</div>}
+        <div className="flex-1">
+          {title && <h3 className="font-bold">{title}</h3>}
+          {description && <div className="text-xs">{description}</div>}
+          {children}
+        </div>
+        {action && <div className="flex-none">{action}</div>}
+        {onClose && (
+          <button onClick={onClose} className="btn btn-sm btn-ghost btn-circle" aria-label="Close">
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+Banner.displayName = "Banner";

package/src/components/Banner/constants.ts

@@ -0,0 +1,18 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getBannerClasses = cva("alert alert-vertical sm:alert-horizontal", {
+  variants: createVariants({
+    variant: {
+      info: "alert-info",
+      success: "alert-success",
+      warning: "alert-warning",
+      error: "alert-error",
+    },
+    border: {
+      solid: "alert-outline",
+      dashed: "alert-dash",
+      none: "alert-soft",
+    },
+  }),
+});

package/src/components/Banner/index.ts

@@ -0,0 +1,2 @@
+export { Banner } from "./Banner";
+export type { BannerProps } from "./types";

package/src/components/Banner/types.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from "../../libs";
+import { getBannerClasses } from "./constants";
+
+export type BannerProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getBannerClasses> & {
+    icon?: React.ReactNode;
+    title?: string;
+    description?: string;
+    action?: React.ReactNode;
+    onClose?: () => void;
+  };

package/src/components/Blockquote/Blockquote.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { cn } from "../../utilities";
+import { getBlockquoteClasses } from "./constants";
+import { type BlockquoteProps } from "./types";
+
+export const Blockquote = React.forwardRef<HTMLQuoteElement, BlockquoteProps>(
+  ({ className, variant, cite, children, ...props }, ref) => {
+    return (
+      <blockquote
+        ref={ref}
+        cite={cite}
+        className={cn(getBlockquoteClasses({ variant }), className)}
+        {...props}
+      >
+        {children}
+      </blockquote>
+    );
+  }
+);
+
+Blockquote.displayName = "Blockquote";

package/src/components/Blockquote/constants.ts

@@ -0,0 +1,22 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getBlockquoteClasses = cva("border-l-4 pl-4 italic", {
+  variants: createVariants({
+    variant: {
+      default: "border-base-content/20 text-base-content/80",
+      primary: "border-primary text-primary/80",
+      secondary: "border-secondary text-secondary/80",
+      accent: "border-accent text-accent/80",
+      error: "border-error text-error/80",
+      success: "border-success text-success/80",
+      warning: "border-warning text-warning/80",
+      ghost: "border-none text-base-content/80",
+      info: "border-info text-info/80",
+      neutral: "border-neutral text-neutral/80",
+    },
+  }),
+  defaultVariants: {
+    variant: "default",
+  },
+});

package/src/components/Blockquote/index.ts

@@ -0,0 +1,2 @@
+export { Blockquote } from "./Blockquote";
+export type { BlockquoteProps } from "./types";

package/src/components/Blockquote/types.ts

@@ -0,0 +1,7 @@
+import { type VariantProps } from "../../libs";
+import { getBlockquoteClasses } from "./constants";
+
+export type BlockquoteProps = React.BlockquoteHTMLAttributes<HTMLQuoteElement> &
+  VariantProps<typeof getBlockquoteClasses> & {
+    cite?: string;
+  };

package/src/components/Box/Box.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { cn } from "../../utilities";
+import { getBoxClasses } from "./constants";
+import { type BoxProps } from "./types";
+
+export const Box = React.forwardRef<HTMLDivElement, BoxProps>(
+  ({ className, display, position, overflow, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(getBoxClasses({ display, position, overflow }), className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Box.displayName = "Box";

package/src/components/Box/constants.ts

@@ -0,0 +1,34 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getBoxClasses = cva("", {
+  variants: createVariants({
+    display: {
+      block: "block",
+      inline: "inline",
+      "inline-block": "inline-block",
+      flex: "flex",
+      "inline-flex": "inline-flex",
+      grid: "grid",
+      "inline-grid": "inline-grid",
+      hidden: "hidden",
+    },
+    position: {
+      static: "static",
+      fixed: "fixed",
+      absolute: "absolute",
+      relative: "relative",
+      sticky: "sticky",
+    },
+    overflow: {
+      auto: "overflow-auto",
+      hidden: "overflow-hidden",
+      visible: "overflow-visible",
+      scroll: "overflow-scroll",
+      "x-auto": "overflow-x-auto",
+      "y-auto": "overflow-y-auto",
+      "x-hidden": "overflow-x-hidden",
+      "y-hidden": "overflow-y-hidden",
+    },
+  }),
+});

package/src/components/Box/index.ts

@@ -0,0 +1,2 @@
+export { Box } from "./Box";
+export type { BoxProps } from "./types";

package/src/components/Box/types.ts

@@ -0,0 +1,4 @@
+import { type VariantProps } from "../../libs";
+import { getBoxClasses } from "./constants";
+
+export type BoxProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getBoxClasses>;

package/src/components/Breadcrumb/types.ts

@@ -8,7 +8,7 @@ export type BreadcrumbListProps = React.HTMLAttributes<HTMLUListElement>;
 
 export type BreadcrumbItemProps = React.HTMLAttributes<HTMLLIElement>;
 
-export type BreadcrumbLinkProps = React.HTMLAttributes<HTMLAnchorElement> & {
+export type BreadcrumbLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
   asChild?: boolean;
 };
 

package/src/components/Button/Button.tsx

@@ -14,6 +14,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       children,
       isLoading,
       variant,
+      link,
       size,
       wide,
       rounded,
@@ -29,7 +30,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         disabled={disabled}
         className={cn(
-          getButtonClasses({ size, wide, outline, variant, rounded, disabled, isLoading }),
+          getButtonClasses({ size, wide, link, outline, variant, rounded, disabled, isLoading }),
           className
         )}
         {...props}
@@ -40,9 +41,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[inherit]"
             data-testid="loading"
           >
-            <Loading
-              intent={!variant || variant === "link" || variant === "ghost" ? "default" : variant}
-            />
+            <Loading variant={!variant || variant === "ghost" ? "default" : variant} />
           </span>
         ) : null}
       </Comp>

package/src/components/Button/constants.ts

@@ -1,14 +1,14 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getButtonClasses = cva("btn", {
-  variants: {
+  variants: createVariants({
     variant: {
       accent: "btn-accent",
       default: "btn-default",
       error: "btn-error",
       ghost: "btn-ghost",
       info: "btn-info",
-      link: "btn-link",
       neutral: "btn-neutral",
       primary: "btn-primary",
       secondary: "btn-secondary",
@@ -18,6 +18,9 @@ export const getButtonClasses = cva("btn", {
     outline: {
       true: "btn-outline",
     },
+    link: {
+      true: "btn-link",
+    },
     rounded: {
       xs: "rounded-xs",
       sm: "rounded-sm",
@@ -39,7 +42,7 @@ export const getButtonClasses = cva("btn", {
     disabled: {
       true: "",
     },
-  },
+  }),
   compoundVariants: [
     {
       size: undefined,

package/src/components/Card/constants.ts

@@ -1,7 +1,8 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getCardClasses = cva("card", {
-  variants: {
+  variants: createVariants({
     border: {
       solid: "card-border",
       dash: "card-dash",
@@ -19,5 +20,5 @@ export const getCardClasses = cva("card", {
     overlay: {
       true: "image-full",
     },
-  },
+  }),
 });