fulldev-ui 0.7.0 → 0.9.0

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

@@ -1,52 +0,0 @@
----
-title: List
-description: A container for displaying a series of items in a list format.
-sidebar:
-  badge:
-    text: ⋅
-    variant: success
----
-
-```astro live
----
-import { Icon } from "@/components/ui/icon"
-import { List, ListItem } from "@/components/ui/list"
----
-
-<List class="w-full max-w-sm">
-  <ListItem>
-    <Icon name="check-circle" />
-    First item
-  </ListItem>
-  <ListItem>
-    <Icon name="check" />
-    Second item
-  </ListItem>
-  <ListItem>
-    <Icon name="check-circle-2" />
-    Third item
-  </ListItem>
-</List>
-```
-
-## Installation
-
-To install the list component, run the following command:
-
-```bash
-npx shadcn@latest add @fulldev/list
-```
-
-## Usage
-
-```ts
-import { List, ListItem } from "@/components/ui/list"
-```
-
-```astro
-<List>
-  <ListItem>Item 1</ListItem>
-  <ListItem>Item 2</ListItem>
-  <ListItem>Item 3</ListItem>
-</List>
-```

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

@@ -1,44 +0,0 @@
----
-title: Logo
-description: A component for displaying a brand logo.
-sidebar:
-  badge:
-    text: ⋅
-    variant: success
----
-
-```astro live
----
-import logo from "@/assets/logo-fulldev.svg"
-
-import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
----
-
-<Logo>
-  <LogoImage src={logo} alt="Logo" />
-  <LogoText>fulldev/ui</LogoText>
-</Logo>
-```
-
-## Installation
-
-To install the logo component, run the following command:
-
-```bash
-npx shadcn@latest add @fulldev/logo
-```
-
-## Usage
-
-```ts
-import logo from "@/assets/logo-fulldev.svg"
-
-import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
-```
-
-```astro
-<Logo>
-  <LogoImage src={logo} alt="Logo" />
-  <LogoText>fulldev/ui</LogoText>
-</Logo>
-```

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

@@ -1,110 +0,0 @@
----
-title: Marquee
-description: A continuous scrolling animation component for displaying content in a loop.
-sidebar:
-  badge:
-    text: ⋅
-    variant: success
----
-
-```astro live
----
-import { Marquee, MarqueeContent } from "@/components/ui/marquee"
-
-const items = ["React", "Vue", "Angular", "Svelte", "Astro", "Next.js"]
----
-
-<Marquee class="mask-x-from-95%">
-  <MarqueeContent>
-    {
-      items.map((item) => (
-        <span class="text-muted-foreground text-sm">{item}</span>
-      ))
-    }
-  </MarqueeContent>
-</Marquee>
-```
-
-## Installation
-
-To install the marquee component, run the following command:
-
-```bash
-npx shadcn@latest add @fulldev/marquee
-```
-
-## Usage
-
-```ts
-import { Marquee, MarqueeContent } from "@/components/ui/marquee"
-```
-
-```astro
-<Marquee>
-  <MarqueeContent>
-    <!-- Your content here -->
-  </MarqueeContent>
-</Marquee>
-```
-
-## Examples
-
-### Direction
-
-Control the scroll direction with the `direction` prop.
-
-```astro live
----
-import { Marquee, MarqueeContent } from "@/components/ui/marquee"
-
-const items = ["TypeScript", "JavaScript", "Python", "Go", "Rust"]
----
-
-<div class="flex flex-col gap-8">
-  <Marquee class="mask-x-from-95%">
-    <MarqueeContent direction="left">
-      {
-        items.map((item) => (
-          <span class="text-muted-foreground text-sm">{item}</span>
-        ))
-      }
-    </MarqueeContent>
-  </Marquee>
-
-  <Marquee class="mask-x-from-95%">
-    <MarqueeContent direction="right">
-      {
-        items.map((item) => (
-          <span class="text-muted-foreground text-sm">{item}</span>
-        ))
-      }
-    </MarqueeContent>
-  </Marquee>
-</div>
-```
-
-### Pause on Hover
-
-Enable pause on hover with the `pauseOnHover` prop.
-
-```astro live
----
-import { Marquee, MarqueeContent } from "@/components/ui/marquee"
-
-const items = ["Tailwind CSS", "Bootstrap", "Sass", "PostCSS"]
----
-
-<Marquee class="mask-x-from-95%">
-  <MarqueeContent pauseOnHover>
-    {
-      items.map((item) => (
-        <span class="text-muted-foreground text-sm">{item}</span>
-      ))
-    }
-  </MarqueeContent>
-</Marquee>
-```
-
-## Styling
-
-The marquee component supports masking effects to create a fade-out effect at the edges. Use utility classes like `mask-x-from-95%` to apply the mask.

