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

package/src/components/Button.astro

@@ -1,160 +1,90 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import { getEntry } from 'astro:content'
-import Avatar from 'fulldev-ui/components/Avatar.astro'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
 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'
+import type { ButtonSchema } from 'fulldev-ui/schemas/components/button'
 
 interface Props
-  extends GlobalProps,
-    HTMLAttributes<'button'>,
-    HTMLAttributes<'a'>,
-    HTMLAttributes<'label'> {
+  extends HTMLAttributes<'button'>,
+    Omit<HTMLAttributes<'a'>, 'href' | 'target'>,
+    ButtonSchema {
+  as?: HTMLTag
   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
-  text?: string | undefined
+  for?: HTMLAttributes<'label'>['for']
 }
 
-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 {
+  href,
+  as = href ? 'a' : 'button',
+  variant = 'primary',
+  size = 'md',
+  text,
+  icon,
+  ...rest
+} = Astro.props
 ---
 
 <Element
-  class:list="button"
-  _target={href?.startsWith('http') ? '_blank' : undefined}
-  type={as === 'button' ? 'button' : undefined}
+  class:list={['button']}
   {as}
   {href}
-  {color}
   {variant}
+  {size}
   {...rest}
 >
-  <slot>
-    <Avatar src={avatar} />
-    <Icon name={icon} />
-    <Fragment set:html={text ?? entry?.data.title} />
-  </slot>
+  <Element as="span">
+    <Fragment set:html={text} />
+    <slot />
+  </Element>
+  <Icon name={icon} />
 </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 cursor-pointer 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;
         }
       }
     }

package/src/components/Buttons.astro

@@ -6,44 +6,54 @@ import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
 interface Props extends GlobalProps, HTMLAttributes<'div'> {
   variant?: ComponentProps<typeof Button>['variant']
+  button?: ComponentProps<typeof Button> | undefined
   buttons?: ComponentProps<typeof Button>[] | undefined
+  direction?: 'row' | 'column' | undefined
 }
 
-const { variant = 'secondary', buttons, ...rest } = Astro.props
+const {
+  direction = 'row',
+  variant = 'primary',
+  buttons = [],
+  button,
+  size,
+  ...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 === 'primary' && i > 1) return 'ghost'
   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'
+  else return 'ghost'
 }
 ---
 
 <Element
   class:list="buttons"
