fulldev-ui 0.3.36 → 0.4.0-beta.0

package/src/content/pages/base/rating.mdx

@@ -0,0 +1,66 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Rating
+---
+
+# Rating
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Rating from 'fulldev-ui/components/Rating.astro'
+---
+
+<Rating
+  avatar="/images/avatars/1.jpeg"
+  label="John Doe"
+  value={4}
+  color="brand"
+/>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Rating from 'fulldev-ui/components/Rating.astro'
+---
+
+<Rating
+  avatars={[
+    '/images/avatars/1.jpeg',
+    '/images/avatars/2.jpeg',
+    '/images/avatars/3.jpeg',
+    '/images/avatars/4.jpeg',
+  ]}
+  label="5.0 out of 86 reviews"
+  value={5}
+  color="brand"
+/>
+```
+
+```astro live
+---
+import Rating from 'fulldev-ui/components/Rating.astro'
+---
+
+<Rating value={3} color="base" />
+<Rating value={5} color="brand" />
+```
+
+```astro live
+---
+import Rating from 'fulldev-ui/components/Rating.astro'
+---
+
+<Rating value={5} size="sm" />
+<Rating value={5} size="md" />
+<Rating value={5} size="lg" />
+```

package/src/content/pages/base/section.mdx

@@ -0,0 +1,79 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Section
+---
+
+# Section
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Row from 'fulldev-ui/components/Row.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Text from 'fulldev-ui/components/Text.astro'
+---
+
+<Section>
+  <Heading> A section with equal columns </Heading>
+  <Text>
+    On mobile it's a single column, of course. All without having to think about
+    responsiveness. It just works. Have a look at the code, it's down below.
+  </Text>
+  <Row>
+    <Button href="/overview/installation">Installation</Button>
+    <Button variant="soft" href="/structure/split"> Component </Button>
+  </Row>
+  <Image src="/images/placeholder-landscape.webp" />
+</Section>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Text from 'fulldev-ui/components/Text.astro'
+---
+
+<Section variant="ghost" frame="panel">
+  <Heading> A section with a ghost variant </Heading>
+  <Text> This section has a ghost variant. </Text>
+  <Button> Button </Button>
+</Section>
+
+<Section variant="subtle" frame="panel">
+  <Heading> A section with a subtle variant </Heading>
+  <Text> This section has a subtle variant. </Text>
+  <Button> Button </Button>
+</Section>
+
+<Section variant="outline" frame="panel">
+  <Heading> A section with an outline variant </Heading>
+  <Text> This section has an outline variant. </Text>
+  <Button> Button </Button>
+</Section>
+
+<Section variant="soft" frame="panel">
+  <Heading> A section with a soft variant </Heading>
+  <Text> This section has a soft variant. </Text>
+  <Button> Button </Button>
+</Section>
+
+<Section variant="surface" frame="panel">
+  <Heading> A section with a surface variant </Heading>
+  <Text> This section has a surface variant. </Text>
+  <Button> Button </Button>
+</Section>
+```

package/src/content/pages/base/select.mdx