package/src/content/docs/docs/components/native-carousel.mdx

@@ -1,83 +0,0 @@
----
-title: Native Carousel
-description: A carousel component using native HTML scroll behavior for seamless slide navigation.
-sidebar:
-  badge:
-    text: ⋅
-    variant: success
----
-
-```astro live
----
-import {
-  NativeCarousel,
-  NativeCarouselContent,
-  NativeCarouselItem,
-  NativeCarouselNext,
-  NativeCarouselPrevious,
-} from "@/components/ui/native-carousel"
----
-
-<NativeCarousel class="w-full max-w-2xl">
-  <NativeCarouselContent>
-    <NativeCarouselItem>
-      <div
-        class="bg-muted flex aspect-video items-center justify-center rounded-md"
-      >
-        <span>Slide 1</span>
-      </div>
-    </NativeCarouselItem>
-    <NativeCarouselItem>
-      <div
-        class="bg-muted flex aspect-video items-center justify-center rounded-md"
-      >
-        <span>Slide 2</span>
-      </div>
-    </NativeCarouselItem>
-    <NativeCarouselItem>
-      <div
-        class="bg-muted flex aspect-video items-center justify-center rounded-md"
-      >
-        <span>Slide 3</span>
-      </div>
-    </NativeCarouselItem>
-  </NativeCarouselContent>
-  <NativeCarouselPrevious />
-  <NativeCarouselNext />
-</NativeCarousel>
-```
-
-## Installation
-
-To install the native carousel component, run the following command:
-
-```bash
-npx shadcn@latest add @fulldev/native-carousel
-```
-
-## Usage
-
-```ts
-import {
-  NativeCarousel,
-  NativeCarouselContent,
-  NativeCarouselItem,
-  NativeCarouselNext,
-  NativeCarouselPrevious,
-} from "@/components/ui/native-carousel"
-```
-
-```astro
-<NativeCarousel>
-  <NativeCarouselContent>
-    <NativeCarouselItem>
-      <div>Slide 1</div>
-    </NativeCarouselItem>
-    <NativeCarouselItem>
-      <div>Slide 2</div>
-    </NativeCarouselItem>
-  </NativeCarouselContent>
-  <NativeCarouselPrevious />
-  <NativeCarouselNext />
-</NativeCarousel>
-```

package/src/content/docs/docs/components/native-select.mdx

