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

package/src/components/Heading.astro

@@ -1,73 +1,80 @@
 ---
-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'> {
-  level?: 1 | 2 | 3 | 4 | 5 | 6 | undefined
+interface Props extends GlobalProps, HTMLAttributes<'h2'>, HTMLAttributes<'a'> {
+  as?: HTMLTag
   text?: string | undefined
+  muted?: boolean | undefined
 }
 
 const {
-  contrast = true,
-  color = 'base',
-  level = 2,
+  as = 'h2',
   text,
+  id = text ? slugify(text) : undefined,
   ...rest
 } = Astro.props
 ---
 
 <Element
   class:list="heading"
-  as=`h${level}`
-  {contrast}
-  {color}
-  {level}
+  {as}
+  {id}
   {...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;
 
-      &.level-1 {
-        font-size: var(--text-8);
-        text-wrap: balance;
-      }
+    &.muted {
+      @apply text-muted-foreground;
+    }
+
+    &,
+    &.size-md {
+      @apply text-base;
+    }
+
+    &.size-xs {
+      @apply text-xs;
+    }
 
-      &.level-2 {
-        font-size: var(--text-7);
-      }
+    &.size-sm {
+      @apply text-sm;
+    }
 
-      &.level-3 {
-        font-size: var(--text-6);
-      }
+    &.size-lg {
+      @apply text-lg;
+    }
 
-      &.level-4 {
-        font-size: var(--text-5);
-      }
+    &.size-xl {
+      @apply text-xl;
+    }
 
-      &.level-5 {
-        font-size: var(--text-4);
-      }
+    &.size-2xl {
+      @apply text-2xl;
+    }
+
+    &.size-3xl {
+      @apply text-3xl;
+    }
+
+    &.size-4xl {
+      @apply text-4xl;
+    }
+
+    &.size-5xl {
+      @apply text-4xl lg:text-5xl;
+    }
 
-      &.level-6 {
-        font-size: var(--text-3);
-      }
+    &.size-6xl {
+      @apply text-5xl lg:text-6xl;
     }
   }
 </style>

package/src/components/Icon.astro

@@ -2,15 +2,16 @@
 import tablerIcons from '@iconify-json/tabler/icons.json'
 import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import type { IconSchema } from 'fulldev-ui/schemas/components/icon'
 
