@otfdashkit/ui 0.1.0

package/src/primitives/Radio/Radio.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Radio } from './Radio'
+
+// TODO: add all variants
+const meta: Meta<typeof Radio> = {
+  title: 'Primitives/Radio',
+  component: Radio,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Radio>
+
+export const Default: Story = {}

package/src/primitives/Radio/Radio.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { Radio } from './Radio'
+
+// TODO: add full a11y + variant tests
+describe('Radio', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<Radio />)).not.toThrow()
+  })
+})

package/src/primitives/Radio/Radio.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { Circle } from 'lucide-react'
+import { cn } from '../utils/cn'
+
+export const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} ref={ref} {...props} />
+))
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+export const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Item
+    ref={ref}
+    className={cn(
+      'aspect-square h-4 w-4 rounded-full border border-[hsl(var(--primary))] text-[hsl(var(--primary))] shadow',
+      'focus:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+      <Circle className="h-2.5 w-2.5 fill-current" />
+    </RadioGroupPrimitive.Indicator>
+  </RadioGroupPrimitive.Item>
+))
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

package/src/primitives/Radio/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './Radio'

package/src/primitives/Resizable/Resizable.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Resizable } from './Resizable'
+
+// TODO: add all variants
+const meta: Meta<typeof Resizable> = {
+  title: 'Primitives/Resizable',
+  component: Resizable,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Resizable>
+
+export const Default: Story = {}

package/src/primitives/Resizable/Resizable.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { Resizable } from './Resizable'
+
+// TODO: add full a11y + variant tests
+describe('Resizable', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<Resizable />)).not.toThrow()
+  })
+})

package/src/primitives/Resizable/Resizable.tsx

@@ -0,0 +1,44 @@
+// @ts-nocheck
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "../utils/cn"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

package/src/primitives/Resizable/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './Resizable'

package/src/primitives/ScrollArea/ScrollArea.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ScrollArea } from './ScrollArea'
+
+// TODO: add all variants
+const meta: Meta<typeof ScrollArea> = {
+  title: 'Primitives/ScrollArea',
+  component: ScrollArea,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof ScrollArea>
+
+export const Default: Story = {}

package/src/primitives/ScrollArea/ScrollArea.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { ScrollArea } from './ScrollArea'
+
+// TODO: add full a11y + variant tests
+describe('ScrollArea', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<ScrollArea />)).not.toThrow()
+  })
+})

package/src/primitives/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,49 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "../utils/cn"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

package/src/primitives/ScrollArea/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './ScrollArea'

package/src/primitives/Select/Select.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Select } from './Select'
+
+// TODO: add all variants
+const meta: Meta<typeof Select> = {
+  title: 'Primitives/Select',
+  component: Select,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Select>
+
+export const Default: Story = {}

package/src/primitives/Select/Select.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { Select } from './Select'
+
+// TODO: add full a11y + variant tests
+describe('Select', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<Select />)).not.toThrow()
+  })
+})

package/src/primitives/Select/Select.tsx

@@ -0,0 +1,140 @@
+import React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { Check, ChevronDown, ChevronUp } from 'lucide-react'
+import { cn } from '../utils/cn'
+
+export const Select = SelectPrimitive.Root
+export const SelectGroup = SelectPrimitive.Group
+export const SelectValue = SelectPrimitive.Value
+
+export const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    data-slot="select-trigger"
+    className={cn(
+      'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm',
+      'placeholder:text-[hsl(var(--muted-foreground))]',
+      'focus:outline-none focus:ring-2 focus:ring-[hsl(var(--ring))]',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      '[&>span]:truncate',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50 shrink-0" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+export const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+export const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
+
+export const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      data-slot="select-content"
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--popover))] text-[hsl(var(--popover-foreground))] shadow-md',
+        'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+        position === 'popper' && 'data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+export const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-xs font-semibold text-[hsl(var(--muted-foreground))]', className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+export const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    data-slot="select-item"
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none',
+      'focus:bg-[hsl(var(--accent))] focus:text-[hsl(var(--accent-foreground))]',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+export const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-[hsl(var(--muted))]', className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName

package/src/primitives/Select/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './Select'

package/src/primitives/Separator/Separator.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Separator } from './Separator'
+
+// TODO: add all variants
+const meta: Meta<typeof Separator> = {
+  title: 'Primitives/Separator',
+  component: Separator,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Separator>
+
+export const Default: Story = {}

package/src/primitives/Separator/Separator.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { Separator } from './Separator'
+
+// TODO: add full a11y + variant tests
+describe('Separator', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<Separator />)).not.toThrow()
+  })
+})