@@ -0,0 +1,77 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Select
+
+example:
+  label: Select
+  name: select
+  placeholder: Select an option
+  options:
+    - Option 1
+    - Option 2
+---
+
+# Select
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Select from 'fulldev-ui/components/Select.astro'
+---
+
+<Select
+  label="Select"
+  placeholder="Select an option"
+  options={['Option 1', 'Option 2']}
+/>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Select from 'fulldev-ui/components/Select.astro'
+---
+
+<Select
+  label="Select"
+  placeholder="Select an option"
+  options={['Option 1', 'Option 2']}
+/>
+```
+
+```astro live
+---
+import Select from 'fulldev-ui/components/Select.astro'
+---
+
+<Select size="sm" options={['Option 1', 'Option 2']} />
+<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']} />
+```
+
+```astro live
+---
+import Select from 'fulldev-ui/components/Select.astro'
+---
+
+<Select radius="none" options={['Option 1', 'Option 2']} />
+<Select radius="auto" options={['Option 1', 'Option 2']} />
+<Select radius="full" options={['Option 1', 'Option 2']} />
+```

package/src/content/pages/base/table.mdx

@@ -0,0 +1,133 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Table
+---
+
+# Table
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Table from 'fulldev-ui/components/Table.astro'
+---
+
+<Table
+  header={['Product', 'Color', 'Quantity']}
+  body={[
+    ['Apple', 'Green', '2'],
+    ['Banana', 'Yellow', '3'],
+  ]}
+  footer={[{ text: 'Total', colspan: '2' }, '5']}
+/>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Table from 'fulldev-ui/components/Table.astro'
+---
+
+<Table
+  header={['Product', 'Quantity']}
+  body={[
+    ['Apple', '2'],
+    ['Banana', '3'],
+  ]}
+  footer={['Total', '5']}
+/>
+```
+
+```astro live
+---
+import Table from 'fulldev-ui/components/Table.astro'
+---
+
+<Table
+  color="base"
+  header={['Product', 'Quantity']}
+  body={[
+    ['Apple', '2'],
+    ['Banana', '3'],
+  ]}
+  footer={['Total', '5']}
+/>
+
+<Table
+  color="brand"
+  header={['Product', 'Quantity']}
+  body={[
+    ['Apple', '2'],
+    ['Banana', '3'],
+  ]}
+  footer={['Total', '5']}
+/>
+```
+
+```astro live
+---
+import Table from 'fulldev-ui/components/Table.astro'
+---
+
+<Table
+  size="sm"
+  header={['Product', 'Quantity']}
+  body={[
+    ['Apple', '2'],
+    ['Banana', '3'],
+  ]}
+  footer={['Total', '5']}
+/>
+
+<Table
+  size="md"
+  header={['Product', 'Quantity']}
+  body={[
+    ['Apple', '2'],
+    ['Banana', '3'],
+  ]}
+  footer={['Total', '5']}
+/>
+<Table
+  size="lg"
+  header={['Product', 'Quantity']}
+  body={[
+    ['Apple', '2'],
+    ['Banana', '3'],
+  ]}
+  footer={['Total', '5']}
+/>
+```
+
+```astro live
+---
+import Table from 'fulldev-ui/components/Table.astro'
+---
+
+<Table
+  radius="none"
+  header={['Product', 'Quantity']}
+  body={[
+    ['Apple', '2'],
+    ['Banana', '3'],
+  ]}
+  footer={['Total', '5']}
+/>
+
+<Table
+  radius="auto"
+  header={['Product', 'Quantity']}
+  body={[
+    ['Apple', '2'],
+    ['Banana', '3'],
+  ]}
+  footer={['Total', '5']}
+/>
+```

package/src/content/pages/base/textarea.mdx

