fulldev-ui 0.6.0-beta.6 → 0.6.0-beta.8

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

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 {
@@ -16,11 +16,8 @@ const {
   name = label || placeholder,
   id = name,
   type = 'text',
-  min,
-  max,
-  value,
-  step,
   size = 'md',
+  value,
   icon,
   ...rest
 } = Astro.props
@@ -38,19 +35,19 @@ const {
     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}
-    {min}
-    {max}
     {value}
-    {step}
   />
 </Element>
 

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,29 +1,22 @@
 ---
-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 { LinkSchema } from 'fulldev-ui/schemas/components/link'
 
-interface Props
-  extends Omit<HTMLAttributes<'a'>, 'href' | 'target'>,
-    LinkSchema {
-  as?: HTMLTag
-  current?: boolean | undefined
+interface Props extends HTMLAttributes<'a'> {
+  variant?: 'primary' | 'underline' | 'muted' | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
+  text?: string | undefined
+  icon?: string | undefined
 }
 
-const {
-  as = 'a',
-  variant = 'primary',
-  size = 'md',
-  text,
-  icon,
-  ...rest
-} = Astro.props
+const { variant = 'muted', size = 'md', text, icon, ...rest } = Astro.props
 ---
 
 <Element
   class:list="link"
-  {as}
+  as="a"
+  current={`/${Astro.params.page}/` === rest.href}
   {variant}
   {size}
   {...rest}
@@ -60,6 +53,10 @@ const {
         @apply text-sm;
       }
 
+      &.size-md {
+        @apply text-base;
+      }
+
       &.size-lg {
         @apply text-lg;
       }

package/src/components/Links.astro

@@ -7,13 +7,12 @@ interface Props extends ComponentProps<typeof Link> {
   links?: ComponentProps<typeof Link>[] | undefined
 }
 
-const { variant = 'muted', link, links, ...rest } = Astro.props
+const { link, links, ...rest } = Astro.props
 ---
 
 {
   [link, ...(links || [])].filter(Boolean).map((link) => (
     <Link
-      {variant}
       {...rest}
       {...link}
     />