zuplo 6.67.32 → 6.68.0

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

@@ -0,0 +1,130 @@
+---
+title: Alert
+sidebar_icon: triangle-alert
+---
+
+import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert";
+import { CheckCircle2Icon, TerminalIcon } from "zudoku/icons";
+import { ReactComponentDoc } from "zudoku/ui/ReactComponentDoc";
+
+An alert component for displaying important information to users with different severity levels.
+
+## Import
+
+```tsx
+import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert";
+```
+
+## Components
+
+The Alert component consists of several sub-components:
+
+- `Alert` - The main container
+- `AlertTitle` - Title for the alert
+- `AlertDescription` - Description content for the alert
+
+## Default Alert
+
+<Alert className="not-prose">
+  <TerminalIcon className="h-4 w-4" />
+  <AlertTitle>Heads up!</AlertTitle>
+  <AlertDescription>
+    You can add components and dependencies to your app using the cli.
+  </AlertDescription>
+</Alert>
+
+```tsx title="Alert"
+<Alert>
+  <TerminalIcon className="h-4 w-4" />
+  <AlertTitle>Heads up!</AlertTitle>
+  <AlertDescription>
+    You can add components and dependencies to your app using the cli.
+  </AlertDescription>
+</Alert>
+```
+
+## Destructive Alert
+
+<Alert variant="destructive">
+  <AlertTitle>Error</AlertTitle>
+  <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
+</Alert>
+
+```tsx
+<Alert variant="destructive">
+  <AlertTitle>Error</AlertTitle>
+  <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
+</Alert>
+```
+
+## Without Title
+
+<Alert>
+  <TerminalIcon className="h-4 w-4" />
+  <AlertDescription>
+    You can add components and dependencies to your app using the cli.
+  </AlertDescription>
+</Alert>
+
+```tsx
+<Alert>
+  <TerminalIcon className="h-4 w-4" />
+  <AlertDescription>
+    You can add components and dependencies to your app using the cli.
+  </AlertDescription>
+</Alert>
+```
+
+## Without Icon
+
+<Alert>
+  <AlertTitle>Heads up!</AlertTitle>
+  <AlertDescription>
+    You can add components and dependencies to your app using the cli.
+  </AlertDescription>
+</Alert>
+
+```tsx
+<Alert>
+  <AlertTitle>Heads up!</AlertTitle>
+  <AlertDescription>
+    You can add components and dependencies to your app using the cli.
+  </AlertDescription>
+</Alert>
+```
+
+## Usage Examples
+
+### Success Alert
+
+<Alert className="border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-400">
+  <CheckCircle2Icon className="h-4 w-4" />
+  <AlertTitle>Success!</AlertTitle>
+  <AlertDescription>Your changes have been saved successfully.</AlertDescription>
+</Alert>
+
+```tsx
+<Alert className="border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-400">
+  <CheckCircle2Icon className="h-4 w-4" />
+  <AlertTitle>Success!</AlertTitle>
+  <AlertDescription>Your changes have been saved successfully.</AlertDescription>
+</Alert>
+```
+
+### Warning Alert
+
+<Alert className="border-yellow-200 bg-yellow-50 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-400">
+  <AlertTitle>Warning!</AlertTitle>
+  <AlertDescription>This action cannot be undone. Please proceed with caution.</AlertDescription>
+</Alert>
+
+```tsx
+<Alert className="border-yellow-200 bg-yellow-50 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-400">
+  <AlertTitle>Warning!</AlertTitle>
+  <AlertDescription>This action cannot be undone. Please proceed with caution.</AlertDescription>
+</Alert>
+```
+
+# Props
+
+<ReactComponentDoc component={Alert} />

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

@@ -0,0 +1,70 @@
+---
+title: Badge
+sidebar_icon: tag
+---
+
+A small badge component used to display status information or labels.
+
+## Import
+
+```tsx
+import { Badge } from "zudoku/ui/Badge";
+```
+
+## Variants
+
+### Default
+
+<Badge variant="default">Default</Badge>
+
+```tsx
+<Badge variant="default">Default</Badge>
+```
+
+### Secondary
+
+<Badge variant="secondary">Secondary</Badge>
+
+```tsx
+<Badge variant="secondary">Secondary</Badge>
+```
+
+### Muted
+
+<Badge variant="muted">Muted</Badge>
+
+```tsx
+<Badge variant="muted">Muted</Badge>
+```
+
+### Destructive
+
+<Badge variant="destructive">Destructive</Badge>
+
+```tsx
+<Badge variant="destructive">Destructive</Badge>
+```
+
+### Outline
+
+<Badge variant="outline">Outline</Badge>
+
+```tsx
+<Badge variant="outline">Outline</Badge>
+```
+
+## Usage
+
+Badges are perfect for showing status, categories, or counts:
+
+<div className="flex gap-2">
+  <Badge variant="default">New</Badge>
+  <Badge variant="secondary">Main</Badge>
+  <Badge variant="muted">10</Badge>
+</div>
+
+```tsx
+<Badge variant="default">New</Badge>
+<Badge variant="secondary">Main</Badge>
+<Badge variant="muted">10</Badge>
+```

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

