fulldev-ui 0.7.0 → 0.9.1

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

@@ -1,110 +0,0 @@
----
-title: Command
-description: Fast, composable, unstyled command menu component for Astro.
----
-
-```astro live
----
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command"
----
-
-<Command class="w-full max-w-sm rounded-md border">
-  <CommandInput placeholder="Type a command or search..." />
-  <CommandList>
-    <CommandEmpty>No results found.</CommandEmpty>
-    <CommandGroup heading="Suggestions">
-      <CommandItem>Calendar</CommandItem>
-      <CommandItem>Search Emoji</CommandItem>
-      <CommandItem>Calculator</CommandItem>
-    </CommandGroup>
-    <CommandGroup heading="Settings">
-      <CommandItem>Profile</CommandItem>
-      <CommandItem>Billing</CommandItem>
-      <CommandItem>Settings</CommandItem>
-    </CommandGroup>
-  </CommandList>
-</Command>
-```
-
-## Installation
-
-To install the command component, run the following command:
-
-```bash
-npx shadcn@latest add @fulldev/command
-```
-
-## Usage
-
-```ts
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from "@/components/ui/command"
-```
-
-```astro
-<Command>
-  <CommandInput placeholder="Type a command or search..." />
-  <CommandList>
-    <CommandEmpty>No results found.</CommandEmpty>
-    <CommandGroup heading="Suggestions">
-      <CommandItem>Calendar</CommandItem>
-      <CommandItem>Search Emoji</CommandItem>
-    </CommandGroup>
-  </CommandList>
-</Command>
-```
-
-## Examples
-
-### Dialog
-
-You can compose `Command` with a `Dialog` to create a command menu dialog.
-
-```astro live
----
-import { Button } from "@/components/ui/button"
-import { CommandDialog } from "@/components/ui/command"
----
-
-<div class="flex items-center justify-center gap-4">
-  <Button variant="outline"> Open Command Menu </Button>
-  <p class="text-muted-foreground text-sm">
-    Press <kbd class="bg-muted rounded border px-2 py-1 text-xs font-semibold"
-      >⌘K</kbd
-    >
-  </p>
-</div>
-
-<script>
-  const dialog = document.querySelector("[data-slot='command-dialog']")
-  const trigger = document.querySelector("button")
-
-  if (trigger && dialog) {
-    trigger.addEventListener("click", () => {
-      dialog.showModal?.()
-    })
-  }
-
-  document.addEventListener("keydown", (e) => {
-    if ((e.metaKey || e.ctrlKey) && e.key === "k") {
-      e.preventDefault()
-      dialog?.showModal?.()
-    }
-  })
-</script>
-```

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

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

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

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

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

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

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

@@ -1,42 +0,0 @@
----
-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>
-```