package/src/primitives/Separator/Separator.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import { cn } from '../utils/cn'
+
+export const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      'shrink-0 bg-[hsl(var(--border))]',
+      orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+      className
+    )}
+    {...props}
+  />
+))
+Separator.displayName = SeparatorPrimitive.Root.displayName

package/src/primitives/Separator/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './Separator'

package/src/primitives/Sheet/Sheet.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Sheet } from './Sheet'
+
+// TODO: add all variants
+const meta: Meta<typeof Sheet> = {
+  title: 'Primitives/Sheet',
+  component: Sheet,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Sheet>
+
+export const Default: Story = {}

package/src/primitives/Sheet/Sheet.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { Sheet } from './Sheet'
+
+// TODO: add full a11y + variant tests
+describe('Sheet', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<Sheet />)).not.toThrow()
+  })
+})

package/src/primitives/Sheet/Sheet.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-react'
+import { cn } from '../utils/cn'
+
+export const Sheet = DialogPrimitive.Root
+export const SheetTrigger = DialogPrimitive.Trigger
+export const SheetClose = DialogPrimitive.Close
+export const SheetPortal = DialogPrimitive.Portal
+
+export const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    data-slot="sheet-overlay"
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80',
+      'data-[state=open]:animate-in data-[state=open]:fade-in-0',
+      'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
+      className
+    )}
+    {...props}
+  />
+))
+SheetOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-[hsl(var(--background))] p-6 shadow-lg transition ease-in-out border-[hsl(var(--border))]',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right: 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: { side: 'right' },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+export const SheetContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  SheetContentProps
+>(({ side = 'right', className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <DialogPrimitive.Content ref={ref} data-slot="sheet" className={cn(sheetVariants({ side }), className)} {...props}>
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+      {children}
+    </DialogPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = DialogPrimitive.Content.displayName
+
+export const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div data-slot="sheet-header" className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+)
+
+export const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div data-slot="sheet-footer" className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+)
+
+export const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title ref={ref} data-slot="sheet-title" className={cn('text-lg font-semibold', className)} {...props} />
+))
+SheetTitle.displayName = DialogPrimitive.Title.displayName
+
+export const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} data-slot="sheet-description" className={cn('text-sm text-[hsl(var(--muted-foreground))]', className)} {...props} />
+))
+SheetDescription.displayName = DialogPrimitive.Description.displayName

package/src/primitives/Sheet/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './Sheet'

package/src/primitives/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Skeleton } from './Skeleton'
+
+// TODO: add all variants
+const meta: Meta<typeof Skeleton> = {
+  title: 'Primitives/Skeleton',
+  component: Skeleton,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Skeleton>
+
+export const Default: Story = {}

package/src/primitives/Skeleton/Skeleton.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { Skeleton } from './Skeleton'
+
+// TODO: add full a11y + variant tests
+describe('Skeleton', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<Skeleton />)).not.toThrow()
+  })
+})

package/src/primitives/Skeleton/Skeleton.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'pulse' | 'shimmer'
+  width?: string | number
+  height?: string | number
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
+}
+
+const roundedMap: Record<NonNullable<SkeletonProps['rounded']>, string> = {
+  none: 'rounded-none',
+  sm:   'rounded-sm',
+  md:   'rounded-md',
+  lg:   'rounded-lg',
+  full: 'rounded-full',
+}
+
+export function Skeleton({
+  className,
+  variant = 'pulse',
+  width,
+  height,
+  rounded = 'md',
+  style,
+  ...props
+}: SkeletonProps) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn(
+        roundedMap[rounded],
+        variant === 'pulse' && 'animate-pulse bg-muted',
+        variant === 'shimmer' && [
+          'bg-gradient-to-r from-muted via-muted/50 to-muted',
+          'bg-[length:400%_100%]',
+          'animate-[shimmer_2s_ease-in-out_infinite]',
+        ],
+        className
+      )}
+      style={{
+        width: typeof width === 'number' ? `${width}px` : width,
+        height: typeof height === 'number' ? `${height}px` : height,
+        ...style,
+      }}
+      {...props}
+    />
+  )
+}
+
+/** Convenience: a row of skeleton items */
+export function SkeletonText({
+  lines = 3,
+  className,
+}: {
+  lines?: number
+  className?: string
+}) {
+  return (
+    <div className={cn('space-y-2', className)}>
+      {Array.from({ length: lines }, (_, i) => (
+        <Skeleton
+          key={i}
+          height={14}
+          width={i === lines - 1 ? '66%' : '100%'}
+          variant="shimmer"
+        />
+      ))}
+    </div>
+  )
+}

package/src/primitives/Skeleton/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './Skeleton'