fulldev-ui 0.6.0-beta.3 → 0.6.0-beta.7

package/src/blocks/Content4.astro

@@ -0,0 +1,75 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Group from 'fulldev-ui/components/Group.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import List from 'fulldev-ui/components/List.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Prose from 'fulldev-ui/components/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const {
+  tagline,
+  heading,
+  paragraph,
+  list,
+  content,
+  button,
+  buttons,
+  image,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list="content-4"
+  {...rest}
+>
+  <Container>
+    <Writeup>
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        as="h1"
+        size="4xl"
+        text={heading}
+      />
+      <Paragraph
+        size="lg"
+        muted
+        text={paragraph}
+      />
+      <List items={list} />
+    </Writeup>
+    <Prose>
+      <Fragment set:html={content} />
+      <slot />
+    </Prose>
+    <Group>
+      <Button {...button} />
+      {buttons?.map((button) => <Button {...button} />)}
+    </Group>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .content-4 {
+      .container {
+        @apply flex flex-col items-start gap-8;
+      }
+
+      .prose {
+        @apply max-w-none break-inside-avoid gap-x-gutter lg:columns-2;
+      }
+    }
+  }
+</style>

package/src/blocks/Cta1.astro

@@ -1,19 +1,29 @@
 ---
+import type { ComponentProps } from 'astro/types'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Container from 'fulldev-ui/components/Container.astro'
-import Element from 'fulldev-ui/components/Element.astro'
+import Group from 'fulldev-ui/components/Group.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 import Panel from 'fulldev-ui/components/Panel.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Section from 'fulldev-ui/components/Section.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
-import type { CtaSchema } from 'fulldev-ui/schemas/blocks/cta.ts'
-import type { ComponentProps } from 'svelte'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-interface Props extends ComponentProps<typeof Section>, CtaSchema {}
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
 
-const { tagline, heading, paragraph, buttons, image, ...rest } = Astro.props
+const {
+  tagline,
+  heading,
+  paragraph,
+  content,
+  button,
+  buttons,
+  image,
+  ...rest
+} = Astro.props
 ---
 
 <Section
@@ -22,24 +32,27 @@ const { tagline, heading, paragraph, buttons, image, ...rest } = Astro.props
 >
   <Container>
     <Panel>
-      <Element class="cta-1-segment">
-        <Element class="cta-1-content">
-          <Tagline text={tagline} />
-          <Heading
-            size="4xl"
-            as="h2"
-            text={heading}
-          />
-          <Paragraph
-            size="lg"
-            text={paragraph}
-          />
-        </Element>
-        <Buttons
-          {buttons}
+      <Writeup align="center">
+        <Tagline text={tagline} />
+        <Heading
+          size="4xl"
+          as="h2"
+          text={heading}
+        />
+        <Paragraph
           size="lg"
+          text={paragraph}
         />
-      </Element>
+        <Fragment set:html={content} />
+        <Group>
+          <Buttons
+            variant="primary"
+            size="lg"
+            {button}
+            {buttons}
+          />
+        </Group>
+      </Writeup>
       <Image {...image} />
     </Panel>
   </Container>
