@mbao01/common 0.9.2 → 0.9.4

package/dist/types/components/Chart/stories/args/index.d.ts

@@ -1,4 +1,4 @@
-import { AreaProps, BarProps, LineProps, PieProps, RadarProps, RadialBarProps, XAxisProps, YAxisProps } from 'recharts';
+import { AreaProps, BarProps, LineProps, PieProps, RadarProps, RadialBarProps, ScatterProps, XAxisProps, YAxisProps } from 'recharts';
 import { ArgTypes } from '@storybook/react-vite';
 import { CartesianChartProps, PolarChartProps } from 'recharts/types/util/types';
 import { Flatten, OmitSVGElement } from './types';
@@ -60,4 +60,16 @@ export declare const radarArgKey: {
     radarChart: "radarChart";
 };
 export declare const radarChartArgs: ArgTypes;
+export type ScatterChartProps = {
+    scatter: OmitSVGElement<ScatterProps>;
+    scatterChart: CartesianChartProps;
+} & AxisProps;
+export type ScatterChartArgs = Partial<Flatten<ScatterChartProps>> & {};
+export declare const scatterArgKey: {
+    scatter: "scatter";
+    scatterChart: "scatterChart";
+    xAxis: "xAxis";
+    yAxis: "yAxis";
+};
+export declare const scatterChartArgs: ArgTypes;
 export {};

package/dist/types/components/Chart/stories/args/scatterArgs.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from '@storybook/react-vite';
+export declare const scatterArgs: ArgTypes;

package/dist/types/components/Chart/stories/args/scatterChartArgs.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from '@storybook/react-vite';
+export declare const scatterChartArgs: ArgTypes;

package/dist/types/components/Chart/stories/examples/ScatterChart.d.ts

