@lukoweb/apitogo 0.2.23 → 0.2.24

package/docs/components/slider.mdx

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

@@ -1,119 +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.json` and content injected via `Slot.Source` components will be combined according
-to the `type` parameter.
-
-```tsx
-// In your site config
-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.
+---
+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.json` and content injected via `Slot.Source` components will be combined according
+to the `type` parameter.
+
+```tsx
+// In your site config
+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.