fulldev-ui 0.4.32 → 0.5.0-beta-16

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

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Input
 ---
@@ -55,13 +54,3 @@ import Input from 'fulldev-ui/components/Input.astro'
 <Input color="base" name="name" />
 <Input color="brand" name="name" />
 ```
-
-```astro live
----
-import Input from 'fulldev-ui/components/Input.astro'
----
-
-<Input radius="none" name="name" />
-<Input radius="auto" name="name" />
-<Input radius="full" name="name" />
-```

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

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Rating
 ---
@@ -14,12 +13,7 @@ import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
 import Rating from 'fulldev-ui/components/Rating.astro'
 ---
 
-<Rating
-  avatar="/images/avatars/1.jpeg"
-  label="John Doe"
-  value={4}
-  color="brand"
-/>
+<Rating avatar="avatar-1.jpeg" label="John Doe" value={4} color="brand" />
 ```
 
 ## Props
@@ -34,12 +28,7 @@ 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',
-  ]}
+  avatars={['avatar-1.jpeg', 'avatar-2.jpeg', 'avatar-3.jpeg', 'avatar-4.jpeg']}
   label="5.0 out of 86 reviews"
   value={5}
   color="brand"

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

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Section
 ---
@@ -28,7 +27,7 @@ import Section from 'fulldev-ui/components/Section.astro'
     },
     { variant: 'secondary', href: '/structure/split', text: 'Component' },
   ]}
-  image={{ src: '/images/placeholder-landscape.webp' }}
+  image={'/images/placeholder-landscape.webp'}
 />
 ```
 

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

@@ -1,16 +1,7 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Select
-
-example:
-  label: Select
-  name: select
-  placeholder: Select an option
-  options:
-    - Option 1
-    - Option 2
 ---
 
 # Select
@@ -65,13 +56,3 @@ 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

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Table
 ---
@@ -105,29 +104,3 @@ import Table from 'fulldev-ui/components/Table.astro'
   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

@@ -1,13 +1,7 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Textarea
-
-example:
-  name: textarea
-  placeholder: Write a message..
-  label: Textarea
 ---
 
 # Textarea
@@ -62,12 +56,3 @@ 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/base/theme-select.mdx

@@ -0,0 +1,15 @@
+---
+presets: [docs]
+
+title: ThemeSelect
+---
+
+# ThemeSelect
+
+```astro live
+---
+import ThemeSelect from 'fulldev-ui/components/ThemeSelect.astro'
+---
+
+<ThemeSelect />
+```

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

@@ -1,8 +1,7 @@
 ---
-_layout: BlockLayout
+presets: [docs, blocks]
 
 title: Categories
-image: /images/blocks/categories.png
 ---
 
 ```astro live
@@ -14,7 +13,7 @@ import Categories from 'fulldev-ui/blocks/Categories.astro'
   heading="Lorem ipsum dolor sit"
   text="Lorem ipsum dolor sit amet consectetur adipisicing."
   position="inset"
