@lukoweb/apitogo 0.1.24 → 0.1.37

package/docs/components/callout.mdx

@@ -0,0 +1,112 @@
+---
+title: Callout
+sidebar_icon: circle-alert
+---
+
+import { Callout } from "@lukoweb/apitogo/ui/Callout";
+import { ReactComponentDoc } from "@lukoweb/apitogo/ui/ReactComponentDoc";
+
+This is a callout component that can be used to draw attention to important information.
+
+## Import
+
+```tsx
+import { Callout } from "@lukoweb/apitogo/ui/Callout";
+```
+
+<ReactComponentDoc component={Callout} />
+
+:::tip{title="Hot tip"}
+
+There's a shortcut to use callout components in Markdown files:
+[Admonitions](../markdown/admonitions).
+
+:::
+
+## Note
+
+<Callout type="note" title="Hey, listen!">
+  This draws attention to important information.
+</Callout>
+
+```tsx
+<Callout type="note" title="Hey, listen!">
+  This draws attention to important information.
+</Callout>
+```
+
+## Info
+
+<Callout type="info" title="It's safe to use the info">
+  This adds info to your content.
+</Callout>
+
+```tsx
+<Callout type="info" title="It's safe to use the info">
+  This adds info to your content.
+</Callout>
+```
+
+## Tip
+
+<Callout type="tip" title="You'll be successful">
+  If you choose to be.
+</Callout>
+
+```tsx
+<Callout type="tip" title="You'll be successful">
+  If you choose to be.
+</Callout>
+```
+
+## Danger
+
+<Callout type="danger" title="But some things are dangerous">
+  It's dangerous to go alone, take this.
+</Callout>
+
+```tsx
+<Callout type="danger" title="But some things are dangerous">
+  It's dangerous to go alone, take this.
+</Callout>
+```
+
+## Caution
+
+<Callout type="caution" title="So, better show a warning">
+  This raises a warning to watch out for.
+</Callout>
+
+```tsx
+<Callout type="caution" title="So, better show a warning">
+  This raises a warning to watch out for.
+</Callout>
+```
+
+## Variations
+
+Callouts can be customized by omitting the title or icon:
+
+<Callout type="note">Without a title</Callout>
+
+<Callout type="note" icon={false} title="Without an icon">
+  You can hide the icon while keeping the title
+</Callout>
+
+<Callout type="note" icon={false}>
+  Or have neither title nor icon
+</Callout>
+
+```tsx
+<Callout type="note">
+  Without a title
+</Callout>
+
+<Callout type="note" icon={false} title="Without an icon">
+  You can hide the icon while keeping the title
+</Callout>
+
+<Callout type="note" icon={false}>
+  Or have neither title nor icon
+</Callout>
+```

package/docs/components/card.mdx

@@ -0,0 +1,104 @@
+---
+title: Card
+sidebar_icon: square
+---
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardFooter,
+} from "@lukoweb/apitogo/ui/Card";
+import { Button } from "@lukoweb/apitogo/ui/Button";
+import { Input } from "@lukoweb/apitogo/ui/Input";
+import { Label } from "@lukoweb/apitogo/ui/Label";
+
+A flexible card component with header, content, and footer sections for displaying grouped
+information.
+
+## Import
+
+```tsx
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@lukoweb/apitogo/ui/Card";
+```
+
+## Components
+
+The Card component consists of several sub-components:
+
+- `Card` - The main container
+- `CardHeader` - Header section with padding
+- `CardTitle` - Styled title for the header
+- `CardDescription` - Muted description text
+- `CardContent` - Main content area
+- `CardFooter` - Footer section for actions
+
+## Basic Usage
+
+<Card className="w-[350px] not-prose">
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card content goes here.</p>
+  </CardContent>
+</Card>
+
+```tsx
+<Card className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card content goes here.</p>
+  </CardContent>
+</Card>
+```
+
+## With Footer
+
+<Card className="w-[350px] not-prose">
+  <CardHeader>
+    <CardTitle>Create project</CardTitle>
+    <CardDescription>Deploy your new project in one-click.</CardDescription>
+  </CardHeader>
+  <CardContent>Card content goes here.</CardContent>
+  <CardFooter className="flex justify-between">
+    <Button variant="outline">Cancel</Button>
+    <Button>Deploy</Button>
+  </CardFooter>
+</Card>
+
+```tsx
+<Card className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Create project</CardTitle>
+    <CardDescription>Deploy your new project in one-click.</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <form>
+      <div className="grid w-full items-center gap-4">
+        <div className="flex flex-col space-y-1.5">
+          <Label htmlFor="name">Name</Label>
+          <Input id="name" placeholder="Name of your project" />
+        </div>
+      </div>
+    </form>
+  </CardContent>
+  <CardFooter className="flex justify-between">
+    <Button variant="outline">Cancel</Button>
+    <Button>Deploy</Button>
+  </CardFooter>
+</Card>
+```

