@lukoweb/apitogo 0.2.22 → 0.2.24

package/docs/components/client-only.mdx

@@ -1,79 +1,79 @@
----
-title: ClientOnly
-sidebar_icon: monitor
----
-
-A component that only renders its children on the client-side, preventing hydration mismatches
-between server and client rendering.
-
-## Import
-
-```tsx
-import { ClientOnly } from "@lukoweb/apitogo/components";
-```
-
-## Props
-
-```ts
-type ClientOnlyProps = {
-  children: ReactNode;
-  fallback?: ReactNode;
-};
-```
-
-## Usage
-
-### Basic Usage
-
-```tsx
-<ClientOnly>
-  <SomeClientOnlyComponent />
-</ClientOnly>
-```
-
-### With Fallback
-
-```tsx
-<ClientOnly fallback={<div>Loading...</div>}>
-  <InteractiveWidget />
-</ClientOnly>
-```
-
-## Examples
-
-```tsx
-function MyComponent() {
-  return (
-    <div>
-      <h1>This renders on both server and client</h1>
-      <ClientOnly fallback={<Spinner />}>
-        <ComponentThatUsesWindowObject />
-      </ClientOnly>
-    </div>
-  );
-}
-```
-
-## Use Cases
-
-- **Browser APIs**: Components that use `window`, `document`, or other browser-only APIs
-- **Third-party Libraries**: Libraries that don't support SSR
-- **Theme Switches**: Preventing flash of incorrect theme
-- **Interactive Widgets**: Components with complex client-side state
-- **Conditional Features**: Features that should only appear on the client
-
-## Notes
-
-:::caution
-
-Use ClientOnly sparingly as it can impact SEO and initial page load performance. Only use it when
-necessary for components that cannot be server-rendered.
-
-:::
-
-:::tip
-
-Always provide a meaningful fallback that matches the approximate size and layout of your
-client-only component to prevent layout shifts.
-
-:::
+---
+title: ClientOnly
+sidebar_icon: monitor
+---
+
+A component that only renders its children on the client-side, preventing hydration mismatches
+between server and client rendering.
+
+## Import
+
+```tsx
+import { ClientOnly } from "@lukoweb/apitogo/components";
+```
+
+## Props
+
+```ts
+type ClientOnlyProps = {
+  children: ReactNode;
+  fallback?: ReactNode;
+};
+```
+
+## Usage
+
+### Basic Usage
+
+```tsx
+<ClientOnly>
+  <SomeClientOnlyComponent />
+</ClientOnly>
+```
+
+### With Fallback
+
+```tsx
+<ClientOnly fallback={<div>Loading...</div>}>
+  <InteractiveWidget />
+</ClientOnly>
+```
+
+## Examples
+
+```tsx
+function MyComponent() {
+  return (
+    <div>
+      <h1>This renders on both server and client</h1>
+      <ClientOnly fallback={<Spinner />}>
+        <ComponentThatUsesWindowObject />
+      </ClientOnly>
+    </div>
+  );
+}
+```
+
+## Use Cases
+
+- **Browser APIs**: Components that use `window`, `document`, or other browser-only APIs
+- **Third-party Libraries**: Libraries that don't support SSR
+- **Theme Switches**: Preventing flash of incorrect theme
+- **Interactive Widgets**: Components with complex client-side state
+- **Conditional Features**: Features that should only appear on the client
+
+## Notes
+
+:::caution
+
+Use ClientOnly sparingly as it can impact SEO and initial page load performance. Only use it when
+necessary for components that cannot be server-rendered.
+
+:::
+
+:::tip
+
+Always provide a meaningful fallback that matches the approximate size and layout of your
+client-only component to prevent layout shifts.
+
+:::

package/docs/components/code-tabs.mdx