-  frame="panel"
+  panel
   size="sm"
   cards={[
     {
@@ -45,7 +44,6 @@ import Categories from 'fulldev-ui/blocks/Categories.astro'
   heading="Lorem ipsum dolor sit"
   text="Lorem ipsum dolor sit amet consectetur adipisicing."
   position="background"
-  ratio="square"
   cards={[
     {
       heading: 'Lorem ipsum',
@@ -110,7 +108,7 @@ import Categories from 'fulldev-ui/blocks/Categories.astro'
   heading="Lorem ipsum dolor sit"
   buttons={[{ text: 'Lorem ipsum', href: '#' }]}
   position="inset"
-  frame="panel"
+  panel
   size="sm"
   structure="carousel"
   cards={[

package/src/content/pages/blocks/{footer.mdx → _footer.mdx}

@@ -1,8 +1,7 @@
 ---
-_layout: BlockLayout
+presets: [docs, blocks]
 
 title: Footer
-image: /images/blocks/footer.png
 ---
 
 ```astro live
@@ -34,7 +33,7 @@ import Footer from 'fulldev-ui/components/Footer.astro'
 <Footer
   heading="Fulldev UI"
   text="Rapidly build content-driven websites."
-  frame="panel"
+  panel
   columns={[
     {
       heading: 'Pages',
@@ -56,7 +55,6 @@ import Footer from 'fulldev-ui/components/Footer.astro'
 <Footer
   heading="Fulldev UI"
   text="Rapidly build content-driven websites."
-  frame="none"
   columns={[
     {
       heading: 'Pages',

package/src/content/pages/blocks/{header.mdx → _header.mdx}

@@ -1,8 +1,7 @@
 ---
-_layout: BlockLayout
+presets: [docs, blocks]
 
 title: Header
-image: /images/blocks/header.png
 ---
 
 ```astro live
@@ -31,7 +30,6 @@ import Header from 'fulldev-ui/components/Header.astro'
       contrast: true,
     },
   ]}
-  frame="fill"
   position="relative"
   drawer={[
     {
@@ -86,7 +84,6 @@ import Header from 'fulldev-ui/components/Header.astro'
       target: '_blank',
     },
   ]}
-  frame="fill"
   position="relative"
 />
 ```
@@ -122,7 +119,7 @@ import Header from 'fulldev-ui/components/Header.astro'
       contrast: true,
     },
   ]}
-  frame="panel"
+  panel
   position="relative"
 />
 ```
@@ -153,7 +150,6 @@ import Header from 'fulldev-ui/components/Header.astro'
       contrast: true,
     },
   ]}
-  frame="fill"
   position="relative"
   color="brand"
 />
@@ -185,7 +181,6 @@ import Header from 'fulldev-ui/components/Header.astro'
       contrast: true,
     },
   ]}
-  frame="fill"
   position="relative"
   color="brand"
 />

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

@@ -1,8 +1,7 @@
 ---
-_layout: BlockLayout
+presets: [docs, blocks]
 
 title: Jobs
-image: /images/blocks/jobs.png
 ---
 
 ```astro live

package/src/content/pages/blocks/{prices.mdx → _prices.mdx}

@@ -1,8 +1,7 @@
 ---
-_layout: BlockLayout
+presets: [docs, blocks]
 
 title: Prices
-image: /images/blocks/prices.png
 ---
 
 ```astro live
@@ -11,7 +10,6 @@ import Prices from 'fulldev-ui/blocks/Prices.astro'
 ---
 
 <Prices
-  variant="subtle"
   heading="Choose the plan that suits you"
   text="Our plans are designed to meet the requirements of both beginners and advanced users."
   cards={[
@@ -52,10 +50,10 @@ import Prices from 'fulldev-ui/blocks/Prices.astro'
     value: 5,
     label: '100+ happy customers',
     avatars: [
-      '/images/avatars/1.jpeg',
-      '/images/avatars/2.jpeg',
-      '/images/avatars/3.jpeg',
-      '/images/avatars/4.jpeg',
+      'avatar-1.jpeg',
+      'avatar-2.jpeg',
+      'avatar-3.jpeg',
+      'avatar-4.jpeg',
     ],
   }}
   heading="Flexible Pricing Options"

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

@@ -1,8 +1,7 @@
 ---
-_layout: BlockLayout
+presets: [docs, blocks]
 
 title: Product
