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

package/src/components/Links.astro

@@ -0,0 +1,42 @@
+---
+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 Link from './Link.astro'
+
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  variant?: ComponentProps<typeof Link>['variant']
+  links?: ComponentProps<typeof Link>[] | undefined
+  direction?: 'row' | 'column' | undefined
+}
+
+const { variant = 'muted', links, size, ...rest } = Astro.props
+---
+
+<Element
+  class:list="links"
+  {...rest}
+>
+  {
+    links?.map((link) => (
+      <Link
+        {variant}
+        {size}
+        {...link}
+      />
+    ))
+  }
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .links {
+      @apply flex items-center justify-stretch gap-x-6 gap-y-2;
+
+      &.direction-column {
+        @apply flex-col items-start;
+      }
+    }
+  }
+</style>

package/src/components/List.astro

@@ -7,8 +7,8 @@ interface Props
   extends GlobalProps,
     HTMLAttributes<'ul'>,
     HTMLAttributes<'ol'> {
+  as?: 'ul' | 'ol' | undefined
   items?: string[] | undefined
-  as?: 'ul' | 'ol'
 }
 
 const { as = 'ul', items, ...rest } = Astro.props
@@ -19,26 +19,51 @@ const { as = 'ul', items, ...rest } = Astro.props
   {as}
   {...rest}
 >
-  {items?.map((item) => <li set:html={item} />)}
+  {
+    items?.map((item) => (
+      <Element
+        as="li"
+        set:html={item}
+      />
+    ))
+  }
+  <slot />
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
-    .list {
-      display: flex;
-      flex-direction: column;
-      padding-left: var(--space-5);
-      color: var(--color-11);
-      font-size: var(--text-2);
-      line-height: 1.625;
-      list-style-type: disc;
+    .list,
+    .prose :is(ul, ol) {
+      @apply ml-6;
+
+      &:is(ul) {
+        @apply list-disc;
+      }
+
+      ul {
+        @apply ml-6 mt-2 list-disc;
+      }
+
+      &:is(ol) {
+        @apply list-decimal;
+      }
+
+      ol {
+        @apply ml-6 mt-2 list-decimal;
+      }
 
       li {
-        align-items: center;
-        max-width: calc(var(--space-4) * 44);
-        color: var(--color-11);
-        font-size: var(--text-2);
-        line-height: 1.625;
+        @apply mt-2 first:mt-0;
+      }
+
+      &.size-sm,
+      &:where(.size-sm &) {
+        @apply text-sm;
+      }
+
+      &.size-lg,
+      &:where(.size-lg &) {
+        @apply text-lg;
       }
     }
   }

package/src/components/LocaleSwitcher.astro

@@ -13,7 +13,7 @@ import Select from 'fulldev-ui/components/Select.astro'
   )
 }
 
-<script>
+<!-- <script>
   const select = document.querySelector('.theme-switcher select')
   select?.addEventListener('change', (event) => {
     const target = event.target as HTMLSelectElement
@@ -22,4 +22,4 @@ import Select from 'fulldev-ui/components/Select.astro'
     currentUrl.pathname = '/' + selectedLocale + currentUrl.pathname
     window.location.href = currentUrl.toString()
   })
-</script>
+</script> -->

package/src/components/Logo.astro

@@ -0,0 +1,56 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Image from 'fulldev-ui/components/Image.astro'
+import type { LogoSchema } from 'fulldev-ui/schemas/components/logo'
+import Element from './Element.astro'
+
+interface Props
+  extends Omit<HTMLAttributes<'a'>, 'href'>,
+    HTMLAttributes<'div'>,
+    LogoSchema {
+  as?: HTMLTag
+}
+
+const {
+  href = '/',
+  as = href ? 'a' : 'div',
+  size = 'md',
+  image,
+  text,
+  ...rest
+} = Astro.props as Props
+---
+
+<Element
+  class:list="logo"
+  {href}
+  {as}
+  {size}
+>
+  <Image {...image} />
+  <Fragment set:html={text} />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .logo {
+      @apply flex w-auto items-center gap-2 object-contain text-base font-bold leading-none text-foreground;
+
+      .image {
+        @apply h-10 w-auto object-contain;
+      }
+
+      &.size-sm {
+        @apply h-6;
+      }
+
+      &.size-md {
+        @apply h-7;
+      }
+
+      &.size-lg {
+        @apply h-8;
+      }
+    }
+  }
+</style>

package/src/components/Menu.astro

@@ -1,55 +1,59 @@
 ---
 import type { ComponentProps, HTMLAttributes } from 'astro/types'
-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 type { GlobalProps } from 'fulldev-ui/types/global-props'
+import type Link from './Link.astro'
+import Links from './Links.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  direction?: 'row' | 'column'
   groups?:
     | {
         heading?: ComponentProps<typeof Heading>['text']
-        buttons?: ComponentProps<typeof Button>[]
+        links?: ComponentProps<typeof Link>[]
       }[]
     | undefined
 }
 
-const { groups, ...rest } = Astro.props
+const { direction = 'column', groups, size = 'md', ...rest } = Astro.props
 ---
 
 <Element
   class:list="menu"
