fulldev-ui 0.6.0-beta.9 → 0.6.1

package/src/blocks/Pages1.astro

@@ -0,0 +1,85 @@
+---
+// Heading etc left, image and content right, sticky
+import Badges from 'fulldev-ui/components/Badges.astro'
+import Buttons from 'fulldev-ui/components/Buttons.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 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 Split from 'fulldev-ui/structures/Split.astro'
+
+interface Props extends BlockSchema {}
+
+const {
+  depth = 2,
+  tagline,
+  heading,
+  paragraph,
+  buttons,
+  content,
+  cards,
+} = Astro.props
+---
+
+<Section class="pages-1">
+  <Container>
+    <Split class="items-start">
+      <Prose class="lg:sticky lg:top-sticky-16 lg:max-w-xl">
+        <Tagline text={tagline} />
+        <Heading
+          as="h2"
+          size="4xl"
+          text={heading}
+          {depth}
+        />
+        <Paragraph
+          muted
+          size="lg"
+          text={paragraph}
+        />
+        <Fragment set:html={content} />
+        <Group>
+          <Buttons
+            variant="secondary"
+            {buttons}
+          />
+        </Group>
+      </Prose>
+      <Element class="flex flex-col gap-8">
+        {
+          cards?.map(({ href, image, badges, heading, paragraph }) => (
+            <Element
+              as="a"
+              class="flex flex-col gap-2"
+              {href}
+            >
+              <Image
+                class="mb-4"
+                {...image}
+              />
+              <Group>
+                <Badges
+                  size="sm"
+                  {badges}
+                />
+              </Group>
+              <Heading
+                depth={(depth + 1) as 3}
+                as="h3"
+                size="xl"
+                text={heading}
+              />
+              <Paragraph text={paragraph} />
+            </Element>
+          ))
+        }
+      </Element>
+    </Split>
+  </Container>
+</Section>

package/src/blocks/Pricings1.astro

@@ -0,0 +1,61 @@
+---
+import Button from 'fulldev-ui/components/Button.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 Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Card from 'fulldev-ui/structures/Card.astro'
+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'
+
+interface Props extends BlockSchema {}
+
+const { depth = 2, heading, paragraph, cards } = Astro.props
+---
+
+<Section class="pricings-1">
+  <Container class="flex flex-col items-center gap-16">
+    <Prose class="text-center">
+      <Heading
+        size="5xl"
+        text={heading}
+        {depth}
+      />
+      <Paragraph
+        size="xl"
+        text={paragraph}
+      />
+    </Prose>
+    <Stack class="mx-auto flex flex-wrap items-stretch justify-center">
+      {
+        cards?.map(({ tagline, heading, paragraph, list, button }) => (
+          <Card class="min-w-sm flex max-w-md flex-col justify-between gap-8 p-8">
+            <Prose>
+              <Tagline text={tagline} />
+              <Heading
+                depth={(depth + 1) as 3}
+                size="3xl"
+                text={heading}
+              />
+              <Paragraph
+                muted
+                text={paragraph}
+              />
+              <List
+                size="sm"
+                items={list}
+              />
+            </Prose>
+            <Button
+              class=""
+              {...button}
+            />
+          </Card>
+        ))
+      }
+    </Stack>
+  </Container>
+</Section>

package/src/blocks/Products1.astro

@@ -1,6 +1,4 @@
 ---
-import type { ComponentProps } from 'astro/types'
-import { getEntries } from 'astro:content'
 import Button from 'fulldev-ui/components/Button.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
@@ -10,13 +8,10 @@ import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Card from 'fulldev-ui/structures/Card.astro'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
-import { getHref } from 'fulldev-ui/utils/getHref'
 
-interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+interface Props extends BlockSchema {}
 
-const { heading, button, products, ...rest } = Astro.props
-
-const entries = products && (await getEntries(products))
+const { depth = 2, heading, button, cards, ...rest } = Astro.props
 ---
 
 <Section
@@ -28,6 +23,7 @@ const entries = products && (await getEntries(products))
       <Heading
         size="2xl"
         text={heading}
