fulldev-ui 0.6.4 → 0.7.0-beta.1

package/src/structures/Carousel.astro

@@ -1,106 +0,0 @@
----
-import Button from 'fulldev-ui/components/Button.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-
-interface Props {}
----
-
-<script>
-  function scrollLeft(content: HTMLElement) {
-    content.scrollLeft -= content.clientWidth
-  }
-
-  function scrollRight(content: HTMLElement) {
-    content.scrollLeft += content.clientWidth
-  }
-
-  const updateButtons = (
-    left: HTMLElement,
-    right: HTMLElement,
-    content: HTMLElement
-  ) => {
-    const isScrollable = content.scrollWidth > content.clientWidth
-    const atStart = content.scrollLeft <= 0
-    const atEnd =
-      content.scrollLeft >= content.scrollWidth - content.clientWidth
-
-    left?.classList.toggle('hide', !isScrollable || atStart)
-    right?.classList.toggle('hide', !isScrollable || atEnd)
-  }
-
-  document.addEventListener('astro:page-load', () => {
-    const carousels = document.querySelectorAll('.carousel')
-    carousels.forEach((carousel) => {
-      const left = carousel?.querySelector('.carousel-left')
-      const right = carousel?.querySelector('.carousel-right')
-      const content = carousel?.querySelector('.carousel-content')
-
-      if (!(content instanceof HTMLElement)) return
-      if (!(left instanceof HTMLElement)) return
-      if (!(right instanceof HTMLElement)) return
-
-      left?.addEventListener('click', () => scrollLeft(content))
-      right?.addEventListener('click', () => scrollRight(content))
-
-      const observer = new ResizeObserver(() => {
-        updateButtons(left, right, content)
-      })
-
-      observer.observe(content)
-
-      content.addEventListener('scroll', () => {
-        updateButtons(left, right, content)
-      })
-    })
-  })
-</script>
-
-<Element class:list="carousel">
-  <Button
-    class="carousel-left hide"
-    icon="chevron-left"
-    variant="secondary"
-    size="sm"
-  />
-  <Element class:list="carousel-content">
-    <slot />
-  </Element>
-  <Button
-    class="carousel-right hide"
-    icon="chevron-right"
-    variant="secondary"
-    size="sm"
-  />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .carousel {
-      @apply container relative flex w-full items-center overflow-hidden px-0;
-
-      .button {
-        @apply absolute z-10 bg-secondary-hover opacity-50 hover:opacity-100;
-
-        &.hide {
-          @apply !hidden;
-        }
-      }
-
-      .carousel-left {
-        @apply left-2;
-      }
-
-      .carousel-right {
-        @apply right-2;
-      }
-
-      .carousel-content {
-        @apply inline-flex w-full snap-x snap-mandatory gap-2 overflow-x-auto scroll-smooth px-gutter scrollbar-none;
-
-        > * {
-          @apply snap-center;
-        }
-      }
-    }
-  }
-</style>

package/src/structures/Container.astro

@@ -1,25 +0,0 @@
----
-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="container"
-  {...rest}
->
-  <slot />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .container {
-      @apply mx-auto w-full max-w-screen-2xl px-4 sm:px-8;
-    }
-  }
-</style>

package/src/structures/Drawer.astro

@@ -1,81 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-
-interface Props
-  extends HTMLAttributes<'aside'>,
-    Pick<ComponentProps<typeof Button>, 'variant' | 'size' | 'text' | 'icon'> {
-  id: string
-  icon: string
-}
-
-const { id, variant = 'ghost', size = 'md', icon, text, ...rest } = Astro.props
-
-const slot = await Astro.slots.render('default')
-const render = slot?.trim().length > 0
----
-
-{
-  render && (
-    <Element class:list="drawer">
-      <Button
-        class="drawer-button"
-        role="button"
-        for={id}
-        {variant}
-        {size}
-        {text}
-        {icon}
-      />
-
-      <input
-        type="checkbox"
-        class="drawer-checkbox"
-        name={id}
-        {id}
-      />
-
-      <Element
-        class:list="drawer-body"
-        as="aside"
-        {...rest}
-      >
-        <Fragment set:html={slot} />
-      </Element>
-      <label
-        for={id}
-        class="drawer-backdrop"
-      />
-    </Element>
-  )
-}
-
-<style is:global>
-  @layer fulldev {
-    .drawer {
-      @apply contents h-screen;
-    }
-
-    .drawer-checkbox {
-      @apply invisible hidden;
-    }
-
-    .drawer-backdrop {
-      @apply pointer-events-none invisible fixed left-0 top-0 z-30 h-screen w-full bg-black opacity-0 transition-opacity;
-
-      &:is(.drawer-checkbox:checked ~ &) {
-        @apply pointer-events-auto visible opacity-50;
-      }
-    }
-
-    .drawer-body {
-      @apply fixed bottom-0 left-0 top-0 z-40 h-screen w-80 max-w-[75vw] -translate-x-full overflow-y-auto rounded-r-lg border border-l-0 bg-background shadow-2xl transition-transform;
-      @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
-
-      &:is(.drawer-checkbox:checked ~ &) {
-        @apply translate-x-0;
-      }
-    }
-  }
-</style>

