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

package/src/components/DrawerOld.astro

@@ -0,0 +1,143 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Logo from 'fulldev-ui/components/Logo.astro'
+import Menu from 'fulldev-ui/components/Menu.astro'
+import links from 'fulldev-ui/schemas/components/links'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Buttons from './Buttons.astro'
+import Heading from './Heading.astro'
+import Links from './Links.astro'
+
+interface Props extends GlobalProps, HTMLAttributes<'aside'> {
+  variant?: ComponentProps<typeof Button>['variant']
+  text?: ComponentProps<typeof Button>['text']
+  icon?: ComponentProps<typeof Button>['icon']
+  heading?: ComponentProps<typeof Heading>['text']
+  logo?: ComponentProps<typeof Logo> | undefined
+  company?: ComponentProps<typeof Logo>['company']
+  menu?: ComponentProps<typeof Menu>['groups']
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+  links?: ComponentProps<typeof Links>['links']
+  size?: 'sm' | 'md' | 'lg' | undefined
+}
+
+const {
+  id = 'drawer',
+  size = 'sm',
+  icon = 'menu-2',
+  color,
+  variant,
+  text,
+  buttons,
+  links,
+  heading,
+  logo,
+  company,
+  menu,
+  if: ifProp,
+  ...rest
+} = Astro.props
+---
+
+<Button
+  variant="secondary"
+  class:list={['drawer-button', `${id}-button`]}
+  onclick={`document.getElementById('${id}').showModal()`}
+  {variant}
+  {text}
+  {icon}
+  {color}
+  {size}
+/>
+
+<Element
+  onclick={`event.target === this && this.close()`}
+  class:list="drawer"
+  as="dialog"
+  {id}
+  {text}
+  {size}
+  {icon}
+  {...rest}
+>
+  <Element class:list="drawer-body">
+    <button autofocus></button>
+    <Element
+      class:list="drawer-header"
+      as="header"
+    >
+      <Logo
+        {size}
+        {company}
+        {...logo}
+      />
+      <Heading
+        level={4}
+        text={heading}
+      />
+      <Button
+        variant="secondary"
+        icon="x"
+        onclick={`document.getElementById('${id}').close()`}
+      />
+      <slot name="header" />
+    </Element>
+    <Element class:list="drawer-content">
+      <Links
+        direction="column"
+        {links}
+      />
+      <Menu groups={menu} />
+      <slot />
+    </Element>
+    <Element
+      class:list="drawer-footer"
+      as="footer"
+    >
+      <slot name="footer" />
+    </Element>
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    body:has(dialog[open]) {
+      @apply max-md:overflow-hidden;
+    }
+
+    .drawer {
+      @apply inset-0 m-0 h-full max-h-full w-full max-w-full p-0 md:max-w-md;
+
+      &::backdrop {
+        @apply cursor-pointer bg-background/50;
+      }
+
+      .drawer-body {
+        @apply flex h-full shrink flex-col overflow-auto bg-background;
+
+        .drawer-content {
+          @apply flex flex-col gap-6 px-gutter py-12;
+        }
+
+        .drawer-header,
+        .drawer-footer {
+          @apply sticky z-10 flex shrink-0 bg-background;
+        }
+
+        .drawer-header {
+          @apply top-0 h-14 items-center px-gutter;
+
+          .button {
+            @apply ml-auto;
+          }
+        }
+
+        .drawer-footer {
+          @apply bottom-0 mt-auto flex-col px-gutter py-8;
+        }
+      }
+    }
+  }
+</style>

package/src/components/Element.astro

@@ -20,6 +20,7 @@ const {
   center,
   frame,
   dark,
+  muted,
   inset,
   ...rest
 } = Astro.props
@@ -41,6 +42,7 @@ const render = 'if' in rest ? rest.if : slot?.trim().length > 0
           center,
           inset,
           dark,
+          muted,
           [`size-${size}`]: size,
           [`color-${color}`]: color,
           [`level-${level}`]: level,

