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

package/src/components/Image.astro

@@ -1,30 +1,12 @@
 ---
-// @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 HTMLAttributes<'img'> {
-  size?: 'sm' | 'md' | 'lg' | undefined
-  id?: any
-  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,
+  src?: string | undefined
+  alt?: string | undefined
+  height?: number | undefined
+  width?: number | undefined
 }
 
 function getAltBySrc() {
@@ -35,24 +17,23 @@ function getAltBySrc() {
   return unslugged || ''
 }
 
-const images = import.meta.glob<{ default: ImageMetadata }>('/src/images/*')
-const image = images[src as keyof typeof images]
+const {
+  src,
+  alt = getAltBySrc(),
+  height = 1920,
+  width = 1920,
+  ...rest
+} = Astro.props
 ---
 
 {
-  (image || src) && (
+  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}
+      class:list="image"
+      {alt}
+      {src}
+      {width}
+      {height}
       {...rest}
     />
   )
@@ -61,19 +42,7 @@ const image = images[src as keyof typeof images]
 <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;
-      }
+      @apply block rounded-md;
     }
   }
 </style>

package/src/components/Input.astro

@@ -1,13 +1,13 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
+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'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-interface Props extends GlobalProps, HTMLAttributes<'input'> {
-  label?: ComponentProps<typeof Label>['text']
-  icon?: ComponentProps<typeof Icon>['name']
+interface Props extends HTMLAttributes<'input'> {
+  size?: 'sm' | 'md' | 'lg' | undefined
+  label?: string | undefined
+  icon?: string | undefined
 }
 
 const {
@@ -17,6 +17,7 @@ const {
   id = name,
   type = 'text',
   size = 'md',
+  value,
   icon,
   ...rest
 } = Astro.props
@@ -27,27 +28,39 @@ const {
   as="label"
   for={id}
   {size}
+  {...rest}
 >
   <Label
     for={name}
     text={label}
     {size}
   />
-  <Icon name={icon} />
+  <Icon
+    name={icon}
+    {size}
+  />
   <Element
     class:list="input-input"
     as="input"
-    if={name}
+    show={name}
     id={name}
     {name}
     {placeholder}
     {type}
-    {...rest}
+    {value}
   />
 </Element>
 
 <style is:global>
   @layer fulldev {
+    .input-input {
+      @apply flex w-full rounded-md border border-input bg-background text-sm text-foreground 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;
+    }
+
     .input {
       @apply relative flex flex-col gap-1.5;
 
@@ -55,14 +68,6 @@ const {
         @apply pointer-events-none absolute;
       }
 
-      .input-input {
-        @apply flex w-full 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;
 

package/src/components/Label.astro

@@ -1,19 +1,19 @@
 ---
-import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import type { HTMLAttributes } 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<'label'> {
-  as?: HTMLTag
+interface Props extends HTMLAttributes<'label'> {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined
+  muted?: boolean | undefined
   text?: string | undefined
 }
 
-const { as = 'label', size = 'md', text, ...rest } = Astro.props
+const { size = 'md', text, ...rest } = Astro.props
 ---
 
 <Element
   class:list="label"
-  {as}
+  as="label"
   {size}
   {...rest}
 >

package/src/components/Link.astro

@@ -1,41 +1,24 @@
 ---
-import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import { getEntry } from 'astro:content'
+import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-interface Props extends GlobalProps, HTMLAttributes<'a'> {
-  as?: HTMLTag
-  href?: string | null | undefined
-  slug?: CollectionEntry<'pages'>['slug'] | undefined
-  icon?: ComponentProps<typeof Icon>['name']
-  variant?: 'primary' | 'muted' | undefined
+interface Props extends HTMLAttributes<'a'> {
+  variant?: 'primary' | 'underline' | 'muted' | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
   text?: string | undefined
-  current?: boolean | undefined
+  icon?: string | undefined
 }
 
-const {
-  slug,
-  href = slug === 'index' ? '/' : slug ? `/${slug}/` : undefined,
-  text = slug ? (await getEntry('pages', slug)).data.title : undefined,
-  target = href?.startsWith('http') ? '_blank' : undefined,
-  current = Astro.url.pathname === href,
-  as = 'a',
-  variant = 'primary',
-  icon,
-  ...rest
-} = Astro.props
+const { variant = 'muted', size = 'md', text, icon, ...rest } = Astro.props
 ---
 
 <Element
   class:list="link"
-  {href}
-  {as}
-  {target}
+  as="a"
+  current={`/${Astro.params.page}/` === rest.href}
   {variant}
-  {current}
+  {size}
   {...rest}
 >
   <Fragment set:html={text} />
@@ -47,13 +30,17 @@ const {
   @layer fulldev {
     .link,
     .prose-content > *:not(.prose-footer) > a {
-      @apply ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+      @apply cursor-pointer ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
 
       &.variant-primary,
       &:is(.prose-content > *:not(.prose-footer) > a) {
         @apply text-primary underline underline-offset-4;
       }
 
+      &.variant-underline {
+        @apply underline underline-offset-4;
+      }
+
       &.variant-muted {
         @apply text-muted-foreground hover:text-foreground;
 
@@ -66,6 +53,10 @@ const {
         @apply text-sm;
       }
 
+      &.size-md {
+        @apply text-base;
+      }
+
       &.size-lg {
         @apply text-lg;
       }

package/src/components/Links.astro

@@ -1,42 +1,20 @@
 ---
-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'
+import type { ComponentProps } from 'astro/types'
+import Link from 'fulldev-ui/components/Link.astro'
 
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  variant?: ComponentProps<typeof Link>['variant']
+interface Props extends ComponentProps<typeof Link> {
+  link?: ComponentProps<typeof Link> | undefined
   links?: ComponentProps<typeof Link>[] | undefined
-  direction?: 'row' | 'column' | undefined
 }
 
-const { variant = 'muted', links, size, ...rest } = Astro.props
+const { link, links, ...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>
+{
+  [link, ...(links || [])].filter(Boolean).map((link) => (
+    <Link
+      {...rest}
+      {...link}
+    />
+  ))
+}

package/src/components/List.astro

@@ -1,14 +1,12 @@
 ---
 import type { HTMLAttributes } 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<'ul'>,
-    HTMLAttributes<'ol'> {
+interface Props extends HTMLAttributes<'ul' | 'ol'> {
   as?: 'ul' | 'ol' | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
   items?: string[] | undefined
+  muted?: boolean | undefined
 }
 
 const { as = 'ul', items, ...rest } = Astro.props

package/src/components/Logo.astro

@@ -1,44 +1,48 @@
 ---
-import type { ComponentProps } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
+import type { HTMLAttributes } from 'astro/types'
 import Image from 'fulldev-ui/components/Image.astro'
+import type { ComponentProps } from 'svelte'
+import Element from './Element.astro'
 
-interface Props extends ComponentProps<typeof Image> {
-  company?: string | undefined
+interface Props extends HTMLAttributes<'a'>, HTMLAttributes<'div'> {
+  image?: ComponentProps<typeof Image> | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
+  text?: string | undefined
 }
 
-const { size = 'md', company, ...rest } = Astro.props as Props
+const { href = '/', size = 'md', image, text, ...rest } = Astro.props as Props
 ---
 
 <Element
   class:list="logo"
-  as="a"
-  href="/"
+  as={href ? 'a' : 'div'}
+  {href}
   {size}
+  {...rest}
 >
-  <Image {...rest} />
-  <Fragment set:html={company} />
+  <Image {...image} />
+  <Fragment set:html={text} />
 </Element>
 
 <style is:global>
   @layer fulldev {
     .logo {
-      @apply inline-flex grow-0 items-center justify-start font-semibold;
+      @apply flex w-auto items-center gap-2 whitespace-nowrap object-contain text-base font-bold leading-none text-foreground;
 
       .image {
-        @apply block h-full w-auto object-contain;
+        @apply h-full w-auto object-contain;
       }
 
       &.size-sm {
-        @apply h-6 gap-2 text-base;
+        @apply h-6;
       }
 
       &.size-md {
-        @apply h-7 gap-2.5 text-lg;
+        @apply h-7;
       }
 
       &.size-lg {
-        @apply h-8 gap-3 text-xl;
+        @apply h-8;
       }
     }
   }

package/src/components/Menu.astro

@@ -1,59 +1,46 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import type { HTMLAttributes } from 'astro/types'
 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 type Link from 'fulldev-ui/components/Link.astro'
+import type { ComponentProps } from 'svelte'
 import Links from './Links.astro'
 
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  direction?: 'row' | 'column'
-  groups?:
-    | {
-        heading?: ComponentProps<typeof Heading>['text']
-        links?: ComponentProps<typeof Link>[]
-      }[]
-    | undefined
+interface Props extends HTMLAttributes<'div'> {
+  size?: 'sm' | 'md' | 'lg' | undefined
+  heading?: string | undefined
+  links?: ComponentProps<typeof Link>[] | undefined
 }
 
-const { direction = 'column', groups, size = 'md', ...rest } = Astro.props
+const { size = 'md', heading, links, ...rest } = Astro.props
 ---
 
 <Element
   class:list="menu"
-  {direction}
-  {size}
   {...rest}
 >
   {
-    groups?.map(({ heading, links }) => (
-      <Element class:list="menu-group">
-        <Heading
-          level={6}
-          text={heading}
-          {size}
-        />
-        <Links
-          direction="column"
-          {links}
-          {size}
-        />
-      </Element>
-    ))
+    links && links.length > 0 && (
+      <Heading
+        text={heading}
+        as="h6"
+        {size}
+      />
+    )
   }
+  <Links
+    {size}
+    {links}
+  />
 </Element>
 
 <style is:global>
   @layer fulldev {
     .menu {
-      @apply flex flex-col gap-6;
+      @apply flex flex-col gap-2;
 
-      .menu-group {
-        @apply flex flex-col gap-3;
-      }
-
-      &.direction-row {
-        @apply flex-row flex-wrap gap-12;
+      .heading {
+        @apply mb-1;
       }
     }
   }

package/src/components/Menus.astro

@@ -0,0 +1,20 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Menu from 'fulldev-ui/components/Menu.astro'
+
+interface Props extends ComponentProps<typeof Menu> {
+  menu?: ComponentProps<typeof Menu> | undefined
+  menus?: ComponentProps<typeof Menu>[] | undefined
+}
+
+const { menu, menus, ...rest } = Astro.props
+---
+
+{
+  [menu, ...(menus || [])].filter(Boolean).map((menu) => (
+    <Menu
+      {...rest}
+      {...menu}
+    />
+  ))
+}

package/src/components/Paragraph.astro

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

package/src/components/Price.astro

@@ -1,27 +1,24 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
 import { formatPrice } from 'fulldev-ui/utils/cart'
 
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
+interface Props extends 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 >
+<style is:global>
   @layer fulldev {
     .price {
       margin: 0;