package/src/structures/Group.astro

@@ -1,25 +0,0 @@
----
-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/structures/Layout.astro

@@ -1,34 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Head from 'fulldev-ui/components/Head.astro'
-
-type Props = Omit<HTMLAttributes<'body'>, 'title'> & {
-  head?: ComponentProps<typeof Head>
-}
-
-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/structures/Masonry.astro

@@ -1,42 +0,0 @@
----
-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="masonry"
-  {...rest}
->
-  <slot />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .masonry {
-      --column-width: 20rem;
-      @apply relative w-full columns-sm gap-5 space-y-5;
-
-      & > * {
-        @apply break-inside-avoid;
-      }
-
-      /* &.size-sm {
-        --column-width: 16rem;
-      }
-
-      &.size-md {
-        --column-width: 20rem;
-      }
-
-      &.size-lg {
-        --column-width: 26rem;
-      } */
-    }
-  }
-</style>

package/src/structures/Matrix.astro

@@ -1,39 +0,0 @@
----
-import type { HTMLAttributes, HTMLTag } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-
-interface Props extends HTMLAttributes<'div'> {
-  as?: HTMLTag
-  size?: 'sm' | 'md' | 'lg' | undefined
-}
-
-const { size = 'md', ...rest } = Astro.props
----
-
-<Element
-  class:list="matrix"
-  {size}
-  {...rest}
->
-  <slot />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .matrix {
-      @apply relative grid w-full gap-5;
-
-      &.size-sm {
-        @apply grid-cols-[repeat(auto-fill,minmax(12rem,1fr))];
-      }
-
-      &.size-md {
-        @apply grid-cols-[repeat(auto-fill,minmax(16rem,1fr))];
-      }
-
-      &.size-lg {
-        @apply grid-cols-[repeat(auto-fill,minmax(20rem,1fr))];
-      }
-    }
-  }
-</style>

package/src/structures/Panel.astro

@@ -1,25 +0,0 @@
----
-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-20 text-card-foreground lg:px-20;
-    }
-  }
-</style>

package/src/structures/Prose.astro

@@ -1,96 +0,0 @@
----
-import type { HTMLAttributes, HTMLTag } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-
-interface Props extends HTMLAttributes<'div'> {
-  as?: HTMLTag
-  align?: 'center' | 'middle' | 'columns'
-}
-
-const { ...rest } = Astro.props
----
-
-<Element
-  class:list="prose"
-  {...rest}
->
-  <slot />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .prose {
-      @apply w-full max-w-screen-md;
-
-      &.align-middle {
-        @apply mx-auto max-w-screen-md items-center;
-      }
-
-      &.align-center {
-        @apply mx-auto flex max-w-screen-md flex-col items-center;
-
-        > * {
-          @apply text-center;
-
-          > * {
-            @apply text-left;
-          }
-        }
-      }
-
-      &.align-columns {
-        @apply max-w-none break-inside-avoid gap-x-8 lg:columns-2;
-      }
-
-      > *,
-      .tagline + *,
-      .proof + *,
-      .channel + .channel {
-        @apply mt-4;
-      }
-
-      > .group,
-      > .button,
-      > .buttons,
-      > .channel {
-        @apply mt-8;
-      }
-
-      > .form,
-      > img,
-      > p > img {
-        @apply my-12;
-      }
-
-      > h2 {
-        @apply mt-10;
-      }
-
-      > h3 {
-        @apply mt-8;
-      }
-
-      > h4,
-      > h5,
-      > h6 {
-        @apply mt-6;
-      }
-
-      code:not(:is(.astro-code, h1, h2, h3, h4, h5, h6) code) {
-        @apply rounded bg-muted px-1.5 py-0.5 font-mono text-sm font-medium;
-      }
-
-      > aside {
-        @apply rounded-md border border-destructive p-4 text-destructive;
-      }
-
-      blockquote > p + p {
-        @apply !mt-1;
-      }
-
-      > *:first-child {
-        @apply mt-0;
-      }
-    }
-  }
-</style>

