@mbao01/common 0.9.3 → 0.9.5

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

@@ -1,4 +1,4 @@
-import { DrawerProps } from './types';
+import { DrawerContentProps, DrawerProps } from './types';
 declare const Drawer: {
     ({ shouldScaleBackground, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
@@ -6,7 +6,7 @@ declare const Drawer: {
     Overlay: import('react').ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-dialog').DialogOverlayProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     Trigger: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
     Close: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
-    Content: import('react').ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-dialog').DialogContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Content: import('react').ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     Header: {
         ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
@@ -22,7 +22,7 @@ declare const DrawerTrigger: import('react').ForwardRefExoticComponent<import('@
 declare const DrawerPortal: typeof import('vaul').Portal;
 declare const DrawerClose: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
 declare const DrawerOverlay: import('react').ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-dialog').DialogOverlayProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const DrawerContent: import('react').ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-dialog').DialogContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const DrawerContent: import('react').ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 declare const DrawerHeader: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;

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

@@ -4,3 +4,4 @@ export declare const getDrawerHeaderClasses: (props?: import('class-variance-aut
 export declare const getDrawerFooterClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const getDrawerOverlayClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const getDrawerTitleClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getDrawerCloseClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

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

@@ -1,2 +1,6 @@
 import { Drawer as DrawerPrimitive } from 'vaul';
 export type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;
+export type DrawerContentProps = React.ComponentProps<typeof DrawerPrimitive.Content> & {
+    showClose?: boolean;
+    closeProps?: React.ComponentProps<typeof DrawerPrimitive.Close>;
+};

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

@@ -1,5 +1,5 @@
 export declare const getSkeletonClasses: (props?: ({
-    animate?: "pulse" | null | undefined;
+    animate?: "none" | "pulse" | "wave" | "bounce" | null | undefined;
     width?: 4 | 8 | "full" | 2 | 12 | 16 | 24 | 32 | 48 | 64 | null | undefined;
     height?: 4 | 8 | "full" | 2 | 12 | 16 | 24 | 32 | 48 | 64 | null | undefined;
     round?: boolean | null | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.9.3",
+  "version": "0.9.5",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",

package/src/components/Dialog/constants.ts

@@ -41,5 +41,5 @@ export const getDialogTitleClasses = cva("text-lg font-semibold leading-none tra
 export const getDialogDescriptionClasses = cva("text-sm text-muted-foreground");
 
 export const getDialogCloseClasses = cva(
-  "absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-all duration-200 hover:opacity-100 hover:rotate-90 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+  "absolute right-4 top-4 cursor-pointer rounded-xs opacity-70 ring-offset-background transition-all duration-200 hover:opacity-100 hover:rotate-90 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
 );

package/src/components/Drawer/Drawer.tsx

@@ -1,9 +1,11 @@
 "use client";
 
 import { forwardRef } from "react";
+import { XIcon } from "lucide-react";
 import { Drawer as DrawerPrimitive } from "vaul";
 import { cn } from "../../utilities";
 import {
+  getDrawerCloseClasses,
   getDrawerContentClasses,
   getDrawerDescriptionClasses,
   getDrawerFooterClasses,
@@ -11,7 +13,7 @@ import {
   getDrawerOverlayClasses,
   getDrawerTitleClasses,
 } from "./constants";
-import { DrawerProps } from "./types";
+import { DrawerContentProps, DrawerProps } from "./types";
 
 const Drawer = ({ shouldScaleBackground = true, ...props }: DrawerProps) => (
   <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
@@ -38,8 +40,8 @@ DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
 const DrawerContent = forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+  DrawerContentProps
+>(({ className, children, showClose, closeProps, ...props }, ref) => (
   <DrawerPortal>
     <DrawerOverlay />
     <DrawerPrimitive.Content
@@ -47,8 +49,17 @@ const DrawerContent = forwardRef<
       className={cn(getDrawerContentClasses(), className)}
       {...props}
     >
-      <div className="mx-auto mt-4 h-2 w-[80px] rounded-full bg-base-300" />
+      <div className="mx-auto mt-4 h-2 min-h-2 w-[80px] rounded-full bg-base-300" />
       {children}
+      {showClose ? (
+        <DrawerPrimitive.Close
+          {...closeProps}
+          className={cn(getDrawerCloseClasses(), closeProps?.className)}
+        >
+          <XIcon className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DrawerPrimitive.Close>
+      ) : null}
     </DrawerPrimitive.Content>
   </DrawerPortal>
 ));

package/src/components/Drawer/constants.ts

@@ -13,3 +13,7 @@ export const getDrawerFooterClasses = cva("mt-auto flex flex-col gap-2 p-4");
 export const getDrawerOverlayClasses = cva("fixed inset-0 z-50 bg-black/60 backdrop-blur-sm");
 
 export const getDrawerTitleClasses = cva("text-lg font-semibold leading-none tracking-tight");
+
+export const getDrawerCloseClasses = cva(
+  "absolute right-4 top-4 cursor-pointer rounded-xs opacity-70 ring-offset-background transition-all duration-200 hover:opacity-100 hover:rotate-90 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+);

package/src/components/Drawer/types.ts

@@ -1,3 +1,8 @@
 import { Drawer as DrawerPrimitive } from "vaul";
 
 export type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;
+
+export type DrawerContentProps = React.ComponentProps<typeof DrawerPrimitive.Content> & {
+  showClose?: boolean;
+  closeProps?: React.ComponentProps<typeof DrawerPrimitive.Close>;
+};

package/src/components/Skeleton/constants.ts

@@ -1,9 +1,14 @@
 import { cva } from "../../libs";
 import { createVariants } from "../../utilities";
 
-export const getSkeletonClasses = cva("skeleton animate-pulse", {
+export const getSkeletonClasses = cva("skeleton", {
   variants: createVariants({
-    animate: { pulse: "animate-pulse" },
+    animate: {
+      none: "animate-none",
+      wave: "",
+      bounce: "animate-bounce",
+      pulse: "animate-pulse",
+    },
     width: {
       2: "w-2",
       4: "w-4",
@@ -37,5 +42,6 @@ export const getSkeletonClasses = cva("skeleton animate-pulse", {
     width: "full",
     height: 4,
     round: false,
+    animate: "pulse",
   },
 });

package/src/components/WidgetShell/WidgetShell.tsx

@@ -69,6 +69,8 @@ const WidgetShellError = ({
         </div>
         {onRetry && (
           <Button
+            outline
+            size="sm"
             type="button"
             onClick={onRetry}
             className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors duration-200 hover:bg-base-200"

package/src/components/WidgetShell/WidgetShellSkeleton.tsx

@@ -1,4 +1,6 @@
 import { cn } from "../../utilities";
+import { Flex } from "../Flex";
+import { Skeleton } from "../Skeleton";
 
 export type WidgetShellSkeletonProps = React.HTMLAttributes<HTMLDivElement> & {
   /** Number of skeleton lines to show */
@@ -14,25 +16,20 @@ const WidgetShellSkeleton = ({
   ...props
 }: WidgetShellSkeletonProps) => {
   return (
-    <div
-      className={cn(
-        "rounded-lg border bg-base-100 shadow-sm",
-        className
-      )}
-      {...props}
-    >
+    <div className={cn("rounded-lg border bg-base-100 shadow-sm", className)} {...props}>
       {header && (
-        <div className="border-b px-4 py-3">
-          <span className="skeleton inline-block h-4 w-32 rounded" />
-          <span className="skeleton mt-1.5 inline-block h-3 w-48 rounded" />
-        </div>
+        <Flex direction="col" gap={2} className="border-b px-4 py-3">
+          <Skeleton animate="wave" className="inline-block h-4 w-32 rounded" />
+          <Skeleton animate="wave" className="mt-0.5 inline-block h-3 w-48 rounded" />
+        </Flex>
       )}
       <div className="p-4">
         <div className="flex flex-col gap-3" role="status" aria-label="Loading">
           {Array.from({ length: lines }, (_, i) => (
-            <span
+            <Skeleton
+              animate="wave"
               key={i}
-              className="skeleton h-4 rounded"
+              className="h-4 rounded"
               style={{ width: `${100 - i * 15}%` }}
             />
           ))}