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

package/src/blocks/Projects1.astro

@@ -0,0 +1,103 @@
+---
+// Heading etc left, image and content right, sticky
+import type { ComponentProps } from 'astro/types'
+import Badges from 'fulldev-ui/components/Badges.astro'
+import Buttons from 'fulldev-ui/components/Buttons.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 Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Group from 'fulldev-ui/structures/Group.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Section from 'fulldev-ui/structures/Section.astro'
+
+interface Props extends ComponentProps<typeof Section> {
+  tagline?: string | undefined
+  heading?: string | undefined
+  paragraph?: string | undefined
+  content?: string | undefined
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+  cards?: {
+    image?: ComponentProps<typeof Image> | undefined
+    badges?: ComponentProps<typeof Badges>['badges']
+    heading?: string | undefined
+    paragraph?: string | undefined
+  }[]
+}
+
+const { tagline, heading, paragraph, buttons, content, cards, ...rest } =
+  Astro.props
+---
+
+<Section
+  class:list="projects-1"
+  {...rest}
+>
+  <Container>
+    <Prose>
+      <Tagline text={tagline} />
+      <Heading
+        as="h2"
+        size="4xl"
+        text={heading}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+      <Group>
+        <Buttons {buttons} />
+      </Group>
+    </Prose>
+    <Element class:list="projects-1-cards">
+      {
+        cards?.map(({ image, badges, heading, paragraph }) => (
+          <Element class:list="projects-1-card">
+            <Image {...image} />
+            <Group>
+              <Badges
+                size="sm"
+                {badges}
+              />
+            </Group>
+            <Heading
+              as="h3"
+              size="xl"
+              text={heading}
+            />
+            <Paragraph text={paragraph} />
+          </Element>
+        ))
+      }
+    </Element>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .projects-1 {
+      .container {
+        @apply flex flex-col items-start gap-x-gutter lg:grid lg:grid-cols-2;
+      }
+
+      .prose {
+        @apply lg:sticky lg:top-sticky-16 lg:max-w-xl;
+      }
+
+      .projects-1-cards {
+        @apply flex flex-col gap-8;
+      }
+
+      .projects-1-card {
+        @apply flex flex-col gap-2;
+
+        .image {
+          @apply mb-4 rounded-md;
+        }
+      }
+    }
+  }
+</style>

package/src/blocks/Reviews1.astro

@@ -1,15 +1,16 @@
 ---
 import type { ComponentProps } from 'astro/types'
-import Card from 'fulldev-ui/components/Card.astro'
-import Container from 'fulldev-ui/components/Container.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
-import Masonry from 'fulldev-ui/components/Masonry.astro'
+import Image from 'fulldev-ui/components/Image.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Rating from 'fulldev-ui/components/Rating.astro'
-import Section from 'fulldev-ui/components/Section.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
-import Writeup from 'fulldev-ui/components/Writeup.astro'
-import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Card from 'fulldev-ui/structures/Card.astro'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Masonry from 'fulldev-ui/structures/Masonry.astro'
+import Section from 'fulldev-ui/structures/Section.astro'
+import Writeup from 'fulldev-ui/structures/Writeup.astro'
 
 interface Props extends ComponentProps<typeof Section>, BlockSchema {}
 