package/src/structures/Section.astro

@@ -1,26 +0,0 @@
----
-import type { HTMLAttributes, HTMLTag } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-
-interface Props extends HTMLAttributes<'section'> {
-  as?: HTMLTag
-}
-
-const { as = 'section', ...rest } = Astro.props
----
-
-<Element
-  class:list="section"
-  {as}
-  {...rest}
->
-  <slot />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .section {
-      @apply relative w-full py-20 first:pt-20 lg:py-32;
-    }
-  }
-</style>

package/src/structures/Sidebar.astro

@@ -1,36 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-
-interface Props extends HTMLAttributes<'aside'> {}
-
-const { ...rest } = Astro.props
----
-
-<Element
-  class:list="sidebar"
-  as="aside"
-  {...rest}
->
-  <slot />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .sidebar {
-      @apply sticky top-header hidden shrink-0 grow flex-col items-start gap-8 overflow-y-auto bg-background p-8 lg:flex;
-      @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
-
-      width: var(--sidebar-width);
-      max-width: var(--sidebar-width);
-      max-height: calc(100vh - var(--header-height, 0px));
-
-      &,
-      & ~ * {
-        @media (min-width: 1024px) {
-          --sidebar-width: 14rem;
-        }
-      }
-    }
-  }
-</style>

package/src/structures/Split.astro

@@ -1,38 +0,0 @@
----
-import type { HTMLAttributes, HTMLTag } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-
-interface Props extends HTMLAttributes<'div'> {
-  as?: HTMLTag
-  align?: 'start' | 'center' | 'sticky'
-}
-
-const { ...rest } = Astro.props
----
-
-<Element
-  class:list="split"
-  {...rest}
->
-  <slot />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .split {
-      @apply grid gap-x-4 gap-y-16 sm:gap-x-8 lg:grid-cols-2;
-    }
-
-    .align-start {
-      @apply items-start;
-    }
-
-    .align-center {
-      @apply items-center;
-    }
-
-    .align-sticky {
-      @apply items-start lg:[&>*]:sticky lg:[&>*]:top-sticky-16;
-    }
-  }
-</style>

package/src/structures/Stack.astro

@@ -1,25 +0,0 @@
----
-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="stack"
-  {...rest}
->
-  <slot />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .stack {
-      @apply relative grid w-full auto-cols-fr items-start gap-x-8 gap-y-8 lg:grid-flow-col lg:gap-x-16;
-    }
-  }
-</style>

package/src/structures/Writeup.astro

@@ -1,67 +0,0 @@
----
-import type { HTMLAttributes, HTMLTag } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-
-interface Props extends HTMLAttributes<'div'> {
-  as?: HTMLTag
-  align?: 'left' | 'center' | 'right'
-}
-
-const { align = 'start', ...rest } = Astro.props
----
-
-<Element
-  class:list="writeup"
-  {align}
-  {...rest}
->
-  <slot />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .writeup {
-      @apply relative w-full;
-
-      &.align-left {
-        @apply mr-auto flex flex-col items-start text-left;
-      }
-
-      &.align-center {
-        @apply mx-auto flex flex-col items-center text-center;
-
-        .paragraph {
-          @apply text-balance;
-        }
-      }
-
-      &.align-right {
-        @apply ml-auto flex flex-col items-end text-right;
-      }
-
-      .heading {
-        @apply max-w-screen-lg text-balance;
-      }
-
-      .paragraph {
-        @apply max-w-screen-md;
-      }
-
-      > * {
-        & + * {
-          @apply mt-2;
-        }
-
-        &:is(h1, h2) + * {
-          @apply mt-4;
-        }
-
-        & + .group,
-        & + .button,
-        & + .buttons {
-          @apply mt-8;
-        }
-      }
-    }
-  }
-</style>

package/src/structures/_Bento.astro

@@ -1,34 +0,0 @@
----
-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="bento"
-  {...rest}
->
-  <slot />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .bento {
-      @apply relative grid w-full grid-cols-1 gap-4 lg:grid-cols-5;
-
-      & > * {
-        @apply lg:grid-col-span-2;
-      }
-
-      & > *:nth-child(3n + 2),
-      & > *:nth-child(3n + 3) {
-        @apply lg:grid-col-span-3;
-      }
-    }
-  }
-</style>