@mbao01/common 0.5.2 → 0.6.0

package/src/components/Image/constants.ts

@@ -0,0 +1,25 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getImageClasses = cva("block max-w-full h-auto", {
+  variants: createVariants({
+    fit: {
+      contain: "object-contain",
+      cover: "object-cover",
+      fill: "object-fill",
+      none: "object-none",
+      "scale-down": "object-scale-down",
+    },
+    radius: {
+      none: "rounded-none",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      full: "rounded-full",
+    },
+  }),
+  defaultVariants: {
+    fit: "cover",
+    radius: "none",
+  },
+});

package/src/components/Image/index.ts

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

package/src/components/Image/types.ts

@@ -0,0 +1,7 @@
+import { type VariantProps } from "../../libs";
+import { getImageClasses } from "./constants";
+
+export type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> &
+  VariantProps<typeof getImageClasses> & {
+    fallbackSrc?: string;
+  };

package/src/components/Kbd/constants.ts

@@ -1,7 +1,8 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getKbdClasses = cva("kbd", {
-  variants: {
+  variants: createVariants({
     variant: {
       accent: "bg-accent text-accent-content border-accent",
       default: "bg-default text-default-content border-default",
@@ -24,7 +25,7 @@ export const getKbdClasses = cva("kbd", {
       lg: "kbd-lg",
       xl: "kbd-xl",
     },
-  },
+  }),
   compoundVariants: [
     { outline: true, variant: "accent", className: "text-accent" },
     { outline: true, variant: "default", className: "text-default" },

package/src/components/List/constants.ts

@@ -1,14 +1,15 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getListClasses = cva("list");
 
 export const getListItemClasses = cva("list-row");
 
 export const getListColumnClasses = cva("", {
-  variants: {
+  variants: createVariants({
     flex: {
       grow: "list-col-grow",
       wrap: "list-col-grow",
     },
-  },
+  }),
 });

package/src/components/Loading/Loading.tsx

@@ -2,8 +2,6 @@ import { cn } from "../../utilities";
 import { getLoadingClasses } from "./constants";
 import { type LoadingProps } from "./types";
 
-export const Loading = ({ size, intent, variant, className, ...props }: LoadingProps) => {
-  return (
-    <span className={cn(getLoadingClasses({ intent, size, variant }), className)} {...props} />
-  );
+export const Loading = ({ size, variant, type, className, ...props }: LoadingProps) => {
+  return <span className={cn(getLoadingClasses({ size, variant, type }), className)} {...props} />;
 };

package/src/components/Loading/constants.ts

@@ -1,8 +1,9 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getLoadingClasses = cva("loading", {
-  variants: {
-    variant: {
+  variants: createVariants({
+    type: {
       spinner: "loading-spinner",
       dots: "loading-dots",
       ring: "loading-ring",
@@ -10,7 +11,7 @@ export const getLoadingClasses = cva("loading", {
       bars: "loading-bars",
       infinity: "loading-infinity",
     },
-    intent: {
+    variant: {
       default: "text-base-content",
       primary: "text-primary-content",
       secondary: "text-secondary-content",
@@ -27,5 +28,5 @@ export const getLoadingClasses = cva("loading", {
       md: "loading-md",
       lg: "loading-lg",
     },
-  },
+  }),
 });

package/src/components/Menu/Menubar/constants.ts

@@ -1,11 +1,12 @@
 import { cva } from "../../../libs";
+import { createVariants } from "../../../utilities";
 
 const itemVariant = {
   primary: "focus:bg-primary focus:text-primary-content",
   secondary: "focus:bg-secondary focus:text-secondary-content",
   accent: "focus:bg-accent focus:text-accent-content",
   neutral: "focus:bg-neutral focus:text-neutral-content",
-  base: "focus:bg-base-300 focus:text-base-content",
+  default: "focus:bg-base-300 focus:text-base-content",
   info: "focus:bg-info focus:text-info-content",
   success: "focus:bg-success focus:text-success-content",
   warning: "focus:bg-warning focus:text-warning-content",
@@ -21,7 +22,8 @@ const triggerVariant = {
     "focus:bg-accent focus:text-accent-content data-[state=open]:bg-accent data-[state=open]:text-accent-content",
   neutral:
     "focus:bg-neutral focus:text-neutral-content data-[state=open]:bg-neutral data-[state=open]:text-neutral-content",
-  base: "focus:bg-base-300 focus:text-base-content data-[state=open]:bg-base-300 data-[state=open]:text-base-content",
+  default:
+    "focus:bg-base-300 focus:text-base-content data-[state=open]:bg-base-300 data-[state=open]:text-base-content",
   info: "focus:bg-info focus:text-info-content data-[state=open]:bg-info data-[state=open]:text-info-content",
   success:
     "focus:bg-success focus:text-success-content data-[state=open]:bg-success data-[state=open]:text-success-content",
@@ -38,21 +40,21 @@ export const getMenubarClasses = cva(
 export const getMenubarTriggerClasses = cva(
   "flex cursor-default select-none items-center rounded-xs px-3 py-1 text-sm font-medium outline-hidden",
   {
-    variants: {
+    variants: createVariants({
       variant: triggerVariant,
-    },
+    }),
   }
 );
 
 export const getMenubarSubTriggerClasses = cva(
   "flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden",
   {
-    variants: {
+    variants: createVariants({
       variant: triggerVariant,
       inset: {
         true: "pl-8",
       },
-    },
+    }),
   }
 );
 
@@ -67,39 +69,39 @@ export const getMenubarSubContentClasses = cva(
 export const getMenubarItemClasses = cva(
   "relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
   {
-    variants: {
+    variants: createVariants({
       variant: itemVariant,
       inset: {
         true: "pl-8",
       },
-    },
+    }),
   }
 );
 
 export const getMenubarCheckboxItemClasses = cva(
   "relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
   {
-    variants: {
+    variants: createVariants({
       variant: itemVariant,
-    },
+    }),
   }
 );
 
 export const getMenubarRadioItemClasses = cva(
   "relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
   {
-    variants: {
+    variants: createVariants({
       variant: itemVariant,
-    },
+    }),
   }
 );
 
 export const getMenubarLabelClasses = cva("px-2 py-1.5 text-sm font-semibold", {
-  variants: {
+  variants: createVariants({
     inset: {
       true: "pl-8",
     },
-  },
+  }),
 });
 
 export const getMenubarSeparatorClasses = cva("-mx-1 my-1 h-px bg-base-200");

package/src/components/Menu/NavigationMenu/constants.ts

@@ -1,4 +1,5 @@
 import { cva } from "../../../libs";
+import { createVariants } from "../../../utilities";
 
 export const getNavigationMenuClasses = cva(
   "relative z-10 flex max-w-max flex-1 items-center justify-center"
@@ -11,7 +12,7 @@ export const getNavigationMenuListClasses = cva(
 export const getNavigationMenuTriggerClasses = cva(
   "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus:outline-hidden disabled:pointer-events-none disabled:opacity-50",
   {
-    variants: {
+    variants: createVariants({
       variant: {
         primary:
           "hover:bg-primary hover:text-primary-content focus:bg-primary focus:text-primary-content data-active:bg-primary/50 data-[state=open]:bg-primary/50",
@@ -21,7 +22,8 @@ export const getNavigationMenuTriggerClasses = cva(
           "hover:bg-accent hover:text-accent-content focus:bg-accent focus:text-accent-content data-active:bg-accent/50 data-[state=open]:bg-accent/50",
         neutral:
           "hover:bg-neutral hover:text-neutral-content focus:bg-neutral focus:text-neutral-content data-active:bg-neutral/50 data-[state=open]:bg-neutral/50",
-        base: "hover:bg-base-300 hover:text-base-content focus:bg-base-300 focus:text-base-content data-active:bg-base-300/50 data-[state=open]:bg-base-300/50",
+        default:
+          "hover:bg-base-300 hover:text-base-content focus:bg-base-300 focus:text-base-content data-active:bg-base-300/50 data-[state=open]:bg-base-300/50",
         info: "hover:bg-info hover:text-info-content focus:bg-info focus:text-info-content data-active:bg-info/50 data-[state=open]:bg-info/50",
         success:
           "hover:bg-success hover:text-success-content focus:bg-success focus:text-success-content data-active:bg-success/50 data-[state=open]:bg-success/50",
@@ -30,7 +32,7 @@ export const getNavigationMenuTriggerClasses = cva(
         error:
           "hover:bg-error hover:text-error-content focus:bg-error focus:text-error-content data-active:bg-error/50 data-[state=open]:bg-error/50",
       },
-    },
+    }),
   }
 );
 

package/src/components/Panel/Panel.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { cn } from "../../utilities";
+import {
+  getPanelClasses,
+  getPanelContentClasses,
+  getPanelFooterClasses,
+  getPanelHeaderClasses,
+} from "./constants";
+import {
+  type PanelContentProps,
+  type PanelFooterProps,
+  type PanelHeaderProps,
+  type PanelProps,
+} from "./types";
+
+export const Panel = React.forwardRef<HTMLDivElement, PanelProps>(
+  ({ className, width, collapsed, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn(getPanelClasses({ width, collapsed }), className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+Panel.displayName = "Panel";
+
+export const PanelHeader = React.forwardRef<HTMLDivElement, PanelHeaderProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn(getPanelHeaderClasses(), className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+PanelHeader.displayName = "PanelHeader";
+
+export const PanelContent = React.forwardRef<HTMLDivElement, PanelContentProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn(getPanelContentClasses(), className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+PanelContent.displayName = "PanelContent";
+
+export const PanelFooter = React.forwardRef<HTMLDivElement, PanelFooterProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn(getPanelFooterClasses(), className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+PanelFooter.displayName = "PanelFooter";

package/src/components/Panel/constants.ts

@@ -0,0 +1,31 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getPanelClasses = cva(
+  "flex flex-col border-r border-base-200 bg-base-100 transition-all duration-300 ease-in-out",
+  {
+    variants: createVariants({
+      width: {
+        sm: "w-64",
+        md: "w-80",
+        lg: "w-96",
+      },
+      collapsed: {
+        true: "w-[70px]",
+        false: "",
+      },
+    }),
+    defaultVariants: {
+      width: "md",
+      collapsed: false,
+    },
+  }
+);
+
+export const getPanelHeaderClasses = cva(
+  "flex items-center justify-between p-4 border-b border-base-200 h-16"
+);
+
+export const getPanelContentClasses = cva("flex-1 overflow-y-auto p-4");
+
+export const getPanelFooterClasses = cva("p-4 border-t border-base-200");

package/src/components/Panel/index.ts

@@ -0,0 +1,2 @@
+export { Panel, PanelHeader, PanelContent, PanelFooter } from "./Panel";
+export type { PanelProps, PanelHeaderProps, PanelContentProps, PanelFooterProps } from "./types";

package/src/components/Panel/types.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from "../../libs";
+import { getPanelClasses } from "./constants";
+
+export type PanelProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getPanelClasses> & {
+    onToggle?: () => void;
+  };
+
+export type PanelHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+export type PanelContentProps = React.HTMLAttributes<HTMLDivElement>;
+export type PanelFooterProps = React.HTMLAttributes<HTMLDivElement>;

package/src/components/Paragraph/Paragraph.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { cn } from "../../utilities";
+import { Text } from "../Text";
+import { getParagraphClasses } from "./constants";
+import { type ParagraphProps } from "./types";
+
+export const Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(
+  ({ className, leading, children, ...props }, ref) => {
+    return (
+      <Text as="p" ref={ref} className={cn(getParagraphClasses({ leading }), className)} {...props}>
+        {children}
+      </Text>
+    );
+  }
+);
+
+Paragraph.displayName = "Paragraph";

package/src/components/Paragraph/constants.ts

@@ -0,0 +1,18 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getParagraphClasses = cva("", {
+  variants: createVariants({
+    leading: {
+      none: "leading-none",
+      tight: "leading-tight",
+      snug: "leading-snug",
+      normal: "leading-normal",
+      relaxed: "leading-relaxed",
+      loose: "leading-loose",
+    },
+  }),
+  defaultVariants: {
+    leading: "normal",
+  },
+});

package/src/components/Paragraph/index.ts

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

package/src/components/Paragraph/types.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from "react";
+import { type VariantProps } from "../../libs";
+import { Text } from "../Text";
+import { getParagraphClasses } from "./constants";
+
+export type ParagraphProps = React.HTMLAttributes<HTMLParagraphElement> &
+  VariantProps<typeof getParagraphClasses> &
+  Omit<ComponentProps<typeof Text>, "as">;

package/src/components/Progress/constants.ts

@@ -1,43 +1,42 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getProgressClasses = cva("relative h-2 w-full overflow-hidden rounded-full", {
-  variants: {
+  variants: createVariants({
     variant: {
       accent: "bg-accent/20",
-      base: "bg-base-content/20",
+      default: "bg-base-content/20",
       error: "bg-error/20",
       ghost: "bg-ghost/20",
       info: "bg-info/20",
-      link: "bg-link/20",
       neutral: "bg-neutral/20",
       primary: "bg-primary/20",
       secondary: "bg-secondary/20",
       success: "bg-success/20",
       warning: "bg-warning/20",
     },
-  },
+  }),
   defaultVariants: {
-    variant: "base",
+    variant: "default",
   },
 });
 
 export const getProgressIndicatorClasses = cva("h-full w-full flex-1 transition-all", {
-  variants: {
+  variants: createVariants({
     variant: {
       accent: "bg-accent",
-      base: "bg-base-content",
+      default: "bg-base-content",
       error: "bg-error",
       ghost: "bg-ghost",
       info: "bg-info",
-      link: "bg-link",
       neutral: "bg-neutral",
       primary: "bg-primary",
       secondary: "bg-secondary",
       success: "bg-success",
       warning: "bg-warning",
     },
-  },
+  }),
   defaultVariants: {
-    variant: "base",
+    variant: "default",
   },
 });

package/src/components/Resizable/constants.ts

@@ -1,4 +1,5 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getResizableClasses = cva(
   "flex h-full w-full data-[panel-group-direction=vertical]:flex-col"
@@ -7,11 +8,11 @@ export const getResizableClasses = cva(
 export const getResizableHandleClasses = cva(
   "relative flex w-px items-center justify-center border-primary after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
   {
-    variants: {
+    variants: createVariants({
       bordered: {
         true: "border border-neutral-content",
       },
-    },
+    }),
   }
 );
 

package/src/components/ScrollArea/constants.ts

@@ -1,21 +1,22 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getScrollAreaClasses = cva("relative overflow-hidden");
 
 export const getScrollAreaScrollbarClasses = cva("flex touch-none select-none transition-colors", {
-  variants: {
+  variants: createVariants({
     orientation: {
       horizontal: "h-2.5 flex-col border-t border-t-transparent p-[1px]",
       vertical: "h-full w-2.5 border-l border-l-transparent p-[1px]",
     },
-  },
+  }),
 });
 
 export const getScrollAreaThumbClasses = cva("relative flex-1 rounded-full", {
-  variants: {
+  variants: createVariants({
     variant: {
       accent: "bg-accent",
-      base: "bg-base-300",
+      default: "bg-base-300",
       error: "bg-error",
       ghost: "bg-ghost",
       info: "bg-info",
@@ -25,7 +26,7 @@ export const getScrollAreaThumbClasses = cva("relative flex-1 rounded-full", {
       success: "bg-success",
       warning: "bg-warning",
     },
-  },
+  }),
 });
 
 export const getScrollAreaViewportClasses = cva("h-full w-full rounded-[inherit]");

package/src/components/Separator/constants.ts

@@ -1,10 +1,11 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getSeparatorClasses = cva("shrink-0 bg-base-300", {
-  variants: {
+  variants: createVariants({
     orientation: {
       horizontal: "h-[1px] w-full",
       vertical: "h-full w-[1px]",
     },
-  },
+  }),
 });

package/src/components/Sheet/Sheet.tsx

@@ -0,0 +1,126 @@
+import React, { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+import { cn } from "../../utilities";
+import { getSheetClasses, getSheetOverlayClasses } from "./constants";
+import { type SheetProps } from "./types";
+
+export const Sheet = React.forwardRef<HTMLDivElement, SheetProps>(
+  ({ className, side, open, onClose, children, ...props }, ref) => {
+    // Prevent body scroll when open
+    useEffect(() => {
+      if (open) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "";
+      }
+      return () => {
+        document.body.style.overflow = "";
+      };
+    }, [open]);
+
+    // Close on escape key
+    useEffect(() => {
+      const handleEscape = (e: KeyboardEvent) => {
+        if (open && e.key === "Escape") {
+          onClose?.();
+        }
+      };
+      document.addEventListener("keydown", handleEscape);
+      return () => document.removeEventListener("keydown", handleEscape);
+    }, [open, onClose]);
+
+    if (typeof document === "undefined") return null;
+
+    return createPortal(
+      <>
+        <div className={getSheetOverlayClasses({ open })} onClick={onClose} aria-hidden="true" />
+        <div
+          ref={ref}
+          role="dialog"
+          aria-modal="true"
+          className={cn(getSheetClasses({ side, open }), className)}
+          {...props}
+        >
+          {onClose && (
+            <button
+              onClick={onClose}
+              className="absolute right-4 top-4 btn btn-sm btn-circle btn-ghost"
+              aria-label="Close"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+          {children}
+        </div>
+      </>,
+      document.body
+    );
+  }
+);
+
+Sheet.displayName = "Sheet";
+
+export const SheetHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("flex flex-col space-y-2 p-6", className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+SheetHeader.displayName = "SheetHeader";
+
+export const SheetTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <h2 ref={ref} className={cn("text-lg font-semibold text-base-content", className)} {...props}>
+      {children}
+    </h2>
+  );
+});
+SheetTitle.displayName = "SheetTitle";
+
+export const SheetDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <p ref={ref} className={cn("text-sm text-base-content/70", className)} {...props}>
+      {children}
+    </p>
+  );
+});
+SheetDescription.displayName = "SheetDescription";
+
+export const SheetContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("p-6 pt-0", className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+SheetContent.displayName = "SheetContent";
+
+export const SheetFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 p-6",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+SheetFooter.displayName = "SheetFooter";