fulldev-ui 0.7.0-beta.9 → 0.7.0

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

@@ -0,0 +1,67 @@
+---
+title: Collapsible
+description: An interactive component which expands/collapses a panel.
+---
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { Icon } from "@/components/ui/icon"
+
+<Alert class="not-content" variant="destructive">
+  <Icon name="alert-circle" />
+  <AlertTitle>Work in progress</AlertTitle>
+  <AlertDescription>
+    This collapsible component is a work in progress, use with caution.
+  </AlertDescription>
+</Alert>
+
+```astro live
+---
+import { Button } from "@/components/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import { Icon } from "@/components/ui/icon"
+---
+
+<Collapsible class="w-full max-w-xl gap-2">
+  <CollapsibleTrigger>
+    <span>Toggle me</span>
+  </CollapsibleTrigger>
+  <CollapsibleContent>
+    <p>
+      This is a collapsible content. It is a panel that can be expanded and
+      collapsed.
+    </p>
+  </CollapsibleContent>
+</Collapsible>
+```
+
+## Installation
+
+To install the collapsible component, run the following command:
+
+```bash
+npx shadcn@latest add @fulldev/collapsible
+```
+
+## Usage
+
+```ts
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+```
+
+```astro
+<Collapsible>
+  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
+  <CollapsibleContent>
+    Yes. Free to use for personal and commercial projects. No attribution
+    required.
+  </CollapsibleContent>
+</Collapsible>
+```

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

@@ -0,0 +1,64 @@
+---
+title: Empty
+description: Displays an empty state placeholder with optional media, title, and description.
+---
+
+```astro live
+---
+import { Button } from "@/components/ui/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty"
+import { Icon } from "@/components/ui/icon"
+---
+
+<Empty>
+  <EmptyHeader>
+    <EmptyMedia variant="icon">
+      <Icon name="file-question" />
+    </EmptyMedia>
+    <EmptyTitle>404 - Page Not Found</EmptyTitle>
+    <EmptyDescription>
+      The page you are looking for does not exist.
+    </EmptyDescription>
+  </EmptyHeader>
+  <EmptyContent>
+    <Button size="sm"> Go home </Button>
+  </EmptyContent>
+</Empty>
+```
+
+## Installation
+
+To install the empty component, run the following command:
+
+```bash
+npx shadcn@latest add @fulldev/empty
+```
+
+## Usage
+
+```ts
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty"
+```
+
+```astro
+<Empty>
+  <EmptyMedia>
+    <Icon name="inbox" />
+  </EmptyMedia>
+  <EmptyTitle>No results</EmptyTitle>
+  <EmptyDescription> Try adjusting your filters. </EmptyDescription>
+</Empty>
+```

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

