fulldev-ui 0.6.4 → 0.7.0-beta.1

package/src/components/Form.astro

@@ -1,34 +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'
-import Fields from 'fulldev-ui/components/Fields.astro'
-
-interface Props extends HTMLAttributes<'form'> {
-  fields?: ComponentProps<typeof Fields>['fields']
-  button?: ComponentProps<typeof Button> | undefined
-}
-
-const { fields, button, ...rest } = Astro.props
----
-
-<Element
-  class:list="form"
-  as="form"
-  {...rest}
->
-  <Fields {fields} />
-  <slot />
-  <Button
-    type="submit"
-    {...button}
-  />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .form {
-      @apply flex w-full max-w-screen-md flex-col gap-4;
-    }
-  }
-</style>

package/src/components/Gallery.astro

@@ -1,175 +0,0 @@
----
-// @ts-nocheck
-import type { ComponentProps } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-
-interface Props {
-  images?:
-    | (ComponentProps<typeof Image> | ComponentProps<typeof Image>['src'])[]
-    | undefined
-}
-
-const { images } = Astro.props
-
-const hasMultiple = images?.length > 1
-const hasMany = images?.length > 5
----
-
-<script>
-  function scrollLeft(carousel: HTMLElement) {
-    carousel.scrollLeft -= carousel.clientWidth
-  }
-
-  function scrollRight(carousel: HTMLElement) {
-    carousel.scrollLeft += carousel.clientWidth
-  }
-
-  function scrollTo(carousel: HTMLElement, index: number) {
-    carousel.scrollLeft = index * carousel.clientWidth
-  }
-
-  document.addEventListener('astro:page-load', () => {
-    const galleries = document.querySelectorAll('.gallery')
-    galleries.forEach((gallery) => {
-      // Apply left and right event listeners to large and small carousels
-      const containers = gallery.querySelectorAll(
-        '.gallery-small, .gallery-large'
-      )
-      containers?.forEach((element) => {
-        const left = element?.querySelector('.gallery-left')
-        const right = element?.querySelector('.gallery-right')
-        const carousel = element?.querySelector(
-          '.gallery-carousel'
-        ) as HTMLElement
-
-        left?.addEventListener('click', () => scrollLeft(carousel))
-        right?.addEventListener('click', () => scrollRight(carousel))
-      })
-
-      // Apply item click event listener to small carousel items
-      const items = gallery.querySelectorAll('.gallery-small .gallery-item')
-      const largeCarousel = gallery.querySelector(
-        '.gallery-large .gallery-carousel'
-      ) as HTMLElement
-      items?.forEach((item, i) => {
-        item.addEventListener('click', () => {
-          scrollTo(largeCarousel, i)
-        })
-      })
-    })
-  })
-</script>
-
-<Element class:list="gallery">
-  <Element class:list="gallery-large">
-    <Button
-      show={hasMultiple}
-      class="gallery-left"
-      icon="chevron-left"
-      variant="secondary"
-      size="sm"
-    />
-    <Element class:list="gallery-carousel">
-      {
-        images?.map((image: any) => (
-          <Element class:list="gallery-item">
-            <Image {...(typeof image === 'string' ? { src: image } : image)} />
-          </Element>
-        ))
-      }
-    </Element>
-    <Button
-      show={hasMultiple}
-      class="gallery-right"
-      icon="chevron-right"
-      variant="secondary"
-      size="sm"
-    />
-  </Element>
-  <Element
-    show={hasMultiple}
-    class:list="gallery-small"
-  >
-    <Button
-      show={hasMany}
-      class="gallery-left"
-      icon="chevron-left"
-      variant="secondary"
-      size="sm"
-    />
-    <Element class:list="gallery-carousel">
-      {
-        images?.map((image: any) => (
-          <Element
-            as="button"
-            class:list="gallery-item"
-          >
-            <Image {...(typeof image === 'string' ? { src: image } : image)} />
-          </Element>
-        ))
-      }
-    </Element>
-    <Button
-      show={hasMany}
-      class="gallery-right"
-      icon="chevron-right"
-      variant="ghost"
-      size="sm"
-    />
-  </Element>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .gallery {
-      @apply relative flex flex-col gap-2;
-
-      .gallery-large,
-      .gallery-small {
-        @apply relative flex items-center;
-      }
-
-      .image {
-        @apply rounded;
-      }
-
-      .button {
-        @apply absolute z-10 bg-secondary-hover opacity-50 hover:opacity-100;
-      }
-
-      .gallery-left {
-        @apply left-2;
-      }
-
-      .gallery-right {
-        @apply right-2;
-      }
-
-      .gallery-carousel {
-        @apply inline-flex w-full snap-x snap-mandatory overflow-x-auto scroll-smooth scrollbar-none;
-      }
-
-      .gallery-large {
-        .gallery-item {
-          @apply flex w-full min-w-full snap-start;
-        }
-
-        .image {
-          @apply h-full max-h-[768px] w-full object-contain;
-        }
-      }
-
-      .gallery-small {
-        .gallery-carousel {
-          @apply gap-2;
-        }
-
-        .gallery-item {
-          @apply min-w-[calc(20%-0.4rem)] snap-start overflow-hidden transition hover:opacity-80;
-        }
-      }
-    }
-  }
-</style>

