fulldev-ui 0.6.0-beta.6 → 0.6.0-beta.8

package/src/components/Dialog.astro

@@ -1,67 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
-import Card from 'fulldev-ui/components/Card.astro'
-import type Icon from './Icon.astro'
-import type Label from './Label.astro'
-
-interface Props extends ComponentProps<typeof Card> {
-  icon?: ComponentProps<typeof Icon>['name']
-  label?: ComponentProps<typeof Label>['text']
-}
-
-const {
-  variant = 'secondary',
-  label,
-  icon,
-  id = 'dialog',
-  ...rest
-} = Astro.props
----
-
-<Button
-  size="sm"
-  id={`${id}-button`}
-  variant="secondary"
-  onclick={`document.getElementById('${id}').showModal()`}
-  {icon}
-/>
-
-<dialog
-  class="dialog"
-  id={id as string}
-  onclick={`event.target === this && this.close()`}
->
-  <Card
-    panel
-    {...rest}
-  >
-    <slot />
-  </Card>
-</dialog>
-
-<style is:global>
-  @layer fulldev {
-    .dialog {
-      margin: auto !important;
-      outline: 0;
-      border: 0;
-      background: none;
-      padding: var(--space-7) var(--gutter);
-      max-width: 768px;
-      max-height: 80vh;
-      overflow: hidden;
-
-      &::backdrop {
-        background: rgba(0, 0, 0, 0.5);
-      }
-
-      .card {
-        width: 100%;
-        height: 100%;
-        max-height: 80vh !important;
-        overflow: auto !important;
-      }
-    }
-  }
-</style>

package/src/components/DrawerOld.astro

@@ -1,143 +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 Logo from 'fulldev-ui/components/Logo.astro'
-import Menu from 'fulldev-ui/components/Menu.astro'
-import links from 'fulldev-ui/schemas/components/links'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Buttons from './Buttons.astro'
-import Heading from './Heading.astro'
-import Links from './Links.astro'
-
-interface Props extends GlobalProps, HTMLAttributes<'aside'> {
-  variant?: ComponentProps<typeof Button>['variant']
-  text?: ComponentProps<typeof Button>['text']
-  icon?: ComponentProps<typeof Button>['icon']
-  heading?: ComponentProps<typeof Heading>['text']
-  logo?: ComponentProps<typeof Logo> | undefined
-  company?: ComponentProps<typeof Logo>['company']
-  menu?: ComponentProps<typeof Menu>['groups']
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-  links?: ComponentProps<typeof Links>['links']
-  size?: 'sm' | 'md' | 'lg' | undefined
-}
-
-const {
-  id = 'drawer',
-  size = 'sm',
-  icon = 'menu-2',
-  color,
-  variant,
-  text,
-  buttons,
-  links,
-  heading,
-  logo,
-  company,
-  menu,
-  if: ifProp,
-  ...rest
-} = Astro.props
----
-
-<Button
-  variant="secondary"
-  class:list={['drawer-button', `${id}-button`]}
-  onclick={`document.getElementById('${id}').showModal()`}
-  {variant}
-  {text}
-  {icon}
-  {color}
-  {size}
-/>
-
-<Element
-  onclick={`event.target === this && this.close()`}
-  class:list="drawer"
-  as="dialog"
-  {id}
-  {text}
-  {size}
-  {icon}
-  {...rest}
->
-  <Element class:list="drawer-body">
-    <button autofocus></button>
-    <Element
-      class:list="drawer-header"
-      as="header"
-    >
-      <Logo
-        {size}
-        {company}
-        {...logo}
-      />
-      <Heading
-        level={4}
-        text={heading}
-      />
-      <Button
-        variant="secondary"
-        icon="x"
-        onclick={`document.getElementById('${id}').close()`}
-      />
-      <slot name="header" />
-    </Element>
-    <Element class:list="drawer-content">
-      <Links
-        direction="column"
-        {links}
-      />
-      <Menu groups={menu} />
-      <slot />
-    </Element>
-    <Element
-      class:list="drawer-footer"
-      as="footer"
-    >
-      <slot name="footer" />
-    </Element>
-  </Element>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    body:has(dialog[open]) {
-      @apply max-md:overflow-hidden;
-    }
-
-    .drawer {
-      @apply inset-0 m-0 h-full max-h-full w-full max-w-full p-0 md:max-w-md;
-
-      &::backdrop {
-        @apply cursor-pointer bg-background/50;
-      }
-
-      .drawer-body {
-        @apply flex h-full shrink flex-col overflow-auto bg-background;
-
-        .drawer-content {
-          @apply flex flex-col gap-6 px-gutter py-12;
-        }
-
-        .drawer-header,
-        .drawer-footer {
-          @apply sticky z-10 flex shrink-0 bg-background;
-        }
-
-        .drawer-header {
-          @apply top-0 h-14 items-center px-gutter;
-
-          .button {
-            @apply ml-auto;
-          }
-        }
-
-        .drawer-footer {
-          @apply bottom-0 mt-auto flex-col px-gutter py-8;
-        }
-      }
-    }
-  }
-</style>