+  {direction}
   {...rest}
 >
   {
-    buttons?.map((button, i) => (
+    [button, ...buttons].filter(Boolean).map((button, i) => (
       <Button
-        variant={variant === 'link' ? 'link' : buttonVariant(i)}
+        variant={buttonVariant(i)}
+        {size}
         {...button}
       />
     ))
   }
+  <slot />
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .buttons {
-      display: inline-flex;
-      flex-wrap: wrap;
-      justify-content: stretch;
-      gap: var(--space-2);
-      width: auto;
+      @apply inline-flex flex-wrap justify-stretch gap-2;
+
+      &.direction-column {
+        @apply flex-col items-start;
+      }
     }
   }
 </style>

package/src/components/Card.astro

@@ -1,158 +1,30 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import { getEntry } from 'astro:content'
-import Button from 'fulldev-ui/components/Button.astro'
-import Buttons from 'fulldev-ui/components/Buttons.astro'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import Writeup from 'fulldev-ui/components/Writeup.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Icon from './Icon.astro'
-import Price from './Price.astro'
 
-interface Props
-  extends GlobalProps,
-    ComponentProps<typeof Writeup>,
-    Omit<HTMLAttributes<'a'>, 'title'> {
-  image?: ComponentProps<typeof Image>
-  images?: ComponentProps<typeof Image>[]
-  position?: ComponentProps<typeof Image>['position']
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-  button?: ComponentProps<typeof Button> | undefined
-  variant?: ComponentProps<typeof Button>['variant']
-  align?: ComponentProps<typeof Writeup>['align']
-  icon?: ComponentProps<typeof Icon>['name']
-  price?: ComponentProps<typeof Price>['value']
-  slug?: CollectionEntry<'pages'>['slug'] | undefined
-  id?: any
-  panel?: boolean | undefined
-  title?: ComponentProps<typeof Writeup>['heading']
+interface Props extends HTMLAttributes<'a'>, HTMLAttributes<'div'> {
+  as?: HTMLTag
 }
 
-const { slug } = Astro.props
-const page = slug ? (await getEntry('pages', slug)).data : {}
-
-const entryProps = {
-  heading: page.title,
-  text: page.description,
-  href: slug ? `/${slug}/` : undefined,
-  ...page,
-}
-
-const {
-  align = 'start',
-  level = 4,
-  href,
-  badge,
-  tagline,
-  rating,
-  heading,
-  text,
-  variant,
-  price,
-  list,
-  button,
-  buttons,
-  panel,
-  image,
-  icon,
-  title,
-  images,
-  position,
-  ...rest
-} = {
-  ...entryProps,
-  ...Astro.props,
-}
+const { href, as = href ? 'a' : 'div', ...rest } = Astro.props
 ---
 
 <Element
   class:list="card"
-  as={href ? 'a' : 'div'}
+  {as}
   {href}
-  {align}
-  {panel}
   {...rest}
 >
-  <slot name="image">
-    <Image
-      position={panel ? position : undefined}
-      {...image || images?.[0]}
-    />
-  </slot>
-  <slot name="icon">
-    <Icon name={icon} />
-  </slot>
-  <slot name="writeup">
-    <Writeup
-      heading={heading || title}
-      {level}
-      {rating}
-      {badge}
-      {tagline}
-      {text}
-      {list}
-    />
-    <Price value={price} />
-  </slot>
-  <slot name="buttons">
-    <Button
-      {variant}
-      {...button}
-    />
-    <Buttons
-      {variant}
-      {buttons}
-    />
-  </slot>
   <slot />
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .card {
-      --inset-top: 0px;
-      --inset-left: 0px;
-      --inset-right: 0px;
-      --inset-bottom: 0px;
-
-      display: flex;
-      position: relative;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--space-4);
-      text-decoration: none;
-
-      &[href] {
-        cursor: pointer;
-
-        > .image {
-          transition: all 0.2s ease;
-        }
-
-        &:hover {
-          > .image {
-            opacity: 0.8;
-          }
-        }
-      }
-
-      &.panel {
-        --inset-top: var(--space-4);
-        --inset-left: var(--space-4);
-        --inset-right: var(--space-4);
-        --inset-bottom: 0px;
-
-        border: 1px solid var(--color-a6);
-        border-radius: var(--radius-2);
-        background-color: var(--color-2);
-        padding: var(--space-4);
-        overflow: hidden;
+      @apply w-full rounded-lg border bg-card p-4 text-card-foreground;
 
-        &[href]:hover {
-          border: 1px solid var(--color-a7);
-        }
+      &:is(a[href]) {
+        @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
       }
     }
   }

package/src/components/Cards.astro

@@ -12,19 +12,30 @@ interface Props extends GlobalProps, HTMLAttributes<'div'> {
   structure?: 'grid' | 'masonry' | 'stack' | 'carousel' | 'bento' | undefined
 }
 
-const { level, panel, position, cards, ...rest } = Astro.props
+const {
+  structure = 'grid',
+  level,
+  panel,
+  position,
+  cards,
+  size,
+  ...rest
+} = Astro.props
 ---
 
 <Element
   class:list="cards"
   {panel}
+  {size}
+  {structure}
   {...rest}
 >
   {
     cards?.map((card: any) => (
       <Card
-        {level}
+        level={level + 3}
         {panel}
+        {size}
         {position}
         {...card}
       />
@@ -32,51 +43,26 @@ const { level, panel, position, cards, ...rest } = Astro.props
   }
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .cards {
-      --column-width: calc(21 * var(--space-4));
-      --gap: var(--space-5);
-
-      position: relative;
-      width: 100%;
-
-      &.panel {
-        --gap: var(--space-4);
-      }
-
-      &.position-inset {
-        margin-right: calc(var(--inset-right) * -1);
-        margin-left: calc(var(--inset-left) * -1);
-        padding-right: var(--inset-right);
-        padding-left: var(--inset-left);
-        width: calc(100% + var(--inset-left) + var(--inset-right));
-      }
+      --column-width: 20rem;
+      @apply relative w-full;
 
       &.structure-grid {
-        display: grid;
-        grid-template-columns: repeat(
-          auto-fill,
-          minmax(var(--column-width), 1fr)
-        );
-        gap: var(--gap);
-        width: 100%;
+        @apply grid w-full grid-cols-[repeat(auto-fill,minmax(var(--column-width),1fr))] gap-5;
       }
 
       &.structure-masonry {
-        column-gap: var(--gap);
+        @apply w-full columns-6 break-inside-avoid gap-5 space-y-5;
         column-fill: balance;
         column-width: var(--column-width);
-        column-count: 6;
-        break-inside: avoid;
-        width: 100%;
 
-        & > .root + .root,
-        & > * + * {
+        /* & > * + * {
           break-inside: avoid;
           margin-top: var(--gap);
           margin-bottom: var(--gap);
-        }
+        } */
       }
 
       &.structure-carousel {
@@ -88,7 +74,7 @@ const { level, panel, position, cards, ...rest } = Astro.props
         scroll-behavior: smooth;
         scroll-snap-type: x mandatory;
 
-        > .root {
+        > * {
           flex-grow: 0;
           flex-shrink: 0;
           width: var(--column-width);
@@ -130,6 +116,18 @@ const { level, panel, position, cards, ...rest } = Astro.props
           }
         }
       }
+
+      &.size-sm {
+        --column-width: 16rem;
+      }
+
+      &.size-md {
+        --column-width: 20rem;
+      }
+
+      &.size-lg {
+        --column-width: 26rem;
+      }
     }
   }
 </style>

package/src/components/Carousel.astro

@@ -0,0 +1,106 @@
+---
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props {}
+---
+
+<script>
+  function scrollLeft(content: HTMLElement) {
+    content.scrollLeft -= content.clientWidth
+  }
+
+  function scrollRight(content: HTMLElement) {
+    content.scrollLeft += content.clientWidth
+  }
+
+  const updateButtons = (
+    left: HTMLElement,
+    right: HTMLElement,
+    content: HTMLElement
+  ) => {
+    const isScrollable = content.scrollWidth > content.clientWidth
+    const atStart = content.scrollLeft <= 0
+    const atEnd =
+      content.scrollLeft >= content.scrollWidth - content.clientWidth
+
+    left?.classList.toggle('hide', !isScrollable || atStart)
+    right?.classList.toggle('hide', !isScrollable || atEnd)
+  }
+
+  document.addEventListener('astro:page-load', () => {
+    const carousels = document.querySelectorAll('.carousel')
+    carousels.forEach((carousel) => {
+      const left = carousel?.querySelector('.carousel-left')
+      const right = carousel?.querySelector('.carousel-right')
+      const content = carousel?.querySelector('.carousel-content')
+
+      if (!(content instanceof HTMLElement)) return
+      if (!(left instanceof HTMLElement)) return
+      if (!(right instanceof HTMLElement)) return
+
+      left?.addEventListener('click', () => scrollLeft(content))
+      right?.addEventListener('click', () => scrollRight(content))
+
+      const observer = new ResizeObserver(() => {
+        updateButtons(left, right, content)
+      })
+
+      observer.observe(content)
+
+      content.addEventListener('scroll', () => {
+        updateButtons(left, right, content)
+      })
+    })
+  })
+</script>
+
+<Element class:list="carousel">
+  <Button
+    class="carousel-left hide"
+    icon="chevron-left"
+    variant="secondary"
+    size="sm"
+  />
+  <Element class:list="carousel-content">
+    <slot />
+  </Element>
+  <Button
+    class="carousel-right hide"
+    icon="chevron-right"
+    variant="secondary"
+    size="sm"
+  />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .carousel {
+      @apply container relative flex w-full items-center overflow-hidden px-0;
+
+      .button {
+        @apply absolute z-10 bg-secondary-hover opacity-50 hover:opacity-100;
+
+        &.hide {
+          @apply !hidden;
+        }
+      }
+
+      .carousel-left {
+        @apply left-2;
+      }
+
+      .carousel-right {
+        @apply right-2;
+      }
+
+      .carousel-content {
+        @apply inline-flex w-full snap-x snap-mandatory gap-2 overflow-x-auto scroll-smooth px-gutter scrollbar-none;
+
+        > * {
+          @apply snap-center;
+        }
+      }
+    }
+  }
+</style>