@mbao01/common 0.9.4 → 0.9.6

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

@@ -1,5 +1,5 @@
 export declare const getSkeletonClasses: (props?: ({
-    animate?: "pulse" | null | undefined;
+    animate?: "none" | "pulse" | "wave" | "bounce" | null | undefined;
     width?: 4 | 8 | "full" | 2 | 12 | 16 | 24 | 32 | 48 | 64 | null | undefined;
     height?: 4 | 8 | "full" | 2 | 12 | 16 | 24 | 32 | 48 | 64 | null | undefined;
     round?: boolean | null | undefined;

package/package.json

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

package/src/components/Skeleton/constants.ts

@@ -1,9 +1,14 @@
 import { cva } from "../../libs";
 import { createVariants } from "../../utilities";
 
-export const getSkeletonClasses = cva("skeleton animate-pulse", {
+export const getSkeletonClasses = cva("skeleton", {
   variants: createVariants({
-    animate: { pulse: "animate-pulse" },
+    animate: {
+      none: "animate-none",
+      wave: "",
+      bounce: "animate-bounce",
+      pulse: "animate-pulse",
+    },
     width: {
       2: "w-2",
       4: "w-4",
@@ -37,5 +42,6 @@ export const getSkeletonClasses = cva("skeleton animate-pulse", {
     width: "full",
     height: 4,
     round: false,
+    animate: "pulse",
   },
 });

package/src/components/WidgetShell/WidgetShellSkeleton.tsx

@@ -1,4 +1,6 @@
 import { cn } from "../../utilities";
+import { Flex } from "../Flex";
+import { Skeleton } from "../Skeleton";
 
 export type WidgetShellSkeletonProps = React.HTMLAttributes<HTMLDivElement> & {
   /** Number of skeleton lines to show */
@@ -14,25 +16,20 @@ const WidgetShellSkeleton = ({
   ...props
 }: WidgetShellSkeletonProps) => {
   return (
-    <div
-      className={cn(
-        "rounded-lg border bg-base-100 shadow-sm",
-        className
-      )}
-      {...props}
-    >
+    <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>
+        <Flex direction="col" gap={2} className="border-b px-4 py-3">
+          <Skeleton animate="wave" className="inline-block h-4 w-32 rounded" />
+          <Skeleton animate="wave" className="mt-0.5 inline-block h-3 w-48 rounded" />
+        </Flex>
       )}
       <div className="p-4">
         <div className="flex flex-col gap-3" role="status" aria-label="Loading">
           {Array.from({ length: lines }, (_, i) => (
-            <span
+            <Skeleton
+              animate="wave"
               key={i}
-              className="skeleton h-4 rounded"
+              className="h-4 rounded"
               style={{ width: `${100 - i * 15}%` }}
             />
           ))}

package/src/stylesheets/tailwind.css

@@ -5,6 +5,17 @@
   themes: light --default, dark --prefersdark, cupcake;
 }
 
+@variant dark {
+  &:where([data-theme='dark'], [data-theme='dark'] *) {
+    @slot;
+  }
+  @media (prefers-color-scheme: dark) {
+    &:where(:not([data-theme] *)) {
+      @slot;
+    }
+  }
+}
+
 /*
   The default border color has changed to `currentColor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still