@lukoweb/apitogo 0.2.22 → 0.2.24

package/docs/components/callout.mdx

@@ -1,112 +1,112 @@
----
-title: Callout
-sidebar_icon: circle-alert
----
-
-import { Callout } from "@lukoweb/apitogo/ui/Callout";
-import { ReactComponentDoc } from "@lukoweb/apitogo/ui/ReactComponentDoc";
-
-This is a callout component that can be used to draw attention to important information.
-
-## Import
-
-```tsx
-import { Callout } from "@lukoweb/apitogo/ui/Callout";
-```
-
-<ReactComponentDoc component={Callout} />
-
-:::tip{title="Hot tip"}
-
-There's a shortcut to use callout components in Markdown files:
-[Admonitions](../markdown/admonitions).
-
-:::
-
-## Note
-
-<Callout type="note" title="Hey, listen!">
-  This draws attention to important information.
-</Callout>
-
-```tsx
-<Callout type="note" title="Hey, listen!">
-  This draws attention to important information.
-</Callout>
-```
-
-## Info
-
-<Callout type="info" title="It's safe to use the info">
-  This adds info to your content.
-</Callout>
-
-```tsx
-<Callout type="info" title="It's safe to use the info">
-  This adds info to your content.
-</Callout>
-```
-
-## Tip
-
-<Callout type="tip" title="You'll be successful">
-  If you choose to be.
-</Callout>
-
-```tsx
-<Callout type="tip" title="You'll be successful">
-  If you choose to be.
-</Callout>
-```
-
-## Danger
-
-<Callout type="danger" title="But some things are dangerous">
-  It's dangerous to go alone, take this.
-</Callout>
-
-```tsx
-<Callout type="danger" title="But some things are dangerous">
-  It's dangerous to go alone, take this.
-</Callout>
-```
-
-## Caution
-
-<Callout type="caution" title="So, better show a warning">
-  This raises a warning to watch out for.
-</Callout>
-
-```tsx
-<Callout type="caution" title="So, better show a warning">
-  This raises a warning to watch out for.
-</Callout>
-```
-
-## Variations
-
-Callouts can be customized by omitting the title or icon:
-
-<Callout type="note">Without a title</Callout>
-
-<Callout type="note" icon={false} title="Without an icon">
-  You can hide the icon while keeping the title
-</Callout>
-
-<Callout type="note" icon={false}>
-  Or have neither title nor icon
-</Callout>
-
-```tsx
-<Callout type="note">
-  Without a title
-</Callout>
-
-<Callout type="note" icon={false} title="Without an icon">
-  You can hide the icon while keeping the title
-</Callout>
-
-<Callout type="note" icon={false}>
-  Or have neither title nor icon
-</Callout>
-```
+---
+title: Callout
+sidebar_icon: circle-alert
+---
+
+import { Callout } from "@lukoweb/apitogo/ui/Callout";
+import { ReactComponentDoc } from "@lukoweb/apitogo/ui/ReactComponentDoc";
+
+This is a callout component that can be used to draw attention to important information.
+
+## Import
+
+```tsx
+import { Callout } from "@lukoweb/apitogo/ui/Callout";
+```
+
+<ReactComponentDoc component={Callout} />
+
+:::tip{title="Hot tip"}
+
+There's a shortcut to use callout components in Markdown files:
+[Admonitions](../markdown/admonitions).
+
+:::
+
+## Note
+
+<Callout type="note" title="Hey, listen!">
+  This draws attention to important information.
+</Callout>
+
+```tsx
+<Callout type="note" title="Hey, listen!">
+  This draws attention to important information.
+</Callout>
+```
+
+## Info
+
+<Callout type="info" title="It's safe to use the info">
+  This adds info to your content.
+</Callout>
+
+```tsx
+<Callout type="info" title="It's safe to use the info">
+  This adds info to your content.
+</Callout>
+```
+
+## Tip
+
+<Callout type="tip" title="You'll be successful">
+  If you choose to be.
+</Callout>
+
+```tsx
+<Callout type="tip" title="You'll be successful">
+  If you choose to be.
+</Callout>
+```
+
+## Danger
+
+<Callout type="danger" title="But some things are dangerous">
+  It's dangerous to go alone, take this.
+</Callout>
+
+```tsx
+<Callout type="danger" title="But some things are dangerous">
+  It's dangerous to go alone, take this.
+</Callout>
+```
+
+## Caution
+
+<Callout type="caution" title="So, better show a warning">
+  This raises a warning to watch out for.
+</Callout>
+
+```tsx
+<Callout type="caution" title="So, better show a warning">
+  This raises a warning to watch out for.
+</Callout>
+```
+
+## Variations
+
+Callouts can be customized by omitting the title or icon:
+
+<Callout type="note">Without a title</Callout>
+
+<Callout type="note" icon={false} title="Without an icon">
+  You can hide the icon while keeping the title
+</Callout>
+
+<Callout type="note" icon={false}>
+  Or have neither title nor icon
+</Callout>
+
+```tsx
+<Callout type="note">
+  Without a title
+</Callout>
+
+<Callout type="note" icon={false} title="Without an icon">
+  You can hide the icon while keeping the title
+</Callout>
+
+<Callout type="note" icon={false}>
+  Or have neither title nor icon
+</Callout>
+```

