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

package/src/components/Drawer.astro

@@ -1,142 +1,81 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
+import type { HTMLAttributes } from 'astro/types'
 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'
+import type { ComponentProps } from 'svelte'
+import Button from './Button.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
+interface Props
+  extends HTMLAttributes<'aside'>,
+    Pick<ComponentProps<typeof Button>, 'variant' | 'size' | 'text' | 'icon'> {
+  id: string
+  icon: string
 }
 
-const {
-  id = 'drawer',
-  size = 'sm',
-  icon = 'menu-2',
-  color,
-  variant,
-  text,
-  buttons,
-  links,
-  heading,
-  logo,
-  company,
-  menu,
-  if: ifProp,
-  ...rest
-} = Astro.props
----
+const { id, variant = 'ghost', size = 'md', icon, text, ...rest } = Astro.props
 
-<Button
-  variant="secondary"
-  class:list={['drawer-button', `${id}-button`]}
-  onclick={`document.getElementById('${id}').showModal()`}
-  {variant}
-  {text}
-  {icon}
-  {color}
-  {size}
-/>
+const slot = await Astro.slots.render('default')
+const render = slot?.trim().length > 0
+---
 
-<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
+{
+  render && (
+    <Element class:list="drawer">
+      <Button
+        class="drawer-button"
+        as="label"
+        for={id}
+        {variant}
         {size}
-        {company}
-        {...logo}
+        {text}
+        {icon}
       />
-      <Heading
-        level={4}
-        text={heading}
-      />
-      <Button
-        variant="secondary"
-        icon="x"
-        onclick={`document.getElementById('${id}').close()`}
+
+      <input
+        type="checkbox"
+        class="drawer-checkbox"
+        name={id}
+        {id}
       />
-      <slot name="header" />
-    </Element>
-    <Element class:list="drawer-content">
-      <Links
-        direction="column"
-        {links}
+
+      <Element
+        class:list="drawer-body"
+        as="aside"
+        {...rest}
+      >
+        <Fragment set:html={slot} />
+      </Element>
+
+      <label
+        for={id}
+        class="drawer-backdrop"
       />
-      <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;
+      @apply contents;
+    }
 
-        .drawer-content {
-          @apply flex flex-col gap-6 px-gutter py-12;
-        }
+    .drawer-checkbox {
+      @apply invisible hidden;
+    }
 
-        .drawer-header,
-        .drawer-footer {
-          @apply sticky z-10 flex shrink-0 bg-background;
-        }
+    .drawer-backdrop {
+      @apply pointer-events-none invisible fixed left-0 top-0 z-30 h-full w-full bg-black opacity-0 transition-opacity;
 
-        .drawer-header {
-          @apply top-0 h-14 items-center px-gutter;
+      &:is(.drawer-checkbox:checked ~ &) {
+        @apply pointer-events-auto visible opacity-50;
+      }
+    }
 
-          .button {
-            @apply ml-auto;
-          }
-        }
+    .drawer-body {
+      @apply fixed bottom-0 left-0 top-0 z-40 h-full w-80 max-w-[75vw] -translate-x-full rounded-r-lg border border-l-0 bg-background shadow-2xl transition-transform;
 
-        .drawer-footer {
-          @apply bottom-0 mt-auto flex-col px-gutter py-8;
-        }
+      &:is(.drawer-checkbox:checked ~ &) {
+        @apply translate-x-0;
       }
     }
   }

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

@@ -3,8 +3,8 @@ import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Input from 'fulldev-ui/components/Input.astro'
+import Paragrapharea from 'fulldev-ui/components/Paragrapharea.astro'
 import Select from 'fulldev-ui/components/Select.astro'
-import Textarea from 'fulldev-ui/components/Textarea.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
 interface Props extends GlobalProps, HTMLAttributes<'form'> {
@@ -13,7 +13,9 @@ interface Props extends GlobalProps, HTMLAttributes<'form'> {
     | (
         | ComponentProps<typeof Input>
         | ComponentProps<typeof Select>
-        | (ComponentProps<typeof Textarea> & { type?: 'textarea' | undefined })
+        | (ComponentProps<typeof Paragrapharea> & {
+            type?: 'textarea' | undefined
+          })
       )[]
     | undefined
 }
@@ -30,7 +32,7 @@ const { fields, submit, ...rest } = Astro.props
     fields?.map((field) => {
       if ('options' in field) return <Select {...field} />
       if ('type' in field && field.type === 'textarea')
-        return <Textarea {...field} />
+        return <Paragrapharea {...field} />
       return <Input {...(field as any)} />
     })
   }

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>