@nqlib/nqui 0.3.1 → 0.3.3

package/docs/components/nqui-navigation-menu.md

@@ -0,0 +1,25 @@
+# nqui NavigationMenu
+
+> Nav with content panels. NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink.
+
+## Import
+
+```tsx
+import {
+  NavigationMenu, NavigationMenuList, NavigationMenuItem,
+  NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink
+} from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<NavigationMenu>
+  <NavigationMenuList>
+    <NavigationMenuItem>
+      <NavigationMenuTrigger>Item</NavigationMenuTrigger>
+      <NavigationMenuContent>Panel content</NavigationMenuContent>
+    </NavigationMenuItem>
+  </NavigationMenuList>
+</NavigationMenu>
+```

package/docs/components/nqui-pagination.md

@@ -0,0 +1,25 @@
+# nqui Pagination
+
+> Pagination. PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis.
+
+## Import
+
+```tsx
+import {
+  Pagination, PaginationContent, PaginationItem, PaginationLink,
+  PaginationPrevious, PaginationNext, PaginationEllipsis
+} from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Pagination>
+  <PaginationContent>
+    <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
+    <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
+    <PaginationItem><PaginationEllipsis /></PaginationItem>
+    <PaginationItem><PaginationNext href="#" /></PaginationItem>
+  </PaginationContent>
+</Pagination>
+```

package/docs/components/nqui-popover.md

@@ -0,0 +1,34 @@
+# nqui Popover
+
+> Floating panel. PopoverAnchor decouples trigger from anchor position.
+
+## Import
+
+```tsx
+import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Popover>
+  <PopoverTrigger asChild><Button>Open</Button></PopoverTrigger>
+  <PopoverContent>Content</PopoverContent>
+</Popover>
+```
+
+## PopoverAnchor
+
+Position relative to anchor, not trigger:
+
+```tsx
+<Popover>
+  <PopoverAnchor asChild><div ref={anchorRef}>Anchor area</div></PopoverAnchor>
+  <PopoverTrigger asChild><Button>Open</Button></PopoverTrigger>
+  <PopoverContent>Content</PopoverContent>
+</Popover>
+```
+
+## Notes
+
+- PopoverAnchor: content positions by anchor, not trigger.

package/docs/components/nqui-progress.md

@@ -0,0 +1,22 @@
+# nqui Progress
+
+> Progress bar. Dash and solid variants.
+
+## Import
+
+```tsx
+import { Progress } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Progress value={60} />
+```
+
+## Variants
+
+```tsx
+<Progress value={60} variant="solid" />
+<Progress value={60} variant="dash" />
+```

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

@@ -0,0 +1,34 @@
+# nqui RadioGroup
+
+> Radio selection. Variants: animated, sliding, bar-left, bar-right.
+
+## Import
+
+```tsx
+import { RadioGroup, RadioGroupItem } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<RadioGroup value={value} onValueChange={setValue}>
+  <RadioGroupItem value="a" /> A
+  <RadioGroupItem value="b" /> B
+</RadioGroup>
+```
+
+## Variants
+
+```tsx
+<RadioGroup variant="animated" />
+<RadioGroup variant="sliding" />
+<RadioGroup variant="bar-left" />
+<RadioGroup variant="bar-right" />
+```
+
+## Orientation / Disabled
+
+```tsx
+<RadioGroup orientation="horizontal" />
+<RadioGroupItem value="a" disabled />
+```

package/docs/components/nqui-rating.md

@@ -0,0 +1,35 @@
+# nqui Rating
+
+> Star rating. Half-star, maxRating, tooltipContent. Injects style.
+
+## Import
+
+```tsx
+import { Rating } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Rating value={3.5} onChange={setVal} />
+```
+
+## maxRating / starSize
+
+```tsx
+<Rating value={val} onChange={setVal} maxRating={10} starSize={24} />
+```
+
+## tooltipContent
+
+```tsx
+<Rating
+  value={val}
+  onChange={setVal}
+  tooltipContent={(v) => `${v} stars`}
+/>
+```
+
+## Notes
+
+- Injects inline style for SVG mask. Client-only in SSR.

package/docs/components/nqui-resizable.md

@@ -0,0 +1,23 @@
+# nqui Resizable
+
+> Resizable panels. Container: ResizablePanelGroup. Peer: react-resizable-panels.
+
+## Import
+
+```tsx
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<ResizablePanelGroup direction="horizontal">
+  <ResizablePanel defaultSize={25}>Panel 1</ResizablePanel>
+  <ResizableHandle />
+  <ResizablePanel defaultSize={75}>Panel 2</ResizablePanel>
+</ResizablePanelGroup>
+```
+
+## Notes
+
+- Peer: `react-resizable-panels`.

package/docs/components/nqui-sandbox.md

