fulldev-ui 0.6.4 → 0.7.0-beta.1

package/src/components/Search.astro

@@ -1,118 +0,0 @@
----
-import { getCollection } from 'astro:content'
-import { getHref } from 'fulldev-ui/utils/getHref'
-import Button from './Button.astro'
-import Element from './Element.astro'
-import Heading from './Heading.astro'
-import Input from './Input.astro'
-import Paragraph from './Paragraph.astro'
-
-const pages = await getCollection('pages')
----
-
-<script>
-  document.addEventListener('astro:page-load', () => {
-    const input = document.querySelector('.search-input')
-    const items = document.querySelectorAll('.search-item')
-
-    input?.addEventListener('input', (e) => {
-      if (!(e.target instanceof HTMLInputElement)) return
-      const value = e.target.value.toLowerCase()
-      items.forEach((item) => {
-        if (!(item instanceof HTMLElement)) return
-
-        const title =
-          item.querySelector('.heading')?.textContent?.toLowerCase() || ''
-        const description =
-          item.querySelector('.paragraph')?.textContent?.toLowerCase() || ''
-
-        const isVisible = title.includes(value) || description.includes(value)
-        item.classList.toggle('hide', !isVisible)
-      })
-    })
-  })
-</script>
-
-<Button
-  class:list="search-button"
-  variant={Astro.props.variant}
-  size="sm"
-  icon="search"
-  onclick={`document.getElementById('search').showModal()`}
-/>
-
-<dialog
-  class="search"
-  id="search"
-  onclick={`event.target === this && this.close()`}
->
-  <Element class:list="search-container">
-    <Element class:list="search-content">
-      <Input
-        class:list="search-input"
-        placeholder="Search"
-        icon="search"
-      />
-      <Element class:list="search-list">
-        {
-          pages.map(({ slug, data }) => (
-            <Element
-              as="a"
-              href={getHref(slug)}
-              class="search-item hide"
-            >
-              <Heading
-                text={data.title}
-                as="h6"
-                size="md"
-              />
-              <Paragraph
-                set:text={'description' in data ? data.description : undefined}
-              />
-            </Element>
-          ))
-        }
-      </Element>
-    </Element>
-  </Element>
-</dialog>
-
-<style is:global>
-  @layer fulldev {
-    .search {
-      @apply container h-full w-full max-w-screen-md rounded-lg !border-none bg-transparent py-24 outline-none backdrop:bg-black/50;
-
-      &:is(.dark &) {
-        color-scheme: dark;
-      }
-
-      .search-container {
-        @apply w-full overflow-hidden rounded-lg border bg-background shadow-md;
-      }
-
-      .search-content {
-        @apply max-h-[400px] w-full overflow-y-auto;
-      }
-
-      .input {
-        @apply m-5;
-      }
-
-      .search-list {
-        @apply flex h-full w-full shrink grow-0 flex-col;
-      }
-
-      .search-item {
-        @apply border-t p-5 transition-colors hover:bg-accent;
-
-        &.hide {
-          @apply hidden;
-        }
-      }
-
-      .paragraph {
-        @apply mt-2 truncate text-sm text-muted-foreground;
-      }
-    }
-  }
-</style>

package/src/components/Select.astro

@@ -1,114 +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<'select'> {
-  size?: 'sm' | 'md' | 'lg' | undefined
-  label?: string | undefined
-  placeholder?: string | undefined
-  options?: string[] | undefined
-  value?: string | undefined
-}
-
-const {
-  label,
-  placeholder,
-  name = label || placeholder,
-  id = name,
-  size = 'md',
-  options,
-  value,
-  ...rest
-} = Astro.props
----
-
-{
-  options && (
-    <Label
-      class:list="select"
-      for={id}
-      {size}
-    >
-      <Fragment set:html={label} />
-      <Element
-        class:list="select-select"
-        as="select"
-        {id}
-        {name}
-        {...rest}
-      >
-        <Element
-          class:list="select-option"
-          as="option"
-          value={placeholder}
-          set:html={placeholder}
-          disabled
-          selected
-        />
-        {options?.map((option: any) => (
-          <Element
-            class:list="select-option"
-            as="option"
-            selected={value === option}
-            set:html={option}
-            value={option}
-          />
-        ))}
-        <slot />
-      </Element>
-      <Icon name="chevron-down" />
-    </Label>
-  )
-}
-
-<style is:global>
-  @layer fulldev {
-    .select {
-      @apply relative flex flex-col gap-1.5;
-
-      .icon {
-        @apply pointer-events-none absolute;
-      }
-
-      .select-select {
-        @apply flex w-full appearance-none rounded-md border border-input bg-background pr-10 text-sm 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;
-      }
-
-      &.size-sm {
-        .select-select {
-          @apply h-9 px-2.5 py-1.5 pr-9 text-xs;
-        }
-
-        .icon {
-          @apply bottom-2 right-2;
-        }
-      }
-
-      &.size-md {
-        .select-select {
-          @apply h-10 px-3 py-2 pr-10 text-sm;
-        }
-
-        .icon {
-          @apply bottom-2.5 right-2.5;
-        }
-      }
-
-      &.size-lg {
-        .select-select {
-          @apply h-12 px-3.5 py-2.5 pr-11 text-base;
-        }
-
-        .icon {
-          @apply bottom-3.5 right-3.5;
-        }
-      }
-    }
-  }
-</style>

