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

package/src/components/Footer.astro

@@ -1,193 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
-import Channels from 'fulldev-ui/components/Channels.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Social from 'fulldev-ui/components/Social.astro'
-import Socials from 'fulldev-ui/components/Socials.astro'
-import Text from 'fulldev-ui/components/Text.astro'
-import Logo from 'fulldev-ui/components/experimental/Logo.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-
-interface Props extends GlobalProps, HTMLAttributes<'footer'> {
-  screen?: number | undefined
-  logo?: ComponentProps<typeof Logo>['src']
-  company?: ComponentProps<typeof Logo>['company']
-  text?: ComponentProps<typeof Text>['text']
-  hours?: any
-  socials?: ComponentProps<typeof Social>['href'][] | undefined
-  buttons?: ComponentProps<typeof Button>[] | undefined
-  panel?: boolean | undefined
-  channels?: ComponentProps<typeof Channels>['channels'] | undefined
-  columns?: {
-    heading: ComponentProps<typeof Heading>['text']
-    buttons: ComponentProps<typeof Button>[] | undefined
-  }[]
-}
-
-const {
-  size = 'sm',
-  screen = 1280,
-  hours,
-  panel,
-  logo,
-  company,
-  socials,
-  buttons,
-  columns,
-  text,
-  title,
-  channels,
-  ...rest
-} = Astro.props
----
-
-<Element
-  class:list="footer"
-  style={{ '--screen': `${screen}px` }}
-  structure="stack"
-  {panel}
-  {size}
-  {...rest}
->
-  <Element class:list="column">
-    <Logo
-      {company}
-      {...typeof logo === 'string' ? { src: logo } : logo}
-    />
-    <Text
-      color="base"
-      {text}
-    />
-    <Socials {socials} />
-  </Element>
-  <Channels {channels} />
-  <Element class:list="hours column">
-    <Heading
-      text={hours?.heading}
-      level={5}
-    />
-    <Element>
-      {
-        Object.entries(hours?.days ?? {})?.map(([key, value]: any) => (
-          <Element class:list="spread">
-            <Text text={key} />
-            <Text text={value} />
-          </Element>
-        ))
-      }
-    </Element>
-  </Element>
-
-  <Element class:list="buttons column">
-    {
-      columns?.map(({ heading, buttons }: any) => (
-        <Element class:list="column">
-          <Heading
-            level={5}
-            text={heading}
-          />
-          {buttons?.map((button: any) => (
-            <Button
-              variant="link"
-              {...button}
-            />
-          ))}
-        </Element>
-      ))
-    }
-  </Element>
-</Element>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .footer {
-      display: grid;
-      position: relative;
-      grid-template-columns: 1fr;
-      align-items: flex-start;
-      gap: var(--space-6);
-      margin-top: auto;
-      margin-top: auto;
-      border-top-width: 1px;
-      border-color: var(--base-a6);
-      background-color: var(--base-2);
-      padding: var(--space-7) var(--gutter);
-      width: 100%;
-
-      @media (min-width: 1024px) {
-        grid-auto-columns: 1fr;
-        grid-auto-flow: column;
-      }
-
-      .spread {
-        display: flex;
-        justify-content: space-between;
-      }
-
-      .column {
-        display: flex;
-        flex-direction: column;
-      }
-
-      > .column {
-        gap: var(--space-4);
-      }
-
-      .socials {
-        display: flex;
-      }
-
-      .column {
-        h5 + * {
-          margin-top: var(--space-4);
-        }
-
-        .button.variant-link + .button.variant-link {
-          margin-top: var(--space-4);
-        }
-      }
-
-      &.panel {
-        margin: var(--spacer) var(--gutter);
-        border-width: 1px;
-        border-radius: var(--radius-2);
-        overflow: hidden;
-      }
-
-      .channels {
-        gap: var(--space-3);
-      }
-
-      .buttons {
-        display: grid;
-        position: relative;
-        grid-template-columns: 1fr;
-        align-items: flex-start;
-        gap: var(--space-3);
-        gap: var(--space-6);
-        width: 100%;
-
-        @media (min-width: 1024px) {
-          grid-auto-columns: 1fr;
-          grid-auto-flow: column;
-        }
-      }
-
-      .text {
-        max-width: calc(5 * var(--space-7));
-      }
-
-      .hours {
-        .column {
-          gap: 0;
-
-          .text {
-            font-size: var(--text-2);
-          }
-        }
-      }
-    }
-  }
-</style>