-image: /images/blocks/product.png
 ---
 
 ```astro live
@@ -14,8 +13,79 @@ import Product from 'fulldev-ui/blocks/Product.astro'
   heading="Basic Tee"
   price={48}
   rating={5}
-  image="/images/placeholder-landscape.webp"
-  buttons={[{ text: 'Add to cart' }]}
+  image="placeholder-landscape.webp"
+  form={{ submit: 'Add to cart' }}
+  description="Oversized white tee made of 100% cotton."
+  list={[
+    'Shortsleeve',
+    'Ribbed collar',
+    'Runs large',
+    'Unisex',
+    'Material: 100% cotton',
+    'Imported',
+  ]}
+/>
+```
+
+```astro live
+---
+import Product from 'fulldev-ui/blocks/Product.astro'
+---
+
+<Product
+  heading="Basic Tee"
+  price={48}
+  rating={5}
+  images={[
+    '/images/blocks/colleagues.png',
+    '/images/blocks/content.png',
+    '/images/blocks/cta.png',
+    '/images/blocks/features.png',
+    '/images/blocks/footer.png',
+    '/images/blocks/header.png',
+    '/images/blocks/hero.png',
+    '/images/blocks/intro.png',
+    '/images/blocks/posts.png',
+    '/images/blocks/prices.png',
+    '/images/blocks/reviews.png',
+  ]}
+  form={{ submit: 'Add to cart' }}
+  description="Oversized white tee made of 100% cotton."
+  list={[
+    'Shortsleeve',
+    'Ribbed collar',
+    'Runs large',
+    'Unisex',
+    'Material: 100% cotton',
+    'Imported',
+  ]}
+/>
+```
+
+```astro live
+---
+import Product from 'fulldev-ui/blocks/Product.astro'
+---
+
+<Product
+  heading="Basic Tee"
+  price={48}
+  rating={5}
+  images={[
+    '/images/blocks/colleagues.png',
+    '/images/blocks/content.png',
+    '/images/blocks/cta.png',
+    '/images/blocks/features.png',
+    '/images/blocks/footer.png',
+    '/images/blocks/header.png',
+    '/images/blocks/hero.png',
+    '/images/blocks/intro.png',
+    '/images/blocks/posts.png',
+    '/images/blocks/prices.png',
+    '/images/blocks/reviews.png',
+  ]}
+  gallery="vertical"
+  form={{ submit: 'Add to cart' }}
   description="Oversized white tee made of 100% cotton."
   list={[
     'Shortsleeve',

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

@@ -1,8 +1,7 @@
 ---
-_layout: BlockLayout
+presets: [docs, blocks]
 
 title: Products
-image: /images/blocks/products.png
 ---
 
 ```astro live

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

@@ -1,5 +1,5 @@
 ---
-_layout: BlockLayout
+presets: [docs, blocks]
 
 title: Stats
 ---

package/src/content/pages/blocks/{_banner.mdx → banner.mdx}

@@ -1,5 +1,5 @@
 ---
-_layout: BlockLayout
+presets: [docs, blocks]
 
 title: Banner
 ---
@@ -9,5 +9,5 @@ title: Banner
 import Banner from 'fulldev-ui/blocks/Banner.astro'
 ---
 
-<Banner text="New feature: Customizable themes now available!" icon="paint" />
+<Banner text="This is a banner" />
 ```

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

@@ -1,8 +1,7 @@
 ---
-_layout: BlockLayout
+presets: [docs, blocks]
 
 title: Colleagues
-image: /images/blocks/colleagues.png
 ---
 
 ```astro live
@@ -14,26 +13,25 @@ import Colleagues from 'fulldev-ui/blocks/Colleagues.astro'
   align="start"
   heading="Meet the team"
   text="Our team is made up of experienced professionals who are dedicated to helping you achieve your goals."
