@lukoweb/apitogo 0.2.22 → 0.2.24

package/docs/components/alert.mdx

@@ -1,130 +1,130 @@
----
-title: Alert
-sidebar_icon: triangle-alert
----
-
-import { Alert, AlertDescription, AlertTitle } from "@lukoweb/apitogo/ui/Alert";
-import { CheckCircle2Icon, TerminalIcon } from "@lukoweb/apitogo/icons";
-import { ReactComponentDoc } from "@lukoweb/apitogo/ui/ReactComponentDoc";
-
-An alert component for displaying important information to users with different severity levels.
-
-## Import
-
-```tsx
-import { Alert, AlertDescription, AlertTitle } from "@lukoweb/apitogo/ui/Alert";
-```
-
-## Components
-
-The Alert component consists of several sub-components:
-
-- `Alert` - The main container
-- `AlertTitle` - Title for the alert
-- `AlertDescription` - Description content for the alert
-
-## Default Alert
-
-<Alert className="not-prose">
-  <TerminalIcon className="h-4 w-4" />
-  <AlertTitle>Heads up!</AlertTitle>
-  <AlertDescription>
-    You can add components and dependencies to your app using the cli.
-  </AlertDescription>
-</Alert>
-
-```tsx title="Alert"
-<Alert>
-  <TerminalIcon className="h-4 w-4" />
-  <AlertTitle>Heads up!</AlertTitle>
-  <AlertDescription>
-    You can add components and dependencies to your app using the cli.
-  </AlertDescription>
-</Alert>
-```
-
-## Destructive Alert
-
-<Alert variant="destructive">
-  <AlertTitle>Error</AlertTitle>
-  <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
-</Alert>
-
-```tsx
-<Alert variant="destructive">
-  <AlertTitle>Error</AlertTitle>
-  <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
-</Alert>
-```
-
-## Without Title
-
-<Alert>
-  <TerminalIcon className="h-4 w-4" />
-  <AlertDescription>
-    You can add components and dependencies to your app using the cli.
-  </AlertDescription>
-</Alert>
-
-```tsx
-<Alert>
-  <TerminalIcon className="h-4 w-4" />
-  <AlertDescription>
-    You can add components and dependencies to your app using the cli.
-  </AlertDescription>
-</Alert>
-```
-
-## Without Icon
-
-<Alert>
-  <AlertTitle>Heads up!</AlertTitle>
-  <AlertDescription>
-    You can add components and dependencies to your app using the cli.
-  </AlertDescription>
-</Alert>
-
-```tsx
-<Alert>
-  <AlertTitle>Heads up!</AlertTitle>
-  <AlertDescription>
-    You can add components and dependencies to your app using the cli.
-  </AlertDescription>
-</Alert>
-```
-
-## Usage Examples
-
-### Success Alert
-
-<Alert className="border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-400">
-  <CheckCircle2Icon className="h-4 w-4" />
-  <AlertTitle>Success!</AlertTitle>
-  <AlertDescription>Your changes have been saved successfully.</AlertDescription>
-</Alert>
-
-```tsx
-<Alert className="border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-400">
-  <CheckCircle2Icon className="h-4 w-4" />
-  <AlertTitle>Success!</AlertTitle>
-  <AlertDescription>Your changes have been saved successfully.</AlertDescription>
-</Alert>
-```
-
-### Warning Alert
-
-<Alert className="border-yellow-200 bg-yellow-50 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-400">
-  <AlertTitle>Warning!</AlertTitle>
-  <AlertDescription>This action cannot be undone. Please proceed with caution.</AlertDescription>
-</Alert>
-
-```tsx
-<Alert className="border-yellow-200 bg-yellow-50 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-400">
-  <AlertTitle>Warning!</AlertTitle>
-  <AlertDescription>This action cannot be undone. Please proceed with caution.</AlertDescription>
-</Alert>
-```
-
-# Props
-
-<ReactComponentDoc component={Alert} />
+---
+title: Alert
+sidebar_icon: triangle-alert
+---
+
+import { Alert, AlertDescription, AlertTitle } from "@lukoweb/apitogo/ui/Alert";
+import { CheckCircle2Icon, TerminalIcon } from "@lukoweb/apitogo/icons";
+import { ReactComponentDoc } from "@lukoweb/apitogo/ui/ReactComponentDoc";
+
+An alert component for displaying important information to users with different severity levels.
+
+## Import
+
+```tsx
+import { Alert, AlertDescription, AlertTitle } from "@lukoweb/apitogo/ui/Alert";
+```
+
+## Components
+
+The Alert component consists of several sub-components:
+
+- `Alert` - The main container
+- `AlertTitle` - Title for the alert
+- `AlertDescription` - Description content for the alert
+
+## Default Alert
+
+<Alert className="not-prose">
+  <TerminalIcon className="h-4 w-4" />
+  <AlertTitle>Heads up!</AlertTitle>
+  <AlertDescription>
+    You can add components and dependencies to your app using the cli.
+  </AlertDescription>
+</Alert>
+
+```tsx title="Alert"
+<Alert>
+  <TerminalIcon className="h-4 w-4" />
+  <AlertTitle>Heads up!</AlertTitle>
+  <AlertDescription>
+    You can add components and dependencies to your app using the cli.
+  </AlertDescription>
+</Alert>
+```
+
+## Destructive Alert
+
+<Alert variant="destructive">
+  <AlertTitle>Error</AlertTitle>
+  <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
+</Alert>
+
+```tsx
+<Alert variant="destructive">
+  <AlertTitle>Error</AlertTitle>
+  <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
+</Alert>
+```
+
+## Without Title
+
+<Alert>
+  <TerminalIcon className="h-4 w-4" />
+  <AlertDescription>
+    You can add components and dependencies to your app using the cli.
+  </AlertDescription>
+</Alert>
+
+```tsx
+<Alert>
+  <TerminalIcon className="h-4 w-4" />
+  <AlertDescription>
+    You can add components and dependencies to your app using the cli.
+  </AlertDescription>
+</Alert>
+```
+
+## Without Icon
+
+<Alert>
+  <AlertTitle>Heads up!</AlertTitle>
+  <AlertDescription>
+    You can add components and dependencies to your app using the cli.
+  </AlertDescription>
+</Alert>
+
+```tsx
+<Alert>
+  <AlertTitle>Heads up!</AlertTitle>
+  <AlertDescription>
+    You can add components and dependencies to your app using the cli.
+  </AlertDescription>
+</Alert>
+```
+
+## Usage Examples
+
+### Success Alert
+
+<Alert className="border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-400">
+  <CheckCircle2Icon className="h-4 w-4" />
+  <AlertTitle>Success!</AlertTitle>
+  <AlertDescription>Your changes have been saved successfully.</AlertDescription>
+</Alert>
+
+```tsx
+<Alert className="border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-400">
+  <CheckCircle2Icon className="h-4 w-4" />
+  <AlertTitle>Success!</AlertTitle>
+  <AlertDescription>Your changes have been saved successfully.</AlertDescription>
+</Alert>
+```
+
+### Warning Alert
+
+<Alert className="border-yellow-200 bg-yellow-50 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-400">
+  <AlertTitle>Warning!</AlertTitle>
+  <AlertDescription>This action cannot be undone. Please proceed with caution.</AlertDescription>
+</Alert>
+
+```tsx
+<Alert className="border-yellow-200 bg-yellow-50 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-400">
+  <AlertTitle>Warning!</AlertTitle>
+  <AlertDescription>This action cannot be undone. Please proceed with caution.</AlertDescription>
+</Alert>
+```
+
+# Props
+
+<ReactComponentDoc component={Alert} />