@@ -0,0 +1,347 @@
+---
+title: Field
+description: Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
+---
+
+```astro live
+---
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+---
+
+<FieldSet>
+  <FieldLegend>Profile</FieldLegend>
+  <FieldDescription>Enter your profile information below.</FieldDescription>
+  <FieldGroup>
+    <Field>
+      <FieldLabel for="name">Full name</FieldLabel>
+      <Input id="name" placeholder="Evil Rabbit" />
+      <FieldDescription>This appears on invoices and emails.</FieldDescription>
+    </Field>
+    <Field>
+      <FieldLabel for="username">Username</FieldLabel>
+      <Input id="username" placeholder="evilrabbit" />
+    </Field>
+    <Field orientation="horizontal">
+      <Checkbox id="newsletter" />
+      <FieldLabel for="newsletter">Subscribe to the newsletter</FieldLabel>
+    </Field>
+  </FieldGroup>
+</FieldSet>
+```
+
+## Installation
+
+To install the field component, run the following command:
+
+```bash
+npx shadcn@latest add @fulldev/field
+```
+
+## Usage
+
+```ts
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+} from "@/components/ui/field"
+```
+
+```astro
+<FieldSet>
+  <FieldLegend>Profile</FieldLegend>
+  <FieldGroup>
+    <Field>
+      <FieldLabel for="name">Full name</FieldLabel>
+      <Input id="name" placeholder="Evil Rabbit" />
+      <FieldDescription>Optional helper text.</FieldDescription>
+    </Field>
+  </FieldGroup>
+</FieldSet>
+```
+
+## Anatomy
+
+The `Field` family is designed for composing accessible forms. A typical field is structured as follows:
+
+```astro
+<Field>
+  <FieldLabel for="input-id">Label</FieldLabel>
+  <!-- Input, Select, Checkbox, etc. -->
+  <FieldDescription>Optional helper text.</FieldDescription>
+</Field>
+```
+
+- `Field` is the core wrapper for a single field.
+- `FieldContent` is a flex column that groups label and description. Not required if you have no description.
+- Wrap related fields with `FieldGroup`, and use `FieldSet` with `FieldLegend` for semantic grouping.
+
+## Examples
+
+### Input
+
+```astro live
+---
+import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+---
+
+<div class="w-full max-w-sm">
+  <Field>
+    <FieldLabel for="email">Email</FieldLabel>
+    <Input id="email" type="email" placeholder="email@example.com" />
+    <FieldDescription>We'll never share your email.</FieldDescription>
+  </Field>
+</div>
+```
+
+### Textarea
+
+```astro live
+---
+import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
+import { Textarea } from "@/components/ui/textarea"
+---
+
+<div class="w-full max-w-sm">
+  <Field>
+    <FieldLabel for="bio">Bio</FieldLabel>
+    <Textarea id="bio" placeholder="Tell us about yourself" />
+    <FieldDescription>Write a short bio about yourself.</FieldDescription>
+  </Field>
+</div>
+```
+
+### Native Select
+
+```astro live
+---
+import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
+import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
+---
+
+<div class="w-full max-w-sm">
+  <Field>
+    <FieldLabel for="country">Country</FieldLabel>
+    <NativeSelect id="country">
+      <NativeSelectOption value="">Select a country</NativeSelectOption>
+      <NativeSelectOption value="us">United States</NativeSelectOption>
+      <NativeSelectOption value="uk">United Kingdom</NativeSelectOption>
+      <NativeSelectOption value="ca">Canada</NativeSelectOption>
+    </NativeSelect>
+    <FieldDescription>Select your country of residence.</FieldDescription>
+  </Field>
+</div>
+```
+
+### Fieldset
+
+```astro live
+---
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+---
+
+<div class="w-full max-w-sm">
+  <FieldSet>
+    <FieldLegend>Personal Information</FieldLegend>
+    <FieldDescription>Enter your personal details below.</FieldDescription>
+    <FieldGroup>
+      <Field>
+        <FieldLabel for="first-name">First name</FieldLabel>
+        <Input id="first-name" placeholder="John" />
+      </Field>
+      <Field>
+        <FieldLabel for="last-name">Last name</FieldLabel>
+        <Input id="last-name" placeholder="Doe" />
+      </Field>
+    </FieldGroup>
+  </FieldSet>
+</div>
+```
+
+### Checkbox
+
+```astro live
+---
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldLabel,
+} from "@/components/ui/field"
+---
+
+<div class="w-full max-w-sm">
+  <Field orientation="horizontal">
+    <Checkbox id="terms" />
+    <FieldContent>
+      <FieldLabel for="terms">Accept terms and conditions</FieldLabel>
+      <FieldDescription>
+        You agree to our Terms of Service and Privacy Policy.
+      </FieldDescription>
+    </FieldContent>
+  </Field>
+</div>
+```
+
+### Radio Group
+
+```astro live
+---
+import {
+  Field,
+  FieldDescription,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@/components/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+---
+
+<div class="w-full max-w-sm">
+  <FieldSet>
+    <FieldLegend>Notifications</FieldLegend>
+    <FieldDescription>Choose how you want to be notified.</FieldDescription>
+    <RadioGroup defaultValue="email">
+      <Field orientation="horizontal">
+        <RadioGroupItem value="email" id="email" />
+        <FieldLabel for="email">Email</FieldLabel>
+      </Field>
+      <Field orientation="horizontal">
+        <RadioGroupItem value="sms" id="sms" />
+        <FieldLabel for="sms">SMS</FieldLabel>
+      </Field>
+      <Field orientation="horizontal">
+        <RadioGroupItem value="push" id="push" />
+        <FieldLabel for="push">Push notification</FieldLabel>
+      </Field>
+    </RadioGroup>
+  </FieldSet>
+</div>
+```
+
+### Field Group
+
+Stack `Field` components with `FieldGroup`. Add `FieldSeparator` to divide them.
+
+```astro live
+---
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldSeparator,
+} from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+---
+
+<div class="w-full max-w-sm">
+  <FieldGroup>
+    <Field>
+      <FieldLabel for="email-group">Email</FieldLabel>
+      <Input id="email-group" type="email" placeholder="email@example.com" />
+      <FieldDescription>Your primary email address.</FieldDescription>
+    </Field>
+    <FieldSeparator>Or</FieldSeparator>
+    <Field>
+      <FieldLabel for="phone">Phone</FieldLabel>
+      <Input id="phone" type="tel" placeholder="+1 (555) 000-0000" />
+      <FieldDescription>Your phone number for SMS updates.</FieldDescription>
+    </Field>
+  </FieldGroup>
+</div>
+```
+
+## Responsive Layout
+
+- **Vertical fields:** Default orientation stacks label, control, and helper text—ideal for mobile-first layouts.
+- **Horizontal fields:** Set `orientation="horizontal"` on `Field` to align the label and control side-by-side. Pair with `FieldContent` to keep descriptions aligned.
+- **Responsive fields:** Set `orientation="responsive"` for automatic column layouts inside container-aware parents. Apply `@container/field-group` classes on `FieldGroup` to switch orientations at specific breakpoints.
+
+```astro live
+---
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field"
+---
+
+<div class="w-full max-w-2xl">
+  <FieldGroup class="@container/field-group">
+    <Field orientation="responsive">
+      <Checkbox id="responsive-checkbox" />
+      <FieldContent>
+        <FieldLabel for="responsive-checkbox">
+          Analytics and performance
+        </FieldLabel>
+        <FieldDescription>
+          Help improve the app by sharing anonymous usage data.
+        </FieldDescription>
+      </FieldContent>
+    </Field>
+    <Field orientation="responsive">
+      <Checkbox id="responsive-marketing" />
+      <FieldContent>
+        <FieldLabel for="responsive-marketing">Marketing emails</FieldLabel>
+        <FieldDescription>
+          Receive emails about new products and features.
+        </FieldDescription>
+      </FieldContent>
+    </Field>
+  </FieldGroup>
+</div>
+```
+
+## Validation
+
+Add `data-invalid="true"` to `Field` to switch the entire block into an error state, and add `aria-invalid="true"` on the input itself for assistive technologies.
+
+```astro live
+---
+import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+---
+
+<div class="w-full max-w-sm">
+  <Field data-invalid="true">
+    <FieldLabel for="error-email">Email</FieldLabel>
+    <Input id="error-email" type="email" aria-invalid="true" />
+    <FieldDescription>Enter a valid email address.</FieldDescription>
+  </Field>
+</div>
+```
+
+## Accessibility
+
+- `FieldSet` and `FieldLegend` keep related controls grouped for keyboard and assistive tech users.
+- `Field` outputs `role="group"` so nested controls inherit labeling from `FieldLabel` and `FieldLegend` when combined.
+- Apply `FieldSeparator` sparingly to ensure screen readers encounter clear section boundaries.

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

