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

package/src/blocks/_Contact.astro

@@ -0,0 +1,112 @@
+---
+import Button from 'fulldev-ui/components/Button.astro'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Channels from 'fulldev-ui/components/Channels.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 Input from 'fulldev-ui/components/Input.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Socials from 'fulldev-ui/components/Socials.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Text from 'fulldev-ui/components/Text.astro'
+import Textarea from 'fulldev-ui/components/Textarea.astro'
+
+const {
+  heading,
+  form,
+  text,
+  tagline,
+  googleMaps,
+  buttons,
+  socials,
+  position,
+  image,
+  channels,
+  level = 1,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list="contact"
+  structure="split"
+  {...rest}
+>
+  <Element class:list="column">
+    <Tagline text={tagline} />
+    <Heading
+      size={'sm'}
+      level={level}
+      text={heading}
+    />
+    <Text text={text} />
+    <Buttons {buttons} />
+    <Channels {channels} />
+    <Socials {socials} />
+    <Form
+      action="/thank-you"
+      method="POST"
+    >
+      {
+        form.fields.map((field: any) => {
+          if (field.type === 'textarea') {
+            return (
+              <Textarea
+                label={field.label}
+                id={field.name}
+                name={field.name}
+                required={field.required}
+              />
+            )
+          }
+          return (
+            <Input
+              label={field.label}
+              id={field.name}
+              name={field.name}
+              type={field.type}
+              required={field.required}
+            />
+          )
+        })
+      }
+      <Button
+        type="submit"
+        variant="primary"
+        text={form.button}
+      />
+    </Form>
+  </Element>
+
+  <Image
+    {position}
+    {...image}
+  />
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .oldcontact {
+      .column {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      > .column {
+        gap: var(--space-5);
+      }
+
+      .channel + .channel {
+        margin-top: var(--space-3) !important;
+      }
+
+      .socials {
+        display: flex;
+        gap: var(--space-2);
+      }
+    }
+  }
+</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,92 @@
 ---
-import type { ComponentProps } from 'astro/types'
+import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import { getEntry } from 'astro:content'
+import Element from 'fulldev-ui/components/Element.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
-import Button from './Button.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-interface Props extends ComponentProps<typeof Button> {}
+interface Props
+  extends GlobalProps,
+    HTMLAttributes<'div'>,
+    HTMLAttributes<'a'> {
+  as?: HTMLTag
+  href?: string | null | undefined
+  icon?: ComponentProps<typeof Icon>['name']
+  slug?: CollectionEntry<'pages'>['slug'] | undefined
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | undefined
+  text?: string | undefined
+}
 
 const {
-  variant = 'tertiary',
-  color = 'base',
-  href,
-  text,
+  slug,
+  href = slug === 'index' ? '/' : slug ? `/${slug}/` : undefined,
+  text = slug ? (await getEntry('pages', slug)).data.title : undefined,
+  as = href ? 'a' : 'div',
+  target = href?.startsWith('http') ? '_blank' : undefined,
+  variant = 'outline',
+  size = 'md',
   icon,
   ...rest
 } = Astro.props
 ---
 
-<Button
+<Element
   class:list="badge"
-  {variant}
+  {as}
   {href}
-  {color}
+  {target}
+  {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/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>

package/src/components/Button.astro

@@ -1,8 +1,7 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
 import type { CollectionEntry } from 'astro:content'
 import { getEntry } from 'astro:content'
-import Avatar from 'fulldev-ui/components/Avatar.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
@@ -10,151 +9,96 @@ import type { GlobalProps } from 'fulldev-ui/types/global-props'
 interface Props
   extends GlobalProps,
     HTMLAttributes<'button'>,
-    HTMLAttributes<'a'>,
-    HTMLAttributes<'label'> {
+    HTMLAttributes<'a'> {
+  as?: HTMLTag
+  href?: string | null | undefined
   type?: HTMLAttributes<'button'>['type'] & HTMLAttributes<'a'>['type']
   icon?: ComponentProps<typeof Icon>['name']
-  avatar?: ComponentProps<typeof Avatar>['src']
   slug?: CollectionEntry<'pages'>['slug'] | undefined
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'link' | undefined
-  reverse?: boolean | undefined
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | undefined
   text?: string | undefined
+  reverse?: boolean | undefined
 }
 
-const { variant = 'secondary', slug, text, avatar, icon, ...rest } = Astro.props
-
-const entry = slug && !text ? await getEntry('pages', slug) : undefined
-const hrefString =
-  rest.href && typeof rest.href !== 'string' ? rest.href.href : rest.href
-const href =
-  hrefString ?? (slug ? (slug === 'index' ? '/' : `/${slug}/`) : undefined)
-const as = href ? 'a' : rest.for ? 'label' : 'button'
-const color =
-  variant === 'link' && href === Astro.url.pathname ? 'brand' : rest.color
+const {
+  slug,
+  href = slug === 'index' ? '/' : slug ? `/${slug}/` : undefined,
+  text = slug ? (await getEntry('pages', slug)).data.title : undefined,
+  as = href ? 'a' : 'button',
+  type = as === 'button' ? 'button' : undefined,
+  target = href?.startsWith('http') ? '_blank' : undefined,
+  variant = 'primary',
+  size = 'md',
+  icon,
+  reverse,
+  ...rest
+} = Astro.props
 ---
 
 <Element
-  class:list="button"
-  _target={href?.startsWith('http') ? '_blank' : undefined}
-  type={as === 'button' ? 'button' : undefined}
-  {as}
+  class:list={['button']}
   {href}
-  {color}
+  {as}
+  {type}
+  {target}
   {variant}
+  {size}
+  {reverse}
   {...rest}
 >
-  <slot>
-    <Avatar src={avatar} />
-    <Icon name={icon} />
-    <Fragment set:html={text ?? entry?.data.title} />
-  </slot>
+  <Icon name={icon} />
+  <Element as="span">
+    <Fragment set:html={text} />
+    <slot />
+  </Element>
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .button {
-      display: inline-flex;
-      flex-shrink: 0;
-      justify-content: center;
-      align-items: center;
-      vertical-align: top;
-      gap: var(--space-2);
-      appearance: none;
-      transition: all 0.15s ease;
-      cursor: pointer;
-      outline: none;
-      box-shadow: none;
-      border-width: 0px;
-      border-radius: var(--radius-1);
-      padding: 0 var(--space-4);
-      height: calc(var(--text-2) + 2 * var(--space-4));
-      color: var(--text);
-      font-weight: 500;
-      font-size: var(--text-2);
-      line-height: 1;
-      text-align: center;
-      text-decoration: none;
-      white-space: nowrap;
-
-      .avatar {
-        margin-right: calc(-1 * (var(--space-4)));
-        margin-left: var(--space-1);
-        padding: calc(var(--space-1) / 3);
-        width: calc(var(--text-2) + 2 * var(--space-4)) !important;
-        height: calc(var(--text-2) + 2 * var(--space-4)) !important;
-      }
+      @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md 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;
 
-      &:focus-visible {
-        outline: 2px solid var(--focus) !important;
-        outline-offset: 2px;
+      &.size-sm {
+        @apply h-9 min-h-9 min-w-9 px-2;
       }
 
-      &.reverse > * {
-        order: 999;
+      &.size-md {
+        @apply h-10 min-h-10 min-w-10 px-4;
       }
 
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        pointer-events: none;
+      &.size-lg {
+        @apply h-11 min-h-11 min-w-11 px-5;
       }
 
       &.variant-primary {
-        background-color: var(--color-9);
-        color: var(--color-contrast);
-
-        .icon {
-          color: inherit;
-        }
-
-        &:hover,
-        &:active {
-          background-color: var(--color-10);
-        }
+        @apply bg-primary text-primary-foreground hover:bg-primary-hover;
       }
 
       &.variant-secondary {
-        border-style: solid;
-        border-color: var(--color-7);
-        background-color: var(--color-3);
-        color: var(--color-11);
-
-        &:hover {
-          border-color: var(--color-8);
-          background-color: var(--color-4);
-        }
-
-        &:active {
-          border-color: var(--color-8);
-          background-color: var(--color-5);
-        }
+        @apply bg-secondary text-secondary-foreground hover:bg-secondary-hover;
       }
 
-      &.variant-tertiary {
-        color: var(--color-11);
-
-        &:hover {
-          background-color: var(--color-3);
-        }
+      &.variant-outline {
+        @apply border border-input text-accent-foreground hover:bg-accent;
+      }
 
-        &:active {
-          background-color: var(--color-4);
-        }
+      &.variant-ghost {
+        @apply text-accent-foreground hover:bg-accent;
       }
 
-      &.variant-link {
-        justify-content: flex-start;
-        padding: 0;
-        height: auto;
-        color: var(--color-11);
-        font-weight: 400;
+      .icon {
+        @apply first:last:absolute;
+      }
 
-        &:hover {
-          color: var(--color-12);
-        }
+      span {
+        @apply text-inherit;
+      }
 
-        &:active {
-          color: var(--color-12);
+      &.reverse {
+        .icon {
+          @apply order-last;
         }
       }
     }