@exitvibing/hqui 0.1.0

package/docs/components.md

@@ -0,0 +1,304 @@
+# Core Components
+
+Every component accepts `className` for custom styling and uses `forwardRef` for ref forwarding.
+
+---
+
+## Button
+
+```tsx
+import { Button } from "hqui";
+```
+
+**Props:**
+
+| Prop      | Type                                                                                                     | Default     |
+| --------- | -------------------------------------------------------------------------------------------------------- | ----------- |
+| `variant` | `'primary'` `'secondary'` `'destructive'` `'outline'` `'ghost'` `'purple'` `'orange'` `'blue'` `'green'` | `'primary'` |
+| `size`    | `'sm'` `'default'` `'lg'` `'icon'`                                                                       | `'default'` |
+
+`primary` is white background with black text in dark mode, black background with white text in light mode.
+
+```tsx
+<Button variant="purple" size="lg">Save</Button>
+<Button variant="orange">Warning</Button>
+<Button variant="ghost" size="icon"><Icon /></Button>
+<Button disabled>Disabled</Button>
+```
+
+---
+
+## Card
+
+```tsx
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "hqui";
+```
+
+No custom props. Compose the card using subcomponents:
+
+```tsx
+<Card>
+  <CardHeader>
+    <CardTitle>Title</CardTitle>
+    <CardDescription>Subtitle text</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Main content goes here</p>
+  </CardContent>
+  <CardFooter>
+    <Button>Action</Button>
+  </CardFooter>
+</Card>
+```
+
+---
+
+## Input
+
+```tsx
+import { Input } from "hqui";
+```
+
+Wraps a native `<input>` with styled border and focus ring. All standard input props work.
+
+```tsx
+<Input placeholder="Email" type="email" />
+<Input type="password" placeholder="Password" />
+<Input disabled placeholder="Cannot edit" />
+```
+
+---
+
+## Checkbox
+
+```tsx
+import { Checkbox } from "hqui";
+```
+
+**Props:**
+
+| Prop    | Type     | Default |
+| ------- | -------- | ------- |
+| `label` | `string` | none    |
+
+Also accepts all standard input props (`defaultChecked`, `disabled`, `onChange`, etc).
+
+```tsx
+<Checkbox label="Accept terms" defaultChecked />
+<Checkbox label="Send emails" />
+<Checkbox label="Cannot change" disabled />
+```
+
+---
+
+## ProgressBar
+
+```tsx
+import { ProgressBar } from "hqui";
+```
+
+**Props:**
+
+| Prop        | Type                                               | Default   |
+| ----------- | -------------------------------------------------- | --------- |
+| `value`     | `number`                                           | `0`       |
+| `max`       | `number`                                           | `100`     |
+| `showLabel` | `boolean`                                          | `false`   |
+| `color`     | `'white'` `'purple'` `'orange'` `'blue'` `'green'` | `'white'` |
+
+```tsx
+<ProgressBar value={65} max={100} />
+<ProgressBar value={80} color="purple" showLabel />
+<ProgressBar value={40} color="orange" />
+```
+
+---
+
+## Table
+
+```tsx
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+} from "hqui";
+```
+
+No custom props. Standard HTML table structure:
+
+```tsx
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Name</TableHead>
+      <TableHead>Email</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>Alice</TableCell>
+      <TableCell>alice@example.com</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+---
+
+## HighlightText
+
+```tsx
+import { HighlightText } from "hqui";
+```
+
+Wraps inline text with a highlight. In dark mode: white background, black text. In light mode: black background, white text.
+
+```tsx
+<p>
+  This is <HighlightText>highlighted</HighlightText> text.
+</p>
+```
+
+---
+
+## Badge
+
+```tsx
+import { Badge } from "hqui";
+```
+
+**Props:**
+
+| Prop      | Type                                                                                                             | Default     |
+| --------- | ---------------------------------------------------------------------------------------------------------------- | ----------- |
+| `variant` | `'default'` `'secondary'` `'outline'` `'white'` `'destructive'` `'purple'` `'orange'` `'blue'` `'green'` `'red'` | `'default'` |
+
+```tsx
+<Badge variant="purple">Admin</Badge>
+<Badge variant="orange">Warning</Badge>
+<Badge variant="blue">Info</Badge>
+<Badge variant="white">Neutral</Badge>
+```
+
+---
+
+## Separator
+
+```tsx
+import { Separator } from "hqui";
+```
+
+**Props:**
+
+| Prop          | Type                        | Default        |
+| ------------- | --------------------------- | -------------- |
+| `orientation` | `'horizontal'` `'vertical'` | `'horizontal'` |
+
+```tsx
+<Separator />
+<Separator orientation="vertical" />
+```
+
+---
+
+## Tabs
+
+```tsx
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "hqui";
+```
+
+**Tabs props:**
+
+| Prop            | Type                      | Default |
+| --------------- | ------------------------- | ------- |
+| `defaultValue`  | `string`                  | none    |
+| `value`         | `string`                  | none    |
+| `onValueChange` | `(value: string) => void` | none    |
+
+Use `defaultValue` for uncontrolled, or `value` + `onValueChange` for controlled.
+
+```tsx
+<Tabs defaultValue="tab1">
+  <TabsList>
+    <TabsTrigger value="tab1">First</TabsTrigger>
+    <TabsTrigger value="tab2">Second</TabsTrigger>
+  </TabsList>
+  <TabsContent value="tab1">Content for first tab</TabsContent>
+  <TabsContent value="tab2">Content for second tab</TabsContent>
+</Tabs>
+```
+
+---
+
+## Switch
+
+```tsx
+import { Switch } from "hqui";
+```
+
+**Props:**
+
+| Prop    | Type     | Default |
+| ------- | -------- | ------- |
+| `label` | `string` | none    |
+
+Also accepts standard input props (`defaultChecked`, `disabled`, `onChange`, etc).
+
+```tsx
+<Switch label="Enable dark mode" defaultChecked />
+<Switch label="Notifications" />
+```
+
+---
+
+## Tooltip
+
+```tsx
+import { Tooltip } from "hqui";
+```
+
+**Props:**
+
+| Prop      | Type                                  | Default  |
+| --------- | ------------------------------------- | -------- |
+| `content` | `ReactNode`                           | required |
+| `side`    | `'top'` `'bottom'` `'left'` `'right'` | `'top'`  |
+| `delayMs` | `number`                              | `200`    |
+
+Wrap any element. The tooltip appears on hover after `delayMs` milliseconds.
+
+```tsx
+<Tooltip content="Delete this item" side="bottom">
+  <Button variant="destructive">Delete</Button>
+</Tooltip>
+```
+
+---
+
+## ThemeToggle
+
+```tsx
+import { ThemeToggle } from "hqui";
+```
+
+**Props:**
+
+| Prop           | Type               | Default               |
+| -------------- | ------------------ | --------------------- |
+| `defaultTheme` | `'light'` `'dark'` | auto-detects from DOM |
+
+Renders a button that toggles `class="dark"` on `<html>`. Shows a sun icon in dark mode, moon icon in light mode.
+
+```tsx
+<ThemeToggle />
+```

package/docs/design-system.md

@@ -0,0 +1,85 @@
+# Design System
+
+## Colors
+
+Named colors available as CSS variables. Priority order: purple, orange, blue, green, red.
+
+| Variable   | Value         | Hex     |
+| ---------- | ------------- | ------- |
+| `--purple` | `258 90% 66%` | #8b5cf6 |
+| `--orange` | `24 95% 53%`  | #f97316 |
+| `--blue`   | `217 91% 60%` | #3b82f6 |
+| `--green`  | `142 71% 45%` | #22c55e |
+| `--red`    | `0 84% 60%`   | #ef4444 |
+
+Use them in Tailwind classes: `bg-[hsl(var(--purple))]` or in CSS: `hsl(var(--purple))`.
+
+## Light and Dark Mode
+
+The library ships with two themes. Light mode is the default. Dark mode activates when `<html>` has `class="dark"`.
+
+```html
+<html>
+  <!-- light mode -->
+  <html class="dark">
+    <!-- dark mode -->
+  </html>
+</html>
+```
+
+Use the `ThemeToggle` component to let users switch between themes at runtime.
+
+### Light mode variables
+
+| Variable               | Value            | What it looks like |
+| ---------------------- | ---------------- | ------------------ |
+| `--background`         | `0 0% 100%`      | White              |
+| `--foreground`         | `240 10% 3.9%`   | Near black         |
+| `--primary`            | `240 5.9% 10%`   | Dark               |
+| `--primary-foreground` | `0 0% 98%`       | White              |
+| `--secondary`          | `240 4.8% 95.9%` | Light gray         |
+| `--muted`              | `240 4.8% 95.9%` | Light gray         |
+| `--muted-foreground`   | `240 3.8% 46.1%` | Medium gray        |
+| `--border`             | `240 5.9% 90%`   | Light border       |
+
+### Dark mode variables
+
+| Variable               | Value            | What it looks like |
+| ---------------------- | ---------------- | ------------------ |
+| `--background`         | `240 10% 3.9%`   | Near black         |
+| `--foreground`         | `0 0% 98%`       | White              |
+| `--primary`            | `0 0% 98%`       | White              |
+| `--primary-foreground` | `240 5.9% 10%`   | Dark               |
+| `--secondary`          | `240 3.7% 15.6%` | Dark gray          |
+| `--muted`              | `240 3.7% 15.6%` | Dark gray          |
+| `--muted-foreground`   | `240 5% 64.9%`   | Medium gray        |
+| `--border`             | `240 3.7% 15.6%` | Dark border        |
+
+### Using variables
+
+In Tailwind: `bg-background`, `text-foreground`, `border-border`, etc.
+
+In CSS: `hsl(var(--background))`, `hsl(var(--foreground))`, etc.
+
+## Text Selection
+
+Selected text always shows white background with black text:
+
+```css
+::selection {
+  background: white;
+  color: black;
+}
+```
+
+## Border Radius
+
+```
+--radius: 0.5rem
+```
+
+Tailwind classes: `rounded-lg` (0.5rem), `rounded-md` (0.375rem), `rounded-sm` (0.25rem).
+
+## Typography
+
+No fonts are bundled. The library uses the system font stack. If you want Inter, load it in your app.

package/docs/extended-components.md

@@ -0,0 +1,201 @@
+# Extended Components
+
+Built on top of the core components.
+
+---
+
+## Counter
+
+```tsx
+import { Counter } from "hqui";
+```
+
+**Props:**
+
+| Prop           | Type                      | Default |
+| -------------- | ------------------------- | ------- |
+| `initialValue` | `number`                  | `0`     |
+| `min`          | `number`                  | `0`     |
+| `max`          | `number`                  | `99`    |
+| `onChange`     | `(value: number) => void` | none    |
+
+A number input with minus and plus buttons.
+
+```tsx
+<Counter initialValue={3} min={1} max={20} />
+<Counter initialValue={0} onChange={(val) => console.log(val)} />
+```
+
+---
+
+## ArrowButton
+
+```tsx
+import { ArrowButton } from "hqui";
+```
+
+**Props:**
+
+| Prop        | Type                   | Default     |
+| ----------- | ---------------------- | ----------- |
+| `direction` | `'left'` `'right'`     | required    |
+| `text`      | `string`               | none        |
+| `variant`   | same as Button variant | `'primary'` |
+
+A button with an arrow icon. If `text` is provided, it shows text next to the arrow.
+
+```tsx
+<ArrowButton direction="left" />
+<ArrowButton direction="right" text="Next" />
+<ArrowButton direction="left" text="Back" variant="outline" />
+```
+
+---
+
+## ChooseList
+
+```tsx
+import { ChooseList } from "hqui";
+```
+
+**Props:**
+
+| Prop           | Type                                 | Default |
+| -------------- | ------------------------------------ | ------- |
+| `options`      | `{ label: string, value: string }[]` | `[]`    |
+| `defaultValue` | `string`                             | none    |
+| `onChange`     | `(e: ChangeEvent) => void`           | none    |
+
+A styled dropdown select.
+
+```tsx
+<ChooseList
+  options={[
+    { label: "React", value: "react" },
+    { label: "Vue", value: "vue" },
+    { label: "Svelte", value: "svelte" },
+  ]}
+  defaultValue="react"
+/>
+```
+
+---
+
+## Popup
+
+```tsx
+import { Popup } from "hqui";
+```
+
+**Props:**
+
+| Prop      | Type         | Default  |
+| --------- | ------------ | -------- |
+| `open`    | `boolean`    | `false`  |
+| `onClose` | `() => void` | required |
+| `title`   | `string`     | none     |
+
+A modal dialog. Press Escape or click the backdrop to close. Body scroll is locked while open.
+
+```tsx
+const [open, setOpen] = useState(false)
+
+<Button onClick={() => setOpen(true)}>Open</Button>
+
+<Popup open={open} onClose={() => setOpen(false)} title="Confirm">
+  <p>Are you sure?</p>
+  <div className="flex gap-2 mt-4">
+    <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
+    <Button onClick={() => setOpen(false)}>Confirm</Button>
+  </div>
+</Popup>
+```
+
+---
+
+## StatusBar
+
+```tsx
+import { StatusBar } from "hqui";
+```
+
+**Props:**
+
+| Prop       | Type                                              | Default          |
+| ---------- | ------------------------------------------------- | ---------------- |
+| `status`   | `'idle'` `'working'` `'error'` `'ready'` `'live'` | `'idle'`         |
+| `label`    | `string`                                          | uses status name |
+| `children` | `ReactNode`                                       | none             |
+
+Shows a colored dot next to a label. Children are shown after a divider.
+
+**Colors by status:**
+
+| Status    | Dot color        | Use for                       |
+| --------- | ---------------- | ----------------------------- |
+| `ready`   | Purple           | Online, active, connected     |
+| `live`    | Purple (pulsing) | Live, real-time               |
+| `working` | Blue (pulsing)   | Processing, deploying         |
+| `idle`    | Gray             | Away, inactive                |
+| `error`   | Orange           | Offline, disconnected, failed |
+
+```tsx
+<StatusBar status="ready" label="Online" />
+<StatusBar status="error" label="Offline" />
+<StatusBar status="working" label="Deploying" />
+<StatusBar status="live" label="Live">us-east-1</StatusBar>
+```
+
+---
+
+## WeekViewCalendar
+
+```tsx
+import { WeekViewCalendar } from "hqui";
+```
+
+**Props:**
+
+| Prop        | Type              | Default |
+| ----------- | ----------------- | ------- |
+| `events`    | `CalendarEvent[]` | `[]`    |
+| `startHour` | `number`          | `8`     |
+| `endHour`   | `number`          | `18`    |
+
+**CalendarEvent:**
+
+```ts
+{
+  id: string;
+  dayIndex: number; // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
+  startHour: number; // 9.5 means 9:30 AM
+  durationHours: number; // 1.5 means 1 hour 30 minutes
+  title: string;
+  color: string; // any CSS color
+}
+```
+
+```tsx
+<WeekViewCalendar
+  events={[
+    {
+      id: "1",
+      dayIndex: 1,
+      startHour: 9,
+      durationHours: 2,
+      title: "Standup",
+      color: "hsl(var(--purple))",
+    },
+    {
+      id: "2",
+      dayIndex: 3,
+      startHour: 14,
+      durationHours: 1,
+      title: "Review",
+      color: "hsl(var(--orange))",
+    },
+  ]}
+  startHour={8}
+  endHour={18}
+/>
+```