@@ -0,0 +1,17 @@
+import { ScatterChartProps } from '../args';
+/**
+ * ## Parent
+ *
+ * The ScatterChart can be used within: `<Chart />`
+ *
+ * ## Children
+ *
+ * The ScatterChart can be used with the following child components: `<XAxis />`, `<YAxis />`, `<ZAxis />`,
+ * `<ReferenceArea />`, `<ReferenceDot />`, `<ReferenceLine />`, `<CartesianGrid />`,
+ * `<ChartLegend />`, `<ChartTooltip />`, `<Scatter />`, `<Customized />` or valid svg elements.
+ */
+export declare const ScatterChartExample: (props: ScatterChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSeriesScatterChartExample: (props: ScatterChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BubbleScatterChartExample: (props: ScatterChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WithLineScatterChartExample: (props: ScatterChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ShapesScatterChartExample: (props: ScatterChartProps) => import("react/jsx-runtime").JSX.Element;

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/index.d.ts

@@ -84,6 +84,7 @@ export * from './components/Widget';
 export * from './components/WidgetShell';
 /** molecules */
 export * from './components/Banner';
+export * from './components/Drawer';
 export * from './components/Empty';
 export * from './components/Sidebar';
 export * from './components/Stepper';

package/package.json

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

package/src/components/Chart/stories/args/index.ts

@@ -5,6 +5,7 @@ import type {
   PieProps,
   RadarProps,
   RadialBarProps,
+  ScatterProps,
   XAxisProps,
   YAxisProps,
 } from "recharts";
@@ -24,6 +25,8 @@ import { radarArgs } from "./radarArgs";
 import { radarChartArgs as radarChartComponentArgs } from "./radarChartArgs";
 import { radialBarArgs } from "./radialBarArgs";
 import { radialBarChartArgs as radialBarChartComponentArgs } from "./radialBarChartArgs";
+import { scatterArgs } from "./scatterArgs";
+import { scatterChartArgs as scatterChartComponentArgs } from "./scatterChartArgs";
 import { OmitSVGElement } from "./types";
 import { xAxisArgs } from "./xAxisArgs";
 import { yAxisArgs } from "./yAxisArgs";
@@ -177,3 +180,29 @@ export const radarChartArgs: ArgTypes = {
   ...categorizeArgs(radarChartComponentArgs, radarArgKey.radarChart),
   ...categorizeArgs(radarArgs, radarArgKey.radar),
 };
+
+/**
+ * Scatter chart
+ */
+type ScatterArgKey = "scatter" | "scatterChart" | "xAxis" | "yAxis";
+
+export type ScatterChartProps = {
+  scatter: OmitSVGElement<ScatterProps>;
+  scatterChart: CartesianChartProps;
+} & AxisProps;
+
+export type ScatterChartArgs = Partial<Flatten<ScatterChartProps>> & {};
+
+export const scatterArgKey = {
+  scatter: "scatter",
+  scatterChart: "scatterChart",
+  xAxis: "xAxis",
+  yAxis: "yAxis",
+} satisfies Record<string, ScatterArgKey>;
+
+export const scatterChartArgs: ArgTypes = {
+  ...categorizeArgs(scatterChartComponentArgs, scatterArgKey.scatterChart),
+  ...categorizeArgs(xAxisArgs, scatterArgKey.xAxis),
+  ...categorizeArgs(yAxisArgs, scatterArgKey.yAxis),
+  ...categorizeArgs(scatterArgs, scatterArgKey.scatter),
+};

package/src/components/Chart/stories/args/scatterArgs.ts

@@ -0,0 +1,79 @@
+import { type ArgTypes } from "@storybook/react-vite";
+import { generalStyleArgs, hide, labelDescription, labelSummary } from "./stylesArgs";
+import { animationArgs } from "./animationArgs";
+import { dataKey, zAxisId } from "./cartesianSharedArgs";
+
+export const scatterArgs: ArgTypes = {
+  ...generalStyleArgs,
+  ...animationArgs,
+  dataKey,
+  zAxisId,
+  hide,
+  name: {
+    description: `The name of data. This option will be used in tooltip and legend to represent a scatter.
+    If no value was set to this option, the value of dataKey will be used alternatively.`,
+    table: {
+      type: {
+        summary: "string | number",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  shape: {
+    description:
+      "If a string set, specified symbol will be used to show scatter item. If ReactElement, the element will be cloned to render scatter item. If a function, it will be called to render scatter item.",
+    table: {
+      type: {
+        summary: "'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | ReactElement | Function",
+      },
+      defaultValue: {
+        summary: "'circle'",
+      },
+      category: "Style",
+    },
+    control: "select",
+    options: ["circle", "cross", "diamond", "square", "star", "triangle", "wye"],
+  },
+  line: {
+    description:
+      "If false set, line will not be drawn. If true set, line will be drawn which have the props calculated internally. If object set, line will be drawn which have the props merged by the internal calculated props and the option.",
+    table: {
+      type: {
+        summary: "boolean | Object | ReactElement | Function",
+      },
+      defaultValue: {
+        summary: "false",
+      },
+      category: "Style",
+    },
+    control: "boolean",
+  },
+  lineType: {
+    description: "The type of line in the scatter chart, 'joint' connects adjacent points, 'fitting' uses a fitting line.",
+    table: {
+      type: {
+        summary: "'joint' | 'fitting'",
+      },
+      defaultValue: {
+        summary: "'joint'",
+      },
+      category: "Style",
+    },
+    control: "radio",
+    options: ["joint", "fitting"],
+  },
+  label: {
+    description: labelDescription,
+    table: {
+      type: {
+        summary: labelSummary,
+      },
+      defaultValue: {
+        summary: "false",
+      },
+      category: "Style",
+    },
+    control: "boolean",
+  },
+};

package/src/components/Chart/stories/args/scatterChartArgs.ts

@@ -0,0 +1,6 @@
+import { type ArgTypes } from "@storybook/react-vite";
+import { categoricalChartArgs } from "./chartArgs";
+
+export const scatterChartArgs: ArgTypes = {
+  ...categoricalChartArgs,
+};

package/src/components/Chart/stories/examples/ScatterChart.tsx

@@ -0,0 +1,263 @@
+import { CartesianGrid, Scatter, ScatterChart, XAxis, YAxis, ZAxis } from "recharts";
+import { Chart } from "../../Chart";
+import {
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "../../components";
+import { type ChartConfig } from "../../types";
+import { ScatterChartProps } from "../args";
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig;
+
+/**
+ * ## Parent
+ *
+ * The ScatterChart can be used within: `<Chart />`
+ *
+ * ## Children
+ *
+ * The ScatterChart can be used with the following child components: `<XAxis />`, `<YAxis />`, `<ZAxis />`,
+ * `<ReferenceArea />`, `<ReferenceDot />`, `<ReferenceLine />`, `<CartesianGrid />`,
+ * `<ChartLegend />`, `<ChartTooltip />`, `<Scatter />`, `<Customized />` or valid svg elements.
+ */
+export const ScatterChartExample = (props: ScatterChartProps) => {
+  return (
+    <Chart config={chartConfig} className="h-[300px] w-full">
+      <ScatterChart {...props.scatterChart}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis {...props.xAxis} />
+        <YAxis {...props.yAxis} />
+        <ChartTooltip cursor={{ strokeDasharray: "3 3" }} content={<ChartTooltipContent />} />
+        <Scatter {...props.scatter} />
+      </ScatterChart>
+    </Chart>
+  );
+};
+
+export const MultiSeriesScatterChartExample = (props: ScatterChartProps) => {
+  const desktopData = [
+    { x: 100, y: 200 },
+    { x: 120, y: 100 },
+    { x: 170, y: 300 },
+    { x: 140, y: 250 },
+    { x: 150, y: 400 },
+    { x: 110, y: 280 },
+  ];
+
+  const mobileData = [
+    { x: 200, y: 260 },
+    { x: 240, y: 290 },
+    { x: 190, y: 340 },
+    { x: 198, y: 250 },
+    { x: 180, y: 280 },
+    { x: 210, y: 220 },
+  ];
+
+  return (
+    <Chart config={chartConfig} className="h-[300px] w-full">
+      <ScatterChart {...props.scatterChart}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis {...props.xAxis} />
+        <YAxis {...props.yAxis} />
+        <ChartTooltip cursor={{ strokeDasharray: "3 3" }} content={<ChartTooltipContent />} />
+        <Scatter
+          {...props.scatter}
+          name="Desktop"
+          data={desktopData}
+          fill="var(--color-desktop)"
+        />
+        <Scatter
+          {...props.scatter}
+          name="Mobile"
+          data={mobileData}
+          fill="var(--color-mobile)"
+        />
+        <ChartLegend content={<ChartLegendContent />} />
+      </ScatterChart>
+    </Chart>
+  );
+};
+
+export const BubbleScatterChartExample = (props: ScatterChartProps) => {
+  const chartConfig = {
+    visitors: {
+      label: "Visitors",
+      color: "hsl(var(--chart-1))",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Chart config={chartConfig} className="h-[300px] w-full">
+      <ScatterChart {...props.scatterChart}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis
+          dataKey="hours"
+          name="Hours Spent"
+          type="number"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          {...props.xAxis}
+        />
+        <YAxis
+          dataKey="score"
+          name="Test Score"
+          type="number"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          {...props.yAxis}
+        />
+        <ZAxis dataKey="students" range={[60, 400]} name="Students" />
+        <ChartTooltip cursor={{ strokeDasharray: "3 3" }} content={<ChartTooltipContent />} />
+        <Scatter
+          name="Visitors"
+          fill="var(--color-visitors)"
+          {...props.scatter}
+        />
+      </ScatterChart>
+    </Chart>
+  );
+};
+
+export const WithLineScatterChartExample = (props: ScatterChartProps) => {
+  const chartConfig = {
+    performance: {
+      label: "Performance",
+      color: "hsl(var(--chart-1))",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Chart config={chartConfig} className="h-[300px] w-full">
+      <ScatterChart {...props.scatterChart}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis
+          dataKey="x"
+          name="Experience (years)"
+          type="number"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          {...props.xAxis}
+        />
+        <YAxis
+          dataKey="y"
+          name="Salary ($k)"
+          type="number"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          {...props.yAxis}
+        />
+        <ChartTooltip cursor={{ strokeDasharray: "3 3" }} content={<ChartTooltipContent />} />
+        <Scatter
+          name="Performance"
+          fill="var(--color-performance)"
+          line={{ stroke: "var(--color-performance)", strokeWidth: 2 }}
+          lineType="fitting"
+          {...props.scatter}
+        />
+      </ScatterChart>
+    </Chart>
+  );
+};
+
+export const ShapesScatterChartExample = (props: ScatterChartProps) => {
+  const chartConfig = {
+    series1: {
+      label: "Series A",
+      color: "hsl(var(--chart-1))",
+    },
+    series2: {
+      label: "Series B",
+      color: "hsl(var(--chart-2))",
+    },
+    series3: {
+      label: "Series C",
+      color: "hsl(var(--chart-3))",
+    },
+  } satisfies ChartConfig;
+
+  const series1Data = [
+    { x: 10, y: 30 },
+    { x: 30, y: 50 },
+    { x: 50, y: 70 },
+    { x: 70, y: 40 },
+    { x: 90, y: 60 },
+  ];
+
+  const series2Data = [
+    { x: 20, y: 80 },
+    { x: 40, y: 20 },
+    { x: 60, y: 50 },
+    { x: 80, y: 90 },
+    { x: 100, y: 30 },
+  ];
+
+  const series3Data = [
+    { x: 15, y: 45 },
+    { x: 35, y: 65 },
+    { x: 55, y: 25 },
+    { x: 75, y: 85 },
+    { x: 95, y: 55 },
+  ];
+
+  return (
+    <Chart config={chartConfig} className="h-[300px] w-full">
+      <ScatterChart {...props.scatterChart}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis
+          dataKey="x"
+          type="number"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          {...props.xAxis}
+        />
+        <YAxis
+          dataKey="y"
+          type="number"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          {...props.yAxis}
+        />
+        <ChartTooltip cursor={{ strokeDasharray: "3 3" }} content={<ChartTooltipContent />} />
+        <Scatter
+          name="Series A"
+          data={series1Data}
+          fill="var(--color-series1)"
+          shape="circle"
+          {...props.scatter}
+        />
+        <Scatter
+          name="Series B"
+          data={series2Data}
+          fill="var(--color-series2)"
+          shape="diamond"
+          {...props.scatter}
+        />
+        <Scatter
+          name="Series C"
+          data={series3Data}
+          fill="var(--color-series3)"
+          shape="triangle"
+          {...props.scatter}
+        />
+        <ChartLegend content={<ChartLegendContent />} />
+      </ScatterChart>
+    </Chart>
+  );
+};

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"

package/src/index.ts

@@ -92,6 +92,7 @@ export * from "./components/WidgetShell";
 
 /** molecules */
 export * from "./components/Banner";
+export * from "./components/Drawer";
 export * from "./components/Empty";
 export * from "./components/Sidebar";
 export * from "./components/Stepper";