@lukoweb/apitogo 0.2.22 → 0.2.24

package/docs/components/textarea.mdx

@@ -1,78 +1,78 @@
----
-title: Textarea
-sidebar_icon: type
----
-
-import { Textarea } from "@lukoweb/apitogo/ui/Textarea";
-import { Label } from "@lukoweb/apitogo/ui/Label";
-
-A multiline text input component for forms and user input.
-
-## Import
-
-```tsx
-import { Textarea } from "@lukoweb/apitogo/ui/Textarea";
-```
-
-## Basic Usage
-
-<Textarea placeholder="Type your message here." />
-
-```tsx
-<Textarea placeholder="Type your message here." />
-```
-
-## With Label
-
-<div className="grid w-full gap-1.5">
-  <Label htmlFor="message">Your message</Label>
-  <Textarea placeholder="Type your message here." id="message" />
-</div>
-
-```tsx
-<div className="grid w-full gap-1.5">
-  <Label htmlFor="message">Your message</Label>
-  <Textarea placeholder="Type your message here." id="message" />
-</div>
-```
-
-## With Text
-
-<div className="grid w-full gap-1.5">
-  <Label htmlFor="message-2">Your message</Label>
-  <Textarea placeholder="Type your message here." id="message-2" />
-  <p className="text-sm text-muted-foreground">Your message will be copied to the support team.</p>
-</div>
-
-```tsx
-<div className="grid w-full gap-1.5">
-  <Label htmlFor="message-2">Your message</Label>
-  <Textarea placeholder="Type your message here." id="message-2" />
-  <p className="text-sm text-muted-foreground">Your message will be copied to the support team.</p>
-</div>
-```
-
-## Disabled State
-
-<Textarea disabled placeholder="Disabled textarea" />
-
-```tsx
-<Textarea disabled placeholder="Disabled textarea" />
-```
-
-## Custom Height
-
-<Textarea className="min-h-[150px]" placeholder="Taller textarea" />
-
-```tsx
-<Textarea className="min-h-[150px]" placeholder="Taller textarea" />
-```
-
-## Custom Styling
-
-The Textarea component accepts all standard textarea HTML attributes and can be customized with
-additional className:
-
-```tsx
-<Textarea className="resize-none" placeholder="Non-resizable textarea" />
-```
+---
+title: Textarea
+sidebar_icon: type
+---
+
+import { Textarea } from "@lukoweb/apitogo/ui/Textarea";
+import { Label } from "@lukoweb/apitogo/ui/Label";
+
+A multiline text input component for forms and user input.
+
+## Import
+
+```tsx
+import { Textarea } from "@lukoweb/apitogo/ui/Textarea";
+```
+
+## Basic Usage
+
+<Textarea placeholder="Type your message here." />
+
+```tsx
+<Textarea placeholder="Type your message here." />
+```
+
+## With Label
+
+<div className="grid w-full gap-1.5">
+  <Label htmlFor="message">Your message</Label>
+  <Textarea placeholder="Type your message here." id="message" />
+</div>
+
+```tsx
+<div className="grid w-full gap-1.5">
+  <Label htmlFor="message">Your message</Label>
+  <Textarea placeholder="Type your message here." id="message" />
+</div>
+```
+
+## With Text
+
+<div className="grid w-full gap-1.5">
+  <Label htmlFor="message-2">Your message</Label>
+  <Textarea placeholder="Type your message here." id="message-2" />
+  <p className="text-sm text-muted-foreground">Your message will be copied to the support team.</p>
+</div>
+
+```tsx
+<div className="grid w-full gap-1.5">
+  <Label htmlFor="message-2">Your message</Label>
+  <Textarea placeholder="Type your message here." id="message-2" />
+  <p className="text-sm text-muted-foreground">Your message will be copied to the support team.</p>
+</div>
+```
+
+## Disabled State
+
+<Textarea disabled placeholder="Disabled textarea" />
+
+```tsx
+<Textarea disabled placeholder="Disabled textarea" />
+```
+
+## Custom Height
+
+<Textarea className="min-h-[150px]" placeholder="Taller textarea" />
+
+```tsx
+<Textarea className="min-h-[150px]" placeholder="Taller textarea" />
+```
+
+## Custom Styling
+
+The Textarea component accepts all standard textarea HTML attributes and can be customized with
+additional className:
+
+```tsx
+<Textarea className="resize-none" placeholder="Non-resizable textarea" />
+```