@@ -1,179 +1,179 @@
----
-title: CodeTabs
-sidebar_icon: columns-2
----
-
-A tabbed code block component that groups multiple code blocks into a single unified view. Useful
-for showing the same example in different languages or alternative commands for different package
-managers.
-
-:::note
-
-In MDX, the `CodeTabs` component is available by default and doesn't need an explicit import.
-
-:::
-
-## Usage
-
-Wrap multiple fenced code blocks with `<CodeTabs>` and they will render as tabs. Tab labels are
-automatically inferred from the code block language.
-
-<CodeTabs>
-
-```ts
-const greeting: string = "Hello, world!";
-console.log(greeting);
-```
-
-```js
-const greeting = "Hello, world!";
-console.log(greeting);
-```
-
-```py
-greeting = "Hello, world!"
-print(greeting)
-```
-
-</CodeTabs>
-
-````mdx
-<CodeTabs>
-
-```ts
-const greeting: string = "Hello, world!";
-console.log(greeting);
-```
-
-```js
-const greeting = "Hello, world!";
-console.log(greeting);
-```
-
-```py
-greeting = "Hello, world!"
-print(greeting)
-```
-
-</CodeTabs>
-````
-
-## Custom Labels
-
-Use the `title` meta attribute on each code block to set a custom tab label. This is especially
-useful when multiple code blocks share the same language.
-
-<CodeTabs>
-
-```sh /apitogo/ title="pnpm" showLineNumbers icon="pnpm"
-pnpm add @lukoweb/apitogo
-```
-
-```sh title="npm" icon="npm"
-npm install @lukoweb/apitogo
-```
-
-```sh title="yarn" icon="yarn"
-yarn add @lukoweb/apitogo
-```
-
-</CodeTabs>
-
-````mdx
-<CodeTabs>
-
-```sh title="pnpm" icon="pnpm"
-pnpm add @lukoweb/apitogo
-```
-
-```sh title="npm" icon="npm"
-npm install @lukoweb/apitogo
-```
-
-```sh title="yarn" icon="yarn"
-yarn add @lukoweb/apitogo
-```
-
-</CodeTabs>
-````
-
-## Synced Tabs
-
-Use the `syncKey` prop to keep multiple `CodeTabs` instances in sync. When a user selects a tab in
-one group, all groups with the same `syncKey` update to match. The selection is persisted to
-localStorage and synced across browser tabs.
-
-<div className="flex justify-center gap-4 *:flex-1">
-
-<CodeTabs syncKey="package-manager">
-```sh title="pnpm" icon="pnpm"
-pnpm run build
-```
-
-```sh title="npm" icon="npm"
-npm run build
-```
-
-</CodeTabs>
-
-<CodeTabs syncKey="package-manager">
-```sh title="pnpm" icon="pnpm"
-pnpm run build
-```
-
-```sh title="npm" icon="npm"
-npm run build
-```
-
-</CodeTabs>
-</div>
-
-````mdx
-<CodeTabs syncKey="package-manager">
-```sh title="pnpm" icon="pnpm"
-pnpm add @lukoweb/apitogo
-```
-
-```sh title="npm" icon="npm"
-npm install @lukoweb/apitogo
-```
-
-</CodeTabs>
-
-<!-- repeat above -->
-````
-
-## Programmatic Usage
-
-Usually it's recommended to use fenced code blocks in MDX files. However, when building reusable
-components (e.g. in your MDX component config), fenced code blocks aren't processed by the MDX
-pipeline. Use `CodeTabPanel` directly instead:
-
-```tsx
-import { CodeTabs, CodeTabPanel } from "@lukoweb/apitogo/ui/CodeTabs";
-
-const InstallTabs = ({ pkg }: { pkg: string }) => (
-  <CodeTabs syncKey="package-manager">
-    <CodeTabPanel language="sh" title="pnpm" icon="pnpm" code={`pnpm add ${pkg}`} />
-    <CodeTabPanel language="sh" title="npm" icon="npm" code={`npm install ${pkg}`} />
-    <CodeTabPanel language="sh" title="yarn" icon="yarn" code={`yarn add ${pkg}`} />
-  </CodeTabs>
-);
-```
-
-### CodeTabPanel Props
-
-| Prop       | Type     | Description                                                     |
-| ---------- | -------- | --------------------------------------------------------------- |
-| `code`     | `string` | The code content to display. Required.                          |
-| `language` | `string` | Language for syntax highlighting and label inference.           |
-| `title`    | `string` | Custom tab label. Falls back to `language`.                     |
-| `icon`     | `string` | Override the language icon (e.g. `"pnpm"`, `"npm"`).            |
-| `meta`     | `string` | Raw meta string like in code blocks (e.g. `"showLineNumbers"`). |
-
-## Props
-
-| Prop       | Type      | Description                                                                                           |
-| ---------- | --------- | ----------------------------------------------------------------------------------------------------- |
-| `syncKey`  | `string`  | Sync selected tab across all `CodeTabs` with the same key. Persisted to localStorage and across tabs. |
-| `hideIcon` | `boolean` | Hide the language icon in tabs. Defaults to `false`.                                                  |
+---
+title: CodeTabs
+sidebar_icon: columns-2
+---
+
+A tabbed code block component that groups multiple code blocks into a single unified view. Useful
+for showing the same example in different languages or alternative commands for different package
+managers.
+
+:::note
+
+In MDX, the `CodeTabs` component is available by default and doesn't need an explicit import.
+
+:::
+
+## Usage
+
+Wrap multiple fenced code blocks with `<CodeTabs>` and they will render as tabs. Tab labels are
+automatically inferred from the code block language.
+
+<CodeTabs>
+
+```ts
+const greeting: string = "Hello, world!";
+console.log(greeting);
+```
+
+```js
+const greeting = "Hello, world!";
+console.log(greeting);
+```
+
+```py
+greeting = "Hello, world!"
+print(greeting)
+```
+
+</CodeTabs>
+
+````mdx
+<CodeTabs>
+
+```ts
+const greeting: string = "Hello, world!";
+console.log(greeting);
+```
+
+```js
+const greeting = "Hello, world!";
+console.log(greeting);
+```
+
+```py
+greeting = "Hello, world!"
+print(greeting)
+```
+
+</CodeTabs>
+````
+
+## Custom Labels
+
+Use the `title` meta attribute on each code block to set a custom tab label. This is especially
+useful when multiple code blocks share the same language.
+
+<CodeTabs>
+
+```sh /apitogo/ title="pnpm" showLineNumbers icon="pnpm"
+pnpm add @lukoweb/apitogo
+```
+
+```sh title="npm" icon="npm"
+npm install @lukoweb/apitogo
+```
+
+```sh title="yarn" icon="yarn"
+yarn add @lukoweb/apitogo
+```
+
+</CodeTabs>
+
+````mdx
+<CodeTabs>
+
+```sh title="pnpm" icon="pnpm"
+pnpm add @lukoweb/apitogo
+```
+
+```sh title="npm" icon="npm"
+npm install @lukoweb/apitogo
+```
+
+```sh title="yarn" icon="yarn"
+yarn add @lukoweb/apitogo
+```
+
+</CodeTabs>
+````
+
+## Synced Tabs
+
+Use the `syncKey` prop to keep multiple `CodeTabs` instances in sync. When a user selects a tab in
+one group, all groups with the same `syncKey` update to match. The selection is persisted to
+localStorage and synced across browser tabs.
+
+<div className="flex justify-center gap-4 *:flex-1">
+
+<CodeTabs syncKey="package-manager">
+```sh title="pnpm" icon="pnpm"
+pnpm run build
+```
+
+```sh title="npm" icon="npm"
+npm run build
+```
+
+</CodeTabs>
+
+<CodeTabs syncKey="package-manager">
+```sh title="pnpm" icon="pnpm"
+pnpm run build
+```
+
+```sh title="npm" icon="npm"
+npm run build
+```
+
+</CodeTabs>
+</div>
+
+````mdx
+<CodeTabs syncKey="package-manager">
+```sh title="pnpm" icon="pnpm"
+pnpm add @lukoweb/apitogo
+```
+
+```sh title="npm" icon="npm"
+npm install @lukoweb/apitogo
+```
+
+</CodeTabs>
+
+<!-- repeat above -->
+````
+
+## Programmatic Usage
+
+Usually it's recommended to use fenced code blocks in MDX files. However, when building reusable
+components (e.g. in your MDX component config), fenced code blocks aren't processed by the MDX
+pipeline. Use `CodeTabPanel` directly instead:
+
+```tsx
+import { CodeTabs, CodeTabPanel } from "@lukoweb/apitogo/ui/CodeTabs";
+
+const InstallTabs = ({ pkg }: { pkg: string }) => (
+  <CodeTabs syncKey="package-manager">
+    <CodeTabPanel language="sh" title="pnpm" icon="pnpm" code={`pnpm add ${pkg}`} />
+    <CodeTabPanel language="sh" title="npm" icon="npm" code={`npm install ${pkg}`} />
+    <CodeTabPanel language="sh" title="yarn" icon="yarn" code={`yarn add ${pkg}`} />
+  </CodeTabs>
+);
+```
+
+### CodeTabPanel Props
+
+| Prop       | Type     | Description                                                     |
+| ---------- | -------- | --------------------------------------------------------------- |
+| `code`     | `string` | The code content to display. Required.                          |
+| `language` | `string` | Language for syntax highlighting and label inference.           |
+| `title`    | `string` | Custom tab label. Falls back to `language`.                     |
+| `icon`     | `string` | Override the language icon (e.g. `"pnpm"`, `"npm"`).            |
+| `meta`     | `string` | Raw meta string like in code blocks (e.g. `"showLineNumbers"`). |
+
+## Props
+
+| Prop       | Type      | Description                                                                                           |
+| ---------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `syncKey`  | `string`  | Sync selected tab across all `CodeTabs` with the same key. Persisted to localStorage and across tabs. |
+| `hideIcon` | `boolean` | Hide the language icon in tabs. Defaults to `false`.                                                  |