fulldev-ui 0.5.0-beta.9 → 0.6.0-beta.0

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

@@ -0,0 +1,49 @@
+---
+presets: [docs]
+
+title: Icon
+---
+
+# Icon
+
+```astro live
+---
+import Icon from 'fulldev-ui/components/Icon.astro'
+---
+
+<Icon name="confetti" />
+```
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `name`
+
+Accepts any icon name supported by [Tabler Icons](https://tabler.io/icons).
+
+```astro live
+---
+import Icon from 'fulldev-ui/components/Icon.astro'
+---
+
+<Icon name="confetti" />
+<Icon name="brand-x" />
+<Icon name="brand-github" />
+```
+
+### `size`
+
+```astro live
+---
+import Icon from 'fulldev-ui/components/Icon.astro'
+---
+
+<Icon name="confetti" size="sm" />
+<Icon name="confetti" size="md" />
+<Icon name="confetti" size="lg" />
+```

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

@@ -0,0 +1,26 @@
+---
+presets: [docs]
+
+title: Image
+---
+
+import Link from 'fulldev-ui/components/Link.astro'
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+# Image
+
+Enhanced image built to work with the [images collections](/docs/collections/images/).
+
+```astro live
+---
+import Image from 'fulldev-ui/components/Image.astro'
+---
+
+<Image id="placeholder-landscape.webp" />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples

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

@@ -0,0 +1,41 @@
+---
+presets: [docs]
+
+title: Input
+---
+
+# Input
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Input from 'fulldev-ui/components/Input.astro'
+---
+
+<Input
+  label="Email"
+  icon="mail"
+  name="input"
+  type="email"
+  placeholder="Enter your email.."
+/>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `size`
+
+```astro live
+---
+import Input from 'fulldev-ui/components/Input.astro'
+---
+
+<Input size="sm" icon="mail" label="Small" />
+<Input size="md" icon="mail" label="Medium" />
+<Input size="lg" icon="mail" label="Large" />
+```

package/src/content/pages/{typography → docs/components}/label.mdx

@@ -22,20 +22,24 @@ import Label from 'fulldev-ui/components/Label.astro'
 
 ## Examples
 
+### `size`
+
 ```astro live
 ---
 import Label from 'fulldev-ui/components/Label.astro'
 ---
 
-<Label color="base">Label</Label>
-<Label color="brand">Label</Label>
+<Label size="sm">Small</Label>
+<Label size="md">Medium</Label>
+<Label size="lg">Large</Label>
 ```
 
+### `text`
+
 ```astro live
 ---
 import Label from 'fulldev-ui/components/Label.astro'
 ---
 
-<Label>Label</Label>
-<Label contrast>Label</Label>
+<Label text="Label" />
 ```

package/src/content/pages/docs/components/lead.mdx

@@ -0,0 +1,51 @@
+---
+presets: [docs]
+
+title: Lead
+---
+
+# Lead
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Lead from 'fulldev-ui/components/Lead.astro'
+---
+
+<Lead>The quick brown fox jumps over the lazy dog</Lead>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `size`
+
+```astro live
+---
+import Lead from 'fulldev-ui/components/Lead.astro'
+---
+
+<Lead size="sm">
+  The quick brown fox jumps over the lazy dog because he is quick
+</Lead>
+<Lead size="md">
+  The quick brown fox jumps over the lazy dog because he is quick
+</Lead>
+<Lead size="lg">
+  The quick brown fox jumps over the lazy dog because he is quick
+</Lead>
+```
+
+### `text`
+
+```astro live
+---
+import Lead from 'fulldev-ui/components/Lead.astro'
+---
+
+<Lead text="The quick brown fox jumps over the lazy dog" />
+```

package/src/content/pages/{typography → docs/components}/link.mdx

@@ -13,7 +13,7 @@ import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
 import Link from 'fulldev-ui/components/Link.astro'
 ---
 
-<Link href="/base/link">Link</Link>
+<Link href="#">Link</Link>
 ```
 
 ## Props
@@ -22,30 +22,45 @@ import Link from 'fulldev-ui/components/Link.astro'
 
 ## Examples
 
+### `variant`
+
 ```astro live
 ---
 import Link from 'fulldev-ui/components/Link.astro'
 ---
 
-<Link href="/base/link" size="sm">Link</Link>
-<Link href="/base/link" size="md">Link</Link>
-<Link href="/base/link" size="lg">Link</Link>
+<Link href="#" variant="primary">Primary</Link>
+<Link href="#" variant="muted">Muted</Link>
 ```
 
+### `size`
+
 ```astro live
 ---
 import Link from 'fulldev-ui/components/Link.astro'
 ---
 
-<Link href="#">Link</Link>
-<Link href="#" contrast>Link</Link>
+<Link href="#" size="sm">Small</Link>
+<Link href="#" size="md">Medium</Link>
+<Link href="#" size="lg">Large</Link>
 ```
 
+### `icon`
+
+```astro live
+---
+import Link from 'fulldev-ui/components/Link.astro'
+---
+
+<Link href="#" icon="arrow-right" text="Link" />
+```
+
+### `text`
+
 ```astro live
 ---
 import Link from 'fulldev-ui/components/Link.astro'
 ---
 
-<Link color="base">Link</Link>
-<Link color="brand">Link</Link>
+<Link href="#" text="Link" />
 ```

package/src/content/pages/docs/components/links.mdx

@@ -0,0 +1,100 @@
+---
+presets: [docs]
+
+title: Links
+---
+
+# Links
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Links from 'fulldev-ui/components/Links.astro'
+---
+
+<Links
+  links={[
+    { text: 'First', href: '#' },
+    { text: 'Second', href: '#' },
+  ]}
+/>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `direction`
+
+```astro live
+---
+import Links from 'fulldev-ui/components/Links.astro'
+---
+
+<Links
+  direction="column"
+  links={[
+    { text: 'First', href: '#' },
+    { text: 'Second', href: '#' },
+  ]}
+/>
+```
+
+### `variant`
+
+```astro live
+---
+import Links from 'fulldev-ui/components/Links.astro'
+---
+
+<Links
+  variant="primary"
+  links={[
+    { text: 'First', href: '#' },
+    { text: 'Second', href: '#' },
+  ]}
+/>
+
+<Links
+  variant="muted"
+  links={[
+    { text: 'First', href: '#' },
+    { text: 'Second', href: '#' },
+  ]}
+/>
+```
+
+### `size`
+
+```astro live
+---
+import Links from 'fulldev-ui/components/Links.astro'
+---
+
+<Links
+  size="sm"
+  links={[
+    { text: 'First', href: '#' },
+    { text: 'Second', href: '#' },
+  ]}
+/>
+
+<Links
+  size="md"
+  links={[
+    { text: 'First', href: '#' },
+    { text: 'Second', href: '#' },
+  ]}
+/>
+
+<Links
+  size="lg"
+  links={[
+    { text: 'First', href: '#' },
+    { text: 'Second', href: '#' },
+  ]}
+/>
+```

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

@@ -0,0 +1,45 @@
+---
+presets: [docs]
+
+title: List
+---
+
+# List
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import List from 'fulldev-ui/components/List.astro'
+---
+
+<List items={['First', 'Second', 'Third']} />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `as`
+
+```astro live
+---
+import List from 'fulldev-ui/components/List.astro'
+---
+
+<List as="ol" items={['First', 'Second', 'Third']} />
+```
+
+### `size`
+
+```astro live
+---
+import List from 'fulldev-ui/components/List.astro'
+---
+
+<List size="sm" items={['First', 'Second', 'Third']} />
+<List size="md" items={['First', 'Second', 'Third']} />
+<List size="lg" items={['First', 'Second', 'Third']} />
+```

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

@@ -0,0 +1,37 @@
+---
+presets: [docs]
+
+title: Logo
+---
+
+# Logo
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Logo from 'fulldev-ui/components/Logo.astro'
+---
+
+<Logo id="logo-simple.svg" company="Fulldev UI" />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `variant`
+
+### `size`
+
+```astro live
+---
+import Logo from 'fulldev-ui/components/Logo.astro'
+---
+
+<Logo size="sm" id="favicon.svg" company="Fulldev UI" />
+<Logo size="md" id="favicon.svg" company="Fulldev UI" />
+<Logo size="lg" id="favicon.svg" company="Fulldev UI" />
+```

package/src/content/pages/docs/components/menu.mdx

@@ -0,0 +1,90 @@
+---
+presets: [docs]
+
+title: Menu
+---
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+import Card from 'fulldev-ui/components/Card.astro'
+
+# Menu
+
+<aside>This component is experimental and likely to change</aside>
+
+```astro live
+---
+import Menu from 'fulldev-ui/components/Menu.astro'
+---
+
+<Menu
+  groups={[
+    {
+      heading: 'First',
+      links: [
+        { text: 'First', href: '#' },
+        { text: 'Second', href: '#' },
+        { text: 'Third', href: '#' },
+      ],
+    },
+    {
+      heading: 'Second',
+      links: [
+        { text: 'First', href: '#' },
+        { text: 'Second', href: '#' },
+        { text: 'Third', href: '#' },
+      ],
+    },
+  ]}
+/>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `size`
+
+```astro live
+---
+import Menu from 'fulldev-ui/components/Menu.astro'
+---
+
+<Menu
+  size="sm"
+  groups={[
+    {
+      heading: 'First',
+      links: [
+        { text: 'First', href: '#' },
+        { text: 'Second', href: '#' },
+      ],
+    },
+  ]}
+/>
+<Menu
+  size="md"
+  groups={[
+    {
+      heading: 'First',
+      links: [
+        { text: 'First', href: '#' },
+        { text: 'Second', href: '#' },
+      ],
+    },
+  ]}
+/>
+<Menu
+  size="lg"
+  groups={[
+    {
+      heading: 'First',
+      links: [
+        { text: 'First', href: '#' },
+        { text: 'Second', href: '#' },
+      ],
+    },
+  ]}
+/>
+```

package/src/content/pages/docs/components/paragraph.mdx

@@ -0,0 +1,51 @@
+---
+presets: [docs]
+
+title: Paragraph
+---
+
+# Paragraph
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+---
+
+<Paragraph>The quick brown fox jumps over the lazy dog</Paragraph>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `size`
+
+```astro live
+---
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+---
+
+<Paragraph size="sm">
+  The quick brown fox jumps over the lazy dog because he is quick
+</Paragraph>
+<Paragraph size="md">
+  The quick brown fox jumps over the lazy dog because he is quick
+</Paragraph>
+<Paragraph size="lg">
+  The quick brown fox jumps over the lazy dog because he is quick
+</Paragraph>
+```
+
+### `text`
+
+```astro live
+---
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+---
+
+<Paragraph text="The quick brown fox jumps over the lazy dog" />
+```

package/src/content/pages/docs/components/prose.mdx

@@ -0,0 +1,37 @@
+---
+presets: [docs]
+
+title: Prose
+---
+
+# Prose
+
+<aside>This component is experimental and likely to change</aside>
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Prose from 'fulldev-ui/components/Prose.astro'
+---
+
+<Prose>
+  <h1>Welcome to Our Blog</h1>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia
+    odio vitae vestibulum vestibulum.
+  </p>
+
+  <h2>Key Features</h2>
+  <p>
+    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+    ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+    ex ea commodo consequat.
+  </p>
+  <ul>
+    <li>Simple and elegant design</li>
+    <li>Responsive layout</li>
+    <li>Easy customization</li>
+  </ul>
+</Prose>
+```

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

@@ -0,0 +1,77 @@
+---
+presets: [docs]
+
+title: Rating
+---
+
+# Rating
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Rating from 'fulldev-ui/components/Rating.astro'
+---
+
+<Rating avatar="avatar-1.jpeg" text="John Doe" value={4.5} />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `avatars`
+
+```astro live
+---
+import Rating from 'fulldev-ui/components/Rating.astro'
+---
+
+<Rating
+  avatars={['avatar-1.jpeg', 'avatar-2.jpeg', 'avatar-3.jpeg', 'avatar-4.jpeg']}
+  text="4.92 out of 236 reviews"
+  value={4.92}
+/>
+```
+
+### `value`
+
+```astro live
+---
+import Rating from 'fulldev-ui/components/Rating.astro'
+---
+
+<Rating value={3} />
+<Rating value={5} />
+```
+
+### `size`
+
+```astro live
+---
+import Rating from 'fulldev-ui/components/Rating.astro'
+---
+
+<Rating
+  size="sm"
+  avatars={['avatar-1.jpeg', 'avatar-2.jpeg', 'avatar-3.jpeg', 'avatar-4.jpeg']}
+  text="4.92 out of 236 reviews"
+  value={4.92}
+/>
+
+<Rating
+  size="md"
+  avatars={['avatar-1.jpeg', 'avatar-2.jpeg', 'avatar-3.jpeg', 'avatar-4.jpeg']}
+  text="4.92 out of 236 reviews"
+  value={4.92}
+/>
+
+<Rating
+  size="lg"
+  avatars={['avatar-1.jpeg', 'avatar-2.jpeg', 'avatar-3.jpeg', 'avatar-4.jpeg']}
+  text="4.92 out of 236 reviews"
+  value={4.92}
+/>
+```