fulldev-ui 0.6.0-beta.8 → 0.6.0

package/src/blocks/Content4.astro

@@ -1,68 +1,45 @@
 ---
-// Heading etc left, image and content right, sticky
-import type { ComponentProps } from 'astro/types'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Group from 'fulldev-ui/structures/Group.astro'
 import Prose from 'fulldev-ui/structures/Prose.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
+import Split from 'fulldev-ui/structures/Split.astro'
 
-interface Props extends ComponentProps<typeof Section> {
-  tagline?: string | undefined
-  heading?: string | undefined
-  paragraph?: string | undefined
-  content?: string | undefined
-  image?: ComponentProps<typeof Image> | undefined
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-}
+interface Props extends BlockSchema {}
 
-const { tagline, heading, paragraph, buttons, image, content, ...rest } =
+const { depth, tagline, heading, paragraph, buttons, image, content } =
   Astro.props
 ---
 
-<Section
-  class:list="content-4"
-  {...rest}
->
+<Section class="content-4">
   <Container>
-    <Prose>
-      <Tagline text={tagline} />
-      <Heading
-        as="h2"
-        size="4xl"
-        text={heading}
-      />
-      <Paragraph
-        muted
-        size="lg"
-        text={paragraph}
-      />
-      <Group>
-        <Buttons {buttons} />
-      </Group>
-    </Prose>
-    <Prose>
-      <Image {...image} />
-      <Fragment set:html={content} />
-      <slot />
-    </Prose>
+    <Split align="sticky">
+      <Prose>
+        <Tagline text={tagline} />
+        <Heading
+          text={heading}
+          {depth}
+        />
+        <Paragraph
+          muted
+          size="lg"
+          text={paragraph}
+        />
+        <Group>
+          <Buttons {buttons} />
+        </Group>
+      </Prose>
+      <Prose>
+        <Image {...image} />
+        <Fragment set:html={content} />
+        <slot />
+      </Prose>
+    </Split>
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .content-4 {
-      .container {
-        @apply flex flex-col items-start gap-x-gutter lg:grid lg:grid-cols-2;
-      }
-
-      .prose {
-        @apply lg:sticky lg:top-sticky-16 lg:max-w-xl;
-      }
-    }
-  }
-</style>

package/src/blocks/Content5.astro

@@ -1,40 +1,28 @@
 ---
-// Content in 2 columns
-import type { ComponentProps } from 'astro/types'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Group from 'fulldev-ui/structures/Group.astro'
 import Prose from 'fulldev-ui/structures/Prose.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
 
-interface Props extends ComponentProps<typeof Section> {
-  tagline?: string | undefined
-  heading?: string | undefined
-  paragraph?: string | undefined
-  content?: string | undefined
-  image?: ComponentProps<typeof Image> | undefined
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-}
+interface Props extends BlockSchema {}
 
-const { tagline, heading, paragraph, buttons, image, content, ...rest } =
+const { depth, tagline, heading, paragraph, buttons, image, content } =
   Astro.props
 ---
 
-<Section
-  class:list="content-5"
-  {...rest}
->
-  <Container>
+<Section class="content-5">
+  <Container class="flex flex-col items-start gap-8">
     <Prose>
       <Tagline text={tagline} />
       <Heading
-        as="h2"
-        size="5xl"
         text={heading}
+        {depth}
       />
       <Paragraph
         muted
@@ -42,7 +30,7 @@ const { tagline, heading, paragraph, buttons, image, content, ...rest } =
         text={paragraph}
       />
     </Prose>
-    <Prose class:list="content-5-main">
+    <Prose align="columns">
       <Fragment set:html={content} />
       <slot />
     </Prose>
@@ -52,21 +40,3 @@ const { tagline, heading, paragraph, buttons, image, content, ...rest } =
     <Image {...image} />
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .content-5 {
-      .container {
-        @apply flex flex-col items-start gap-8;
-      }
-
-      .content-5-main {
-        @apply max-w-none break-inside-avoid gap-x-gutter lg:columns-2;
-      }
-
-      .image {
-        @apply rounded-md;
-      }
-    }
-  }
-</style>

package/src/blocks/Content6.astro

@@ -0,0 +1,56 @@
+---
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Toc from 'fulldev-ui/components/Toc.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Group from 'fulldev-ui/structures/Group.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Sidebar from 'fulldev-ui/structures/Sidebar.astro'
+
+interface Props extends BlockSchema {}
+
+const {
+  depth,
+  tagline,
+  heading,
+  paragraph,
+  buttons,
+  image,
+  content,
+  headings,
+} = Astro.props
+---
+
+<Container class="content-6 flex items-start justify-between px-0">
+  <Container class="lg:!max-w-[calc(100%-var(--sidebar-width))]">
+    <Prose class="mx-auto py-8">
+      <Tagline text={tagline} />
+      <Heading
+        text={heading}
+        {depth}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+      <Image {...image} />
+      <Fragment set:html={content} />
+      <slot />
+      <Group>
+        <Buttons {buttons} />
+      </Group>
+    </Prose>
+  </Container>
+  <Sidebar>
+    <Toc
+      size="sm"
+      {heading}
+      {headings}
+    />
+  </Sidebar>
+</Container>

