@mbao01/common 0.8.0 → 0.9.0

package/src/components/TrendBadge/types.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from "react";
+
+export type TrendBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+  /** The change value (positive = up, negative = down, zero = neutral) */
+  value: number;
+  /** Number of decimal places to display */
+  decimalPlaces?: number;
+  /** Whether to show the percentage sign */
+  showPercent?: boolean;
+  /** Whether to show the trend arrow icon */
+  showIcon?: boolean;
+  /** Size variant */
+  size?: "xs" | "sm" | "md" | "lg";
+  /** Override automatic trend direction */
+  trend?: "up" | "down" | "neutral";
+};

package/src/components/WidgetShell/WidgetShell.tsx

@@ -0,0 +1,101 @@
+import { AlertCircleIcon, InboxIcon, RefreshCwIcon } from "lucide-react";
+import { cn } from "../../utilities";
+import type { WidgetShellProps } from "./types";
+
+const WidgetShell = ({
+  state = "ready",
+  title,
+  description,
+  children,
+  className,
+  errorContent,
+  emptyContent,
+  skeletonLines = 3,
+  onRetry,
+  ...props
+}: WidgetShellProps) => {
+  return (
+    <div
+      className={cn(
+        "rounded-lg border bg-base-100 shadow-sm transition-shadow duration-300",
+        className
+      )}
+      {...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>
+          )}
+        </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>
+        )}
+
+        {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>
+          ))}
+
+        {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>
+          ))}
+
+        {state === "ready" && children}
+      </div>
+    </div>
+  );
+};
+
+WidgetShell.displayName = "WidgetShell";
+
+export { WidgetShell };

package/src/components/WidgetShell/index.ts

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

package/src/components/WidgetShell/types.ts

@@ -0,0 +1,22 @@
+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 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

@@ -29,12 +29,17 @@ export * from "./components/Spinner";
 
 /** data display */
 export * from "./components/Accordion";
+export * from "./components/ActivityFeed";
 export * from "./components/Alert";
+export * from "./components/Amount";
 export * from "./components/Avatar";
 export * from "./components/Badge";
 export * from "./components/Card";
 export * from "./components/Calendar";
+export * from "./components/CircularProgress";
 export * from "./components/Collapsible";
+export * from "./components/CountdownTimer";
+export * from "./components/DataList";
 export * from "./components/Description";
 export * from "./components/Dock";
 export * from "./components/Indicator";
@@ -44,15 +49,21 @@ export * from "./components/List";
 export * from "./components/Progress";
 export * from "./components/Resizable";
 export * from "./components/ScrollArea";
+export * from "./components/ComparisonBar";
 export * from "./components/Separator";
 export * from "./components/Sonner";
+export * from "./components/Sparkline";
 export * from "./components/Stack";
 export * from "./components/Stat";
+export * from "./components/StatCard";
 export * from "./components/Status";
 export * from "./components/Table";
 export * from "./components/Tabs";
 export * from "./components/Text";
 export * from "./components/Timeline";
+export * from "./components/TrendBadge";
+export * from "./components/CalendarHeatmap";
+export * from "./components/Greeting";
 
 /** data input */
 export * from "./components/DatetimePicker";
@@ -72,9 +83,11 @@ export * from "./components/Chart";
 export * from "./components/Command";
 export * from "./components/Dialog";
 export * from "./components/HoverCard";
+export * from "./components/KPICard";
 export * from "./components/Popover";
 export * from "./components/Slot";
 export * from "./components/Widget";
+export * from "./components/WidgetShell";
 
 /** molecules */
 export * from "./components/Banner";
@@ -86,3 +99,25 @@ export * from "./components/Footer";
 export * from "./components/Header";
 export * from "./components/Panel";
 export * from "./components/Sheet";
+
+/** inline charts */
+export * from "./components/MiniAreaChart";
+export * from "./components/MiniBarChart";
+export * from "./components/MiniDonutChart";
+export * from "./components/MiniStackedBar";
+
+/** effects */
+export * from "./components/AnimatedCounter";
+export * from "./components/AnimatedGroup";
+export * from "./components/AnimatedList";
+export * from "./components/BorderBeam";
+export * from "./components/Confetti";
+export * from "./components/GlowCard";
+export * from "./components/GradientText";
+export * from "./components/Marquee";
+export * from "./components/Meteors";
+export * from "./components/NumberTicker";
+export * from "./components/Pulse";
+export * from "./components/ShinyButton";
+export * from "./components/SpotlightCard";
+export * from "./components/TextShimmer";

