@nqlib/nqui 0.3.1 → 0.3.3

package/docs/components/nqui-color-picker.md

@@ -0,0 +1,38 @@
+# nqui ColorPicker
+
+> OKLCH color picker. Popover or inline. Value is OKLCH string.
+
+## Import
+
+```tsx
+import { ColorPicker } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<ColorPicker
+  value={color}
+  onChange={setColor}
+  variant="popover"
+/>
+```
+
+## Inline
+
+```tsx
+<ColorPicker value={color} onChange={setColor} variant="inline" />
+```
+
+## Value Format
+
+OKLCH string: `"oklch(0.75 0.15 240)"` (L, C, H). Not hex/RGB.
+
+```tsx
+const [color, setColor] = useState("oklch(0.5 0.15 240)")
+```
+
+## Notes
+
+- Store/pass OKLCH. Convert to hex for APIs if needed.
+- Component includes hex display and copy.

package/docs/components/nqui-color-slider.md

@@ -0,0 +1,23 @@
+# nqui ColorSlider
+
+> Slider for hue/saturation/lightness. Used by ColorPicker; usable standalone.
+
+## Import
+
+```tsx
+import { ColorSlider } from "@nqlib/nqui"
+```
+
+## Types
+
+```tsx
+<ColorSlider sliderType="hue" value={[240]} onValueChange={setVal} min={0} max={360} />
+<ColorSlider sliderType="saturation" value={[0.5]} onValueChange={setVal} min={0} max={1} step={0.01} />
+<ColorSlider sliderType="lightness" value={[0.6]} onValueChange={setVal} min={0} max={1} step={0.01} />
+```
+
+## Custom
+
+```tsx
+<ColorSlider sliderType="custom" gradientBackground="..." value={[50]} onValueChange={...} />
+```

package/docs/components/nqui-combobox.md

@@ -0,0 +1,65 @@
+# nqui Combobox
+
+> Autocomplete / searchable select. Multi-select chips, trigger mode, groups.
+
+## Import
+
+```tsx
+import {
+  Combobox, ComboboxInput, ComboboxContent, ComboboxList,
+  ComboboxItem, ComboboxEmpty, ComboboxChips, ComboboxChip,
+  ComboboxTrigger, ComboboxValue, ComboboxCollection, ComboboxGroup,
+  ComboboxLabel, ComboboxSeparator
+} from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Combobox options={items} value={value} onChange={setValue}>
+  <ComboboxInput placeholder="Search..." />
+  <ComboboxContent>
+    <ComboboxList>
+      {items.map((item) => (
+        <ComboboxItem key={item.value} value={item.value}>{item.label}</ComboboxItem>
+      ))}
+    </ComboboxList>
+    <ComboboxEmpty>No results</ComboboxEmpty>
+  </ComboboxContent>
+</Combobox>
+```
+
+## showClear
+
+```tsx
+<Combobox showClear ... />
+```
+
+## Multi-select chips
+
+```tsx
+<Combobox multiSelect value={selected} onChange={setSelected}>
+  <ComboboxChips placeholder="Select...">
+    {(vals) => vals.map((v) => <ComboboxChip key={v} value={v} onRemove={...} />)}
+  </ComboboxChips>
+  ...
+</Combobox>
+```
+
+## Groups
+
+```tsx
+<ComboboxCollection>
+  <ComboboxGroup>
+    <ComboboxLabel>Group A</ComboboxLabel>
+    <ComboboxItem value="a">A</ComboboxItem>
+  </ComboboxGroup>
+  <ComboboxSeparator />
+  ...
+</ComboboxCollection>
+```
+
+## Notes
+
+- Injects CSS at mount; client-only in SSR.
+- `useComboboxAnchor` for PopoverAnchor positioning.

package/docs/components/nqui-command-palette.md

@@ -0,0 +1,29 @@
+# nqui CommandPalette
+
+> Global command palette (Cmd+K). Wraps Command with shortcut.
+
+## Import
+
+```tsx
+import { CommandPalette } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<CommandPalette open={open} onOpenChange={setOpen} shortcutEnabled>
+  <CommandInput placeholder="Search..." />
+  <CommandList>...</CommandList>
+</CommandPalette>
+```
+
+## Programmatic Only
+
+```tsx
+<CommandPalette shortcutEnabled={false} ... />
+```
+
+## Notes
+
+- Keyboard listener on window. May conflict with other global shortcuts.
+- Custom title/description for accessibility.