package/src/blocks/Content7.astro

@@ -0,0 +1,64 @@
+---
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Menus from 'fulldev-ui/components/Menus.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Toc from 'fulldev-ui/components/Toc.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Group from 'fulldev-ui/structures/Group.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Sidebar from 'fulldev-ui/structures/Sidebar.astro'
+
+interface Props extends BlockSchema {}
+
+const {
+  depth,
+  tagline,
+  heading,
+  paragraph,
+  buttons,
+  image,
+  content,
+  menus,
+  headings,
+} = Astro.props
+---
+
+<Container class="content-7 flex items-start justify-between px-0">
+  <Sidebar>
+    <Menus
+      size="sm"
+      {menus}
+    />
+  </Sidebar>
+  <Container class="lg:!max-w-[calc(100%-(2*var(--sidebar-width)))]">
+    <Prose class="mx-auto py-8">
+      <Tagline text={tagline} />
+      <Heading
+        text={heading}
+        {depth}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+      <Image {...image} />
+      <Fragment set:html={content} />
+      <slot />
+      <Group>
+        <Buttons {buttons} />
+      </Group>
+    </Prose>
+  </Container>
+  <Sidebar>
+    <Toc
+      size="sm"
+      {heading}
+      {headings}
+    />
+  </Sidebar>
+</Container>

package/src/blocks/Content8.astro

@@ -0,0 +1,47 @@
+---
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Menus from 'fulldev-ui/components/Menus.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Group from 'fulldev-ui/structures/Group.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Sidebar from 'fulldev-ui/structures/Sidebar.astro'
+
+interface Props extends BlockSchema {}
+
+const { depth, tagline, heading, paragraph, buttons, image, content, menus } =
+  Astro.props
+---
+
+<Container class="content-8 flex items-start justify-between px-0">
+  <Sidebar>
+    <Menus
+      size="sm"
+      {menus}
+    />
+  </Sidebar>
+  <Container class="lg:!max-w-[calc(100%-var(--sidebar-width))]">
+    <Prose class="max-w-none py-8">
+      <Tagline text={tagline} />
+      <Heading
+        text={heading}
+        {depth}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+      <Image {...image} />
+      <Fragment set:html={content} />
+      <slot />
+      <Group>
+        <Buttons {buttons} />
+      </Group>
+    </Prose>
+  </Container>
+</Container>

package/src/blocks/Cta1.astro

@@ -1,5 +1,4 @@
 ---
-import type { ComponentProps } from 'astro/types'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
@@ -12,9 +11,10 @@ import Panel from 'fulldev-ui/structures/Panel.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
 import Writeup from 'fulldev-ui/structures/Writeup.astro'
 
-interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+interface Props extends BlockSchema {}
 
 const {
+  depth = 2,
   tagline,
   heading,
   paragraph,
@@ -22,25 +22,22 @@ const {
   button,
   buttons,
   image,
-  ...rest
 } = Astro.props
 ---
 
-<Section
-  class:list="cta-1"
-  {...rest}
->
+<Section class:list="cta-1">
   <Container>
     <Panel>
       <Writeup align="center">
         <Tagline text={tagline} />
         <Heading
-          size="4xl"
+          size="5xl"
           as="h2"
           text={heading}
+          {depth}
         />
         <Paragraph
-          size="lg"
+          size="xl"
           text={paragraph}
         />
         <Fragment set:html={content} />

package/src/blocks/Cta2.astro

@@ -0,0 +1,52 @@
+---
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Group from 'fulldev-ui/structures/Group.astro'
+import Panel from 'fulldev-ui/structures/Panel.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Section from 'fulldev-ui/structures/Section.astro'
+import Split from 'fulldev-ui/structures/Split.astro'
+
+interface Props extends BlockSchema {}
+
+const { depth, tagline, heading, paragraph, buttons, image, content, ...rest } =
+  Astro.props
+---
+
+<Section
+  class="cta-2"
+  {...rest}
+>
+  <Container>
+    <Panel class="p-0">
+      <Split class="items-center">
+        <Prose class="px-4 sm:px-8 lg:px-16">
+          <Tagline text={tagline} />
+          <Heading
+            size="4xl"
+            text={heading}
+            {depth}
+          />
+          <Paragraph
+            size="lg"
+            text={paragraph}
+          />
+          <Fragment set:html={content} />
+          <slot />
+          <Group>
+            <Buttons
+              size="lg"
+              {buttons}
+            />
+          </Group>
+        </Prose>
+        <Image {...image} />
+      </Split>
+    </Panel>
+  </Container>
+</Section>

package/src/blocks/Features1.astro

@@ -1,5 +1,4 @@
 ---
-import type { ComponentProps } from 'astro/types'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
@@ -10,9 +9,9 @@ import Section from 'fulldev-ui/structures/Section.astro'
 import Stack from 'fulldev-ui/structures/Stack.astro'
 import Writeup from 'fulldev-ui/structures/Writeup.astro'
 
-interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+interface Props extends BlockSchema {}
 
-const { tagline, heading, paragraph, cards, ...rest } = Astro.props
+const { depth = 2, tagline, heading, paragraph, cards, ...rest } = Astro.props
 ---
 
 <Section
@@ -26,8 +25,9 @@ const { tagline, heading, paragraph, cards, ...rest } = Astro.props
         text={tagline}
       />
       <Heading
-        size="3xl"
+        size="4xl"
         text={heading}
+        {depth}
       />
       <Paragraph
         size="lg"
@@ -43,6 +43,7 @@ const { tagline, heading, paragraph, cards, ...rest } = Astro.props
               name={icon}
             />
             <Heading
+              depth={(depth + 1) as 3}
               as="h3"
               size="xl"
               text={heading}

package/src/blocks/Features2.astro

@@ -0,0 +1,70 @@
+---
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Icon from 'fulldev-ui/components/Icon.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Matrix from 'fulldev-ui/structures/Matrix.astro'
+import Section from 'fulldev-ui/structures/Section.astro'
+import Writeup from 'fulldev-ui/structures/Writeup.astro'
+
+interface Props extends BlockSchema {}
+
+const { depth = 2, tagline, heading, paragraph, cards, ...rest } = Astro.props
+---
+
+<Section
+  class:list="features-2"
+  {...rest}
+>
+  <Container>
+    <Writeup>
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        size="4xl"
+        text={heading}
+        {depth}
+      />
+      <Paragraph
+        size="lg"
+        text={paragraph}
+      />
+    </Writeup>
+    <Matrix size="sm">
+      {
+        cards?.map(({ icon, heading, paragraph }) => (
+          <Writeup>
+            <Icon
+              size="md"
+              name={icon}
+            />
+            <Heading
+              depth={(depth + 1) as 3}
+              as="h3"
+              text={heading}
+            />
+            <Paragraph text={paragraph} />
+          </Writeup>
+        ))
+      }
+    </Matrix>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .features-2 {
+      .container {
+        @apply flex flex-col gap-12;
+      }
+
+      .icon {
+        @apply text-primary;
+      }
+    }
+  }
+</style>

package/src/blocks/Footer.astro

@@ -1,5 +1,4 @@
 ---
-import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Channels from 'fulldev-ui/components/Channels.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Logo from 'fulldev-ui/components/Logo.astro'
@@ -11,12 +10,9 @@ import Container from 'fulldev-ui/structures/Container.astro'
 import Group from 'fulldev-ui/structures/Group.astro'
 import Writeup from 'fulldev-ui/structures/Writeup.astro'
 
-interface Props extends HTMLAttributes<'footer'>, BlockSchema {
-  as?: HTMLTag
-}
+interface Props extends BlockSchema {}
 
 const {
-  as = 'footer',
   logo,
   heading,
   paragraph,
@@ -31,7 +27,7 @@ const {
 
 <Element
   class:list="footer"
-  {as}
+  as="footer"
   {...rest}
 >
   <Container class:list="footer-container">

package/src/blocks/Header.astro

@@ -1,7 +1,6 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
 // import Button from 'fulldev-ui/components/Button.astro'
-import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Button from 'fulldev-ui/components/Button.astro'
 // import Cart from 'fulldev-ui/components/Cart.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Links from 'fulldev-ui/components/Links.astro'
@@ -14,25 +13,14 @@ import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Drawer from 'fulldev-ui/structures/Drawer.astro'
 
-interface Props extends HTMLAttributes<'header'>, BlockSchema {}
+interface Props extends BlockSchema {}
 
-const {
-  logo,
-  heading,
-  links,
-  socials,
-  menus,
-  search,
-  themer,
-  buttons,
-  cart,
-  ...rest
-} = Astro.props
+const { logo, links, menus, socials, search, themer, button } = Astro.props
 ---
 
 <Element
   class:list="header"
-  {...rest}
+  as="header"
 >
   <Container>
     <Element class:list="header-start">
@@ -53,7 +41,6 @@ const {
           />
         )
       }
-
       <!-- {
         cart && (
           <Cart
@@ -76,11 +63,10 @@ const {
         {socials}
       />
 
-      <Buttons
+      <Button
         size="sm"
-        {buttons}
+        {...button}
       />
-
       <!-- <Button
         class:list="menu-button"
         as="label"
@@ -95,10 +81,7 @@ const {
         size="sm"
       >
         <Container>
-          <Menus
-            menu={{ links }}
-            {menus}
-          />
+          <Menus {menus} />
         </Container>
       </Drawer>
     </Element>
@@ -108,7 +91,7 @@ const {
 <style is:global>
   @layer fulldev {
     .header {
-      @apply sticky left-0 top-0 z-20 flex h-14 w-full items-center overflow-hidden border-b bg-background;
+      @apply sticky left-0 top-0 z-20 flex h-14 w-full items-center border-b bg-background;
       height: var(--header-height);
 
       &,