zuplo 6.67.32 → 6.68.0

package/docs/dev-portal/zudoku/components/code-tabs.mdx

@@ -0,0 +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 /zudoku/ title="pnpm" showLineNumbers icon="pnpm"
+pnpm add zudoku
+```
+
+```sh title="npm" icon="npm"
+npm install zudoku
+```
+
+```sh title="yarn" icon="yarn"
+yarn add zudoku
+```
+
+</CodeTabs>
+
+````mdx
+<CodeTabs>
+
+```sh title="pnpm" icon="pnpm"
+pnpm add zudoku
+```
+
+```sh title="npm" icon="npm"
+npm install zudoku
+```
+
+```sh title="yarn" icon="yarn"
+yarn add zudoku
+```
+
+</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 zudoku
+```
+
+```sh title="npm" icon="npm"
+npm install zudoku
+```
+
+</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 "zudoku/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`.                                                  |

package/docs/dev-portal/zudoku/components/dialog.mdx

@@ -0,0 +1,167 @@
+---
+title: Dialog
+sidebar_icon: rectangle-horizontal
+---
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "zudoku/ui/Dialog";
+import { Button } from "zudoku/ui/Button";
+import { Input } from "zudoku/ui/Input";
+import { Label } from "zudoku/ui/Label";
+
+A modal dialog component built on Radix UI primitives for displaying content that requires user
+attention.
+
+## Import
+
+```tsx
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "zudoku/ui/Dialog";
+```
+
+## Components
+
+The Dialog component consists of several sub-components:
+
+- `Dialog` - The main container (root)
+- `DialogTrigger` - Button that opens the dialog
+- `DialogContent` - The modal content container
+- `DialogHeader` - Header section for title and description
+- `DialogTitle` - The dialog title
+- `DialogDescription` - Additional description text
+- `DialogFooter` - Footer section for actions
+- `DialogClose` - Element that closes the dialog when clicked
+
+## Basic Usage
+
+<Dialog>
+  <DialogTrigger asChild>
+    <Button variant="outline">Open Dialog</Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you absolutely sure?</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone. This will permanently delete your account and remove your data
+        from our servers.
+      </DialogDescription>
+    </DialogHeader>
+  </DialogContent>
+</Dialog>
+
+```tsx
+<Dialog>
+  <DialogTrigger asChild>
+    <Button variant="outline">Open Dialog</Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you absolutely sure?</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone. This will permanently delete your account and remove your data
+        from our servers.
+      </DialogDescription>
+    </DialogHeader>
+  </DialogContent>
+</Dialog>
+```
+
+## With Footer Actions
+
+<Dialog>
+  <DialogTrigger asChild>
+    <Button>Edit Profile</Button>
+  </DialogTrigger>
+  <DialogContent className="sm:max-w-[425px]">
+    <DialogHeader>
+      <DialogTitle>Edit profile</DialogTitle>
+      <DialogDescription>
+        Make changes to your profile here. Click save when you're done.
+      </DialogDescription>
+    </DialogHeader>
+    <div className="grid gap-4 py-4">
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="name" className="text-right">
+          Name
+        </Label>
+        <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
+      </div>
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="username" className="text-right">
+          Username
+        </Label>
+        <Input id="username" defaultValue="@peduarte" className="col-span-3" />
+      </div>
+    </div>
+    <DialogFooter>
+      <Button type="submit">Save changes</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+
+```tsx
+<Dialog>
+  <DialogTrigger asChild>
+    <Button>Edit Profile</Button>
+  </DialogTrigger>
+  <DialogContent className="sm:max-w-[425px]">
+    <DialogHeader>
+      <DialogTitle>Edit profile</DialogTitle>
+      <DialogDescription>
+        Make changes to your profile here. Click save when you're done.
+      </DialogDescription>
+    </DialogHeader>
+    <div className="grid gap-4 py-4">
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="name" className="text-right">
+          Name
+        </Label>
+        <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
+      </div>
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="username" className="text-right">
+          Username
+        </Label>
+        <Input id="username" defaultValue="@peduarte" className="col-span-3" />
+      </div>
+    </div>
+    <DialogFooter>
+      <Button type="submit">Save changes</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```
+
+## Props
+
+### DialogContent
+
+```ts
+interface DialogContentProps extends React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Content
+> {
+  showCloseButton?: boolean; // Default: true
+}
+```
+
+## Features
+
+- **Keyboard Navigation**: ESC key closes the dialog
+- **Focus Management**: Focus is trapped within the dialog
+- **Accessibility**: Proper ARIA attributes and screen reader support
+- **Backdrop Click**: Clicking outside closes the dialog
+- **Animation**: Smooth enter/exit animations

