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

package/src/blocks/_Hero.astro

@@ -0,0 +1,245 @@
+<!-- ---
+import type { ComponentProps,HTMLAttributes,HTMLTag } from 'astro/types'
+import Badge from 'fulldev-ui/components/Badge.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,{
+default as Lead,
+} from 'fulldev-ui/components/Paragraph.astro'
+import Rating from 'fulldev-ui/components/Rating.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+
+interface Props extends HTMLAttributes<'section'> {
+  rating?: ComponentProps<typeof Rating> | undefined
+  badge?: ComponentProps<typeof Badge> | undefined
+  tagline?: ComponentProps<typeof Tagline>['text']
+  heading?: ComponentProps<typeof Heading>['text']
+  lead?: ComponentProps<typeof Lead>['text']
+  paragraph?: ComponentProps<typeof Paragraph>['text']
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+  image?: ComponentProps<typeof Image>['id']
+  level?: ComponentProps<typeof Heading>['level']
+  as?: HTMLTag
+  size?: 'sm' | 'md' | 'lg' | undefined
+  variant?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | undefined
+}
+
+const {
+  as = 'section',
+  size = 'lg',
+  variant = 1,
+  level = 1,
+  rating,
+  tagline,
+  badge,
+  heading,
+  lead,
+  paragraph,
+  buttons,
+  image,
+  ...rest
+} = Astro.props
+---
+
+<Element
+  class:list="hero"
+  {as}
+  {size}
+  {variant}
+  {...rest}
+>
+  <Element class:list="hero-container">
+    <Element class:list="hero-segment">
+      <Element class:list="hero-content">
+        <Rating
+          {size}
+          {...rating}
+        />
+        <Tagline
+          text={tagline}
+          {size}
+        />
+        <Badge
+          {size}
+          {...badge}
+        />
+        <Heading
+          text={heading}
+          {level}
+          {size}
+        />
+        <Paragraph
+          text={lead}
+          {size}
+        />
+        <Paragraph
+          text={paragraph}
+          {size}
+        />
+        <slot name="content" />
+      </Element>
+      <Buttons
+        variant="primary"
+        {size}
+        {buttons}
+      />
+      <slot name="segment" />
+    </Element>
+    <Image
+      class:list="hero-image"
+      {...image}
+    />
+    <slot />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .hero {
+      @apply relative w-full;
+
+      .hero-container {
+        @apply flex h-full w-full flex-col;
+      }
+
+      .hero-segment {
+        @apply z-10 flex flex-col items-start gap-8;
+      }
+
+      .hero-content {
+        @apply flex max-w-screen-md flex-col gap-6;
+      }
+
+      &.dark {
+        @apply bg-background;
+      }
+
+      /* Column left aligned */
+      &.variant-1 {
+        .hero-container {
+          @apply container py-8;
+        }
+
+        .hero-segment {
+          @apply gap-8 py-16;
+        }
+
+        .content-image {
+          @apply rounded-lg;
+        }
+      }
+
+      /* Column centered */
+      &.variant-2 {
+        .hero-container {
+          @apply container items-center py-8;
+        }
+
+        .hero-segment {
+          @apply items-center py-16;
+        }
+
+        .hero-content {
+          @apply items-center text-center;
+        }
+
+        .content-image {
+          @apply rounded-lg;
+        }
+      }
+
+      /* Spread */
+      &.variant-3 {
+        .hero-container {
+          @apply container items-center py-8;
+        }
+
+        .hero-segment {
+          @apply w-full flex-row flex-wrap items-end justify-between py-16;
+        }
+
+        .content-image {
+          @apply rounded-lg;
+        }
+      }
+
+      /* Split */
+      &.variant-4 {
+        .hero-container {
+          @apply container py-8 lg:grid lg:grid-cols-2 lg:items-center;
+        }
+
+        .content-image {
+          @apply rounded-lg;
+        }
+      }
+
+      /* Split fill */
+      &.variant-5 {
+        @apply min-h-hero;
+
+        .hero-container {
+          @apply container px-0 lg:grid lg:grid-cols-2 lg:items-center;
+        }
+
+        .hero-segment {
+          @apply w-auto max-w-screen-md px-gutter pb-16 pt-24 lg:pb-24;
+        }
+
+        .hero-image {
+          @apply right-0 top-0 h-full object-cover lg:absolute lg:w-1/2;
+        }
+      }
+
+      /* Background left */
+      &.variant-6 {
+        @apply min-h-hero;
+
+        .hero-container {
+          @apply container justify-center py-16;
+        }
+
+        .hero-image {
+          @apply absolute inset-0 h-full w-full object-cover opacity-30;
+        }
+      }
+
+      /* Background center */
+      &.variant-7 {
+        @apply min-h-hero;
+
+        .hero-container {
+          @apply container items-center justify-center py-16;
+        }
+
+        .hero-image {
+          @apply absolute inset-0 h-full w-full object-cover opacity-30;
+        }
+
+        .hero-segment,
+        .hero-content {
+          @apply items-center text-center;
+        }
+      }
+
+      /* Background spread */
+      &.variant-8 {
+        @apply min-h-hero;
+
+        .hero-container {
+          @apply container items-center justify-end py-16;
+        }
+
+        .hero-image {
+          @apply absolute inset-0 h-full w-full object-cover opacity-30;
+        }
+
+        .hero-segment {
+          @apply w-full flex-row flex-wrap items-end justify-between;
+        }
+      }
+    }
+  }
+</style> -->