@@ -0,0 +1,27 @@
+# nqui Sandbox
+
+> Live code playground. SandboxProvider, SandboxLayout, SandboxCodeEditor, SandboxPreview. Peer: @codesandbox/sandpack-react.
+
+## Import
+
+```tsx
+import {
+  SandboxProvider, SandboxLayout, SandboxCodeEditor,
+  SandboxPreview
+} from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<SandboxProvider theme="dark" template="react" files={{ "/App.tsx": "..." }}>
+  <SandboxLayout>
+    <SandboxCodeEditor showTabs />
+    <SandboxPreview />
+  </SandboxLayout>
+</SandboxProvider>
+```
+
+## Notes
+
+- Peer: @codesandbox/sandpack-react. Heavy dependency.

package/docs/components/nqui-scroll-area.md

@@ -0,0 +1,32 @@
+# nqui ScrollArea
+
+> Custom scrollbar. fadeMask (enhanced), horizontal scroll.
+
+## Import
+
+```tsx
+import { ScrollArea, ScrollBar } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<ScrollArea className="h-[200px]">
+  <div>Content</div>
+  <ScrollBar orientation="vertical" />
+</ScrollArea>
+```
+
+## Horizontal
+
+```tsx
+<ScrollArea orientation="horizontal">
+  <div className="flex gap-4 min-w-max">...</div>
+</ScrollArea>
+```
+
+## fadeMask
+
+```tsx
+<ScrollArea fadeMask>...</ScrollArea>
+```

package/docs/components/nqui-segmented-control.md

@@ -0,0 +1,18 @@
+# nqui SegmentedControl
+
+> Segmented control. Primary/ghost variants.
+
+## Import
+
+```tsx
+import { SegmentedControl, SegmentedControlItem } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<SegmentedControl value={v} onValueChange={setV}>
+  <SegmentedControlItem value="a">A</SegmentedControlItem>
+  <SegmentedControlItem value="b">B</SegmentedControlItem>
+</SegmentedControl>
+```

package/docs/components/nqui-select.md

@@ -0,0 +1,50 @@
+# nqui Select
+
+> Dropdown select. Enhanced with 3D shadow, frosted glass content.
+
+## Import
+
+```tsx
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Select>
+  <SelectTrigger><SelectValue placeholder="Pick" /></SelectTrigger>
+  <SelectContent>
+    <SelectItem value="a">A</SelectItem>
+    <SelectItem value="b">B</SelectItem>
+  </SelectContent>
+</Select>
+```
+
+## Grouped
+
+```tsx
+<SelectContent>
+  <SelectGroup>
+    <SelectLabel>Fruits</SelectLabel>
+    <SelectItem value="apple">Apple</SelectItem>
+  </SelectGroup>
+  <SelectSeparator />
+  <SelectGroup>
+    <SelectLabel>Veggies</SelectLabel>
+    <SelectItem value="carrot">Carrot</SelectItem>
+  </SelectGroup>
+</SelectContent>
+```
+
+## Controlled
+
+```tsx
+<Select value={value} onValueChange={setValue}>
+  ...
+</Select>
+```
+
+## Notes
+
+- Injects CSS at mount; client-only in SSR.
+- Use `SelectScrollUpButton` / `SelectScrollDownButton` for long lists.

package/docs/components/nqui-separator.md

@@ -0,0 +1,16 @@
+# nqui Separator
+
+> Divider. Horizontal or vertical.
+
+## Import
+
+```tsx
+import { Separator } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Separator />
+<Separator orientation="vertical" />
+```

package/docs/components/nqui-sheet.md

@@ -0,0 +1,27 @@
+# nqui Sheet
+
+> Side panel. SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter. side: top|right|bottom|left.
+
+## Import
+
+```tsx
+import {
+  Sheet, SheetTrigger, SheetContent, SheetHeader,
+  SheetTitle, SheetDescription, SheetFooter
+} from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Sheet>
+  <SheetTrigger asChild><Button>Open</Button></SheetTrigger>
+  <SheetContent side="right">
+    <SheetHeader>
+      <SheetTitle>Title</SheetTitle>
+      <SheetDescription>Desc</SheetDescription>
+    </SheetHeader>
+    ...
+  </SheetContent>
+</Sheet>
+```

package/docs/components/nqui-sidebar.md

@@ -0,0 +1,45 @@
+# nqui Sidebar
+
+> App sidebar. Collapsible. SidebarProvider must wrap entire layout.
+
+## Import
+
+```tsx
+import {
+  SidebarProvider, Sidebar, SidebarTrigger, SidebarInset,
+  SidebarHeader, SidebarContent, SidebarGroup, SidebarGroupLabel,
+  SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton,
+  SidebarRail, SidebarSeparator
+} from "@nqlib/nqui"
+```
+
+## Layout
+
+```tsx
+<SidebarProvider>
+  <Sidebar collapsible="icon">
+    <SidebarHeader>...</SidebarHeader>
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupLabel>Label</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <SidebarMenuItem><SidebarMenuButton>Item</SidebarMenuButton></SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    {/* Main content */}
+  </SidebarInset>
+</SidebarProvider>
+```
+
+## Notes
+
+- **Critical:** SidebarProvider wraps full layout (sidebar + content), not just Sidebar.
+- collapsible: "offcanvas" | "icon" | "none".
+- Sidebar uses fixed positioning; one per app.

package/docs/components/nqui-skeleton.md

