@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/themes/katon/dashboard-layout.tsx

@@ -0,0 +1,1080 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../infrastructure/utilities/utils"
+
+/* -------------------------------------------------------------------------- */
+/*                               DashboardLayout                              */
+/* -------------------------------------------------------------------------- */
+
+export interface DashboardLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  className?: string
+  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "default"
+  hasBackgroundEffects?: boolean
+}
+
+function getLayoutMaxWidth(maxWidth?: DashboardLayoutProps["maxWidth"]) {
+  switch (maxWidth) {
+    case "sm":
+      return "max-w-screen-sm"
+    case "md":
+      return "max-w-screen-md"
+    case "lg":
+      return "max-w-screen-lg"
+    case "xl":
+      return "max-w-screen-xl"
+    case "2xl":
+      return "max-w-screen-2xl"
+    case "full":
+      return "max-w-full"
+    case "default":
+    default:
+      return "max-w-7xl"
+  }
+}
+
+export function DashboardLayoutRoot({
+  children,
+  className,
+  maxWidth = "default",
+  hasBackgroundEffects = false,
+  ...props
+}: DashboardLayoutProps) {
+  const maxW = getLayoutMaxWidth(maxWidth)
+
+  return (
+    <div
+      data-slot="dashboard-layout"
+      className={cn(
+        "relative w-full min-h-screen flex flex-col gap-6 p-4 sm:p-6 md:p-8 mx-auto text-foreground antialiased",
+        maxW,
+        className
+      )}
+      {...props}
+    >
+      {hasBackgroundEffects && (
+        <div className="fixed inset-0 z-0 overflow-hidden pointer-events-none" aria-hidden="true">
+          <div className="absolute aspect-square -top-[10%] -left-[5%] w-[35%] rounded-full bg-primary/10 blur-[130px]" />
+          <div className="absolute aspect-square top-[30%] -right-[15%] w-[35%] rounded-full bg-primary/10 blur-[150px]" />
+          <div className="absolute aspect-square -bottom-[10%] left-[20%] w-[30%] rounded-full bg-primary/15 blur-[160px]" />
+        </div>
+      )}
+      <div className="relative z-1 flex flex-col gap-6 w-full flex-1">{children}</div>
+    </div>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                           Header & Subcomponents                           */
+/* -------------------------------------------------------------------------- */
+
+export interface DashboardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardHeader({ children, className, ...props}: DashboardHeaderProps) {
+  return (
+    <header
+      data-slot="dashboard-header"
+      className={cn("flex flex-col gap-4 w-full", className)}
+      {...props}
+    >
+      {children}
+    </header>
+  )
+}
+
+export interface DashboardHeaderTopProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardHeaderTop({ children, className, ...props }: DashboardHeaderTopProps) {
+  return (
+    <div
+      data-slot="dashboard-header-top"
+      className={cn("flex items-center justify-between gap-4 flex-wrap", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface DashboardHeaderStartProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardHeaderStart({ children, className, ...props }: DashboardHeaderStartProps) {
+  return (
+    <div
+      data-slot="dashboard-header-start"
+      className={cn("flex items-center gap-3 min-w-0", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface DashboardIconProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  className?: string
+  size?: "sm" | "md" | "lg"
+}
+
+export function DashboardIcon({ children, className, size = "md", ...props }: DashboardIconProps) {
+  const sizeClasses = {
+    sm: "w-7 h-7 text-xs rounded-lg",
+    md: "w-9 h-9 text-base rounded-xl",
+    lg: "w-11 h-11 text-lg rounded-2xl",
+  }[size]
+
+  return (
+    <div
+      data-slot="dashboard-icon"
+      className={cn(
+        "flex shrink-0 items-center justify-center bg-primary/15 text-primary border border-primary/20 backdrop-blur-md shadow-xs",
+        sizeClasses,
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface DashboardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardTitle({ children, className, ...props }: DashboardTitleProps) {
+  return (
+    <h1
+      data-slot="dashboard-title"
+      className={cn(
+        "text-xl sm:text-2xl font-semibold tracking-tight text-foreground flex items-center gap-2 truncate",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </h1>
+  )
+}
+
+export interface DashboardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardDescription({ children, className, ...props }: DashboardDescriptionProps) {
+  return (
+    <p
+      data-slot="dashboard-description"
+      className={cn("text-xs sm:text-sm text-muted-foreground", className)}
+      {...props}
+    >
+      {children}
+    </p>
+  )
+}
+
+export interface DashboardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardActions({ children, className, ...props }: DashboardActionsProps) {
+  return (
+    <div
+      data-slot="dashboard-actions"
+      className={cn("flex items-center gap-2 shrink-0 ml-auto", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                           Quick Metrics / Stat Tabs                        */
+/* -------------------------------------------------------------------------- */
+
+export interface DashboardMetricsProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  className?: string
+  cols?: 1 | 2 | 3 | 4 | 5 | 6 | "auto"
+}
+
+export function DashboardMetrics({
+  children,
+  className,
+  cols = "auto",
+  ...props
+}: DashboardMetricsProps) {
+  const colClasses = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-2 sm:grid-cols-3",
+    4: "grid-cols-2 sm:grid-cols-4",
+    5: "grid-cols-2 sm:grid-cols-3 md:grid-cols-5",
+    6: "grid-cols-2 sm:grid-cols-3 md:grid-cols-6",
+    auto: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5",
+  }[cols]
+
+  return (
+    <div
+      data-slot="dashboard-metrics"
+      className={cn("grid gap-2.5 sm:gap-3 w-full", colClasses, className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface DashboardMetricCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  label: React.ReactNode
+  value?: React.ReactNode
+  icon?: React.ReactNode
+  badge?: React.ReactNode
+  active?: boolean
+  onClick?: () => void
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardMetricCard({
+  label,
+  value,
+  icon,
+  badge,
+  active = false,
+  onClick,
+  children,
+  className,
+  ...props
+}: DashboardMetricCardProps) {
+  const isClickable = !!onClick
+
+  return (
+    <div
+      data-slot="dashboard-metric-card"
+      data-active={active}
+      onClick={onClick}
+      className={cn(
+        "group relative flex flex-col justify-between gap-2 rounded-xl p-3 sm:p-3.5 transition-all duration-200 backdrop-blur-xl select-none",
+        "bg-card/60 dark:bg-card/40 border border-border/40 hover:border-border/80 shadow-xs",
+        active && "border-primary/50 bg-primary/10 shadow-primary/5 ring-1 ring-primary/30",
+        isClickable && "cursor-pointer hover:bg-card/80 dark:hover:bg-card/60",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-xs font-medium text-muted-foreground group-hover:text-foreground transition-colors truncate">
+          {label}
+        </span>
+        {badge && <span className="shrink-0 text-[10px]">{badge}</span>}
+      </div>
+
+      {(value || icon || children) && (
+        <div className="flex items-center gap-2 mt-0.5">
+          {icon && (
+            <span className="shrink-0 text-muted-foreground/80 group-hover:text-primary transition-colors">
+              {icon}
+            </span>
+          )}
+          {value && (
+            <span className="text-sm sm:text-base font-semibold tracking-tight text-foreground truncate">
+              {value}
+            </span>
+          )}
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                               Content & Grid                               */
+/* -------------------------------------------------------------------------- */
+
+export interface DashboardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardBody({ children, className, ...props }: DashboardBodyProps) {
+  return (
+    <div
+      data-slot="dashboard-body"
+      className={cn("flex flex-col gap-6 w-full flex-1", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface DashboardGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  className?: string
+  cols?: 1 | 2 | 3 | 4 | 12
+}
+
+export function DashboardGrid({ children, className, cols = 12, ...props }: DashboardGridProps) {
+  const colClasses = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 md:grid-cols-2",
+    3: "grid-cols-1 md:grid-cols-3",
+    4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+    12: "grid-cols-1 lg:grid-cols-12",
+  }[cols]
+
+  return (
+    <div
+      data-slot="dashboard-grid"
+      className={cn("grid gap-5 sm:gap-6 w-full", colClasses, className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface DashboardColProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  className?: string
+  span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+}
+
+export function DashboardCol({ children, className, span = 6, ...props }: DashboardColProps) {
+  const spanClasses = {
+    1: "lg:col-span-1",
+    2: "lg:col-span-2",
+    3: "lg:col-span-3",
+    4: "lg:col-span-4",
+    5: "lg:col-span-5",
+    6: "lg:col-span-6",
+    7: "lg:col-span-7",
+    8: "lg:col-span-8",
+    9: "lg:col-span-9",
+    10: "lg:col-span-10",
+    11: "lg:col-span-11",
+    12: "lg:col-span-12",
+  }[span]
+
+  return (
+    <div
+      data-slot="dashboard-col"
+      className={cn("flex flex-col gap-5 sm:gap-6 min-w-0", spanClasses, className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Section                                  */
+/* -------------------------------------------------------------------------- */
+
+export interface DashboardSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardSection({ children, className, ...props }: DashboardSectionProps) {
+  return (
+    <section
+      data-slot="dashboard-section"
+      className={cn("flex flex-col gap-3.5 w-full", className)}
+      {...props}
+    >
+      {children}
+    </section>
+  )
+}
+
+export interface DashboardSectionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardSectionHeader({
+  children,
+  className,
+  ...props
+}: DashboardSectionHeaderProps) {
+  return (
+    <div
+      data-slot="dashboard-section-header"
+      className={cn("flex items-center justify-between gap-3 flex-wrap", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface DashboardSectionTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  children?: React.ReactNode
+  className?: string
+  icon?: React.ReactNode
+}
+
+export function DashboardSectionTitle({
+  children,
+  className,
+  icon,
+  ...props
+}: DashboardSectionTitleProps) {
+  return (
+    <h2
+      data-slot="dashboard-section-title"
+      className={cn(
+        "text-sm sm:text-base font-medium tracking-tight text-foreground/90 flex items-center gap-2",
+        className
+      )}
+      {...props}
+    >
+      {icon && <span className="text-muted-foreground shrink-0">{icon}</span>}
+      <span>{children}</span>
+    </h2>
+  )
+}
+
+export interface DashboardSectionDescriptionProps
+  extends React.HTMLAttributes<HTMLParagraphElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardSectionDescription({
+  children,
+  className,
+  ...props
+}: DashboardSectionDescriptionProps) {
+  return (
+    <p
+      data-slot="dashboard-section-description"
+      className={cn("text-xs text-muted-foreground", className)}
+      {...props}
+    >
+      {children}
+    </p>
+  )
+}
+
+export interface DashboardSectionActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardSectionActions({
+  children,
+  className,
+  ...props
+}: DashboardSectionActionsProps) {
+  return (
+    <div
+      data-slot="dashboard-section-actions"
+      className={cn("flex items-center gap-2 ml-auto shrink-0", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface DashboardSectionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardSectionContent({
+  children,
+  className,
+  ...props
+}: DashboardSectionContentProps) {
+  return (
+    <div
+      data-slot="dashboard-section-content"
+      className={cn("flex flex-col gap-3 w-full", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    Card                                    */
+/* -------------------------------------------------------------------------- */
+
+export interface DashboardCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  className?: string
+  variant?: "default" | "subtle" | "ghost" | "bordered"
+  clickable?: boolean
+}
+
+export function DashboardCard({
+  children,
+  className,
+  variant = "default",
+  clickable = false,
+  ...props
+}: DashboardCardProps) {
+  const variantClasses = {
+    default: "bg-card/50 dark:bg-card/30 border border-border/40 backdrop-blur-xl shadow-xs",
+    subtle: "bg-card/30 dark:bg-muted/15 border border-border/20 backdrop-blur-md",
+    ghost: "bg-transparent border-0",
+    bordered: "bg-transparent border border-border/50",
+  }[variant]
+
+  return (
+    <div
+      data-slot="dashboard-card"
+      className={cn(
+        "relative rounded-2xl p-4 sm:p-5 flex flex-col gap-3.5 transition-all duration-200",
+        variantClasses,
+        clickable && "cursor-pointer hover:border-border/80 hover:bg-card/60 dark:hover:bg-card/40",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface DashboardCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardCardHeader({ children, className, ...props }: DashboardCardHeaderProps) {
+  return (
+    <div
+      data-slot="dashboard-card-header"
+      className={cn("flex items-center justify-between gap-2 flex-wrap", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface DashboardCardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardCardTitle({ children, className, ...props }: DashboardCardTitleProps) {
+  return (
+    <h3
+      data-slot="dashboard-card-title"
+      className={cn("text-sm sm:text-base font-medium text-foreground tracking-tight", className)}
+      {...props}
+    >
+      {children}
+    </h3>
+  )
+}
+
+export interface DashboardCardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardCardDescription({
+  children,
+  className,
+  ...props
+}: DashboardCardDescriptionProps) {
+  return (
+    <p
+      data-slot="dashboard-card-description"
+      className={cn("text-xs text-muted-foreground", className)}
+      {...props}
+    >
+      {children}
+    </p>
+  )
+}
+
+export interface DashboardCardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardCardContent({
+  children,
+  className,
+  ...props
+}: DashboardCardContentProps) {
+  return (
+    <div
+      data-slot="dashboard-card-content"
+      className={cn("flex flex-col gap-2.5 w-full", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface DashboardCardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardCardFooter({
+  children,
+  className,
+  ...props
+}: DashboardCardFooterProps) {
+  return (
+    <div
+      data-slot="dashboard-card-footer"
+      className={cn("flex items-center justify-between gap-2 pt-2 border-t border-border/20 text-xs text-muted-foreground", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                       Stat Grid & Item / Budget Cards                      */
+/* -------------------------------------------------------------------------- */
+
+export interface DashboardStatGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  className?: string
+  cols?: 1 | 2 | 3 | 4
+}
+
+export function DashboardStatGrid({
+  children,
+  className,
+  cols = 2,
+  ...props
+}: DashboardStatGridProps) {
+  const colClasses = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
+    4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-4",
+  }[cols]
+
+  return (
+    <div
+      data-slot="dashboard-stat-grid"
+      className={cn("grid gap-3 w-full", colClasses, className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface DashboardItemCardProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  title: React.ReactNode
+  amount?: React.ReactNode
+  subtitle?: React.ReactNode
+  badge?: React.ReactNode
+  badgeVariant?: "default" | "success" | "warning" | "destructive" | "info"
+  icon?: React.ReactNode
+  actionIcon?: React.ReactNode
+  clickable?: boolean
+  onClick?: () => void
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardItemCard({
+  title,
+  amount,
+  subtitle,
+  badge,
+  badgeVariant = "default",
+  icon,
+  actionIcon,
+  clickable = false,
+  onClick,
+  children,
+  className,
+  ...props
+}: DashboardItemCardProps) {
+  const isClickable = clickable || !!onClick
+
+  const badgeVariantClasses = {
+    default: "bg-secondary text-secondary-foreground border-border/30",
+    success: "bg-emerald-500/15 text-emerald-400 border-emerald-500/30",
+    warning: "bg-amber-500/15 text-amber-400 border-amber-500/30",
+    destructive: "bg-rose-500/15 text-rose-400 border-rose-500/30",
+    info: "bg-sky-500/15 text-sky-400 border-sky-500/30",
+  }[badgeVariant]
+
+  return (
+    <div
+      data-slot="dashboard-item-card"
+      onClick={onClick}
+      className={cn(
+        "group relative flex flex-col justify-between gap-3 p-3.5 sm:p-4 rounded-xl transition-all duration-200",
+        "bg-card/45 dark:bg-card/25 border border-border/30 hover:border-border/60 backdrop-blur-md shadow-xs",
+        isClickable && "cursor-pointer hover:bg-card/70 dark:hover:bg-card/40",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2 min-w-0">
+          {icon && <span className="text-muted-foreground shrink-0">{icon}</span>}
+          <span className="text-xs sm:text-sm font-medium text-foreground truncate">{title}</span>
+        </div>
+        {actionIcon && (
+          <span className="text-muted-foreground/60 group-hover:text-foreground transition-colors shrink-0">
+            {actionIcon}
+          </span>
+        )}
+      </div>
+
+      {(amount || subtitle || badge || children) && (
+        <div className="flex items-center justify-between gap-2 flex-wrap pt-0.5">
+          <div className="flex flex-col min-w-0">
+            {amount && (
+              <span className="text-xs font-semibold text-foreground/90 tracking-tight truncate">
+                {amount}
+              </span>
+            )}
+            {subtitle && (
+              <span className="text-[11px] text-muted-foreground truncate">{subtitle}</span>
+            )}
+          </div>
+
+          {badge && (
+            <span
+              className={cn(
+                "inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium border shrink-0",
+                badgeVariantClasses
+              )}
+            >
+              {badge}
+            </span>
+          )}
+
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                 Action Pill                                */
+/* -------------------------------------------------------------------------- */
+
+export interface DashboardActionPillProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: React.ReactNode
+  label?: React.ReactNode
+  children?: React.ReactNode
+  variant?: "default" | "primary" | "secondary" | "outline" | "ghost"
+  size?: "sm" | "md"
+}
+
+export function DashboardActionPill({
+  icon,
+  label,
+  children,
+  variant = "default",
+  size = "md",
+  className,
+  ...props
+}: DashboardActionPillProps) {
+  const variantClasses = {
+    default:
+      "bg-card/60 dark:bg-card/40 text-foreground border border-border/40 hover:bg-card/90 dark:hover:bg-card/60",
+    primary:
+      "bg-primary/15 text-primary border border-primary/30 hover:bg-primary/25",
+    secondary:
+      "bg-secondary/60 text-secondary-foreground border border-border/30 hover:bg-secondary/90",
+    outline:
+      "bg-transparent border border-border/50 text-foreground hover:bg-card/40",
+    ghost:
+      "bg-transparent border-0 text-muted-foreground hover:text-foreground hover:bg-card/30",
+  }[variant]
+
+  const sizeClasses = {
+    sm: "h-7 px-2.5 text-[11px] gap-1.5 rounded-full",
+    md: "h-8 px-3.5 text-xs gap-2 rounded-full",
+  }[size]
+
+  return (
+    <button
+      type="button"
+      data-slot="dashboard-action-pill"
+      className={cn(
+        "inline-flex items-center justify-center font-medium transition-all duration-150 backdrop-blur-md cursor-pointer select-none",
+        sizeClasses,
+        variantClasses,
+        className
+      )}
+      {...props}
+    >
+      {icon && <span className="shrink-0">{icon}</span>}
+      {label && <span>{label}</span>}
+      {children}
+    </button>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                Data Table                                  */
+/* -------------------------------------------------------------------------- */
+
+export interface DashboardTableProps extends React.HTMLAttributes<HTMLTableElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardTable({ children, className, ...props }: DashboardTableProps) {
+  return (
+    <div className="w-full overflow-x-auto rounded-xl border border-border/30 bg-card/40 dark:bg-card/20 backdrop-blur-md">
+      <table
+        data-slot="dashboard-table"
+        className={cn("w-full text-left text-xs sm:text-sm border-collapse", className)}
+        {...props}
+      >
+        {children}
+      </table>
+    </div>
+  )
+}
+
+export interface DashboardTableHeaderProps
+  extends React.HTMLAttributes<HTMLTableSectionElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardTableHeader({
+  children,
+  className,
+  ...props
+}: DashboardTableHeaderProps) {
+  return (
+    <thead
+      data-slot="dashboard-table-header"
+      className={cn("border-b border-border/30 bg-muted/20 text-muted-foreground text-[11px] uppercase tracking-wider font-medium", className)}
+      {...props}
+    >
+      {children}
+    </thead>
+  )
+}
+
+export interface DashboardTableBodyProps
+  extends React.HTMLAttributes<HTMLTableSectionElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardTableBody({ children, className, ...props }: DashboardTableBodyProps) {
+  return (
+    <tbody
+      data-slot="dashboard-table-body"
+      className={cn("divide-y divide-border/20 text-foreground/90", className)}
+      {...props}
+    >
+      {children}
+    </tbody>
+  )
+}
+
+export interface DashboardTableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  children?: React.ReactNode
+  className?: string
+  clickable?: boolean
+}
+
+export function DashboardTableRow({
+  children,
+  className,
+  clickable = false,
+  ...props
+}: DashboardTableRowProps) {
+  return (
+    <tr
+      data-slot="dashboard-table-row"
+      className={cn(
+        "transition-colors duration-150",
+        clickable && "cursor-pointer hover:bg-card/50 dark:hover:bg-card/30",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </tr>
+  )
+}
+
+export interface DashboardTableHeadProps
+  extends React.ThHTMLAttributes<HTMLTableCellElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardTableHead({ children, className, ...props }: DashboardTableHeadProps) {
+  return (
+    <th
+      data-slot="dashboard-table-head"
+      className={cn("px-3.5 py-2.5 font-medium", className)}
+      {...props}
+    >
+      {children}
+    </th>
+  )
+}
+
+export interface DashboardTableCellProps
+  extends React.TdHTMLAttributes<HTMLTableCellElement> {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardTableCell({ children, className, ...props }: DashboardTableCellProps) {
+  return (
+    <td
+      data-slot="dashboard-table-cell"
+      className={cn("px-3.5 py-2.5 whitespace-nowrap", className)}
+      {...props}
+    >
+      {children}
+    </td>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                Bottom Bar                                  */
+/* -------------------------------------------------------------------------- */
+
+export interface DashboardBottomBarProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  icon?: React.ReactNode
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: React.ReactNode
+  children?: React.ReactNode
+  className?: string
+  onClick?: () => void
+}
+
+export function DashboardBottomBar({
+  icon,
+  title,
+  description,
+  action,
+  children,
+  className,
+  onClick,
+  ...props
+}: DashboardBottomBarProps) {
+  const isClickable = !!onClick
+
+  return (
+    <div
+      data-slot="dashboard-bottom-bar"
+      onClick={onClick}
+      className={cn(
+        "flex items-center justify-between gap-3 p-3.5 sm:p-4 rounded-xl",
+        "bg-card/50 dark:bg-card/30 border border-border/40 backdrop-blur-xl shadow-xs transition-all duration-200",
+        isClickable && "cursor-pointer hover:bg-card/70 dark:hover:bg-card/50 hover:border-border/70",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-center gap-3 min-w-0">
+        {icon && (
+          <div className="shrink-0 w-7 h-7 rounded-lg bg-primary/15 text-primary flex items-center justify-center text-xs">
+            {icon}
+          </div>
+        )}
+        <div className="flex flex-col min-w-0">
+          {title && <span className="text-xs sm:text-sm font-medium text-foreground truncate">{title}</span>}
+          {description && <span className="text-[11px] text-muted-foreground truncate">{description}</span>}
+        </div>
+        {children}
+      </div>
+
+      {action && <div className="shrink-0 ml-auto">{action}</div>}
+    </div>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                          Compound Export Object                            */
+/* -------------------------------------------------------------------------- */
+
+export const DashboardLayout = Object.assign(DashboardLayoutRoot, {
+  Header: DashboardHeader,
+  HeaderTop: DashboardHeaderTop,
+  HeaderStart: DashboardHeaderStart,
+  Icon: DashboardIcon,
+  Title: DashboardTitle,
+  Description: DashboardDescription,
+  Subtitle: DashboardDescription,
+  Actions: DashboardActions,
+  Metrics: DashboardMetrics,
+  MetricCard: DashboardMetricCard,
+  Metric: DashboardMetricCard,
+  StatTabs: DashboardMetrics,
+  StatTab: DashboardMetricCard,
+  Body: DashboardBody,
+  Content: DashboardBody,
+  Grid: DashboardGrid,
+  Col: DashboardCol,
+  Column: DashboardCol,
+  Section: DashboardSection,
+  SectionHeader: DashboardSectionHeader,
+  SectionTitle: DashboardSectionTitle,
+  SectionDescription: DashboardSectionDescription,
+  SectionSubtitle: DashboardSectionDescription,
+  SectionActions: DashboardSectionActions,
+  SectionContent: DashboardSectionContent,
+  SectionBody: DashboardSectionContent,
+  Card: DashboardCard,
+  CardHeader: DashboardCardHeader,
+  CardTitle: DashboardCardTitle,
+  CardDescription: DashboardCardDescription,
+  CardContent: DashboardCardContent,
+  CardFooter: DashboardCardFooter,
+  StatGrid: DashboardStatGrid,
+  BudgetGrid: DashboardStatGrid,
+  ItemCard: DashboardItemCard,
+  BudgetCard: DashboardItemCard,
+  ActionPill: DashboardActionPill,
+  Pill: DashboardActionPill,
+  Table: DashboardTable,
+  TableHeader: DashboardTableHeader,
+  TableBody: DashboardTableBody,
+  TableRow: DashboardTableRow,
+  TableHead: DashboardTableHead,
+  TableCell: DashboardTableCell,
+  BottomBar: DashboardBottomBar,
+  FooterBar: DashboardBottomBar,
+})
+
+export default DashboardLayout