@mbao01/common 0.9.1 → 0.9.2

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

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

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