fulldev-ui 0.5.0-beta.3 → 0.5.0-beta.5

package/src/components/Sidebar.astro

@@ -1,151 +1,101 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Logo from 'fulldev-ui/components/experimental/Logo.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Search from 'fulldev-ui/components/Search.astro'
+import Menu from 'fulldev-ui/components/Menu.astro'
 import ThemeSelect from 'fulldev-ui/components/ThemeSelect.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Heading from './Heading.astro'
+import Toc from './Toc.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'aside'> {
-  size?: 'sm' | 'md' | 'lg' | undefined
-  search?: boolean | undefined
-  logo?: string | undefined
-  company?: string | undefined
-  buttons?: any[] | undefined
-  open?: boolean | undefined
+  menu?: ComponentProps<typeof Menu>['groups']
+  heading?: ComponentProps<typeof Heading>['text']
+  render?: ComponentProps<typeof Toc>['render']
+  logo?: ComponentProps<typeof Logo>
+  toc?: ComponentProps<typeof Toc>['heading']
+  company?: ComponentProps<typeof Logo>['company']
+  themeselect?: boolean | undefined
 }
 
 const {
   size = 'sm',
-  open = false,
   logo,
   company,
-  buttons,
-  search,
+  render,
+  themeselect,
+  menu,
+  toc,
+  heading,
+  ...rest
 } = Astro.props
 ---
 
-<input
-  id="sidebar"
-  class="sidebar-checkbox"
-  type="checkbox"
-/>
-
 <Element
   class:list="sidebar"
   as="aside"
   {size}
-  {open}
+  {...rest}
 >