@@ -0,0 +1,132 @@
+---
+title: Button
+sidebar_icon: mouse-pointer-click
+---
+
+import { Button } from "zudoku/ui/Button";
+import { PopcornIcon } from "zudoku/icons";
+
+A flexible button component with multiple variants and sizes for different use cases.
+
+## Import
+
+```tsx
+import { Button } from "zudoku/ui/Button";
+```
+
+## Variants
+
+### Default
+
+<Button variant="default">Default Button</Button>
+
+```tsx
+<Button variant="default">Default Button</Button>
+```
+
+### Destructive
+
+<Button variant="destructive">Delete</Button>
+
+```tsx
+<Button variant="destructive">Delete</Button>
+```
+
+### Outline
+
+<Button variant="outline">Outline Button</Button>
+
+```tsx
+<Button variant="outline">Outline Button</Button>
+```
+
+### Secondary
+
+<Button variant="secondary">Secondary</Button>
+
+```tsx
+<Button variant="secondary">Secondary</Button>
+```
+
+### Ghost
+
+<Button variant="ghost">Ghost Button</Button>
+
+```tsx
+<Button variant="ghost">Ghost Button</Button>
+```
+
+### Link
+
+<Button variant="link">Link Button</Button>
+
+```tsx
+<Button variant="link">Link Button</Button>
+```
+
+## Sizes
+
+### Default Size
+
+<Button size="default">Default Size</Button>
+
+```tsx
+<Button size="default">Default Size</Button>
+```
+
+### Small
+
+<Button size="sm">Small Button</Button>
+
+```tsx
+<Button size="sm">Small Button</Button>
+```
+
+### Large
+
+<Button size="lg">Large Button</Button>
+
+```tsx
+<Button size="lg">Large Button</Button>
+```
+
+### Extra Large
+
+<Button size="xl">Extra Large</Button>
+
+```tsx
+<Button size="xl">Extra Large</Button>
+```
+
+### Icon
+
+<Button size="icon">
+  <PopcornIcon size={16} />
+</Button>
+
+```tsx
+<Button size="icon">
+  <PopcornIcon size={16} />
+</Button>
+```
+
+## As Child
+
+Use the `asChild` prop to render the button as a different element while maintaining button styling:
+
+```tsx
+<Button asChild>
+  <a href="/link">Link as Button</a>
+</Button>
+```
+
+## Custom Styling
+
+The Button component accepts all standard button HTML attributes and can be customized with
+additional className:
+
+```tsx
+<Button className="w-full" variant="outline">
+  Full Width Button
+</Button>
+```

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

@@ -0,0 +1,112 @@
+---
+title: Callout
+sidebar_icon: circle-alert
+---
+
+import { Callout } from "zudoku/ui/Callout";
+import { ReactComponentDoc } from "zudoku/ui/ReactComponentDoc";
+
+This is a callout component that can be used to draw attention to important information.
+
+## Import
+
+```tsx
+import { Callout } from "zudoku/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/dev-portal/zudoku/components/card.mdx

@@ -0,0 +1,104 @@
+---
+title: Card
+sidebar_icon: square
+---
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardFooter,
+} from "zudoku/ui/Card";
+import { Button } from "zudoku/ui/Button";
+import { Input } from "zudoku/ui/Input";
+import { Label } from "zudoku/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 "zudoku/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/dev-portal/zudoku/components/checkbox.mdx

@@ -0,0 +1,72 @@
+---
+title: Checkbox
+sidebar_icon: check-square
+---
+
+import { Checkbox } from "zudoku/ui/Checkbox";
+import { Label } from "zudoku/ui/Label";
+
+A checkbox component built on Radix UI primitives for boolean input.
+
+## Import
+
+```tsx
+import { Checkbox } from "zudoku/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

package/docs/dev-portal/zudoku/components/client-only.mdx

@@ -0,0 +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 "zudoku/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.
+
+:::