fulldev-ui 0.5.0-beta.9 → 0.6.0-beta.0

package/src/components/experimental/Gallery.astro

@@ -1,104 +0,0 @@
----
-import Element from 'fulldev-ui/components/Element.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-
-const { images } = Astro.props
----
-
-<script>
-  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>
-
-<Element class:list={['gallery']}>
-  <Element class="large-carousel">
-    {
-      images?.map((image: any) => (
-        <Image
-          class="large-image"
-          {...(typeof image === 'string' ? { src: image } : image)}
-        />
-      ))
-    }
-  </Element>
-  <Element class="small-carousel">
-    {
-      images?.length > 1 &&
-        images.map((image: any) => (
-          <Image
-            class="small-image"
-            {...(typeof image === 'string' ? { src: image } : image)}
-          />
-        ))
-    }
-  </Element>
-</Element>
-
-<style is:global lang="scss">
-  .gallery {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    gap: var(--space-1) var(--space-4);
-
-    .small-carousel,
-    .large-carousel {
-      display: flex;
-      position: relative;
-      align-items: center;
-      gap: var(--space-4);
-      box-sizing: border-box;
-      padding-bottom: var(--space-4);
-      width: 100%;
-      overflow: auto;
-      scroll-behavior: smooth;
-      scroll-snap-type: x mandatory;
-
-      > .image {
-        flex-grow: 0;
-        flex-shrink: 0;
-        width: var(--column-width);
-        scroll-snap-align: center;
-      }
-    }
-
-    .large-carousel {
-      --column-width: 100%;
-    }
-
-    .small-carousel {
-      --column-width: var(--space-7);
-
-      .image:hover {
-        opacity: 0.8;
-        cursor: pointer;
-      }
-    }
-  }
-</style>

package/src/components/experimental/Logo.astro

@@ -1,38 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-
-interface Props extends ComponentProps<typeof Image> {
-  company?: string | undefined
-}
-
-const { company, ...rest } = Astro.props as Props
----
-
-<Element
-  as="a"
-  href="/"
-  class:list="logo"
->
-  {company ? <Fragment set:html={company} /> : <Image {...rest} />}
-</Element>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .logo {
-      display: flex;
-      align-items: center;
-      color: var(--color-12);
-      font-weight: 700;
-      font-size: var(--text-6);
-      line-height: 1.1;
-
-      .image {
-        max-width: calc(15 * var(--space-2));
-        height: 100%;
-        object-fit: contain;
-      }
-    }
-  }
-</style>

package/src/components/experimental/Prose.astro

@@ -1,192 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }>
-
-const { as = 'div', ...rest } = Astro.props
----
-
-<Element
-  class:list="prose"
-  {as}
-  {...rest}
->
-  <slot />
-</Element>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .prose {
-      width: 100%;
-      scroll-margin-top: var(--space-6);
-      color: var(--color-11);
-      font-size: var(--text-3);
-      line-height: 1.7;
-
-      > {
-        .astro-code,
-        .window,
-        .table {
-          margin-top: var(--space-5);
-        }
-
-        * {
-          margin: 0;
-        }
-
-        p {
-          margin-top: var(--space-4);
-        }
-
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-          color: var(--color-12);
-          font-weight: 700;
-          line-height: 1.2;
-        }
-
-        h1 {
-          margin-top: var(--space-6);
-          scroll-margin-top: var(--space-6);
-          font-size: var(--text-8);
-        }
-
-        h2 {
-          margin-top: var(--space-6);
-          scroll-margin-top: var(--space-6);
-          font-size: var(--text-7);
-        }
-
-        h3 {
-          margin-top: var(--space-6);
-          scroll-margin-top: var(--space-6);
-          font-size: var(--text-6);
-        }
-
-        h4 {
-          margin-top: var(--space-5);
-          scroll-margin-top: var(--space-5);
-          font-size: var(--text-5);
-        }
-
-        h5 {
-          margin-top: var(--space-5);
-          scroll-margin-top: var(--space-5);
-          font-size: var(--text-4);
-        }
-
-        h6 {
-          margin-top: var(--space-5);
-          scroll-margin-top: var(--space-5);
-          font-size: var(--text-3);
-        }
-
-        *:first-child {
-          margin-top: 0;
-        }
-      }
-
-      .display {
-        display: grid;
-        width: 100%;
-        max-width: none;
-
-        table {
-          h1,
-          h2,
-          h3,
-          h4,
-          h5,
-          h6 {
-            margin: var(--space-2) 0;
-
-            font: 600 var(--text-3) 'Saira';
-
-            & + p {
-              color: var(--hue11);
-            }
-          }
-        }
-      }
-
-      table {
-        margin: var(--space-5) 0;
-        border: 1px solid var(--border);
-        border-radius: var(--radius-1) !important;
-        border-collapse: collapse;
-        width: 100%;
-      }
-
-      th {
-        border-bottom: 1px solid var(--border);
-        background: var(--raised-background) !important;
-        color: var(--muted-foreground) !important;
-        font-weight: 500 !important;
-        font-size: var(--text-3) !important;
-      }
-
-      td {
-        color: var(--muted-foreground) !important;
-      }
-
-      th,
-      td {
-        padding: var(--space-2);
-      }
-
-      table a {
-        color: var(--solid) !important;
-        font-size: var(--text-3) !important;
-        line-height: 1 !important;
-        white-space: nowrap;
-      }
-
-      table a:hover {
-        text-decoration: underline;
-      }
-    }
-
-    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);
-      color: var(--base-1);
-    }
-  }
-</style>

