fulldev-ui 0.7.0 → 0.9.0

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

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

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

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

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

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

@@ -1,35 +0,0 @@
----
-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..." />
-```

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

@@ -1,75 +0,0 @@
----
-title: Item
-description: A flexible container for displaying content items with various styles.
----
-
-```astro live
----
-import { Icon } from "@/components/ui/icon"
-import {
-  Item,
-  ItemDescription,
-  ItemMedia,
-  ItemTitle,
-} from "@/components/ui/item"
----
-
-<div class="grid w-full max-w-sm gap-2">
-  <Item>
-    <ItemMedia>
-      <Icon name="heart" class="size-4" />
-    </ItemMedia>
-    <div class="min-w-0 flex-1">
-      <ItemTitle>Item Title</ItemTitle>
-      <ItemDescription>Item description goes here</ItemDescription>
-    </div>
-  </Item>
-  <Item variant="outline">
-    <ItemMedia>
-      <Icon name="star" class="size-4" />
-    </ItemMedia>
-    <div class="min-w-0 flex-1">
-      <ItemTitle>Outline Variant</ItemTitle>
-      <ItemDescription>This item has an outline variant</ItemDescription>
-    </div>
-  </Item>
-  <Item variant="muted">
-    <ItemMedia>
-      <Icon name="info" class="size-4" />
-    </ItemMedia>
-    <div class="min-w-0 flex-1">
-      <ItemTitle>Muted Variant</ItemTitle>
-      <ItemDescription>This item has a muted variant</ItemDescription>
-    </div>
-  </Item>
-</div>
-```
-
-## Installation
-
-To install the item component, run the following command:
-
-```bash
-npx shadcn@latest add @fulldev/item
-```
-
-## Usage
-
-```ts
-import {
-  Item,
-  ItemDescription,
-  ItemMedia,
-  ItemTitle,
-} from "@/components/ui/item"
-```
-
-```astro
-<Item>
-  <ItemMedia>
-    <Icon name="heart" />
-  </ItemMedia>
-  <ItemTitle>Title</ItemTitle>
-  <ItemDescription>Description</ItemDescription>
-</Item>
-```

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

@@ -1,34 +0,0 @@
----
-title: Label
-description: Renders an accessible label associated with a control.
----
-
-```astro live
----
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
----
-
-<div class="grid w-full max-w-sm gap-2">
-  <Label for="email">Email</Label>
-  <Input id="email" type="email" placeholder="Enter your email" />
-</div>
-```
-
-## Installation
-
-To install the label component, run the following command:
-
-```bash
-npx shadcn@latest add @fulldev/label
-```
-
-## Usage
-
-```ts
-import { Label } from "@/components/ui/label"
-```
-
-```astro
-<Label for="email">Email</Label>
-```