-  <Logo
-    src={logo}
-    company={company}
-  />
-  {search && <Search />}
-  <Element class:list="buttons">
-    {
-      buttons?.map(({ heading, slug, href, text, buttons }) => (
-        <>
-          <Heading
-            level={6}
-            text={heading}
-          />
-          <Button
-            variant="link"
-            {slug}
-            {href}
-            {text}
-          />
-          {buttons?.map((button: any) => (
-            <Button
-              variant="link"
-              {...button}
-            />
-          ))}
-        </>
-      ))
-    }
-    <ThemeSelect />
+  <Element
+    class:list="sidebar-header"
+    as="header"
+  >
+    <Logo
+      {company}
+      {...logo}
+    />
+    <Heading
+      level={4}
+      text={heading}
+    />
+    <slot name="header" />
+  </Element>
+  <Element class:list="sidebar-content">
+    <Menu groups={menu} />
+    <ThemeSelect if={themeselect} />
+    <slot />
   </Element>
 </Element>
 
 <style lang="scss" is:global>
   @layer fulldev {
-    .sidebar-checkbox {
-      display: none;
-    }
-
-    @media (max-width: 1023.999px) {
-      body:has(.sidebar-checkbox:checked) {
-        overflow: hidden;
-      }
-    }
-
     .sidebar {
-      --sidebar-width: 240px;
-
       display: none;
-      position: fixed;
-      top: var(--header-height, 0px);
-      bottom: 0;
-      left: 0;
-      flex-shrink: 0;
-      flex-direction: column;
-      justify-content: flex-start;
-      z-index: 10;
-      border-style: solid;
-      border-color: var(--color-a6);
-      background-color: var(--base-2);
-      padding: var(--space-md-5) var(--gutter);
-      width: 100%;
-      height: calc(100vh - var(--header-height, 0px));
-      overflow-y: auto;
-
-      &:is(.sidebar-checkbox:checked + &) {
-        display: flex;
-      }
 
       @media (min-width: 1024px) {
-        border-right-width: 1px;
-        padding: var(--space-md-6) var(--gutter);
-        width: var(--sidebar-width);
-
-        &.open {
-          display: flex;
-          position: sticky;
-        }
-      }
-
-      .buttons {
         display: flex;
+        position: sticky;
+        top: var(--header-height, 0px);
+        bottom: 0;
+        flex-shrink: 0;
         flex-direction: column;
-        gap: calc(var(--space-4) + var(--space-1));
+        justify-content: flex-start;
+        z-index: 10;
+        border-right: 1px solid var(--color-a6);
+        width: calc(var(--space-7) * 4);
+        height: calc(100vh - var(--header-height, 0px));
 
-        .theme-select {
-          margin-top: var(--space-5);
+        .sidebar-header {
+          display: flex;
+          position: sticky;
+          align-items: center;
+          border-bottom: 1px solid var(--color-a6);
+          padding: 0 var(--gutter);
+          width: 100%;
+          height: 56px;
         }
 
-        .button + .heading {
-          margin-top: var(--space-5);
+        .sidebar-content {
+          display: flex;
+          top: 0;
+          flex: 1;
+          flex-direction: column;
+          padding: var(--space-6) var(--gutter);
+          width: 100%;
+          overflow-y: auto;
         }
       }
-
-      .logo {
-        display: none;
-        position: absolute;
-        top: 0;
-        left: var(--gutter);
-        align-items: center;
-        height: 56px;
-      }
-    }
-
-    @media (min-width: 1024px) {
-      .header:not(.open) ~ .core .sidebar .logo {
-        display: flex;
-      }
     }
   }
 </style>

package/src/components/Social.astro

@@ -26,3 +26,10 @@ const platform = () => {
   {variant}
   {href}
 />
+
+<style is:global lang="scss">
+  .social {
+    padding: 0 var(--space-3);
+    height: calc(var(--text-2) + 2 * var(--space-3));
+  }
+</style>

package/src/components/ThemeSelect.astro

@@ -1,6 +1,8 @@
 ---
 import Select from 'fulldev-ui/components/Select.astro'
 // const defaultTheme = fulldevConfig.colors.theme || 'light'
+
+const { ...rest } = Astro.props
 ---
 
 <Select
@@ -9,6 +11,7 @@ import Select from 'fulldev-ui/components/Select.astro'
   options={['light', 'dark']}
   value="light"
   onchange="localStorage.setItem('theme', this.value); window.location.reload();"
+  {...rest}
 />
 
 <script>

package/src/components/Toc.astro

@@ -1,16 +1,17 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import type { CollectionEntry } from 'astro:content'
 import Button from 'fulldev-ui/components/Button.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-interface Props extends GlobalProps, HTMLAttributes<'aside'> {
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  heading?: ComponentProps<typeof Heading>['text']
   render?: CollectionEntry<'pages'>['render'] | undefined
 }
 
-const { size = 'sm', render } = Astro.props
+const { size = 'sm', heading, render, ...rest } = Astro.props
 
 const headings = render ? (await render())?.headings : []
 const filteredHeadings = headings?.filter(
@@ -18,114 +19,55 @@ const filteredHeadings = headings?.filter(
 )
 ---
 
-<input
-  id="toc"
-  class="toc-checkbox"
-  type="checkbox"
-/>
-
 <Element
+  if={filteredHeadings?.length > 0}
   class:list="toc"
-  as="aside"
   {size}
+  {...rest}
 >
+  <Heading
+    level={6}
+    text={heading}
+  />
   {
-    filteredHeadings?.length > 0 && (
-      <>
-        <Heading
-          text="On this page"
-          level={6}
-        />
-        <nav class="toc-nav">
-          <Button
-            variant="link"
-            href={`#${filteredHeadings[0]?.slug}`}
-            text="Overview"
-            class="toc-link toc-link-h2"
-          />
-          {filteredHeadings.map((heading: any) => (
-            <Button
-              variant="link"
-              href={`#${heading.slug}`}
-              text={heading.text}
-              class={`toc-link toc-link-h${heading.depth}`}
-            />
-          ))}
-        </nav>
-      </>
-    )
+    filteredHeadings?.map((button: any) => (
+      <Button
+        class:list={`depth-${button.depth}`}
+        href={`#${button.slug}`}
+        variant="link"
+        text={button.text}
+      />
+    ))
   }
 </Element>
 
 <style lang="scss" is:global>
   @layer fulldev {
-    .toc-checkbox {
-      display: none;
-    }
-
-    @media (max-width: 1023.999px) {
-      body:has(.toc-checkbox:checked) {
-        overflow: hidden;
-      }
-    }
-
     .toc {
-      --toc-width: 240px;
-
       display: none;
-      position: fixed;
-      top: var(--header-height, 0px);
-      right: 0;
-      flex-shrink: 0;
-      flex-direction: column;
-      justify-content: flex-start;
-      gap: calc(var(--space-4) + var(--space-1));
-      z-index: 10;
-      border-left-width: 1px;
-      border-style: solid;
-      border-color: var(--color-a6);
-      background-color: var(--color-background);
-      padding: var(--space-md-6) var(--gutter);
-      width: 100%;
-      max-height: calc(100vh - var(--header-height, 0px));
-      overflow-y: auto;
-
-      &:is(.toc-checkbox:checked + &) {
-        display: flex;
-      }
 
       @media (min-width: 1024px) {
         display: flex;
         position: sticky;
-        border-left-width: 1px;
-        width: var(--toc-width);
-      }
-
-      .button + .heading {
-        margin-top: var(--space-5);
-      }
-
-      .toc-nav {
-        display: flex;
+        top: var(--header-height, 0px);
+        bottom: 0;
+        flex-shrink: 0;
         flex-direction: column;
-      }
-
-      .toc-link {
-        text-align: left;
-      }
-
-      .toc-link-h2 {
-        margin-top: var(--space-3);
-      }
-
-      .toc-link-h3 {
-        margin-top: var(--space-3);
-        margin-left: var(--space-4);
-      }
-
-      .toc-link-h4 {
-        margin-top: var(--space-2);
-        margin-left: var(--space-5);
+        justify-content: flex-start;
+        gap: var(--space-4);
+        z-index: 10;
+        padding: var(--space-md-6) var(--gutter);
+        width: calc(var(--space-7) * 4);
+        height: calc(100vh - var(--header-height, 0px));
+        overflow-y: auto;
+
+        .depth-3 {
+          padding-left: var(--space-4);
+        }
+
+        .depth-4 {
+          padding-left: var(--space-5);
+        }
       }
     }
   }

package/src/components/experimental/Form.astro

@@ -21,6 +21,8 @@ const { structure = 'column', ...rest } = Astro.props
 <style is:global lang="scss">
   .form {
     display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
     width: 100%;
     max-width: calc(var(--space-4) * 44);
   }

package/src/components/experimental/Gallery.astro

@@ -1,180 +1,104 @@
 ---
-import Icon from 'fulldev-ui/components/Icon.astro'
+import Element from 'fulldev-ui/components/Element.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 
-const { images, direction } = Astro.props
+const { images } = Astro.props
 ---
 
 <script>
-  const carousel = document.querySelector('.gallery .large-carousel')
-  const icon = document.querySelector('.gallery .icon')
-  const smallImages = document.querySelectorAll('.gallery .small-image')
-
-  carousel &&
-    icon?.addEventListener('click', () => {
-      const carouselWidth = (carousel as HTMLElement).offsetWidth
-      const currentScroll = carousel.scrollLeft
-      const maxScroll = carousel.scrollWidth - carouselWidth
-
-      let scrollAmount = currentScroll + carouselWidth
-      if (scrollAmount > maxScroll) {
-        scrollAmount = 0 // Reset to beginning if we're at the end
-      }
-
-      carousel.scrollTo({
-        left: scrollAmount,
-        behavior: 'smooth',
-      })
-    })
-
-  carousel &&
-    smallImages?.forEach((image, i) => {
-      image.addEventListener('click', () => {
-        const imageWidth = (carousel as HTMLElement).offsetWidth
-        carousel.scrollTo({
-          left: i * imageWidth,
-          behavior: 'smooth',
+  const setupGallery = (document: Document) => {
+    const galleries = document.querySelectorAll('.gallery')
+
+    galleries.forEach((gallery) => {
+      const carousel = gallery.querySelector('.large-carousel')
+      const smallImages = gallery.querySelectorAll('.small-image')
+
+      carousel &&
+        smallImages?.forEach((image, i) => {
+          image.addEventListener('click', () => {
+            const largeImages = carousel.querySelectorAll('.large-image')
+            if (largeImages[i]) {
+              largeImages[i].scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'start',
+              })
+            }
+          })
         })
-      })
     })
+  }
+
+  setupGallery(document)
+
+  document.addEventListener('astro:before-swap', (event) => {
+    setupGallery(event.newDocument)
+  })
 </script>
 
-<div
-  class:list={[
-    'full',
-    'gallery',
-    {
-      [`direction-${direction}`]: direction,
-    },
-  ]}
->
-  <div class="large-container">
-    <div class="large-carousel">
-      {
-        images?.map((image: any) => (
-          <Image
-            class="large-image"
-            src={image}
-          />
-        ))
-      }
-    </div>
+<Element class:list={['gallery']}>
+  <Element class="large-carousel">
     {
-      images?.length > 1 && (
-        <Icon
-          class="icon"
-          name="swipe-left"
+      images?.map((image: any) => (
+        <Image
+          class="large-image"
+          {...(typeof image === 'string' ? { src: image } : image)}
         />
-      )
+      ))
     }
-  </div>
-  <div class="small-carousel">
+  </Element>
+  <Element class="small-carousel">
     {
       images?.length > 1 &&
         images.map((image: any) => (
           <Image
             class="small-image"
-            src={image}
+            {...(typeof image === 'string' ? { src: image } : image)}
           />
         ))
     }
-  </div>
-</div>
+  </Element>
+</Element>
 
 <style is:global lang="scss">
   .gallery {
     display: flex;
     position: relative;
-    column-gap: var(--space-4);
-    row-gap: var(--space-1);
     flex-direction: column;
-
-    @media (min-width: 1024px) {
-      flex-direction: row-reverse;
-    }
-
-    .large-container {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      &:hover .icon {
-        opacity: 1;
-      }
-
-      .icon {
-        position: absolute;
-        right: var(--space-3);
-        opacity: 0.5;
-        animation: swipe-icon 1.6s ease-in-out infinite;
-        transition: opacity 0.2s ease-in-out;
-        font-size: calc(var(--text-2) * 1.7);
-
-        @media (min-width: 1024px) {
-          display: none;
-        }
-      }
-
-      @keyframes swipe-icon {
-        0%,
-        100% {
-          right: var(--space-3);
-        }
-        50% {
-          right: calc(var(--space-3) * 2);
-        }
-      }
-    }
+    gap: var(--space-1) var(--space-4);
 
     .small-carousel,
     .large-carousel {
-      --column-width: 100%;
       display: flex;
       position: relative;
-      align-items: flex-start;
+      align-items: center;
       gap: var(--space-4);
-
       box-sizing: border-box;
       padding-bottom: var(--space-4);
       width: 100%;
-      overflow-x: auto;
+      overflow: auto;
       scroll-behavior: smooth;
       scroll-snap-type: x mandatory;
 
-      > .root {
+      > .image {
         flex-grow: 0;
         flex-shrink: 0;
         width: var(--column-width);
         scroll-snap-align: center;
       }
+    }
 
-      &.position-inset {
-        margin-right: calc(var(--inner-x) * -1);
-        margin-left: calc(var(--inner-x) * -1);
-        padding-right: var(--inner-x);
-        padding-left: var(--inner-x);
-        width: calc(100% + var(--inner-x) * 2);
-      }
+    .large-carousel {
+      --column-width: 100%;
     }
 
     .small-carousel {
       --column-width: var(--space-7);
 
-      @media (min-width: 1024px) {
-        --column-width: 100%;
-
-        flex-direction: column;
-        width: 40%;
+      .image:hover {
+        opacity: 0.8;
+        cursor: pointer;
       }
     }
-
-    .small-image,
-    .large-image {
-    }
-
-    .small-image:hover {
-      opacity: 0.8;
-      cursor: pointer;
-    }
   }
 </style>

package/src/components/experimental/Prose.astro

@@ -151,6 +151,38 @@ const { as = 'div', ...rest } = Astro.props
       }
     }
 
+    ul,
+    ol {
+      display: flex;
+      flex-direction: column;
+      margin: var(--space-4) 0;
+      padding-left: var(--space-5);
+      color: var(--color-11);
+      font-size: var(--text-2);
+      line-height: 1.625;
+    }
+
+    ul {
+      list-style-type: disc;
+    }
+
+    ol {
+      list-style-type: decimal;
+    }
+
+    li {
+      align-items: center;
+      margin-bottom: var(--space-2);
+      max-width: calc(var(--space-4) * 44);
+      color: var(--color-11);
+      font-size: var(--text-2);
+      line-height: 1.625;
+    }
+
+    li:last-child {
+      margin-bottom: 0;
+    }
+
     p code {
       background-color: var(--base-12);
       padding: 0 var(--space-1);