@@ -48,20 +61,8 @@ const { tagline, heading, paragraph, buttons, image, ...rest } = Astro.props
 <style is:global>
   @layer fulldev {
     .cta-1 {
-      .panel {
-        @apply flex flex-col items-center gap-16;
-      }
-
-      .cta-1-segment {
-        @apply z-10 flex flex-col items-center gap-8 text-center;
-      }
-
-      .cta-1-content {
-        @apply flex max-w-screen-md flex-col items-center gap-4 text-center;
-      }
-
       .text {
-        @apply text-balance;
+        @apply text-pretty;
       }
 
       .image {

package/src/blocks/Feature1.astro

@@ -1,16 +1,16 @@
 ---
+import type { ComponentProps } from 'astro/types'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Container from 'fulldev-ui/components/Container.astro'
-import Element from 'fulldev-ui/components/Element.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 Section from 'fulldev-ui/components/Section.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
-import type { FeatureSchema } from 'fulldev-ui/schemas/blocks/feature'
-import type { ComponentProps } from 'svelte'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-interface Props extends ComponentProps<typeof Section>, FeatureSchema {}
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
 
 const { tagline, heading, paragraph, buttons, image, ...rest } = Astro.props
 ---
@@ -20,26 +20,24 @@ const { tagline, heading, paragraph, buttons, image, ...rest } = Astro.props
   {...rest}
 >
   <Container>
-    <Element class="feature-1-segment">
-      <Element class="feature-1-content">
-        <Tagline
-          size="sm"
-          text={tagline}
-        />
-        <Heading
-          size="3xl"
-          text={heading}
-        />
-        <Paragraph
-          size="lg"
-          text={paragraph}
-        />
-      </Element>
+    <Writeup>
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        size="3xl"
+        text={heading}
+      />
+      <Paragraph
+        size="lg"
+        text={paragraph}
+      />
       <Buttons
         variant="secondary"
         {buttons}
       />
-    </Element>
+    </Writeup>
     <Image {...image} />
   </Container>
 </Section>
@@ -51,12 +49,8 @@ const { tagline, heading, paragraph, buttons, image, ...rest } = Astro.props
         @apply gap-x-gutter gap-y-12 lg:grid lg:grid-cols-2 lg:items-center;
       }
 
-      .feature-1-segment {
-        @apply flex flex-col items-start gap-6 lg:max-w-xl;
-      }
-
-      .feature-1-content {
-        @apply flex max-w-screen-md flex-col items-start gap-3;
+      .writeup {
+        @apply lg:max-w-xl;
       }
 
       .image {

package/src/blocks/Features1.astro

@@ -0,0 +1,66 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Container from 'fulldev-ui/components/Container.astro'
+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 Section from 'fulldev-ui/components/Section.astro'
+import Stack from 'fulldev-ui/components/Stack.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const { tagline, heading, paragraph, cards, ...rest } = Astro.props
+---
+
+<Section
+  class:list="features-1"
+  {...rest}
+>
+  <Container>
+    <Writeup>
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        size="3xl"
+        text={heading}
+      />
+      <Paragraph
+        size="lg"
+        text={paragraph}
+      />
+    </Writeup>
+    <Stack>
+      {
+        cards?.map(({ icon, heading, paragraph }) => (
+          <Writeup>
+            <Icon
+              size="lg"
+              name={icon}
+            />
+            <Heading
+              as="h3"
+              size="xl"
+              text={heading}
+            />
+            <Paragraph text={paragraph} />
+          </Writeup>
+        ))
+      }
+    </Stack>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .features-1 {
+      .icon {
+        @apply text-primary;
+      }
+    }
+  }
+</style>

package/src/blocks/Footer.astro

@@ -1,15 +1,17 @@
 ---
 import type { HTMLAttributes, HTMLTag } from 'astro/types'
-import Channel from 'fulldev-ui/components/Channel.astro'
+import Channels from 'fulldev-ui/components/Channels.astro'
+import Container from 'fulldev-ui/components/Container.astro'
 import Element from 'fulldev-ui/components/Element.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
+import Group from 'fulldev-ui/components/Group.astro'
 import Logo from 'fulldev-ui/components/Logo.astro'
-import Menu from 'fulldev-ui/components/Menu.astro'
+import Menus from 'fulldev-ui/components/Menus.astro'
 import { default as Paragraph } from 'fulldev-ui/components/Paragraph.astro'
-import Social from 'fulldev-ui/components/Social.astro'
-import type { FooterSchema } from 'fulldev-ui/schemas/components/footer'
+import Socials from 'fulldev-ui/components/Socials.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-interface Props extends HTMLAttributes<'footer'>, FooterSchema {
+interface Props extends HTMLAttributes<'footer'>, BlockSchema {
   as?: HTMLTag
 }
 
@@ -32,8 +34,8 @@ const {
   {as}
   {...rest}
 >
-  <Element class:list="footer-container">
-    <Element class:list="footer-content">
+  <Container class:list="footer-container">
+    <Writeup>
       <Logo
         size="sm"
         {...logo}
@@ -42,45 +44,21 @@ const {
         size="sm"
         text={paragraph}
       />
-      <Element class:list="footer-socials">
-        {
-          socials?.map((social) => (
-            <Social
-              variant="secondary"
-              size="sm"
-              href={social}
-            />
-          ))
-        }
-      </Element>
-    </Element>
+      <Group>
+        <Socials
+          variant="secondary"
+          size="sm"
+        />
+      </Group>
+    </Writeup>
     <Element class:list="footer-channels">
-      {channels?.map((channel) => <Channel {...channel} />)}
+      <Channels {channels} />
     </Element>
-  </Element>
-  <!-- <Fragment set:html={html} /> -->
-  <!-- <Hours {hours} /> -->
-  <!-- <Menu
-    direction="row"
-    groups={menu}
-    {size}
-  /> -->
-  <!-- <Element class:list="hours column">
-    <Heading
-      text={hours?.heading}
-      as="h5"
+    <Menus
+      size="sm"
+      {menus}
     />
-    <Element>
-      {
-        Object.entries(hours?.days ?? {})?.map(([key, value]: any) => (
-          <Element class:list="spread">
-            <Paragraph text={key} />
-            <Paragraph text={value} />
-          </Element>
-        ))
-      }
-    </Element>
-  </Element> -->
+  </Container>
 </Element>
 
 <style is:global>
@@ -88,16 +66,13 @@ const {
     .footer {
       @apply relative mt-auto w-full border-t bg-background;
 
-      &.dark {
-        @apply bg-background;
-      }
-
-      .footer-container {
-        @apply container flex flex-wrap justify-between gap-12 py-12;
+      .container {
+        @apply grid grid-cols-[repeat(auto-fit,minmax(14rem,1fr))] gap-12 py-12;
       }
 
-      .footer-content {
-        @apply flex max-w-60 flex-col gap-4;
+      .writeup,
+      .footer-channels {
+        @apply max-w-xs;
       }
     }
   }

package/src/blocks/Header.astro

@@ -0,0 +1,154 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+// import Cart from 'fulldev-ui/components/Cart.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Drawer from 'fulldev-ui/components/Drawer.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Links from 'fulldev-ui/components/Links.astro'
+import Logo from 'fulldev-ui/components/Logo.astro'
+import Menus from 'fulldev-ui/components/Menus.astro'
+import Search from 'fulldev-ui/components/Search.astro'
+import Socials from 'fulldev-ui/components/Socials.astro'
+import Themer from 'fulldev-ui/components/Themer.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends HTMLAttributes<'header'>, BlockSchema {}
+
+const {
+  logo,
+  heading,
+  links,
+  socials,
+  menus,
+  search,
+  themer,
+  buttons,
+  cart,
+  ...rest
+} = Astro.props
+---
+
+<Element
+  class:list="header"
+  {...rest}
+>
+  <Container>
+    <Element class:list="header-start">
+      <Logo {...logo} />
+      <Links
+        size="sm"
+        variant="muted"
+        {links}
+      />
+    </Element>
+    <Element class:list="header-end">
+      {
+        search && (
+          <Search
+            if={search}
+            variant="ghost"
+            size="sm"
+          />
+        )
+      }
+      <Buttons
+        size="sm"
+        {buttons}
+      />
+
+      <!-- {
+        cart && (
+          <Cart
+            variant="ghost"
+            size="sm"
+          />
+        )
+      } -->
+      <Themer
+        if={themer}
+        variant="ghost"
+        size="sm"
+      />
+      <Socials
+        size="sm"
+        variant="ghost"
+        {socials}
+      />
+
+      <!-- <Button
+        class:list="menu-button"
+        as="label"
+        for="sidebar-toggle"
+        icon="menu-2"
+        variant="ghost"
+        size="sm"
+      /> -->
+      <Drawer
+        id="header-drawer"
+        icon="menu-2"
+        size="sm"
+      >
+        <Container>
+          <Menus
+            menu={{ links }}
+            {menus}
+          />
+        </Container>
+      </Drawer>
+    </Element>
+  </Container>
+</Element>
+
+<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;
+      height: var(--header-height);
+
+      &,
+      & ~ * {
+        --header-height: 3.5rem;
+      }
+
+      .container {
+        @apply flex items-center gap-6;
+      }
+
+      .header-start {
+        @apply flex items-center gap-6;
+
+        .link {
+          @apply max-lg:hidden;
+        }
+      }
+
+      .header-home {
+        @apply flex items-center gap-2;
+      }
+
+      .header-end {
+        @apply ml-auto flex items-center gap-1;
+
+        .social,
+        .themer {
+          @apply max-lg:hidden;
+        }
+
+        .menu-button {
+          @apply lg:hidden;
+        }
+      }
+
+      .drawer {
+        @apply lg:hidden;
+
+        .container {
+          @apply flex w-full flex-col items-start gap-6 overflow-y-auto px-gutter pb-14 pt-8;
+          @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
+        }
+      }
+    }
+  }
+</style>

package/src/blocks/Hero1.astro

@@ -1,20 +1,30 @@
 ---
+import type { ComponentProps } from 'astro/types'
 import Badge from 'fulldev-ui/components/Badge.astro'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Container from 'fulldev-ui/components/Container.astro'
-import Element from 'fulldev-ui/components/Element.astro'
+import Group from 'fulldev-ui/components/Group.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 Section from 'fulldev-ui/components/Section.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
-import type { HeroSchema } from 'fulldev-ui/schemas/blocks/hero.ts'
-import type { ComponentProps } from 'svelte'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-interface Props extends ComponentProps<typeof Section>, HeroSchema {}
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
 
-const { badge, tagline, heading, paragraph, buttons, image, ...rest } =
-  Astro.props
+const {
+  badge,
+  tagline,
+  heading,
+  paragraph,
+  content,
+  button,
+  buttons,
+  image,
+  ...rest
+} = Astro.props
 ---
 
 <Section
@@ -22,31 +32,33 @@ const { badge, tagline, heading, paragraph, buttons, image, ...rest } =
   {...rest}
 >
   <Container>
-    <Element class="hero-1-segment">
-      <Element class="hero-1-content">
-        <Badge
-          size="lg"
-          {...badge}
-        />
-        <Tagline
-          size="sm"
-          text={tagline}
-        />
-        <Heading
-          as="h1"
-          size="5xl"
-          text={heading}
-        />
-        <Paragraph
-          size="xl"
-          text={paragraph}
-        />
-      </Element>
-      <Buttons
-        {buttons}
+    <Writeup align="center">
+      <Badge
         size="lg"
+        {...badge}
+      />
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        as="h1"
+        size="6xl"
+        text={heading}
+      />
+      <Paragraph
+        size="xl"
+        text={paragraph}
       />
-    </Element>
+      <Fragment set:html={content} />
+      <Group>
+        <Buttons
+          size="lg"
+          {button}
+          {buttons}
+        />
+      </Group>
+    </Writeup>
     <Image {...image} />
   </Container>
 </Section>
@@ -54,18 +66,6 @@ const { badge, tagline, heading, paragraph, buttons, image, ...rest } =
 <style is:global>
   @layer fulldev {
     .hero-1 {
-      .hero-1-segment {
-        @apply flex flex-col items-center gap-8 text-center;
-      }
-
-      .hero-1-content {
-        @apply flex max-w-screen-md flex-col items-center gap-4 text-center;
-      }
-
-      .paragraph {
-        @apply text-balance;
-      }
-
       .image {
         @apply rounded-lg;
       }