package/src/components/Text.astro

@@ -1,43 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-
-interface Props extends GlobalProps, HTMLAttributes<'p'> {
-  size?: 'sm' | 'md' | 'lg' | undefined
-  color?: 'base' | 'brand' | undefined
-  theme?: 'light' | 'dark' | undefined
-  contrast?: boolean | undefined
-  lead?: boolean | undefined
-  text?: string | undefined
-}
-
-const { color = 'base', text, ...rest } = Astro.props
----
-
-<Element
-  class:list="text"
-  as="p"
-  {color}
-  {...rest}
->
-  <slot />
-  <Fragment set:text={text} />
-</Element>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .text {
-      margin: 0;
-      max-width: calc(var(--space-4) * 44);
-      color: var(--color-11);
-      font-size: var(--text-3);
-      line-height: 1.625;
-
-      &.lead {
-        font-size: var(--text-4);
-        text-wrap: balance;
-      }
-    }
-  }
-</style>

package/src/components/ThemeSelect.astro

@@ -1,41 +0,0 @@
----
-import Select from 'fulldev-ui/components/Select.astro'
-// const defaultTheme = fulldevConfig.colors.theme || 'light'
-
-const { ...rest } = Astro.props
----
-
-<Select
-  class:list="theme-select"
-  name="theme-select"
-  options={['light', 'dark']}
-  value="light"
-  onchange="localStorage.setItem('theme', this.value); window.location.reload();"
-  {...rest}
-/>
-
-<script>
-  const setOption = (document: Document) => {
-    const selects = document.querySelectorAll('.theme-select')
-    const theme = localStorage.getItem('theme') || ''
-    selects?.forEach((select) => {
-      const options = select?.querySelectorAll('option')
-      options?.forEach((option) => {
-        if (option.value === theme) option.selected = true
-        else option.selected = false
-      })
-    })
-  }
-
-  setOption(document)
-
-  document.addEventListener('astro:before-swap', (event) => {
-    setOption(event.newDocument)
-  })
-</script>
-
-<style is:global lang="scss">
-  .theme-select {
-    width: calc(1.4 * var(--space-7));
-  }
-</style>

package/src/components/experimental/Form.astro

@@ -1,53 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Button from '../Button.astro'
-import Input from '../Input.astro'
-import Select from '../Select.astro'
-import Textarea from '../Textarea.astro'
-
-interface Props extends GlobalProps, HTMLAttributes<'form'> {
-  submit?: ComponentProps<typeof Button>['text']
-  fields?:
-    | (
-        | ComponentProps<typeof Input>
-        | ComponentProps<typeof Select>
-        | (ComponentProps<typeof Textarea> & { type?: 'textarea' | undefined })
-      )[]
-    | undefined
-}
-
-const { fields, submit, ...rest } = Astro.props
----
-
-<Element
-  class:list="form"
-  as="form"
-  {...rest}
->
-  <slot>
-    {
-      fields?.map((field) => {
-        if ('options' in field) return <Select {...field} />
-        if ('type' in field && field.type === 'textarea')
-          return <Textarea {...field} />
-        return <Input {...(field as any)} />
-      })
-    }
-    <Button
-      type="submit"
-      text={submit}
-    />
-  </slot>
-</Element>
-
-<style is:global lang="scss">
-  .form {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-    width: 100%;
-    max-width: calc(var(--space-4) * 44);
-  }
-</style>

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/components/sections.astro

@@ -1,28 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Section from './Section.astro'
-
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  sections?: ComponentProps<typeof Section>[] | undefined
-}
-
-const { sections, ...rest } = Astro.props
----
-
-<Element
-  class:list="sections"
-  {...rest}
->
-  {sections?.map((section) => <Section {...section} />)}
-</Element>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .sections {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-</style>