@kitnai/chat 0.1.0

package/src/ui/resizable.tsx

@@ -0,0 +1,219 @@
+import { type JSX, splitProps, createSignal, createContext, useContext, onCleanup, children as resolveChildren } from 'solid-js';
+import { cn } from '../utils/cn';
+
+// --- Types ---
+
+type Orientation = 'horizontal' | 'vertical';
+
+interface ResizableContextValue {
+  orientation: Orientation;
+  registerPanel: (id: string, opts: { defaultSize?: number; minSize?: number; maxSize?: number }) => void;
+}
+
+const ResizableContext = createContext<ResizableContextValue>();
+
+// --- ResizablePanelGroup ---
+
+export interface ResizablePanelGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  orientation?: Orientation;
+  children: JSX.Element;
+}
+
+function ResizablePanelGroup(props: ResizablePanelGroupProps) {
+  const [local, rest] = splitProps(props, ['orientation', 'children', 'class']);
+  const orientation = () => local.orientation ?? 'horizontal';
+
+  return (
+    <ResizableContext.Provider value={{ orientation: orientation(), registerPanel: () => {} }}>
+      <div
+        class={cn(
+          'flex h-full w-full',
+          orientation() === 'vertical' ? 'flex-col' : 'flex-row',
+          local.class
+        )}
+        data-orientation={orientation()}
+        {...rest}
+      >
+        {local.children}
+      </div>
+    </ResizableContext.Provider>
+  );
+}
+
+// --- ResizablePanel ---
+
+export interface ResizablePanelProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  defaultSize?: number;
+  minSize?: number;
+  maxSize?: number;
+  children: JSX.Element;
+}
+
+function ResizablePanel(props: ResizablePanelProps) {
+  const [local, rest] = splitProps(props, ['defaultSize', 'minSize', 'maxSize', 'children', 'class', 'style']);
+
+  const sizeStyle = () => {
+    const s = local.defaultSize;
+    if (s !== undefined) {
+      return { 'flex-basis': `${s}%`, 'flex-grow': '0', 'flex-shrink': '0' };
+    }
+    return { flex: '1 1 0%' };
+  };
+
+  return (
+    <div
+      class={cn('overflow-hidden', local.class)}
+      style={{ ...sizeStyle(), ...(typeof local.style === 'object' ? local.style : {}) }}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+}
+
+// --- ResizableHandle ---
+
+export interface ResizableHandleProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  withHandle?: boolean;
+  onPanelResize?: (delta: number) => void;
+}
+
+function ResizableHandle(props: ResizableHandleProps) {
+  const [local, rest] = splitProps(props, ['withHandle', 'onPanelResize', 'class']);
+  const ctx = useContext(ResizableContext);
+  const orientation = () => ctx?.orientation ?? 'horizontal';
+  const [isDragging, setIsDragging] = createSignal(false);
+
+  let startPos = 0;
+  let prevEl: HTMLElement | null = null;
+  let nextEl: HTMLElement | null = null;
+  let prevSize = 0;
+  let nextSize = 0;
+
+  const handlePointerDown = (e: PointerEvent) => {
+    const handle = e.currentTarget as HTMLElement;
+    prevEl = handle.previousElementSibling as HTMLElement;
+    nextEl = handle.nextElementSibling as HTMLElement;
+
+    if (!prevEl || !nextEl) return;
+
+    e.preventDefault();
+    setIsDragging(true);
+    handle.setPointerCapture(e.pointerId);
+
+    if (orientation() === 'horizontal') {
+      startPos = e.clientX;
+      prevSize = prevEl.getBoundingClientRect().width;
+      nextSize = nextEl.getBoundingClientRect().width;
+    } else {
+      startPos = e.clientY;
+      prevSize = prevEl.getBoundingClientRect().height;
+      nextSize = nextEl.getBoundingClientRect().height;
+    }
+  };
+
+  const handlePointerMove = (e: PointerEvent) => {
+    if (!isDragging() || !prevEl || !nextEl) return;
+
+    const currentPos = orientation() === 'horizontal' ? e.clientX : e.clientY;
+    const delta = currentPos - startPos;
+
+    const newPrevSize = prevSize + delta;
+    const newNextSize = nextSize - delta;
+
+    // Get min/max from data attributes or use defaults
+    const prevMin = parseInt(prevEl.dataset.minSize || '0', 10);
+    const prevMax = parseInt(prevEl.dataset.maxSize || '999999', 10);
+    const nextMin = parseInt(nextEl.dataset.minSize || '0', 10);
+    const nextMax = parseInt(nextEl.dataset.maxSize || '999999', 10);
+
+    if (newPrevSize < prevMin || newNextSize < nextMin || newPrevSize > prevMax || newNextSize > nextMax) return;
+
+    prevEl.style.flexBasis = `${newPrevSize}px`;
+    prevEl.style.flexGrow = '0';
+    prevEl.style.flexShrink = '0';
+    nextEl.style.flexBasis = `${newNextSize}px`;
+    nextEl.style.flexGrow = '0';
+    nextEl.style.flexShrink = '0';
+
+    local.onPanelResize?.(delta);
+  };
+
+  const handlePointerUp = () => {
+    // Convert pixel flex-basis to percentages so panels scale with window resize
+    if (prevEl && nextEl) {
+      const container = prevEl.parentElement;
+      if (container) {
+        const totalSize = orientation() === 'horizontal'
+          ? container.getBoundingClientRect().width
+          : container.getBoundingClientRect().height;
+        const handleSize = (prevEl.nextElementSibling as HTMLElement)?.getBoundingClientRect()[
+          orientation() === 'horizontal' ? 'width' : 'height'
+        ] ?? 0;
+        const available = totalSize - handleSize;
+        if (available > 0) {
+          const prevPct = (prevEl.getBoundingClientRect()[orientation() === 'horizontal' ? 'width' : 'height'] / available) * 100;
+          const nextPct = 100 - prevPct;
+          prevEl.style.flexBasis = `${prevPct}%`;
+          nextEl.style.flexBasis = `${nextPct}%`;
+        }
+      }
+    }
+    setIsDragging(false);
+    prevEl = null;
+    nextEl = null;
+  };
+
+  const isHoriz = () => orientation() === 'horizontal';
+
+  return (
+    <div
+      class={cn(
+        'relative flex items-center justify-center',
+        local.class
+      )}
+      style={{
+        cursor: isHoriz() ? 'col-resize' : 'row-resize',
+        [isHoriz() ? 'width' : 'height']: '8px',
+        'background': isDragging() ? 'var(--color-muted-foreground, #98989f)' : 'transparent',
+        'opacity': isDragging() ? '0.3' : '1',
+      }}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      role="separator"
+      tabIndex={0}
+      data-orientation={orientation()}
+      {...rest}
+    >
+      {local.withHandle && (
+        <div
+          class={cn(
+            'z-10 flex items-center justify-center',
+            orientation() === 'horizontal'
+              ? 'h-6 w-3 flex-col'
+              : 'h-3 w-6 flex-row',
+          )}
+        >
+          <svg
+            class={cn(
+              'text-muted-foreground/40',
+              orientation() === 'horizontal' ? 'h-3 w-2' : 'h-2 w-3 rotate-90'
+            )}
+            viewBox="0 0 4 8"
+            fill="currentColor"
+          >
+            <circle cx="1" cy="1.5" r="0.6" />
+            <circle cx="3" cy="1.5" r="0.6" />
+            <circle cx="1" cy="4" r="0.6" />
+            <circle cx="3" cy="4" r="0.6" />
+            <circle cx="1" cy="6.5" r="0.6" />
+            <circle cx="3" cy="6.5" r="0.6" />
+          </svg>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

package/src/ui/scroll-area.tsx

@@ -0,0 +1,13 @@
+import { type JSX, splitProps } from 'solid-js';
+import { cn } from '../utils/cn';
+
+export interface ScrollAreaProps extends JSX.HTMLAttributes<HTMLDivElement> { children: JSX.Element; }
+
+export function ScrollArea(props: ScrollAreaProps) {
+  const [local, rest] = splitProps(props, ['children', 'class']);
+  return (
+    <div class={cn('overflow-y-auto scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent', local.class)} {...rest}>
+      {local.children}
+    </div>
+  );
+}

package/src/ui/separator.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { Separator } from './separator';
+
+const meta = {
+  title: 'UI/Separator',
+  component: Separator,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      controls: { exclude: ['use:eventListener'] },
+      description: {
+        component: [
+          'A thin **divider** line (a `role="separator"` element) that visually splits content either horizontally or vertically.',
+          '**When to use:** to separate stacked sections, group items in a menu/list, or divide inline controls in a toolbar.',
+          '**How to use:** set `orientation` to `horizontal` (full-width line) or `vertical` (full-height line). For a vertical separator, give the parent a height so the line has something to fill.',
+          '**Placement:** between message groups, in dropdown/menu sections, header toolbars, and between sidebar regions.',
+        ].join('\n\n'),
+      },
+    },
+  },
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'Direction of the divider line.',
+      table: { defaultValue: { summary: 'horizontal' } },
+    },
+  },
+  args: {
+    orientation: 'horizontal',
+  },
+  render: (args) => (
+    <div class="w-64 p-4">
+      <p class="text-sm text-foreground mb-3">Above</p>
+      <Separator {...args} />
+      <p class="text-sm text-foreground mt-3">Below</p>
+    </div>
+  ),
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { Separator } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — flip the orientation. */
+export const Playground: Story = {
+  ...src(`<Separator orientation="horizontal" />`),
+};
+
+export const Horizontal: Story = {
+  args: { orientation: 'horizontal' },
+  ...src(`<div class="w-64 p-4">
+  <p class="text-sm mb-3">Above</p>
+  <Separator />
+  <p class="text-sm mt-3">Below</p>
+</div>`),
+};
+
+/** Vertical divider — needs a parent with a fixed height (showcase). */
+export const Vertical: Story = {
+  render: () => (
+    <div class="flex items-center gap-3 p-4">
+      <span class="text-sm text-foreground">Left</span>
+      <div class="h-6">
+        <Separator orientation="vertical" />
+      </div>
+      <span class="text-sm text-foreground">Right</span>
+    </div>
+  ),
+  ...src(`<div class="flex items-center gap-3 p-4">
+  <span class="text-sm">Left</span>
+  <div class="h-6">
+    <Separator orientation="vertical" />
+  </div>
+  <span class="text-sm">Right</span>
+</div>`),
+};

package/src/ui/separator.tsx

@@ -0,0 +1,10 @@
+import { type JSX, splitProps } from 'solid-js';
+import { cn } from '../utils/cn';
+
+export interface SeparatorProps extends JSX.HTMLAttributes<HTMLDivElement> { orientation?: 'horizontal' | 'vertical'; }
+
+export function Separator(props: SeparatorProps) {
+  const [local, rest] = splitProps(props, ['orientation', 'class']);
+  const isVertical = () => local.orientation === 'vertical';
+  return <div role="separator" class={cn('shrink-0 bg-border', isVertical() ? 'h-full w-px' : 'h-px w-full', local.class)} {...rest} />;
+}

package/src/ui/skeleton.stories.tsx

@@ -0,0 +1,338 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { Skeleton } from './skeleton';
+
+const meta = {
+  title: 'UI/Skeleton',
+  component: Skeleton,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      controls: { exclude: ['use:eventListener'] },
+      description: {
+        component: [
+          'A pulsing **placeholder** block used to indicate loading content. It has no shape of its own — size and rounding come from the `class` you pass.',
+          '**When to use:** while content (messages, lists, cards, tool output) is loading, to preserve layout and signal progress without a spinner.',
+          '**How to use:** compose one or more `Skeleton` elements and set width/height/rounding via utility classes (e.g. `class="h-4 w-3/4"`). Build skeletons that mirror the real layout they replace.',
+          '**Placement:** message bubbles, conversation lists, code blocks, tool calls, input areas, and full-page loading states.',
+        ].join('\n\n'),
+      },
+    },
+  },
+  argTypes: {
+    class: {
+      control: 'text',
+      description: 'Utility classes that set the size and rounding of the placeholder.',
+    },
+  },
+  args: {
+    class: 'h-4 w-64',
+  },
+  render: (args) => <Skeleton {...args} />,
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { Skeleton } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — edit `class` to resize the placeholder. */
+export const Playground: Story = {
+  ...src(`<Skeleton class="h-4 w-64" />`),
+};
+
+export const Basic: Story = {
+  render: () => (
+    <div class="space-y-3 w-80">
+      <Skeleton class="h-4 w-full" />
+      <Skeleton class="h-4 w-3/4" />
+      <Skeleton class="h-4 w-1/2" />
+    </div>
+  ),
+  ...src(`<div class="space-y-3 w-80">
+  <Skeleton class="h-4 w-full" />
+  <Skeleton class="h-4 w-3/4" />
+  <Skeleton class="h-4 w-1/2" />
+</div>`),
+};
+
+export const MessageBubble: Story = {
+  name: 'Message Bubble',
+  render: () => (
+    <div class="space-y-6 w-full max-w-2xl">
+      {/* User message skeleton */}
+      <div class="flex justify-end">
+        <Skeleton class="h-12 w-64 rounded-3xl" />
+      </div>
+
+      {/* Assistant message skeleton */}
+      <div class="flex gap-3 items-start">
+        <Skeleton class="h-8 w-8 rounded-full shrink-0" />
+        <div class="flex-1 space-y-2">
+          <Skeleton class="h-4 w-full" />
+          <Skeleton class="h-4 w-full" />
+          <Skeleton class="h-4 w-5/6" />
+          <Skeleton class="h-4 w-2/3" />
+        </div>
+      </div>
+    </div>
+  ),
+  ...src(`<div class="space-y-6 w-full max-w-2xl">
+  <div class="flex justify-end">
+    <Skeleton class="h-12 w-64 rounded-3xl" />
+  </div>
+  <div class="flex gap-3 items-start">
+    <Skeleton class="h-8 w-8 rounded-full shrink-0" />
+    <div class="flex-1 space-y-2">
+      <Skeleton class="h-4 w-full" />
+      <Skeleton class="h-4 w-full" />
+      <Skeleton class="h-4 w-5/6" />
+      <Skeleton class="h-4 w-2/3" />
+    </div>
+  </div>
+</div>`),
+};
+
+export const MessageWithCode: Story = {
+  name: 'Message with Code Block',
+  render: () => (
+    <div class="flex gap-3 items-start w-full max-w-2xl">
+      <Skeleton class="h-8 w-8 rounded-full shrink-0" />
+      <div class="flex-1 space-y-3">
+        <div class="space-y-2">
+          <Skeleton class="h-4 w-full" />
+          <Skeleton class="h-4 w-4/5" />
+        </div>
+        {/* Code block skeleton */}
+        <Skeleton class="h-32 w-full rounded-xl" />
+        <div class="space-y-2">
+          <Skeleton class="h-4 w-full" />
+          <Skeleton class="h-4 w-3/5" />
+        </div>
+      </div>
+    </div>
+  ),
+  ...src(`<div class="flex gap-3 items-start w-full max-w-2xl">
+  <Skeleton class="h-8 w-8 rounded-full shrink-0" />
+  <div class="flex-1 space-y-3">
+    <div class="space-y-2">
+      <Skeleton class="h-4 w-full" />
+      <Skeleton class="h-4 w-4/5" />
+    </div>
+    <Skeleton class="h-32 w-full rounded-xl" />
+    <div class="space-y-2">
+      <Skeleton class="h-4 w-full" />
+      <Skeleton class="h-4 w-3/5" />
+    </div>
+  </div>
+</div>`),
+};
+
+export const ConversationList: Story = {
+  name: 'Conversation List',
+  render: () => (
+    <div class="w-64 space-y-1">
+      {/* Section header */}
+      <Skeleton class="h-3 w-12 mb-2" />
+      {[1, 2, 3].map(() => (
+        <div class="flex items-center gap-2 px-2 py-2">
+          <Skeleton class="h-4 w-4 rounded shrink-0" />
+          <Skeleton class="h-4 flex-1" />
+        </div>
+      ))}
+      {/* Section header */}
+      <Skeleton class="h-3 w-16 mt-4 mb-2" />
+      {[1, 2].map(() => (
+        <div class="flex items-center gap-2 px-2 py-2">
+          <Skeleton class="h-4 w-4 rounded shrink-0" />
+          <Skeleton class="h-4 flex-1" />
+        </div>
+      ))}
+    </div>
+  ),
+  ...src(`<div class="w-64 space-y-1">
+  <Skeleton class="h-3 w-12 mb-2" />
+  {[1, 2, 3].map(() => (
+    <div class="flex items-center gap-2 px-2 py-2">
+      <Skeleton class="h-4 w-4 rounded shrink-0" />
+      <Skeleton class="h-4 flex-1" />
+    </div>
+  ))}
+</div>`),
+};
+
+export const ToolCall: Story = {
+  name: 'Tool Call',
+  render: () => (
+    <div class="w-full max-w-2xl">
+      <div class="border border-border rounded-xl overflow-hidden">
+        {/* Tool header */}
+        <div class="flex items-center gap-2 px-3 py-2.5">
+          <Skeleton class="h-4 w-4 rounded-full" />
+          <Skeleton class="h-4 w-32" />
+          <Skeleton class="h-5 w-20 rounded-full" />
+        </div>
+        {/* Tool body */}
+        <div class="border-t border-border p-3 space-y-3">
+          <div>
+            <Skeleton class="h-3 w-10 mb-2" />
+            <Skeleton class="h-20 w-full rounded" />
+          </div>
+          <div>
+            <Skeleton class="h-3 w-12 mb-2" />
+            <Skeleton class="h-16 w-full rounded" />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  ...src(`<div class="w-full max-w-2xl">
+  <div class="border border-border rounded-xl overflow-hidden">
+    <div class="flex items-center gap-2 px-3 py-2.5">
+      <Skeleton class="h-4 w-4 rounded-full" />
+      <Skeleton class="h-4 w-32" />
+      <Skeleton class="h-5 w-20 rounded-full" />
+    </div>
+    <div class="border-t border-border p-3 space-y-3">
+      <Skeleton class="h-3 w-10 mb-2" />
+      <Skeleton class="h-20 w-full rounded" />
+    </div>
+  </div>
+</div>`),
+};
+
+export const Card: Story = {
+  name: 'Content Card',
+  render: () => (
+    <div class="w-72">
+      <Skeleton class="h-40 w-full rounded-xl mb-3" />
+      <div class="flex gap-3">
+        <Skeleton class="h-8 w-8 rounded-full shrink-0" />
+        <div class="flex-1 space-y-2">
+          <Skeleton class="h-4 w-full" />
+          <Skeleton class="h-3 w-24" />
+          <Skeleton class="h-3 w-32" />
+        </div>
+      </div>
+    </div>
+  ),
+  ...src(`<div class="w-72">
+  <Skeleton class="h-40 w-full rounded-xl mb-3" />
+  <div class="flex gap-3">
+    <Skeleton class="h-8 w-8 rounded-full shrink-0" />
+    <div class="flex-1 space-y-2">
+      <Skeleton class="h-4 w-full" />
+      <Skeleton class="h-3 w-24" />
+      <Skeleton class="h-3 w-32" />
+    </div>
+  </div>
+</div>`),
+};
+
+export const InputArea: Story = {
+  name: 'Input Area',
+  render: () => (
+    <div class="w-full max-w-2xl">
+      <div class="border border-border rounded-2xl p-3 space-y-3">
+        <Skeleton class="h-10 w-full rounded-lg" />
+        <div class="flex items-center justify-between">
+          <div class="flex gap-2">
+            <Skeleton class="h-8 w-8 rounded-full" />
+            <Skeleton class="h-8 w-8 rounded-full" />
+            <Skeleton class="h-8 w-8 rounded-full" />
+          </div>
+          <Skeleton class="h-8 w-8 rounded-full" />
+        </div>
+      </div>
+    </div>
+  ),
+  ...src(`<div class="w-full max-w-2xl">
+  <div class="border border-border rounded-2xl p-3 space-y-3">
+    <Skeleton class="h-10 w-full rounded-lg" />
+    <div class="flex items-center justify-between">
+      <div class="flex gap-2">
+        <Skeleton class="h-8 w-8 rounded-full" />
+        <Skeleton class="h-8 w-8 rounded-full" />
+        <Skeleton class="h-8 w-8 rounded-full" />
+      </div>
+      <Skeleton class="h-8 w-8 rounded-full" />
+    </div>
+  </div>
+</div>`),
+};
+
+export const FullChat: Story = {
+  name: 'Full Chat Layout',
+  render: () => (
+    <div class="flex w-full max-w-4xl h-96 border border-border rounded-xl overflow-hidden">
+      {/* Sidebar */}
+      <div class="w-56 border-r border-border p-3 space-y-3 shrink-0">
+        <Skeleton class="h-8 w-full rounded-lg" />
+        <div class="space-y-1 mt-4">
+          <Skeleton class="h-3 w-12 mb-2" />
+          {[1, 2, 3].map(() => (
+            <Skeleton class="h-8 w-full rounded-lg" />
+          ))}
+          <Skeleton class="h-3 w-16 mt-3 mb-2" />
+          {[1, 2].map(() => (
+            <Skeleton class="h-8 w-full rounded-lg" />
+          ))}
+        </div>
+      </div>
+
+      {/* Main */}
+      <div class="flex-1 flex flex-col">
+        {/* Header */}
+        <div class="flex items-center justify-between px-4 py-3 border-b border-border">
+          <Skeleton class="h-4 w-48" />
+          <div class="flex gap-2">
+            <Skeleton class="h-8 w-28 rounded-lg" />
+            <Skeleton class="h-8 w-8 rounded-full" />
+          </div>
+        </div>
+
+        {/* Messages */}
+        <div class="flex-1 p-4 space-y-6 overflow-hidden">
+          <div class="flex justify-end">
+            <Skeleton class="h-10 w-52 rounded-3xl" />
+          </div>
+          <div class="flex gap-3 items-start">
+            <Skeleton class="h-8 w-8 rounded-full shrink-0" />
+            <div class="flex-1 space-y-2">
+              <Skeleton class="h-4 w-full" />
+              <Skeleton class="h-4 w-5/6" />
+              <Skeleton class="h-4 w-2/3" />
+            </div>
+          </div>
+        </div>
+
+        {/* Input */}
+        <div class="p-3">
+          <Skeleton class="h-14 w-full rounded-2xl" />
+        </div>
+      </div>
+    </div>
+  ),
+  ...src(`<div class="flex w-full max-w-4xl h-96 border rounded-xl overflow-hidden">
+  <div class="w-56 border-r p-3 space-y-3 shrink-0">
+    <Skeleton class="h-8 w-full rounded-lg" />
+  </div>
+  <div class="flex-1 flex flex-col">
+    <div class="flex-1 p-4 space-y-6">
+      <div class="flex gap-3 items-start">
+        <Skeleton class="h-8 w-8 rounded-full shrink-0" />
+        <div class="flex-1 space-y-2">
+          <Skeleton class="h-4 w-full" />
+          <Skeleton class="h-4 w-5/6" />
+        </div>
+      </div>
+    </div>
+    <div class="p-3">
+      <Skeleton class="h-14 w-full rounded-2xl" />
+    </div>
+  </div>
+</div>`),
+};

package/src/ui/skeleton.tsx

@@ -0,0 +1,16 @@
+import { type JSX, splitProps } from 'solid-js';
+import { cn } from '../utils/cn';
+
+export interface SkeletonProps extends JSX.HTMLAttributes<HTMLDivElement> {}
+
+function Skeleton(props: SkeletonProps) {
+  const [local, rest] = splitProps(props, ['class']);
+  return (
+    <div
+      class={cn('animate-pulse rounded-md bg-muted', local.class)}
+      {...rest}
+    />
+  );
+}
+
+export { Skeleton };