package/src/components/Switch.astro

@@ -1,81 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-import Label from 'fulldev-ui/components/Label.astro'
-
-interface Props extends Omit<HTMLAttributes<'input'>, 'type'> {
-  label?: ComponentProps<typeof Label>['text']
-  size?: 'sm' | 'md' | 'lg'
-}
-
-const { label, name = label, id = name, size = 'md', ...rest } = Astro.props
----
-
-<Label
-  class:list="switch"
-  for={id}
-  {size}
->
-  <Element
-    class:list="switch-input"
-    as="input"
-    type="checkbox"
-    show={id}
-    {id}
-    {name}
-    {...rest}
-  />
-  <Element
-    as="label"
-    for={id}
-    show={id}
-    class="switch-mark"
-  />
-  <Fragment set:html={label} />
-</Label>
-
-<style is:global>
-  @layer fulldev {
-    .switch {
-      @apply flex items-center gap-2;
-
-      .switch-input {
-        @apply hidden opacity-0;
-      }
-
-      .switch-mark {
-        @apply relative block cursor-pointer rounded-full bg-input transition;
-
-        &::before {
-          @apply block h-full w-1/2 rounded-full border-2 border-input bg-background transition content-[''];
-        }
-      }
-
-      .switch-input:checked ~ .switch-mark {
-        @apply bg-primary;
-
-        &::before {
-          @apply translate-x-full border-primary;
-        }
-      }
-
-      &.size-sm {
-        .switch-mark {
-          @apply h-5 w-10;
-        }
-      }
-
-      &.size-md {
-        .switch-mark {
-          @apply h-6 w-12;
-        }
-      }
-
-      &.size-lg {
-        .switch-mark {
-          @apply h-7 w-14;
-        }
-      }
-    }
-  }
-</style>

package/src/components/Tagline.astro

@@ -1,49 +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="tagline"
-  as="p"
-  {...rest}
->
-  <Fragment set:html={text} />
-  <slot />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .tagline {
-      @apply font-medium text-primary;
-
-      &.size-xs {
-        @apply text-xs leading-tight;
-      }
-
-      &.size-sm {
-        @apply text-sm leading-tight;
-      }
-
-      &.size-md {
-        @apply text-base leading-tight;
-      }
-
-      &.size-lg {
-        @apply text-lg leading-tight;
-      }
-
-      &.size-xl {
-        @apply text-xl leading-tight;
-      }
-    }
-  }
-</style>

package/src/components/Textarea.astro

@@ -1,78 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-import Label from 'fulldev-ui/components/Label.astro'
-
-interface Props extends HTMLAttributes<'textarea'> {
-  size?: 'sm' | 'md' | 'lg' | undefined
-  label?: string | undefined
-}
-
-const {
-  label,
-  placeholder,
-  name = label || placeholder,
-  id = name,
-  size = 'md',
-  rows = 3,
-  ...rest
-} = Astro.props
----
-
-<Label
-  class:list="textarea"
-  for={id}
-  {size}
->
-  <Fragment set:html={label} />
-  <Element
-    class:list="textarea-textarea"
-    as="textarea"
-    show={id}
-    {id}
-    {name}
-    {placeholder}
-    {rows}
-    {...rest}
-  />
-</Label>
-
-<style is:global>
-  @layer textarea {
-    .textarea {
-      @apply relative flex flex-col gap-1.5;
-
-      .textarea-textarea {
-        @apply flex w-full resize-y rounded-md border border-input bg-background text-sm 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;
-      }
-
-      &.size-sm {
-        @apply gap-1;
-
-        .textarea-textarea {
-          @apply min-h-9 px-2.5 py-1.5 text-xs;
-        }
-      }
-
-      &.size-md {
-        @apply gap-1.5;
-
-        .textarea-textarea {
-          @apply min-h-10 px-3 py-2 text-sm;
-        }
-      }
-
-      &.size-lg {
-        @apply gap-2;
-
-        .textarea-textarea {
-          @apply min-h-12 px-3.5 py-2.5 text-base;
-        }
-      }
-    }
-  }
-</style>

package/src/components/Toggle.astro

@@ -1,45 +0,0 @@
----
-import type { Polymorphic } from 'astro/types'
-import { uid } from 'radash'
-import Button from './Button.astro'
-
-type Props<As extends 'label'> = Polymorphic<{ as: As }> & {
-  color?: 'base' | 'brand' | undefined
-  id?: string | undefined
-  name?: string | undefined
-  icon?: string | undefined
-  html?: string | undefined
-  text?: string | undefined
-  toggled: boolean | undefined
-}
-
-const { id = uid(7), toggled, name, ...rest } = Astro.props
----
-
-<input
-  class="toggle-checkbox"
-  checked={toggled}
-  type="checkbox"
-  id={id}
-  name={name ?? id}
-/>
-
-<Button
-  class:list="toggle"
-  variant="tertiary"
-  as="label"
-  for={id}
-  {...rest}
-/>
-
-<style is:global>
-  @layer fulldev {
-    .toggle-checkbox {
-      @apply hidden;
-
-      &:checked + .toggle {
-        @apply bg-accent text-foreground;
-      }
-    }
-  }
-</style>

