@mbao01/common 0.9.3 → 0.9.4

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.9.3",
+  "version": "0.9.4",
   "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/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"