fulldev-ui 0.6.0-beta.2 → 0.6.0-beta.3

package/src/components/Heading.astro

@@ -6,26 +6,22 @@ import { slugify } from 'fulldev-ui/utils/slugify'
 
 interface Props extends GlobalProps, HTMLAttributes<'h2'> {
   as?: HTMLTag
-  level?: 1 | 2 | 3 | 4 | 5 | 6 | undefined
   text?: string | undefined
+  muted?: boolean | undefined
 }
 
 const {
+  as = 'h2',
   text,
   id = text ? slugify(text) : undefined,
-  size = 'md',
-  level = 2,
-  as = `h${level}`,
   ...rest
 } = Astro.props
 ---
 
 <Element
   class:list="heading"
-  {id}
   {as}
-  {level}
-  {size}
+  {id}
   {...rest}
 >
   <Fragment set:html={text} />
@@ -36,82 +32,45 @@ const {
   .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;
-      }
+    &.muted {
+      @apply text-muted-foreground;
     }
 
+    &,
     &.size-md {
-      &.level-1 {
-        @apply text-4xl;
-      }
-
-      &.level-2 {
-        @apply text-3xl;
-      }
-
-      &.level-3 {
-        @apply text-2xl;
-      }
-
-      &.level-4 {
-        @apply text-xl;
-      }
+      @apply text-base;
+    }
 
-      &.level-5 {
-        @apply text-lg;
-      }
+    &.size-xs {
+      @apply text-xs;
+    }
 
-      &.level-6 {
-        @apply text-base;
-      }
+    &.size-sm {
+      @apply text-sm;
     }
 
     &.size-lg {
-      &.level-1 {
-        @apply text-5xl lg:text-6xl;
-      }
+      @apply text-lg;
+    }
 
-      &.level-2 {
-        @apply text-4xl;
-      }
+    &.size-xl {
+      @apply text-xl;
+    }
 
-      &.level-3 {
-        @apply text-3xl;
-      }
+    &.size-2xl {
+      @apply text-2xl;
+    }
 
-      &.level-4 {
-        @apply text-2xl;
-      }
+    &.size-3xl {
+      @apply text-3xl;
+    }
 
-      &.level-5 {
-        @apply text-xl;
-      }
+    &.size-4xl {
+      @apply text-4xl;
+    }
 
-      &.level-6 {
-        @apply text-lg;
-      }
+    &.size-5xl {
+      @apply text-5xl lg:text-6xl;
     }
   }
 </style>

package/src/components/Icon.astro

@@ -2,15 +2,17 @@
 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?: keyof typeof tablerIcons.icons | undefined
+interface Props extends Omit<HTMLAttributes<'svg'>, 'name'>, IconSchema {
+  // name?: keyof typeof tablerIcons.icons | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
 }
 
 const { size = 'md', name, ...rest } = Astro.props
 
-const trimmedName = name?.trim() as string | undefined
+console.log(name)
+const trimmedName = name?.trim()
 const icon = trimmedName
   ? (tablerIcons as any)?.icons[trimmedName]?.body
   : undefined

package/src/components/Link.astro

@@ -1,29 +1,21 @@
 ---
-import type { ComponentProps, HTMLAttributes, HTMLTag } 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 Icon from 'fulldev-ui/components/Icon.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import type { LinkSchema } from 'fulldev-ui/schemas/components/link'
 
