@mbao01/common 0.9.1 → 0.9.3

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

@@ -1,6 +1,6 @@
 import { KPICardProps } from './types';
 declare const KPICard: {
-    ({ title, value, change, description, chart, icon, loading, className, ...props }: KPICardProps): import("react/jsx-runtime").JSX.Element;
+    ({ title, value, change, description, chart, icon, className, ...props }: KPICardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { KPICard };

package/dist/types/components/KPICard/KPICardSkeleton.d.ts

@@ -0,0 +1,11 @@
+export type KPICardSkeletonProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Whether to show the icon placeholder */
+    icon?: boolean;
+    /** Whether to show the chart placeholder */
+    chart?: boolean;
+};
+declare const KPICardSkeleton: {
+    ({ icon, chart, className, ...props }: KPICardSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { KPICardSkeleton };

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

@@ -1,2 +1,4 @@
 export { KPICard } from './KPICard';
+export { KPICardSkeleton } from './KPICardSkeleton';
 export type { KPICardProps } from './types';
+export type { KPICardSkeletonProps } from './KPICardSkeleton';

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

@@ -12,6 +12,4 @@ export type KPICardProps = HTMLAttributes<HTMLDivElement> & {
     chart?: ReactNode;
     /** Icon to show in the card */
     icon?: ReactNode;
-    /** Loading state */
-    loading?: boolean;
 };

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

@@ -1,6 +1,25 @@
 import { WidgetShellProps } from './types';
 declare const WidgetShell: {
-    ({ state, title, description, children, className, errorContent, emptyContent, skeletonLines, onRetry, ...props }: WidgetShellProps): import("react/jsx-runtime").JSX.Element;
+    ({ title, description, action, children, className, ...props }: WidgetShellProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
+    Empty: {
+        ({ children }: {
+            children?: React.ReactNode;
+        }): string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Error: {
+        ({ children, onRetry, }: {
+            children?: React.ReactNode;
+            onRetry?: () => void;
+        }): string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Loading: {
+        ({ lines }: {
+            lines?: number;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
 };
 export { WidgetShell };

package/dist/types/components/WidgetShell/WidgetShellSkeleton.d.ts

@@ -0,0 +1,11 @@
+export type WidgetShellSkeletonProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Number of skeleton lines to show */
+    lines?: number;
+    /** Whether to show the header skeleton */
+    header?: boolean;
+};
+declare const WidgetShellSkeleton: {
+    ({ lines, header, className, ...props }: WidgetShellSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { WidgetShellSkeleton };

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

@@ -1,2 +1,4 @@
 export { WidgetShell } from './WidgetShell';
-export type { WidgetShellProps, WidgetShellState } from './types';
+export { WidgetShellSkeleton } from './WidgetShellSkeleton';
+export type { WidgetShellProps } from './types';
+export type { WidgetShellSkeletonProps } from './WidgetShellSkeleton';

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

@@ -1,20 +1,11 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export type WidgetShellState = "loading" | "error" | "empty" | "ready";
 export type WidgetShellProps = HTMLAttributes<HTMLDivElement> & {
-    /** Current state of the widget */
-    state?: WidgetShellState;
     /** Widget title */
     title?: ReactNode;
     /** Widget description */
     description?: ReactNode;
+    /** Content rendered in the top-right of the header (e.g. actions, icons, badges) */
+    action?: ReactNode;
     /** Content to show when state is "ready" */
     children: ReactNode;
-    /** Custom content for error state */
-    errorContent?: ReactNode;
-    /** Custom content for empty state */
-    emptyContent?: ReactNode;
-    /** Number of skeleton lines to show in loading state */
-    skeletonLines?: number;
-    /** Callback when retry is clicked in error state */
-    onRetry?: () => void;
 };

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.1",
+  "version": "0.9.3",
   "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/KPICard/KPICard.tsx

@@ -1,6 +1,5 @@
 import type { KPICardProps } from "./types";
 import { cn } from "../../utilities";
-import { Skeleton } from "../Skeleton";
 import { TrendBadge } from "../TrendBadge";
 
 const KPICard = ({
@@ -10,34 +9,9 @@ const KPICard = ({
   description,
   chart,
   icon,
-  loading = false,
   className,
   ...props
 }: KPICardProps) => {
-  if (loading) {
-    return (
-      <div
-        className={cn(
-          "rounded-lg border bg-base-100 p-4 shadow-sm transition-shadow duration-300 hover:shadow-md",
-          className
-        )}
-        {...props}
-      >
-        <div className="flex items-center justify-between">
-          <Skeleton className="h-4 w-24 rounded" />
-          {icon && <Skeleton className="size-8 rounded-md" />}
-        </div>
-        <div className="mt-4 flex items-end justify-between gap-4">
-          <div className="flex flex-col gap-1.5">
-            <Skeleton className="h-7 w-28 rounded" />
-            <Skeleton className="h-3.5 w-20 rounded" />
-          </div>
-          <Skeleton className="h-8 w-20 rounded" />
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div
       className={cn(

package/src/components/KPICard/KPICardSkeleton.tsx

@@ -0,0 +1,42 @@
+import { cn } from "../../utilities";
+import { Skeleton } from "../Skeleton";
+
+export type KPICardSkeletonProps = React.HTMLAttributes<HTMLDivElement> & {
+  /** Whether to show the icon placeholder */
+  icon?: boolean;
+  /** Whether to show the chart placeholder */
+  chart?: boolean;
+};
+
+const KPICardSkeleton = ({
+  icon = true,
+  chart = true,
+  className,
+  ...props
+}: KPICardSkeletonProps) => {
+  return (
+    <div
+      className={cn(
+        "w-full overflow-hidden rounded-lg border bg-base-100 p-4 shadow-sm",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-4 w-24 rounded" />
+        {icon && <Skeleton className="size-8 rounded-md" />}
+      </div>
+      <div className="mt-4 flex items-end justify-between gap-4">
+        <div className="flex flex-col gap-1.5">
+          <Skeleton className="h-7 w-28 rounded" />
+          <Skeleton className="h-3.5 w-20 rounded" />
+        </div>
+        {chart && <Skeleton className="h-8 w-20 rounded" />}
+      </div>
+    </div>
+  );
+};
+
+KPICardSkeleton.displayName = "KPICardSkeleton";
+
+export { KPICardSkeleton };

package/src/components/KPICard/index.ts

@@ -1,2 +1,4 @@
 export { KPICard } from "./KPICard";
+export { KPICardSkeleton } from "./KPICardSkeleton";
 export type { KPICardProps } from "./types";
+export type { KPICardSkeletonProps } from "./KPICardSkeleton";

package/src/components/KPICard/types.ts

@@ -13,6 +13,4 @@ export type KPICardProps = HTMLAttributes<HTMLDivElement> & {
   chart?: ReactNode;
   /** Icon to show in the card */
   icon?: ReactNode;
-  /** Loading state */
-  loading?: boolean;
 };

package/src/components/WidgetShell/WidgetShell.tsx

@@ -1,17 +1,14 @@
 import { AlertCircleIcon, InboxIcon, RefreshCwIcon } from "lucide-react";
-import { cn } from "../../utilities";
 import type { WidgetShellProps } from "./types";
+import { cn } from "../../utilities";
+import { Button } from "../Button";
 
 const WidgetShell = ({
-  state = "ready",
   title,
   description,
+  action,
   children,
   className,
-  errorContent,
-  emptyContent,
-  skeletonLines = 3,
-  onRetry,
   ...props
 }: WidgetShellProps) => {
   return (
@@ -22,80 +19,85 @@ const WidgetShell = ({
       )}
       {...props}
     >
-      {(title || description) && (
-        <div className="border-b px-4 py-3">
-          {title && (
-            <h3 className="text-sm font-semibold">
-              {state === "loading" ? (
-                <span className="skeleton inline-block h-4 w-32 rounded" />
-              ) : (
-                title
-              )}
-            </h3>
-          )}
-          {description && (
-            <p className="mt-0.5 text-xs text-base-content/60">
-              {state === "loading" ? (
-                <span className="skeleton inline-block h-3 w-48 rounded" />
-              ) : (
-                description
-              )}
-            </p>
-          )}
+      {(title || description || action) && (
+        <div className="flex items-start justify-between border-b px-4 py-3">
+          <div className="min-w-0">
+            {title && <h3 className="text-sm font-semibold">{title}</h3>}
+            {description && <p className="mt-0.5 text-xs text-base-content/60">{description}</p>}
+          </div>
+          {action && <div className="shrink-0">{action}</div>}
         </div>
       )}
 
-      <div className="p-4">
-        {state === "loading" && (
-          <div className="flex flex-col gap-3" role="status" aria-label="Loading">
-            {Array.from({ length: skeletonLines }, (_, i) => (
-              <span
-                key={i}
-                className="skeleton h-4 rounded"
-                style={{ width: `${100 - i * 15}%` }}
-              />
-            ))}
-          </div>
-        )}
+      <div className="p-4">{children}</div>
+    </div>
+  );
+};
+
+WidgetShell.displayName = "WidgetShell";
 
-        {state === "error" &&
-          (errorContent ?? (
-            <div className="flex flex-col items-center justify-center gap-3 py-6 text-center">
-              <AlertCircleIcon className="size-8 text-error/60" />
-              <div>
-                <p className="text-sm font-medium">Something went wrong</p>
-                <p className="text-xs text-base-content/60">Failed to load data</p>
-              </div>
-              {onRetry && (
-                <button
-                  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"
-                >
-                  <RefreshCwIcon className="size-3" />
-                  Retry
-                </button>
-              )}
-            </div>
-          ))}
+const WidgetShellEmpty = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    children ?? (
+      <div className="flex flex-col items-center justify-center gap-3 py-6 text-center">
+        <InboxIcon className="size-8 text-base-content/30" />
+        <div>
+          <p className="text-sm font-medium">No data</p>
+          <p className="text-xs text-base-content/60">Nothing to display yet</p>
+        </div>
+      </div>
+    )
+  );
+};
 
-        {state === "empty" &&
-          (emptyContent ?? (
-            <div className="flex flex-col items-center justify-center gap-3 py-6 text-center">
-              <InboxIcon className="size-8 text-base-content/30" />
-              <div>
-                <p className="text-sm font-medium">No data</p>
-                <p className="text-xs text-base-content/60">Nothing to display yet</p>
-              </div>
-            </div>
-          ))}
+WidgetShellEmpty.displayName = "WidgetShellEmpty";
 
-        {state === "ready" && children}
+const WidgetShellError = ({
+  children,
+  onRetry,
+}: {
+  children?: React.ReactNode;
+  onRetry?: () => void;
+}) => {
+  return (
+    children ?? (
+      <div className="flex flex-col items-center justify-center gap-3 py-6 text-center">
+        <AlertCircleIcon className="size-8 text-error/60" />
+        <div>
+          <p className="text-sm font-medium">Something went wrong</p>
+          <p className="text-xs text-base-content/60">Failed to load data</p>
+        </div>
+        {onRetry && (
+          <Button
+            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"
+          >
+            <RefreshCwIcon className="size-3 shrink-0" />
+            Retry
+          </Button>
+        )}
       </div>
+    )
+  );
+};
+
+WidgetShellError.displayName = "WidgetShellError";
+
+const WidgetShellLoading = ({ lines = 4 }: { lines?: number }) => {
+  return (
+    <div className="flex flex-col gap-3" role="status" aria-label="Loading">
+      {Array.from({ length: lines }, (_, i) => (
+        <span key={i} className="skeleton h-4 rounded" style={{ width: `${100 - i * 15}%` }} />
+      ))}
     </div>
   );
 };
 
-WidgetShell.displayName = "WidgetShell";
+WidgetShellLoading.displayName = "WidgetShellLoading";
+
+WidgetShell.Empty = WidgetShellEmpty;
+WidgetShell.Error = WidgetShellError;
+WidgetShell.Loading = WidgetShellLoading;
 
 export { WidgetShell };

package/src/components/WidgetShell/WidgetShellSkeleton.tsx

@@ -0,0 +1,47 @@
+import { cn } from "../../utilities";
+
+export type WidgetShellSkeletonProps = React.HTMLAttributes<HTMLDivElement> & {
+  /** Number of skeleton lines to show */
+  lines?: number;
+  /** Whether to show the header skeleton */
+  header?: boolean;
+};
+
+const WidgetShellSkeleton = ({
+  lines = 3,
+  header = true,
+  className,
+  ...props
+}: WidgetShellSkeletonProps) => {
+  return (
+    <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>
+      )}
+      <div className="p-4">
+        <div className="flex flex-col gap-3" role="status" aria-label="Loading">
+          {Array.from({ length: lines }, (_, i) => (
+            <span
+              key={i}
+              className="skeleton h-4 rounded"
+              style={{ width: `${100 - i * 15}%` }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+WidgetShellSkeleton.displayName = "WidgetShellSkeleton";
+
+export { WidgetShellSkeleton };

package/src/components/WidgetShell/index.ts

@@ -1,2 +1,4 @@
 export { WidgetShell } from "./WidgetShell";
-export type { WidgetShellProps, WidgetShellState } from "./types";
+export { WidgetShellSkeleton } from "./WidgetShellSkeleton";
+export type { WidgetShellProps } from "./types";
+export type { WidgetShellSkeletonProps } from "./WidgetShellSkeleton";

package/src/components/WidgetShell/types.ts

@@ -1,22 +1,12 @@
 import type { HTMLAttributes, ReactNode } from "react";
 
-export type WidgetShellState = "loading" | "error" | "empty" | "ready";
-
 export type WidgetShellProps = HTMLAttributes<HTMLDivElement> & {
-  /** Current state of the widget */
-  state?: WidgetShellState;
   /** Widget title */
   title?: ReactNode;
   /** Widget description */
   description?: ReactNode;
+  /** Content rendered in the top-right of the header (e.g. actions, icons, badges) */
+  action?: ReactNode;
   /** Content to show when state is "ready" */
   children: ReactNode;
-  /** Custom content for error state */
-  errorContent?: ReactNode;
-  /** Custom content for empty state */
-  emptyContent?: ReactNode;
-  /** Number of skeleton lines to show in loading state */
-  skeletonLines?: number;
-  /** Callback when retry is clicked in error state */
-  onRetry?: () => void;
 };

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";