package/docs/components/tooltip.mdx

@@ -1,195 +1,195 @@
----
-title: Tooltip
-sidebar_icon: info
----
-
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-  TooltipArrow,
-} from "@lukoweb/apitogo/ui/Tooltip";
-import { Button } from "@lukoweb/apitogo/ui/Button";
-
-A tooltip component built on Radix UI primitives for displaying helpful information on hover or
-focus.
-
-## Import
-
-```tsx
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-  TooltipArrow,
-} from "@lukoweb/apitogo/ui/Tooltip";
-```
-
-## Components
-
-The Tooltip component consists of several sub-components:
-
-- `TooltipProvider` - Provides context for tooltip behavior
-- `Tooltip` - The main container (root)
-- `TooltipTrigger` - Element that triggers the tooltip
-- `TooltipContent` - The tooltip content container
-- `TooltipArrow` - Optional arrow pointing to the trigger
-
-## Basic Usage
-
-<TooltipProvider>
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button variant="outline">Hover</Button>
-    </TooltipTrigger>
-    <TooltipContent>
-      <p>Add to library</p>
-    </TooltipContent>
-  </Tooltip>
-</TooltipProvider>
-
-```tsx
-<TooltipProvider>
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button variant="outline">Hover</Button>
-    </TooltipTrigger>
-    <TooltipContent>
-      <p>Add to library</p>
-    </TooltipContent>
-  </Tooltip>
-</TooltipProvider>
-```
-
-## With Arrow
-
-<TooltipProvider>
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button variant="outline">Hover for tooltip with arrow</Button>
-    </TooltipTrigger>
-    <TooltipContent>
-      <p>Add to library</p>
-      <TooltipArrow />
-    </TooltipContent>
-  </Tooltip>
-</TooltipProvider>
-
-```tsx
-<TooltipProvider>
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button variant="outline">Hover for tooltip with arrow</Button>
-    </TooltipTrigger>
-    <TooltipContent>
-      <p>Add to library</p>
-      <TooltipArrow />
-    </TooltipContent>
-  </Tooltip>
-</TooltipProvider>
-```
-
-## Different Sides
-
-<TooltipProvider>
-  <div className="flex gap-2">
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button variant="outline">Top</Button>
-      </TooltipTrigger>
-      <TooltipContent side="top">
-        <p>Top tooltip</p>
-      </TooltipContent>
-    </Tooltip>
-
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button variant="outline">Right</Button>
-      </TooltipTrigger>
-      <TooltipContent side="right">
-        <p>Right tooltip</p>
-      </TooltipContent>
-    </Tooltip>
-
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button variant="outline">Bottom</Button>
-      </TooltipTrigger>
-      <TooltipContent side="bottom">
-        <p>Bottom tooltip</p>
-      </TooltipContent>
-    </Tooltip>
-
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button variant="outline">Left</Button>
-      </TooltipTrigger>
-      <TooltipContent side="left">
-        <p>Left tooltip</p>
-      </TooltipContent>
-    </Tooltip>
-
-  </div>
-</TooltipProvider>
-
-```tsx
-<TooltipProvider>
-  <div className="flex gap-2">
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button variant="outline">Top</Button>
-      </TooltipTrigger>
-      <TooltipContent side="top">
-        <p>Top tooltip</p>
-      </TooltipContent>
-    </Tooltip>
-
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button variant="outline">Right</Button>
-      </TooltipTrigger>
-      <TooltipContent side="right">
-        <p>Right tooltip</p>
-      </TooltipContent>
-    </Tooltip>
-
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button variant="outline">Bottom</Button>
-      </TooltipTrigger>
-      <TooltipContent side="bottom">
-        <p>Bottom tooltip</p>
-      </TooltipContent>
-    </Tooltip>
-
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button variant="outline">Left</Button>
-      </TooltipTrigger>
-      <TooltipContent side="left">
-        <p>Left tooltip</p>
-      </TooltipContent>
-    </Tooltip>
-  </div>
-</TooltipProvider>
-```
-
-## Global Provider
-
-For multiple tooltips, wrap your app with `TooltipProvider`:
-
-```tsx
-function App() {
-  return <TooltipProvider>{/* Your app content with tooltips */}</TooltipProvider>;
-}
-```
-
-## Features
-
-- **Keyboard Navigation**: Accessible via keyboard focus
-- **Positioning**: Smart positioning to stay within viewport
-- **Delay Control**: Configurable show/hide delays
-- **Animation**: Smooth enter/exit animations
-- **Accessibility**: Full screen reader and keyboard support
+---
+title: Tooltip
+sidebar_icon: info
+---
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  TooltipArrow,
+} from "@lukoweb/apitogo/ui/Tooltip";
+import { Button } from "@lukoweb/apitogo/ui/Button";
+
+A tooltip component built on Radix UI primitives for displaying helpful information on hover or
+focus.
+
+## Import
+
+```tsx
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  TooltipArrow,
+} from "@lukoweb/apitogo/ui/Tooltip";
+```
+
+## Components
+
+The Tooltip component consists of several sub-components:
+
+- `TooltipProvider` - Provides context for tooltip behavior
+- `Tooltip` - The main container (root)
+- `TooltipTrigger` - Element that triggers the tooltip
+- `TooltipContent` - The tooltip content container
+- `TooltipArrow` - Optional arrow pointing to the trigger
+
+## Basic Usage
+
+<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button variant="outline">Hover</Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Add to library</p>
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>
+
+```tsx
+<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button variant="outline">Hover</Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Add to library</p>
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>
+```
+
+## With Arrow
+
+<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button variant="outline">Hover for tooltip with arrow</Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Add to library</p>
+      <TooltipArrow />
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>
+
+```tsx
+<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button variant="outline">Hover for tooltip with arrow</Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Add to library</p>
+      <TooltipArrow />
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>
+```
+
+## Different Sides
+
+<TooltipProvider>
+  <div className="flex gap-2">
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Top</Button>
+      </TooltipTrigger>
+      <TooltipContent side="top">
+        <p>Top tooltip</p>
+      </TooltipContent>
+    </Tooltip>
+
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Right</Button>
+      </TooltipTrigger>
+      <TooltipContent side="right">
+        <p>Right tooltip</p>
+      </TooltipContent>
+    </Tooltip>
+
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Bottom</Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        <p>Bottom tooltip</p>
+      </TooltipContent>
+    </Tooltip>
+
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Left</Button>
+      </TooltipTrigger>
+      <TooltipContent side="left">
+        <p>Left tooltip</p>
+      </TooltipContent>
+    </Tooltip>
+
+  </div>
+</TooltipProvider>
+
+```tsx
+<TooltipProvider>
+  <div className="flex gap-2">
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Top</Button>
+      </TooltipTrigger>
+      <TooltipContent side="top">
+        <p>Top tooltip</p>
+      </TooltipContent>
+    </Tooltip>
+
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Right</Button>
+      </TooltipTrigger>
+      <TooltipContent side="right">
+        <p>Right tooltip</p>
+      </TooltipContent>
+    </Tooltip>
+
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Bottom</Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        <p>Bottom tooltip</p>
+      </TooltipContent>
+    </Tooltip>
+
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Left</Button>
+      </TooltipTrigger>
+      <TooltipContent side="left">
+        <p>Left tooltip</p>
+      </TooltipContent>
+    </Tooltip>
+  </div>
+</TooltipProvider>
+```
+
+## Global Provider
+
+For multiple tooltips, wrap your app with `TooltipProvider`:
+
+```tsx
+function App() {
+  return <TooltipProvider>{/* Your app content with tooltips */}</TooltipProvider>;
+}
+```
+
+## Features
+
+- **Keyboard Navigation**: Accessible via keyboard focus
+- **Positioning**: Smart positioning to stay within viewport
+- **Delay Control**: Configurable show/hide delays
+- **Animation**: Smooth enter/exit animations
+- **Accessibility**: Full screen reader and keyboard support