package/src/components/Head.astro

@@ -1,94 +0,0 @@
----
-import { AstroSeo } from '@astrolib/seo'
-import type { HTMLAttributes } from 'astro/types'
-import type Image from 'fulldev-ui/components/Image.astro'
-import type { ComponentProps } from 'svelte'
-
-type Props = HTMLAttributes<'head'> & {
-  title?: string | undefined
-  description?: string | undefined
-  image?: ComponentProps<typeof Image> | undefined
-  theme?: 'light' | 'dark' | 'system' | undefined
-  favicon?: string | undefined
-  company?: string | undefined
-  scripts?: string[] | undefined
-  code?: string | undefined
-}
-
-const { theme, title, description, image, code, ...rest } = Astro.props
-
-const src = image?.src && Astro.url.origin + image.src
----
-
-<head {...rest}>
-  <meta charset="utf-8" />
-  <meta
-    content="width=device-width, initial-scale=1, viewport-fit=cover"
-    name="viewport"
-  />
-  <meta
-    name="generator"
-    content={Astro.generator}
-  />
-  <link
-    rel="canonical"
-    href={Astro.url.href.endsWith('/') ? Astro.url.href : Astro.url.href + '/'}
-  />
-  <AstroSeo
-    title={title ?? ''}
-    description={description ?? ''}
-    openGraph={{
-      title: title ?? '',
-      description: description ?? '',
-      images: [
-        {
-          url: src ?? '',
-          alt: title ?? '',
-        },
-      ],
-    }}
-  />
-
-  <Fragment set:html={code} />
-  <slot />
-
-  <script is:inline define:vars={{ theme }}>
-    function setTheme(document) {
-      const value = localStorage.getItem('theme') || theme
-
-      const isDark =
-        value === 'dark' ||
-        (value === 'system' &&
-          window.matchMedia('(prefers-color-scheme: dark)').matches)
-
-      document.documentElement.classList.toggle('dark', isDark)
-
-      document.querySelectorAll('.themer').forEach((themer) => {
-        themer?.querySelectorAll('option').forEach((option) => {
-          option.selected = option.value === value
-        })
-      })
-    }
-
-    function setOption(document) {
-      const value = localStorage.getItem('theme') || theme
-
-      document.querySelectorAll('.themer').forEach((themer) => {
-        themer?.querySelectorAll('option').forEach((option) => {
-          option.selected = option.value === value
-        })
-      })
-    }
-
-    setTheme(document)
-    setOption(document)
-
-    document.addEventListener('astro:before-swap', (event) => {
-      setTheme(event.newDocument)
-    })
-
-    document.addEventListener('astro:page-load', (event) => {
-      setOption(document)
-    })
-  </script>
-</head>

package/src/components/Heading.astro

@@ -1,91 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-
-interface Props
-  extends HTMLAttributes<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> {
-  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined
-  depth?: 1 | 2 | 3 | 4 | 5 | 6 | number | undefined
-  text?: string | undefined
-  size?:
-    | 'xs'
-    | 'sm'
-    | 'md'
-    | 'lg'
-    | 'xl'
-    | '2xl'
-    | '3xl'
-    | '4xl'
-    | '5xl'
-    | '6xl'
-    | undefined
-}
-
-const { depth = 2, as = `h${depth}`, text, ...rest } = Astro.props
----
-
-<Element
-  class:list="heading"
-  {as}
-  {...rest}
->
-  <Fragment set:html={text} />
-  <slot />
-</Element>
-
-<style is:global>
-  .heading,
-  .prose > :is(h1, h2, h3, h4, h5, h6) {
-    @apply scroll-mt-20 font-bold tracking-tight text-foreground;
-
-    code {
-      @apply rounded-sm bg-muted px-1 py-0.5 font-mono;
-    }
-
-    &.size-xs {
-      @apply text-xs;
-    }
-
-    &.size-sm {
-      @apply text-sm;
-    }
-
-    &:where(.prose > h6),
-    &.size-md {
-      @apply text-base;
-    }
-
-    &:where(.prose > h5),
-    &.size-lg {
-      @apply text-lg;
-    }
-
-    &:where(.prose > h4),
-    &.size-xl {
-      @apply text-xl;
-    }
-
-    &:where(.prose > h3),
-    &.size-2xl {
-      @apply text-2xl;
-    }
-
-    &:where(.prose > h2),
-    &.size-3xl {
-      @apply text-3xl;
-    }
-
-    &.size-4xl {
-      @apply text-4xl;
-    }
-
-    &:where(.prose > h1),
-    &.size-5xl {
-      @apply text-4xl lg:text-5xl;
-    }
-
-    &.size-6xl {
-      @apply text-5xl lg:text-6xl;
-    }
-  }
-</style>