package/docs/components/badge.mdx

@@ -1,70 +1,70 @@
----
-title: Badge
-sidebar_icon: tag
----
-
-A small badge component used to display status information or labels.
-
-## Import
-
-```tsx
-import { Badge } from "@lukoweb/apitogo/ui/Badge";
-```
-
-## Variants
-
-### Default
-
-<Badge variant="default">Default</Badge>
-
-```tsx
-<Badge variant="default">Default</Badge>
-```
-
-### Secondary
-
-<Badge variant="secondary">Secondary</Badge>
-
-```tsx
-<Badge variant="secondary">Secondary</Badge>
-```
-
-### Muted
-
-<Badge variant="muted">Muted</Badge>
-
-```tsx
-<Badge variant="muted">Muted</Badge>
-```
-
-### Destructive
-
-<Badge variant="destructive">Destructive</Badge>
-
-```tsx
-<Badge variant="destructive">Destructive</Badge>
-```
-
-### Outline
-
-<Badge variant="outline">Outline</Badge>
-
-```tsx
-<Badge variant="outline">Outline</Badge>
-```
-
-## Usage
-
-Badges are perfect for showing status, categories, or counts:
-
-<div className="flex gap-2">
-  <Badge variant="default">New</Badge>
-  <Badge variant="secondary">Main</Badge>
-  <Badge variant="muted">10</Badge>
-</div>
-
-```tsx
-<Badge variant="default">New</Badge>
-<Badge variant="secondary">Main</Badge>
-<Badge variant="muted">10</Badge>
-```
+---
+title: Badge
+sidebar_icon: tag
+---
+
+A small badge component used to display status information or labels.
+
+## Import
+
+```tsx
+import { Badge } from "@lukoweb/apitogo/ui/Badge";
+```
+
+## Variants
+
+### Default
+
+<Badge variant="default">Default</Badge>
+
+```tsx
+<Badge variant="default">Default</Badge>
+```
+
+### Secondary
+
+<Badge variant="secondary">Secondary</Badge>
+
+```tsx
+<Badge variant="secondary">Secondary</Badge>
+```
+
+### Muted
+
+<Badge variant="muted">Muted</Badge>
+
+```tsx
+<Badge variant="muted">Muted</Badge>
+```
+
+### Destructive
+
+<Badge variant="destructive">Destructive</Badge>
+
+```tsx
+<Badge variant="destructive">Destructive</Badge>
+```
+
+### Outline
+
+<Badge variant="outline">Outline</Badge>
+
+```tsx
+<Badge variant="outline">Outline</Badge>
+```
+
+## Usage
+
+Badges are perfect for showing status, categories, or counts:
+
+<div className="flex gap-2">
+  <Badge variant="default">New</Badge>
+  <Badge variant="secondary">Main</Badge>
+  <Badge variant="muted">10</Badge>
+</div>
+
+```tsx
+<Badge variant="default">New</Badge>
+<Badge variant="secondary">Main</Badge>
+<Badge variant="muted">10</Badge>
+```