package/docs/components/nqui-command.md

@@ -0,0 +1,39 @@
+# nqui Command
+
+> Command palette filter list. CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut. CommandDialog for modal.
+
+## Import
+
+```tsx
+import {
+  Command, CommandInput, CommandList, CommandEmpty, CommandGroup,
+  CommandItem, CommandSeparator, CommandShortcut, CommandDialog
+} from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Command>
+  <CommandInput placeholder="Search..." />
+  <CommandList>
+    <CommandEmpty>No results</CommandEmpty>
+    <CommandGroup heading="Suggestions">
+      <CommandItem>Item</CommandItem>
+    </CommandGroup>
+    <CommandSeparator />
+    <CommandGroup heading="Other">
+      <CommandItem>Other<CommandShortcut>⌘K</CommandShortcut></CommandItem>
+    </CommandGroup>
+  </CommandList>
+</Command>
+```
+
+## CommandDialog
+
+```tsx
+<CommandDialog open={open} onOpenChange={setOpen}>
+  <CommandInput />
+  <CommandList>...</CommandList>
+</CommandDialog>
+```

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

@@ -0,0 +1,33 @@
+# nqui ContextMenu
+
+> Right-click menu. Checkbox, radio, submenus, shortcuts.
+
+## Import
+
+```tsx
+import {
+  ContextMenu, ContextMenuTrigger, ContextMenuContent,
+  ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioGroup,
+  ContextMenuRadioItem, ContextMenuSub, ContextMenuSubTrigger,
+  ContextMenuSubContent, ContextMenuShortcut
+} from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<ContextMenu>
+  <ContextMenuTrigger>Right-click here</ContextMenuTrigger>
+  <ContextMenuContent>
+    <ContextMenuItem>Copy</ContextMenuItem>
+    <ContextMenuCheckboxItem checked={x} onCheckedChange={setX}>Option</ContextMenuCheckboxItem>
+    <ContextMenuRadioGroup value={v} onValueChange={setV}>
+      <ContextMenuRadioItem value="a">A</ContextMenuRadioItem>
+    </ContextMenuRadioGroup>
+    <ContextMenuSub>
+      <ContextMenuSubTrigger>More</ContextMenuSubTrigger>
+      <ContextMenuSubContent>...</ContextMenuSubContent>
+    </ContextMenuSub>
+  </ContextMenuContent>
+</ContextMenu>
+```

package/docs/components/nqui-dialog.md

@@ -0,0 +1,36 @@
+# nqui Dialog
+
+> Modal dialog. Core Radix primitive.
+
+## Import
+
+```tsx
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Dialog>
+  <DialogTrigger asChild><Button>Open</Button></DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Title</DialogTitle>
+      <DialogDescription>Description</DialogDescription>
+    </DialogHeader>
+    <p>Body</p>
+    <DialogFooter>
+      <Button variant="outline">Cancel</Button>
+      <Button>Save</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```
+
+## Controlled
+
+```tsx
+<Dialog open={open} onOpenChange={setOpen}>
+  ...
+</Dialog>
+```

package/docs/components/nqui-drawer.md

@@ -0,0 +1,27 @@
+# nqui Drawer
+
+> Bottom drawer. DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter.
+
+## Import
+
+```tsx
+import {
+  Drawer, DrawerTrigger, DrawerContent, DrawerHeader,
+  DrawerTitle, DrawerDescription, DrawerFooter
+} from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Drawer>
+  <DrawerTrigger asChild><Button>Open</Button></DrawerTrigger>
+  <DrawerContent>
+    <DrawerHeader>
+      <DrawerTitle>Title</DrawerTitle>
+      <DrawerDescription>Desc</DrawerDescription>
+    </DrawerHeader>
+    <DrawerFooter><Button>Save</Button></DrawerFooter>
+  </DrawerContent>
+</Drawer>
+```

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

