fulldev-ui 0.6.0-beta.7 → 0.6.0-beta.9

package/src/components/Cards.astro

@@ -1,133 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Card from 'fulldev-ui/components/Card.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  level?: ComponentProps<typeof Card>['level']
-  panel?: ComponentProps<typeof Card>['panel']
-  position?: ComponentProps<typeof Card>['position']
-  cards?: ComponentProps<typeof Card>[] | undefined
-  structure?: 'grid' | 'masonry' | 'stack' | 'carousel' | 'bento' | undefined
-}
-
-const {
-  structure = 'grid',
-  level,
-  panel,
-  position,
-  cards,
-  size,
-  ...rest
-} = Astro.props
----
-
-<Element
-  class:list="cards"
-  {panel}
-  {size}
-  {structure}
-  {...rest}
->
-  {
-    cards?.map((card: any) => (
-      <Card
-        level={level + 3}
-        {panel}
-        {size}
-        {position}
-        {...card}
-      />
-    ))
-  }
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .cards {
-      --column-width: 20rem;
-      @apply relative w-full;
-
-      &.structure-grid {
-        @apply grid w-full grid-cols-[repeat(auto-fill,minmax(var(--column-width),1fr))] gap-5;
-      }
-
-      &.structure-masonry {
-        @apply w-full columns-6 break-inside-avoid gap-5 space-y-5;
-        column-fill: balance;
-        column-width: var(--column-width);
-
-        /* & > * + * {
-          break-inside: avoid;
-          margin-top: var(--gap);
-          margin-bottom: var(--gap);
-        } */
-      }
-
-      &.structure-carousel {
-        display: flex;
-        align-items: flex-start;
-        gap: var(--gap);
-        padding-bottom: var(--gap);
-        overflow-x: auto;
-        scroll-behavior: smooth;
-        scroll-snap-type: x mandatory;
-
-        > * {
-          flex-grow: 0;
-          flex-shrink: 0;
-          width: var(--column-width);
-          scroll-snap-align: center;
-        }
-      }
-
-      &.structure-stack {
-        display: grid;
-        position: relative;
-        grid-template-columns: 1fr;
-        align-items: flex-start;
-        gap: var(--space-6);
-        width: 100%;
-
-        @media (min-width: 1024px) {
-          grid-auto-columns: 1fr;
-          grid-auto-flow: column;
-        }
-      }
-
-      &.structure-bento {
-        display: grid;
-        position: relative;
-        grid-template-columns: 1fr;
-        gap: var(--space-4);
-        width: 100%;
-
-        @media (min-width: 1024px) {
-          grid-template-columns: repeat(5, 1fr);
-
-          & > * {
-            grid-column: span 2;
-          }
-
-          & > *:nth-child(3n + 2),
-          & > *:nth-child(3n + 3) {
-            grid-column: span 3;
-          }
-        }
-      }
-
-      &.size-sm {
-        --column-width: 16rem;
-      }
-
-      &.size-md {
-        --column-width: 20rem;
-      }
-
-      &.size-lg {
-        --column-width: 26rem;
-      }
-    }
-  }
-</style>

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> -->