fulldev-ui 0.5.0-beta.8 → 0.6.0-beta-4

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

@@ -0,0 +1,59 @@
+---
+_layout: doc
+title: Heading
+---
+
+# Heading
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Heading from 'fulldev-ui/components/Heading.astro'
+---
+
+<Heading>The quick brown fox jumps</Heading>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `level`
+
+```astro live
+---
+import Heading from 'fulldev-ui/components/Heading.astro'
+---
+
+<Heading level={1}>The quick brown fox jumps</Heading>
+<Heading level={2}>The quick brown fox jumps over the lazy dog</Heading>
+<Heading level={3}>The quick brown fox jumps over the lazy dog</Heading>
+<Heading level={4}>The quick brown fox jumps over the lazy dog</Heading>
+<Heading level={5}>The quick brown fox jumps over the lazy dog again</Heading>
+<Heading level={6}>The quick brown fox jumps over the lazy dog again</Heading>
+```
+
+### `size`
+
+```astro live
+---
+import Heading from 'fulldev-ui/components/Heading.astro'
+---
+
+<Heading size="sm">The quick brown fox jumps over the lazy dog</Heading>
+<Heading size="md">The quick brown fox jumps over the lazy dog</Heading>
+<Heading size="lg">The quick brown fox jumps</Heading>
+```
+
+### `text`
+
+```astro live
+---
+import Heading from 'fulldev-ui/components/Heading.astro'
+---
+
+<Heading text="The quick brown fox jumps" />
+```

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

@@ -0,0 +1,48 @@
+---
+_layout: doc
+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,25 @@
+---
+_layout: doc
+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,40 @@
+---
+_layout: doc
+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

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: Label
 ---
 
@@ -22,20 +21,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/{typography → docs/components}/link.mdx

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: Link
 ---
 
@@ -13,7 +12,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 +21,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,99 @@
+---
+_layout: doc
+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,44 @@
+---
+_layout: doc
+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,36 @@
+---
+_layout: doc
+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,89 @@
+---
+_layout: doc
+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/prose.mdx

@@ -0,0 +1,36 @@
+---
+_layout: doc
+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,76 @@
+---
+_layout: doc
+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}
+/>
+```

package/src/content/pages/{base → docs/components}/section.mdx

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: Section
 ---
 
@@ -25,7 +24,7 @@ import Section from 'fulldev-ui/components/Section.astro'
       text: 'Installation',
       contrast: true,
     },
-    { variant: 'secondary', href: '/structure/split', text: 'Component' },
+    { variant: 'secondary', href: '#', text: 'Component' },
   ]}
   image={'/images/placeholder-landscape.webp'}
 />

package/src/content/pages/{base → docs/components}/select.mdx

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: Select
 ---
 
@@ -47,12 +46,3 @@ import Select from 'fulldev-ui/components/Select.astro'
 <Select size="md" options={['Option 1', 'Option 2']} />
 <Select size="lg" options={['Option 1', 'Option 2']} />
 ```
-
-```astro live
----
-import Select from 'fulldev-ui/components/Select.astro'
----
-
-<Select color="base" options={['Option 1', 'Option 2']} />
-<Select color="brand" options={['Option 1', 'Option 2']} />
-```