package/src/components/Form.astro

@@ -13,7 +13,9 @@ interface Props extends GlobalProps, HTMLAttributes<'form'> {
     | (
         | ComponentProps<typeof Input>
         | ComponentProps<typeof Select>
-        | (ComponentProps<typeof Textarea> & { type?: 'textarea' | undefined })
+        | (ComponentProps<typeof Textarea> & {
+            type?: 'textarea' | undefined
+          })
       )[]
     | undefined
 }

package/src/components/Grid.astro

@@ -0,0 +1,39 @@
+---
+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="grid"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .grid {
+      @apply relative w-full grid-cols-[repeat(auto-fill,minmax(var(--column-width),1fr))] gap-5;
+      display: grid;
+      --column-width: 20rem;
+
+      /* &.size-sm {
+        --column-width: 16rem;
+      }
+
+      &.size-md {
+        --column-width: 20rem;
+      }
+
+      &.size-lg {
+        --column-width: 26rem;
+      } */
+    }
+  }
+</style>

package/src/components/Group.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="group"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .group {
+      @apply flex flex-wrap justify-stretch gap-2;
+    }
+  }
+</style>

package/src/components/Head.astro

@@ -1,18 +1,13 @@
 ---
 import { AstroSeo } from '@astrolib/seo'
-import type { ComponentProps } from 'astro/types'
-import { ViewTransitions } from 'astro:transitions'
-import type Layout from 'fulldev-ui/layouts/Layout.astro'
+import type { HTMLAttributes } from 'astro/types'
+import type { HeadSchema } from 'fulldev-ui/schemas/components/head'
 
-type Props = ComponentProps<typeof Layout>
+type Props = HTMLAttributes<'head'> & HeadSchema & {}
 
-const { theme, title, description, image, seo, code, render } = Astro.props
+const { theme, title, description, image, code } = Astro.props
 
-const renderTitle = render && (await render()).headings[0]?.text
-const mergedTitle = seo?.title || title || renderTitle
-const mergedDescription = seo?.description || description
-const mergedImage =
-  seo?.image || image ? Astro.url.origin + (seo?.image || image) : undefined
+const src = image?.src && Astro.url.origin + image.src
 ---
 
 <head>
@@ -29,24 +24,22 @@ const mergedImage =
     rel="canonical"
     href={Astro.url.href.endsWith('/') ? Astro.url.href : Astro.url.href + '/'}
   />
-  <ViewTransitions />
   <AstroSeo
-    title={mergedTitle ?? ''}
-    description={mergedDescription ?? ''}
+    title={title ?? ''}
+    description={description ?? ''}
     openGraph={{
-      title: mergedTitle,
-      description: mergedDescription,
-      images: mergedImage
-        ? [
-            {
-              url: mergedImage,
-              alt: mergedTitle,
-            },
-          ]
-        : undefined,
-    } as any}
+      title: title ?? '',
+      description: description ?? '',
+      images: [
+        {
+          url: src ?? '',
+          alt: title ?? '',
+        },
+      ],
+    }}
   />
-  <Fragment set:html={code?.head} />
+
+  <Fragment set:html={code} />
 
   <script is:inline define:vars={{ theme }}>
     function setTheme(document) {
@@ -87,11 +80,4 @@ const mergedImage =
       setOption(document)
     })
   </script>
-
-  <!-- TrustBox script -->
-  <script
-    type="text/javascript"
-    src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js"
-    async
-  ></script>
 </head>

package/src/components/Header.astro

@@ -1,129 +1,32 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Buttons from 'fulldev-ui/components/Buttons.astro'
-import Cart from 'fulldev-ui/components/Cart.astro'
-import Drawer from 'fulldev-ui/components/Drawer.astro'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import Links from 'fulldev-ui/components/Links.astro'
-import Logo from 'fulldev-ui/components/Logo.astro'
-import Menu from 'fulldev-ui/components/Menu.astro'
-import Socials from 'fulldev-ui/components/Socials.astro'
-import Themer from 'fulldev-ui/components/Themer.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Search from './Search.astro'
 