package/src/components/Avatar.astro

@@ -1,26 +1,45 @@
 ---
 import type { ComponentProps } from 'astro/types'
 import Image from 'fulldev-ui/components/Image.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-interface Props extends ComponentProps<typeof Image> {}
+interface Props extends GlobalProps, ComponentProps<typeof Image> {
+  size?: 'sm' | 'md' | 'lg' | undefined
+}
 
-const { ...rest } = Astro.props
+const { size = 'md', ...rest } = Astro.props
+
+const sizeMap = {
+  sm: 36,
+  md: 40,
+  lg: 44,
+}
 ---
 
 <Image
   class:list={'avatar'}
+  width={sizeMap[size]}
+  height={sizeMap[size]}
+  {size}
   {...rest}
 />
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .avatar {
-      display: block;
-      border: 1px solid var(--base-a6);
-      border-radius: 999px;
-      width: calc(2.8 * var(--space-4));
-      height: calc(2.8 * var(--space-4));
-      object-fit: cover;
+      @apply aspect-square shrink-0 rounded-full bg-muted object-cover;
+
+      &.size-sm {
+        @apply size-9;
+      }
+
+      &.size-md {
+        @apply size-10;
+      }
+
+      &.size-lg {
+        @apply size-11;
+      }
     }
   }
 </style>

package/src/components/Avatars.astro

@@ -0,0 +1,36 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import Avatar from './Avatar.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  size?: any
+  avatars?: ComponentProps<typeof Avatar>[] | undefined
+  avatar?: ComponentProps<typeof Avatar>['id'] | undefined
+}
+
+const { size = 'md', avatars = [], avatar, ...rest } = Astro.props
+---
+
+<Element
+  class:list="avatars"
+  {size}
+  {...rest}
+>
+  {
+    [avatar, ...avatars].filter(Boolean).map((id) => (
+      <Avatar
+        {size}
+        {id}
+      />
+    ))
+  }
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .avatars {
+      @apply inline-flex -space-x-3;
+    }
+  }
+</style>

package/src/components/Badge.astro

@@ -1,45 +1,84 @@
 ---
-import type { ComponentProps } from 'astro/types'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
-import Button from './Button.astro'
+import type { BadgeSchema } from 'fulldev-ui/schemas/components/badge'
 
-interface Props extends ComponentProps<typeof Button> {}
+interface Props
+  extends HTMLAttributes<'button'>,
+    Omit<HTMLAttributes<'a'>, 'href' | 'target'>,
+    BadgeSchema {
+  as?: HTMLTag
+  type?: HTMLAttributes<'button'>['type'] & HTMLAttributes<'a'>['type']
+  reverse?: boolean | undefined
+}
 
 const {
-  variant = 'tertiary',
-  color = 'base',
   href,
+  as = href ? 'a' : 'button',
+  variant = 'outline',
+  size = 'md',
   text,
   icon,
   ...rest
 } = Astro.props
 ---
 
-<Button
+<Element
   class:list="badge"
-  {variant}
+  {as}
   {href}
-  {color}
+  {variant}
+  {size}
   {...rest}
 >
-  <slot />
-  <Fragment set:html={text} />
-  <Icon name={icon} />
-</Button>
+  <Icon
+    size="sm"
+    name={icon}
+  />
+  <Element as="span">
+    <Fragment set:html={text} />
+    <slot />
+  </Element>
+</Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
-    .button.badge {
-      gap: var(--space-2);
-      transition: all 0.15s ease;
-      border: 1px solid var(--color-a7);
-      border-radius: 999px;
-      padding: 0 var(--space-3);
-      height: calc(var(--text-1) + 2 * var(--space-2));
-      font-size: var(--text-1);
-
-      &:hover {
-        border-color: var(--color-a8);
+    .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;
+      }
+
+      &.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;
       }
     }
   }

