fulldev-ui 0.6.0-beta.2 → 0.6.0-beta.6

package/src/blocks/Content3.astro

@@ -0,0 +1,70 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Badges from 'fulldev-ui/components/Badges.astro'
+import Buttons from 'fulldev-ui/components/Buttons.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 Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const { badge, badges, heading, paragraph, list, button, buttons, ...rest } =
+  Astro.props
+---
+
+<Section
+  class:list="content-3"
+  {...rest}
+>
+  <Container>
+    <Writeup>
+      <Group>
+        <Badges
+          size="sm"
+          {badge}
+          {badges}
+        />
+      </Group>
+      <Heading
+        as="h1"
+        size="4xl"
+        text={heading}
+      />
+      <Paragraph
+        size="lg"
+        muted
+        text={paragraph}
+      />
+      <List items={list} />
+      <Group>
+        <Buttons
+          {button}
+          {buttons}
+        />
+      </Group>
+    </Writeup>
+    <Prose>
+      <slot />
+    </Prose>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .content-3 {
+      .container {
+        @apply flex flex-col items-start gap-x-gutter lg:grid lg:grid-cols-2;
+      }
+
+      .writeup {
+        @apply lg:sticky lg:top-sticky-16 lg:max-w-xl;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,73 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Buttons from 'fulldev-ui/components/Buttons.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 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 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,
+  content,
+  button,
+  buttons,
+  image,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list="cta-1"
+  {...rest}
+>
+  <Container>
+    <Panel>
+      <Writeup align="center">
+        <Tagline text={tagline} />
+        <Heading
+          size="4xl"
+          as="h2"
+          text={heading}
+        />
+        <Paragraph
+          size="lg"
+          text={paragraph}
+        />
+        <Fragment set:html={content} />
+        <Group>
+          <Buttons
+            variant="primary"
+            size="lg"
+            {button}
+            {buttons}
+          />
+        </Group>
+      </Writeup>
+      <Image {...image} />
+    </Panel>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .cta-1 {
+      .text {
+        @apply text-pretty;
+      }
+
+      .image {
+        @apply rounded-lg;
+      }
+    }
+  }
+</style>

package/src/blocks/Feature1.astro

@@ -0,0 +1,61 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Container from 'fulldev-ui/components/Container.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 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, buttons, image, ...rest } = Astro.props
+---
+
+<Section
+  class:list="feature-1"
+  {...rest}
+>
+  <Container>
+    <Writeup>
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        size="3xl"
+        text={heading}
+      />
+      <Paragraph
+        size="lg"
+        text={paragraph}
+      />
+      <Buttons
+        variant="secondary"
+        {buttons}
+      />
+    </Writeup>
+    <Image {...image} />
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .feature-1 {
+      .container {
+        @apply gap-x-gutter gap-y-12 lg:grid lg:grid-cols-2 lg:items-center;
+      }
+
+      .writeup {
+        @apply lg:max-w-xl;
+      }
+
+      .image {
+        @apply rounded-lg;
+      }
+    }
+  }
+</style>

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,41 +1,30 @@
 ---
-import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
 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 Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Menus from 'fulldev-ui/components/Menus.astro'
+import { default as Paragraph } from 'fulldev-ui/components/Paragraph.astro'
 import Socials from 'fulldev-ui/components/Socials.astro'
-import Text from 'fulldev-ui/components/Text.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-interface Props extends GlobalProps, HTMLAttributes<'footer'> {
+interface Props extends HTMLAttributes<'footer'>, BlockSchema {
   as?: HTMLTag
-  variant?: 1 | undefined
-  size?: 'sm' | 'md' | 'lg' | undefined
-  logo?: ComponentProps<typeof Logo>['src']
-  company?: ComponentProps<typeof Logo>['company']
-  paragraph?: ComponentProps<typeof Paragraph>['text']
-  socials?: ComponentProps<typeof Socials>['socials']
-  channels?: ComponentProps<typeof Channels>['channels']
-  hours?: any
-  menu?: ComponentProps<typeof Menu>['groups']
-  html?: any
 }
 
 const {
   as = 'footer',
-  size = 'sm',
-  variant = 1,
   logo,
-  company,
+  heading,
   paragraph,
   socials,
   channels,
-  hours,
-  menu,
-  html,
+  menus,
+  // hours,
+  // html,
   ...rest
 } = Astro.props
 ---
@@ -43,68 +32,47 @@ const {
 <Element
   class:list="footer"
   {as}
-  {size}
-  {variant}
   {...rest}
 >
-  <Element class:list="footer-container">
-    <Element class:list="footer-content">
+  <Container class:list="footer-container">
+    <Writeup>
       <Logo
-        {size}
-        {company}
-        {...typeof logo === 'string' ? { src: logo } : logo}
+        size="sm"
+        {...logo}
       />
       <Paragraph
-        {size}
+        size="sm"
         text={paragraph}
       />
-      <Socials
-        {size}
-        {socials}
-      />
+      <Group>
+        <Socials
+          variant="secondary"
+          size="sm"
+        />
+      </Group>
+    </Writeup>
+    <Element class:list="footer-channels">
+      <Channels {channels} />
     </Element>
-    <Channels {channels} />
-    <Fragment set:html={html} />
-    <!-- <Hours {hours} /> -->
-    <Menu
-      direction="row"
-      groups={menu}
-      {size}
+    <Menus
+      size="sm"
+      {menus}
     />
-    <Element class:list="hours column">
-      <Heading
-        text={hours?.heading}
-        level={5}
-      />
-      <Element>
-        {
-          Object.entries(hours?.days ?? {})?.map(([key, value]: any) => (
-            <Element class:list="spread">
-              <Text text={key} />
-              <Text text={value} />
-            </Element>
-          ))
-        }
-      </Element>
-    </Element>
-  </Element>
+  </Container>
 </Element>
 
 <style is:global>
   @layer fulldev {
     .footer {
-      @apply relative mt-auto w-full;
-
-      &.dark {
-        @apply bg-background;
-      }
+      @apply relative mt-auto w-full border-t 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

@@ -1,7 +1,154 @@
 ---
-import HeaderComponent from 'fulldev-ui/components/Header.astro'
+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'
 
-const { ...rest } = Astro.props
+interface Props extends HTMLAttributes<'header'>, BlockSchema {}
+
+const {
+  logo,
+  heading,
+  links,
+  socials,
+  menus,
+  search,
+  themer,
+  buttons,
+  cart,
+  ...rest
+} = Astro.props
 ---
 
-<HeaderComponent {...rest} />
+<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>