@@ -1,141 +0,0 @@
----
-title: Native Select
-description: A styled native HTML select element with consistent design system integration.
----
-
-```astro live
----
-import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
----
-
-<NativeSelect class="w-full max-w-xs">
-  <NativeSelectOption value="">Select status</NativeSelectOption>
-  <NativeSelectOption value="todo">Todo</NativeSelectOption>
-  <NativeSelectOption value="in-progress">In Progress</NativeSelectOption>
-  <NativeSelectOption value="done">Done</NativeSelectOption>
-  <NativeSelectOption value="cancelled">Cancelled</NativeSelectOption>
-</NativeSelect>
-```
-
-## Installation
-
-To install the native select component, run the following command:
-
-```bash
-npx shadcn@latest add @fulldev/native-select
-```
-
-## Usage
-
-```ts
-import {
-  NativeSelect,
-  NativeSelectOptGroup,
-  NativeSelectOption,
-} from "@/components/ui/native-select"
-```
-
-```astro
-<NativeSelect>
-  <NativeSelectOption value="">Select a fruit</NativeSelectOption>
-  <NativeSelectOption value="apple">Apple</NativeSelectOption>
-  <NativeSelectOption value="banana">Banana</NativeSelectOption>
-  <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
-  <NativeSelectOption value="grapes" disabled> Grapes </NativeSelectOption>
-  <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
-</NativeSelect>
-```
-
-## Examples
-
-### With Groups
-
-Organize options using `NativeSelectOptGroup` for better categorization.
-
-```astro live
----
-import {
-  NativeSelect,
-  NativeSelectOptGroup,
-  NativeSelectOption,
-} from "@/components/ui/native-select"
----
-
-<NativeSelect class="w-full max-w-xs">
-  <NativeSelectOption value="">Select department</NativeSelectOption>
-  <NativeSelectOptGroup label="Engineering">
-    <NativeSelectOption value="frontend">Frontend</NativeSelectOption>
-    <NativeSelectOption value="backend">Backend</NativeSelectOption>
-    <NativeSelectOption value="devops">DevOps</NativeSelectOption>
-  </NativeSelectOptGroup>
-  <NativeSelectOptGroup label="Sales">
-    <NativeSelectOption value="sales-rep">Sales Rep</NativeSelectOption>
-    <NativeSelectOption value="account-manager">
-      Account Manager
-    </NativeSelectOption>
-    <NativeSelectOption value="sales-director">
-      Sales Director
-    </NativeSelectOption>
-  </NativeSelectOptGroup>
-  <NativeSelectOptGroup label="Operations">
-    <NativeSelectOption value="support">Customer Support</NativeSelectOption>
-    <NativeSelectOption value="product-manager">
-      Product Manager
-    </NativeSelectOption>
-    <NativeSelectOption value="ops-manager">
-      Operations Manager
-    </NativeSelectOption>
-  </NativeSelectOptGroup>
-</NativeSelect>
-```
-
-### Disabled State
-
-Disable individual options or the entire select component.
-
-```astro live
----
-import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
----
-
-<NativeSelect disabled class="w-full max-w-xs">
-  <NativeSelectOption value="">Select priority</NativeSelectOption>
-  <NativeSelectOption value="low">Low</NativeSelectOption>
-  <NativeSelectOption value="medium">Medium</NativeSelectOption>
-  <NativeSelectOption value="high">High</NativeSelectOption>
-  <NativeSelectOption value="critical">Critical</NativeSelectOption>
-</NativeSelect>
-```
-
-### Invalid State
-
-Show validation errors with the `aria-invalid` attribute and error styling.
-
-```astro live
----
-import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
----
-
-<NativeSelect aria-invalid="true" class="w-full max-w-xs">
-  <NativeSelectOption value="">Select role</NativeSelectOption>
-  <NativeSelectOption value="admin">Admin</NativeSelectOption>
-  <NativeSelectOption value="editor">Editor</NativeSelectOption>
-  <NativeSelectOption value="viewer">Viewer</NativeSelectOption>
-  <NativeSelectOption value="guest">Guest</NativeSelectOption>
-</NativeSelect>
-```
-
-## Accessibility
-
-- The component maintains all native HTML select accessibility features.
-- Screen readers can navigate through options using arrow keys.
-- The chevron icon is marked as `aria-hidden="true"` to avoid duplication.
-- Use `aria-label` or `aria-labelledby` for additional context when needed.
-
-```astro
-<NativeSelect aria-label="Choose your preferred language">
-  <NativeSelectOption value="en">English</NativeSelectOption>
-  <NativeSelectOption value="es">Spanish</NativeSelectOption>
-  <NativeSelectOption value="fr">French</NativeSelectOption>
-</NativeSelect>
-```

package/src/content/docs/docs/components/navigation-menu.mdx

@@ -1,91 +0,0 @@
----
-title: Navigation Menu
-description: A collection of links for navigating websites.
----
-
-```astro live
----
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-} from "@/components/ui/navigation-menu"
----
-
-<NavigationMenu>
-  <NavigationMenuList class="flex-wrap">
-    <NavigationMenuItem>
-      <NavigationMenuTrigger>Home</NavigationMenuTrigger>
-      <NavigationMenuContent>
-        <ul class="grid w-[300px] gap-2">
-          <li>
-            <NavigationMenuLink href="/">
-              <div class="font-medium">Introduction</div>
-              <div class="text-muted-foreground text-sm">
-                Get started with our library.
-              </div>
-            </NavigationMenuLink>
-          </li>
-          <li>
-            <NavigationMenuLink href="/docs">
-              <div class="font-medium">Documentation</div>
-              <div class="text-muted-foreground text-sm">
-                Learn how to use components.
-              </div>
-            </NavigationMenuLink>
-          </li>
-        </ul>
-      </NavigationMenuContent>
-    </NavigationMenuItem>
-    <NavigationMenuItem>
-      <NavigationMenuTrigger>Components</NavigationMenuTrigger>
-      <NavigationMenuContent>
-        <ul class="grid w-[300px] gap-2">
-          <li>
-            <NavigationMenuLink href="/components">
-              <div class="font-medium">All Components</div>
-            </NavigationMenuLink>
-          </li>
-        </ul>
-      </NavigationMenuContent>
-    </NavigationMenuItem>
-  </NavigationMenuList>
-</NavigationMenu>
-```
-
-## Installation
-
-To install the navigation menu component, run the following command:
-
-```bash
-npx shadcn@latest add @fulldev/navigation-menu
-```
-
-## Usage
-
-```ts
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-} from "@/components/ui/navigation-menu"
-```
-
-```astro
-<NavigationMenu>
-  <NavigationMenuList>
-    <NavigationMenuItem>
-      <NavigationMenuTrigger>Item</NavigationMenuTrigger>
-      <NavigationMenuContent>
-        <NavigationMenuLink href="#">Link</NavigationMenuLink>
-      </NavigationMenuContent>
-    </NavigationMenuItem>
-  </NavigationMenuList>
-</NavigationMenu>
-```

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