package/docs/components/button.mdx

@@ -1,132 +1,132 @@
----
-title: Button
-sidebar_icon: mouse-pointer-click
----
-
-import { Button } from "@lukoweb/apitogo/ui/Button";
-import { PopcornIcon } from "@lukoweb/apitogo/icons";
-
-A flexible button component with multiple variants and sizes for different use cases.
-
-## Import
-
-```tsx
-import { Button } from "@lukoweb/apitogo/ui/Button";
-```
-
-## Variants
-
-### Default
-
-<Button variant="default">Default Button</Button>
-
-```tsx
-<Button variant="default">Default Button</Button>
-```
-
-### Destructive
-
-<Button variant="destructive">Delete</Button>
-
-```tsx
-<Button variant="destructive">Delete</Button>
-```
-
-### Outline
-
-<Button variant="outline">Outline Button</Button>
-
-```tsx
-<Button variant="outline">Outline Button</Button>
-```
-
-### Secondary
-
-<Button variant="secondary">Secondary</Button>
-
-```tsx
-<Button variant="secondary">Secondary</Button>
-```
-
-### Ghost
-
-<Button variant="ghost">Ghost Button</Button>
-
-```tsx
-<Button variant="ghost">Ghost Button</Button>
-```
-
-### Link
-
-<Button variant="link">Link Button</Button>
-
-```tsx
-<Button variant="link">Link Button</Button>
-```
-
-## Sizes
-
-### Default Size
-
-<Button size="default">Default Size</Button>
-
-```tsx
-<Button size="default">Default Size</Button>
-```
-
-### Small
-
-<Button size="sm">Small Button</Button>
-
-```tsx
-<Button size="sm">Small Button</Button>
-```
-
-### Large
-
-<Button size="lg">Large Button</Button>
-
-```tsx
-<Button size="lg">Large Button</Button>
-```
-
-### Extra Large
-
-<Button size="xl">Extra Large</Button>
-
-```tsx
-<Button size="xl">Extra Large</Button>
-```
-
-### Icon
-
-<Button size="icon">
-  <PopcornIcon size={16} />
-</Button>
-
-```tsx
-<Button size="icon">
-  <PopcornIcon size={16} />
-</Button>
-```
-
-## As Child
-
-Use the `asChild` prop to render the button as a different element while maintaining button styling:
-
-```tsx
-<Button asChild>
-  <a href="/link">Link as Button</a>
-</Button>
-```
-
-## Custom Styling
-
-The Button component accepts all standard button HTML attributes and can be customized with
-additional className:
-
-```tsx
-<Button className="w-full" variant="outline">
-  Full Width Button
-</Button>
-```
+---
+title: Button
+sidebar_icon: mouse-pointer-click
+---
+
+import { Button } from "@lukoweb/apitogo/ui/Button";
+import { PopcornIcon } from "@lukoweb/apitogo/icons";
+
+A flexible button component with multiple variants and sizes for different use cases.
+
+## Import
+
+```tsx
+import { Button } from "@lukoweb/apitogo/ui/Button";
+```
+
+## Variants
+
+### Default
+
+<Button variant="default">Default Button</Button>
+
+```tsx
+<Button variant="default">Default Button</Button>
+```
+
+### Destructive
+
+<Button variant="destructive">Delete</Button>
+
+```tsx
+<Button variant="destructive">Delete</Button>
+```
+
+### Outline
+
+<Button variant="outline">Outline Button</Button>
+
+```tsx
+<Button variant="outline">Outline Button</Button>
+```
+
+### Secondary
+
+<Button variant="secondary">Secondary</Button>
+
+```tsx
+<Button variant="secondary">Secondary</Button>
+```
+
+### Ghost
+
+<Button variant="ghost">Ghost Button</Button>
+
+```tsx
+<Button variant="ghost">Ghost Button</Button>
+```
+
+### Link
+
+<Button variant="link">Link Button</Button>
+
+```tsx
+<Button variant="link">Link Button</Button>
+```
+
+## Sizes
+
+### Default Size
+
+<Button size="default">Default Size</Button>
+
+```tsx
+<Button size="default">Default Size</Button>
+```
+
+### Small
+
+<Button size="sm">Small Button</Button>
+
+```tsx
+<Button size="sm">Small Button</Button>
+```
+
+### Large
+
+<Button size="lg">Large Button</Button>
+
+```tsx
+<Button size="lg">Large Button</Button>
+```
+
+### Extra Large
+
+<Button size="xl">Extra Large</Button>
+
+```tsx
+<Button size="xl">Extra Large</Button>
+```
+
+### Icon
+
+<Button size="icon">
+  <PopcornIcon size={16} />
+</Button>
+
+```tsx
+<Button size="icon">
+  <PopcornIcon size={16} />
+</Button>
+```
+
+## As Child
+
+Use the `asChild` prop to render the button as a different element while maintaining button styling:
+
+```tsx
+<Button asChild>
+  <a href="/link">Link as Button</a>
+</Button>
+```
+
+## Custom Styling
+
+The Button component accepts all standard button HTML attributes and can be customized with
+additional className:
+
+```tsx
+<Button className="w-full" variant="outline">
+  Full Width Button
+</Button>
+```