@@ -0,0 +1,27 @@
+---
+title: Footer
+description: A layout component for the bottom section of a page.
+---
+
+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 footer component is a work in progress and not yet documented. To see
+    it in action, have a look at:
+    <a class="text-primary inline" href="/blocks/footer/">
+      /blocks/footer/
+    </a>
+  </AlertDescription>
+</Alert>
+
+## Installation
+
+To install the footer component, run the following command:
+
+```bash
+npx shadcn@latest add @fulldev/footer
+```

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

@@ -0,0 +1,77 @@
+---
+title: Header
+description: A layout component for the top section of a page.
+sidebar:
+  badge:
+    text: ⋅
+    variant: success
+---
+
+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 header component is a work in progress. To see it in action, have a
+    look at:
+    <a class="text-primary inline" href="/blocks/header/">
+      /blocks/header/
+    </a>
+  </AlertDescription>
+</Alert>
+
+## Installation
+
+To install the header component, run the following command:
+
+```bash
+npx shadcn@latest add @fulldev/header
+```
+
+## Usage
+
+```ts
+import { Button } from "@/components/ui/button"
+import { Header, HeaderActions, HeaderContent } from "@/components/ui/header"
+import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
+```
+
+```astro
+<Header>
+  <HeaderContent>
+    <Logo href="/">
+      <LogoText>fulldev/ui</LogoText>
+    </Logo>
+    <HeaderActions class="ml-auto">
+      <Button size="sm" variant="ghost">Sign In</Button>
+      <Button size="sm">Sign Up</Button>
+    </HeaderActions>
+  </HeaderContent>
+</Header>
+```
+
+## Examples
+
+### Floating
+
+```astro live
+---
+import { Button } from "@/components/ui/button"
+import { Header, HeaderActions, HeaderContent } from "@/components/ui/header"
+import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
+---
+
+<Header variant="floating">
+  <HeaderContent>
+    <Logo href="/">
+      <LogoText>fulldev/ui</LogoText>
+    </Logo>
+    <HeaderActions class="ml-auto">
+      <Button size="sm" variant="ghost">Sign In</Button>
+      <Button size="sm">Sign Up</Button>
+    </HeaderActions>
+  </HeaderContent>
+</Header>
+```

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