+        {depth}
       />
       <Button
         variant="ghost"
@@ -37,14 +33,15 @@ const entries = products && (await getEntries(products))
     </Element>
     <Element class:list="products-1-cards">
       {
-        entries?.map(({ slug, data: { images, title, price } }) => (
-          <Card href={getHref(slug)}>
+        cards?.map(({ href, images, heading, price }) => (
+          <Card {href}>
             <Image {...images?.[0]} />
             <Element class:list="products-1-card-content">
               <Heading
+                depth={(depth + 1) as 3}
                 as="h3"
                 size="md"
-                text={title}
+                text={heading}
               />
               <Price amount={price} />
             </Element>

package/src/blocks/Projects1.astro

@@ -1,6 +1,4 @@
 ---
-// Heading etc left, image and content right, sticky
-import type { ComponentProps } from 'astro/types'
 import Badges from 'fulldev-ui/components/Badges.astro'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Element from 'fulldev-ui/components/Element.astro'
@@ -8,96 +6,74 @@ 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 Split from 'fulldev-ui/structures/Split.astro'
 
-interface Props extends ComponentProps<typeof Section> {
-  tagline?: string | undefined
-  heading?: string | undefined
-  paragraph?: string | undefined
-  content?: string | undefined
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-  cards?: {
-    image?: ComponentProps<typeof Image> | undefined
-    badges?: ComponentProps<typeof Badges>['badges']
-    heading?: string | undefined
-    paragraph?: string | undefined
-  }[]
-}
+interface Props extends BlockSchema {}
 
-const { tagline, heading, paragraph, buttons, content, cards, ...rest } =
-  Astro.props
+const {
+  depth = 2,
+  tagline,
+  heading,
+  paragraph,
+  buttons,
+  content,
+  cards,
+} = Astro.props
 ---
 
-<Section
-  class:list="projects-1"
-  {...rest}
->
+<Section class="projects-1">
   <Container>
-    <Prose>
-      <Tagline text={tagline} />
-      <Heading
-        as="h2"
-        size="4xl"
-        text={heading}
-      />
-      <Paragraph
-        muted
-        size="lg"
-        text={paragraph}
-      />
-      <Group>
-        <Buttons {buttons} />
-      </Group>
-    </Prose>
-    <Element class:list="projects-1-cards">
-      {
-        cards?.map(({ image, badges, heading, paragraph }) => (
-          <Element class:list="projects-1-card">
-            <Image {...image} />
-            <Group>
-              <Badges
-                size="sm"
-                {badges}
+    <Split align="sticky">
+      <Prose class="max-w-xl">
+        <Tagline text={tagline} />
+        <Heading
+          size="3xl"
+          text={heading}
+          {depth}
+        />
+        <Paragraph text={paragraph} />
+        <Fragment set:html={content} />
+        <Group>
+          <Buttons
+            variant="secondary"
+            {buttons}
+          />
+        </Group>
+      </Prose>
+      <Element class="flex flex-col gap-8">
+        {
+          cards?.map(({ href, image, badges, heading, paragraph }) => (
+            <Element
+              class="flex flex-col gap-2"
+              as="a"
+              {href}
+            >
+              <Image
+                class="mb-4"
+                {...image}
               />
-            </Group>
-            <Heading
-              as="h3"
-              size="xl"
-              text={heading}
-            />
-            <Paragraph text={paragraph} />
-          </Element>
-        ))
-      }
-    </Element>
+              <Group>
+                <Badges
+                  size="sm"
+                  {badges}
+                />
+              </Group>
+              <Heading
+                depth={(depth + 1) as 3}
+                as="h3"
+                size="xl"
+                text={heading}
+              />
+              <Paragraph text={paragraph} />
+            </Element>
+          ))
+        }
+      </Element>
+    </Split>
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .projects-1 {
-      .container {
-        @apply flex flex-col items-start gap-x-gutter lg:grid lg:grid-cols-2;
-      }
-
-      .prose {
-        @apply lg:sticky lg:top-sticky-16 lg:max-w-xl;
-      }
-
-      .projects-1-cards {
-        @apply flex flex-col gap-8;
-      }
-
-      .projects-1-card {
-        @apply flex flex-col gap-2;
-
-        .image {
-          @apply mb-4 rounded-md;
-        }
-      }
-    }
-  }
-</style>

package/src/blocks/Reviews1.astro

@@ -1,9 +1,7 @@
 ---
-import type { ComponentProps } from 'astro/types'
 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 Rating from 'fulldev-ui/components/Rating.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 Card from 'fulldev-ui/structures/Card.astro'
@@ -12,9 +10,9 @@ import Masonry from 'fulldev-ui/structures/Masonry.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
 import Writeup from 'fulldev-ui/structures/Writeup.astro'
 
-interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+interface Props extends BlockSchema {}
 
-const { tagline, heading, paragraph, cards, ...rest } = Astro.props
+const { depth = 2, tagline, heading, paragraph, cards, ...rest } = Astro.props
 ---
 
 <Section
@@ -30,19 +28,21 @@ const { tagline, heading, paragraph, cards, ...rest } = Astro.props
       <Heading
         size="3xl"
         text={heading}
+        {depth}
       />
       <Paragraph text={paragraph} />
     </Writeup>
     <Masonry>
       {
-        cards?.map(({ rating, heading, paragraph, image }) => (
+        cards?.map(({ tagline, avatar, rating, heading, paragraph }) => (
           <Card class="reviews-1-card">
-            <Image {...image} />
-            <Rating
-              size="sm"
-              score={rating}
+            <Proof
+              text={tagline}
+              {rating}
+              {avatar}
             />
             <Heading
+              depth={(depth + 1) as 3}
               as="h3"
               size="md"
               text={heading}

package/src/blocks/Subheader.astro

@@ -1,27 +1,22 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Links from 'fulldev-ui/components/Links.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
 
-interface Props extends HTMLAttributes<'header'> {
-  dark?: boolean | undefined
-  size?: 'sm' | 'md' | 'lg' | undefined
-  links?: ComponentProps<typeof Links>['links']
-}
+interface Props extends BlockSchema {}
 
-const { size = 'sm', links, ...rest } = Astro.props
+const { links, ...rest } = Astro.props
 ---
 
 <Element
   class:list={['subheader']}
   as="subheader"
-  {size}
   {...rest}
 >
   <Element class:list="subheader-container">
     <Links
       class:list="subheader-links"
-      {size}
+      size="sm"
       {links}
     />
   </Element>

package/src/components/Avatar.astro

@@ -0,0 +1,40 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Image from 'fulldev-ui/components/Image.astro'
+
+interface Props extends ComponentProps<typeof Image> {
+  size?: 'sm' | 'md' | 'lg' | undefined
+}
+
+const { size = 'md', ...rest } = Astro.props
+---
+
+<Image
+  class:list={[
+    'avatar',
+    {
+      [`size-${size}`]: size,
+    },
+  ]}
+  {...rest}
+/>
+
+<style is:global>
+  @layer fulldev {
+    .avatar {
+      @apply !rounded-full object-cover;
+
+      &.size-sm {
+        @apply h-9 w-9;
+      }
+
+      &.size-md {
+        @apply h-10 w-10;
+      }
+
+      &.size-lg {
+        @apply h-11 w-11;
+      }
+    }
+  }
+</style>

package/src/components/Avatars.astro

@@ -0,0 +1,20 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Avatar from 'fulldev-ui/components/Avatar.astro'
+
+interface Props extends ComponentProps<typeof Avatar> {
+  avatar?: ComponentProps<typeof Avatar> | undefined
+  avatars?: ComponentProps<typeof Avatar>[] | undefined
+}
+
+const { avatar, avatars, ...rest } = Astro.props
+---
+
+{
+  [avatar, ...(avatars || [])].filter(Boolean).map((avatar) => (
+    <Avatar
+      {...rest}
+      {...avatar}
+    />
+  ))
+}

package/src/components/Badge.astro

@@ -1,7 +1,6 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import Icon from 'fulldev-ui/components/Icon.astro'
 
 interface Props extends HTMLAttributes<'a'>, HTMLAttributes<'div'> {
   variant?: 'primary' | 'secondary' | 'outline' | undefined
@@ -20,53 +19,25 @@ const { variant = 'outline', size = 'md', text, icon, ...rest } = Astro.props
   {size}
   {...rest}
 >
-  <Icon
-    size="sm"
-    name={icon}
-  />
-  <Element as="span">
-    <Fragment set:html={text} />
-    <slot />
-  </Element>
+  <Fragment set:html={text} />
+  <slot />
 </Element>
 
 <style is:global>
   @layer fulldev {
     .badge {
-      @apply inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-full text-sm font-medium leading-none ring-offset-background transition-colors;
-      @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
-      @apply disabled:pointer-events-none disabled:opacity-50;
-
-      &.size-sm {
-        @apply h-6 min-w-6 px-2;
-      }
-
-      &.size-md {
-        @apply h-7 min-w-7 px-3;
-      }
-
-      &.size-lg {
-        @apply h-8 min-w-8 px-3.5;
-      }
+      @apply inline-flex h-6 items-center justify-center whitespace-nowrap rounded-full px-2.5 text-xs font-medium leading-none ring-offset-background;
 
       &.variant-primary {
-        @apply bg-primary text-primary-foreground hover:bg-primary-hover;
+        @apply bg-primary text-primary-foreground;
       }
 
       &.variant-secondary {
-        @apply bg-secondary text-secondary-foreground hover:bg-secondary-hover;
+        @apply bg-secondary text-secondary-foreground;
       }
 
       &.variant-outline {
-        @apply border border-input text-accent-foreground hover:bg-accent;
-      }
-
-      .icon {
-        @apply first:last:absolute;
-      }
-
-      span {
-        @apply text-inherit;
+        @apply border border-input text-accent-foreground;
       }
     }
   }

package/src/components/Block.astro

@@ -1,12 +1,11 @@
 ---
 import { getEntries } from 'astro:content'
 import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import { getHref } from 'fulldev-ui/utils/getHref'
 
 interface Props extends BlockSchema {}
 
-let { _block, pages, ...rest } = Astro.props
-
-pages = pages && (await getEntries(pages))
+let { _block, cards, pages, records, ...rest } = Astro.props
 
 const blocks = {
   ...import.meta.glob('/src/blocks/**/*.astro'),
@@ -18,13 +17,30 @@ const path = Object.keys(blocks).find(
 )
 
 const BlockComponent = path && (await (blocks[path] as any)()).default
+
+cards = [
+  ...(cards || []),
+  ...(await getEntries(records || [])).map(({ data }) => ({
+    ...data,
+  })),
+  ...(await getEntries(pages || [])).map(({ slug, data }) => ({
+    href: getHref(slug),
+    heading: data.title,
+    paragraph: data.description,
+    ...data,
+  })),
+]
 ---
 
 {
   BlockComponent && (
     <BlockComponent
+      {cards}
       {pages}
+      {records}
       {...rest}
-    />
+    >
+      <slot />
+    </BlockComponent>
   )
 }

package/src/components/Channel.astro

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
+import type { ComponentProps } from 'svelte'
 
 interface Props extends HTMLAttributes<'div'> {
   variant?: 'secondary' | 'outline' | undefined
@@ -11,6 +12,7 @@ interface Props extends HTMLAttributes<'div'> {
   text?: string | undefined
   href?: string | undefined
   icon?: string | undefined
+  target?: ComponentProps<typeof Button>['target']
 }
 
 const {
@@ -20,6 +22,7 @@ const {
   icon,
   heading,
   text,
+  target,
   ...rest
 } = Astro.props
 ---
@@ -34,6 +37,7 @@ const {
     {size}
     {href}
     {icon}
+    {target}
   />
   <Element class:list="channel-content">
     <Heading