package/src/stylesheets/tailwind.css

@@ -151,6 +151,214 @@
       opacity: 0;
     }
   }
+
+  /* ─── Rich animation keyframes ──────────────────── */
+
+  --animate-shimmer: shimmer 2s linear infinite;
+  --animate-pulse-soft: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-float: float 3s ease-in-out infinite;
+  --animate-wiggle: wiggle 1s ease-in-out infinite;
+  --animate-shake: shake 0.5s ease-in-out;
+  --animate-bounce-in: bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+  --animate-scale-in: scale-in 0.2s ease-out;
+  --animate-scale-out: scale-out 0.2s ease-in;
+  --animate-slide-up-fade: slide-up-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-slide-down-fade: slide-down-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-slide-left-fade: slide-left-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-slide-right-fade: slide-right-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-spotlight: spotlight 2s ease 0.75s 1 forwards;
+  --animate-gradient: gradient 8s linear infinite;
+  --animate-text-gradient: text-gradient 4s linear infinite;
+  --animate-border-beam: border-beam 4s linear infinite;
+  --animate-meteor: meteor 5s linear infinite;
+  --animate-marquee: marquee var(--tw-duration, 40s) linear infinite;
+
+  @keyframes shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+    100% {
+      background-position: 200% 0;
+    }
+  }
+
+  @keyframes pulse-soft {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.7;
+    }
+  }
+
+  @keyframes float {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+  }
+
+  @keyframes wiggle {
+    0%, 100% {
+      transform: rotate(-3deg);
+    }
+    50% {
+      transform: rotate(3deg);
+    }
+  }
+
+  @keyframes shake {
+    10%, 90% { transform: translateX(-1px); }
+    20%, 80% { transform: translateX(2px); }
+    30%, 50%, 70% { transform: translateX(-4px); }
+    40%, 60% { transform: translateX(4px); }
+  }
+
+  @keyframes bounce-in {
+    0% {
+      opacity: 0;
+      transform: scale(0.3);
+    }
+    50% {
+      transform: scale(1.05);
+    }
+    70% {
+      transform: scale(0.9);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes scale-in {
+    0% {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes scale-out {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+
+  @keyframes slide-up-fade {
+    0% {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-down-fade {
+    0% {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-left-fade {
+    0% {
+      opacity: 0;
+      transform: translateX(8px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-right-fade {
+    0% {
+      opacity: 0;
+      transform: translateX(-8px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes spotlight {
+    0% {
+      opacity: 0;
+      transform: translate(-72%, -62%) scale(0.5);
+    }
+    100% {
+      opacity: 1;
+      transform: translate(-50%, -40%) scale(1);
+    }
+  }
+
+  @keyframes gradient {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+
+  @keyframes text-gradient {
+    to {
+      background-position: 200% center;
+    }
+  }
+
+  @keyframes border-beam {
+    0% {
+      offset-distance: 0%;
+    }
+    100% {
+      offset-distance: 100%;
+    }
+  }
+
+  @keyframes marquee {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(calc(-100% - var(--gap, 16px)));
+    }
+  }
+
+  @keyframes meteor {
+    0% {
+      transform: rotate(215deg) translateX(0);
+      opacity: 1;
+    }
+    70% {
+      opacity: 1;
+    }
+    100% {
+      transform: rotate(215deg) translateX(-500px);
+      opacity: 0;
+    }
+  }
 }
 
 /* Utility classes */
@@ -307,3 +515,5 @@
   --tw-exit-translate-x: calc(--value(ratio) * 100%);
   --tw-exit-translate-x: --value(--translate- *, [percentage], [length]);
 }
+
+@source "../../src/**/*.{ts,tsx}";

package/src/utilities/getSubpaths/getSubpaths.ts

@@ -6,8 +6,7 @@ const createPathObject = (
   pathLabels?: Record<string, string>
 ) => ({
   href: { pathname },
-  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-  label: pathLabels?.[pathname] || segment, // always fallback to segment if label does not exist
+  label: pathLabels?.[pathname] || segment,
 });
 
 export const getSubpaths = (