package/src/components/Badges.astro

@@ -1,26 +1,22 @@
 ---
 import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
 import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
 import Badge from './Badge.astro'
 
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  variant?: ComponentProps<typeof Button>['variant']
+interface Props extends HTMLAttributes<'div'> {
+  variant?: ComponentProps<typeof Badge>['variant']
+  size?: ComponentProps<typeof Badge>['size']
   badges?: ComponentProps<typeof Badge>[] | undefined
+  badge?: ComponentProps<typeof Badge> | undefined
 }
 
-const { variant = 'secondary', badges, ...rest } = Astro.props
-
-const buttonVariant = (i: number) => {
-  if (variant === 'primary' && i === 0) return 'primary'
-  else if (variant === 'primary' && i === 1) return 'secondary'
-  else if (variant === 'primary' && i > 1) return 'tertiary'
-  else if (variant === 'secondary' && i === 0) return 'secondary'
-  else if (variant === 'secondary' && i > 0) return 'tertiary'
-  else if (variant === 'tertiary') return 'tertiary'
-  else return 'tertiary'
-}
+const {
+  variant = 'outline',
+  size = 'md',
+  badges = [],
+  badge,
+  ...rest
+} = Astro.props
 ---
 
 <Element
@@ -28,23 +24,20 @@ const buttonVariant = (i: number) => {
   {...rest}
 >
   {
-    badges?.map((badge, i) => (
+    [badge, ...badges].filter(Boolean).map((badge) => (
       <Badge
-        variant={variant === 'link' ? 'link' : buttonVariant(i)}
+        {variant}
+        {size}
         {...badge}
       />
     ))
   }
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .badges {
-      display: inline-flex;
-      flex-wrap: wrap;
-      justify-content: stretch;
-      gap: var(--space-2);
-      width: auto;
+      @apply inline-flex w-auto flex-wrap justify-stretch gap-1.5;
     }
   }
 </style>

package/src/components/Block.astro

@@ -0,0 +1,30 @@
+---
+import { getEntries } from 'astro:content'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends BlockSchema {}
+
+let { _block, pages, ...rest } = Astro.props
+
+pages = pages && (await getEntries(pages))
+
+const blocks = {
+  ...import.meta.glob('/src/blocks/**/*.astro'),
+  ...import.meta.glob('../blocks/**/*.astro'),
+}
+
+const path = Object.keys(blocks).find(
+  (path) => path.split('/').pop()?.split('.')[0] === _block
+)
+
+const BlockComponent = path && (await (blocks[path] as any)()).default
+---
+
+{
+  BlockComponent && (
+    <BlockComponent
+      {pages}
+      {...rest}
+    />
+  )
+}

package/src/components/Blocks.astro

@@ -0,0 +1,26 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Block from 'fulldev-ui/components/Block.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  blocks?: ComponentProps<typeof Block>[] | undefined
+}
+
+const { blocks, ...rest } = Astro.props
+---
+
+<Element
+  class:list="blocks"
+  {...rest}
+>
+  {blocks?.map((block) => <Block {...block} />)}
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .blocks {
+      @apply flex flex-col;
+    }
+  }
+</style>

package/src/components/Breadcrumb.astro

@@ -0,0 +1,58 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import Element from 'fulldev-ui/components/Element.astro'
+import Icon from 'fulldev-ui/components/Icon.astro'
+import Link from 'fulldev-ui/components/Link.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+  slug?: CollectionEntry<'pages'>['slug'] | undefined
+}
+
+const { size = 'sm', slug, ...rest } = Astro.props
+---
+
+<Element
+  class:list="breadcrumb"
+  {...rest}
+>
+  <Link
+    as="a"
+    href="/"
+    icon="home"
+    {size}
+  />
+  {
+    slug?.split('/').map((part, i) => (
+      <>
+        <Icon
+          {size}
+          name="chevron-right"
+        />
+        <Link
+          {size}
+          variant="muted"
+          href={`/${slug
+            ?.split('/')
+            .slice(0, i + 1)
+            .join('/')}/`}
+        >
+          {part}
+        </Link>
+      </>
+    ))
+  }
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .breadcrumb {
+      @apply flex items-center gap-2;
+
+      .icon {
+        @apply text-muted-foreground;
+      }
+    }
+  }
+</style>