@@ -0,0 +1,56 @@
+# nqui DropdownMenu
+
+> Context menu. Checkbox/radio items, submenus, shortcuts.
+
+## Import
+
+```tsx
+import {
+  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
+  DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem,
+  DropdownMenuRadioGroup, DropdownMenuLabel, DropdownMenuSeparator,
+  DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent,
+  DropdownMenuShortcut
+} from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<DropdownMenu>
+  <DropdownMenuTrigger asChild><Button>Open</Button></DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuItem>Item</DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem>Another</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>
+```
+
+## Checkbox / Radio
+
+```tsx
+<DropdownMenuCheckboxItem checked={x} onCheckedChange={setX}>
+  Toggle
+</DropdownMenuCheckboxItem>
+<DropdownMenuRadioGroup value={v} onValueChange={setV}>
+  <DropdownMenuRadioItem value="a">A</DropdownMenuRadioItem>
+</DropdownMenuRadioGroup>
+```
+
+## Submenu
+
+```tsx
+<DropdownMenuSub>
+  <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>
+  <DropdownMenuSubContent>
+    <DropdownMenuItem>Sub item</DropdownMenuItem>
+  </DropdownMenuSubContent>
+</DropdownMenuSub>
+```
+
+## Shortcut
+
+```tsx
+<DropdownMenuItem>Save<DropdownMenuShortcut>⌘S</DropdownMenuShortcut></DropdownMenuItem>
+```

package/docs/components/nqui-empty.md

@@ -0,0 +1,22 @@
+# nqui Empty
+
+> Empty state. Header, title, description, media, content.
+
+## Import
+
+```tsx
+import { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Empty>
+  <EmptyHeader>
+    <EmptyTitle>No items</EmptyTitle>
+    <EmptyDescription>Add something to get started</EmptyDescription>
+  </EmptyHeader>
+  <EmptyMedia>{/* icon */}</EmptyMedia>
+  <EmptyContent><Button>Add</Button></EmptyContent>
+</Empty>
+```

package/docs/components/nqui-field.md

@@ -0,0 +1,42 @@
+# nqui Field
+
+> Form field layout. Label, description, error. FieldGroup, FieldSet, FieldLegend.
+
+## Import
+
+```tsx
+import {
+  Field, FieldLabel, FieldDescription, FieldError,
+  FieldGroup, FieldSet, FieldLegend, FieldContent, FieldTitle, FieldSeparator
+} from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Field>
+  <FieldLabel>Email</FieldLabel>
+  <FieldDescription>We'll never share it</FieldDescription>
+  <Input id="email" />
+  <FieldError>Invalid email</FieldError>
+</Field>
+```
+
+## FieldGroup
+
+```tsx
+<FieldGroup>
+  <Field>...</Field>
+  <FieldSeparator />
+  <Field>...</Field>
+</FieldGroup>
+```
+
+## FieldSet
+
+```tsx
+<FieldSet>
+  <FieldLegend>Section</FieldLegend>
+  <FieldContent>...</FieldContent>
+</FieldSet>
+```

package/docs/components/nqui-frosted-glass.md

@@ -0,0 +1,19 @@
+# nqui FrostedGlass
+
+> Frosted glass blur effect. For sticky headers, overlays.
+
+## Import
+
+```tsx
+import { FrostedGlass } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<FrostedGlass blur={16} borderRadius={0} />
+```
+
+## Props
+
+blur, borderRadius, opacity. Use in sticky header with z-index.

package/docs/components/nqui-hover-card.md

@@ -0,0 +1,18 @@
+# nqui HoverCard
+
+> Hover panel. HoverCardTrigger, HoverCardContent.
+
+## Import
+
+```tsx
+import { HoverCard, HoverCardTrigger, HoverCardContent } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<HoverCard>
+  <HoverCardTrigger asChild><span>Hover</span></HoverCardTrigger>
+  <HoverCardContent>Content</HoverCardContent>
+</HoverCard>
+```

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

@@ -0,0 +1,22 @@
+# nqui InputGroup
+
+> Input with prefix/suffix. InputGroupText, InputGroupInput, etc.
+
+## Import
+
+```tsx
+import { InputGroup, InputGroupText, Input } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<InputGroup>
+  <InputGroupText>@</InputGroupText>
+  <Input placeholder="Username" />
+</InputGroup>
+<InputGroup>
+  <Input placeholder="Amount" />
+  <InputGroupText>.00</InputGroupText>
+</InputGroup>
+```