@@ -1,42 +0,0 @@
----
-title: Price
-description: A flexible price display component for showing pricing information.
-sidebar:
-  badge:
-    text: ⋅
-    variant: success
----
-
-```astro live
----
-import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
----
-
-<Price>
-  <PriceValue price={99} />
-  <PriceUnit>month</PriceUnit>
-</Price>
-```
-
-## Installation
-
-To install the price component, run the following command:
-
-```bash
-npx shadcn@latest add @fulldev/price
-```
-
-## Examples
-
-### With Currency
-
-```astro live
----
-import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
----
-
-<Price>
-  <PriceValue price={29} currency="EUR" />
-  <PriceUnit>month</PriceUnit>
-</Price>
-```

package/src/content/docs/docs/components/radio-group.mdx

@@ -1,47 +0,0 @@
----
-title: Radio Group
-description: A set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.
----
-
-```astro live
----
-import { Label } from "@/components/ui/label"
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
----
-
-<RadioGroup>
-  <div class="flex items-center gap-2">
-    <RadioGroupItem id="option1" value="option1" name="example" />
-    <Label for="option1">Option 1</Label>
-  </div>
-  <div class="flex items-center gap-2">
-    <RadioGroupItem id="option2" value="option2" name="example" />
-    <Label for="option2">Option 2</Label>
-  </div>
-  <div class="flex items-center gap-2">
-    <RadioGroupItem id="option3" value="option3" name="example" disabled />
-    <Label for="option3">Option 3 (Disabled)</Label>
-  </div>
-</RadioGroup>
-```
-
-## Installation
-
-To install the radio group component, run the following command:
-
-```bash
-npx shadcn@latest add @fulldev/radio-group
-```
-
-## Usage
-
-```ts
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-```
-
-```astro
-<RadioGroup>
-  <RadioGroupItem id="option1" value="option1" name="example" />
-  <label for="option1">Option 1</label>
-</RadioGroup>
-```

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

@@ -1,81 +0,0 @@
----
-title: Rating
-description: A star rating component for displaying ratings visually.
-sidebar:
-  badge:
-    text: ⋅
-    variant: success
----
-
-```astro live
----
-import { Rating } from "@/components/ui/rating"
----
-
-<div class="flex flex-col gap-4">
-  <div>
-    <p class="mb-2 text-sm font-medium">Rating: 5/5</p>
-    <Rating rating={5} />
-  </div>
-  <div>
-    <p class="mb-2 text-sm font-medium">Rating: 4/5</p>
-    <Rating rating={4} />
-  </div>
-  <div>
-    <p class="mb-2 text-sm font-medium">Rating: 3.5/5</p>
-    <Rating rating={3.5} />
-  </div>
-  <div>
-    <p class="mb-2 text-sm font-medium">Rating: 2/5</p>
-    <Rating rating={2} />
-  </div>
-</div>
-```
-
-## Installation
-
-To install the rating component, run the following command:
-
-```bash
-npx shadcn@latest add @fulldev/rating
-```
-
-## Usage
-
-```ts
-import { Rating } from "@/components/ui/rating"
-```
-
-```astro
-<Rating rating={4.5} />
-```
-
-## Examples
-
-### Different Ratings
-
-```astro live
----
-import { Rating } from "@/components/ui/rating"
----
-
-<div class="flex flex-col gap-4">
-  <Rating rating={5} />
-  <Rating rating={3.5} />
-  <Rating rating={1} />
-</div>
-```
-
-### With Custom Size
-
-```astro live
----
-import { Rating } from "@/components/ui/rating"
----
-
-<div class="flex flex-col gap-4">
-  <Rating rating={4} class="text-lg" />
-  <Rating rating={4} class="text-2xl" />
-  <Rating rating={4} class="text-3xl" />
-</div>
-```