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

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']} />
-```

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

@@ -0,0 +1,94 @@
+---
+_layout: doc
+title: Social
+---
+
+# Social
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Social from 'fulldev-ui/components/Social.astro'
+---
+
+<Social href="https://x.com/silveltm" />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `href`
+
+If possible, the platform `icon` will be automatically set based on the `href`. The following platforms are supported:
+
+- X
+- Facebook
+- Instagram
+- LinkedIn
+- YouTube
+- TikTok
+- Twitch
+- GitHub
+- Discord
+
+```astro live
+---
+import Social from 'fulldev-ui/components/Social.astro'
+---
+
+<Social href="https://x.com/silveltm" />
+<Social href="https://www.linkedin.com/in/silveltman/" />
+<Social href="https://discord.gg/vXZqMbadm8" />
+<Social href="https://github.com/fulldotdev/ui" />
+```
+
+### `icon`
+
+You can also manually set the `icon`, in which case this component behaves like a regular `<Button/>`.
+
+```astro live
+---
+import Social from 'fulldev-ui/components/Social.astro'
+---
+
+<Social icon="confetti" href="https://x.com/silveltm" />
+```
+
+### `variant`
+
+```astro live
+---
+import Social from 'fulldev-ui/components/Social.astro'
+---
+
+<Social href="https://x.com/silveltm" variant="primary" />
+<Social href="https://x.com/silveltm" variant="secondary" />
+<Social href="https://x.com/silveltm" variant="outline" />
+<Social href="https://x.com/silveltm" variant="ghost" />
+```
+
+### `size`
+
+```astro live
+---
+import Social from 'fulldev-ui/components/Social.astro'
+---
+
+<Social href="https://x.com/silveltm" size="sm">Small</Social>
+<Social href="https://x.com/silveltm" size="md">Medium</Social>
+<Social href="https://x.com/silveltm" size="lg">Large</Social>
+```
+
+### `text`
+
+```astro live
+---
+import Social from 'fulldev-ui/components/Social.astro'
+---
+
+<Social href="https://x.com/silveltm" text="Follow" />
+```

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

@@ -0,0 +1,102 @@
+---
+_layout: doc
+title: Socials
+---
+
+# Socials
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Socials from 'fulldev-ui/components/Socials.astro'
+---
+
+<Socials
+  socials={[
+    'https://x.com/silveltm',
+    'https://www.linkedin.com/in/silveltman/',
+    'https://discord.gg/vXZqMbadm8',
+    'https://github.com/fulldotdev/ui',
+  ]}
+/>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `variant`
+
+```astro live
+---
+import Socials from 'fulldev-ui/components/Socials.astro'
+---
+
+<Socials
+  variant="primary"
+  socials={[
+    'https://x.com/silveltm',
+    'https://www.linkedin.com/in/silveltman/',
+    'https://discord.gg/vXZqMbadm8',
+    'https://github.com/fulldotdev/ui',
+  ]}
+/>
+
+<Socials
+  variant="secondary"
+  socials={[
+    'https://x.com/silveltm',
+    'https://www.linkedin.com/in/silveltman/',
+    'https://discord.gg/vXZqMbadm8',
+    'https://github.com/fulldotdev/ui',
+  ]}
+/>
+
+<Socials
+  variant="outline"
+  socials={[
+    'https://x.com/silveltm',
+    'https://www.linkedin.com/in/silveltman/',
+    'https://discord.gg/vXZqMbadm8',
+    'https://github.com/fulldotdev/ui',
+  ]}
+/>
+```
+
+### `size`
+
+```astro live
+---
+import Socials from 'fulldev-ui/components/Socials.astro'
+---
+
+<Socials
+  variant="secondary"
+  size="sm"
+  socials={[
+    'https://x.com/silveltm',
+    'https://www.linkedin.com/in/silveltman/',
+  ]}
+/>
+
+<Socials
+  variant="secondary"
+  size="md"
+  socials={[
+    'https://x.com/silveltm',
+    'https://www.linkedin.com/in/silveltman/',
+  ]}
+/>
+
+<Socials
+  variant="secondary"
+  size="lg"
+  socials={[
+    'https://x.com/silveltm',
+    'https://www.linkedin.com/in/silveltman/',
+  ]}
+/>
+```

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

@@ -0,0 +1,34 @@
+---
+_layout: doc
+title: Switch
+---
+
+# Switch
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Switch from 'fulldev-ui/components/Switch.astro'
+---
+
+<Switch label="Switch" />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `size`
+
+```astro live
+---
+import Switch from 'fulldev-ui/components/Switch.astro'
+---
+
+<Switch size="sm" label="Small" />
+<Switch size="md" label="Medium" />
+<Switch size="lg" label="Large" />
+```

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

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: Table
 ---
 
@@ -50,7 +49,6 @@ import Table from 'fulldev-ui/components/Table.astro'
 ---
 
 <Table
-  color="base"
   header={['Product', 'Quantity']}
   body={[
     ['Apple', '2'],
@@ -60,7 +58,6 @@ import Table from 'fulldev-ui/components/Table.astro'
 />
 
 <Table
-  color="brand"
   header={['Product', 'Quantity']}
   body={[
     ['Apple', '2'],

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

@@ -0,0 +1,46 @@
+---
+_layout: doc
+title: Tagline
+---
+
+# Tagline
+
+Text in primary color above a heading.
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+---
+
+<Tagline>Tagline</Tagline>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `size`
+
+```astro live
+---
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+---
+
+<Tagline size="sm">Small</Tagline>
+<Tagline size="md">Medium</Tagline>
+<Tagline size="lg">Large</Tagline>
+```
+
+### `text`
+
+```astro live
+---
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+---
+
+<Tagline text="Tagline" />
+```

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

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

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

@@ -0,0 +1,34 @@
+---
+_layout: doc
+title: Textarea
+---
+
+# Textarea
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Textarea from 'fulldev-ui/components/Textarea.astro'
+---
+
+<Textarea label="Message" name="message" placeholder="Enter your message.." />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `size`
+
+```astro live
+---
+import Textarea from 'fulldev-ui/components/Textarea.astro'
+---
+
+<Textarea size="sm" label="Small" />
+<Textarea size="md" label="Medium" />
+<Textarea size="lg" label="Large" />
+```