@@ -34,8 +35,9 @@ const { tagline, heading, paragraph, cards, ...rest } = Astro.props
     </Writeup>
     <Masonry>
       {
-        cards?.map(({ rating, heading, paragraph }) => (
+        cards?.map(({ rating, heading, paragraph, image }) => (
           <Card class="reviews-1-card">
+            <Image {...image} />
             <Rating
               size="sm"
               score={rating}

package/src/{components → blocks}/Subheader.astro

@@ -2,9 +2,8 @@
 import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Links from 'fulldev-ui/components/Links.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-interface Props extends GlobalProps, HTMLAttributes<'header'> {
+interface Props extends HTMLAttributes<'header'> {
   dark?: boolean | undefined
   size?: 'sm' | 'md' | 'lg' | undefined
   links?: ComponentProps<typeof Links>['links']

package/src/components/Badge.astro

@@ -1,33 +1,21 @@
 ---
-import type { HTMLAttributes, HTMLTag } 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 type { BadgeSchema } from 'fulldev-ui/schemas/components/badge'
 
-interface Props
-  extends HTMLAttributes<'button'>,
-    Omit<HTMLAttributes<'a'>, 'href' | 'target'>,
-    BadgeSchema {
-  as?: HTMLTag
-  type?: HTMLAttributes<'button'>['type'] & HTMLAttributes<'a'>['type']
-  reverse?: boolean | undefined
+interface Props extends HTMLAttributes<'a'>, HTMLAttributes<'div'> {
+  variant?: 'primary' | 'secondary' | 'outline' | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
+  text?: string | undefined
+  icon?: string | undefined
 }
 
-const {
-  href,
-  as = href ? 'a' : 'button',
-  variant = 'outline',
-  size = 'md',
-  text,
-  icon,
-  ...rest
-} = Astro.props
+const { variant = 'outline', size = 'md', text, icon, ...rest } = Astro.props
 ---
 
 <Element
   class:list="badge"
-  {as}
-  {href}
+  as={rest.href ? 'a' : 'div'}
   {variant}
   {size}
   {...rest}

package/src/components/Badges.astro

@@ -1,10 +1,10 @@
 ---
 import type { ComponentProps } from 'astro/types'
-import Badge from './Badge.astro'
+import Badge from 'fulldev-ui/components/Badge.astro'
 
 interface Props extends ComponentProps<typeof Badge> {
   badge?: ComponentProps<typeof Badge> | undefined
-  badges?: ComponentProps<typeof Badge>[] | undefined
+  badges?: string[] | undefined
 }
 
 const { badge, badges, ...rest } = Astro.props
@@ -13,8 +13,8 @@ const { badge, badges, ...rest } = Astro.props
 {
   [badge, ...(badges || [])].filter(Boolean).map((badge) => (
     <Badge
-      {...badge}
       {...rest}
+      {...(typeof badge === 'string' ? { text: badge } : badge)}
     />
   ))
 }

package/src/components/Block.astro

@@ -1,6 +1,6 @@
 ---
 import { getEntries } from 'astro:content'
-import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
 
 interface Props extends BlockSchema {}
 

package/src/components/Button.astro

@@ -1,33 +1,24 @@
 ---
-import type { HTMLAttributes, HTMLTag } 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 type { ButtonSchema } from 'fulldev-ui/schemas/components/button'
 
 interface Props
   extends HTMLAttributes<'button'>,
-    Omit<HTMLAttributes<'a'>, 'href' | 'target'>,
-    ButtonSchema {
-  as?: HTMLTag
-  type?: HTMLAttributes<'button'>['type'] & HTMLAttributes<'a'>['type']
-  for?: HTMLAttributes<'label'>['for']
+    Omit<HTMLAttributes<'a'>, 'type'>,
+    HTMLAttributes<'label'> {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
+  text?: string | undefined
+  icon?: string | undefined
 }
 
-const {
-  href,
-  as = href ? 'a' : 'button',
-  variant = 'primary',
-  size = 'md',
-  text,
-  icon,
-  ...rest
-} = Astro.props
+const { variant = 'primary', size = 'md', text, icon, ...rest } = Astro.props
 ---
 
 <Element
   class:list={['button']}
-  {as}
-  {href}
+  as={rest.href ? 'a' : rest.for ? 'label' : 'button'}
   {variant}
   {size}
   {...rest}

package/src/components/Cart.astro

@@ -1,8 +1,9 @@
 ---
+// @ts-nocheck
 import type { ComponentProps } from 'astro/types'
 import CartList from 'fulldev-ui/components/CartList.svelte'
 import CartSummary from 'fulldev-ui/components/CartSummary.astro'
-import Drawer from 'fulldev-ui/components/Drawer.astro'
+import Drawer from 'fulldev-ui/structures/Drawer.astro'
 import Button from './Button.astro'
 import Icon from './Icon.astro'
 import Input from './Input.astro'
@@ -13,10 +14,10 @@ interface Props extends Omit<ComponentProps<typeof Drawer>, 'id' | 'icon'> {}
 const { variant = 'ghost', size = 'md', ...rest } = Astro.props
 ---
 
-<Select if={false} />
-<Button if={false} />
-<Input if={false} />
-<Icon if={false} />
+<Select show={false} />
+<Button show={false} />
+<Input show={false} />
+<Icon show={false} />
 
 <Drawer
   class:list="cart"
@@ -24,7 +25,6 @@ const { variant = 'ghost', size = 'md', ...rest } = Astro.props
   icon="shopping-cart"
   {variant}
   {size}
-  {icon}
   {...rest}
 >
   <CartList client:load />

package/src/components/CartSummary.astro

@@ -1,4 +1,5 @@
 ---
+// @ts-nocheck
 import { STRIPE_RESTRICTED_KEY, URL } from 'astro:env/client'
 import CartCheckout from './CartCheckout.svelte'
 import CartTotal from './CartTotal.svelte'

package/src/components/Channel.astro

@@ -3,9 +3,15 @@ import type { 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 { ChannelSchema } from 'fulldev-ui/schemas/components/channel'
 
-interface Props extends HTMLAttributes<'div'>, ChannelSchema {}
+interface Props extends HTMLAttributes<'div'> {
+  variant?: 'secondary' | 'outline' | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
+  heading?: string | undefined
+  text?: string | undefined
+  href?: string | undefined
+  icon?: string | undefined
+}
 
 const {
   variant = 'secondary',
@@ -32,7 +38,7 @@ const {
   <Element class:list="channel-content">
     <Heading
       as="h6"
-      size="sm"
+      {size}
       text={heading}
     />
     <Fragment set:html={text} />

package/src/components/Channels.astro

@@ -1,51 +1,20 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import type { ComponentProps } from 'astro/types'
 import Channel from 'fulldev-ui/components/Channel.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  variant?: ComponentProps<typeof Channel>['variant']
-  size?: ComponentProps<typeof Channel>['size']
+interface Props extends ComponentProps<typeof Channel> {
   channel?: ComponentProps<typeof Channel> | undefined
   channels?: ComponentProps<typeof Channel>[] | undefined
 }
 
-const { channels = [], channel, variant, size, ...rest } = Astro.props
+const { channel, channels, ...rest } = Astro.props
 ---
 
-<Element
-  class:list="channels"
-  {size}
-  {...rest}
->
-  {
-    [channel, ...channels].filter(Boolean).map((channel) => (
-      <Channel
-        {variant}
-        {size}
-        {...channel}
-      />
-    ))
-  }
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .channels {
-      @apply flex flex-col gap-2.5;
-
-      &.size-sm {
-        @apply gap-2;
-      }
-
-      &.size-md {
-        @apply gap-2.5;
-      }
-
-      &.size-lg {
-        @apply gap-3;
-      }
-    }
-  }
-</style>
+{
+  [channel, ...(channels || [])].filter(Boolean).map((channel) => (
+    <Channel
+      {...rest}
+      {...channel}
+    />
+  ))
+}

package/src/components/Checkbox.astro

@@ -1,22 +1,15 @@
 ---
-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'
-import Icon from './Icon.astro'
 
-interface Props extends GlobalProps, HTMLAttributes<'input'> {
-  label?: ComponentProps<typeof Label>['text']
+interface Props extends HTMLAttributes<'input'> {
+  size?: 'sm' | 'md' | 'lg' | undefined
+  label?: string | undefined
 }
 
-const {
-  label,
-  name = label,
-  id = name,
-  type = 'text',
-  size = 'md',
-  ...rest
-} = Astro.props
+const { label, name = label, id = name, size = 'md', ...rest } = Astro.props
 ---
 
 <Element
@@ -29,7 +22,7 @@ const {
     class:list="checkbox-input"
     as="input"
     type="checkbox"
-    if={id}
+    show={id}
     {id}
     {name}
     {...rest}
@@ -37,6 +30,7 @@ const {
   <Icon
     class="checkbox-icon"
     name="check"
+    {size}
   />
   <Label
     for={id}

package/src/components/Element.astro

@@ -1,6 +1,7 @@
 ---
 const {
   as: As = 'div',
+  show = 'content',
   theme,
   variant,
   size,
@@ -26,7 +27,7 @@ const {
 } = Astro.props
 
 const slot = await Astro.slots.render('default')
-const render = 'if' in rest ? rest.if : slot?.trim().length > 0
+const render = show === 'content' ? slot?.trim().length > 0 : show
 ---
 
 {

package/src/components/Form.astro

@@ -5,9 +5,8 @@ import Element from 'fulldev-ui/components/Element.astro'
 import Input from 'fulldev-ui/components/Input.astro'
 import Select from 'fulldev-ui/components/Select.astro'
 import Textarea from 'fulldev-ui/components/Textarea.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-interface Props extends GlobalProps, HTMLAttributes<'form'> {
+interface Props extends HTMLAttributes<'form'> {
   submit?: ComponentProps<typeof Button>['text']
   fields?:
     | (

package/src/components/Gallery.astro

@@ -1,4 +1,5 @@
 ---
+// @ts-nocheck
 import type { ComponentProps } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
 import Element from 'fulldev-ui/components/Element.astro'
@@ -64,7 +65,7 @@ const hasMany = images?.length > 5
 <Element class:list="gallery">
   <Element class:list="gallery-large">
     <Button
-      if={hasMultiple}
+      show={hasMultiple}
       class="gallery-left"
       icon="chevron-left"
       variant="secondary"
@@ -80,7 +81,7 @@ const hasMany = images?.length > 5
       }
     </Element>
     <Button
-      if={hasMultiple}
+      show={hasMultiple}
       class="gallery-right"
       icon="chevron-right"
       variant="secondary"
@@ -88,11 +89,11 @@ const hasMany = images?.length > 5
     />
   </Element>
   <Element
-    if={hasMultiple}
+    show={hasMultiple}
     class:list="gallery-small"
   >
     <Button
-      if={hasMany}
+      show={hasMany}
       class="gallery-left"
       icon="chevron-left"
       variant="secondary"
@@ -111,7 +112,7 @@ const hasMany = images?.length > 5
       }
     </Element>
     <Button
-      if={hasMany}
+      show={hasMany}
       class="gallery-right"
       icon="chevron-right"
       variant="ghost"

package/src/components/Head.astro

@@ -1,16 +1,26 @@
 ---
 import { AstroSeo } from '@astrolib/seo'
 import type { HTMLAttributes } from 'astro/types'
-import type { HeadSchema } from 'fulldev-ui/schemas/components/head'
+import type Image from 'fulldev-ui/components/Image.astro'
+import type { ComponentProps } from 'svelte'
 
-type Props = HTMLAttributes<'head'> & HeadSchema & {}
+type Props = HTMLAttributes<'head'> & {
+  title?: string | undefined
+  description?: string | undefined
+  image?: ComponentProps<typeof Image> | undefined
+  theme?: 'light' | 'dark' | 'system' | undefined
+  favicon?: string | undefined
+  company?: string | undefined
+  scripts?: string[] | undefined
+  code?: string | undefined
+}
 
-const { theme, title, description, image, code } = Astro.props
+const { theme, title, description, image, code, ...rest } = Astro.props
 
 const src = image?.src && Astro.url.origin + image.src
 ---
 
-<head>
+<head {...rest}>
   <meta charset="utf-8" />
   <meta
     content="width=device-width, initial-scale=1, viewport-fit=cover"

package/src/components/Heading.astro

@@ -1,27 +1,32 @@
 ---
-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'
-import { slugify } from 'fulldev-ui/utils/slugify'
 
-interface Props extends GlobalProps, HTMLAttributes<'h2'>, HTMLAttributes<'a'> {
-  as?: HTMLTag
+interface Props
+  extends HTMLAttributes<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> {
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined
   text?: string | undefined
   muted?: boolean | undefined
+  size?:
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | '4xl'
+    | '5xl'
+    | '6xl'
+    | undefined
 }
 
-const {
-  as = 'h2',
-  text,
-  id = text ? slugify(text) : undefined,
-  ...rest
-} = Astro.props
+const { as = 'h2', text, ...rest } = Astro.props
 ---
 
 <Element
   class:list="heading"
   {as}
-  {id}
   {...rest}
 >
   <Fragment set:html={text} />
@@ -36,11 +41,6 @@ const {
       @apply text-muted-foreground;
     }
 
-    &,
-    &.size-md {
-      @apply text-base;
-    }
-
     &.size-xs {
       @apply text-xs;
     }
@@ -49,6 +49,10 @@ const {
       @apply text-sm;
     }
 
+    &.size-md {
+      @apply text-base;
+    }
+
     &.size-lg {
       @apply text-lg;
     }

package/src/components/Icon.astro

@@ -2,11 +2,10 @@
 import tablerIcons from '@iconify-json/tabler/icons.json'
 import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import type { IconSchema } from 'fulldev-ui/schemas/components/icon'
 
-interface Props extends Omit<HTMLAttributes<'svg'>, 'name'>, IconSchema {
-  // name?: keyof typeof tablerIcons.icons | undefined
+interface Props extends HTMLAttributes<'svg'> {
   size?: 'sm' | 'md' | 'lg' | undefined
+  name?: string | undefined
 }
 
 const { size = 'md', name, ...rest } = Astro.props

package/src/components/Image.astro

@@ -1,9 +1,13 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 import { Image as AstroImage } from 'astro:assets'
-import type { ImageSchema } from 'fulldev-ui/schemas/imageSchema'
 
-interface Props extends HTMLAttributes<'img'>, ImageSchema {}
+interface Props extends HTMLAttributes<'img'> {
+  src?: string | undefined
+  alt?: string | undefined
+  height?: number | undefined
+  width?: number | undefined
+}
 
 function getAltBySrc() {
   if (!src) return