fulldev-ui 0.6.0-beta.9 → 0.6.0

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/blocks/{Contact1.astro → _Contact1.astro}

@@ -1,6 +1,5 @@
 ---
 // @ts-nocheck
-import type { ComponentProps } from 'astro/types'
 import Badges from 'fulldev-ui/components/Badges.astro'
 import Channel from 'fulldev-ui/components/Channel.astro'
 import Element from 'fulldev-ui/components/Element.astro'
@@ -13,7 +12,7 @@ import Tagline from 'fulldev-ui/components/Tagline.astro'
 import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Section from 'fulldev-ui/structures/Section.astro'
 
-interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+interface Props extends BlockSchema {}
 
 const {
   badge,
@@ -40,7 +39,6 @@ const {
       <Element class:list="contact-1-content">
         <Badges
           size="sm"
-          {badge}
           {badges}
         />
         <Tagline

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,29 @@ 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),
+    ...data,
+    heading: data.title,
+  })),
+]
 ---
 
 {
   BlockComponent && (
     <BlockComponent
+      {cards}
       {pages}
+      {records}
       {...rest}
-    />
+    >
+      <slot />
+    </BlockComponent>
   )
 }

package/src/components/Chip.astro

@@ -0,0 +1,73 @@
+---
+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
+  size?: 'sm' | 'md' | 'lg' | undefined
+  text?: string | undefined
+  icon?: string | undefined
+}
+
+const { variant = 'outline', size = 'md', text, icon, ...rest } = Astro.props
+---
+
+<Element
+  class:list="chip"
+  as={rest.href ? 'a' : 'div'}
+  {variant}
+  {size}
+  {...rest}
+>
+  <Icon
+    size="sm"
+    name={icon}
+  />
+  <Element as="span">
+    <Fragment set:html={text} />
+    <slot />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .chip {
+      @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;
+      }
+
+      &.variant-primary {
+        @apply bg-primary text-primary-foreground hover:bg-primary-hover;
+      }
+
+      &.variant-secondary {
+        @apply bg-secondary text-secondary-foreground hover:bg-secondary-hover;
+      }
+
+      &.variant-outline {
+        @apply border border-input text-accent-foreground hover:bg-accent;
+      }
+
+      .icon {
+        @apply first:last:absolute;
+      }
+
+      span {
+        @apply text-inherit;
+      }
+    }
+  }
+</style>

package/src/components/Element.astro

@@ -66,4 +66,5 @@ const render = show === 'content' ? slot?.trim().length > 0 : show
   @import 'tailwindcss/base' layer(fulldev);
   @import 'fulldev-ui/css/theme' layer(fulldev);
   @import 'tailwindcss/components';
+  @import 'tailwindcss/utilities';
 </style>

package/src/components/Heading.astro

@@ -5,8 +5,8 @@ import Element from 'fulldev-ui/components/Element.astro'
 interface Props
   extends HTMLAttributes<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> {
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined
+  depth?: 1 | 2 | 3 | 4 | 5 | 6 | number | undefined
   text?: string | undefined
-  muted?: boolean | undefined
   size?:
     | 'xs'
     | 'sm'
@@ -21,7 +21,7 @@ interface Props
     | undefined
 }
 
-const { as = 'h2', text, ...rest } = Astro.props
+const { depth = 2, as = `h${depth}`, text, ...rest } = Astro.props
 ---
 
 <Element
@@ -34,11 +34,12 @@ const { as = 'h2', text, ...rest } = Astro.props
 </Element>
 
 <style is:global>
