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

package/src/components/Writeup.astro

@@ -1,90 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Badge from 'fulldev-ui/components/Badge.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import List from 'fulldev-ui/components/List.astro'
-import Price from 'fulldev-ui/components/Price.astro'
-import Rating from 'fulldev-ui/components/Rating.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-import Text from 'fulldev-ui/components/Text.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  level?: ComponentProps<typeof Heading>['level']
-  badge?: ComponentProps<typeof Badge> | undefined
-  tagline?: ComponentProps<typeof Tagline>['text']
-  heading?: ComponentProps<typeof Heading>['text']
-  text?: ComponentProps<typeof Text>['text']
-  list?: ComponentProps<typeof List>['items']
-  align?: 'start' | 'center' | 'end' | undefined
-  price?: ComponentProps<typeof Price>['value']
-  rating?:
-    | ComponentProps<typeof Rating>
-    | ComponentProps<typeof Rating>['value']
-}
-
-const {
-  level = 2,
-  rating,
-  badge,
-  tagline,
-  heading,
-  text,
-  list,
-  price,
-  ...rest
-} = Astro.props
----
-
-<Element
-  class:list="writeup"
-  {...rest}
->
-  <slot>
-    <Rating
-      color="brand"
-      {...typeof rating === 'number' ? { value: rating } : rating}
-    />
-    <Tagline text={tagline} />
-    <Badge {...badge} />
-    <Heading
-      {level}
-      text={heading}
-    />
-    <Text
-      lead={level === 1}
-      text={text}
-    />
-    <List items={list} />
-    <Price value={price} />
-  </slot>
-</Element>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .writeup {
-      display: flex;
-      position: relative;
-      flex-direction: column;
-      align-items: inherit;
-      gap: var(--space-3);
-      text-align: inherit;
-
-      &.align-start {
-        align-items: flex-start;
-        text-align: left;
-      }
-
-      &.align-center {
-        align-items: center;
-        text-align: center;
-      }
-
-      &.align-end {
-        align-items: flex-end;
-        text-align: right;
-      }
-    }
-  }
-</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>

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

@@ -1,60 +0,0 @@
----
-presets: [docs]
-
-title: Button
----
-
-# Button
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<Button color="brand">Button</Button>
-```
-
-## Props
-
-<PropsTable />
-
-## Examples
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<Button variant="primary">Button</Button>
-<Button variant="secondary">Button</Button>
-<Button variant="tertiary">Button</Button>
-```
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<Button icon="circle" text="Button" text="Buttontje" />
-```
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<Button size="sm" text="Button" />
-<Button size="md" text="Button" />
-<Button size="lg" text="Button" />
-```
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<Button color="base" text="Button" />
-<Button color="brand" text="Button" />
-```

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

@@ -1,42 +0,0 @@
----
-presets: [docs]
-
-title: Checkbox
----
-
-# Checkbox
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-
-## Props
-
-<PropsTable />
-
-## Examples
-
-```astro live
----
-import Checkbox from 'fulldev-ui/components/Checkbox.astro'
----
-
-<Checkbox label="My Checkbox" color="base" />
-```
-
-```astro live
----
-import Checkbox from 'fulldev-ui/components/Checkbox.astro'
----
-
-<Checkbox label="Base" color="base" />
-<Checkbox label="Brand" color="brand" />
-```
-
-```astro live
----
-import Checkbox from 'fulldev-ui/components/Checkbox.astro'
----
-
-<Checkbox label="Small" size="sm" />
-<Checkbox label="Medium" size="md" />
-<Checkbox label="Large" size="lg" />
-```

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" />
-```