package/src/components/_Breadcrumb.astro

@@ -1,58 +0,0 @@
-<!-- ---
-import type { HTMLAttributes,HTMLTag } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import Element from 'fulldev-ui/components/Element.astro'
-import Icon from 'fulldev-ui/components/Icon.astro'
-import Link from 'fulldev-ui/components/Link.astro'
-
-interface Props extends HTMLAttributes<'div'> {
-  as?: HTMLTag
-  slug?: CollectionEntry<'pages'>['slug'] | undefined
-}
-
-const { size = 'sm', slug, ...rest } = Astro.props
----
-
-<Element
-  class:list="breadcrumb"
-  {...rest}
->
-  <Link
-    as="a"
-    href="/"
-    icon="home"
-    {size}
-  />
-  {
-    slug?.split('/').map((part, i) => (
-      <>
-        <Icon
-          {size}
-          name="chevron-right"
-        />
-        <Link
-          {size}
-          variant="muted"
-          href={`/${slug
-            ?.split('/')
-            .slice(0, i + 1)
-            .join('/')}/`}
-        >
-          {part}
-        </Link>
-      </>
-    ))
-  }
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .breadcrumb {
-      @apply flex items-center gap-2;
-
-      .icon {
-        @apply text-muted-foreground;
-      }
-    }
-  }
-</style> -->

package/src/components/_Image.astro

@@ -1,79 +0,0 @@
-<!-- ---
-// @ts-nocheck
-import type { ImageMetadata } from 'astro'
-import type { HTMLAttributes } from 'astro/types'
-import { Image as AstroImage } from 'astro:assets'
-import { getEntry } from 'astro:content'
-
-interface Props extends GlobalProps, HTMLAttributes<'img'> {
-  id?: any
-  size?: 'sm' | 'md' | 'lg' | undefined
-  position?: 'background' | 'cover' | 'inset' | undefined
-}
-
-const { id } = Astro.props
-const entry = id ? (await getEntry('images', id))?.data : {}
-
-const {
-  width = 1920,
-  height = 1920,
-  position,
-  src,
-  alt,
-  size,
-  ...rest
-} = {
-  ...entry,
-  ...Astro.props,
-}
-
-function getAltBySrc() {
-  if (!src) return
-  const filename = src?.split('/').pop()
-  const slug = filename && filename.split('.')[0]
-  const unslugged = slug?.replace(/-/g, ' ')
-  return unslugged || ''
-}
-
-const images = import.meta.glob<{ default: ImageMetadata }>('/src/images/*')
-const image = images[src as keyof typeof images]
----
-
-{
-  (image || src) && (
-    <AstroImage
-      class:list={[
-        'image',
-        {
-          [`size-${size}`]: size,
-          [`position-${position}`]: position,
-        },
-      ]}
-      alt={alt || getAltBySrc()}
-      src={image ? image() : src}
-      width={width ? Number(width) : undefined}
-      height={height ? Number(height) : undefined}
-      {...rest}
-    />
-  )
-}
-
-<style is:global>
-  @layer fulldev {
-    .image {
-      @apply block;
-
-      &.position-contain {
-        @apply h-auto w-full object-contain;
-      }
-
-      &.position-cover {
-        @apply h-full w-full object-cover;
-      }
-
-      &.position-background {
-        @apply absolute inset-0 h-full max-h-none w-full max-w-none object-cover opacity-30;
-      }
-    }
-  }
-</style> -->

package/src/components/_LocaleSwitcher.astro

@@ -1,25 +0,0 @@
----
-import Select from 'fulldev-ui/components/Select.astro'
----
-
-{
-  Astro.props.locales && (
-    <Select
-      name="locale-switcher"
-      options={Astro.props.locales}
-      value={Astro.props.lang as string}
-      placeholder={Astro.props.lang as string}
-    />
-  )
-}
-
-<!-- <script>
-  const select = document.querySelector('.theme-switcher select')
-  select?.addEventListener('change', (event) => {
-    const target = event.target as HTMLSelectElement
-    const selectedLocale = target.value
-    const currentUrl = new URL(window.location.href)
-    currentUrl.pathname = '/' + selectedLocale + currentUrl.pathname
-    window.location.href = currentUrl.toString()
-  })
-</script> -->

package/src/content/config.ts

@@ -1,18 +0,0 @@
-import { defineCollection } from 'astro:content'
-import { cardSchema } from 'fulldev-ui/schemas/card.ts'
-import { pageSchema } from 'fulldev-ui/schemas/page.ts'
-
-export const collections = {
-  pages: defineCollection({
-    type: 'content',
-    schema: pageSchema,
-  }),
-  layouts: defineCollection({
-    type: 'data',
-    schema: pageSchema,
-  }),
-  records: defineCollection({
-    type: 'data',
-    schema: cardSchema,
-  }),
-}