package/src/components/Grid.astro

@@ -1,39 +0,0 @@
----
-import type { HTMLAttributes, HTMLTag } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-
-interface Props extends HTMLAttributes<'div'> {
-  as?: HTMLTag
-}
-
-const { ...rest } = Astro.props
----
-
-<Element
-  class:list="grid"
-  {...rest}
->
-  <slot />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .grid {
-      @apply relative w-full grid-cols-[repeat(auto-fill,minmax(var(--column-width),1fr))] gap-5;
-      display: grid;
-      --column-width: 20rem;
-
-      /* &.size-sm {
-        --column-width: 16rem;
-      }
-
-      &.size-md {
-        --column-width: 20rem;
-      }
-
-      &.size-lg {
-        --column-width: 26rem;
-      } */
-    }
-  }
-</style>

package/src/components/Header.astro

@@ -1,32 +0,0 @@
----
-import type { HTMLAttributes, HTMLTag } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-
-interface Props extends HTMLAttributes<'header'> {
-  as?: HTMLTag
-}
-
-const { as = 'header', ...rest } = Astro.props
----
-
-<Element
-  class:list="header"
-  {as}
-  {...rest}
->
-  <slot />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .header {
-      @apply relative flex w-full items-center bg-background;
-      height: var(--header-height);
-
-      &,
-      & ~ * {
-        --header-height: 3.5rem;
-      }
-    }
-  }
-</style>

package/src/components/Navigation.astro

@@ -1,39 +0,0 @@
----
-import type { HTMLAttributes, HTMLTag } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-
-interface Props extends HTMLAttributes<'header'> {
-  as?: HTMLTag
-}
-
-const { as = 'header', ...rest } = Astro.props
----
-
-<Element
-  class:list="navigation"
-  {as}
-  {...rest}
->
-  <header>header</header>
-  <aside>sidebar</aside>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .navigation {
-      @apply flex h-screen flex-col;
-
-      grid-row-start: 1;
-      grid-row-end: 2;
-      grid-column-start: 1;
-
-      header {
-        @apply h-12 w-full border-b;
-      }
-
-      aside {
-        @apply h-full w-64 grow border-r p-6;
-      }
-    }
-  }
-</style>

package/src/components/_Author.astro

