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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.6.0-beta.2",
+  "version": "0.6.0-beta.3",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",

package/src/blocks/Banner1.astro

@@ -0,0 +1,35 @@
+---
+import type { HTMLTag } from 'astro/types'
+import Banner from 'fulldev-ui/components/Banner.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Header from 'fulldev-ui/components/Header.astro'
+import type { BannerSchema } from 'fulldev-ui/schemas/blocks/banner'
+import type { ComponentProps } from 'svelte'
+
+interface Props extends ComponentProps<typeof Header>, BannerSchema {
+  as?: HTMLTag
+}
+
+const { text, ...rest } = Astro.props
+---
+
+<Banner
+  class:list="banner-1"
+  {...rest}
+>
+  <Container>
+    <Fragment set:html={text} />
+  </Container>
+</Banner>
+
+<style is:global>
+  @layer fulldev {
+    .banner-1 {
+      @apply bg-primary text-primary-foreground;
+
+      .container {
+        @apply flex items-center justify-center overflow-hidden bg-primary text-center text-sm leading-none text-primary-foreground;
+      }
+    }
+  }
+</style>

package/src/blocks/Contact1.astro

@@ -0,0 +1,92 @@
+---
+import Channel from 'fulldev-ui/components/Channel.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Form from 'fulldev-ui/components/Form.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 Social from 'fulldev-ui/components/Social.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { ContactSchema } from 'fulldev-ui/schemas/blocks/contact'
+import type { ComponentProps } from 'svelte'
+
+interface Props extends ComponentProps<typeof Section>, ContactSchema {}
+
+const {
+  heading,
+  form,
+  text,
+  tagline,
+  googleMaps,
+  paragraph,
+  buttons,
+  socials,
+  position,
+  image,
+  channels,
+  level = 1,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list="contact-1"
+  {...rest}
+>
+  <Element>
+    <Element class:list="contact-1-segment">
+      <Element class:list="contact-1-content">
+        <Tagline
+          size="sm"
+          text={tagline}
+        />
+        <Heading
+          as="h1"
+          size="2xl"
+          text={heading}
+        />
+        <Paragraph text={paragraph} />
+      </Element>
+      <Element class:list="contact-1-channels">
+        {channels?.map((channel) => <Channel {...channel} />)}
+      </Element>
+      <Element class:list="contact-1-socials">
+        {socials?.map((social) => <Social href={social} />)}
+      </Element>
+      <Form
+        action="/thank-you"
+        method="POST"
+        {...form}
+      />
+    </Element>
+    <Image
+      {position}
+      {...image}
+    />
+  </Element>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .contact-1 {
+      @apply relative w-full;
+
+      .container {
+        @apply flex flex-col gap-16;
+      }
+
+      .contact-1-segment {
+        @apply flex flex-col items-start gap-8;
+      }
+
+      .contact-1-content {
+        @apply flex max-w-screen-md flex-col gap-4;
+      }
+
+      .image {
+        @apply rounded-md;
+      }
+    }
+  }
+</style>

package/src/blocks/Cta1.astro

@@ -0,0 +1,72 @@
+---
+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 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'
+
+interface Props extends ComponentProps<typeof Section>, CtaSchema {}
+
+const { tagline, heading, paragraph, buttons, image, ...rest } = Astro.props
+---
+
+<Section
+  class:list="cta-1"
+  {...rest}
+>
+  <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}
+          size="lg"
+        />
+      </Element>
+      <Image {...image} />
+    </Panel>
+  </Container>
+</Section>
+
+<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;
+      }
+
+      .image {
+        @apply rounded-lg;
+      }
+    }
+  }
+</style>

package/src/blocks/Feature1.astro

@@ -0,0 +1,67 @@
+---
+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'
+
+interface Props extends ComponentProps<typeof Section>, FeatureSchema {}
+
+const { tagline, heading, paragraph, buttons, image, ...rest } = Astro.props
+---
+
+<Section
+  class:list="feature-1"
+  {...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>
+      <Buttons
+        variant="secondary"
+        {buttons}
+      />
+    </Element>
+    <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;
+      }
+
+      .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;
+      }
+
+      .image {
+        @apply rounded-lg;
+      }
+    }
+  }
+</style>