package/docs/components/nqui-input-otp.md

@@ -0,0 +1,23 @@
+# nqui InputOTP
+
+> OTP/code input. Group, slots, separator.
+
+## Import
+
+```tsx
+import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<InputOTP value={value} onChange={setValue}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSeparator />
+    <InputOTPSlot index={2} />
+    <InputOTPSlot index={3} />
+  </InputOTPGroup>
+</InputOTP>
+```

package/docs/components/nqui-input.md

@@ -0,0 +1,25 @@
+# nqui Input
+
+> Text input. Core component.
+
+## Import
+
+```tsx
+import { Input } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Input placeholder="Email" type="email" />
+<Input type="password" disabled />
+```
+
+## With Label
+
+```tsx
+<div>
+  <Label htmlFor="email">Email</Label>
+  <Input id="email" type="email" />
+</div>
+```

package/docs/components/nqui-item.md

@@ -0,0 +1,25 @@
+# nqui Item
+
+> List item layout. Media, content, actions. ItemGroup, ItemSeparator, ItemHeader, ItemFooter.
+
+## Import
+
+```tsx
+import {
+  Item, ItemMedia, ItemContent, ItemActions, ItemTitle, ItemDescription,
+  ItemGroup, ItemSeparator, ItemHeader, ItemFooter
+} from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Item>
+  <ItemMedia><Avatar /></ItemMedia>
+  <ItemContent>
+    <ItemTitle>Title</ItemTitle>
+    <ItemDescription>Desc</ItemDescription>
+  </ItemContent>
+  <ItemActions><Button>...</Button></ItemActions>
+</Item>
+```

package/docs/components/nqui-kbd.md

@@ -0,0 +1,25 @@
+# nqui Kbd
+
+> Keyboard key indicator for shortcuts.
+
+## Import
+
+```tsx
+import { Kbd } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+Press <Kbd>⌘</Kbd> + <Kbd>K</Kbd> to open
+<Kbd>Esc</Kbd> to close
+<Kbd>Ctrl</Kbd> + <Kbd>Shift</Kbd> + <Kbd>P</Kbd>
+```
+
+## KbdGroup
+
+```tsx
+import { Kbd } from "@nqlib/nqui"
+// KbdGroup: import from @/components/ui/kbd if needed
+<div><Kbd>Ctrl</Kbd>+<Kbd>K</Kbd></div>
+```

package/docs/components/nqui-label.md

@@ -0,0 +1,16 @@
+# nqui Label
+
+> Form label. Associates with form controls via htmlFor.
+
+## Import
+
+```tsx
+import { Label } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Label htmlFor="email">Email</Label>
+<Input id="email" />
+```

package/docs/components/nqui-logo.md

@@ -0,0 +1,16 @@
+# nqui NquiLogo
+
+> Theme-aware logo. Adapts to light/dark.
+
+## Import
+
+```tsx
+import { NquiLogo } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<NquiLogo />
+<NquiLogo className="size-12" />
+```

package/docs/components/nqui-menubar.md

@@ -0,0 +1,22 @@
+# nqui Menubar
+
+> Horizontal menu bar. MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem.
+
+## Import
+
+```tsx
+import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<Menubar>
+  <MenubarMenu>
+    <MenubarTrigger>File</MenubarTrigger>
+    <MenubarContent>
+      <MenubarItem>New</MenubarItem>
+    </MenubarContent>
+  </MenubarMenu>
+</Menubar>
+```

package/docs/components/nqui-native-select.md

@@ -0,0 +1,28 @@
+# nqui NativeSelect
+
+> Native HTML select.
+
+## Import
+
+```tsx
+import { NativeSelect, NativeSelectOption, NativeSelectOptGroup } from "@nqlib/nqui"
+```
+
+## Basic
+
+```tsx
+<NativeSelect>
+  <NativeSelectOption value="">Select...</NativeSelectOption>
+  <NativeSelectOption value="1">One</NativeSelectOption>
+</NativeSelect>
+```
+
+## OptGroup
+
+```tsx
+<NativeSelect>
+  <NativeSelectOptGroup label="Group">
+    <NativeSelectOption value="a">A</NativeSelectOption>
+  </NativeSelectOptGroup>
+</NativeSelect>
+```