-  .heading {
+  .heading,
+  .prose > :is(h1, h2, h3, h4, h5, h6) {
     @apply scroll-mt-20 font-bold tracking-tight text-foreground;
 
-    &.muted {
-      @apply text-muted-foreground;
+    code {
+      @apply rounded-sm bg-muted px-1 py-0.5 font-mono;
     }
 
     &.size-xs {
@@ -49,30 +50,37 @@ const { as = 'h2', text, ...rest } = Astro.props
       @apply text-sm;
     }
 
+    &:where(.prose > h6),
     &.size-md {
       @apply text-base;
     }
 
+    &:where(.prose > h5),
     &.size-lg {
       @apply text-lg;
     }
 
+    &:where(.prose > h4),
     &.size-xl {
       @apply text-xl;
     }
 
+    &:where(.prose > h3),
     &.size-2xl {
       @apply text-2xl;
     }
 
+    &:where(.prose > h2),
     &.size-3xl {
       @apply text-3xl;
     }
 
+    &:where(.prose > h2:not(:is(h1 ~ h2))),
     &.size-4xl {
       @apply text-4xl;
     }
 
+    &:where(.prose > h1),
     &.size-5xl {
       @apply text-4xl lg:text-5xl;
     }

package/src/components/Image.astro

@@ -42,7 +42,7 @@ const {
 <style is:global>
   @layer fulldev {
     .image {
-      @apply block;
+      @apply block rounded-md;
     }
   }
 </style>

package/src/components/Link.astro

@@ -30,7 +30,7 @@ const { variant = 'muted', size = 'md', text, icon, ...rest } = Astro.props
   @layer fulldev {
     .link,
     .prose-content > *:not(.prose-footer) > a {
-      @apply ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+      @apply cursor-pointer ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
 
       &.variant-primary,
       &:is(.prose-content > *:not(.prose-footer) > a) {

package/src/components/Menu.astro

@@ -19,11 +19,15 @@ const { size = 'md', heading, links, ...rest } = Astro.props
   class:list="menu"
   {...rest}
 >
-  <Heading
-    text={heading}
-    as="h6"
-    {size}
-  />
+  {
+    links && links.length > 0 && (
+      <Heading
+        text={heading}
+        as="h6"
+        {size}
+      />
+    )
+  }
   <Links
     {size}
     {links}

package/src/components/Proof.astro

@@ -0,0 +1,52 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Avatars from 'fulldev-ui/components/Avatars.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Label from 'fulldev-ui/components/Label.astro'
+import Rating from 'fulldev-ui/components/Rating.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  avatar?: ComponentProps<typeof Avatars>['avatar']
+  avatars?: ComponentProps<typeof Avatars>['avatars']
+  rating?: number | undefined
+  text?: string | undefined
+}
+
+const { avatar, avatars, rating, text, ...rest } = Astro.props
+---
+
+<Element
+  class:list="proof"
+  {...rest}
+>
+  <Avatars
+    {avatar}
+    {avatars}
+  />
+  <Element class="proof-segment">
+    <Rating
+      score={rating}
+      size="sm"
+    />
+    <Label
+      size="md"
+      text={text}
+    />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .proof {
+      @apply flex items-center;
+
+      > .avatar {
+        @apply -mr-5 last-of-type:mr-2;
+      }
+
+      .proof-segment {
+        @apply flex flex-col gap-1;
+      }
+    }
+  }
+</style>

package/src/components/Toc.astro

@@ -2,21 +2,18 @@
 import type { MarkdownHeading } from 'astro'
 import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
 import Link from 'fulldev-ui/components/Link.astro'
+import Links from './Links.astro'
 
 interface Props extends HTMLAttributes<'div'> {
-  headings?: MarkdownHeading[] | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
   heading?: string | undefined
+  headings?: MarkdownHeading[] | undefined
 }
 
-const { headings, heading, ...rest } = Astro.props
-
-const filteredHeadings = headings?.filter(
-  (heading: any) => heading.depth >= 2 && heading.depth <= 4
-)
+const { size = 'md', heading, headings, ...rest } = Astro.props
 
-const h1 = headings?.find((heading: any) => heading.depth === 1)
+const filteredHeadings = headings?.filter((heading: any) => heading.depth <= 4)
 
 const links = filteredHeadings?.map((button: any) => ({
   text: button.text,
@@ -27,34 +24,35 @@ const links = filteredHeadings?.map((button: any) => ({
 
 <Element
   class:list="toc"
-  show={filteredHeadings?.length}
   {...rest}
 >
-  <Heading text={h1?.text || heading} />
-  {
-    links?.map((link) => (
-      <Link
-        variant="muted"
-        size="sm"
-        {...link}
-      />
-    ))
-  }
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .toc {
-      @apply sticky bottom-0 top-sticky-16 z-10 hidden w-48 shrink-0 flex-col items-start justify-start gap-3 overflow-y-auto md:flex;
-      @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
-
-      .depth-3 {
-        @apply pl-3;
-      }
-
-      .depth-4 {
-        @apply relative pl-6;
+  <Link
+    text={heading}
+    href="#"
+    size="sm"
+  />
+  <Links
+    {size}
+    {links}
+  />
+
+  <style is:global>
+    @layer fulldev {
+      .toc {
+        @apply flex flex-col gap-2;
+
+        .link:first-child {
+          @apply font-bold text-foreground;
+        }
+
+        .link.depth-3 {
+          @apply pl-3;
+        }
+
+        .link.depth-4 {
+          @apply pl-6;
+        }
       }
     }
-  }
-</style>
+  </style>
+</Element>

package/src/content/config.ts

@@ -1,4 +1,5 @@
 import { defineCollection } from 'astro:content'
+import { cardSchema } from 'fulldev-ui/schemas/card.ts'
 import { pageSchema } from 'fulldev-ui/schemas/page.ts'
 
 export const collections = {
@@ -10,4 +11,8 @@ export const collections = {
     type: 'data',
     schema: pageSchema,
   }),
+  records: defineCollection({
+    type: 'data',
+    schema: cardSchema,
+  }),
 }