package/docs/components/typography.mdx

@@ -1,61 +1,61 @@
----
-title: Typography
-sidebar_icon: letter-text
----
-
-import { Typography } from "@lukoweb/apitogo/components";
-
-The Typography component applies consistent prose styling to text content using
-[Tailwind's typography plugin](https://github.com/tailwindlabs/tailwindcss-typography). It
-automatically formats headings, paragraphs, lists, and other text elements with appropriate spacing,
-
-## Import
-
-```tsx
-import { Typography } from "@lukoweb/apitogo/components";
-```
-
-font sizes, and styling that adapts to both light and dark themes.
-
-This component is particularly useful when rendering markdown content or when you need consistent
-text formatting across your documentation.
-
-## Props
-
-```ts
-type TypographyProps = {
-  children: React.ReactNode;
-  className?: string;
-};
-```
-
-## Usage
-
-Wrap any content that needs prose formatting with the Typography component. It will automatically
-style headings, paragraphs, lists, and other text elements:
-
-```tsx
-import { Typography } from "@lukoweb/apitogo/components";
-
-<Typography>
-  <h1>Hello World</h1>
-  <p>This is a paragraph</p>
-  <ul>
-    <li>Item 1</li>
-    <li>Item 2</li>
-    <li>Item 3</li>
-  </ul>
-</Typography>;
-```
-
-## Example
-
-<Typography>
-  <h1>Hello World</h1>
-  <p>This is a paragraph</p>
-  <ul>
-    <li>Item 1</li>
-    <li>Item 2</li>
-    <li>Item 3</li>
-  </ul>
-</Typography>
+---
+title: Typography
+sidebar_icon: letter-text
+---
+
+import { Typography } from "@lukoweb/apitogo/components";
+
+The Typography component applies consistent prose styling to text content using
+[Tailwind's typography plugin](https://github.com/tailwindlabs/tailwindcss-typography). It
+automatically formats headings, paragraphs, lists, and other text elements with appropriate spacing,
+
+## Import
+
+```tsx
+import { Typography } from "@lukoweb/apitogo/components";
+```
+
+font sizes, and styling that adapts to both light and dark themes.
+
+This component is particularly useful when rendering markdown content or when you need consistent
+text formatting across your documentation.
+
+## Props
+
+```ts
+type TypographyProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+```
+
+## Usage
+
+Wrap any content that needs prose formatting with the Typography component. It will automatically
+style headings, paragraphs, lists, and other text elements:
+
+```tsx
+import { Typography } from "@lukoweb/apitogo/components";
+
+<Typography>
+  <h1>Hello World</h1>
+  <p>This is a paragraph</p>
+  <ul>
+    <li>Item 1</li>
+    <li>Item 2</li>
+    <li>Item 3</li>
+  </ul>
+</Typography>;
+```
+
+## Example
+
+<Typography>
+  <h1>Hello World</h1>
+  <p>This is a paragraph</p>
+  <ul>
+    <li>Item 1</li>
+    <li>Item 2</li>
+    <li>Item 3</li>
+  </ul>
+</Typography>