package/docs/components/card.mdx

@@ -1,104 +1,104 @@
----
-title: Card
-sidebar_icon: square
----
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardFooter,
-} from "@lukoweb/apitogo/ui/Card";
-import { Button } from "@lukoweb/apitogo/ui/Button";
-import { Input } from "@lukoweb/apitogo/ui/Input";
-import { Label } from "@lukoweb/apitogo/ui/Label";
-
-A flexible card component with header, content, and footer sections for displaying grouped
-information.
-
-## Import
-
-```tsx
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@lukoweb/apitogo/ui/Card";
-```
-
-## Components
-
-The Card component consists of several sub-components:
-
-- `Card` - The main container
-- `CardHeader` - Header section with padding
-- `CardTitle` - Styled title for the header
-- `CardDescription` - Muted description text
-- `CardContent` - Main content area
-- `CardFooter` - Footer section for actions
-
-## Basic Usage
-
-<Card className="w-[350px] not-prose">
-  <CardHeader>
-    <CardTitle>Card Title</CardTitle>
-    <CardDescription>Card Description</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p>Card content goes here.</p>
-  </CardContent>
-</Card>
-
-```tsx
-<Card className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Card Title</CardTitle>
-    <CardDescription>Card Description</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p>Card content goes here.</p>
-  </CardContent>
-</Card>
-```
-
-## With Footer
-
-<Card className="w-[350px] not-prose">
-  <CardHeader>
-    <CardTitle>Create project</CardTitle>
-    <CardDescription>Deploy your new project in one-click.</CardDescription>
-  </CardHeader>
-  <CardContent>Card content goes here.</CardContent>
-  <CardFooter className="flex justify-between">
-    <Button variant="outline">Cancel</Button>
-    <Button>Deploy</Button>
-  </CardFooter>
-</Card>
-
-```tsx
-<Card className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Create project</CardTitle>
-    <CardDescription>Deploy your new project in one-click.</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <form>
-      <div className="grid w-full items-center gap-4">
-        <div className="flex flex-col space-y-1.5">
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" placeholder="Name of your project" />
-        </div>
-      </div>
-    </form>
-  </CardContent>
-  <CardFooter className="flex justify-between">
-    <Button variant="outline">Cancel</Button>
-    <Button>Deploy</Button>
-  </CardFooter>
-</Card>
-```
+---
+title: Card
+sidebar_icon: square
+---
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardFooter,
+} from "@lukoweb/apitogo/ui/Card";
+import { Button } from "@lukoweb/apitogo/ui/Button";
+import { Input } from "@lukoweb/apitogo/ui/Input";
+import { Label } from "@lukoweb/apitogo/ui/Label";
+
+A flexible card component with header, content, and footer sections for displaying grouped
+information.
+
+## Import
+
+```tsx
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@lukoweb/apitogo/ui/Card";
+```
+
+## Components
+
+The Card component consists of several sub-components:
+
+- `Card` - The main container
+- `CardHeader` - Header section with padding
+- `CardTitle` - Styled title for the header
+- `CardDescription` - Muted description text
+- `CardContent` - Main content area
+- `CardFooter` - Footer section for actions
+
+## Basic Usage
+
+<Card className="w-[350px] not-prose">
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card content goes here.</p>
+  </CardContent>
+</Card>
+
+```tsx
+<Card className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card content goes here.</p>
+  </CardContent>
+</Card>
+```
+
+## With Footer
+
+<Card className="w-[350px] not-prose">
+  <CardHeader>
+    <CardTitle>Create project</CardTitle>
+    <CardDescription>Deploy your new project in one-click.</CardDescription>
+  </CardHeader>
+  <CardContent>Card content goes here.</CardContent>
+  <CardFooter className="flex justify-between">
+    <Button variant="outline">Cancel</Button>
+    <Button>Deploy</Button>
+  </CardFooter>
+</Card>
+
+```tsx
+<Card className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Create project</CardTitle>
+    <CardDescription>Deploy your new project in one-click.</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <form>
+      <div className="grid w-full items-center gap-4">
+        <div className="flex flex-col space-y-1.5">
+          <Label htmlFor="name">Name</Label>
+          <Input id="name" placeholder="Name of your project" />
+        </div>
+      </div>
+    </form>
+  </CardContent>
+  <CardFooter className="flex justify-between">
+    <Button variant="outline">Cancel</Button>
+    <Button>Deploy</Button>
+  </CardFooter>
+</Card>
+```