package/src/content/pages/base/icon.mdx

@@ -1,55 +0,0 @@
----
-presets: [docs]
-
-title: Icon
----
-
-# Icon
-
-We use [Tabler Icons](https://tablericons.com/) under the hood, you can use any of those icons by having the `name` prop match one of the icon names.
-
-```astro live
----
-import Icon from 'fulldev-ui/components/Icon.astro'
----
-
-<Icon name="code" color="brand" size="lg" />
-```
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-
-## Props
-
-<PropsTable />
-
-## Examples
-
-```astro live
----
-import Icon from 'fulldev-ui/components/Icon.astro'
----
-
-<Icon name="circle" />
-<Icon name="arrow-right" />
-<Icon name="brand-x" />
-<Icon name="brand-github" />
-```
-
-```astro live
----
-import Icon from 'fulldev-ui/components/Icon.astro'
----
-
-<Icon size="sm" name="circle" />
-<Icon size="md" name="circle" />
-<Icon size="lg" name="circle" />
-```
-
-```astro live
----
-import Icon from 'fulldev-ui/components/Icon.astro'
----
-
-<Icon color="base" name="circle" />
-<Icon color="brand" name="circle" />
-```

package/src/content/pages/base/image.mdx

@@ -1,42 +0,0 @@
----
-presets: [docs]
-
-title: Image
----
-
-# Image
-
-import Link from 'fulldev-ui/components/Link.astro'
-
-To use content collections for alt texts, see <Link href="/overview/content-layer/#image-alt-collections">generateImageEntries</Link>.
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-
-```astro live
----
-import Image from 'fulldev-ui/components/Image.astro'
----
-
-<Image src="placeholder-landscape.webp" />
-```
-
-## Props
-
-<PropsTable />
-
-## Examples
-
-```astro live
----
-import Image from 'fulldev-ui/components/Image.astro'
----
-
-{/* image in public/images/ */}
-<Image src="/images/placeholder-landscape.webp" />
-
-{/* optimized image in public/images/ using astro:assets */}
-<Image src="/images/placeholder-landscape.webp" width={600} height={400} />
-
-{/* automatically optimized image in src/images/ using astro:assets */}
-<Image src="placeholder-landscape.webp" />
-```

package/src/content/pages/base/input.mdx

@@ -1,56 +0,0 @@
----
-presets: [docs]
-
-title: Input
----
-
-# Input
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-
-```astro live
----
-import Input from 'fulldev-ui/components/Input.astro'
----
-
-<Input
-  label="Email"
-  icon="mail"
-  name="input"
-  type="email"
-  placeholder="This is an input"
-/>
-```
-
-## Props
-
-<PropsTable />
-
-## Examples
-
-```astro live
----
-import Input from 'fulldev-ui/components/Input.astro'
----
-
-<Input label="Name" icon="mail" name="name" type="email" />
-```
-
-```astro live
----
-import Input from 'fulldev-ui/components/Input.astro'
----
-
-<Input size="sm" name="name" />
-<Input size="md" name="name" />
-<Input size="lg" name="name" />
-```
-
-```astro live
----
-import Input from 'fulldev-ui/components/Input.astro'
----
-
-<Input color="base" name="name" />
-<Input color="brand" name="name" />
-```

package/src/content/pages/base/rating.mdx

@@ -1,55 +0,0 @@
----
-presets: [docs]
-
-title: Rating
----
-
-# Rating
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-
-```astro live
----
-import Rating from 'fulldev-ui/components/Rating.astro'
----
-
-<Rating avatar="avatar-1.jpeg" label="John Doe" value={4} color="brand" />
-```
-
-## Props
-
-<PropsTable />
-
-## Examples
-
-```astro live
----
-import Rating from 'fulldev-ui/components/Rating.astro'
----
-
-<Rating
-  avatars={['avatar-1.jpeg', 'avatar-2.jpeg', 'avatar-3.jpeg', 'avatar-4.jpeg']}
-  label="5.0 out of 86 reviews"
-  value={5}
-  color="brand"
-/>
-```
-
-```astro live
----
-import Rating from 'fulldev-ui/components/Rating.astro'
----
-
-<Rating value={3} color="base" />
-<Rating value={5} color="brand" />
-```
-
-```astro live
----
-import Rating from 'fulldev-ui/components/Rating.astro'
----
-
-<Rating value={5} size="sm" />
-<Rating value={5} size="md" />
-<Rating value={5} size="lg" />
-```

package/src/content/pages/base/textarea.mdx

@@ -1,58 +0,0 @@
----
-presets: [docs]
-
-title: Textarea
----
-
-# Textarea
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-
-```astro live
----
-import Textarea from 'fulldev-ui/components/Textarea.astro'
----
-
-<Textarea name="message" placeholder="Write a message.." label="Textarea" />
-```
-
-## Props
-
-<PropsTable />
-
-## Examples
-
-```astro live
----
-import Textarea from 'fulldev-ui/components/Textarea.astro'
----
-
-<Textarea size="sm" name="message" placeholder="name" />
-<Textarea size="md" name="message" placeholder="name" />
-<Textarea size="lg" name="message" placeholder="name" />
-```
-
-```astro live
----
-import Textarea from 'fulldev-ui/components/Textarea.astro'
----
-
-<Textarea label="Message" name="message" placeholder="name" />
-```
-
-```astro live
----
-import Textarea from 'fulldev-ui/components/Textarea.astro'
----
-
-<Textarea label="Message" name="message" placeholder="name" />
-```
-
-```astro live
----
-import Textarea from 'fulldev-ui/components/Textarea.astro'
----
-
-<Textarea color="base" name="message" placeholder="name" />
-<Textarea color="brand" name="message" placeholder="name" />
-```

package/src/content/pages/base/theme-select.mdx

@@ -1,15 +0,0 @@
----
-presets: [docs]
-
-title: ThemeSelect
----
-
-# ThemeSelect
-
-```astro live
----
-import ThemeSelect from 'fulldev-ui/components/ThemeSelect.astro'
----
-
-<ThemeSelect />
-```

package/src/content/pages/layouts/_layout.mdx

@@ -1,14 +0,0 @@
----
-presets: [docs]
-
-title: Layout
----
-
-import Layout from 'fulldev-ui/layouts/Layout.astro?raw'
-import { Code } from 'astro:components'
-
-# Layout
-
-The Layout component is used to wrap the content of a page. It provides a structured template for your website.
-
-<Code code={Layout} lang="astro" />

package/src/content/pages/layouts/docslayout.mdx

@@ -1,14 +0,0 @@
----
-presets: [docs]
-
-title: DocsLayout
----
-
-import Layout from 'fulldev-ui/layouts/DocsLayout.astro?raw'
-import { Code } from 'astro:components'
-
-# DocsLayout
-
-The DocsLayout component is used to wrap the content of a page in a sidebar and a main content area and table of contents.
-
-<Code code={Layout} lang="astro" />