+  {direction}
+  {size}
   {...rest}
 >
   {
-    groups?.map(({ heading, buttons }) => (
+    groups?.map(({ heading, links }) => (
       <Element class:list="menu-group">
         <Heading
           level={6}
           text={heading}
+          {size}
+        />
+        <Links
+          direction="column"
+          {links}
+          {size}
         />
-        {buttons?.map((button) => (
-          <Button
-            variant="link"
-            {...button}
-          />
-        ))}
       </Element>
     ))
   }
 </Element>
 
-<style lang="scss" is:global>
+<style is:global>
   @layer fulldev {
     .menu {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-5);
+      @apply flex flex-col gap-6;
 
       .menu-group {
-        display: flex;
-        flex-direction: column;
-        gap: var(--space-4);
+        @apply flex flex-col gap-3;
+      }
+
+      &.direction-row {
+        @apply flex-row flex-wrap gap-12;
       }
     }
   }

package/src/components/Navigation.astro

@@ -0,0 +1,39 @@
+---
+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/Panel.astro

@@ -0,0 +1,25 @@
+---
+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="panel"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .panel {
+      @apply w-full gap-x-gutter rounded-lg border bg-card px-gutter py-16 text-card-foreground lg:px-16;
+    }
+  }
+</style>

package/src/components/Paragraph.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { ParagraphSchema } from 'fulldev-ui/schemas/components/paragraph.ts'
+
+interface Props extends HTMLAttributes<'p'>, ParagraphSchema {
+  as?: HTMLTag
+  muted?: boolean | undefined
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined
+}
+
+const { as = 'p', text, ...rest } = Astro.props
+---
+
+<Element
+  class:list="text"
+  {as}
+  {...rest}
+>
+  <Fragment set:html={text} />
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .text,
+    .prose-content p {
+      @apply leading-relaxed text-foreground;
+
+      &.muted {
+        @apply text-muted-foreground;
+      }
+
+      &.size-xs {
+        @apply text-xs;
+      }
+
+      &.size-sm {
+        @apply text-sm;
+      }
+
+      &.size-md {
+        @apply text-base;
+      }
+
+      &.size-lg {
+        @apply text-lg;
+      }
+
+      &.size-xl {
+        @apply text-xl;
+      }
+    }
+  }
+</style>

package/src/components/Price.astro

@@ -8,20 +8,20 @@ interface Props extends GlobalProps, HTMLAttributes<'div'> {
   size?: 'sm' | 'md' | 'lg' | undefined
   color?: 'base' | 'brand' | undefined
   contrast?: boolean | undefined
-  value?: number | undefined
+  amount?: number | undefined
 }
 
-const { value, ...rest } = Astro.props
+const { amount, ...rest } = Astro.props
 ---
 
 <Element
   class:list="price"
   {...rest}
 >
-  {value && <Fragment set:html={formatPrice(value)} />}
+  {amount && <Fragment set:html={formatPrice(amount)} />}
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .price {
       margin: 0;

package/src/components/Prose.astro

@@ -0,0 +1,78 @@
+---
+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="prose"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .prose {
+      @apply relative w-full max-w-screen-md py-8;
+
+      > * {
+        @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-bold first:mt-0;
+
+        code {
+          font-size: inherit !important;
+        }
+      }
+
+      > h1 {
+        @apply text-4xl;
+      }
+
+      > 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;
+      }
+    }
+  }
+</style>

package/src/components/Rating.astro

@@ -1,30 +1,20 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
-import Avatar from 'fulldev-ui/components/Avatar.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
-import Label from 'fulldev-ui/components/Label.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import type { RatingSchema } from 'fulldev-ui/schemas/components/rating'
 
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  align?: 'start' | 'center' | 'end' | undefined
-  value?: number | undefined
-  label?: string | undefined
-  avatars?: string[] | undefined
-  avatar?: string | undefined
-}
+interface Props extends HTMLAttributes<'div'>, RatingSchema {}
 
-const { value, label, avatars, avatar, align, ...rest } = Astro.props
+const { size = 'md', score, ...rest } = Astro.props
 
 const getIcon = (count: number) => {
-  if (!value) return
-  const difference = value - count
+  if (!score) return
+  const difference = score - count
   if (difference >= -0.25) return 'star-filled'
   if (difference >= -0.75) return 'star-half-filled'
   return 'star'
 }
-
-const hasAvatars = avatars && avatars?.length > 0
 ---
 
 <Element
@@ -32,61 +22,32 @@ const hasAvatars = avatars && avatars?.length > 0
   {...rest}
 >
   {
-    [avatar, ...(avatars ?? [])]
-      ?.filter(Boolean)
-      ?.map((avatar) => <Avatar src={avatar} />)
+    score &&
+      [1, 2, 3, 4, 5].map((count) => (
+        <Icon
+          name={getIcon(count)}
+          {size}
+        />
+      ))
   }
-  <Element
-    class:list="column"
-    align={!hasAvatars ? align : undefined}
-  >
-    <Element
-      class:list={'stars'}
-      {...rest}
-    >
-      {
-        value &&
-          [1, 2, 3, 4, 5].map((_, i) => (
-            <Icon
-              name={getIcon(i + 1)}
-              class:list={'rating-icon-solid'}
-            />
-          ))
-      }
-    </Element>
-    <Label
-      color="base"
-      text={label}
-    />
-  </Element>
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .rating {
-      display: flex;
-      align-items: center;
-      gap: var(--space-4);
-
-      .column {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-      }
+      @apply flex gap-1 text-primary;
+    }
 
-      .avatar + .avatar {
-        margin-left: calc(var(--space-4) * -2.5);
-      }
+    &.size-sm {
+      @apply text-xs;
+    }
 
-      .label {
-        margin-top: var(--space-2) !important;
-      }
+    &.size-md {
+      @apply text-sm;
+    }
 
-      .stars {
-        display: flex;
-        align-items: center;
-        gap: var(--space-2);
-      }
+    &.size-lg {
+      @apply text-base;
     }
   }
 </style>