@@ -0,0 +1,43 @@
+---
+title: Icon
+description: A component for displaying scalable vector icons.
+sidebar:
+  badge:
+    text: ⋅
+    variant: success
+---
+
+The icon component utilizes Astro's rendering to be able to be any component, while not sacrificing performance.
+
+Each icon in lucide-icons and simple-icons is supported. With duplicate names, lucide-icons takes precedence.
+
+```astro live
+---
+import { Icon } from "@/components/ui/icon"
+---
+
+<Icon name="heart" />
+<Icon name="star" />
+<Icon name="check" />
+<Icon name="trash-2" />
+<Icon name="x.com" />
+<Icon name="whatsapp" />
+```
+
+## Installation
+
+To install the icon component, run the following command:
+
+```bash
+npx shadcn@latest add @fulldev/icon
+```
+
+## Usage
+
+```ts
+import { Icon } from "@/components/ui/icon"
+```
+
+```astro
+<Icon name="heart" />
+```

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

@@ -0,0 +1,38 @@
+---
+title: Image
+description: An optimized image component with lazy loading support.
+sidebar:
+  badge:
+    text: ⋅
+    variant: success
+---
+
+The image component is a minimal wrapper around the Astro Image component.
+
+```astro live
+---
+import image from "@/assets/image-placeholder.webp"
+
+import { Image } from "@/components/ui/image"
+---
+
+<Image src={image} alt="Image placeholder" class="w-full max-w-md rounded-lg" />
+```
+
+## Installation
+
+To install the image component, run the following command:
+
+```bash
+npx shadcn@latest add @fulldev/image
+```
+
+## Usage
+
+```ts
+import { Image } from "@/components/ui/image"
+```
+
+```astro
+<Image src={image} alt="Description" />
+```

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

@@ -0,0 +1,35 @@
+---
+title: Input
+description: Displays a form input field or a component that looks like an input field.
+---
+
+```astro live
+---
+import { Input } from "@/components/ui/input"
+---
+
+<div class="flex w-full max-w-sm flex-col gap-3">
+  <Input type="text" placeholder="Type here..." />
+  <Input type="email" placeholder="Email" />
+  <Input type="tel" placeholder="Phone" />
+  <Input type="text" placeholder="Disabled" disabled />
+</div>
+```
+
+## Installation
+
+To install the input component, run the following command:
+
+```bash
+npx shadcn@latest add @fulldev/input
+```
+
+## Usage
+
+```ts
+import { Input } from "@/components/ui/input"
+```
+
+```astro
+<Input type="text" placeholder="Enter text..." />
+```