@lukoweb/apitogo 0.2.22 → 0.2.24

package/docs/components/stepper.mdx

@@ -1,138 +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>
+---
+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

@@ -1,96 +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
+---
+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