@mehdad67/apitogo 0.1.24

package/docs/components/select.mdx

@@ -0,0 +1,176 @@
+---
+title: Select
+sidebar_icon: chevron-down
+---
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "@lukoweb/apitogo/ui/Select";
+import { Label } from "@lukoweb/apitogo/ui/Label";
+
+A select component built on Radix UI primitives for choosing from a list of options.
+
+## Import
+
+<!-- prettier-ignore -->
+```tsx
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@lukoweb/apitogo/ui/Select";
+```
+
+## Components
+
+The Select component consists of several sub-components:
+
+- `Select` - The main container (root)
+- `SelectTrigger` - Button that opens the select menu
+- `SelectValue` - Displays the selected value
+- `SelectContent` - The dropdown content container
+- `SelectItem` - Individual selectable option
+- `SelectLabel` - Section labels within the dropdown
+- `SelectSeparator` - Visual separator between groups
+- `SelectGroup` - Groups related items together
+
+## Basic Usage
+
+<Select>
+  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Select a fruit" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="apple">Apple</SelectItem>
+    <SelectItem value="banana">Banana</SelectItem>
+    <SelectItem value="blueberry">Blueberry</SelectItem>
+    <SelectItem value="grapes">Grapes</SelectItem>
+    <SelectItem value="pineapple">Pineapple</SelectItem>
+  </SelectContent>
+</Select>
+
+```tsx
+<Select>
+  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Select a fruit" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="apple">Apple</SelectItem>
+    <SelectItem value="banana">Banana</SelectItem>
+    <SelectItem value="blueberry">Blueberry</SelectItem>
+    <SelectItem value="grapes">Grapes</SelectItem>
+    <SelectItem value="pineapple">Pineapple</SelectItem>
+  </SelectContent>
+</Select>
+```
+
+## With Labels and Groups
+
+<Select>
+  <SelectTrigger className="w-[280px]">
+    <SelectValue placeholder="Select a timezone" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectGroup>
+      <SelectLabel>North America</SelectLabel>
+      <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
+      <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
+      <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
+      <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
+      <SelectItem value="akst">Alaska Standard Time (AKST)</SelectItem>
+      <SelectItem value="hst">Hawaii Standard Time (HST)</SelectItem>
+    </SelectGroup>
+    <SelectSeparator />
+    <SelectGroup>
+      <SelectLabel>Europe & Africa</SelectLabel>
+      <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
+      <SelectItem value="cet">Central European Time (CET)</SelectItem>
+      <SelectItem value="eet">Eastern European Time (EET)</SelectItem>
+      <SelectItem value="west">Western European Summer Time (WEST)</SelectItem>
+      <SelectItem value="cat">Central Africa Time (CAT)</SelectItem>
+      <SelectItem value="eat">East Africa Time (EAT)</SelectItem>
+    </SelectGroup>
+  </SelectContent>
+</Select>
+
+```tsx
+<Select>
+  <SelectTrigger className="w-[280px]">
+    <SelectValue placeholder="Select a timezone" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectGroup>
+      <SelectLabel>North America</SelectLabel>
+      <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
+      <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
+      <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
+      <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
+      <SelectItem value="akst">Alaska Standard Time (AKST)</SelectItem>
+      <SelectItem value="hst">Hawaii Standard Time (HST)</SelectItem>
+    </SelectGroup>
+    <SelectSeparator />
+    <SelectGroup>
+      <SelectLabel>Europe & Africa</SelectLabel>
+      <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
+      <SelectItem value="cet">Central European Time (CET)</SelectItem>
+      <SelectItem value="eet">Eastern European Time (EET)</SelectItem>
+      <SelectItem value="west">Western European Summer Time (WEST)</SelectItem>
+      <SelectItem value="cat">Central Africa Time (CAT)</SelectItem>
+      <SelectItem value="eat">East Africa Time (EAT)</SelectItem>
+    </SelectGroup>
+  </SelectContent>
+</Select>
+```
+
+## With Label
+
+<div className="grid w-full max-w-sm items-center gap-1.5">
+  <Label htmlFor="framework">Framework</Label>
+  <Select>
+    <SelectTrigger id="framework">
+      <SelectValue placeholder="Select" />
+    </SelectTrigger>
+    <SelectContent position="popper">
+      <SelectItem value="next">Next.js</SelectItem>
+      <SelectItem value="sveltekit">SvelteKit</SelectItem>
+      <SelectItem value="nuxt">Nuxt.js</SelectItem>
+      <SelectItem value="remix">Remix</SelectItem>
+      <SelectItem value="astro">Astro</SelectItem>
+    </SelectContent>
+  </Select>
+</div>
+
+```tsx
+<div className="grid w-full max-w-sm items-center gap-1.5">
+  <Label htmlFor="framework">Framework</Label>
+  <Select>
+    <SelectTrigger id="framework">
+      <SelectValue placeholder="Select" />
+    </SelectTrigger>
+    <SelectContent position="popper">
+      <SelectItem value="next">Next.js</SelectItem>
+      <SelectItem value="sveltekit">SvelteKit</SelectItem>
+      <SelectItem value="nuxt">Nuxt.js</SelectItem>
+      <SelectItem value="remix">Remix</SelectItem>
+      <SelectItem value="astro">Astro</SelectItem>
+    </SelectContent>
+  </Select>
+</div>
+```
+
+## Features
+
+- **Keyboard Navigation**: Full keyboard support for navigation and selection
+- **Accessibility**: Proper ARIA attributes and screen reader support
+- **Controlled/Uncontrolled**: Can be used with or without state management
+- **Searchable**: Built-in search functionality when typing
+- **Custom Positioning**: Flexible positioning options

