@mbao01/common 0.9.0 → 0.9.2

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

@@ -0,0 +1,2 @@
+import { IconContainerProps } from './types';
+export declare const IconContainer: ({ variant, size, shape, shadow, outline, soft, raised, className, children, ...props }: IconContainerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+export declare const getIconRaisedContainerClasses: (props?: ({
+    variant?: "accent" | "default" | "error" | "ghost" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    shadow?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+    raised?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getIconContainerClasses: (props?: ({
+    variant?: "accent" | "default" | "error" | "ghost" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    shape?: "rounded" | "circle" | "square" | null | undefined;
+    shadow?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+    outline?: boolean | null | undefined;
+    soft?: boolean | null | undefined;
+    raised?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1 @@
+export { IconContainer } from './IconContainer';

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

@@ -0,0 +1,3 @@
+import { VariantProps } from '../../libs';
+import { getIconContainerClasses } from './constants';
+export type IconContainerProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getIconContainerClasses>;

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

@@ -1,6 +1,6 @@
 import { KPICardProps } from './types';
 declare const KPICard: {
-    ({ title, value, change, description, sparklineData, sparklineColor, sparklineFilled, 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

@@ -8,14 +8,8 @@ export type KPICardProps = HTMLAttributes<HTMLDivElement> & {
     change?: number;
     /** Description text below value */
     description?: string;
-    /** Sparkline data points */
-    sparklineData?: number[];
-    /** Sparkline color */
-    sparklineColor?: string;
-    /** Whether sparkline is filled */
-    sparklineFilled?: boolean;
+    /** Inline chart element (e.g. Sparkline, MiniBarChart, MiniAreaChart, MiniDonutChart, MiniStackedBar) */
+    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

@@ -21,6 +21,7 @@ export * from './components/Heading';
 export * from './components/Paragraph';
 /** utility & atoms */
 export * from './components/AspectRatio';
+export * from './components/IconContainer';
 export * from './components/Image';
 export * from './components/Spinner';
 /** data display */

package/package.json

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

package/src/components/IconContainer/IconContainer.tsx

@@ -0,0 +1,44 @@
+import { cn } from "../../utilities";
+import { getIconContainerClasses, getIconRaisedContainerClasses } from "./constants";
+import { type IconContainerProps } from "./types";
+
+export const IconContainer = ({
+  variant,
+  size,
+  shape,
+  shadow,
+  outline,
+  soft,
+  raised,
+  className,
+  children,
+  ...props
+}: IconContainerProps) => {
+  const content = raised ? (
+    <div className={getIconRaisedContainerClasses({ size, variant, shadow, raised })}>
+      {children}
+    </div>
+  ) : (
+    children
+  );
+
+  return (
+    <div
+      className={cn(
+        getIconContainerClasses({
+          size,
+          soft,
+          shape,
+          variant,
+          outline,
+          raised,
+          shadow: raised ? "none" : shadow,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {content}
+    </div>
+  );
+};

package/src/components/IconContainer/constants.ts

@@ -0,0 +1,112 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+const variants = createVariants({
+  variant: {
+    accent: "bg-accent text-accent-content",
+    default: "bg-base-200 text-base-content",
+    error: "bg-error text-error-content",
+    ghost: "bg-ghost text-ghost-content",
+    info: "bg-info text-info-content",
+    neutral: "bg-neutral text-neutral-content",
+    primary: "bg-primary text-primary-content",
+    secondary: "bg-secondary text-secondary-content",
+    success: "bg-success text-success-content",
+    warning: "bg-warning text-warning-content",
+  },
+  size: {
+    xs: "size-6 text-xs",
+    sm: "size-8 text-sm",
+    md: "size-10 text-base",
+    lg: "size-12 text-lg",
+    xl: "size-16 text-2xl",
+  },
+  shape: {
+    circle: "rounded-full",
+    square: "rounded-none",
+    rounded: "rounded-lg",
+  },
+  shadow: {
+    none: "",
+    sm: "shadow-sm",
+    md: "shadow-md",
+    lg: "shadow-lg",
+    xl: "shadow-xl",
+  },
+  outline: {
+    true: "bg-transparent ring-2 ring-offset-2 ring-offset-base-100",
+  },
+  soft: {
+    true: "",
+  },
+  raised: {
+    true: "ring-3 ring-base-200 bg-base-200 [&>div]:bg-base-100 [&>div]:size-[inherit] [&>div]:rounded-[inherit]",
+  },
+});
+
+export const getIconRaisedContainerClasses = cva(
+  "inline-flex items-center justify-center shrink-0 [&>svg]:size-[1em]",
+  {
+    variants: createVariants({
+      variant: {
+        accent: "bg-accent text-accent",
+        default: "bg-base-200 text-base",
+        error: "bg-error text-error",
+        ghost: "bg-ghost text-ghost",
+        info: "bg-info text-info",
+        neutral: "bg-neutral text-neutral",
+        primary: "bg-primary text-primary",
+        secondary: "bg-secondary text-secondary",
+        success: "bg-success text-success",
+        warning: "bg-warning text-warning",
+      },
+      size: variants.size,
+      shadow: variants.shadow,
+      raised: {
+        true: "",
+      },
+    }),
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      shadow: "md",
+    },
+  }
+);
+
+export const getIconContainerClasses = cva(
+  "inline-flex items-center justify-center shrink-0 [&>svg]:size-[1em]",
+  {
+    variants,
+    compoundVariants: [
+      // soft: pastel bg with colored icon
+      { variant: "accent", soft: true, class: "bg-accent/10 text-accent" },
+      { variant: "default", soft: true, class: "bg-base-200/50 text-base-content" },
+      { variant: "error", soft: true, class: "bg-error/10 text-error" },
+      { variant: "ghost", soft: true, class: "bg-base-100 text-base-content" },
+      { variant: "info", soft: true, class: "bg-info/10 text-info" },
+      { variant: "neutral", soft: true, class: "bg-neutral/10 text-neutral" },
+      { variant: "primary", soft: true, class: "bg-primary/10 text-primary" },
+      { variant: "secondary", soft: true, class: "bg-secondary/10 text-secondary" },
+      { variant: "success", soft: true, class: "bg-success/10 text-success" },
+      { variant: "warning", soft: true, class: "bg-warning/10 text-warning" },
+      // outline: variant dictates ring color and icon color
+      { variant: "accent", outline: true, class: "ring-accent text-accent" },
+      { variant: "default", outline: true, class: "ring-base-300 text-base-content" },
+      { variant: "error", outline: true, class: "ring-error text-error" },
+      { variant: "ghost", outline: true, class: "ring-base-300 text-base-content" },
+      { variant: "info", outline: true, class: "ring-info text-info" },
+      { variant: "neutral", outline: true, class: "ring-neutral text-neutral" },
+      { variant: "primary", outline: true, class: "ring-primary text-primary" },
+      { variant: "secondary", outline: true, class: "ring-secondary text-secondary" },
+      { variant: "success", outline: true, class: "ring-success text-success" },
+      { variant: "warning", outline: true, class: "ring-warning text-warning" },
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      shape: "circle",
+      shadow: "md",
+    },
+  }
+);

package/src/components/IconContainer/index.ts

@@ -0,0 +1 @@
+export { IconContainer } from "./IconContainer";

package/src/components/IconContainer/types.ts

@@ -0,0 +1,5 @@
+import { type VariantProps } from "../../libs";
+import { getIconContainerClasses } from "./constants";
+
+export type IconContainerProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getIconContainerClasses>;

package/src/components/KPICard/KPICard.tsx

@@ -1,80 +1,44 @@
+import type { KPICardProps } from "./types";
 import { cn } from "../../utilities";
-import { Sparkline } from "../Sparkline";
 import { TrendBadge } from "../TrendBadge";
-import type { KPICardProps } from "./types";
 
 const KPICard = ({
   title,
   value,
   change,
   description,
-  sparklineData,
-  sparklineColor,
-  sparklineFilled = true,
+  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">
-          <span className="skeleton h-4 w-24 rounded" />
-          {icon && <span className="skeleton size-8 rounded-md" />}
-        </div>
-        <div className="mt-3 flex items-end justify-between gap-4">
-          <div className="flex flex-col gap-1.5">
-            <span className="skeleton h-7 w-28 rounded" />
-            <span className="skeleton h-3.5 w-20 rounded" />
-          </div>
-          <span className="skeleton h-8 w-20 rounded" />
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div
       className={cn(
-        "rounded-lg border bg-base-100 p-4 shadow-sm transition-shadow duration-300 hover:shadow-md",
+        "w-full @container/kpicard overflow-hidden 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">
-        <span className="text-sm font-medium text-base-content/60">{title}</span>
+        <span className="min-w-0 truncate text-sm font-medium text-base-content/60">{title}</span>
         {icon && (
-          <div className="flex size-8 items-center justify-center rounded-md bg-base-200/50 text-base-content/60">
+          <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-base-200/50 text-base-content/60">
             {icon}
           </div>
         )}
       </div>
       <div className="mt-3 flex items-end justify-between gap-4">
-        <div className="flex flex-col gap-1">
-          <span className="text-2xl font-bold tracking-tight">{value}</span>
+        <div className="min-w-0 flex flex-col gap-1">
+          <span className="truncate text-2xl font-bold tracking-tight">{value}</span>
           <div className="flex items-center gap-2">
             {change !== undefined && <TrendBadge value={change} size="xs" />}
             {description && (
-              <span className="text-xs text-base-content/50">{description}</span>
+              <span className="truncate text-xs text-base-content/50">{description}</span>
             )}
           </div>
         </div>
-        {sparklineData && sparklineData.length >= 2 && (
-          <Sparkline
-            data={sparklineData}
-            color={sparklineColor ?? (change !== undefined && change >= 0 ? "oklch(0.7 0.2 150)" : "oklch(0.65 0.25 25)")}
-            filled={sparklineFilled}
-            width={80}
-            height={32}
-          />
-        )}
+        {chart && <div className="shrink-0 @max-[160px]/kpicard:hidden">{chart}</div>}
       </div>
     </div>
   );

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

@@ -9,14 +9,8 @@ export type KPICardProps = HTMLAttributes<HTMLDivElement> & {
   change?: number;
   /** Description text below value */
   description?: string;
-  /** Sparkline data points */
-  sparklineData?: number[];
-  /** Sparkline color */
-  sparklineColor?: string;
-  /** Whether sparkline is filled */
-  sparklineFilled?: boolean;
+  /** Inline chart element (e.g. Sparkline, MiniBarChart, MiniAreaChart, MiniDonutChart, MiniStackedBar) */
+  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

@@ -24,6 +24,7 @@ export * from "./components/Paragraph";
 
 /** utility & atoms */
 export * from "./components/AspectRatio";
+export * from "./components/IconContainer";
 export * from "./components/Image";
 export * from "./components/Spinner";