@@ -1,90 +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 type { RatingSchema } from 'fulldev-ui/schemas/components/rating'
-import Avatar from './Avatar.astro'
-
-interface Props extends HTMLAttributes<'div'>, RatingSchema {}
-
-const { size = 'md', score, text, avatars, avatar, ...rest } = Astro.props
-
-const getIcon = (count: number) => {
-  if (!score) return
-  const difference = score - count
-  if (difference >= -0.25) return 'star-filled'
-  if (difference >= -0.75) return 'star-half-filled'
-  return 'star'
-}
----
-
-<Element
-  class:list="author"
-  {size}
-  {...rest}
->
-  <Avatar {...avatar} />
-  {avatars?.map((avatar) => <Avatar {...avatar} />)}
-  <Element class:list="rating-content">
-    <Element
-      class:list="rating-stars"
-      {...rest}
-    >
-      {
-        score &&
-          [1, 2, 3, 4, 5].map((count) => (
-            <Icon
-              name={getIcon(count)}
-              {size}
-            />
-          ))
-      }
-    </Element>
-    <Fragment set:html={text} />
-    <slot />
-  </Element>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .rating {
-      @apply flex items-center gap-3;
-
-      .avatar + .avatar {
-        @apply -ml-3;
-      }
-
-      .rating-content {
-        @apply flex flex-col gap-1 text-muted-foreground;
-      }
-
-      .rating-stars {
-        @apply flex gap-1 text-primary;
-      }
-
-      &.size-sm {
-        @apply gap-2;
-
-        .rating-content {
-          @apply text-xs leading-none;
-        }
-      }
-
-      &.size-md {
-        @apply gap-2.5;
-
-        .rating-content {
-          @apply text-sm leading-none;
-        }
-      }
-
-      &.size-lg {
-        @apply gap-3;
-
-        .rating-content {
-          @apply text-base leading-none;
-        }
-      }
-    }
-  }
-</style> -->

package/src/components/_Header.astro

@@ -1,129 +0,0 @@
-<!-- ---
-import type { ComponentProps,HTMLAttributes } from 'astro/types'
-import Buttons from 'fulldev-ui/components/Buttons.astro'
-import Cart from 'fulldev-ui/components/Cart.astro'
-import Drawer from 'fulldev-ui/components/Drawer.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Links from 'fulldev-ui/components/Links.astro'
-import Logo from 'fulldev-ui/components/Logo.astro'
-import Menu from 'fulldev-ui/components/Menu.astro'
-import Socials from 'fulldev-ui/components/Socials.astro'
-import Themer from 'fulldev-ui/components/Themer.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Search from './Search.astro'
-
-interface Props extends GlobalProps, HTMLAttributes<'header'> {
-  logo?: ComponentProps<typeof Logo>
-  company?: ComponentProps<typeof Logo>['company']
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-  links?: ComponentProps<typeof Links>['links']
-  menu?: ComponentProps<typeof Menu>['groups']
-  panel?: boolean | undefined
-  search?: boolean | undefined
-  open?: boolean | undefined
-  cart?: string | undefined
-  socials?: ComponentProps<typeof Socials>['socials']
-  themer?: boolean | undefined
-  size?: 'sm' | 'md' | 'lg' | undefined
-}
-
-const {
-  size = 'sm',
-  open,
-  logo,
-  company,
-  buttons,
-  links,
-  search,
-  panel,
-  socials,
-  menu,
-  cart,
-  themer,
-  ...rest
-} = Astro.props
----
-
-<Element
-  class:list="header"
-  as="header"
-  {size}
-  {open}
-  {...rest}
->
-  <Element class:list="header-container">
-    <Logo
-      {company}
-      {size}
-      {...typeof logo === 'string' ? { src: logo } : logo}
-    />
-    <Links
-      class:list="header-links"
-      {size}
-      {links}
-    />
-    <Socials
-      {size}
-      variant="ghost"
-      {socials}
-    />
-    <Buttons
-      class:list="header-buttons"
-      {size}
-      {buttons}
-    >
-      <Search size="sm" />
-      <Themer
-        if={themer}
-        {size}
-      />
-      <Cart
-        if={cart}
-        variant="secondary"
-        heading={cart}
-        {size}
-      />
-      <Drawer
-        class:list={['header-button']}
-        icon="menu-2"
-        id="menu"
-        variant="secondary"
-        {logo}
-        {company}
-        {buttons}
-        {links}
-        {menu}
-        {size}
-      />
-    </Buttons>
-  </Element>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .header {
-      @apply sticky left-0 top-0 z-20 flex h-14 items-center overflow-hidden border-b bg-background;
-
-      .header-container {
-        @apply container flex w-full items-center justify-between gap-6;
-      }
-
-      &,
-      & ~ * {
-        --header-height: 3.5rem;
-      }
-
-      .header-links {
-        @apply mr-auto max-lg:hidden;
-      }
-
-      .header-socials {
-        @apply ml-auto max-lg:hidden;
-      }
-
-      .menu-button {
-        @apply lg:hidden;
-      }
-    }
-  }
-</style> -->

