@mbao01/common 0.0.15 → 0.0.17

package/dist/types/components/AlertDialog/AlertDialog.d.ts

@@ -6,7 +6,10 @@ declare const AlertDialog: {
     Portal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
     Overlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & {} & React.RefAttributes<HTMLDivElement>>;
     Trigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {} & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        variant?: "dialog" | "sheet" | undefined;
+        side?: "top" | "right" | "bottom" | "left" | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
     Header: {
         ({ className, ...props }: AlertDialogHeaderProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;

package/dist/types/components/Card/Card.d.ts

@@ -1,7 +1,10 @@
-import type { CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardImageProps, CardProps } from "./types";
+import type { CardActionsProps, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardImageProps, CardTitleProps, CardProps, CardBodyProps } from "./types";
 declare const Card: {
     ({ compact, bordered, horizontal, overlay, className, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+    Actions: ({ className, ...props }: CardActionsProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ className, ...props }: CardBodyProps) => import("react/jsx-runtime").JSX.Element;
     Header: ({ className, ...props }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ className, ...props }: CardTitleProps) => import("react/jsx-runtime").JSX.Element;
     Content: ({ className, ...props }: CardContentProps) => import("react/jsx-runtime").JSX.Element;
     Description: ({ className, ...props }: CardDescriptionProps) => import("react/jsx-runtime").JSX.Element;
     Image: ({ className, src, alt, ...props }: CardImageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Card/types.d.ts

@@ -2,8 +2,11 @@ import React from "react";
 import { type VariantProps } from "../../libs";
 import { getCardClasses } from "./constants";
 export type CardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getCardClasses>;
+export type CardActionsProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardBodyProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
 export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
 export type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;

package/dist/types/components/Dialog/Dialog.d.ts

@@ -12,7 +12,10 @@ declare const Dialog: {
     };
     Title: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & {} & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & {} & React.RefAttributes<HTMLParagraphElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {} & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        variant?: "dialog" | "sheet" | undefined;
+        side?: "top" | "right" | "bottom" | "left" | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
     Footer: {
         ({ className, ...props }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;

package/dist/types/components/Dialog/constants.d.ts

@@ -1,5 +1,8 @@
 export declare const getDialogOverlayClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const getDialogContentClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const getDialogContentClasses: (props?: ({
+    variant?: "dialog" | "sheet" | null | undefined;
+    side?: "top" | "right" | "bottom" | "left" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const getDialogHeaderClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const getDialogFooterClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const getDialogTitleClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/types/components/Tabs/Tabs.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import type { TabsProps } from "./types";
+declare const Tabs: {
+    (props: TabsProps): import("react/jsx-runtime").JSX.Element;
+    List: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & {} & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {} & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {} & React.RefAttributes<HTMLDivElement>>;
+};
+export { Tabs };

package/dist/types/components/Tabs/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const getTabsListClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const getTabsTriggerClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const getTabsContentClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/types/components/Tabs/index.d.ts

@@ -0,0 +1 @@
+export { Tabs } from "./Tabs";

package/dist/types/components/Tabs/types.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { type VariantProps } from "../../libs";
+import { getTabsContentClasses, getTabsListClasses, getTabsTriggerClasses } from "./constants";
+export type TabsProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>;
+export type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & VariantProps<typeof getTabsListClasses>;
+export type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & VariantProps<typeof getTabsTriggerClasses>;
+export type TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & VariantProps<typeof getTabsContentClasses>;

package/dist/types/index.d.ts

@@ -11,6 +11,7 @@ export * from "./components/Description";
 export * from "./components/Progress";
 export * from "./components/Separator";
 export * from "./components/Sonner";
+export * from "./components/Tabs";
 export * from "./components/Text";
 /** data input */
 export * from "./components/Form";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.15",
+  "version": "0.0.17",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -72,6 +72,7 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
@@ -129,5 +130,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "156deec6b9336336246b8b36588087609a1c91ba"
+  "gitHead": "626046c20b138596dc5bd520b29c885823531fb6"
 }

package/src/components/Card/Card.tsx

@@ -1,10 +1,13 @@
 import type {
+  CardActionsProps,
   CardContentProps,
   CardDescriptionProps,
   CardFooterProps,
   CardHeaderProps,
   CardImageProps,
+  CardTitleProps,
   CardProps,
+  CardBodyProps,
 } from "./types";
 import { cn } from "../../utilities";
 import { getCardClasses } from "./constants";
@@ -27,6 +30,10 @@ const Card = ({
 );
 
 const CardHeader = ({ className, ...props }: CardHeaderProps) => (
+  <div className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+);
+
+const CardTitle = ({ className, ...props }: CardTitleProps) => (
   <h3 className={cn("card-title", className)} {...props} />
 );
 
@@ -34,8 +41,12 @@ const CardDescription = ({ className, ...props }: CardDescriptionProps) => (
   <p className={cn("text-sm text-muted-foreground", className)} {...props} />
 );
 
+const CardBody = ({ className, ...props }: CardBodyProps) => (
+  <div className={cn("card-body", className)} {...props} />
+);
+
 const CardContent = ({ className, ...props }: CardContentProps) => (
-  <div className={cn("card-body p-6 pt-0", className)} {...props} />
+  <div className={cn("p-6 pt-0", className)} {...props} />
 );
 
 const CardImage = ({ className, src, alt, ...props }: CardImageProps) => (
@@ -44,11 +55,18 @@ const CardImage = ({ className, src, alt, ...props }: CardImageProps) => (
   </figure>
 );
 
-const CardFooter = ({ className, ...props }: CardFooterProps) => (
+const CardActions = ({ className, ...props }: CardActionsProps) => (
   <div className={cn("card-actions", className)} {...props} />
 );
 
+const CardFooter = ({ className, ...props }: CardFooterProps) => (
+  <div className={cn("flex items-center p-6 pt-0", className)} {...props} />
+);
+
+Card.Actions = CardActions;
+Card.Body = CardBody;
 Card.Header = CardHeader;
+Card.Title = CardTitle;
 Card.Content = CardContent;
 Card.Description = CardDescription;
 Card.Image = CardImage;

package/src/components/Card/types.ts

@@ -5,8 +5,11 @@ import { getCardClasses } from "./constants";
 export type CardProps = React.HTMLAttributes<HTMLDivElement> &
   VariantProps<typeof getCardClasses>;
 
+export type CardActionsProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardBodyProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
 export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
 export type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;

package/src/components/Dialog/Dialog.tsx

@@ -40,22 +40,33 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   DialogContentProps
->(({ className, children, ...props }, ref) => (
-  <DialogPrimitive.Portal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(getDialogContentClasses(), className)}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className={cn(getDialogCloseClasses())}>
-        <Cross2Icon className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPrimitive.Portal>
-));
+>(
+  (
+    { className, children, variant = "dialog", side = "right", ...props },
+    ref
+  ) => (
+    <DialogPrimitive.Portal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          getDialogContentClasses({
+            variant,
+            side: variant === "sheet" ? side : undefined,
+          }),
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className={cn(getDialogCloseClasses())}>
+          <Cross2Icon className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  )
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({ className, ...props }: DialogHeaderProps) => (

package/src/components/Dialog/constants.ts

@@ -1,11 +1,32 @@
 import { cva } from "../../libs";
 
 export const getDialogOverlayClasses = cva(
-  "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+  "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
 );
 
 export const getDialogContentClasses = cva(
-  "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-base-100 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg"
+  "fixed z-50 gap-4 p-6 shadow-lg transition bg-base-100 w-full",
+  {
+    variants: {
+      variant: {
+        dialog:
+          "border duration-200 left-[50%] top-[50%] grid max-w-lg translate-x-[-50%] translate-y-[-50%] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        sheet:
+          "ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+      },
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "dialog",
+    },
+  }
 );
 
 export const getDialogHeaderClasses = cva(

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../../utilities";
+import {
+  getTabsContentClasses,
+  getTabsListClasses,
+  getTabsTriggerClasses,
+} from "./constants";
+import type {
+  TabsContentProps,
+  TabsListProps,
+  TabsProps,
+  TabsTriggerProps,
+} from "./types";
+
+const Tabs = (props: TabsProps) => <TabsPrimitive.Root {...props} />;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  TabsListProps
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(getTabsListClasses(), className)}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  TabsTriggerProps
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(getTabsTriggerClasses(), className)}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  TabsContentProps
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(getTabsContentClasses(), className)}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+Tabs.List = TabsList;
+Tabs.Trigger = TabsTrigger;
+Tabs.Content = TabsContent;
+
+export { Tabs };

package/src/components/Tabs/constants.ts

@@ -0,0 +1,13 @@
+import { cva } from "../../libs";
+
+export const getTabsListClasses = cva(
+  "inline-flex h-9 items-center justify-center rounded-lg bg-base-200 p-1"
+);
+
+export const getTabsTriggerClasses = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-base-100 data-[state=active]:text-foreground data-[state=active]:shadow"
+);
+
+export const getTabsContentClasses = cva(
+  "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+);

package/src/components/Tabs/index.ts

@@ -0,0 +1 @@
+export { Tabs } from "./Tabs";

package/src/components/Tabs/types.ts

@@ -0,0 +1,26 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { type VariantProps } from "../../libs";
+import {
+  getTabsContentClasses,
+  getTabsListClasses,
+  getTabsTriggerClasses,
+} from "./constants";
+
+export type TabsProps = React.ComponentPropsWithoutRef<
+  typeof TabsPrimitive.Root
+>;
+
+export type TabsListProps = React.ComponentPropsWithoutRef<
+  typeof TabsPrimitive.List
+> &
+  VariantProps<typeof getTabsListClasses>;
+
+export type TabsTriggerProps = React.ComponentPropsWithoutRef<
+  typeof TabsPrimitive.Trigger
+> &
+  VariantProps<typeof getTabsTriggerClasses>;
+
+export type TabsContentProps = React.ComponentPropsWithoutRef<
+  typeof TabsPrimitive.Content
+> &
+  VariantProps<typeof getTabsContentClasses>;

package/src/index.ts

@@ -12,6 +12,7 @@ export * from "./components/Description";
 export * from "./components/Progress";
 export * from "./components/Separator";
 export * from "./components/Sonner";
+export * from "./components/Tabs";
 export * from "./components/Text";
 
 /** data input */