@lukoweb/apitogo 0.1.24 → 0.1.37

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