fulldev-ui 0.5.0-beta.9 → 0.6.0-beta-5

package/public/favicon/manifest.webmanifest

@@ -1,10 +1,14 @@
 {
   "name": "Fulldev UI",
   "short_name": "Fulldev UI",
-  "description": "A Multi-platform Favicon generator for Astro Project.",
+  "description": "Fulldev UI",
   "dir": "auto",
-  "lang": "en-US",
+  "lang": "en-GB",
   "display": "standalone",
+  "display_override": [
+    "window-controls-overlay",
+    "standalone"
+  ],
   "orientation": "any",
   "start_url": "/?homescreen=1",
   "background_color": "#fff",
@@ -20,7 +24,7 @@
       "src": "/favicon/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png",
-      "purpose": "any"
+      "purpose": "maskable"
     }
   ]
 }

package/src/blocks/Banner.astro

@@ -1,47 +1,32 @@
 ---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Container from 'fulldev-ui/components/Container.astro'
 import Element from 'fulldev-ui/components/Element.astro'
-import Text from 'fulldev-ui/components/Text.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-type Props = {
-  color?: 'base' | 'brand' | undefined
-  size?: 'sm' | 'md' | 'lg' | undefined
-  text?: string | undefined
+interface Props extends HTMLAttributes<'header'>, BlockSchema {
+  as?: HTMLTag
 }
 
-const { color = 'brand', size = 'sm', text, ...rest } = Astro.props
+const { as = 'header', text, ...rest } = Astro.props
 ---
 
 <Element
-  class:list={'banner'}
-  as="header"
-  {size}
-  {color}
+  class:list="banner"
   {...rest}
 >
-  <Text text={text} />
+  <Container>
+    <Fragment set:html={text} />
+  </Container>
 </Element>
 
-<style lang="scss" is:global>
+<style is:global>
   @layer fulldev {
     .banner {
-      display: flex;
-      position: relative;
-      justify-content: center;
-      align-items: center;
-      background-color: var(--color-9);
-      padding: 0 var(--gutter);
-      width: 100%;
-      min-height: var(--banner-height);
-      overflow: hidden;
-      text-align: center;
+      @apply relative flex w-full items-center bg-primary py-3 text-primary-foreground;
 
-      .text {
-        color: var(--color-contrast);
-      }
-
-      &,
-      & ~ * {
-        --banner-height: 32px;
+      .container {
+        @apply flex items-center justify-center overflow-hidden bg-primary text-center text-sm leading-none text-primary-foreground;
       }
     }
   }

package/src/blocks/Contact1.astro

@@ -0,0 +1,92 @@
+---
+import type { ComponentProps } from 'astro/types'
+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 { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+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/Content1.astro

@@ -0,0 +1,77 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Badge from 'fulldev-ui/components/Badge.astro'
+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 Image from 'fulldev-ui/components/Image.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 Toc from 'fulldev-ui/components/Toc.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {
+  headings?: ComponentProps<typeof Toc>['headings']
+}
+
+const {
+  tagline,
+  badge,
+  badges,
+  heading,
+  paragraph,
+  list,
+  button,
+  buttons,
+  image,
+  headings,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list="content-1"
+  {...rest}
+>
+  <Container>
+    <Prose>
+      <Group>
+        <Badge {...badge} />
+        {badges?.map((badge) => <Badge {...badge} />)}
+      </Group>
+      <Tagline text={tagline} />
+      <Heading
+        as="h1"
+        size="4xl"
+        text={heading}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+      <List items={list} />
+      <Group>
+        <Button {...button} />
+        {buttons?.map((button) => <Button {...button} />)}
+      </Group>
+      <Image {...image} />
+      <slot />
+    </Prose>
+    <Toc {headings} />
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .content-1 {
+      .container {
+        @apply flex items-start justify-evenly gap-x-gutter;
+      }
+    }
+  }
+</style>

package/src/blocks/Content2.astro

@@ -0,0 +1,91 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Badge from 'fulldev-ui/components/Badge.astro'
+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 Image from 'fulldev-ui/components/Image.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 Toc from 'fulldev-ui/components/Toc.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {
+  headings?: ComponentProps<typeof Toc>['headings']
+}
+
+const {
+  tagline,
+  badge,
+  badges,
+  heading,
+  paragraph,
+  list,
+  button,
+  buttons,
+  image,
+  headings,
+  content,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list="content-2"
+  {...rest}
+>
+  <Container>
+    <Prose>
+      <Group>
+        <Badge {...badge} />
+        {badges?.map((badge) => <Badge {...badge} />)}
+      </Group>
+      <Tagline text={tagline} />
+      <Heading
+        as="h1"
+        size="4xl"
+        text={heading}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+      <List items={list} />
+      <Group>
+        <Button {...button} />
+        {buttons?.map((button) => <Button {...button} />)}
+      </Group>
+      <Fragment set:html={content} />
+      <slot />
+    </Prose>
+    <Image {...image} />
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .content-2 {
+      .container {
+        @apply grid items-start gap-x-gutter gap-y-16 lg:grid-cols-2;
+      }
+
+      .prose,
+      .image {
+        @apply lg:top-sticky-16 lg:sticky;
+      }
+
+      .prose {
+        @apply max-w-screen-sm;
+      }
+
+      .image {
+        @apply rounded-md;
+      }
+    }
+  }
+</style>

package/src/blocks/Content3.astro

@@ -0,0 +1,70 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Badge from 'fulldev-ui/components/Badge.astro'
+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 Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const { badges, heading, paragraph, list, button, ...rest } = Astro.props
+---
+
+<Section
+  class:list="content-3"
+  {...rest}
+>
+  <Container>
+    <Writeup>
+      <Group>
+        {
+          badges?.map((badge) => (
+            <Badge
+              size="sm"
+              {...badge}
+            />
+          ))
+        }
+      </Group>
+      <Heading
+        as="h1"
+        size="4xl"
+        text={heading}
+      />
+      <Paragraph
+        size="lg"
+        muted
+        text={paragraph}
+      />
+      <List items={list} />
+      <Button
+        size="lg"
+        {...button}
+      />
+    </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:top-sticky-16 lg:sticky lg:max-w-xl;
+      }
+    }
+  }
+</style>

package/src/blocks/Content4.astro

@@ -0,0 +1,72 @@
+---
+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 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,58 @@
+---
+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 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, 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}
+        />
+        <Buttons
+          {buttons}
+          size="lg"
+        />
+      </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>