@@ -0,0 +1,73 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Textarea
+
+example:
+  name: textarea
+  placeholder: Write a message..
+  label: Textarea
+---
+
+# Textarea
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Textarea from 'fulldev-ui/components/Textarea.astro'
+---
+
+<Textarea name="message" placeholder="Write a message.." label="Textarea" />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Textarea from 'fulldev-ui/components/Textarea.astro'
+---
+
+<Textarea size="sm" name="message" placeholder="name" />
+<Textarea size="md" name="message" placeholder="name" />
+<Textarea size="lg" name="message" placeholder="name" />
+```
+
+```astro live
+---
+import Textarea from 'fulldev-ui/components/Textarea.astro'
+---
+
+<Textarea label="Message" name="message" placeholder="name" />
+```
+
+```astro live
+---
+import Textarea from 'fulldev-ui/components/Textarea.astro'
+---
+
+<Textarea label="Message" name="message" placeholder="name" />
+```
+
+```astro live
+---
+import Textarea from 'fulldev-ui/components/Textarea.astro'
+---
+
+<Textarea color="base" name="message" placeholder="name" />
+<Textarea color="brand" name="message" placeholder="name" />
+```
+
+```astro live
+---
+import Textarea from 'fulldev-ui/components/Textarea.astro'
+---
+
+<Textarea radius="none" name="message" placeholder="name" />
+<Textarea radius="auto" name="message" placeholder="name" />
+```

package/src/content/pages/blocks/_banner.mdx

@@ -0,0 +1,13 @@
+---
+_layout: BlockLayout
+
+title: Banner
+---
+
+```astro live
+---
+import Banner from 'fulldev-ui/blocks/Banner.astro'
+---
+
+<Banner text="New feature: Customizable themes now available!" icon="paint" />
+```

package/src/content/pages/blocks/_categories.mdx

@@ -0,0 +1,149 @@
+---
+_layout: BlockLayout
+
+title: Categories
+image: /images/blocks/categories.png
+---
+
+```astro live
+---
+import Categories from 'fulldev-ui/blocks/Categories.astro'
+---
+
+<Categories
+  heading="Lorem ipsum dolor sit"
+  text="Lorem ipsum dolor sit amet consectetur adipisicing."
+  position="inset"
+  frame="panel"
+  size="sm"
+  cards={[
+    {
+      heading: 'Lorem ipsum',
+      image: '/images/placeholder-landscape.webp',
+      href: '#',
+    },
+    {
+      heading: 'Lorem ipsum',
+      image: '/images/placeholder-landscape.webp',
+      href: '#',
+    },
+    {
+      heading: 'Lorem ipsum',
+      image: '/images/placeholder-landscape.webp',
+      href: '#',
+    },
+  ]}
+/>
+```
+
+```astro live
+---
+import Categories from 'fulldev-ui/blocks/Categories.astro'
+---
+
+<Categories
+  heading="Lorem ipsum dolor sit"
+  text="Lorem ipsum dolor sit amet consectetur adipisicing."
+  position="background"
+  ratio="square"
+  cards={[
+    {
+      heading: 'Lorem ipsum',
+      image: '/images/placeholder-landscape.webp',
+      href: '#',
+    },
+    {
+      heading: 'Lorem ipsum',
+      image: '/images/placeholder-landscape.webp',
+      href: '#',
+    },
+    {
+      heading: 'Lorem ipsum',
+      image: '/images/placeholder-landscape.webp',
+      href: '#',
+    },
+  ]}
+/>
+```
+
+```astro live
+---
+import Categories from 'fulldev-ui/blocks/Categories.astro'
+---
+
+<Categories
+  heading="Lorem ipsum dolor sit"
+  text="Lorem ipsum dolor sit amet consectetur adipisicing."
+  position="background"
+  structure="bento"
+  cards={[
+    {
+      heading: 'Lorem ipsum',
+      image: '/images/placeholder-landscape.webp',
+      href: '#',
+    },
+    {
+      heading: 'Lorem ipsum',
+      image: '/images/placeholder-landscape.webp',
+      href: '#',
+    },
+    {
+      heading: 'Lorem ipsum',
+      image: '/images/placeholder-landscape.webp',
+      href: '#',
+    },
+    {
+      heading: 'Lorem ipsum',
+      image: '/images/placeholder-landscape.webp',
+      href: '#',
+    },
+  ]}
+/>
+```
+
+```astro live
+---
+import Categories from 'fulldev-ui/blocks/Categories.astro'
+---
+
+<Categories
+  heading="Lorem ipsum dolor sit"
+  buttons={[{ text: 'Lorem ipsum', href: '#' }]}
+  position="inset"
+  frame="panel"
+  size="sm"
+  structure="carousel"
+  cards={[
+    {
+      heading: 'Lorem ipsum',
+      image: '/images/placeholder-landscape.webp',
+      href: '#',
+    },
+    {
+      heading: 'Lorem ipsum',
+      image: '/images/placeholder-landscape.webp',
+      href: '#',
+    },
+    {
+      heading: 'Lorem ipsum',
+      image: '/images/placeholder-landscape.webp',
+      href: '#',
+    },
+    {
+      heading: 'Lorem ipsum',
+      image: '/images/placeholder-landscape.webp',
+      href: '#',
+    },
+    {
+      heading: 'Lorem ipsum',
+      image: '/images/placeholder-landscape.webp',
+      href: '#',
+    },
+    {
+      heading: 'Lorem ipsum',
+      image: '/images/placeholder-landscape.webp',
+      href: '#',
+    },
+  ]}
+/>
+```

package/src/content/pages/blocks/_jobs.mdx

@@ -0,0 +1,37 @@
+---
+_layout: BlockLayout
+
+title: Jobs
+image: /images/blocks/jobs.png
+---
+
+```astro live
+---
+import Jobs from 'fulldev-ui/blocks/Jobs.astro'
+---
+
+<Jobs
+  heading="Open Positions"
+  text="Join our team and help build the future of web development."
+  cards={[
+    {
+      heading: 'Frontend Developer',
+      label: 'Full-time',
+      text: 'We are looking for an experienced frontend developer to join our UI team and help create stunning user interfaces.',
+      image: '/images/placeholder-landscape.webp',
+    },
+    {
+      heading: 'UX Designer',
+      label: 'Full-time',
+      text: 'Join our design team to create intuitive and visually appealing user experiences for our products.',
+      image: '/images/placeholder-landscape.webp',
+    },
+    {
+      heading: 'Backend Engineer',
+      label: 'Full-time',
+      text: 'Help us build robust and scalable backend systems to support our growing user base.',
+      image: '/images/placeholder-landscape.webp',
+    },
+  ]}
+/>
+```

package/src/content/pages/blocks/_product.mdx

@@ -0,0 +1,29 @@
+---
+_layout: BlockLayout
+
+title: Product
+image: /images/blocks/product.png
+---
+
+```astro live
+---
+import Product from 'fulldev-ui/blocks/Product.astro'
+---
+
+<Product
+  heading="Basic Tee"
+  price={48}
+  rating={5}
+  image="/images/placeholder-landscape.webp"
+  buttons={[{ text: 'Add to cart' }]}
+  description="Oversized white tee made of 100% cotton."
+  list={[
+    'Shortsleeve',
+    'Ribbed collar',
+    'Runs large',
+    'Unisex',
+    'Material: 100% cotton',
+    'Imported',
+  ]}
+/>
+```