-interface Props extends GlobalProps, HTMLAttributes<'header'> {
-  logo?: ComponentProps<typeof Logo>
-  company?: ComponentProps<typeof Logo>['company']
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-  links?: ComponentProps<typeof Links>['links']
-  menu?: ComponentProps<typeof Menu>['groups']
-  panel?: boolean | undefined
-  search?: boolean | undefined
-  open?: boolean | undefined
-  cart?: string | undefined
-  socials?: ComponentProps<typeof Socials>['socials']
-  themer?: boolean | undefined
-  size?: 'sm' | 'md' | 'lg' | undefined
+interface Props extends HTMLAttributes<'header'> {
+  as?: HTMLTag
 }
 
-const {
-  size = 'sm',
-  open,
-  logo,
-  company,
-  buttons,
-  links,
-  search,
-  panel,
-  socials,
-  menu,
-  cart,
-  themer,
-  ...rest
-} = Astro.props
+const { as = 'header', ...rest } = Astro.props
 ---
 
 <Element
   class:list="header"
-  as="header"
-  {size}
-  {open}
+  {as}
   {...rest}
 >
-  <Element class:list="header-container">
-    <Logo
-      {company}
-      {size}
-      {...typeof logo === 'string' ? { src: logo } : logo}
-    />
-    <Links
-      class:list="header-links"
-      {size}
-      {links}
-    />
-    <Socials
-      {size}
-      variant="ghost"
-      {socials}
-    />
-    <Buttons
-      class:list="header-buttons"
-      {size}
-      {buttons}
-    >
-      <Search size="sm" />
-      <Themer
-        if={themer}
-        {size}
-      />
-      <Cart
-        if={cart}
-        variant="secondary"
-        heading={cart}
-        {size}
-      />
-      <Drawer
-        class:list={['header-button']}
-        icon="menu-2"
-        id="menu"
-        variant="secondary"
-        {logo}
-        {company}
-        {buttons}
-        {links}
-        {menu}
-        {size}
-      />
-    </Buttons>
-  </Element>
+  <slot />
 </Element>
 
 <style is:global>
   @layer fulldev {
     .header {
-      @apply sticky left-0 top-0 z-20 flex h-14 items-center overflow-hidden bg-background;
-
-      .header-container {
-        @apply container flex w-full items-center justify-between gap-6;
-      }
+      @apply relative flex w-full items-center bg-background;
+      height: var(--header-height);
 
       &,
       & ~ * {
         --header-height: 3.5rem;
       }
-
-      .header-links {
-        @apply mr-auto max-lg:hidden;
-      }
-
-      .header-socials {
-        @apply ml-auto max-lg:hidden;
-      }
-
-      .menu-button {
-        @apply lg:hidden;
-      }
     }
   }
 </style>

package/src/components/Heading.astro

@@ -4,28 +4,24 @@ 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<'h2'> {
+interface Props extends GlobalProps, HTMLAttributes<'h2'>, HTMLAttributes<'a'> {
   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,49 @@ 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;
+    }
+
+    &.size-xl {
+      @apply text-xl;
+    }
 
-      &.level-2 {
-        @apply text-4xl;
-      }
+    &.size-2xl {
+      @apply text-2xl;
+    }
 
-      &.level-3 {
-        @apply text-3xl;
-      }
+    &.size-3xl {
+      @apply text-3xl;
+    }
 
-      &.level-4 {
-        @apply text-2xl;
-      }
+    &.size-4xl {
+      @apply text-4xl;
+    }
 
-      &.level-5 {
-        @apply text-xl;
-      }
+    &.size-5xl {
+      @apply text-4xl lg:text-5xl;
+    }
 
-      &.level-6 {
-        @apply text-lg;
-      }
+    &.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?: 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
+const trimmedName = name?.trim()
 const icon = trimmedName
   ? (tablerIcons as any)?.icons[trimmedName]?.body
   : undefined