package/docs/components/checkbox.mdx

@@ -0,0 +1,72 @@
+---
+title: Checkbox
+sidebar_icon: check-square
+---
+
+import { Checkbox } from "@lukoweb/apitogo/ui/Checkbox";
+import { Label } from "@lukoweb/apitogo/ui/Label";
+
+A checkbox component built on Radix UI primitives for boolean input.
+
+## Import
+
+```tsx
+import { Checkbox } from "@lukoweb/apitogo/ui/Checkbox";
+```
+
+## Basic Usage
+
+<Checkbox />
+
+```tsx
+<Checkbox />
+```
+
+## With Label
+
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms" />
+  <Label htmlFor="terms">Accept terms and conditions</Label>
+</div>
+
+```tsx
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms" />
+  <Label htmlFor="terms">Accept terms and conditions</Label>
+</div>
+```
+
+## Checked State
+
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms2" defaultChecked />
+  <Label htmlFor="terms2">Accept terms and conditions</Label>
+</div>
+
+```tsx
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms2" defaultChecked />
+  <Label htmlFor="terms2">Accept terms and conditions</Label>
+</div>
+```
+
+## Disabled State
+
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms3" disabled />
+  <Label htmlFor="terms3">Accept terms and conditions</Label>
+</div>
+
+```tsx
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms3" disabled />
+  <Label htmlFor="terms3">Accept terms and conditions</Label>
+</div>
+```
+
+## Features
+
+- **Accessibility**: Full keyboard navigation and screen reader support
+- **Indeterminate State**: Supports indeterminate state for partial selections
+- **Controlled/Uncontrolled**: Can be used with or without state management
+- **Customizable**: Easy to style with className prop

package/docs/components/client-only.mdx

@@ -0,0 +1,79 @@
+---
+title: ClientOnly
+sidebar_icon: monitor
+---
+
+A component that only renders its children on the client-side, preventing hydration mismatches
+between server and client rendering.
+
+## Import
+
+```tsx
+import { ClientOnly } from "@lukoweb/apitogo/components";
+```
+
+## Props
+
+```ts
+type ClientOnlyProps = {
+  children: ReactNode;
+  fallback?: ReactNode;
+};
+```
+
+## Usage
+
+### Basic Usage
+
+```tsx
+<ClientOnly>
+  <SomeClientOnlyComponent />
+</ClientOnly>
+```
+
+### With Fallback
+
+```tsx
+<ClientOnly fallback={<div>Loading...</div>}>
+  <InteractiveWidget />
+</ClientOnly>
+```
+
+## Examples
+
+```tsx
+function MyComponent() {
+  return (
+    <div>
+      <h1>This renders on both server and client</h1>
+      <ClientOnly fallback={<Spinner />}>
+        <ComponentThatUsesWindowObject />
+      </ClientOnly>
+    </div>
+  );
+}
+```
+
+## Use Cases
+
+- **Browser APIs**: Components that use `window`, `document`, or other browser-only APIs
+- **Third-party Libraries**: Libraries that don't support SSR
+- **Theme Switches**: Preventing flash of incorrect theme
+- **Interactive Widgets**: Components with complex client-side state
+- **Conditional Features**: Features that should only appear on the client
+
+## Notes
+
+:::caution
+
+Use ClientOnly sparingly as it can impact SEO and initial page load performance. Only use it when
+necessary for components that cannot be server-rendered.
+
+:::
+
+:::tip
+
+Always provide a meaningful fallback that matches the approximate size and layout of your
+client-only component to prevent layout shifts.
+
+:::

package/docs/components/code-tabs.mdx