package/docs/components/shadcn.mdx

@@ -0,0 +1,73 @@
+---
+sidebar_label: shadcn/ui
+sidebar_icon: puzzle
+---
+
+All shadcn/ui components are available for direct import from their respective UI modules:
+
+export const components = [
+  "Accordion",
+  "Alert",
+  "AspectRatio",
+  "Badge",
+  "Breadcrumb",
+  "Button",
+  "Card",
+  "Carousel",
+  "Checkbox",
+  "Collapsible",
+  "Command",
+  "Dialog",
+  "Drawer",
+  "DropdownMenu",
+  "Form",
+  "HoverCard",
+  "Input",
+  "Label",
+  "Pagination",
+  "Popover",
+  "Progress",
+  "RadioGroup",
+  "ScrollArea",
+  "Select",
+  "Skeleton",
+  "Slider",
+  "Switch",
+  "Tabs",
+  "Textarea",
+  "Toggle",
+  "ToggleGroup",
+  "Tooltip",
+];
+
+# `shadcn/ui` components
+
+We use a couple components from [shadcn/ui](https://ui.shadcn.com). To make them re-usable for and
+use them in your project you can import them from `@lukoweb/apitogo/ui/*`.
+
+For example:
+
+```tsx
+import { Button } from "@lukoweb/apitogo/ui/Button";
+```
+
+Following components are available:
+
+<ul className="grid grid-cols-2 sm:grid-cols-3">
+  {components.map((comp) => {
+    const link = comp.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+
+    return (
+      <li key={comp}>
+        <a
+          target="_blank"
+          href={`https://ui.shadcn.com/docs/components/${link}`}
+        >
+          {comp}
+        </a>
+      </li>
+    );
+
+})}
+
+</ul>

package/docs/components/slider.mdx

@@ -0,0 +1,108 @@
+---
+title: Slider
+sidebar_icon: sliders-horizontal
+---
+
+import { Slider } from "@lukoweb/apitogo/ui/Slider";
+import { Label } from "@lukoweb/apitogo/ui/Label";
+import { useState } from "react";
+
+export const SliderWithValue = () => {
+  const [value, setValue] = useState([75]);
+  return (
+    <div className="space-y-2">
+      <div className="flex justify-between">
+        <Label>Brightness</Label>
+        <span className="text-sm text-muted-foreground">{value[0]}%</span>
+      </div>
+      <Slider value={value} max={100} step={1} onValueChange={setValue} />
+    </div>
+  );
+};
+
+A slider component built on Radix UI primitives for numeric input with a range.
+
+## Import
+
+```tsx
+import { Slider } from "@lukoweb/apitogo/ui/Slider";
+```
+
+## Basic Usage
+
+<Slider defaultValue={[50]} max={100} step={1} />
+
+```tsx
+<Slider defaultValue={[50]} max={100} step={1} />
+```
+
+## Range Slider
+
+<Slider defaultValue={[25, 75]} max={100} step={1} />
+
+```tsx
+<Slider defaultValue={[25, 75]} max={100} step={1} />
+```
+
+## With Label
+
+<div className="space-y-2">
+  <Label>Volume</Label>
+  <Slider defaultValue={[33]} max={100} step={1} />
+</div>
+
+```tsx
+<div className="space-y-2">
+  <Label>Volume</Label>
+  <Slider defaultValue={[33]} max={100} step={1} />
+</div>
+```
+
+## Disabled State
+
+<Slider defaultValue={[50]} max={100} step={1} disabled />
+
+```tsx
+<Slider defaultValue={[50]} max={100} step={1} disabled />
+```
+
+## Custom Step Size
+
+<div className="space-y-2">
+  <Label>Price Range ($)</Label>
+  <Slider defaultValue={[100]} max={1000} min={0} step={50} />
+</div>
+
+```tsx
+<div className="space-y-2">
+  <Label>Price Range ($)</Label>
+  <Slider defaultValue={[100]} max={1000} min={0} step={50} />
+</div>
+```
+
+## With Value Display
+
+<SliderWithValue />
+
+```tsx {2,8,10}
+const SliderWithValue = () => {
+  const [value, setValue] = useState([75]);
+
+  return (
+    <div className="space-y-2">
+      <div className="flex justify-between">
+        <Label>Brightness</Label>
+        <span className="text-sm text-muted-foreground">{value[0]}%</span>
+      </div>
+      <Slider value={value} max={100} step={1} onValueChange={setValue} />
+    </div>
+  );
+};
+```
+
+## Features
+
+- **Accessibility**: Full keyboard navigation and screen reader support
+- **Multiple Thumbs**: Support for range sliders with multiple values
+- **Customizable**: Easy to style with className prop
+- **Touch Support**: Optimized for touch devices

package/docs/components/slot.mdx

@@ -0,0 +1,119 @@
+---
+title: Slot
+sidebar_icon: between-horizontal-start
+description:
+  Use the low-level Slot component for advanced slot management in custom pages and MDX content.
+---
+
+The `Slot` component provides low-level access to APIToGo's slot system, allowing you to
+programmatically manage content injection in custom pages and React components.
+
+## Import
+
+```tsx
+import { Slot } from "@lukoweb/apitogo/components";
+```
+
+## Components
+
+The Slot system consists of two main components:
+
+### Slot.Target
+
+Renders content that has been injected into a specific slot.
+
+```tsx
+<Slot.Target name="my-slot" fallback={<div>No content</div>} />
+```
+
+**Props:**
+
+- `name` (required): The slot name to render content for
+- `fallback` (optional): Content to show when no slot content is available
+
+### Slot.Source
+
+Injects content into a specific slot. This component renders nothing but registers content to be
+displayed by `Slot.Target` components.
+
+```tsx
+<Slot.Source name="my-slot" type="append">
+  <div>Content to inject</div>
+</Slot.Source>
+```
+
+**Props:**
+
+- `name` (required): The slot name to inject content into
+- `type` (optional): How to handle multiple content sources
+  - `"replace"` (default): Replace existing content
+  - `"prepend"`: Add before existing content
+  - `"append"`: Add after existing content
+- `children`: The content to inject
+
+## Usage Example
+
+```tsx
+function MyCustomPage() {
+  return (
+    <div>
+      <h1>My Page</h1>
+
+      {/* Render slot content here */}
+      <Slot.Target name="custom-page-header" />
+
+      {/* Inject content into a slot */}
+      <Slot.Source name="custom-page-header">
+        <div className="bg-blue-100 p-4 rounded">Custom header content</div>
+      </Slot.Source>
+
+      <p>Page content here...</p>
+    </div>
+  );
+}
+```
+
+## Type Safety
+
+The Slot component is fully type-safe. All predefined slot names are available with autocomplete:
+
+```tsx
+// These will show autocomplete for available slot names
+<Slot.Target name="head-navigation-end" />
+<Slot.Source name="footer-before">Content</Slot.Source>
+```
+
+### Adding Custom Slot Names
+
+To add your own slot names with full type safety, augment the `CustomSlotNames` type:
+
+```tsx
+// types/slots.d.ts
+declare module "@lukoweb/apitogo" {
+  type CustomSlotNames = "my-custom-header" | "sidebar-extra";
+}
+```
+
+## Integration with Configuration
+
+The Slot component works with configuration-based slots. Content defined in your
+`apitogo.config.tsx` and content injected via `Slot.Source` components will be combined according to
+the `type` parameter.
+
+```tsx
+// In apitogo.config.tsx
+slots: {
+  "page-header": <div>Config header</div>
+}
+
+// In your component
+<Slot.Source name="page-header" type="append">
+  <Button>Go Home</Button>
+</Slot.Source>
+
+// Renders both: Config header, then Component button
+<Slot.Target name="page-header" />
+```
+
+For basic configuration usage, see the [Slots Configuration](/docs/configuration/slots)
+documentation.

package/docs/components/stepper.mdx

@@ -0,0 +1,138 @@
+---
+title: Stepper
+sidebar_icon: list-ordered
+---
+
+A vertical stepper component that displays a sequence of steps with automatic numbering and visual
+connections between steps. Perfect for multi-step processes, tutorials, or guided workflows.
+
+:::note
+
+In MDX components, the `Stepper` component is available by default and doesn't need an explicit
+import.
+
+:::
+
+## Import
+
+```tsx
+import { Stepper } from "@lukoweb/apitogo/ui/Stepper";
+```
+
+## Usage
+
+Wrap Markdown lists with the `Stepper` component to create a vertical stepper like this:
+
+<div className="flex gap-4 sm:items-center sm:flex-row flex-col">
+  <div className="flex-1">
+
+<!-- prettier-ignore -->
+```tsx
+<Stepper>
+
+1. **Identify the Problem**
+1. **Plan Your Project**
+1. **Build Your Solution**
+1. **Test and Deploy**
+
+</Stepper>
+```
+
+  </div>
+  <div className="flex-1">
+
+    <Stepper>
+
+1. **Identify the Problem**
+1. **Plan Your Project**
+1. **Build Your Solution**
+1. **Test and Deploy**
+
+</Stepper>
+  </div>
+</div>
+
+## Advanced Example
+
+<Stepper>
+
+1. **Identify the Problem**
+
+   Begin by identifying the problem you're trying to solve. This foundational step ensures you're
+   building the right solution for your needs.
+
+1. **Plan Your Project**
+
+   Define your project requirements and goals. This ensures you're building the right solution for
+   your needs.
+
+   :::info
+
+   Make sure you have gathered all the information you need before you start planning your project.
+
+   :::
+
+1. **Build Your Solution**
+
+   With a solid plan in place, start implementing your solution. Break down complex tasks into
+   manageable pieces and track your progress.
+   - Create component structure
+   - Implement core functionality
+   - Add styling and polish
+
+1. **Test and Deploy** 🚀
+
+   ```sh
+   pnpm build
+   pnpm test
+   pnpm deploy --prod
+   ```
+
+</Stepper>
+
+<details>
+  <summary>**See Markdown for example above 👆**</summary>
+
+<SyntaxHighlight language="mdx" code={`
+<Stepper>
+
+1. **Identify the Problem**
+
+   Begin by identifying the problem you're trying to solve. This foundational step ensures you're
+   building the right solution for your needs.
+
+1. **Plan Your Project**
+
+   Define your project requirements and goals. This ensures you're building the right solution for
+   your needs.
+
+   :::info
+
+   Make sure you have gathered all the information you need before you start planning your project.
+
+   :::
+
+1. **Build Your Solution**
+
+   With a solid plan in place, start implementing your solution. Break down complex tasks into
+   manageable pieces and track your progress.
+   - Create component structure
+   - Implement core functionality
+   - Add styling and polish
+
+1. **Test and Deploy** 🚀
+
+<!-- prettier-ignore-start -->
+   \`\`\`sh
+
+   pnpm build 
+   pnpm test 
+   pnpm deploy --prod
+
+   \`\`\`
+<!-- prettier-ignore-end -->
+
+</Stepper>
+`.trim()} />
+
+</details>

package/docs/components/switch.mdx

@@ -0,0 +1,96 @@
+---
+title: Switch
+sidebar_icon: toggle-left
+---
+
+import { Switch } from "@lukoweb/apitogo/ui/Switch";
+import { Label } from "@lukoweb/apitogo/ui/Label";
+
+A switch component built on Radix UI primitives for boolean toggle input.
+
+## Import
+
+```tsx
+import { Switch } from "@lukoweb/apitogo/ui/Switch";
+```
+
+## Basic Usage
+
+<Switch />
+
+```tsx
+<Switch />
+```
+
+## With Label
+
+<div className="flex items-center space-x-2">
+  <Switch id="airplane-mode" />
+  <Label htmlFor="airplane-mode">Airplane Mode</Label>
+</div>
+
+```tsx
+<div className="flex items-center space-x-2">
+  <Switch id="airplane-mode" />
+  <Label htmlFor="airplane-mode">Airplane Mode</Label>
+</div>
+```
+
+## Checked State
+
+<div className="flex items-center space-x-2">
+  <Switch id="airplane-mode-2" defaultChecked />
+  <Label htmlFor="airplane-mode-2">Airplane Mode</Label>
+</div>
+
+```tsx
+<div className="flex items-center space-x-2">
+  <Switch id="airplane-mode-2" defaultChecked />
+  <Label htmlFor="airplane-mode-2">Airplane Mode</Label>
+</div>
+```
+
+## Disabled State
+
+<div className="flex items-center space-x-2">
+  <Switch id="airplane-mode-3" disabled />
+  <Label htmlFor="airplane-mode-3">Airplane Mode</Label>
+</div>
+
+```tsx
+<div className="flex items-center space-x-2">
+  <Switch id="airplane-mode-3" disabled />
+  <Label htmlFor="airplane-mode-3">Airplane Mode</Label>
+</div>
+```
+
+## With Description
+
+<div className="flex items-center justify-between">
+  <div className="space-y-0.5">
+    <Label htmlFor="marketing-emails">Marketing emails</Label>
+    <div className="text-sm text-muted-foreground">
+      Receive emails about new products, features, and more.
+    </div>
+  </div>
+  <Switch id="marketing-emails" />
+</div>
+
+```tsx
+<div className="flex items-center justify-between">
+  <div className="space-y-0.5">
+    <Label htmlFor="marketing-emails">Marketing emails</Label>
+    <div className="text-sm text-muted-foreground">
+      Receive emails about new products, features, and more.
+    </div>
+  </div>
+  <Switch id="marketing-emails" />
+</div>
+```
+
+## Features
+
+- **Accessibility**: Full keyboard navigation and screen reader support
+- **Smooth Animation**: Smooth transition between states
+- **Controlled/Uncontrolled**: Can be used with or without state management
+- **Touch Friendly**: Optimized for touch interactions