-interface Props extends GlobalProps, HTMLAttributes<'a'> {
+interface Props
+  extends Omit<HTMLAttributes<'a'>, 'href' | 'target'>,
+    LinkSchema {
   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 = 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',
+  size = 'md',
+  text,
   icon,
   ...rest
 } = Astro.props
@@ -31,11 +23,9 @@ const {
 
 <Element
   class:list="link"
-  {href}
   {as}
-  {target}
   {variant}
-  {current}
+  {size}
   {...rest}
 >
   <Fragment set:html={text} />
@@ -54,6 +44,10 @@ const {
         @apply text-primary underline underline-offset-4;
       }
 
+      &.variant-underline {
+        @apply underline underline-offset-4;
+      }
+
       &.variant-muted {
         @apply text-muted-foreground hover:text-foreground;
 

package/src/components/Logo.astro

@@ -1,44 +1,57 @@
 ---
-import type { ComponentProps } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Image from 'fulldev-ui/components/Image.astro'
-
-interface Props extends ComponentProps<typeof Image> {
-  company?: string | undefined
+import type { LogoSchema } from 'fulldev-ui/schemas/components/logo'
+import Element from './Element.astro'
+
+interface Props
+  extends Omit<HTMLAttributes<'a'>, 'href'>,
+    HTMLAttributes<'div'>,
+    LogoSchema {
+  as?: HTMLTag
 }
 
-const { size = 'md', company, ...rest } = Astro.props as Props
+const {
+  href = '/',
+  as = href ? 'a' : 'div',
+  size = 'md',
+  image,
+  text,
+  ...rest
+} = Astro.props as Props
 ---
 
 <Element
   class:list="logo"
-  as="a"
-  href="/"
+  {href}
+  {as}
   {size}
 >
-  <Image {...rest} />
-  <Fragment set:html={company} />
+  <Image {...image} />
+  <Fragment set:html={text} />
 </Element>
 
+<Image
+  class:list="logo"
+  {size}
+  {...rest}
+/>
+
 <style is:global>
   @layer fulldev {
     .logo {
-      @apply inline-flex grow-0 items-center justify-start font-semibold;
-
-      .image {
-        @apply block h-full w-auto object-contain;
-      }
+      @apply flex w-auto items-center object-contain text-base font-bold leading-none text-foreground;
 
       &.size-sm {
-        @apply h-6 gap-2 text-base;
+        @apply h-6;
       }
 
       &.size-md {
-        @apply h-7 gap-2.5 text-lg;
+        @apply h-7;
       }
 
       &.size-lg {
-        @apply h-8 gap-3 text-xl;
+        @apply h-8;
       }
     }
   }

package/src/components/Navigation.astro

@@ -0,0 +1,39 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'header'> {
+  as?: HTMLTag
+}
+
+const { as = 'header', ...rest } = Astro.props
+---
+
+<Element
+  class:list="navigation"
+  {as}
+  {...rest}
+>
+  <header>header</header>
+  <aside>sidebar</aside>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .navigation {
+      @apply flex h-screen flex-col;
+
+      grid-row-start: 1;
+      grid-row-end: 2;
+      grid-column-start: 1;
+
+      header {
+        @apply h-12 w-full border-b;
+      }
+
+      aside {
+        @apply h-full w-64 grow border-r p-6;
+      }
+    }
+  }
+</style>

package/src/components/Panel.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+}
+
+const { ...rest } = Astro.props
+---
+
+<Element
+  class:list="panel"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .panel {
+      @apply w-full gap-x-gutter rounded-lg border bg-card px-gutter py-16 text-card-foreground lg:px-16;
+    }
+  }
+</style>

package/src/components/Paragraph.astro

@@ -1,38 +1,55 @@
 ---
 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 type { ParagraphSchema } from 'fulldev-ui/schemas/components/paragraph.ts'
 
-interface Props extends GlobalProps, HTMLAttributes<'p'> {
+interface Props extends HTMLAttributes<'p'>, ParagraphSchema {
   as?: HTMLTag
-  text?: string | undefined
+  muted?: boolean | undefined
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined
 }
 
 const { as = 'p', text, ...rest } = Astro.props
 ---
 
 <Element
-  class:list="paragraph"
+  class:list="text"
   {as}
   {...rest}
 >
-  <slot />
   <Fragment set:html={text} />
+  <slot />
 </Element>
 
 <style is:global>
   @layer fulldev {
-    .paragraph,
+    .text,
     .prose-content p {
-      @apply leading-7 text-foreground;
+      @apply leading-relaxed text-foreground;
+
+      &.muted {
+        @apply text-muted-foreground;
+      }
+
+      &.size-xs {
+        @apply text-xs;
+      }
 
       &.size-sm {
         @apply text-sm;
       }
 
+      &.size-md {
+        @apply text-base;
+      }
+
       &.size-lg {
         @apply text-lg;
       }
+
+      &.size-xl {
+        @apply text-xl;
+      }
     }
   }
 </style>

package/src/components/Price.astro

@@ -8,20 +8,20 @@ interface Props extends GlobalProps, HTMLAttributes<'div'> {
   size?: 'sm' | 'md' | 'lg' | undefined
   color?: 'base' | 'brand' | undefined
   contrast?: boolean | undefined
-  value?: number | undefined
+  amount?: number | undefined
 }
 
-const { value, ...rest } = Astro.props
+const { amount, ...rest } = Astro.props
 ---
 
 <Element
   class:list="price"
   {...rest}
 >
-  {value && <Fragment set:html={formatPrice(value)} />}
+  {amount && <Fragment set:html={formatPrice(amount)} />}
 </Element>
 
-<style is:global >
+<style is:global>
   @layer fulldev {
     .price {
       margin: 0;

package/src/components/Prose.astro

@@ -1,168 +1,77 @@
 ---
-import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import Button from 'fulldev-ui/components/Button.astro'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
 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 Lead from 'fulldev-ui/components/Lead.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-import Toc from 'fulldev-ui/components/Toc.astro'
-import { crush } from 'radash'
-import type Sidebar from './Sidebar.astro'
 
 interface Props extends HTMLAttributes<'div'> {
-  as?: HTMLTag | undefined
-  render?: any
-  sidebar?: ComponentProps<typeof Sidebar> | undefined
-  slug?: CollectionEntry<'pages'>['slug'] | undefined
-  toc?: boolean | ComponentProps<typeof Toc>['heading'] | undefined
-  tagline?: ComponentProps<typeof Tagline>['text'] | undefined
-  heading?: ComponentProps<typeof Heading>['text'] | undefined
-  image?: ComponentProps<typeof Image> | undefined
-  lead?: ComponentProps<typeof Lead>['text'] | undefined
+  as?: HTMLTag
 }
 
-const {
-  toc = false,
-  slug,
-  sidebar,
-  render,
-  tagline,
-  heading,
-  lead,
-  image,
-  ...rest
-} = Astro.props
-
-const Content = render && (await render())?.Content
-
-const flatMenu = crush(sidebar?.menu ?? {})
-const slugs = Object.entries(flatMenu)
-  .map(([key, value]) => (key.endsWith('.slug') ? value : null))
-  .filter(Boolean)
-const slugIndex = slugs.findIndex((val) => val === slug)
-
-const prevSlug = slugs[slugIndex - 1]
-const nextSlug = slugs[slugIndex + 1]
+const { ...rest } = Astro.props
 ---
 
 <Element
   class:list="prose"
   {...rest}
 >
-  <Element class:list="prose-container">
-    <Element class:list="prose-content">
-      <Tagline text={tagline} />
-      <Heading
-        as="h1"
-        level={2}
-        text={heading}
-      />
-      <Lead text={lead} />
-      <Image {...image} />
-      {Content && <Content />}
-      <slot />
-      <Element class:list="prose-footer">
-        <Button
-          class:list="prose-prev"
-          icon={prevSlug && 'arrow-left'}
-          slug={prevSlug}
-          variant="secondary"
-        />
-        <Button
-          class:list="prose-next"
-          icon={nextSlug && 'arrow-right'}
-          slug={nextSlug}
-          variant="secondary"
-          reverse
-        />
-      </Element>
-    </Element>
-    <Toc
-      if={toc}
-      heading={typeof toc === 'string' ? toc : undefined}
-      {render}
-    />
-  </Element>
+  <slot />
 </Element>
 
 <style is:global>
   @layer fulldev {
     .prose {
-      @apply relative items-start py-28 first:pt-14;
+      @apply relative w-full max-w-screen-md py-8;
 
-      .prose-container {
-        @apply container flex h-full w-full flex-grow items-start justify-evenly gap-14 gap-x-gutter;
+      > * {
+        @apply mt-6 first:mt-0;
       }
 
-      .prose-content {
-        @apply w-full max-w-screen-md;
-
-        > * {
-          @apply mt-6 first:mt-0;
-        }
-
-        p {
-          @apply mt-4 first:mt-0;
-        }
-
-        code:not(.astro-code code) {
-          @apply rounded bg-muted px-1.5 py-0.5 font-mono text-sm font-medium;
-        }
-
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-          @apply mt-8 scroll-m-20 font-semibold first:mt-0;
-
-          code {
-            font-size: inherit !important;
-          }
-        }
+      p {
+        @apply mt-4 first:mt-0;
+      }
 
-        > h1 {
-          @apply text-4xl font-extrabold;
-        }
+      code:not(.astro-code code) {
+        @apply rounded bg-muted px-1.5 py-0.5 font-mono text-sm font-medium;
+      }
 
-        > h2 {
-          @apply text-2xl;
-        }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        @apply mt-8 scroll-m-20 font-bold first:mt-0;
 
-        > h3 {
-          @apply text-xl;
+        code {
+          font-size: inherit !important;
         }
+      }
 
-        > h4 {
-          @apply text-lg;
-        }
+      > h1 {
+        @apply text-4xl;
+      }
 
-        > h5 {
-          @apply text-base;
-        }
+      > h2 {
+        @apply text-2xl;
+      }
 
-        > h6 {
-          @apply text-sm;
-        }
+      > h3 {
+        @apply text-xl;
+      }
 
-        > aside {
-          @apply mt-6 rounded-md border border-destructive p-4 text-destructive first:mt-0;
-        }
+      > h4 {
+        @apply text-lg;
       }
 
-      .prose-footer {
-        @apply mt-14 flex items-center;
+      > h5 {
+        @apply text-base;
+      }
 
-        .prose-next {
-          @apply ml-auto;
-        }
+      > h6 {
+        @apply text-sm;
       }
 
-      .toc {
-        @apply order-last;
+      > aside {
+        @apply mt-6 rounded-md border border-destructive p-4 text-destructive first:mt-0;
       }
     }
   }