npm - @snow-labs/brutal-ui - Versions diffs - 0.2.1 → 0.3.0 - Mend

@snow-labs/brutal-ui 0.2.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/AGENTS.md +1244 -0
package/package.json +3 -2

package/AGENTS.md ADDED Viewed

@@ -0,0 +1,1244 @@
+# AGENTS.md — @snow-labs/brutal-ui
+> **Read this first.** This is the complete design system reference for AI agents building landing pages, dashboards, and apps with `@snow-labs/brutal-ui`. Every component, every prop, every pattern — nothing else needed.
+## What is brutal-ui?
+A soft brutalist design system — bold 2px borders, hard offset shadows, dynamic brand colors. Built on shadcn/ui patterns + Tailwind v4 + @base-ui/react primitives. One npm install gives you 40+ UI primitives, 15 landing page sections, 9 dashboard widgets, 5 data views, and 3 full-page templates.
+```
+npm install @snow-labs/brutal-ui
+```
+Peer dependencies: `react >= 18`, `react-dom >= 18`, `tailwindcss >= 4`, `@base-ui/react >= 1.0.0`
+Optional peers (install only if using those components): `framer-motion`, `@tanstack/react-table`, `@atlaskit/pragmatic-drag-and-drop`, `react-masonry-css`, `react-big-calendar`, `recharts`, `react-dropzone`
+---
+## 1. Setup (CRITICAL — do this first)
+### globals.css
+```css
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@snow-labs/brutal-ui/theme.css";
+/* REQUIRED: Tell Tailwind v4 to scan brutal-ui dist for class names */
+@source "../../../node_modules/@snow-labs/brutal-ui/dist";
+```
+The `@source` path is relative to your CSS file. Point it at the brutal-ui `dist/` folder. Without it, Tailwind v4 won't generate utility classes used inside brutal-ui components — **buttons will have no padding, cards no borders, nothing will look right.**
+### next.config.ts (Next.js)
+```ts
+const nextConfig: NextConfig = {
+  transpilePackages: ["@snow-labs/brutal-ui"],
+};
+```
+### Brand override (optional)
+Override brutal-ui's default yellow brand with your product's color:
+```css
+:root {
+  --brand: 0 72% 51%;            /* your brand hue sat light (HSL without hsl()) */
+  --brand-foreground: 0 0% 100%; /* text on brand bg */
+  --brand-muted: 0 50% 95%;      /* light tint for muted sections */
+}
+```
+Or use a built-in theme via `data-theme` attribute on any parent:
+```html
+<html data-theme="domino">
+```
+Built-in themes: `snowlabs` (blue), `versionpill` (green), `domino` (teal), `unsent` (purple), `bookshelves` (orange), `bannerbear` (yellow), `coral` (coral), `lavender` (lavender), `mint` (mint), `slate` (gray), `letterbox` (red).
+---
+## 2. Design Rules
+1. **Use brutal-ui section components for landing pages.** `BrutalHero`, `BrutalFeatureGrid`, `PricingTable`, `BrutalCTA`, `BrutalFooter` handle complete sections. Don't rebuild what exists.
+2. **Use `Button` component, never custom styled links.** Button has a `render` prop: `<Button render={<Link href="/" />}>`.
+3. **Use semantic colors only.** `bg-brand`, `bg-cta`, `text-muted-foreground` — never raw hex, rgb, or hsl values.
+4. **Use CSS utility classes.** `brutal-border`, `brutal-shadow`, `brutal-hover` — never hand-code borders or shadows.
+5. **Section colors are semantic.** Only: `"white"`, `"black"`, `"brand"`, `"brand-muted"`, `"cta"`. No gray, cream, or blue.
+6. **Paired buttons use the same size.** When primary + secondary buttons appear together (hero CTA + "Learn more"), both MUST use the same `size` prop (typically `"xl"`). Never mix sizes.
+7. **Mobile CTA buttons are full-width.** Use `className="w-full sm:w-auto"` on buttons and wrap in `flex-col gap-4 sm:flex-row` containers. Buttons stack vertically on mobile, inline on desktop.
+8. **All imports come from the root.** `import { Button, BrutalHero, AppShell } from "@snow-labs/brutal-ui"` — one import path.
+9. **Typography uses brutal classes.** `brutal-h1` through `brutal-h4`, `brutal-body`, `brutal-label` — never ad-hoc font sizes.
+10. **Custom elements use the app's CSS prefix.** If your app is "Acme", prefix custom classes `acme-*`. Never pollute the brutal-ui namespace.
+---
+## 3. Theme Tokens
+All values are HSL triplets (without `hsl()` wrapper). Override any in `:root {}`.
+### Core palette
+| Token | Default | Purpose |
+|-------|---------|---------|
+| `--background` | `0 0% 100%` | Page background (white) |
+| `--foreground` | `0 0% 5%` | Text color (near black) |
+| `--primary` | `0 0% 5%` | Default button bg (black) |
+| `--primary-foreground` | `0 0% 100%` | Default button text (white) |
+| `--secondary` | `0 0% 96%` | Light gray bg |
+| `--muted` | `0 0% 96%` | Muted bg |
+| `--muted-foreground` | `0 0% 45%` | Muted text |
+| `--destructive` | `0 84% 60%` | Error/delete red |
+| `--border` | `0 0% 0%` | Border color (black) |
+| `--radius` | `6px` | Base border radius |
+### Brand tokens (override these per product)
+| Token | Default | Purpose |
+|-------|---------|---------|
+| `--brand` | `48 96% 53%` | Primary brand color (yellow) |
+| `--brand-foreground` | `0 0% 0%` | Text on brand bg |
+| `--brand-muted` | `48 80% 92%` | Light tinted brand bg |
+| `--cta` | `155 60% 65%` | CTA button color (mint green) |
+| `--cta-foreground` | `0 0% 0%` | Text on CTA bg |
+### Shadow tokens
+| Token | Value |
+|-------|-------|
+| `--shadow-brutal` | `4px 4px 0px 0px hsl(0 0% 0%)` |
+| `--shadow-brutal-sm` | `2px 2px 0px 0px hsl(0 0% 0%)` |
+| `--shadow-brutal-lg` | `6px 6px 0px 0px hsl(0 0% 0%)` |
+| `--shadow-brutal-xl` | `8px 8px 0px 0px hsl(0 0% 0%)` |
+| `--shadow-brutal-brand` | `4px 4px 0px 0px hsl(var(--brand))` |
+---
+## 4. Typography Classes
+| Class | Size | Weight | Notes |
+|-------|------|--------|-------|
+| `brutal-display` | clamp(3rem, 8vw, 6rem) | 900 | Hero headlines, one per page |
+| `brutal-h1` | clamp(2.25rem, 6vw, 3.75rem) | 900 | Section headlines |
+| `brutal-h2` | clamp(1.875rem, 5vw, 3rem) | 800 | Sub-headlines |
+| `brutal-h3` | clamp(1.5rem, 4vw, 1.875rem) | 700 | Card titles |
+| `brutal-h4` | clamp(1.25rem, 3vw, 1.5rem) | 700 | Small headings |
+| `brutal-body` | clamp(1rem, 2vw, 1.125rem) | normal | Body text, line-height 1.6 |
+| `brutal-body-lg` | clamp(1.125rem, 2.5vw, 1.25rem) | normal | Hero descriptions |
+| `brutal-label` | 0.75rem | 600 | Monospace, uppercase, tracked wide |
+| `brutal-caption` | 0.875rem | normal | Muted helper text |
+---
+## 5. CSS Utility Classes
+### Borders & shadows
+| Class | Effect |
+|-------|--------|
+| `brutal-border` | 2px solid black border |
+| `brutal-border-t` | Top border only |
+| `brutal-border-b` | Bottom border only |
+| `brutal-shadow` | 4px offset shadow |
+| `brutal-shadow-sm` | 2px offset shadow |
+| `brutal-shadow-lg` | 6px offset shadow |
+| `brutal-hover` | Hover: lift -2px + shadow grows. Active: push +1px + shadow shrinks |
+### Background patterns
+| Class | Effect |
+|-------|--------|
+| `brutal-dots` | Radial dot pattern, 20px spacing |
+| `brutal-stripes` | Diagonal stripes, 8px pitch |
+| `brutal-grain` | SVG fractal noise grain |
+| `brutal-crosshatch` | Crossed diagonal lines |
+| `brutal-grid-dots` | Grid dots, 16px spacing |
+| `brutal-gradient-mesh` | Radial brand gradient mesh |
+### Color utilities
+| Class | Effect |
+|-------|--------|
+| `bg-brand` | Brand bg + brand-foreground text |
+| `bg-brand-muted` | Light brand tint bg |
+| `bg-cta` | CTA bg + cta-foreground text |
+| `text-brand` | Brand color text |
+| `text-cta` | CTA color text |
+### Layout
+| Class | Effect |
+|-------|--------|
+| `brutal-section` | Full width, padding 5rem 1.5rem |
+| `brutal-section-sm` | Full width, padding 3rem 1.5rem |
+| `brutal-container` | Max 72rem, centered |
+| `brutal-container-sm` | Max 56rem, centered |
+| `brutal-container-lg` | Max 80rem, centered |
+---
+## 6. Component Reference
+All components import from the root: `import { ComponentName } from "@snow-labs/brutal-ui"`
+---
+### UI Primitives
+#### Button
+```tsx
+import { Button } from "@snow-labs/brutal-ui";
+<Button variant="brand" size="xl">Get Started</Button>
+<Button variant="outline" size="xl" render={<a href="#features" />}>Learn More</Button>
+<Button variant="cta" size="xl" className="w-full sm:w-auto" render={<Link href="/signup" />}>Sign Up</Button>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| `variant` | `"default"` \| `"cta"` \| `"brand"` \| `"outline"` \| `"secondary"` \| `"ghost"` \| `"link"` \| `"destructive"` \| `"nav"` | `"default"` |
+| `size` | `"xs"` \| `"sm"` \| `"default"` \| `"lg"` \| `"xl"` \| `"icon"` \| `"icon-sm"` \| `"icon-lg"` | `"default"` |
+| `render` | `ReactElement` | — |
+| `disabled` | `boolean` | `false` |
+| `className` | `string` | — |
+Size reference: `xs`=h-7, `sm`=h-8, `default`=h-10, `lg`=h-12, `xl`=h-14, `icon`=size-10
+Variant colors: `default`=black, `cta`=mint, `brand`=brand color, `outline`=white w/ black border, `nav`=thin border bg-background
+#### Card
+```tsx
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction } from "@snow-labs/brutal-ui";
+<Card>
+  <CardHeader>
+    <CardTitle>Title</CardTitle>
+    <CardDescription>Description</CardDescription>
+    <CardAction><Button size="sm">Edit</Button></CardAction>
+  </CardHeader>
+  <CardContent>Content here</CardContent>
+  <CardFooter>Footer</CardFooter>
+</Card>
+```
+Cards have brutal border, white bg, offset shadow, and hover lift effect.
+#### Badge
+```tsx
+import { Badge } from "@snow-labs/brutal-ui";
+<Badge variant="brand">New</Badge>
+```
+Variants: `"default"` | `"secondary"` | `"brand"` | `"cta"` | `"outline"` | `"destructive"` | `"ghost"`
+#### Input
+```tsx
+import { Input } from "@snow-labs/brutal-ui";
+<Input type="email" placeholder="you@example.com" />
+```
+Brutal border, shadow-sm, focus: shadow grows + lift. Supports all standard input props.
+#### Textarea
+```tsx
+import { Textarea } from "@snow-labs/brutal-ui";
+<Textarea placeholder="Write something..." />
+```
+Auto-expands with content via `field-sizing: content`.
+#### Select
+```tsx
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@snow-labs/brutal-ui";
+<Select>
+  <SelectTrigger><SelectValue placeholder="Pick one" /></SelectTrigger>
+  <SelectContent>
+    <SelectItem value="a">Option A</SelectItem>
+    <SelectItem value="b">Option B</SelectItem>
+  </SelectContent>
+</Select>
+```
+| Prop (Trigger) | Type | Default |
+|------|------|---------|
+| `size` | `"sm"` \| `"default"` | `"default"` |
+| Prop (Content) | Type | Default |
+|------|------|---------|
+| `side` | `"top"` \| `"bottom"` \| `"left"` \| `"right"` | `"bottom"` |
+| `align` | `"center"` \| `"start"` \| `"end"` | `"center"` |
+#### Dialog
+```tsx
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@snow-labs/brutal-ui";
+<Dialog>
+  <DialogTrigger render={<Button />}>Open</DialogTrigger>
+  <DialogContent showCloseButton={true}>
+    <DialogHeader>
+      <DialogTitle>Title</DialogTitle>
+      <DialogDescription>Description</DialogDescription>
+    </DialogHeader>
+    {/* content */}
+    <DialogFooter>
+      <Button variant="outline">Cancel</Button>
+      <Button variant="brand">Confirm</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```
+#### Tabs
+```tsx
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@snow-labs/brutal-ui";
+<Tabs defaultValue="tab1">
+  <TabsList variant="default"> {/* "default" | "line" */}
+    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+  </TabsList>
+  <TabsContent value="tab1">Content 1</TabsContent>
+  <TabsContent value="tab2">Content 2</TabsContent>
+</Tabs>
+```
+Active tab: brand bg + brand-foreground text + shadow-sm.
+#### Other UI Primitives
+All follow shadcn/ui composition patterns with brutal styling:
+| Component | Key exports |
+|-----------|-------------|
+| Accordion | `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent` |
+| Alert | `Alert`, `AlertTitle`, `AlertDescription` |
+| Avatar | `Avatar`, `AvatarImage`, `AvatarFallback` |
+| Breadcrumb | `Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator` |
+| Checkbox | `Checkbox` — size-5, brand bg when checked |
+| Collapsible | `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent` |
+| Command | `Command`, `CommandDialog`, `CommandInput`, `CommandList`, `CommandGroup`, `CommandItem` |
+| Context Menu | `ContextMenu`, `ContextMenuTrigger`, `ContextMenuContent`, `ContextMenuItem` + sub/radio/checkbox variants |
+| Drawer | `Drawer`, `DrawerTrigger`, `DrawerContent`, `DrawerHeader`, `DrawerFooter` — side: top/right/bottom/left |
+| Dropdown Menu | `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem` + sub/radio/checkbox variants |
+| Hover Card | `HoverCard`, `HoverCardTrigger`, `HoverCardContent` |
+| Input Group | `InputGroup`, `InputGroupInput`, `InputGroupAddon`, `InputGroupButton` |
+| Label | `Label` — text-sm, font-bold |
+| Menubar | `Menubar`, `MenubarMenu`, `MenubarTrigger`, `MenubarContent`, `MenubarItem` |
+| Navigation Menu | `NavigationMenu`, `NavigationMenuList`, `NavigationMenuItem`, `NavigationMenuTrigger`, `NavigationMenuContent`, `NavigationMenuLink` |
+| Pagination | `Pagination`, `PaginationContent`, `PaginationItem`, `PaginationLink`, `PaginationPrevious`, `PaginationNext` |
+| Popover | `Popover`, `PopoverTrigger`, `PopoverContent` |
+| Progress | `Progress` — brutal border track, brand fill |
+| Radio Group | `RadioGroup`, `RadioGroupItem` — size-5, brutal border |
+| Scroll Area | `ScrollArea`, `ScrollBar` |
+| Separator | `Separator` — h-0.5, bg-foreground |
+| Sheet | `Sheet`, `SheetTrigger`, `SheetContent` — side: top/right/bottom/left |
+| Skeleton | `Skeleton` — animate-pulse, bg-muted |
+| Slider | `Slider` — brutal border track, brand fill, size-5 thumb |
+| Switch | `Switch` — size: "sm" \| "default" |
+| Toggle | `Toggle` — variant: "default" \| "outline" |
+| Toggle Group | `ToggleGroup`, `ToggleGroupItem` — variant, size, spacing, orientation |
+| Tooltip | `Tooltip`, `TooltipTrigger`, `TooltipContent`, `TooltipProvider` — black bg, white text, brutal border |
+---
+### Landing Page Components
+#### BrutalNav
+```tsx
+import { BrutalNav } from "@snow-labs/brutal-ui";
+<BrutalNav
+  variant="transparent"
+  logo={<span className="font-black text-lg">Acme</span>}
+  links={[
+    { label: "Features", href: "#features" },
+    { label: "Pricing", href: "#pricing", badge: "NEW" },
+  ]}
+  ctaText="Start Free"
+  ctaHref="/signup"
+/>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| `variant` | `"solid"` \| `"transparent"` \| `"floating-pill"` | `"solid"` |
+| `logo` | `ReactNode` | required |
+| `links` | `{ label, href, badge?, active? }[]` | required |
+| `ctaText` | `string` | `"Sign In"` |
+| `ctaHref` | `string` | `"/admin"` |
+**Variants:**
+- `solid` — Sticky, brand bg, border-bottom. Best for light pages.
+- `transparent` — Fixed, invisible on load, gains bg + blur on scroll (>20px). Best for dark hero backgrounds.
+- `floating-pill` — Fixed pill with rounded corners, brutal border, white bg. Best for playful brands.
+Mobile: Auto hamburger menu → Sheet drawer on right.
+#### BrutalHero
+```tsx
+import { BrutalHero } from "@snow-labs/brutal-ui";
+<BrutalHero
+  variant="centered"
+  color="brand"
+  pattern="grid-dots"
+  badge="AI-Powered"
+  badgePosition="above"
+  headline="Ship faster than ever."
+  description="Build products in days, not months."
+  ctaText="Get Started"
+  ctaHref="/signup"
+  ctaVariant="cta"
+  secondaryText="Learn more"
+  secondaryHref="#features"
+  proof="Free forever. No credit card."
+  visual={<img src="/hero.png" alt="Product" />}
+/>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| `variant` | `"split"` \| `"centered"` \| `"overlap"` \| `"asymmetric"` | `"split"` |
+| `color` | `"white"` \| `"brand"` \| `"brand-muted"` \| `"black"` | `"brand"` |
+| `pattern` | `SectionPattern` | — |
+| `badge` | `string` | — |
+| `badgePosition` | `"above"` \| `"inline"` \| `"floating"` | `"above"` |
+| `headline` | `string` | required |
+| `description` | `string` | required |
+| `ctaText` | `string` | required |
+| `ctaHref` | `string` | — |
+| `ctaVariant` | `"cta"` \| `"brand"` \| `"default"` | `"cta"` |
+| `secondaryText` | `string` | — |
+| `secondaryHref` | `string` | — |
+| `visual` | `ReactNode` | — |
+| `proof` | `string` | — |
+**Variants:**
+- `split` — 2-column grid: text left, visual right
+- `centered` — Center-aligned, max-w-4xl
+- `overlap` — Visual at 20% opacity behind text
+- `asymmetric` — 3fr/2fr grid, visual rotated -2deg
+`headline` is a string, not ReactNode. For JSX headlines, build a custom section with `BrutalSection`.
+#### BrutalSection
+```tsx
+import { BrutalSection } from "@snow-labs/brutal-ui";
+<BrutalSection color="brand-muted" pattern="dots" padding="lg" containerSize="sm">
+  <h2 className="brutal-h2 mb-4">Custom Section</h2>
+  <p className="brutal-body">Anything goes here.</p>
+</BrutalSection>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| `color` | `"white"` \| `"brand"` \| `"brand-muted"` \| `"black"` \| `"cta"` | `"white"` |
+| `pattern` | `"dots"` \| `"stripes"` \| `"noise"` \| `"grain"` \| `"crosshatch"` \| `"grid-dots"` \| `"gradient-mesh"` \| `"none"` | — |
+| `padding` | `"sm"` \| `"default"` \| `"lg"` | `"default"` |
+| `containerSize` | `"sm"` \| `"default"` \| `"lg"` | `"default"` |
+Use this as a wrapper when building custom sections with your own layout.
+#### SectionDivider
+```tsx
+import { SectionDivider } from "@snow-labs/brutal-ui";
+<SectionDivider
+  variant="wave"
+  from="hsl(var(--brand))"
+  to="hsl(var(--background))"
+  flip={false}
+  layers={true}
+/>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| `variant` | `"wave"` \| `"jagged"` \| `"curve"` \| `"castle"` \| `"torn-paper"` \| `"brush-stroke"` \| `"geometric"` \| `"blob"` \| `"diagonal"` \| `"zigzag"` \| `"hand-drawn"` | `"wave"` |
+| `from` | `string` | — |
+| `to` | `string` | — |
+| `flip` | `boolean` | `false` |
+| `layers` | `boolean` | `false` |
+SVG divider between sections. Height is responsive: `clamp(40px, 6vw, 80px)`. Use `from`/`to` colors matching the sections above/below.
+#### BrutalFeatureGrid
+```tsx
+import { BrutalFeatureGrid } from "@snow-labs/brutal-ui";
+<BrutalFeatureGrid
+  variant="icon-left"
+  badge="Features"
+  headline="Everything you need."
+  description="Optional subtitle."
+  columns={2}
+  color="white"
+  features={[
+    { icon: <Zap className="size-5" />, title: "Fast", description: "Ships in days." },
+    { icon: <Shield className="size-5" />, title: "Secure", description: "Enterprise-grade." },
+  ]}
+/>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| `variant` | `"icon-top"` \| `"icon-left"` \| `"numbered"` \| `"bento"` | `"icon-top"` |
+| `columns` | `2` \| `3` \| `4` | `3` |
+| `color` | `"white"` \| `"brand"` \| `"brand-muted"` \| `"black"` | — |
+| `badge` | `string` | — |
+| `headline` | `string` | required |
+| `description` | `string` | — |
+| `features` | `{ icon?, title, description, featured?, stat? }[]` | required |
+**Variants:**
+- `icon-top` — Card with icon centered above title
+- `icon-left` — Icon left with colored left border accent
+- `numbered` — Large number (01, 02...) at 20% opacity in card
+- `bento` — `featured: true` cards span 2 cols + row-span-2
+#### PricingTable
+```tsx
+import { PricingTable } from "@snow-labs/brutal-ui";
+<PricingTable
+  badge="Pricing"
+  headline="Simple pricing."
+  billingToggle={true}
+  color="white"
+  popularIndex={1}
+  tiers={[
+    {
+      name: "Free",
+      description: "For individuals.",
+      price: { monthly: 0, annual: 0 },
+      features: ["5 projects", "Basic support"],
+      ctaText: "Get started",
+      ctaHref: "/signup",
+      ctaVariant: "outline",
+    },
+    {
+      name: "Pro",
+      description: "For teams.",
+      price: { monthly: 19, annual: 190 },
+      features: ["Unlimited projects", "Priority support"],
+      ctaText: "Start trial",
+      ctaHref: "/signup?plan=pro",
+      ctaVariant: "cta",
+    },
+  ]}
+/>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| `badge` | `string` | — |
+| `headline` | `string` | — |
+| `description` | `string` | — |
+| `tiers` | `PricingTier[]` | required |
+| `popularIndex` | `number` | — |
+| `billingToggle` | `boolean` | `true` |
+| `color` | `"white"` \| `"black"` | — |
+Popular tier: scale-105, brand border, ring-2, "Popular" badge. Features rendered with green checkmarks.
+#### BrutalTestimonials
+```tsx
+import { BrutalTestimonials } from "@snow-labs/brutal-ui";
+<BrutalTestimonials
+  variant="wall-of-love"
+  badge="Testimonials"
+  headline="Loved by teams."
+  color="brand-muted"
+  testimonials={[
+    { name: "Jane", handle: "@jane", text: "Amazing product!", rating: 5, role: "CTO", company: "Acme" },
+  ]}
+/>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| `variant` | `"masonry"` \| `"featured-grid"` \| `"carousel"` \| `"wall-of-love"` | `"masonry"` |
+| `color` | `SectionColor` | `"brand-muted"` |
+| `pattern` | `SectionPattern` | — |
+| `badge` | `string` | — |
+| `headline` | `string` | — |
+| `testimonials` | `{ name, handle?, avatar?, text, role?, company?, rating?, featured? }[]` | required |
+**Variants:**
+- `masonry` — CSS multi-column, 1→2→3 cols responsive
+- `featured-grid` — Large `featured: true` card left (row-span-2), smaller cards right
+- `carousel` — Horizontal snap scroll, cards w-80
+- `wall-of-love` — Grid 1/2/4 cols with fade overlay at bottom
+#### BrutalCTA
+```tsx
+import { BrutalCTA } from "@snow-labs/brutal-ui";
+<BrutalCTA
+  variant="centered"
+  color="black"
+  pattern="gradient-mesh"
+  headline="Ready to start?"
+  description="Join thousands of teams."
+  ctaText="Get Started"
+  ctaHref="/signup"
+  ctaVariant="cta"
+  secondaryText="Contact sales"
+  secondaryHref="/contact"
+/>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| `variant` | `"centered"` \| `"split"` \| `"with-visual"` \| `"floating-card"` | `"centered"` |
+| `color` | `SectionColor` | — |
+| `pattern` | `SectionPattern` | — |
+| `headline` | `string` | required |
+| `description` | `string` | — |
+| `ctaText` | `string` | required |
+| `ctaHref` | `string` | — |
+| `ctaVariant` | `"cta"` \| `"brand"` \| `"default"` \| `"outline"` | — |
+| `secondaryText` | `string` | — |
+| `visual` | `ReactNode` | — |
+| `stats` | `string` | — |
+`floating-card`: Rendered as a card with `-mt-16` to float above previous section. NOT wrapped in BrutalSection.
+#### BrutalFooter
+```tsx
+import { BrutalFooter } from "@snow-labs/brutal-ui";
+<BrutalFooter
+  variant="mega"
+  logo={<span className="font-black text-lg">Acme</span>}
+  tagline="Build faster."
+  columns={[
+    { title: "Product", links: [{ label: "Features", href: "/features" }] },
+    { title: "Company", links: [{ label: "About", href: "/about" }] },
+  ]}
+  socials={{ twitter: "https://x.com/acme", github: "https://github.com/acme" }}
+  bottomLeft="Built with care"
+  bottomRight="2026 Acme Inc."
+/>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| `variant` | `"mega"` \| `"minimal"` \| `"newsletter"` | `"mega"` |
+| `logo` | `ReactNode` | required |
+| `tagline` | `string` | — |
+| `columns` | `{ title, links: { label, href }[] }[]` | required |
+| `socials` | `{ twitter?, github?, linkedin?, discord? }` | — |
+| `bottomLeft` | `string` | `"Built with care"` |
+| `bottomRight` | `string` | current year |
+| `newsletter` | `{ headline?, description?, placeholder?, buttonText? }` | — |
+#### Other Landing Components
+**StatsBar** — Animated count-up on scroll via IntersectionObserver.
+```tsx
+<StatsBar color="brand" stats={[
+  { value: 10000, suffix: "+", label: "Users" },
+  { value: 99, suffix: "%", label: "Uptime" },
+]} />
+```
+Props: `stats: { value, label, prefix?, suffix? }[]`, `color: "white" | "brand" | "black"`
+**FAQ** — Accordion with alternating backgrounds.
+```tsx
+<FAQ badge="FAQ" headline="Common Questions" color="white" items={[
+  { question: "How does it work?", answer: "It just works." },
+]} />
+```
+Props: `items: { question, answer }[]`, `color: "white" | "black"`, `badge?`, `headline?`
+**LogoCloud** — Logo strip with optional marquee animation.
+```tsx
+<LogoCloud title="Trusted by" marquee={true} color="white" logos={[
+  { src: "/logo1.svg", alt: "Company 1" },
+]} />
+```
+Props: `logos: { src, alt, href? }[]`, `marquee?: boolean`, `color: "white" | "brand" | "black"`, `title?`
+**Newsletter** — Inline email signup card.
+```tsx
+<Newsletter headline="Stay updated" color="white" onSubmit={(email) => subscribe(email)} />
+```
+Props: `headline?`, `description?`, `placeholder?`, `buttonText?`, `onSubmit?: (email) => void`, `color: "white" | "brand" | "black"`
+**BrutalIntegrationGrid** — Icon grid of integrations/partners.
+```tsx
+<BrutalIntegrationGrid badge="Integrations" headline="Works with everything." integrations={[
+  { icon: <SlackIcon />, name: "Slack", href: "/integrations/slack" },
+]} />
+```
+Props: `integrations: { icon, name, href? }[]`, `color: "white" | "brand" | "black"`, `badge?`, `headline`, `description?`
+---
+### Dashboard Components
+#### AppShell + Sidebar
+The core dashboard layout. Responsive: sidebar collapses on mobile to a hamburger menu.
+```tsx
+import { AppShell, Sidebar, SearchBar, UserMenu } from "@snow-labs/brutal-ui";
+<AppShell
+  sidebar={
+    <Sidebar
+      logo={<span className="font-black">Acme</span>}
+      logoCollapsed={<span className="font-black">A</span>}
+      groups={[
+        {
+          title: "Main",
+          links: [
+            { icon: <Home className="size-4" />, label: "Dashboard", href: "/", active: true },
+            { icon: <FileText className="size-4" />, label: "Projects", href: "/projects", badge: 5 },
+          ],
+        },
+      ]}
+      footer={<div className="text-xs text-muted-foreground">v1.0.0</div>}
+    />
+  }
+  header={
+    <>
+      <SearchBar placeholder="Search..." shortcut="K" />
+      <UserMenu name="Jane" email="jane@acme.com" onSignOut={() => signOut()} />
+    </>
+  }
+>
+  {/* Page content */}
+</AppShell>
+```
+**AppShell props:**
+| Prop | Type | Default |
+|------|------|---------|
+| `sidebar` | `ReactNode` | required |
+| `header` | `ReactNode` | — |
+| `children` | `ReactNode` | required |
+| `defaultCollapsed` | `boolean` | `false` |
+**Sidebar props:**
+| Prop | Type | Default |
+|------|------|---------|
+| `logo` | `ReactNode` | required |
+| `logoCollapsed` | `ReactNode` | — |
+| `groups` | `{ title?, links: SidebarLink[] }[]` | required |
+| `footer` | `ReactNode` | — |
+SidebarLink: `{ icon, label, href, active?, badge? }`
+Context: `useAppShell()` → `{ collapsed, setCollapsed, mobileOpen, setMobileOpen }`
+#### StatCard
+```tsx
+import { StatCard } from "@snow-labs/brutal-ui";
+<StatCard label="Revenue" value="$12,340" change={12.5} changeLabel="vs last month" icon={<DollarSign />} />
+```
+| Prop | Type | Default |
+|------|------|---------|
+| `label` | `string` | required |
+| `value` | `string \| number` | required |
+| `change` | `number` | — |
+| `changeLabel` | `string` | — |
+| `icon` | `ReactNode` | — |
+Change: green arrow up if >= 0, red arrow down if < 0.
+#### ViewSwitcher
+```tsx
+import { ViewSwitcher } from "@snow-labs/brutal-ui";
+<ViewSwitcher value="table" onChange={setView} views={["table", "kanban", "grid"]} />
+```
+| Prop | Type | Default |
+|------|------|---------|
+| `value` | `"table"` \| `"kanban"` \| `"grid"` \| `"calendar"` \| `"list"` | required |
+| `onChange` | `(value) => void` | required |
+| `views` | `ViewMode[]` | all 5 |
+#### SearchBar
+```tsx
+<SearchBar placeholder="Search projects..." shortcut="K" value={query} onChange={setQuery} />
+```
+Props: `placeholder?`, `shortcut?`, `value?`, `onChange?`
+#### UserMenu
+```tsx
+<UserMenu
+  name="Jane Doe"
+  email="jane@acme.com"
+  avatar="/avatar.jpg"
+  items={[{ label: "Settings", href: "/settings" }]}
+  onSignOut={() => signOut()}
+/>
+```
+Props: `name`, `email?`, `avatar?`, `items?: { label, href?, onClick? }[]`, `onSignOut?`
+#### EmptyState
+```tsx
+<EmptyState
+  icon={<Inbox className="size-8" />}
+  headline="No projects yet"
+  description="Create your first project to get started."
+  ctaText="New Project"
+  onAction={() => createProject()}
+/>
+```
+Props: `icon?`, `headline`, `description?`, `ctaText?`, `ctaHref?`, `onAction?`
+#### ActivityFeed
+```tsx
+<ActivityFeed
+  groupByDate={true}
+  entries={[
+    { id: "1", name: "Jane", action: "created a project", timestamp: new Date(), avatar: "/jane.jpg" },
+  ]}
+/>
+```
+Props: `entries: { id, name, action, timestamp, avatar?, metadata? }[]`, `groupByDate?: boolean`
+#### FileUpload
+```tsx
+<FileUpload
+  accept="image/*"
+  maxFiles={5}
+  maxSize={10_000_000}
+  onFiles={(files) => upload(files)}
+/>
+```
+Props: `onFiles`, `accept?`, `maxFiles?`, `maxSize?`
+---
+### View Components
+#### DataTable
+Requires: `@tanstack/react-table`
+```tsx
+import { DataTable } from "@snow-labs/brutal-ui";
+import { ColumnDef } from "@tanstack/react-table";
+const columns: ColumnDef<Project>[] = [
+  { accessorKey: "name", header: "Name" },
+  { accessorKey: "status", header: "Status" },
+];
+<DataTable columns={columns} data={projects} searchColumn="name" pageSize={10} emptyMessage="No projects" />
+```
+| Prop | Type | Default |
+|------|------|---------|
+| `columns` | `ColumnDef[]` | required |
+| `data` | `TData[]` | required |
+| `searchColumn` | `string` | — |
+| `searchPlaceholder` | `string` | — |
+| `pageSize` | `number` | `10` |
+| `emptyMessage` | `string` | `"No data"` |
+Sortable headers (click to sort), alternating striped rows, pagination.
+#### KanbanBoard
+Requires: `@atlaskit/pragmatic-drag-and-drop`
+```tsx
+import { KanbanBoard } from "@snow-labs/brutal-ui";
+<KanbanBoard
+  columns={[
+    { id: "todo", title: "To Do", cards: [{ id: "1", title: "Task 1" }] },
+    { id: "doing", title: "In Progress", cards: [] },
+  ]}
+  renderCard={(card) => <div className="p-2 text-sm">{card.title}</div>}
+  onCardMove={(cardId, from, to, index) => moveCard(cardId, from, to, index)}
+  onCardAdd={(columnId, title) => addCard(columnId, title)}
+/>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| `columns` | `{ id, title, cards: TCard[] }[]` | required |
+| `renderCard` | `(card) => ReactNode` | required |
+| `onCardMove` | `(cardId, from, to, index) => void` | — |
+| `onCardAdd` | `(columnId, title) => void` | — |
+Drag-and-drop between columns. Cards have `isDragging: opacity-50` state.
+#### GridView
+```tsx
+import { GridView } from "@snow-labs/brutal-ui";
+<GridView columns={3} gap={6}>
+  <Card>...</Card>
+  <Card>...</Card>
+</GridView>
+```
+Props: `columns?: number` (default 3), `gap?: number` (Tailwind units, default 6), `children`
+Uses `auto-fill` + `minmax` for responsive columns.
+#### ListView
+```tsx
+import { ListView } from "@snow-labs/brutal-ui";
+<ListView
+  items={[
+    { id: "1", title: "Project A", subtitle: "Updated 2h ago", actions: <Button size="sm">View</Button> },
+  ]}
+  onItemClick={(item) => navigate(item.id)}
+  emptyMessage="Nothing here"
+/>
+```
+Props: `items: { id, title, subtitle?, avatar?, metadata?, actions? }[]`, `onItemClick?`, `emptyMessage?`
+#### CalendarView
+```tsx
+import { CalendarView } from "@snow-labs/brutal-ui";
+<CalendarView
+  events={[
+    { id: "1", title: "Launch", date: new Date("2026-04-01"), color: "#DC2626" },
+  ]}
+  onEventClick={(event) => openEvent(event)}
+  onDateClick={(date) => createEvent(date)}
+/>
+```
+Props: `events?: { id, title, date, color? }[]`, `onEventClick?`, `onDateClick?`
+Month navigation, 7-column grid, up to 3 events per day with "+N more" overflow.
+---
+### Templates
+Full-page compositions. Use these to ship fast, then customize.
+#### SaaSLaunchTemplate
+Complete SaaS landing page: Nav → Hero → Logos → Features → Stats → Testimonials → Pricing → FAQ → CTA → Footer.
+```tsx
+import { SaaSLaunchTemplate } from "@snow-labs/brutal-ui";
+<SaaSLaunchTemplate
+  brand="Acme"
+  logo={<span className="font-black">Acme</span>}
+  nav={{ links: [...], ctaText: "Sign up", ctaHref: "/signup" }}
+  hero={{ headline: "...", description: "...", ctaText: "Get started", proof: "Free forever" }}
+  logos={[{ src: "/logo.svg", alt: "Partner" }]}
+  features={{ badge: "Features", headline: "...", items: [...] }}
+  stats={[{ value: 1000, suffix: "+", label: "Users" }]}
+  testimonials={{ badge: "Reviews", headline: "...", items: [...] }}
+  pricing={{ tiers: [...], popularIndex: 1 }}
+  faq={[{ question: "...", answer: "..." }]}
+  cta={{ headline: "Ready?", ctaText: "Start now" }}
+  footer={{ tagline: "...", columns: [...], socials: { twitter: "..." } }}
+/>
+```
+Section order: BrutalNav (solid) → BrutalHero (split, brand, noise) → wave divider → LogoCloud (marquee) → BrutalFeatureGrid (bento) → StatsBar (brand) → torn-paper divider → BrutalTestimonials (wall-of-love, brand-muted) → wave divider → PricingTable → FAQ → BrutalCTA (with-visual, black, gradient-mesh) → BrutalFooter (mega)
+#### StudioTemplate
+Creative/agency landing: floating-pill nav, asymmetric hero, numbered features.
+```tsx
+import { StudioTemplate } from "@snow-labs/brutal-ui";
+<StudioTemplate
+  logo={...}
+  nav={{ links: [...] }}
+  hero={{ headline: "...", description: "...", ctaText: "..." }}
+  features={{ items: [...] }}
+  testimonials={{ items: [...] }}
+  newsletter={{ headline: "Stay updated" }}
+  cta={{ headline: "...", ctaText: "..." }}
+  footer={{ columns: [...] }}
+/>
+```
+Section order: BrutalNav (floating-pill) → BrutalHero (asymmetric, brand, grain) → brush-stroke divider → BrutalFeatureGrid (numbered) → diagonal divider → BrutalTestimonials (featured-grid) → diagonal flip → Newsletter → BrutalCTA (floating-card) → BrutalFooter (minimal)
+#### DashboardTemplate
+Complete dashboard shell with sidebar, header, stats, and view switcher.
+```tsx
+import { DashboardTemplate } from "@snow-labs/brutal-ui";
+<DashboardTemplate
+  logo={<span className="font-black">Acme</span>}
+  sidebarGroups={[{ title: "Main", links: [...] }]}
+  user={{ name: "Jane", email: "jane@acme.com" }}
+  onSignOut={() => signOut()}
+  stats={[{ label: "Revenue", value: "$12k", change: 12 }]}
+  views={["table", "kanban", "grid"]}
+>
+  {/* Your data view content */}
+</DashboardTemplate>
+```
+---
+## 7. Animation Presets (framer-motion)
+Requires: `framer-motion`
+```tsx
+import { fadeInUp, fadeIn, scaleIn, staggerContainer, slideInLeft, slideInRight, defaultTransition, springTransition } from "@snow-labs/brutal-ui";
+import { motion } from "framer-motion";
+<motion.div variants={staggerContainer} initial="initial" animate="animate">
+  <motion.div variants={fadeInUp}>Item 1</motion.div>
+  <motion.div variants={fadeInUp}>Item 2</motion.div>
+</motion.div>
+```
+| Preset | Effect |
+|--------|--------|
+| `fadeInUp` | opacity 0→1, y 20→0 |
+| `fadeIn` | opacity 0→1 |
+| `scaleIn` | opacity 0→1, scale 0.95→1 |
+| `slideInLeft` | opacity 0→1, x -30→0 |
+| `slideInRight` | opacity 0→1, x 30→0 |
+| `staggerContainer` | Stagger children 0.08s apart, 0.1s initial delay |
+| `defaultTransition` | 0.5s, smooth easing |
+| `springTransition` | Spring, stiffness 300, damping 30 |
+---
+## 8. Recipes
+### Landing page (composing sections)
+```tsx
+<BrutalNav variant="transparent" logo={...} links={[...]} ctaText="Start free" />
+<BrutalHero variant="centered" color="brand" pattern="grid-dots" headline="..." ctaText="..." />
+<SectionDivider variant="wave" from="hsl(var(--brand))" to="hsl(var(--background))" />
+<StatsBar color="black" stats={[...]} />
+<BrutalFeatureGrid variant="numbered" columns={3} color="brand-muted" badge="Features" headline="..." features={[...]} />
+<BrutalFeatureGrid variant="icon-left" columns={2} color="white" headline="..." features={[...]} />
+<SectionDivider variant="torn-paper" from="hsl(var(--background))" to="hsl(var(--brand-muted))" />
+<BrutalTestimonials variant="wall-of-love" color="brand-muted" headline="..." testimonials={[...]} />
+<SectionDivider variant="wave" from="hsl(var(--brand-muted))" to="hsl(var(--background))" />
+<PricingTable billingToggle={true} color="white" popularIndex={1} tiers={[...]} />
+<FAQ badge="FAQ" headline="Questions" color="white" items={[...]} />
+<BrutalCTA variant="centered" color="black" pattern="gradient-mesh" headline="..." ctaText="..." />
+<BrutalFooter variant="mega" logo={...} columns={[...]} socials={{...}} />
+```
+### Dashboard page
+```tsx
+<AppShell
+  sidebar={<Sidebar logo={...} groups={[...]} />}
+  header={<><SearchBar /><UserMenu name="..." onSignOut={...} /></>}
+>
+  <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4 mb-8">
+    <StatCard label="Users" value="1,234" change={5.2} />
+    <StatCard label="Revenue" value="$45k" change={-2.1} />
+  </div>
+  <div className="flex items-center justify-between mb-6">
+    <h2 className="brutal-h3">Projects</h2>
+    <ViewSwitcher value={view} onChange={setView} views={["table", "grid", "kanban"]} />
+  </div>
+  {view === "table" && <DataTable columns={columns} data={data} searchColumn="name" />}
+  {view === "grid" && <GridView columns={3}>{data.map(d => <Card key={d.id}>...</Card>)}</GridView>}
+  {view === "kanban" && <KanbanBoard columns={kanbanCols} renderCard={renderCard} />}
+</AppShell>
+```
+### Custom section with brutal styling
+```tsx
+<BrutalSection color="white" pattern="dots">
+  <div className="grid md:grid-cols-2 gap-12 items-center">
+    <div>
+      <Badge variant="brand" className="mb-4">How it works</Badge>
+      <h2 className="brutal-h2 mb-4">Three simple steps.</h2>
+      <p className="brutal-body text-muted-foreground">Get started in minutes.</p>
+    </div>
+    <div className="space-y-4">
+      {steps.map((step, i) => (
+        <Card key={i}>
+          <CardContent className="flex gap-4 items-start p-5">
+            <span className="brutal-display opacity-10">{String(i + 1).padStart(2, "0")}</span>
+            <div>
+              <h3 className="brutal-h4 mb-1">{step.title}</h3>
+              <p className="brutal-caption">{step.description}</p>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  </div>
+</BrutalSection>
+```
+---
+## 9. Common Mistakes
+| Mistake | Fix |
+|---------|-----|
+| Missing `@source` in globals.css | Add `@source` pointing to brutal-ui dist — without it, component styles are missing |
+| Using `color="gray"` or `color="cream"` | Those were removed. Use `"white"`, `"black"`, `"brand"`, `"brand-muted"` |
+| Hardcoding hex colors | Use CSS variables: `bg-brand`, `text-muted-foreground`, `hsl(var(--brand))` |
+| Mixing button sizes in a pair | Both primary + secondary buttons must use same `size` prop |
+| Building custom border/shadow styles | Use `brutal-border`, `brutal-shadow`, `brutal-hover` utilities |
+| Using `<a>` or `<Link>` directly for CTAs | Use `<Button render={<Link href="..." />}>` to get brutal styling |
+| Putting JSX in `headline` prop | `headline` is a `string`. For JSX, use `BrutalSection` + custom markup |
+| Forgetting `transpilePackages` in next.config | Required for Next.js to compile brutal-ui ESM |
+| Using `data-theme="blue"` | Not a valid theme. Use one of the 11 built-in theme names |
+| Importing from subpaths like `@snow-labs/brutal-ui/components/ui/button` | Import everything from root: `@snow-labs/brutal-ui` |
+---
+## 10. Full Export List
+```ts
+// UI Primitives (40+)
+Accordion, AccordionItem, AccordionTrigger, AccordionContent,
+Alert, AlertTitle, AlertDescription,
+Avatar, AvatarImage, AvatarFallback,
+Badge, badgeVariants,
+Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis,
+Button, buttonVariants,
+Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent,
+Checkbox,
+Collapsible, CollapsibleTrigger, CollapsibleContent,
+Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator,
+ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, /* + checkbox, radio, sub variants */
+Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription,
+Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription,
+DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, /* + checkbox, radio, sub variants */
+HoverCard, HoverCardTrigger, HoverCardContent,
+Input,
+InputGroup, InputGroupInput, InputGroupTextarea, InputGroupAddon,
+Label,
+Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, /* + all sub-exports */
+NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuPositioner, navigationMenuTriggerStyle,
+Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious,
+Popover, PopoverTrigger, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle,
+Progress,
+RadioGroup, RadioGroupItem,
+ScrollArea, ScrollBar,
+Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue,
+Separator,
+Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription,
+Skeleton,
+Slider,
+Switch,
+Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants,
+Textarea,
+Toggle, toggleVariants,
+ToggleGroup, ToggleGroupItem,
+Tooltip, TooltipTrigger, TooltipContent, TooltipProvider,
+// Landing Page Components (15)
+BrutalSection, SectionDivider, WaveDivider,
+BrutalHero, BrutalNav, BrutalFooter,
+BrutalFeatureGrid, BrutalTestimonials, BrutalCTA,
+BrutalIntegrationGrid,
+PricingTable, LogoCloud, StatsBar, FAQ, Newsletter,
+// Dashboard Components (9)
+AppShell, useAppShell, Sidebar,
+StatCard, ViewSwitcher, SearchBar, UserMenu,
+EmptyState, ActivityFeed, FileUpload,
+// View Components (5)
+DataTable, KanbanBoard, GridView, ListView, CalendarView,
+// Templates (3)
+SaaSLaunchTemplate, StudioTemplate, DashboardTemplate,
+// Animations (8)
+fadeInUp, fadeIn, staggerContainer, scaleIn,
+slideInLeft, slideInRight, defaultTransition, springTransition,
+// Utilities
+cn,
+// Types
+SectionColor, SectionPattern, Testimonial,
+```

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@snow-labs/brutal-ui",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Soft brutalist design system — bold borders, offset shadows, dynamic brand colors. Built on shadcn/ui + Tailwind v4.",
   "license": "MIT",
   "type": "module",
@@ -35,7 +35,8 @@
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "AGENTS.md"
   ],
   "scripts": {
     "build": "tsup && cp src/theme.css dist/theme.css",