package/docs/components/checkbox.mdx

@@ -1,72 +1,72 @@
----
-title: Checkbox
-sidebar_icon: check-square
----
-
-import { Checkbox } from "@lukoweb/apitogo/ui/Checkbox";
-import { Label } from "@lukoweb/apitogo/ui/Label";
-
-A checkbox component built on Radix UI primitives for boolean input.
-
-## Import
-
-```tsx
-import { Checkbox } from "@lukoweb/apitogo/ui/Checkbox";
-```
-
-## Basic Usage
-
-<Checkbox />
-
-```tsx
-<Checkbox />
-```
-
-## With Label
-
-<div className="flex items-center space-x-2">
-  <Checkbox id="terms" />
-  <Label htmlFor="terms">Accept terms and conditions</Label>
-</div>
-
-```tsx
-<div className="flex items-center space-x-2">
-  <Checkbox id="terms" />
-  <Label htmlFor="terms">Accept terms and conditions</Label>
-</div>
-```
-
-## Checked State
-
-<div className="flex items-center space-x-2">
-  <Checkbox id="terms2" defaultChecked />
-  <Label htmlFor="terms2">Accept terms and conditions</Label>
-</div>
-
-```tsx
-<div className="flex items-center space-x-2">
-  <Checkbox id="terms2" defaultChecked />
-  <Label htmlFor="terms2">Accept terms and conditions</Label>
-</div>
-```
-
-## Disabled State
-
-<div className="flex items-center space-x-2">
-  <Checkbox id="terms3" disabled />
-  <Label htmlFor="terms3">Accept terms and conditions</Label>
-</div>
-
-```tsx
-<div className="flex items-center space-x-2">
-  <Checkbox id="terms3" disabled />
-  <Label htmlFor="terms3">Accept terms and conditions</Label>
-</div>
-```
-
-## Features
-
-- **Accessibility**: Full keyboard navigation and screen reader support
-- **Indeterminate State**: Supports indeterminate state for partial selections
-- **Controlled/Uncontrolled**: Can be used with or without state management
-- **Customizable**: Easy to style with className prop
+---
+title: Checkbox
+sidebar_icon: check-square
+---
+
+import { Checkbox } from "@lukoweb/apitogo/ui/Checkbox";
+import { Label } from "@lukoweb/apitogo/ui/Label";
+
+A checkbox component built on Radix UI primitives for boolean input.
+
+## Import
+
+```tsx
+import { Checkbox } from "@lukoweb/apitogo/ui/Checkbox";
+```
+
+## Basic Usage
+
+<Checkbox />
+
+```tsx
+<Checkbox />
+```
+
+## With Label
+
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms" />
+  <Label htmlFor="terms">Accept terms and conditions</Label>
+</div>
+
+```tsx
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms" />
+  <Label htmlFor="terms">Accept terms and conditions</Label>
+</div>
+```
+
+## Checked State
+
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms2" defaultChecked />
+  <Label htmlFor="terms2">Accept terms and conditions</Label>
+</div>
+
+```tsx
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms2" defaultChecked />
+  <Label htmlFor="terms2">Accept terms and conditions</Label>
+</div>
+```
+
+## Disabled State
+
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms3" disabled />
+  <Label htmlFor="terms3">Accept terms and conditions</Label>
+</div>
+
+```tsx
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms3" disabled />
+  <Label htmlFor="terms3">Accept terms and conditions</Label>
+</div>
+```
+
+## Features
+
+- **Accessibility**: Full keyboard navigation and screen reader support
+- **Indeterminate State**: Supports indeterminate state for partial selections
+- **Controlled/Uncontrolled**: Can be used with or without state management
+- **Customizable**: Easy to style with className prop