@@ -0,0 +1,179 @@
+---
+title: CodeTabs
+sidebar_icon: columns-2
+---
+
+A tabbed code block component that groups multiple code blocks into a single unified view. Useful
+for showing the same example in different languages or alternative commands for different package
+managers.
+
+:::note
+
+In MDX, the `CodeTabs` component is available by default and doesn't need an explicit import.
+
+:::
+
+## Usage
+
+Wrap multiple fenced code blocks with `<CodeTabs>` and they will render as tabs. Tab labels are
+automatically inferred from the code block language.
+
+<CodeTabs>
+
+```ts
+const greeting: string = "Hello, world!";
+console.log(greeting);
+```
+
+```js
+const greeting = "Hello, world!";
+console.log(greeting);
+```
+
+```py
+greeting = "Hello, world!"
+print(greeting)
+```
+
+</CodeTabs>
+
+````mdx
+<CodeTabs>
+
+```ts
+const greeting: string = "Hello, world!";
+console.log(greeting);
+```
+
+```js
+const greeting = "Hello, world!";
+console.log(greeting);
+```
+
+```py
+greeting = "Hello, world!"
+print(greeting)
+```
+
+</CodeTabs>
+````
+
+## Custom Labels
+
+Use the `title` meta attribute on each code block to set a custom tab label. This is especially
+useful when multiple code blocks share the same language.
+
+<CodeTabs>
+
+```sh /apitogo/ title="pnpm" showLineNumbers icon="pnpm"
+pnpm add @lukoweb/apitogo
+```
+
+```sh title="npm" icon="npm"
+npm install @lukoweb/apitogo
+```
+
+```sh title="yarn" icon="yarn"
+yarn add @lukoweb/apitogo
+```
+
+</CodeTabs>
+
+````mdx
+<CodeTabs>
+
+```sh title="pnpm" icon="pnpm"
+pnpm add @lukoweb/apitogo
+```
+
+```sh title="npm" icon="npm"
+npm install @lukoweb/apitogo
+```
+
+```sh title="yarn" icon="yarn"
+yarn add @lukoweb/apitogo
+```
+
+</CodeTabs>
+````
+
+## Synced Tabs
+
+Use the `syncKey` prop to keep multiple `CodeTabs` instances in sync. When a user selects a tab in
+one group, all groups with the same `syncKey` update to match. The selection is persisted to
+localStorage and synced across browser tabs.
+
+<div className="flex justify-center gap-4 *:flex-1">
+
+<CodeTabs syncKey="package-manager">
+```sh title="pnpm" icon="pnpm"
+pnpm run build
+```
+
+```sh title="npm" icon="npm"
+npm run build
+```
+
+</CodeTabs>
+
+<CodeTabs syncKey="package-manager">
+```sh title="pnpm" icon="pnpm"
+pnpm run build
+```
+
+```sh title="npm" icon="npm"
+npm run build
+```
+
+</CodeTabs>
+</div>
+
+````mdx
+<CodeTabs syncKey="package-manager">
+```sh title="pnpm" icon="pnpm"
+pnpm add @lukoweb/apitogo
+```
+
+```sh title="npm" icon="npm"
+npm install @lukoweb/apitogo
+```
+
+</CodeTabs>
+
+<!-- repeat above -->
+````
+
+## Programmatic Usage
+
+Usually it's recommended to use fenced code blocks in MDX files. However, when building reusable
+components (e.g. in your MDX component config), fenced code blocks aren't processed by the MDX
+pipeline. Use `CodeTabPanel` directly instead:
+
+```tsx
+import { CodeTabs, CodeTabPanel } from "@lukoweb/apitogo/ui/CodeTabs";
+
+const InstallTabs = ({ pkg }: { pkg: string }) => (
+  <CodeTabs syncKey="package-manager">
+    <CodeTabPanel language="sh" title="pnpm" icon="pnpm" code={`pnpm add ${pkg}`} />
+    <CodeTabPanel language="sh" title="npm" icon="npm" code={`npm install ${pkg}`} />
+    <CodeTabPanel language="sh" title="yarn" icon="yarn" code={`yarn add ${pkg}`} />
+  </CodeTabs>
+);
+```
+
+### CodeTabPanel Props
+
+| Prop       | Type     | Description                                                     |
+| ---------- | -------- | --------------------------------------------------------------- |
+| `code`     | `string` | The code content to display. Required.                          |
+| `language` | `string` | Language for syntax highlighting and label inference.           |
+| `title`    | `string` | Custom tab label. Falls back to `language`.                     |
+| `icon`     | `string` | Override the language icon (e.g. `"pnpm"`, `"npm"`).            |
+| `meta`     | `string` | Raw meta string like in code blocks (e.g. `"showLineNumbers"`). |
+
+## Props
+
+| Prop       | Type      | Description                                                                                           |
+| ---------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `syncKey`  | `string`  | Sync selected tab across all `CodeTabs` with the same key. Persisted to localStorage and across tabs. |
+| `hideIcon` | `boolean` | Hide the language icon in tabs. Defaults to `false`.                                                  |