package/docs/dev-portal/zudoku/components/head.mdx

@@ -0,0 +1,199 @@
+---
+title: Head
+sidebar_icon: circle-fading-plus
+---
+
+The Head component (alias for Helmet) allows you to manage document head elements like title, meta
+tags, and links from anywhere in your component tree. It uses
+[`react-helmet-async`](https://github.com/staylor/react-helmet-async) under the hood.
+
+## Import
+
+```tsx
+import { Head } from "zudoku/components";
+```
+
+## Props
+
+The Head component accepts any valid HTML head elements as children.
+
+## Usage
+
+### Basic Title
+
+```tsx
+<Head>
+  <title>My Page Title</title>
+</Head>
+```
+
+### Meta Tags
+
+```tsx
+<Head>
+  <title>About Us - My Company</title>
+  <meta name="description" content="Learn more about our company and mission." />
+  <meta name="keywords" content="company, about, mission" />
+</Head>
+```
+
+### Social Media Meta Tags
+
+```tsx
+<Head>
+  <title>My Blog Post</title>
+  <meta property="og:title" content="My Blog Post" />
+  <meta property="og:description" content="An interesting blog post about..." />
+  <meta property="og:image" content="https://example.com/image.jpg" />
+  <meta property="og:url" content="https://example.com/blog/my-post" />
+  <meta name="twitter:card" content="summary_large_image" />
+</Head>
+```
+
+### Custom Links
+
+```tsx
+<Head>
+  <link rel="canonical" href="https://example.com/canonical-url" />
+  <link rel="alternate" hreflang="es" href="https://example.com/es" />
+</Head>
+```
+
+### Favicon
+
+```tsx
+<Head>
+  <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
+  <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
+</Head>
+```
+
+## Advanced Usage
+
+### Dynamic Title with Template
+
+```tsx
+function MyPage() {
+  return (
+    <>
+      <Head>
+        <title>Contact Us</title>
+      </Head>
+      <h1>Contact Us</h1>
+      {/* Page content */}
+    </>
+  );
+}
+```
+
+### Multiple Head Tags
+
+```tsx
+<Head>
+  <title>Product Page - {productName}</title>
+  <meta name="description" content={productDescription} />
+  <meta property="og:title" content={productName} />
+  <meta property="og:description" content={productDescription} />
+  <meta property="og:image" content={productImage} />
+  <link rel="canonical" href={`https://example.com/products/${productSlug}`} />
+</Head>
+```
+
+### Conditional Meta Tags
+
+```tsx
+function ProductPage({ product }) {
+  return (
+    <>
+      <Head>
+        <title>{product.name} - Our Store</title>
+        <meta name="description" content={product.description} />
+        {product.inStock && <meta property="product:availability" content="in stock" />}
+        {product.price && <meta property="product:price:amount" content={product.price} />}
+      </Head>
+      {/* Component content */}
+    </>
+  );
+}
+```
+
+## Features
+
+- **Server-Side Rendering**: Works with SSR to set proper head tags
+- **Dynamic Updates**: Head tags update when component props change
+- **Multiple Components**: Head tags from multiple components are merged
+- **Override Behavior**: Later Head components can override earlier ones
+- **Template Support**: Zudoku's Layout automatically provides title templates
+
+## Common Use Cases
+
+### SEO Optimization
+
+```tsx
+<Head>
+  <title>{pageTitle}</title>
+  <meta name="description" content={pageDescription} />
+  <meta name="keywords" content={pageKeywords} />
+  <link rel="canonical" href={canonicalUrl} />
+</Head>
+```
+
+### Social Sharing
+
+```tsx
+<Head>
+  <meta property="og:title" content={shareTitle} />
+  <meta property="og:description" content={shareDescription} />
+  <meta property="og:image" content={shareImage} />
+  <meta property="og:url" content={shareUrl} />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:site" content="@yourhandle" />
+</Head>
+```
+
+### Structured Data
+
+```tsx
+<Head>
+  <script type="application/ld+json">
+    {JSON.stringify({
+      "@context": "https://schema.org",
+      "@type": "Article",
+      headline: articleTitle,
+      author: articleAuthor,
+      datePublished: publishDate,
+    })}
+  </script>
+</Head>
+```
+
+## Integration with Dev Portal 
+The Layout component automatically provides:
+
+- Title templates based on your Dev Portal meta configuration
+- Canonical URLs when `canonicalUrlOrigin` is configured
+- Description meta tags from page meta
+- Favicon links from meta configuration
+
+## Notes
+
+:::tip
+
+The Head component is an alias for the Helmet component from React Helmet Async. You can use either
+`<Head>` or `<Helmet>` - they're identical.
+
+:::
+
+:::info
+
+Head tags are merged across components, so you can set some meta tags globally and override specific
+ones in individual pages.
+
+:::
+
+:::caution
+
+Remember that Head tags need to be valid HTML head elements. Invalid elements will be ignored or may
+cause issues.
+
+:::

package/docs/dev-portal/zudoku/components/icons.mdx

@@ -0,0 +1,27 @@
+---
+title: Icons
+sidebar_icon: flag
+---
+
+import { AtomIcon, PackagePlusIcon } from "zudoku/icons";
+
+Icons are a great way to add visual elements to your content. They can be used to represent actions,
+objects, or ideas. They can also be used to add visual interest to your content.
+
+You can use any of the icons from [lucide-react](https://lucide.dev/icons/) in your content. To use
+an icon, you can import it from the Dev Portal re-export `zudoku/icons`:
+
+<div className="flex gap-2">
+  <AtomIcon size={42} className="text-primary" />
+  <PackagePlusIcon size={42} className="text-neutral-300" />
+</div>
+
+```tsx
+import { AtomIcon, PackagePlusIcon } from "zudoku/icons";
+
+<AtomIcon size={42} className="text-primary" />;
+<PackagePlusIcon size={42} className="text-neutral-300" />;
+```
+
+More infos how to use icons in React can be found in the
+[documentation of `lucide-react`](https://lucide.dev/guide/packages/lucide-react#how-to-use).

package/docs/dev-portal/zudoku/components/input.mdx

@@ -0,0 +1,96 @@
+---
+title: Input
+sidebar_icon: type
+---
+
+import { Input } from "zudoku/ui/Input";
+import { Label } from "zudoku/ui/Label";
+
+An input component for forms and user input.
+
+## Import
+
+```tsx
+import { Input } from "zudoku/ui/Input";
+```
+
+## Basic Usage
+
+<Input placeholder="Enter your email" />
+
+```tsx
+<Input placeholder="Enter your email" />
+```
+
+## Input Types
+
+### Text Input
+
+<Input type="text" placeholder="Text input" />
+
+```tsx
+<Input type="text" placeholder="Text input" />
+```
+
+### Email Input
+
+<Input type="email" placeholder="Email input" />
+
+```tsx
+<Input type="email" placeholder="Email input" />
+```
+
+### Password Input
+
+<Input type="password" placeholder="Password input" />
+
+```tsx
+<Input type="password" placeholder="Password input" />
+```
+
+### Number Input
+
+<Input type="number" placeholder="Number input" />
+
+```tsx
+<Input type="number" placeholder="Number input" />
+```
+
+## With Label
+
+<div className="grid w-full max-w-sm items-center gap-1.5">
+  <Label htmlFor="email">Email</Label>
+  <Input type="email" id="email" placeholder="Email" />
+</div>
+
+```tsx
+<div className="grid w-full max-w-sm items-center gap-1.5">
+  <Label htmlFor="email">Email</Label>
+  <Input type="email" id="email" placeholder="Email" />
+</div>
+```
+
+## Disabled State
+
+<Input disabled placeholder="Disabled input" />
+
+```tsx
+<Input disabled placeholder="Disabled input" />
+```
+
+## File Input
+
+<Input type="file" />
+
+```tsx
+<Input type="file" />
+```
+
+## Custom Styling
+
+The Input component accepts all standard input HTML attributes and can be customized with additional
+`className`:
+
+```tsx
+<Input className="w-full max-w-xs" placeholder="Custom styled input" />
+```