fulldev-ui 0.6.4 → 0.7.0-beta.1

package/src/blocks/Features1.astro

@@ -1,72 +1,36 @@
 ---
-import Heading from 'fulldev-ui/components/Heading.astro'
+import Abstract from 'fulldev-ui/components/Abstract.astro'
+import Box from 'fulldev-ui/components/Box.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Grid from 'fulldev-ui/components/Grid.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 Prose from 'fulldev-ui/structures/Prose.astro'
-import Section from 'fulldev-ui/structures/Section.astro'
-import Stack from 'fulldev-ui/structures/Stack.astro'
-import Writeup from 'fulldev-ui/structures/Writeup.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { FeaturesSchema } from 'fulldev-ui/schemas/blocks/features'
 
-interface Props extends BlockSchema {}
+interface Props extends FeaturesSchema {}
 
-const { depth = 2, tagline, heading, paragraph, cards, ...rest } = Astro.props
+const { writeup, features } = Astro.props
 ---
 
-<Section
-  class:list="features-1"
-  {...rest}
->
-  <Container>
-    <Prose>
-      <Tagline
-        size="sm"
-        text={tagline}
-      />
-      <Heading
-        size="4xl"
-        text={heading}
-        {depth}
-      />
-      <Paragraph
-        size="lg"
-        text={paragraph}
-      />
-    </Prose>
-    <Stack>
+<Section class="">
+  <Container class="flex flex-col gap-16">
+    <Writeup>
+      <Fragment set:html={writeup} />
+      <slot />
+    </Writeup>
+    <Grid length={features?.length}>
       {
-        cards?.map(({ icon, heading, paragraph }) => (
-          <Writeup>
-            <Icon
-              size="lg"
-              name={icon}
-            />
-            <Heading
-              depth={(depth + 1) as 3}
-              as="h3"
-              size="xl"
-              text={heading}
-            />
-            <Paragraph text={paragraph} />
-          </Writeup>
+        features?.map(({ icon, title, description }) => (
+          <Abstract size="xl">
+            <Box class="inline-flex size-9 items-center justify-center rounded-md bg-muted text-muted-foreground">
+              <Icon name={icon} />
+            </Box>
+            <Box as="h3">{title}</Box>
+            <Box as="p">{description}</Box>
+          </Abstract>
         ))
       }
-    </Stack>
+    </Grid>
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .features-1 {
-      .container {
-        @apply flex flex-col gap-12;
-      }
-
-      .icon {
-        @apply text-primary;
-      }
-    }
-  }
-</style>

package/src/blocks/Footer.astro

@@ -1,83 +1,59 @@
 ---
-import Channels from 'fulldev-ui/components/Channels.astro'
-import Element from 'fulldev-ui/components/Element.astro'
+import Abstract from 'fulldev-ui/components/Abstract.astro'
+import Box from 'fulldev-ui/components/Box.astro'
+import Button from 'fulldev-ui/components/Button.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Grid from 'fulldev-ui/components/Grid.astro'
 import Logo from 'fulldev-ui/components/Logo.astro'
-import Menus from 'fulldev-ui/components/Menus.astro'
-import { default as Paragraph } from 'fulldev-ui/components/Paragraph.astro'
+import Menu from 'fulldev-ui/components/Menu.astro'
+import Section from 'fulldev-ui/components/Section.astro'
 import Socials from 'fulldev-ui/components/Socials.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 Writeup from 'fulldev-ui/structures/Writeup.astro'
+import type { FooterSchema } from 'fulldev-ui/schemas/blocks/footer'
 
-interface Props extends BlockSchema {}
+interface Props extends FooterSchema {}
 
-const {
-  logo,
-  heading,
-  paragraph,
-  socials,
-  channels,
-  menus,
-  // hours,
-  // html,
-  ...rest
-} = Astro.props
+const { logo, description, socials, channels, menus } = Astro.props
 ---
 
-<Element
-  class:list="footer"
+<Section
+  class="footer mt-auto border-t"
   as="footer"
-  {...rest}
 >
-  <Container class:list="footer-container">
-    <Writeup>
-      <Logo
+  <Container class="flex justify-between gap-16">
+    <Grid
+      length={4}
+      size="lg"
+    >
+      <Abstract
         size="sm"
-        {...logo}
-      />
-      <Paragraph
-        size="sm"
-        text={paragraph}
-      />
-      <Group>
-        <Socials
-          size="sm"
-          {socials}
+        class="flex max-w-xs flex-col gap-3"
+      >
+        <Logo {...logo} />
+        <Box
+          as="p"
+          set:html={description}
         />
-      </Group>
-    </Writeup>
-    <Element class:list="footer-channels">
-      <Channels {channels} />
-    </Element>
-    <Menus
-      size="sm"
-      {menus}
-    />
-  </Container>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .footer {
-      @apply relative mt-auto w-full border-t bg-background;
-
-      .container {
-        @apply grid grid-cols-[repeat(auto-fit,minmax(14rem,1fr))] gap-12 py-12;
-      }
-
-      .writeup,
-      .footer-channels {
-        @apply max-w-xs;
+        <Socials {socials} />
+      </Abstract>
+      <Box class="flex flex-col items-start">
+        {
+          channels?.map((channel) => (
+            <Button
+              class="px-0 py-1"
+              variant="link"
+              {...channel}
+            />
+          ))
+        }
+      </Box>
+      {
+        menus?.map((menu) => (
+          <Menu
+            class="w-full text-sm"
+            {...menu}
+          />
+        ))
       }
-
-      .writeup .group {
-        @apply mt-2;
-      }
-
-      .footer-channels {
-        @apply flex flex-col gap-y-2;
-      }
-    }
-  }
-</style>
+    </Grid>
+  </Container>
+</Section>

package/src/blocks/Header.astro

@@ -1,142 +1,82 @@
 ---
-// import Button from 'fulldev-ui/components/Button.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'
+import Box from 'fulldev-ui/components/Box.astro'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Drawer from 'fulldev-ui/components/Drawer.vue'
+import Icon from 'fulldev-ui/components/Icon.astro'
+import Link from 'fulldev-ui/components/Link.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 Menu from 'fulldev-ui/components/Menu.astro'
+import Navigation from 'fulldev-ui/components/Navigation.vue'
+import Search from 'fulldev-ui/components/Search.vue'
 import Socials from 'fulldev-ui/components/Socials.astro'
-import Themer from 'fulldev-ui/components/Themer.astro'
-import type { BlockSchema } from 'fulldev-ui/schemas/block'
-import Container from 'fulldev-ui/structures/Container.astro'
-import Drawer from 'fulldev-ui/structures/Drawer.astro'
+import type { HeaderSchema } from 'fulldev-ui/schemas/blocks/header'
 
-interface Props extends BlockSchema {}
+interface Props extends HeaderSchema {}
 
-const { logo, links, menus, socials, search, themer, button } = Astro.props
+const { logo, menus, socials, buttons } = Astro.props
 ---
 
-<Element
-  class:list="header"
+<Box
+  class="sticky top-0 z-20 flex h-14 w-full border-b bg-background"
   as="header"
 >
-  <Container>
-    <Element class:list="header-start">
+  <Container class="flex items-center justify-between gap-8">
+    <Box class="flex items-center gap-4">
       <Logo {...logo} />
-      <Links
-        size="sm"
-        variant="muted"
-        {links}
+      <Navigation
+        class="max-lg:hidden"
+        client:load
+        items={menus}
       />
-    </Element>
-    <Element class:list="header-end">
-      {
-        search && (
-          <Search
-            show={search}
-            variant="ghost"
-            size="sm"
-          />
-        )
-      }
-      <!-- {
-        cart && (
-          <Cart
-            variant="ghost"
-            size="sm"
-          />
-        )
-      } -->
-      {
-        themer && (
-          <Themer
-            show={themer}
-            variant="ghost"
-            size="sm"
-          />
-        )
-      }
-      <Socials
+    </Box>
+    <Box class="inline-flex items-center gap-2">
+      <Search client:load />
+      <Socials {socials} />
+      <Buttons
+        class="max-sm:hidden"
         size="sm"
-        {socials}
+        {buttons}
+        reverse
       />
-
-      <Button
-        size="sm"
-        variant="outline"
-        {...button}
-      />
-      <!-- <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"
+        class="size-9 lg:hidden"
+        client:load
+        button={{
+          variant: 'secondary',
+          size: 'sm',
+        }}
       >
-        <Container>
-          <Menus {menus} />
+        <Icon
+          slot="trigger"
+          name="menu-2"
+          class="!text-xl"
+        />
+        <Container class="min-w-lg flex flex-col gap-2">
+          {
+            menus?.map(({ text, href, links }) =>
+              links ? (
+                <Menu
+                  class="mb-4"
+                  {text}
+                  {links}
+                />
+              ) : (
+                <Link
+                  class="text-foreground"
+                  {href}
+                  {text}
+                />
+              )
+            )
+          }
+          <Buttons
+            class="mt-4 flex-col gap-2"
+            reverse
+            {buttons}
+          />
         </Container>
       </Drawer>
-    </Element>
+    </Box>
   </Container>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .header {
-      @apply sticky left-0 top-0 z-20 flex h-14 w-full items-center 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>
+</Box>

package/src/blocks/Hero1.astro

@@ -1,68 +1,37 @@
 ---
-import Badge from 'fulldev-ui/components/Badge.astro'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
+import Chip from 'fulldev-ui/components/Chip.astro'
+import Container from 'fulldev-ui/components/Container.astro'
 import Image from 'fulldev-ui/components/Image.astro'
-import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import Proof from 'fulldev-ui/components/Proof.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 Section from 'fulldev-ui/components/Section.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { HeroSchema } from 'fulldev-ui/schemas/blocks/hero'
 
-interface Props extends BlockSchema {}
+interface Props extends HeroSchema {}
 
-const {
-  depth = 2,
-  badge,
-  tagline,
-  heading,
-  paragraph,
-  content,
-  buttons,
-  image,
-  proof,
-  ...rest
-} = Astro.props
+const { badge, writeup, buttons, image } = Astro.props
 ---
 
-<Section
-  class:list="hero-1"
-  {...rest}
->
-  <Container class="flex flex-col items-center gap-16">
-    <Prose align="center">
-      <Proof {...proof} />
-      <Badge
-        size="lg"
+<Section class="flex flex-col">
+  <Container class="flex flex-col">
+    <Writeup
+      size="xl"
+      align="center"
+    >
+      <Chip
+        variant="outline"
         {...badge}
       />
-      <Tagline
-        size="sm"
-        text={tagline}
-      />
-      <Heading
-        size="6xl"
-        text={heading}
-        {depth}
-      />
-      <Paragraph
-        class="text-balance"
-        size="xl"
-        text={paragraph}
+      <Fragment set:html={writeup} />
+      <slot />
+      <Buttons
+        size="lg"
+        justify="center"
+        {buttons}
       />
-      <Fragment set:html={content} />
-      <Group>
-        <Buttons
-          size="lg"
-          {buttons}
-        />
-      </Group>
-    </Prose>
+    </Writeup>
     <Image
-      class="mx-auto max-h-[700px] w-auto rounded-lg"
+      class="rounded-lg"
       {...image}
     />
   </Container>

package/src/blocks/Intro1.astro

@@ -1,67 +1,25 @@
 ---
-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 Box from 'fulldev-ui/components/Box.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { IntroSchema } from 'fulldev-ui/schemas/blocks/intro'
 
-interface Props extends BlockSchema {}
+interface Props extends IntroSchema {}
 
-const {
-  depth = 2,
-  tagline,
-  heading,
-  paragraph,
-  content,
-  button,
-  buttons,
-  image,
-  ...rest
-} = Astro.props
+const { writeup } = Astro.props
 ---
 
-<Section
-  class:list="intro-1"
-  {...rest}
->
+<Section class="py-0">
   <Container>
-    <Prose>
-      <Tagline
+    <Box class="border-b py-12">
+      <Writeup
+        align="start"
         size="sm"
-        text={tagline}
-      />
-      <Heading
-        size="3xl"
-        text={heading}
-        {depth}
-      />
-      <Paragraph text={paragraph} />
-      <Fragment set:html={content} />
-      <Group>
-        <Buttons
-          size="sm"
-          {button}
-          {buttons}
-        />
-      </Group>
-    </Prose>
-    <Image {...image} />
+      >
+        <Fragment set:html={writeup} />
+        <slot />
+      </Writeup>
+    </Box>
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .section.intro-1 {
-      @apply border-b py-8;
-
-      .image {
-        @apply rounded-lg;
-      }
-    }
-  }
-</style>

package/src/blocks/PostSingle1.astro

@@ -0,0 +1,29 @@
+---
+import Box from 'fulldev-ui/components/Box.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Prose from 'fulldev-ui/components/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import type { PostSingleSchema } from 'fulldev-ui/schemas/blocks/postSingle'
+
+interface Props extends PostSingleSchema {}
+
+const { title, description, image } = Astro.props
+---
+
+<Section class="content content-1">
+  <Container
+    class="flex flex-col"
+    size="sm"
+  >
+    <Prose>
+      <Box as="h1">{title}</Box>
+      <Box as="p">{description}</Box>
+      <Image
+        class="rounded-lg"
+        {...image}
+      />
+      <slot />
+    </Prose>
+  </Container>
+</Section>