-  frame="panel"
-  position="inset"
+  panel
   cards={[
     {
-      image: '/images/avatars/500/1.jpeg',
+      image: 'avatar-1.jpeg',
       heading: 'John Doe',
       text: 'Ceo & Founder of ACME.',
     },
     {
-      image: '/images/avatars/500/2.jpeg',
+      image: 'avatar-2.jpeg',
       heading: 'Jane Doe',
       text: 'Manager of ACME.',
     },
     {
-      image: '/images/avatars/500/3.jpeg',
+      image: 'avatar-3.jpeg',
       heading: 'John Smith',
       text: 'Developer of ACME.',
     },
     {
-      image: '/images/avatars/500/4.jpeg',
+      image: 'avatar-4.jpeg',
       heading: 'Jane Smith',
       text: 'Developer of ACME.',
     },

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

@@ -0,0 +1,69 @@
+---
+presets: [docs, blocks]
+
+title: Contact
+---
+
+```astro live
+---
+import Contact from 'fulldev-ui/blocks/Contact.astro'
+---
+
+<Contact
+  heading="Contact us"
+  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+  tagline="Get in touch"
+  channels={[
+    {
+      type: 'tel',
+      heading: 'Phone',
+      text: '123-456-7890',
+      icon: 'phone',
+      href: 'tel:123-456-7890',
+    },
+    {
+      type: 'email',
+      heading: 'Email',
+      text: 'contact@example.com',
+      icon: 'mail',
+      href: 'mailto:contact@example.com',
+    },
+    {
+      type: 'address',
+      heading: 'Address',
+      text: '1234 Main St, Springfield, IL 62701',
+      icon: 'map-pin',
+    },
+  ]}
+  socials={['https://facebook.com/example', 'https://instagram.com/example']}
+  form={{
+    action: '/thank-you',
+    fields: [
+      {
+        type: 'text',
+        name: 'name',
+        label: 'Name',
+        required: true,
+      },
+      {
+        type: 'email',
+        name: 'email',
+        label: 'Email',
+        required: true,
+      },
+      {
+        type: 'tel',
+        name: 'phone',
+        label: 'Phone',
+      },
+      {
+        type: 'textarea',
+        name: 'message',
+        label: 'Message',
+      },
+    ],
+    button: 'Send message',
+  }}
+  image="/images/placeholder-landscape.webp"
+/>
+```

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

@@ -1,8 +1,7 @@
 ---
-_layout: BlockLayout
+presets: [docs, blocks]
 
 title: Content
-image: /images/blocks/content.png
 ---
 
 ```astro live
@@ -72,23 +71,6 @@ import Content from 'fulldev-ui/blocks/Content.astro'
 import Content from 'fulldev-ui/blocks/Content.astro'
 ---
 
-<Content
-  label="Lorem ipsum dolor"
-  heading="Lorem ipsum dolor sit"
-  text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil. Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada."
-  buttons={[{ text: 'Lorem ipsum', href: '' }]}
-  image="/images/placeholder-landscape.webp"
-  frame="panel"
-  variant="subtle"
-  position="inset"
-/>
-```
-
-```astro live
----
-import Content from 'fulldev-ui/blocks/Content.astro'
----
-
 <Content
   label="Lorem ipsum dolor"
   heading="Lorem ipsum dolor sit"

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

@@ -1,8 +1,7 @@
 ---
-_layout: BlockLayout
+presets: [docs, blocks]
 
 title: CTA
-image: /images/blocks/cta.png
 ---
 
 ```astro live
@@ -131,7 +130,6 @@ import Cta from 'fulldev-ui/blocks/Cta.astro'
     { text: 'Lorem ipsum', href: '' },
   ]}
   structure="spread"
-  frame="fill"
 />
 ```
 
@@ -147,7 +145,6 @@ import Cta from 'fulldev-ui/blocks/Cta.astro'
     { text: 'Lorem ipsum', href: '' },
   ]}
   structure="spread"
-  frame="none"
   color="brand"
 />
 ```
@@ -157,27 +154,6 @@ import Cta from 'fulldev-ui/blocks/Cta.astro'
 import Cta from 'fulldev-ui/blocks/Cta.astro'
 ---
 
-<Cta
-  label="Lorem ipsum dolor"
-  heading="Lorem ipsum dolor sit"
-  text="Lorem ipsum dolor sit amet consectetur ades"
-  buttons={[
-    { text: 'Lorem ipsum', href: '' },
-    { text: 'Lorem ipsum', href: '' },
-  ]}
-  position="inset"
-  structure="split"
-  align="center"
-  color="brand"
-  image="/images/placeholder-landscape.webp"
-/>
-```
-
-```astro live
----
-import Cta from 'fulldev-ui/blocks/Cta.astro'
----
-
 <Cta
   heading="Lorem ipsum dolor sit"
   text="Lorem ipsum dolor sit amet consectetur ades"
@@ -186,6 +162,7 @@ import Cta from 'fulldev-ui/blocks/Cta.astro'
     { text: 'Lorem ipsum', href: '' },
   ]}
   position="background"
+  theme="dark"
   align="center"
   image="/images/placeholder-landscape-dark.png"
 />