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

package/src/components/Heading.astro

@@ -1,72 +1,116 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import { slugify } from 'fulldev-ui/utils/slugify'
 
-interface Props
-  extends GlobalProps,
-    HTMLAttributes<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> {
+interface Props extends GlobalProps, HTMLAttributes<'h2'> {
+  as?: HTMLTag
   level?: 1 | 2 | 3 | 4 | 5 | 6 | undefined
   text?: string | undefined
 }
 
 const {
-  contrast = true,
-  color = 'base',
-  level = 2,
   text,
+  id = text ? slugify(text) : undefined,
+  size = 'md',
+  level = 2,
+  as = `h${level}`,
   ...rest
 } = Astro.props
 ---
 
 <Element
   class:list="heading"
-  as=`h${level}`
-  {contrast}
-  {color}
+  {id}
+  {as}
   {level}
+  {size}
   {...rest}
 >
+  <Fragment set:html={text} />
   <slot />
-  <Fragment set:text={text} />
 </Element>
 
-<style is:global lang="scss">
-  @layer fulldev {
-    .heading {
-      margin: 0;
-      max-width: calc(var(--space-4) * 44);
-      scroll-margin: var(--space-5);
-      color: var(--color-11);
-      font-weight: 700;
-      line-height: 1.1;
-      letter-spacing: -0.025em;
-      text-align: inherit;
-      text-decoration: none;
+<style is:global>
+  .heading {
+    @apply scroll-mt-20 font-bold tracking-tight text-foreground;
+
+    &.size-sm {
+      &.level-1 {
+        @apply text-3xl;
+      }
+
+      &.level-2 {
+        @apply text-2xl;
+      }
+
+      &.level-3 {
+        @apply text-xl;
+      }
+
+      &.level-4 {
+        @apply text-lg;
+      }
+
+      &.level-5 {
+        @apply text-base;
+      }
+
+      &.level-6 {
+        @apply text-sm;
+      }
+    }
+
+    &.size-md {
+      &.level-1 {
+        @apply text-4xl;
+      }
+
+      &.level-2 {
+        @apply text-3xl;
+      }
+
+      &.level-3 {
+        @apply text-2xl;
+      }
+
+      &.level-4 {
+        @apply text-xl;
+      }
+
+      &.level-5 {
+        @apply text-lg;
+      }
+
+      &.level-6 {
+        @apply text-base;
+      }
+    }
 
+    &.size-lg {
       &.level-1 {
-        font-size: var(--text-8);
-        text-wrap: balance;
+        @apply text-5xl lg:text-6xl;
       }
 
       &.level-2 {
-        font-size: var(--text-7);
+        @apply text-4xl;
       }
 
       &.level-3 {
-        font-size: var(--text-6);
+        @apply text-3xl;
       }
 
       &.level-4 {
-        font-size: var(--text-5);
+        @apply text-2xl;
       }
 
       &.level-5 {
-        font-size: var(--text-4);
+        @apply text-xl;
       }
 
       &.level-6 {
-        font-size: var(--text-3);
+        @apply text-lg;
       }
     }
   }

package/src/components/Icon.astro

@@ -5,10 +5,10 @@ import Element from 'fulldev-ui/components/Element.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
 interface Props extends GlobalProps, HTMLAttributes<'i'> {
-  name?: string | undefined
+  name?: keyof typeof tablerIcons.icons | undefined
 }
 
-const { name, ...rest } = Astro.props
+const { size = 'md', name, ...rest } = Astro.props
 
 const trimmedName = name?.trim() as string | undefined
 const icon = trimmedName
@@ -18,38 +18,33 @@ const icon = trimmedName
 
 <Element
   class:list="icon"
-  if={icon}
-  as="i"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  as="svg"
+  {size}
   {...rest}
 >
-  {
-    icon && (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        set:html={icon}
-      />
-    )
-  }
+  <Fragment set:html={icon} />
 </Element>
 
-<style is:global lang="scss">
-  @layer fulldev {
-    .icon {
-      display: inline-flex;
-      position: relative;
-      justify-content: center;
-      align-items: center;
-      width: 1em;
-      height: 1em;
-      color: var(--color-11);
-      font-size: inherit;
-
-      svg {
-        position: absolute;
-        width: 120%;
-        height: 120%;
-      }
+<style is:global>
+  .icon {
+    @apply inline-flex h-[1em] w-[1em];
+
+    * {
+      stroke-width: 1.6;
+    }
+
+    &.size-sm {
+      @apply text-lg;
+    }
+
+    &.size-md {
+      @apply text-xl;
+    }
+
+    &.size-lg {
+      @apply text-2xl;
     }
   }
 </style>

package/src/components/Image.astro

@@ -1,14 +1,14 @@
 ---
+// @ts-nocheck
 import type { ImageMetadata } from 'astro'
 import type { HTMLAttributes } from 'astro/types'
 import { Image as AstroImage } from 'astro:assets'
-import type { CollectionEntry } from 'astro:content'
 import { getEntry } from 'astro:content'
 
 interface Props extends HTMLAttributes<'img'> {
-  src?: string | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
+  id?: any
   position?: 'background' | 'cover' | 'inset' | undefined
-  id?: CollectionEntry<'images'>['id'] | undefined
 }
 
 const { id } = Astro.props
@@ -20,10 +20,11 @@ const {
   position,
   src,
   alt,
+  size,
   ...rest
 } = {
-  ...Astro.props,
   ...entry,
+  ...Astro.props,
 }
 
 function getAltBySrc() {
@@ -39,55 +40,39 @@ const image = images[src as keyof typeof images]
 ---
 
 {
-  image && (
+  (image || src) && (
     <AstroImage
-      class:list={['image', position && `position-${position}`]}
+      class:list={[
+        'image',
+        {
+          [`size-${size}`]: size,
+          [`position-${position}`]: position,
+        },
+      ]}
       alt={alt || getAltBySrc()}
       src={image ? image() : src}
-      width={width}
-      height={height}
-      {...(rest as any)}
+      width={width ? Number(width) : undefined}
+      height={height ? Number(height) : undefined}
+      {...rest}
     />
   )
 }
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .image {
-      display: block;
-      width: 100%;
-      height: auto;
+      @apply block;
 
-      &.position-background {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        margin: 0 !important;
-        border-radius: 0;
-        width: 100%;
-        max-width: none;
-        height: 100%;
-        max-height: 100%;
-        object-fit: cover;
+      &.position-contain {
+        @apply h-auto w-full object-contain;
       }
 
       &.position-cover {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
+        @apply h-full w-full object-cover;
       }
 
-      &.position-inset {
-        margin-top: calc(var(--inset-top) * -1);
-        margin-right: calc(var(--inset-right) * -1);
-        margin-bottom: calc(var(--inset-bottom) * -1);
-        margin-left: calc(var(--inset-left) * -1);
-        width: calc(100% + var(--inset-left) + var(--inset-right));
-        max-width: none;
-        height: calc(100% + var(--inset-top) + var(--inset-bottom));
-        object-fit: cover;
+      &.position-background {
+        @apply absolute inset-0 h-full max-h-none w-full max-w-none object-cover opacity-30;
       }
     }
   }

package/src/components/Input.astro

@@ -12,96 +12,102 @@ interface Props extends GlobalProps, HTMLAttributes<'input'> {
 
 const {
   label,
-  icon,
-  value,
-  disabled,
-  required,
   placeholder,
-  readonly,
-  name = placeholder,
+  name = label || placeholder,
+  id = name,
   type = 'text',
+  size = 'md',
+  icon,
   ...rest
 } = Astro.props
 ---
 
 <Element
   class:list="input"
-  {...rest}
+  as="label"
+  for={id}
+  {size}
 >
   <Label
     for={name}
     text={label}
+    {size}
   />
+  <Icon name={icon} />
   <Element
+    class:list="input-input"
     as="input"
     if={name}
     id={name}
     {name}
     {placeholder}
     {type}
-    {value}
-    {disabled}
-    {required}
-    {readonly}
+    {...rest}
   />
-  <Icon name={icon} />
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .input {
-      display: flex;
-      position: relative;
-      flex-direction: column;
-      gap: var(--space-1);
-      width: 100%;
+      @apply relative flex flex-col gap-1.5;
 
       .icon {
-        position: absolute;
-        right: var(--space-4);
-        bottom: var(--space-4);
-        pointer-events: none;
+        @apply pointer-events-none absolute;
+      }
+
+      .input-input {
+        @apply flex w-full rounded-md border border-input bg-background text-sm ring-offset-background;
+        @apply file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground;
+        @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;
+        @apply [&[readonly]]:pointer-events-none;
       }
 
-      input {
-        display: flex;
-        position: relative;
-        align-items: center;
-        outline: none;
-        border: 1px solid var(--color-6);
-        border-radius: var(--radius-1);
-        background-color: transparent;
-        padding: var(--space-4);
-        padding-right: calc(var(--text-2) + 2 * var(--space-4));
-        width: 100%;
-        min-width: var(--space-4);
-        height: calc(var(--text-2) + 2 * var(--space-4));
-        color: var(--text);
-        font-size: var(--text-2);
-        line-height: 1.25;
-
-        &::placeholder {
-          color: var(--color-11);
+      &.size-sm {
+        @apply gap-1;
+
+        .input-input {
+          @apply h-9 px-2.5 py-1.5 text-xs;
         }
 
-        &:hover {
-          outline: none;
+        .icon {
+          @apply bottom-2 right-2;
         }
 
-        &:focus {
-          outline: none;
-          box-shadow: inset 0 0 0 2px var(--color-7);
-          border-color: var(--color-7);
+        .icon + .input-input {
+          @apply pr-9;
+        }
+      }
+
+      &.size-md {
+        @apply gap-1.5;
+
+        .input-input {
+          @apply h-10 px-3 py-2 text-sm;
+        }
+
+        .icon {
+          @apply bottom-2.5 right-2.5;
+        }
+
+        .icon + .input-input {
+          @apply pr-10;
+        }
+      }
+
+      &.size-lg {
+        @apply gap-2;
+
+        .input-input {
+          @apply h-12 px-3.5 py-2.5 text-base;
         }
 
-        &:disabled {
-          opacity: 50%;
-          cursor: not-allowed;
-          pointer-events: none;
+        .icon {
+          @apply bottom-3.5 right-3.5;
         }
 
-        &[readonly] {
-          pointer-events: none;
+        .icon + .input-input {
+          @apply pr-11;
         }
       }
     }

package/src/components/Label.astro

@@ -1,37 +1,42 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
 interface Props extends GlobalProps, HTMLAttributes<'label'> {
-  size?: 'sm' | 'md' | 'lg' | undefined
-  color?: 'base' | 'brand' | undefined
-  contrast?: boolean | undefined
+  as?: HTMLTag
   text?: string | undefined
 }
 
-const { text, ...rest } = Astro.props
+const { as = 'label', size = 'md', text, ...rest } = Astro.props
 ---
 
 <Element
   class:list="label"
-  as="label"
+  {as}
+  {size}
   {...rest}
 >
+  <Fragment set:html={text} />
   <slot />
-  <Fragment set:text={text} />
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .label {
-      display: flex;
-      flex-direction: column;
-      color: var(--color-11);
-      font-size: var(--text-2);
-      line-height: 1;
-      text-align: left;
-      white-space: nowrap;
+      @apply font-medium leading-none;
+
+      &.size-sm {
+        @apply text-xs;
+      }
+
+      &.size-md {
+        @apply text-sm;
+      }
+
+      &.size-lg {
+        @apply text-base;
+      }
     }
   }
 </style>

package/src/components/Lead.astro

@@ -0,0 +1,46 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'p'> {
+  as?: HTMLTag
+  text?: string | undefined
+}
+
+const { as = 'p', text, ...rest } = Astro.props
+---
+
+<Element
+  class:list="lead"
+  {as}
+  {...rest}
+>
+  <slot />
+  <Fragment set:html={text} />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .lead,
+    .prose-content h1 + p {
+      @apply text-muted-foreground;
+
+      &.size-sm {
+        @apply text-sm;
+      }
+
+      &.size-md {
+        @apply text-base;
+      }
+
+      &.size-lg {
+        @apply text-lg;
+
+        &:is(h1 + p) {
+          @apply text-xl;
+        }
+      }
+    }
+  }
+</style>

package/src/components/Link.astro

@@ -1,52 +1,77 @@
 ---
-import type { HTMLAttributes } 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 type { GlobalProps } from 'fulldev-ui/types/global-props'
 
 interface Props extends GlobalProps, HTMLAttributes<'a'> {
+  as?: HTMLTag
+  href?: string | null | undefined
   slug?: CollectionEntry<'pages'>['slug'] | undefined
+  icon?: ComponentProps<typeof Icon>['name']
+  variant?: 'primary' | 'muted' | undefined
   text?: string | undefined
+  current?: boolean | undefined
 }
 
-const { slug, href, text, ...rest } = Astro.props
-
-const entry = slug && (await getEntry('pages', slug))
+const {
+  slug,
+  href = slug === 'index' ? '/' : slug ? `/${slug}/` : undefined,
+  text = slug ? (await getEntry('pages', slug)).data.title : undefined,
+  target = href?.startsWith('http') ? '_blank' : undefined,
+  current = Astro.url.pathname === href,
+  as = 'a',
+  variant = 'primary',
+  icon,
+  ...rest
+} = Astro.props
 ---
 
 <Element
   class:list="link"
-  href={slug ? `/${slug}/` : href}
-  as="a"
+  {href}
+  {as}
+  {target}
+  {variant}
+  {current}
   {...rest}
 >
+  <Fragment set:html={text} />
   <slot />
-  <Fragment set:html={entry?.data?.title ?? text} />
+  <Icon name={icon} />
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
-    .link {
-      display: inline-flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: var(--space-2);
-      cursor: pointer;
-      border: none;
-      background: none;
-      color: var(--color-11);
-      font-size: var(--text-3);
-      text-decoration-color: var(--border); // FIXME, werkt niet
-      text-decoration: none;
-      white-space: nowrap;
-
-      &:is(p > &) {
-        text-decoration: underline;
+    .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;
+
+      &.variant-primary,
+      &:is(.prose-content > *:not(.prose-footer) > a) {
+        @apply text-primary underline underline-offset-4;
+      }
+
+      &.variant-muted {
+        @apply text-muted-foreground hover:text-foreground;
+
+        &.current {
+          @apply text-foreground;
+        }
+      }
+
+      &.size-sm {
+        @apply text-sm;
+      }
+
+      &.size-lg {
+        @apply text-lg;
       }
 
-      &:hover {
-        color: var(--color-12);
+      .icon {
+        @apply mb-0.5;
       }
     }
   }