package/src/components/_Prose copy.astro

@@ -1,172 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import Button from 'fulldev-ui/components/Button.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import {
-  default as Lead,
-  default as Paragraph,
-} from 'fulldev-ui/components/Paragraph.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-import Toc from 'fulldev-ui/components/Toc.astro'
-import { crush } from 'radash'
-import type Sidebar from './Sidebar.astro'
-
-interface Props extends HTMLAttributes<'div'> {
-  as?: HTMLTag | undefined
-  render?: any
-  sidebar?: ComponentProps<typeof Sidebar> | undefined
-  slug?: CollectionEntry<'pages'>['slug'] | undefined
-  toc?: boolean | ComponentProps<typeof Toc>['heading'] | undefined
-  tagline?: ComponentProps<typeof Tagline>['text'] | undefined
-  heading?: ComponentProps<typeof Heading>['text'] | undefined
-  image?: ComponentProps<typeof Image> | undefined
-  lead?: ComponentProps<typeof Lead>['text'] | undefined
-}
-
-const {
-  toc = false,
-  slug,
-  sidebar,
-  render,
-  tagline,
-  heading,
-  lead,
-  image,
-  ...rest
-} = Astro.props
-
-const Content = render && (await render())?.Content
-
-const flatMenu = crush(sidebar?.menu ?? {})
-const slugs = Object.entries(flatMenu)
-  .map(([key, value]) => (key.endsWith('.slug') ? value : null))
-  .filter(Boolean)
-const slugIndex = slugs.findIndex((val) => val === slug)
-
-const prevSlug = slugs[slugIndex - 1]
-const nextSlug = slugs[slugIndex + 1]
----
-
-<Element
-  class:list="prose"
-  {...rest}
->
-  <Element class:list="prose-container">
-    <Element class:list="prose-content">
-      <Tagline text={tagline} />
-      <Heading
-        as="h1"
-        level={2}
-        text={heading}
-      />
-      <Paragraph text={lead} />
-      <Image {...image} />
-      {Content && <Content />}
-      <slot />
-      <Element class:list="prose-footer">
-        <Button
-          class:list="prose-prev"
-          icon={prevSlug && 'arrow-left'}
-          slug={prevSlug}
-          variant="secondary"
-        />
-        <Button
-          class:list="prose-next"
-          icon={nextSlug && 'arrow-right'}
-          slug={nextSlug}
-          variant="secondary"
-          reverse
-        />
-      </Element>
-    </Element>
-    <Toc
-      if={toc}
-      heading={typeof toc === 'string' ? toc : undefined}
-      {render}
-    />
-  </Element>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .prose {
-      @apply relative items-start py-28 first:pt-14;
-
-      .prose-container {
-        @apply container flex h-full w-full flex-grow items-start justify-evenly gap-14 gap-x-gutter;
-      }
-
-      .prose-content {
-        @apply w-full max-w-screen-md;
-
-        > * {
-          @apply mt-6 first:mt-0;
-        }
-
-        p {
-          @apply mt-4 first:mt-0;
-        }
-
-        code:not(.astro-code code) {
-          @apply rounded bg-muted px-1.5 py-0.5 font-mono text-sm font-medium;
-        }
-
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-          @apply mt-8 scroll-m-20 font-semibold first:mt-0;
-
-          code {
-            font-size: inherit !important;
-          }
-        }
-
-        > h1 {
-          @apply text-4xl font-extrabold;
-        }
-
-        > h2 {
-          @apply text-2xl;
-        }
-
-        > h3 {
-          @apply text-xl;
-        }
-
-        > h4 {
-          @apply text-lg;
-        }
-
-        > h5 {
-          @apply text-base;
-        }
-
-        > h6 {
-          @apply text-sm;
-        }
-
-        > aside {
-          @apply mt-6 rounded-md border border-destructive p-4 text-destructive first:mt-0;
-        }
-      }
-
-      .prose-footer {
-        @apply mt-14 flex items-center;
-
-        .prose-next {
-          @apply ml-auto;
-        }
-      }
-
-      .toc {
-        @apply order-last;
-      }
-    }
-  }
-</style>