feat(styled kit): add Skeleton component

Author: maiieul

.changeset/calm-nails-provide.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/styled': patch
+---
+
+feat(styled kit): add Skeleton component

apps/website/src/_state/component-statuses.ts

@@ -23,6 +23,7 @@ export const statusByComponent: ComponentKitsStatuses = {
     Pagination: ComponentStatus.Draft,
     Popover: ComponentStatus.Draft,
     Separator: ComponentStatus.Beta,
+    Skeleton: ComponentStatus.Beta,
     Tabs: ComponentStatus.Beta,
     Textarea: ComponentStatus.Draft,
   },

apps/website/src/routes/docs/styled/menu.md

@@ -19,5 +19,6 @@
 - [Modal](/docs/styled/modal)
 - [Popover](/docs/styled/popover)
 - [Separator](/docs/styled/separator)
+- [Skeleton](/docs/styled/skeleton)
 - [Tabs](/docs/styled/tabs)
 - [Textarea](/docs/styled/textarea)

apps/website/src/routes/docs/styled/skeleton/examples/card.tsx

@@ -0,0 +1,14 @@
+import { component$ } from '@builder.io/qwik';
+import { Skeleton } from '@qwik-ui/styled';
+
+export default component$(() => {
+  return (
+    <div class="flex flex-col space-y-3">
+      <Skeleton class="h-32 w-64 rounded-3xl" />
+      <div class="space-y-2">
+        <Skeleton class="h-4 w-64" />
+        <Skeleton class="h-4 w-48" />
+      </div>
+    </div>
+  );
+});

apps/website/src/routes/docs/styled/skeleton/examples/hero.tsx

@@ -0,0 +1,14 @@
+import { component$ } from '@builder.io/qwik';
+import { Skeleton } from '@qwik-ui/styled';
+
+export default component$(() => {
+  return (
+    <div class="flex items-center space-x-4">
+      <Skeleton class="h-12 w-12 rounded-full" />
+      <div class="space-y-2">
+        <Skeleton class="h-4 w-[250px]" />
+        <Skeleton class="h-4 w-[200px]" />
+      </div>
+    </div>
+  );
+});

apps/website/src/routes/docs/styled/skeleton/index.mdx

@@ -0,0 +1,35 @@
+---
+title: Qwik UI | Styled Skeleton Component
+---
+
+import { statusByComponent } from '~/_state/component-statuses';
+
+<StatusBanner status={statusByComponent.styled.Skeleton} />
+
+# Popover
+
+Visually or semantically separates content.
+
+<Showcase name="hero" />
+
+## Installation
+
+```sh
+qwik-ui add skeleton
+```
+
+## Usage
+
+```tsx
+import { Skeleton } from '@qwik-ui/styled';
+```
+
+```tsx
+<Skeleton className="h-6 w-24 rounded-full" />
+```
+
+## Examples
+
+### Card
+
+<Showcase name="card" />

packages/kit-styled/src/components/skeleton/skeleton.tsx

@@ -0,0 +1,6 @@
+import { QwikIntrinsicElements, component$ } from '@builder.io/qwik';
+import { cn } from '@qwik-ui/utils';
+
+export const Skeleton = component$<QwikIntrinsicElements['div']>(({ ...props }) => {
+  return <div {...props} class={cn('bg-accent animate-pulse rounded', props.class)} />;
+});

packages/kit-styled/src/index.ts

@@ -9,6 +9,7 @@ export * from './components/label/label';
 export * from './components/modal/modal';
 export * from './components/popover/popover';
 export * from './components/separator/separator';
+export * from './components/skeleton/skeleton';
 export * from './components/tabs/tabs';
 export * from './components/textarea/textarea';
 export * from './components/toggle/toggle';