package/src/blocks/Footer.astro

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

package/src/blocks/Header1.astro

@@ -0,0 +1,192 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.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 Header from 'fulldev-ui/components/Header.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Link from 'fulldev-ui/components/Link.astro'
+import Logo from 'fulldev-ui/components/Logo.astro'
+import Search from 'fulldev-ui/components/Search.astro'
+import Social from 'fulldev-ui/components/Social.astro'
+import Themer from 'fulldev-ui/components/Themer.astro'
+import type { HeaderSchema } from 'fulldev-ui/schemas/components/header'
+
+interface Props extends ComponentProps<typeof Header>, HeaderSchema {}
+
+const {
+  logo,
+  heading,
+  links,
+  socials,
+  menus,
+  search,
+  themer,
+  buttons,
+  cart,
+  ...rest
+} = Astro.props
+---
+
+<Header
+  class:list="header-1"
+  {...rest}
+>
+  <Container>
+    <Element class:list="header-1-start">
+      <Logo {...logo} />
+      {
+        links?.map((link) => (
+          <Link
+            size="sm"
+            variant="muted"
+            {...link}
+          />
+        ))
+      }
+    </Element>
+    <Element class:list="header-1-end">
+      {
+        search && (
+          <Search
+            if={search}
+            variant="ghost"
+            size="sm"
+          />
+        )
+      }
+      {
+        buttons?.map((button) => (
+          <Button
+            size="sm"
+            {...button}
+          />
+        ))
+      }
+      {
+        cart && (
+          <Cart
+            if={cart}
+            variant="ghost"
+            size="sm"
+          />
+        )
+      }
+      <Themer
+        if={themer}
+        variant="ghost"
+        size="sm"
+      />
+      {
+        socials?.map((social) => (
+          <Social
+            variant="ghost"
+            size="sm"
+            href={social}
+          />
+        ))
+      }
+      <!-- <Button
+        class:list="menu-button"
+        as="label"
+        for="sidebar-toggle"
+        icon="menu-2"
+        variant="ghost"
+        size="sm"
+      /> -->
+      <Drawer
+        id="header-1-drawer"
+        icon="menu-2"
+        size="sm"
+      >
+        <Container>
+          <Element class:list="header-1-links">
+            {
+              links?.map((link) => (
+                <Link
+                  variant="muted"
+                  {...link}
+                />
+              ))
+            }
+          </Element>
+          {
+            menus?.map(({ heading, links }) => (
+              <Element class:list="header-1-menu">
+                <Heading
+                  text={heading}
+                  size="md"
+                  as="h6"
+                />
+                <Element class:list="header-1-links">
+                  {links?.map((link) => (
+                    <Link
+                      variant="muted"
+                      {...link}
+                    />
+                  ))}
+                </Element>
+              </Element>
+            ))
+          }
+        </Container>
+      </Drawer>
+    </Element>
+  </Container>
+</Header>
+
+<style is:global>
+  @layer fulldev {
+    .header-1 {
+      @apply sticky left-0 top-0 z-20 flex h-14 items-center overflow-hidden border-b bg-background;
+
+      .container {
+        @apply flex items-center gap-6;
+      }
+
+      .header-1-start {
+        @apply flex items-center gap-6;
+
+        .link {
+          @apply max-lg:hidden;
+        }
+      }
+
+      .header-1-home {
+        @apply flex items-center gap-2;
+      }
+
+      .header-1-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;
+        }
+
+        .header-1-menu {
+          @apply flex flex-col gap-4;
+        }
+
+        .header-1-links {
+          @apply flex flex-col gap-3;
+        }
+      }
+    }
+  }
+</style>

package/src/blocks/Hero1.astro

@@ -0,0 +1,74 @@
+---
+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 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'
+
+interface Props extends ComponentProps<typeof Section>, HeroSchema {}
+
+const { badge, tagline, heading, paragraph, buttons, image, ...rest } =
+  Astro.props
+---
+
+<Section
+  class:list="hero-1"
+  {...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}
+        size="lg"
+      />
+    </Element>
+    <Image {...image} />
+  </Container>
+</Section>
+
+<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;
+      }
+    }
+  }
+</style>