@@ -0,0 +1,15 @@
+# nqui Skeleton
+
+> Loading placeholder. Core.
+
+## Import
+
+```tsx
+import { Skeleton } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Skeleton className="h-12 w-full" />
+```

package/docs/components/nqui-slider.md

@@ -0,0 +1,16 @@
+# nqui Slider
+
+> Range slider. Supports single and range values.
+
+## Import
+
+```tsx
+import { Slider } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Slider value={[50]} onValueChange={([v]) => setVal(v)} />
+<Slider value={[20, 80]} onValueChange={setRange} />
+```

package/docs/components/nqui-snippet.md

@@ -0,0 +1,28 @@
+# nqui Snippet
+
+> Tabbed code display. SnippetHeader, SnippetTabsList, SnippetTabsTrigger, SnippetTabsContent, SnippetCopyButton.
+
+## Import
+
+```tsx
+import {
+  Snippet, SnippetHeader, SnippetTabsList, SnippetTabsTrigger,
+  SnippetTabsContent, SnippetCopyButton
+} from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Snippet defaultValue="tsx">
+  <SnippetHeader>
+    <SnippetTabsList>
+      <SnippetTabsTrigger value="tsx">TSX</SnippetTabsTrigger>
+      <SnippetTabsTrigger value="jsx">JSX</SnippetTabsTrigger>
+    </SnippetTabsList>
+    <SnippetCopyButton value={code} />
+  </SnippetHeader>
+  <SnippetTabsContent value="tsx">{code}</SnippetTabsContent>
+  <SnippetTabsContent value="jsx">{code}</SnippetTabsContent>
+</Snippet>
+```

package/docs/components/nqui-sortable.md

@@ -0,0 +1,46 @@
+# nqui Sortable
+
+> Drag-and-drop reorder. Import from `@nqlib/nqui` or `@/components/ui/sortable`.
+
+## Import
+
+```tsx
+import {
+  Sortable, SortableContent, SortableItem, SortableItemHandle, SortableOverlay
+} from "@/components/ui/sortable"
+// Or if exported: import { ... } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Sortable value={items} onValueChange={setItems} orientation="vertical">
+  <SortableContent asChild>
+    <div>
+      {items.map((item) => (
+        <SortableItem key={item} value={item} asChild>
+          <div>
+            <SortableItemHandle asChild><button>⋮⋮</button></SortableItemHandle>
+            {item}
+          </div>
+        </SortableItem>
+      ))}
+    </div>
+  </SortableContent>
+  <SortableOverlay>
+    {({ value }) => <div>Dragging: {value}</div>}
+  </SortableOverlay>
+</Sortable>
+```
+
+## Object Array
+
+```tsx
+<Sortable value={objects} onValueChange={setObjects} getItemValue={(o) => o.id}>
+  ...
+</Sortable>
+```
+
+## orientation
+
+`vertical` | `horizontal` | `mixed`

package/docs/components/nqui-spinner.md

@@ -0,0 +1,16 @@
+# nqui Spinner
+
+> Loading spinner.
+
+## Import
+
+```tsx
+import { Spinner } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Spinner />
+<Spinner className="size-6" />
+```

package/docs/components/nqui-switch.md

@@ -0,0 +1,15 @@
+# nqui Switch
+
+> Toggle switch. Core Radix.
+
+## Import
+
+```tsx
+import { Switch } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Switch checked={checked} onCheckedChange={setChecked} />
+```

package/docs/components/nqui-table-of-contents.md

@@ -0,0 +1,37 @@
+# nqui TableOfContents
+
+> TOC from headings. Auto-detect or manual items. Scroll spy.
+
+## Import
+
+```tsx
+import { TableOfContents } from "@nqlib/nqui"
+```
+
+## Auto-detect
+
+```tsx
+<TableOfContents
+  autoDetect
+  headingSelector="h2"
+  enableScrollSpy
+  container={contentRef}
+  title="Contents"
+/>
+```
+
+## Manual Items
+
+```tsx
+<TableOfContents
+  items={[{ id: "s1", label: "Section 1", level: 1 }]}
+  enableScrollSpy
+  variant="normal"
+/>
+```
+
+## Notes
+
+- Headings need `id` for anchor links.
+- container: scoped scroll container. Omit for full page.
+- variant: "normal" | "clerk" | "circuit".

package/docs/components/nqui-tabs.md

@@ -0,0 +1,35 @@
+# nqui Tabs
+
+> Tabbed content. Sliding indicator. Enhanced.
+
+## Import
+
+```tsx
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Tabs defaultValue="tab1">
+  <TabsList>
+    <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>
+```
+
+## Controlled
+
+```tsx
+<Tabs value={value} onValueChange={setValue}>
+  ...
+</Tabs>
+```
+
+## Notes
+
+- Sliding indicator needs `position: relative` on TabsList container.
+- Use `EnhancedTabsList` props for additional customization.

package/docs/components/nqui-textarea.md

@@ -0,0 +1,15 @@
+# nqui Textarea
+
+> Multi-line text input. Core.
+
+## Import
+
+```tsx
+import { Textarea } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Textarea placeholder="Message..." />
+```