@nqlib/nqui 0.3.2 → 0.3.3

package/dist/nqui.es.js

@@ -56588,7 +56588,7 @@ function jDe({
     {
       "data-slot": "navigation-menu-content",
       className: T(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-xl group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto",
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-xl group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full min-w-[200px] group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto",
         e
       ),
       ...t
@@ -56610,7 +56610,7 @@ function sEe({
         {
           "data-slot": "navigation-menu-viewport",
           className: T(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 rounded-xl shadow-md ring-1 duration-100 origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden md:w-[var(--radix-navigation-menu-viewport-width)]",
+            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 rounded-xl shadow-md ring-1 duration-100 origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full min-w-[200px] overflow-hidden md:w-[var(--radix-navigation-menu-viewport-width)]",
             e
           ),
           ...t
@@ -56627,7 +56627,7 @@ function BDe({
     MQ,
     {
       "data-slot": "navigation-menu-link",
-      className: T("data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-lg p-2 text-xs/relaxed transition-all outline-none focus-visible:ring-[2px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4", e),
+      className: T("data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-lg p-2 text-xs/relaxed whitespace-nowrap transition-all outline-none focus-visible:ring-[2px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4", e),
       ...t
     }
   );

package/dist/pages/ComponentShowcase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentShowcase.d.ts","sourceRoot":"","sources":["../../src/pages/ComponentShowcase.tsx"],"names":[],"mappings":"AAscA,MAAM,CAAC,OAAO,UAAU,SAAS,4CAiiFhC"}
+{"version":3,"file":"ComponentShowcase.d.ts","sourceRoot":"","sources":["../../src/pages/ComponentShowcase.tsx"],"names":[],"mappings":"AAkdA,MAAM,CAAC,OAAO,UAAU,SAAS,4CA+tFhC"}

package/dist/styles.css

@@ -179,14 +179,6 @@
     @apply border-border outline-ring/50;
     }
 
-  /* Viewport lock - all scroll managed by individual containers, not body */
-  html,
-  body,
-  #root {
-    height: 100%;
-    overflow: hidden;
-  }
-
   body {
     @apply font-sans bg-background text-foreground;
     }

package/docs/components/README.md

@@ -0,0 +1,119 @@
+# nqui Component Instructions
+
+Implementation guides for each component. Optimized for AI/LLM consumption.
+
+**Import:** `import { X } from "@nqlib/nqui"`  
+**CSS:** `@import "@nqlib/nqui/styles"` (via `npx @nqlib/nqui init-css`)
+
+## Prerequisites (must-have)
+
+| Dependency | Version | Notes |
+|------------|---------|-------|
+| **Tailwind CSS** | ^4.x | Required. Vite: add `@tailwindcss/vite` plugin. Next.js: use `@source` directives in CSS. |
+| **React** | 18+ | Peer dependency. |
+| **tw-animate-css** | — | `@import "tw-animate-css"` in your CSS (added by init-css). |
+| **Radix UI** | — | Bundled with nqui (Dialog, Select, etc.). |
+
+Optional peer deps (for specific components): `react-day-picker` (Calendar), `sonner` (Toaster), `react-resizable-panels` (Resizable), `shiki` (CodeBlock), `@codesandbox/sandpack-react` (Sandbox).
+
+## Shared Notes
+
+- **CSS vars required:** nqui components use `--primary`, `--background`, `--foreground`, etc. Run `npx @nqlib/nqui init-css`.
+- **Enhanced vs Core:** Button, Badge, Checkbox, Select, etc. default to enhanced (3D, animations). Use `CoreButton`, `CoreBadge`, etc. for base shadcn.
+- **Style injection:** Checkbox, Rating, Combobox inject `<style>` at mount. Use client-only guard for SSR.
+- **OKLCH:** ColorPicker uses OKLCH strings (`oklch(0.5 0.15 240)`), not hex.
+- **SidebarProvider:** Must wrap entire layout (sidebar + content), not just Sidebar.
+
+## Buttons & Actions
+| Component | File |
+|-----------|------|
+| Button | [nqui-button.md](./nqui-button.md) |
+| ButtonGroup | [nqui-button-group.md](./nqui-button-group.md) |
+| Toggle | [nqui-toggle.md](./nqui-toggle.md) |
+| ToggleGroup | [nqui-toggle-group.md](./nqui-toggle-group.md) |
+| SegmentedControl | [nqui-segmented-control.md](./nqui-segmented-control.md) |
+
+## Forms
+| Component | File |
+|-----------|------|
+| Input | [nqui-input.md](./nqui-input.md) |
+| InputGroup | [nqui-input-group.md](./nqui-input-group.md) |
+| Textarea | [nqui-textarea.md](./nqui-textarea.md) |
+| Select | [nqui-select.md](./nqui-select.md) |
+| NativeSelect | [nqui-native-select.md](./nqui-native-select.md) |
+| Checkbox | [nqui-checkbox.md](./nqui-checkbox.md) |
+| RadioGroup | [nqui-radio-group.md](./nqui-radio-group.md) |
+| Switch | [nqui-switch.md](./nqui-switch.md) |
+| Slider | [nqui-slider.md](./nqui-slider.md) |
+| Rating | [nqui-rating.md](./nqui-rating.md) |
+| InputOTP | [nqui-input-otp.md](./nqui-input-otp.md) |
+| Field | [nqui-field.md](./nqui-field.md) |
+| Combobox | [nqui-combobox.md](./nqui-combobox.md) |
+| ColorPicker | [nqui-color-picker.md](./nqui-color-picker.md) |
+| ColorSlider | [nqui-color-slider.md](./nqui-color-slider.md) |
+| Label | [nqui-label.md](./nqui-label.md) |
+
+## Display
+| Component | File |
+|-----------|------|
+| Badge | [nqui-badge.md](./nqui-badge.md) |
+| Avatar | [nqui-avatar.md](./nqui-avatar.md) |
+| Alert | [nqui-alert.md](./nqui-alert.md) |
+| Empty | [nqui-empty.md](./nqui-empty.md) |
+| Skeleton | [nqui-skeleton.md](./nqui-skeleton.md) |
+| Spinner | [nqui-spinner.md](./nqui-spinner.md) |
+| Progress | [nqui-progress.md](./nqui-progress.md) |
+| Separator | [nqui-separator.md](./nqui-separator.md) |
+| Card | [nqui-card.md](./nqui-card.md) |
+| Item | [nqui-item.md](./nqui-item.md) |
+| Kbd | [nqui-kbd.md](./nqui-kbd.md) |
+| Tracker | [nqui-tracker.md](./nqui-tracker.md) |
+| FrostedGlass | [nqui-frosted-glass.md](./nqui-frosted-glass.md) |
+| NquiLogo | [nqui-logo.md](./nqui-logo.md) |
+
+## Navigation & Menus
+| Component | File |
+|-----------|------|
+| Breadcrumb | [nqui-breadcrumb.md](./nqui-breadcrumb.md) |
+| Tabs | [nqui-tabs.md](./nqui-tabs.md) |
+| DropdownMenu | [nqui-dropdown-menu.md](./nqui-dropdown-menu.md) |
+| ContextMenu | [nqui-context-menu.md](./nqui-context-menu.md) |
+| Menubar | [nqui-menubar.md](./nqui-menubar.md) |
+| NavigationMenu | [nqui-navigation-menu.md](./nqui-navigation-menu.md) |
+| Pagination | [nqui-pagination.md](./nqui-pagination.md) |
+| Command | [nqui-command.md](./nqui-command.md) |
+| CommandPalette | [nqui-command-palette.md](./nqui-command-palette.md) |
+| TableOfContents | [nqui-table-of-contents.md](./nqui-table-of-contents.md) |
+
+## Overlays & Dialogs
+| Component | File |
+|-----------|------|
+| Dialog | [nqui-dialog.md](./nqui-dialog.md) |
+| AlertDialog | [nqui-alert-dialog.md](./nqui-alert-dialog.md) |
+| Drawer | [nqui-drawer.md](./nqui-drawer.md) |
+| Sheet | [nqui-sheet.md](./nqui-sheet.md) |
+| Popover | [nqui-popover.md](./nqui-popover.md) |
+| HoverCard | [nqui-hover-card.md](./nqui-hover-card.md) |
+| Tooltip | [nqui-tooltip.md](./nqui-tooltip.md) |
+| Toaster | [nqui-toaster.md](./nqui-toaster.md) |
+
+## Layout
+| Component | File |
+|-----------|------|
+| Accordion | [nqui-accordion.md](./nqui-accordion.md) |
+| Collapsible | [nqui-collapsible.md](./nqui-collapsible.md) |
+| ScrollArea | [nqui-scroll-area.md](./nqui-scroll-area.md) |
+| AspectRatio | [nqui-aspect-ratio.md](./nqui-aspect-ratio.md) |
+| Carousel | [nqui-carousel.md](./nqui-carousel.md) |
+| Resizable | [nqui-resizable.md](./nqui-resizable.md) |
+| Sidebar | [nqui-sidebar.md](./nqui-sidebar.md) |
+| Sortable | [nqui-sortable.md](./nqui-sortable.md) |
+
+## Advanced
+| Component | File |
+|-----------|------|
+| Calendar | [nqui-calendar.md](./nqui-calendar.md) |
+| CodeBlock | [nqui-code-block.md](./nqui-code-block.md) |
+| CodeEditor | [nqui-code-editor.md](./nqui-code-editor.md) |
+| Sandbox | [nqui-sandbox.md](./nqui-sandbox.md) |
+| Snippet | [nqui-snippet.md](./nqui-snippet.md) |

package/docs/components/nqui-accordion.md

@@ -0,0 +1,20 @@
+# nqui Accordion
+
+> Collapsible accordion. type: single|multiple, collapsible.
+
+## Import
+
+```tsx
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Accordion type="single" collapsible>
+  <AccordionItem value="1">
+    <AccordionTrigger>Header</AccordionTrigger>
+    <AccordionContent>Content</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```

package/docs/components/nqui-alert-dialog.md

@@ -0,0 +1,31 @@
+# nqui AlertDialog
+
+> Confirmation dialog. AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel.
+
+## Import
+
+```tsx
+import {
+  AlertDialog, AlertDialogTrigger, AlertDialogContent,
+  AlertDialogHeader, AlertDialogFooter, AlertDialogTitle,
+  AlertDialogDescription, AlertDialogAction, AlertDialogCancel
+} from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<AlertDialog>
+  <AlertDialogTrigger asChild><Button>Delete</Button></AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Confirm</AlertDialogTitle>
+      <AlertDialogDescription>Are you sure?</AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancel</AlertDialogCancel>
+      <AlertDialogAction>Confirm</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
+```

package/docs/components/nqui-alert.md

@@ -0,0 +1,19 @@
+# nqui Alert
+
+> Alert banner. Title, description, action.
+
+## Import
+
+```tsx
+import { Alert, AlertTitle, AlertDescription, AlertAction } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Alert>
+  <AlertTitle>Title</AlertTitle>
+  <AlertDescription>Description</AlertDescription>
+  <AlertAction asChild><Button>Action</Button></AlertAction>
+</Alert>
+```

package/docs/components/nqui-aspect-ratio.md

@@ -0,0 +1,17 @@
+# nqui AspectRatio
+
+> Fixed aspect ratio container.
+
+## Import
+
+```tsx
+import { AspectRatio } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<AspectRatio ratio={16/9}>
+  <img src="..." alt="..." />
+</AspectRatio>
+```

package/docs/components/nqui-avatar.md

@@ -0,0 +1,18 @@
+# nqui Avatar
+
+> User avatar. Image + fallback.
+
+## Import
+
+```tsx
+import { Avatar, AvatarImage, AvatarFallback } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Avatar>
+  <AvatarImage src="/url" alt="Name" />
+  <AvatarFallback>AB</AvatarFallback>
+</Avatar>
+```

package/docs/components/nqui-badge.md

@@ -0,0 +1,42 @@
+# nqui Badge
+
+> Status labels. 9 variants; ghost/link use CoreBadge.
+
+## Import
+
+```tsx
+import { Badge } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Badge>New</Badge>
+<Badge variant="destructive">Error</Badge>
+<Badge variant="secondary">Draft</Badge>
+```
+
+## All Variants
+
+```tsx
+<Badge variant="default" />
+<Badge variant="secondary" />
+<Badge variant="destructive" />
+<Badge variant="success" />
+<Badge variant="warning" />
+<Badge variant="info" />
+<Badge variant="outline" />
+<Badge variant="ghost" />
+<Badge variant="link" />
+```
+
+## asChild
+
+```tsx
+<Badge asChild><a href="#">Link badge</a></Badge>
+```
+
+## Notes
+
+- ghost/link route to CoreBadge (different styling).
+- Use `CoreBadge` for plain shadcn badge.

package/docs/components/nqui-breadcrumb.md

@@ -0,0 +1,24 @@
+# nqui Breadcrumb
+
+> Breadcrumb nav. List, item, link, page, separator, ellipsis.
+
+## Import
+
+```tsx
+import {
+  Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink,
+  BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis
+} from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem><BreadcrumbPage>Current</BreadcrumbPage></BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
+```

package/docs/components/nqui-button-group.md

@@ -0,0 +1,31 @@
+# nqui ButtonGroup
+
+> Grouped buttons with separators.
+
+## Import
+
+```tsx
+import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<ButtonGroup>
+  <Button variant="outline">Left</Button>
+  <ButtonGroupSeparator />
+  <Button variant="outline">Right</Button>
+</ButtonGroup>
+```
+
+## ButtonGroupText
+
+```tsx
+<ButtonGroup>
+  <Button variant="outline"><Icon /></Button>
+  <ButtonGroupSeparator />
+  <ButtonGroupText>Label</ButtonGroupText>
+  <ButtonGroupSeparator />
+  <Button variant="outline"><Icon /></Button>
+</ButtonGroup>
+```

package/docs/components/nqui-button.md

@@ -0,0 +1,56 @@
+# nqui Button
+
+> Enhanced button with 9 variants, gradients, active scale. Default import is EnhancedButton.
+
+## Import
+
+```tsx
+import { Button } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Button>Click</Button>
+<Button variant="destructive">Delete</Button>
+```
+
+## Variants
+
+| variant | Notes |
+|---------|-------|
+| default, destructive, secondary | Enhanced 3D |
+| success, warning, info | Semantic |
+| outline, ghost, link | Core fallback |
+| sm, default, lg, icon | size |
+
+```tsx
+<Button variant="success">Save</Button>
+<Button variant="warning">Caution</Button>
+<Button variant="info">Info</Button>
+<Button size="icon"><Icon /></Button>
+```
+
+## asChild
+
+Render as `<a>` or custom element:
+
+```tsx
+<Button asChild>
+  <a href="/page">Link</a>
+</Button>
+```
+
+## Loading
+
+```tsx
+<Button disabled>
+  <Spinner className="mr-2 size-4" />
+  Loading...
+</Button>
+```
+
+## Notes
+
+- Active state uses `scale-95`; avoid parent `transform` overrides.
+- Use `CoreButton` from `@nqlib/nqui` for base shadcn style.

package/docs/components/nqui-calendar.md

@@ -0,0 +1,46 @@
+# nqui Calendar
+
+> Date picker. Single, range, multiple. Touch drag, hover preview (enhanced).
+
+## Import
+
+```tsx
+import { Calendar } from "@nqlib/nqui"
+import type { DateRange } from "react-day-picker"
+```
+
+## Basic
+
+```tsx
+<Calendar mode="single" selected={date} onSelect={setDate} />
+```
+
+## Range
+
+```tsx
+<Calendar mode="range" selected={range} onSelect={setRange} />
+```
+
+## Multiple
+
+```tsx
+<Calendar mode="multiple" selected={dates} onSelect={setDates} />
+```
+
+## numberOfMonths
+
+```tsx
+<Calendar numberOfMonths={2} />
+```
+
+## Disabled
+
+```tsx
+<Calendar disabled={(d) => d < new Date()} />
+```
+
+## Notes
+
+- Peer: `react-day-picker` v9+.
+- Enhanced: touch drag selection, hover preview on drag.
+- Footer slot for custom footer.

package/docs/components/nqui-card.md

@@ -0,0 +1,31 @@
+# nqui Card
+
+> Container. Header, content, footer. Optional stickyHeader.
+
+## Import
+
+```tsx
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Card>
+  <CardHeader>
+    <CardTitle>Title</CardTitle>
+    <CardDescription>Description</CardDescription>
+  </CardHeader>
+  <CardContent>Body</CardContent>
+  <CardFooter>Footer</CardFooter>
+</Card>
+```
+
+## Sticky Header
+
+```tsx
+<Card stickyHeader className="h-[400px]">
+  <CardHeader>...</CardHeader>
+  <CardContent>Scrollable content</CardContent>
+</Card>
+```

package/docs/components/nqui-carousel.md

@@ -0,0 +1,22 @@
+# nqui Carousel
+
+> Carousel. CarouselContent, CarouselItem, CarouselPrevious, CarouselNext.
+
+## Import
+
+```tsx
+import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Carousel>
+  <CarouselContent>
+    <CarouselItem>Slide 1</CarouselItem>
+    <CarouselItem>Slide 2</CarouselItem>
+  </CarouselContent>
+  <CarouselPrevious />
+  <CarouselNext />
+</Carousel>
+```

package/docs/components/nqui-checkbox.md

@@ -0,0 +1,34 @@
+# nqui Checkbox
+
+> Enhanced checkbox. Variants: square (default), round (gooey animation).
+
+## Import
+
+```tsx
+import { Checkbox } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Checkbox checked={checked} onCheckedChange={setChecked} />
+```
+
+## Variants
+
+```tsx
+<Checkbox variant="square" />
+<Checkbox variant="round" />
+```
+
+## Indeterminate
+
+```tsx
+<Checkbox checked="indeterminate" onCheckedChange={...} />
+```
+
+## Notes
+
+- Injects `<style>` at mount. Use client-only guard for SSR.
+- Round variant uses SVG filter; requires no parent `filter` override.
+- Use `CoreCheckbox` for plain Radix checkbox.

package/docs/components/nqui-code-block.md

@@ -0,0 +1,39 @@
+# nqui CodeBlock
+
+> Syntax-highlighted code. Multi-file tabs, copy button. Peer: shiki.
+
+## Import
+
+```tsx
+import {
+  CodeBlock, CodeBlockHeader, CodeBlockFiles, CodeBlockFilename,
+  CodeBlockCopyButton, CodeBlockBody, CodeBlockItem, CodeBlockContent
+} from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<CodeBlock defaultValue="ts" data={[{ language: "ts", filename: "x.ts", code: "..." }]}>
+  <CodeBlockHeader>
+    <CodeBlockFiles>
+      {(item) => <CodeBlockFilename value={item.language}>{item.filename}</CodeBlockFilename>}
+    </CodeBlockFiles>
+    <CodeBlockCopyButton />
+  </CodeBlockHeader>
+  <CodeBlockBody>
+    {(item) => (
+      <CodeBlockItem value={item.language}>
+        <CodeBlockContent language={item.language} syntaxHighlighting>
+          {item.code}
+        </CodeBlockContent>
+      </CodeBlockItem>
+    )}
+  </CodeBlockBody>
+</CodeBlock>
+```
+
+## Notes
+
+- Peer: shiki. Optional for syntax highlighting.
+- CodeBlockContentServer for SSR.

package/docs/components/nqui-code-editor.md

@@ -0,0 +1,21 @@
+# nqui CodeEditor
+
+> Animated code editor. Client-side only.
+
+## Import
+
+```tsx
+import { CodeEditor } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<CodeEditor lang="typescript" header dots title="file.ts" copyButton>
+  {`const x = 1`}
+</CodeEditor>
+```
+
+## Notes
+
+- Client-only. Use dynamic import with ssr: false in Next.js.

package/docs/components/nqui-collapsible.md

@@ -0,0 +1,18 @@
+# nqui Collapsible
+
+> Toggle content visibility. CollapsibleTrigger, CollapsibleContent.
+
+## Import
+
+```tsx
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Collapsible open={open} onOpenChange={setOpen}>
+  <CollapsibleTrigger asChild><Button>Toggle</Button></CollapsibleTrigger>
+  <CollapsibleContent>Content</CollapsibleContent>
+</Collapsible>
+```