fulldev-ui 0.7.0-beta.8 → 0.7.0

package/src/content/docs/docs/components/_dialog.mdx

@@ -0,0 +1,84 @@
+---
+title: Dialog
+description: A window overlaid on either the primary window or another dialog window, rendered as a native HTML dialog element.
+---
+
+```astro live
+---
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+---
+
+<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>
+    <DialogFooter>
+      <DialogClose asChild>
+        <Button variant="outline">Cancel</Button>
+      </DialogClose>
+      <Button variant="destructive">Delete</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```
+
+## Installation
+
+To install the dialog component, run the following command:
+
+```bash
+npx shadcn@latest add @fulldev/dialog
+```
+
+## Usage
+
+```ts
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+```
+
+```astro
+<Dialog>
+  <DialogTrigger asChild>
+    <Button>Open</Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Dialog Title</DialogTitle>
+      <DialogDescription> Dialog description text. </DialogDescription>
+    </DialogHeader>
+    <DialogFooter>
+      <DialogClose asChild>
+        <Button variant="outline">Cancel</Button>
+      </DialogClose>
+      <Button>Submit</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```

package/src/content/docs/docs/components/accordion.mdx

@@ -0,0 +1,90 @@
+---
+title: Accordion
+description: A vertically stacked set of interactive headings that each reveal a section of content.
+---
+
+```astro live
+---
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+---
+
+<Accordion>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Product Information</AccordionTrigger>
+    <AccordionContent class="flex flex-col gap-4 text-balance">
+      <p>
+        Our flagship product combines cutting-edge technology with sleek design.
+        Built with premium materials, it offers unparalleled performance and
+        reliability.
+      </p>
+      <p>
+        Key features include advanced processing capabilities, and an intuitive
+        user interface designed for both beginners and experts.
+      </p>
+    </AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-2">
+    <AccordionTrigger>Shipping Details</AccordionTrigger>
+    <AccordionContent class="flex flex-col gap-4 text-balance">
+      <p>
+        We offer worldwide shipping through trusted courier partners. Standard
+        delivery takes 3-5 business days, while express shipping ensures
+        delivery within 1-2 business days.
+      </p>
+      <p>
+        All orders are carefully packaged and fully insured. Track your shipment
+        in real-time through our dedicated tracking portal.
+      </p>
+    </AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-3">
+    <AccordionTrigger>Return Policy</AccordionTrigger>
+    <AccordionContent class="flex flex-col gap-4 text-balance">
+      <p>
+        We stand behind our products with a comprehensive 30-day return policy.
+        If you're not completely satisfied, simply return the item in its
+        original condition.
+      </p>
+      <p>
+        Our hassle-free return process includes free return shipping and full
+        refunds processed within 48 hours of receiving the returned item.
+      </p>
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+## Installation
+
+To install the accordion component, run the following command:
+
+```bash
+npx shadcn@latest add @fulldev/accordion
+```
+
+## Usage
+
+```ts
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+```
+
+```astro
+<Accordion>
+  <AccordionItem>
+    <AccordionTrigger>Is it accessible?</AccordionTrigger>
+    <AccordionContent>
+      Yes, it uses the native <code>details</code> and <code>summary</code> elements.
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```

package/src/content/docs/docs/components/alert.mdx

@@ -0,0 +1,63 @@
+---
+title: Alert
+description: Displays a callout for user attention.
+---
+
+```astro live
+---
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { Icon } from "@/components/ui/icon"
+---
+
+<div class="grid w-full max-w-xl items-start gap-4">
+  <Alert>
+    <Icon name="check-circle-2" />
+    <AlertTitle>Success! Your changes have been saved</AlertTitle>
+    <AlertDescription>
+      This is an alert with icon, title and description.
+    </AlertDescription>
+  </Alert>
+  <Alert>
+    <Icon name="popcorn" />
+    <AlertTitle>
+      This Alert has a title and an icon. No description.
+    </AlertTitle>
+  </Alert>
+  <Alert variant="destructive">
+    <Icon name="alert-circle" />
+    <AlertTitle>Unable to process your payment.</AlertTitle>
+    <AlertDescription>
+      <p>Please verify your billing information and try again.</p>
+      <ul class="list-inside list-disc text-sm">
+        <li>Check your card details</li>
+        <li>Ensure sufficient funds</li>
+        <li>Verify billing address</li>
+      </ul>
+    </AlertDescription>
+  </Alert>
+</div>
+```
+
+## Installation
+
+To install the alert component, run the following command:
+
+```bash
+npx shadcn@latest add @fulldev/alert
+```
+
+## Usage
+
+```ts
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+```
+
+```astro
+<Alert variant="default">
+  <Terminal />
+  <AlertTitle>Heads up!</AlertTitle>
+  <AlertDescription>
+    You can add components and dependencies to your app using the cli.
+  </AlertDescription>
+</Alert>
+```

package/src/content/docs/docs/components/auto-form.mdx

@@ -0,0 +1,42 @@
+---
+title: Auto Form
+description: A form component that automatically generates form fields based on props.
+sidebar:
+  badge:
+    text: ⋅
+    variant: success
+---
+
+```astro live
+---
+import { AutoForm } from "@/components/ui/auto-form"
+import { Button } from "@/components/ui/button"
+---
+
+<AutoForm
+  fields={[
+    { label: "Name", type: "text" },
+    { label: "Email", type: "email" },
+    { label: "Message", type: "textarea" },
+  ]}
+  submit="Send"
+/>
+```
+
+## Installation
+
+To install the form component, run the following command:
+
+```bash
+npx shadcn@latest add @fulldev/auto-form
+```
+
+## Usage
+
+```ts
+import { AutoForm } from "@/components/ui/auto-form"
+```
+
+```astro
+<AutoForm fields={[{ label: "Name", type: "text" }]} submit="Submit" />
+```

package/src/content/docs/docs/components/avatar.mdx

@@ -0,0 +1,60 @@
+---
+title: Avatar
+description: An image element with a fallback for representing the user.
+---
+
+```astro live
+---
+import avatar from "@/assets/avatar-sil-veltman.webp"
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+---
+
+<div class="flex flex-row flex-wrap items-center gap-12">
+  <Avatar>
+    <AvatarImage src={avatar} alt="@silveltm" />
+    <AvatarFallback>SV</AvatarFallback>
+  </Avatar>
+  <Avatar class="rounded-lg">
+    <AvatarImage src={avatar} alt="@silveltm" />
+    <AvatarFallback>SV</AvatarFallback>
+  </Avatar>
+  <div
+    class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale"
+  >
+    <Avatar>
+      <AvatarImage src={avatar} alt="@silveltm" />
+      <AvatarFallback>SV</AvatarFallback>
+    </Avatar>
+    <Avatar>
+      <AvatarImage src={avatar} alt="@silveltm" />
+      <AvatarFallback>SV</AvatarFallback>
+    </Avatar>
+    <Avatar>
+      <AvatarImage src={avatar} alt="@silveltm" />
+      <AvatarFallback>SV</AvatarFallback>
+    </Avatar>
+  </div>
+</div>
+```
+
+## Installation
+
+To install the avatar component, run the following command:
+
+```bash
+npx shadcn@latest add @fulldev/avatar
+```
+
+## Usage
+
+```ts
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+```
+
+```astro
+<Avatar>
+  <AvatarImage src="https://github.com/shadcn.webp" />
+  <AvatarFallback>CN</AvatarFallback>
+</Avatar>
+```

package/src/content/docs/docs/components/badge.mdx

@@ -0,0 +1,71 @@
+---
+title: Badge
+description: Displays a badge or a component that looks like a badge.
+---
+
+```astro live
+---
+import { Badge } from "@/components/ui/badge"
+import { Icon } from "@/components/ui/icon"
+---
+
+<div class="flex flex-col items-center gap-2">
+  <div class="flex w-full flex-wrap gap-2">
+    <Badge>Badge</Badge>
+    <Badge variant="secondary">Secondary</Badge>
+    <Badge variant="destructive">Destructive</Badge>
+    <Badge variant="outline">Outline</Badge>
+  </div>
+  <div class="flex w-full flex-wrap gap-2">
+    <Badge variant="secondary" class="bg-blue-500 text-white dark:bg-blue-600">
+      <Icon name="badge-check" class="size-3" />
+      Verified
+    </Badge>
+    <Badge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
+      8
+    </Badge>
+    <Badge
+      class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
+      variant="destructive"
+    >
+      99
+    </Badge>
+    <Badge
+      class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
+      variant="outline"
+    >
+      20+
+    </Badge>
+  </div>
+</div>
+```
+
+## Installation
+
+To install the badge component, run the following command:
+
+```bash
+npx shadcn@latest add @fulldev/badge
+```
+
+## Usage
+
+```ts
+import { Badge } from "@/components/ui/badge"
+```
+
+```astro
+<Badge variant="default">Badge</Badge>
+```
+
+### Link
+
+You can use the `href` attribute to render the badge as a link element.
+
+```astro
+---
+import { Badge } from "@/components/ui/badge"
+---
+
+<Badge href="/">Badge</Badge>
+```

package/src/content/docs/docs/components/banner.mdx

@@ -0,0 +1,42 @@
+---
+title: Banner
+description: A full-width container for important messages or announcements.
+---
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { Icon } from "@/components/ui/icon"
+
+<Alert class="not-content">
+  <Icon name="alert-circle" />
+  <AlertTitle>Work in progress</AlertTitle>
+  <AlertDescription>
+    This banner component is a work in progress. To see it in action, have a
+    look at:
+    <a class="text-primary inline" href="/blocks/banner/">
+      /blocks/banner/
+    </a>
+  </AlertDescription>
+</Alert>
+
+## Installation
+
+To install the banner component, run the following command:
+
+```bash
+npx shadcn@latest add @fulldev/banner
+```
+
+## Usage
+
+```ts
+import { Banner, BannerContent } from "@/components/ui/banner"
+```
+
+```astro
+<Banner>
+  <BannerContent>
+    <BannerTitle> Banner Title </BannerTitle>
+    <BannerDescription> Banner Description </BannerDescription>
+  </BannerContent>
+</Banner>
+```

package/src/content/docs/docs/components/button.mdx

@@ -0,0 +1,188 @@
+---
+title: Button
+description: Displays a button or a component that looks like a button.
+---
+
+```astro live
+---
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+---
+
+<Button variant="outline">Button</Button>
+<Button variant="outline" size="icon" aria-label="Submit">
+  <Icon name="arrow-up-right" />
+</Button>
+```
+
+## Installation
+
+To install the button component, run the following command:
+
+```bash
+npx shadcn@latest add @fulldev/button
+```
+
+## Usage
+
+```ts
+import { Button } from "@/components/ui/button"
+```
+
+```astro
+<Button>Button</Button>
+```
+
+### Link
+
+You can use the `href` attribute to render the button as a link element.
+
+```astro
+---
+import { Button } from "@/components/ui/button"
+---
+
+<Button href="/login">Login</Button>
+```
+
+## Examples
+
+### Size
+
+```astro live
+---
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+---
+
+<Button variant="outline" size="sm">Small</Button>
+<Button variant="outline" size="icon-sm">
+  <Icon name="arrow-up-right" />
+</Button>
+<Button variant="outline">Default</Button>
+<Button variant="outline" size="icon">
+  <Icon name="arrow-up-right" />
+</Button>
+<Button variant="outline" size="lg">Large</Button>
+<Button variant="outline" size="icon-lg">
+  <Icon name="arrow-up-right" />
+</Button>
+```
+
+### Default
+
+```astro live
+---
+import { Button } from "@/components/ui/button"
+---
+
+<Button>Button</Button>
+```
+
+### Outline
+
+```astro live
+---
+import { Button } from "@/components/ui/button"
+---
+
+<Button variant="outline">Outline</Button>
+```
+
+### Secondary
+
+```astro live
+---
+import { Button } from "@/components/ui/button"
+---
+
+<Button variant="secondary">Secondary</Button>
+```
+
+### Ghost
+
+```astro live
+---
+import { Button } from "@/components/ui/button"
+---
+
+<Button variant="ghost">Ghost</Button>
+```
+
+### Destructive
+
+```astro live
+---
+import { Button } from "@/components/ui/button"
+---
+
+<Button variant="destructive">Destructive</Button>
+```
+
+### Link
+
+```astro live
+---
+import { Button } from "@/components/ui/button"
+---
+
+<Button variant="link">Link</Button>
+```
+
+### Icon
+
+```astro live
+---
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+---
+
+<Button variant="outline" size="icon" aria-label="Submit">
+  <Icon name="circle-fading-arrow-up" />
+</Button>
+```
+
+### With Icon
+
+The spacing between the icon and the text is automatically adjusted based on the size of the button. You do not need any margin on the icon.
+
+```astro live
+---
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+---
+
+<Button variant="outline" size="sm">
+  <Icon name="git-branch" />
+  New branch
+</Button>
+```
+
+### Rounded
+
+Use the `rounded-full` class to make the button rounded.
+
+```astro live
+---
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+---
+
+<Button class="rounded-full" size="icon" variant="outline">
+  <Icon name="arrow-up" />
+</Button>
+```
+
+### Spinner
+
+```astro live
+---
+import { Button } from "@/components/ui/button"
+import { Spinner } from "@/components/ui/spinner"
+---
+
+<Button size="sm" variant="outline" disabled>
+  <Spinner />
+  Submit
+</Button>
+```

package/src/content/docs/docs/components/checkbox.mdx

@@ -0,0 +1,60 @@
+---
+title: Checkbox
+description: A control that allows the user to toggle between checked and not checked.
+---
+
+```astro live
+---
+import { Checkbox } from "@/components/ui/checkbox"
+import { Label } from "@/components/ui/label"
+---
+
+<div class="flex flex-col gap-6">
+  <div class="flex items-center gap-3">
+    <Checkbox id="terms" />
+    <Label for="terms">Accept terms and conditions</Label>
+  </div>
+  <div class="flex items-start gap-3">
+    <Checkbox id="terms-2" checked />
+    <div class="grid gap-2">
+      <Label for="terms-2">Accept terms and conditions</Label>
+      <p class="text-muted-foreground text-sm">
+        By clicking this checkbox, you agree to the terms and conditions.
+      </p>
+    </div>
+  </div>
+  <div class="flex items-start gap-3">
+    <Checkbox id="toggle" disabled />
+    <Label for="toggle">Enable notifications</Label>
+  </div>
+  <Label
+    class="hover:bg-accent/50 has-[[aria-checked=true]]:border-primary has-[[aria-checked=true]]:bg-primary/5 flex items-start gap-3 rounded-lg border p-3"
+  >
+    <Checkbox id="toggle-2" checked />
+    <div class="grid gap-1.5 font-normal">
+      <p class="text-sm leading-none font-medium">Enable notifications</p>
+      <p class="text-muted-foreground text-sm">
+        You can enable or disable notifications at any time.
+      </p>
+    </div>
+  </Label>
+</div>
+```
+
+## Installation
+
+To install the checkbox component, run the following command:
+
+```bash
+npx shadcn@latest add @fulldev/checkbox
+```
+
+## Usage
+
+```ts
+import { Checkbox } from "@/components/ui/checkbox"
+```
+
+```astro
+<Checkbox />
+```