package/src/components/Input.astro

@@ -1,115 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-import Icon from 'fulldev-ui/components/Icon.astro'
-import Label from 'fulldev-ui/components/Label.astro'
-
-interface Props extends HTMLAttributes<'input'> {
-  size?: 'sm' | 'md' | 'lg' | undefined
-  label?: string | undefined
-  icon?: string | undefined
-}
-
-const {
-  label,
-  placeholder,
-  name = label || placeholder,
-  id = name,
-  type = 'text',
-  size = 'md',
-  value,
-  icon,
-  ...rest
-} = Astro.props
----
-
-<Label
-  class:list="input"
-  for={id}
-  {size}
-  {...rest}
->
-  <Fragment set:html={label} />
-  <Element
-    class:list="input-input"
-    as="input"
-    show={name}
-    id={name}
-    {name}
-    {placeholder}
-    {type}
-    {value}
-  />
-  <Icon
-    name={icon}
-    {size}
-  />
-</Label>
-
-<style is:global>
-  @layer fulldev {
-    .input-input {
-      @apply flex w-full rounded-md border border-input bg-background text-sm text-foreground ring-offset-background;
-      @apply file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground;
-      @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
-      @apply disabled:pointer-events-none disabled:opacity-50;
-      @apply [&[readonly]]:pointer-events-none;
-    }
-
-    .input {
-      @apply relative flex flex-col gap-1.5;
-
-      .icon {
-        @apply pointer-events-none absolute;
-      }
-
-      &.size-sm {
-        @apply gap-1;
-
-        .input-input {
-          @apply h-9 px-2.5 py-1.5 text-xs;
-        }
-
-        .icon {
-          @apply bottom-2 right-2;
-        }
-
-        .icon + .input-input {
-          @apply pr-9;
-        }
-      }
-
-      &.size-md {
-        @apply gap-1.5;
-
-        .input-input {
-          @apply h-10 px-3 py-2 text-sm;
-        }
-
-        .icon {
-          @apply bottom-2.5 right-2.5;
-        }
-
-        .icon + .input-input {
-          @apply pr-10;
-        }
-      }
-
-      &.size-lg {
-        @apply gap-2;
-
-        .input-input {
-          @apply h-12 px-3.5 py-2.5 text-base;
-        }
-
-        .icon {
-          @apply bottom-3.5 right-3.5;
-        }
-
-        .icon + .input-input {
-          @apply pr-11;
-        }
-      }
-    }
-  }
-</style>

package/src/components/Label.astro

@@ -1,42 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-
-interface Props extends HTMLAttributes<'label'> {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined
-  muted?: boolean | undefined
-  text?: string | undefined
-}
-
-const { size = 'md', text, ...rest } = Astro.props
----
-
-<Element
-  class:list="label"
-  as="label"
-  {size}
-  {...rest}
->
-  <Fragment set:html={text} />
-  <slot />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .label {
-      @apply font-medium leading-none;
-
-      &.size-sm {
-        @apply text-xs;
-      }
-
-      &.size-md {
-        @apply text-sm;
-      }
-
-      &.size-lg {
-        @apply text-base;
-      }
-    }
-  }
-</style>

package/src/components/Links.astro

@@ -1,20 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import Link from 'fulldev-ui/components/Link.astro'
-
-interface Props extends ComponentProps<typeof Link> {
-  link?: ComponentProps<typeof Link> | undefined
-  links?: ComponentProps<typeof Link>[] | undefined
-}
-
-const { link, links, ...rest } = Astro.props
----
-
-{
-  [link, ...(links || [])].filter(Boolean).map((link) => (
-    <Link
-      {...rest}
-      {...link}
-    />
-  ))
-}

package/src/components/Paragraph.astro

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