feat: add component skeleton

Author: Ohh-889

packages/ui/src/components/skeleton/Skeleton.tsx

@@ -0,0 +1,20 @@
+import { cn } from '@/lib/utils';
+
+import { skeletonVariants } from './skeleton-variants';
+import type { SkeletonProps } from './types';
+
+function Skeleton(props: SkeletonProps) {
+  const { className, ...rest } = props;
+
+  const mergedCls = cn(skeletonVariants(), className);
+
+  return (
+    <div
+      className={mergedCls}
+      data-slot="skeleton"
+      {...rest}
+    />
+  );
+}
+
+export default Skeleton;

packages/ui/src/components/skeleton/index.ts

@@ -0,0 +1,3 @@
+export { default as Skeleton } from './Skeleton';
+
+export * from './types';

packages/ui/src/components/skeleton/skeleton-variants.ts

@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants';
+
+export const skeletonVariants = tv({
+  base: `animate-pulse rounded-md bg-accent-foreground/10`
+});

packages/ui/src/components/skeleton/types.ts

@@ -0,0 +1,3 @@
+import type { BaseComponentProps } from '@/types/other';
+
+export type SkeletonProps = BaseComponentProps<'div'>;

packages/ui/src/index.ts

@@ -26,6 +26,8 @@ export * from './components/collapsible';
 
 export * from './components/config-provider';
 
+export * from './components/context-menu';
+
 export * from './components/divider';
 
 export * from './components/dropdown-menu';
@@ -40,6 +42,8 @@ export * from './components/popover';
 
 export * from './components/scroll-area';
 
+export * from './components/skeleton';
+
 export * from './components/sonner';
 
 export * from './components/switch';

playground/src/app/(demo)/skeleton/modules/CustomSize.tsx

@@ -0,0 +1,20 @@
+import { Card, Skeleton } from 'soybean-react-ui';
+
+const CustomSize = () => {
+  return (
+    <Card
+      split
+      title="Custom Size"
+    >
+      <div className="flex flex-col space-y-3">
+        <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-[250px]" />
+          <Skeleton className="h-4 w-[200px]" />
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default CustomSize;

playground/src/app/(demo)/skeleton/modules/DefaultDemo.tsx

@@ -0,0 +1,20 @@
+import { Card, Skeleton } from 'soybean-react-ui';
+
+const DefaultDemo = () => {
+  return (
+    <Card
+      split
+      title="Skeleton"
+    >
+      <div className="flex items-center space-x-4">
+        <Skeleton className="size-12 rounded-full" />
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-[250px]" />
+          <Skeleton className="h-4 w-[200px]" />
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default DefaultDemo;

playground/src/app/(demo)/skeleton/page.tsx

@@ -0,0 +1,13 @@
+import CustomSize from './modules/CustomSize';
+import DefaultDemo from './modules/DefaultDemo';
+
+const SkeletonPage = () => {
+  return (
+    <div className="flex-c gap-4">
+      <DefaultDemo />
+      <CustomSize />
+    </div>
+  );
+};
+
+export default SkeletonPage;