fulldev-ui 0.6.0-beta.0 → 0.6.0-beta.10

package/src/components/Drawer.astro

@@ -1,142 +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">
-    <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/Header.astro

@@ -1,127 +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'
-
-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}
-    >
-      <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 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/Lead.astro

@@ -1,46 +0,0 @@
----
-import type { HTMLAttributes, HTMLTag } 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'> {
-  as?: HTMLTag
-  text?: string | undefined
-}
-
-const { as = 'p', text, ...rest } = Astro.props
----
-
-<Element
-  class:list="lead"
-  {as}
-  {...rest}
->
-  <slot />
-  <Fragment set:html={text} />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .lead,
-    .prose-content h1 + p {
-      @apply text-muted-foreground;
-
-      &.size-sm {
-        @apply text-sm;
-      }
-
-      &.size-md {
-        @apply text-base;
-      }
-
-      &.size-lg {
-        @apply text-lg;
-
-        &:is(h1 + p) {
-          @apply text-xl;
-        }
-      }
-    }
-  }
-</style>

package/src/components/Prose.astro

@@ -1,169 +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 Lead from 'fulldev-ui/components/Lead.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: CollectionEntry<'pages'>['render']
-  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}
-      />
-      <Lead 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>