-interface Props extends GlobalProps, HTMLAttributes<'i'> {
-  name?: string | undefined
+interface Props extends Omit<HTMLAttributes<'svg'>, 'name'>, IconSchema {
+  // name?: keyof typeof tablerIcons.icons | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
 }
 
-const { name, ...rest } = Astro.props
+const { size = 'md', name, ...rest } = Astro.props
 
-const trimmedName = name?.trim() as string | undefined
+const trimmedName = name?.trim()
 const icon = trimmedName
   ? (tablerIcons as any)?.icons[trimmedName]?.body
   : undefined
@@ -18,38 +19,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,30 +1,9 @@
 ---
-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'
+import type { ImageSchema } from 'fulldev-ui/schemas/imageSchema'
 
-interface Props extends HTMLAttributes<'img'> {
-  src?: string | undefined
-  position?: 'background' | 'cover' | 'inset' | undefined
-  id?: CollectionEntry<'images'>['id'] | undefined
-}
-
-const { id } = Astro.props
-const entry = id ? (await getEntry('images', id))?.data : {}
-
-const {
-  width = 1920,
-  height = 1920,
-  position,
-  src,
-  alt,
-  ...rest
-} = {
-  ...Astro.props,
-  ...entry,
-}
+interface Props extends HTMLAttributes<'img'>, ImageSchema {}
 
 function getAltBySrc() {
   if (!src) return
@@ -34,61 +13,32 @@ function getAltBySrc() {
   return unslugged || ''
 }
 
-const images = import.meta.glob<{ default: ImageMetadata }>('/src/images/*')
-const image = images[src as keyof typeof images]
+const {
+  src,
+  alt = getAltBySrc(),
+  height = 1920,
+  width = 1920,
+  ...rest
+} = Astro.props
 ---
 
 {
-  image && (
+  src && (
     <AstroImage
-      class:list={['image', position && `position-${position}`]}
-      alt={alt || getAltBySrc()}
-      src={image ? image() : src}
-      width={width}
-      height={height}
-      {...(rest as any)}
+      class:list="image"
+      {alt}
+      {src}
+      {width}
+      {height}
+      {...rest}
     />
   )
 }
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .image {
-      display: block;
-      width: 100%;
-      height: auto;
-
-      &.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-cover {
-        width: 100%;
-        height: 100%;
-        object-fit: 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;
-      }
+      @apply block;
     }
   }
 </style>

package/src/components/Input.astro

@@ -12,96 +12,110 @@ interface Props extends GlobalProps, HTMLAttributes<'input'> {
 
 const {
   label,
-  icon,
-  value,
-  disabled,
-  required,
   placeholder,
-  readonly,
-  name = placeholder,
+  name = label || placeholder,
+  id = name,
   type = 'text',
+  min,
+  max,
+  value,
+  step,
+  size = 'md',
+  icon,
   ...rest
 } = Astro.props
 ---
 
 <Element
   class:list="input"
+  as="label"
+  for={id}
+  {size}
   {...rest}
 >
   <Label
     for={name}
     text={label}
+    {size}
   />
+  <Icon name={icon} />
   <Element
+    class:list="input-input"
     as="input"
     if={name}
     id={name}
     {name}
     {placeholder}
     {type}
+    {min}
+    {max}
     {value}
-    {disabled}
-    {required}
-    {readonly}
+    {step}
   />
-  <Icon name={icon} />
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
+    .input-input {
+      @apply flex w-full rounded-md border border-input bg-background text-sm text-foreground 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;
-      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 {
-        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;
+        }
+
+        .icon {
+          @apply bottom-2 right-2;
         }
 
-        &:hover {
-          outline: none;
+        .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;
 
-        &:focus {
-          outline: none;
-          box-shadow: inset 0 0 0 2px var(--color-7);
-          border-color: var(--color-7);
+        .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/Layout.astro

@@ -0,0 +1,35 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Head from 'fulldev-ui/components/Head.astro'
+import type { HeadSchema } from 'fulldev-ui/schemas/components/head'
+
+type Props = Omit<HTMLAttributes<'body'>, 'title'> & {
+  head?: HeadSchema
+}
+
+const { head, ...rest } = Astro.props
+---
+
+<!doctype html>
+<html>
+  <Head {...head} />
+  <body {...rest}>
+    <slot />
+    <style is:global>
+      @layer fulldev {
+        html {
+          @apply w-full font-sans text-base leading-relaxed text-foreground;
+          color-scheme: light;
+        }
+
+        .dark {
+          color-scheme: dark;
+        }
+
+        body {
+          @apply w-full bg-background font-sans text-foreground;
+        }
+      }
+    </style>
+  </body>
+</html>

package/src/components/Link.astro

@@ -1,52 +1,71 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import { getEntry } from 'astro:content'
+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 Icon from 'fulldev-ui/components/Icon.astro'
+import type { LinkSchema } from 'fulldev-ui/schemas/components/link'
 
-interface Props extends GlobalProps, HTMLAttributes<'a'> {
-  slug?: CollectionEntry<'pages'>['slug'] | undefined
-  text?: string | undefined
+interface Props
+  extends Omit<HTMLAttributes<'a'>, 'href' | 'target'>,
+    LinkSchema {
+  as?: HTMLTag
+  current?: boolean | undefined
 }
 
-const { slug, href, text, ...rest } = Astro.props
-
-const entry = slug && (await getEntry('pages', slug))
+const {
+  as = 'a',
+  variant = 'primary',
+  size = 'md',
+  text,
+  icon,
+  ...rest
+} = Astro.props
 ---
 
 <Element
   class:list="link"
-  href={slug ? `/${slug}/` : href}
-  as="a"
+  {as}
+  {variant}
+  {size}
   {...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-underline {
+        @apply 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;
       }
     }
   }