package/docs/components/dialog.mdx

@@ -0,0 +1,167 @@
+---
+title: Dialog
+sidebar_icon: rectangle-horizontal
+---
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@lukoweb/apitogo/ui/Dialog";
+import { Button } from "@lukoweb/apitogo/ui/Button";
+import { Input } from "@lukoweb/apitogo/ui/Input";
+import { Label } from "@lukoweb/apitogo/ui/Label";
+
+A modal dialog component built on Radix UI primitives for displaying content that requires user
+attention.
+
+## Import
+
+```tsx
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@lukoweb/apitogo/ui/Dialog";
+```
+
+## Components
+
+The Dialog component consists of several sub-components:
+
+- `Dialog` - The main container (root)
+- `DialogTrigger` - Button that opens the dialog
+- `DialogContent` - The modal content container
+- `DialogHeader` - Header section for title and description
+- `DialogTitle` - The dialog title
+- `DialogDescription` - Additional description text
+- `DialogFooter` - Footer section for actions
+- `DialogClose` - Element that closes the dialog when clicked
+
+## Basic Usage
+
+<Dialog>
+  <DialogTrigger asChild>
+    <Button variant="outline">Open Dialog</Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you absolutely sure?</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone. This will permanently delete your account and remove your data
+        from our servers.
+      </DialogDescription>
+    </DialogHeader>
+  </DialogContent>
+</Dialog>
+
+```tsx
+<Dialog>
+  <DialogTrigger asChild>
+    <Button variant="outline">Open Dialog</Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you absolutely sure?</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone. This will permanently delete your account and remove your data
+        from our servers.
+      </DialogDescription>
+    </DialogHeader>
+  </DialogContent>
+</Dialog>
+```
+
+## With Footer Actions
+
+<Dialog>
+  <DialogTrigger asChild>
+    <Button>Edit Profile</Button>
+  </DialogTrigger>
+  <DialogContent className="sm:max-w-[425px]">
+    <DialogHeader>
+      <DialogTitle>Edit profile</DialogTitle>
+      <DialogDescription>
+        Make changes to your profile here. Click save when you're done.
+      </DialogDescription>
+    </DialogHeader>
+    <div className="grid gap-4 py-4">
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="name" className="text-right">
+          Name
+        </Label>
+        <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
+      </div>
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="username" className="text-right">
+          Username
+        </Label>
+        <Input id="username" defaultValue="@peduarte" className="col-span-3" />
+      </div>
+    </div>
+    <DialogFooter>
+      <Button type="submit">Save changes</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+
+```tsx
+<Dialog>
+  <DialogTrigger asChild>
+    <Button>Edit Profile</Button>
+  </DialogTrigger>
+  <DialogContent className="sm:max-w-[425px]">
+    <DialogHeader>
+      <DialogTitle>Edit profile</DialogTitle>
+      <DialogDescription>
+        Make changes to your profile here. Click save when you're done.
+      </DialogDescription>
+    </DialogHeader>
+    <div className="grid gap-4 py-4">
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="name" className="text-right">
+          Name
+        </Label>
+        <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
+      </div>
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="username" className="text-right">
+          Username
+        </Label>
+        <Input id="username" defaultValue="@peduarte" className="col-span-3" />
+      </div>
+    </div>
+    <DialogFooter>
+      <Button type="submit">Save changes</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```
+
+## Props
+
+### DialogContent
+
+```ts
+interface DialogContentProps extends React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Content
+> {
+  showCloseButton?: boolean; // Default: true
+}
+```
+
+## Features
+
+- **Keyboard Navigation**: ESC key closes the dialog
+- **Focus Management**: Focus is trapped within the dialog
+- **Accessibility**: Proper ARIA attributes and screen reader support
+- **Backdrop Click**: Clicking outside closes the dialog
+- **Animation**: Smooth enter/exit animations