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

package/src/components/Menu.astro

@@ -2,10 +2,15 @@
 import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
-import type { MenuSchema } from 'fulldev-ui/schemas/components/menu'
+import type Link from 'fulldev-ui/components/Link.astro'
+import type { ComponentProps } from 'svelte'
 import Links from './Links.astro'
 
-interface Props extends HTMLAttributes<'div'>, MenuSchema {}
+interface Props extends HTMLAttributes<'div'> {
+  size?: 'sm' | 'md' | 'lg' | undefined
+  heading?: string | undefined
+  links?: ComponentProps<typeof Link>[] | undefined
+}
 
 const { size = 'md', heading, links, ...rest } = Astro.props
 ---
@@ -20,7 +25,6 @@ const { size = 'md', heading, links, ...rest } = Astro.props
     {size}
   />
   <Links
-    variant="muted"
     {size}
     {links}
   />

package/src/components/Paragraph.astro

@@ -1,20 +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 { ParagraphSchema } from 'fulldev-ui/schemas/components/paragraph.ts'
 
-interface Props extends HTMLAttributes<'p'>, ParagraphSchema {
-  as?: HTMLTag
-  muted?: boolean | undefined
+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}
 >
   <Fragment set:html={text} />

package/src/components/Price.astro

@@ -1,13 +1,10 @@
 ---
 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
   amount?: number | undefined
 }
 

package/src/components/Rating.astro

@@ -2,9 +2,11 @@
 import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
-import type { RatingSchema } from 'fulldev-ui/schemas/components/rating'
 
-interface Props extends HTMLAttributes<'div'>, RatingSchema {}
+interface Props extends HTMLAttributes<'div'> {
+  size?: 'sm' | 'md' | 'lg' | undefined
+  score?: number | undefined
+}
 
 const { size = 'md', score, ...rest } = Astro.props
 

package/src/components/Search.astro

@@ -8,11 +8,6 @@ import Input from './Input.astro'
 import Paragraph from './Paragraph.astro'
 
 const pages = await getCollection('pages')
-const products = await getCollection('products')
-const categories = await getCollection('categories')
-const posts = await getCollection('posts')
-const docs = await getCollection('docs')
-const entries = [...pages, ...categories, ...products, ...posts, ...docs]
 ---
 
 <script>
@@ -60,7 +55,7 @@ const entries = [...pages, ...categories, ...products, ...posts, ...docs]
       />
       <Element class:list="search-list">
         {
-          entries.map(({ collection, slug, data }) => (
+          pages.map(({ slug, data }) => (
             <Element
               as="a"
               href={getHref(slug)}

package/src/components/Select.astro

@@ -3,9 +3,9 @@ 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<'select'> {
+interface Props extends HTMLAttributes<'select'> {
+  show?: any
   label?: string | undefined
   placeholder?: string | undefined
   options?: string[] | undefined
@@ -25,8 +25,8 @@ const {
 ---
 
 <Element
-  if={options}
   class:list="select"
+  show={options}
   as="label"
   for={id}
   {size}
@@ -39,7 +39,6 @@ const {
   <Element
     class:list="select-select"
     as="select"
-    if={id}
     {id}
     {name}
     {...rest}

package/src/components/Sidebar.astro

@@ -1,10 +1,10 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import type { SidebarSchema } from 'fulldev-ui/schemas/components/sidebar'
-import Menus from './Menus.astro'
+import Menus from 'fulldev-ui/components/Menus.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
 
-interface Props extends HTMLAttributes<'aside'>, SidebarSchema {}
+interface Props extends HTMLAttributes<'aside'>, BlockSchema {}
 
 const { menus, ...rest } = Astro.props
 ---
@@ -21,10 +21,10 @@ const { menus, ...rest } = Astro.props
   />
 </Element>
 
-<style is:global>
+<!-- <style is:global>
   @layer fulldev {
     .sidebar {
-      @apply sticky bottom-0 left-0 hidden h-full max-w-[75vw] flex-col items-start gap-8 overflow-y-auto border-r bg-background py-8 pr-8 lg:flex;
+      @apply sticky bottom-0 left-0 hidden h-full w-56 max-w-56 shrink-0 grow flex-col items-start gap-8 overflow-y-auto border-r bg-background py-8 pr-8 lg:flex;
       @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
 
       --headers: calc(var(--header-height, 0px) + var(--subheader-height, 0px));
@@ -40,4 +40,4 @@ const { menus, ...rest } = Astro.props
       }
     }
   }
-</style>
+</style> -->

package/src/components/Social.astro

@@ -5,8 +5,9 @@ import Button from 'fulldev-ui/components/Button.astro'
 interface Props extends ComponentProps<typeof Button> {}
 
 const {
-  variant = 'secondary',
+  variant = 'ghost',
   target = '_blank',
+  size = 'sm',
   icon,
   href,
   ...rest
@@ -33,5 +34,6 @@ const platform = () => {
   {variant}
   {href}
   {target}
+  {size}
   {...rest}
 />

package/src/components/Socials.astro

@@ -1,41 +1,25 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
+import type { ComponentProps } from 'astro/types'
 import Social from 'fulldev-ui/components/Social.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  variant?: ComponentProps<typeof Social>['variant']
-  socials?: ComponentProps<typeof Social>['href'][] | undefined
+interface Props extends ComponentProps<typeof Social> {
+  social?:
+    | ComponentProps<typeof Social>
+    | ComponentProps<typeof Social>['href']
+    | undefined
+  socials?:
+    | (ComponentProps<typeof Social> | ComponentProps<typeof Social>['href'])[]
+    | undefined
 }
 
-const { variant = 'ghost', socials, size, ...rest } = Astro.props
+const { social, socials, ...rest } = Astro.props
 ---
 
-<Element
-  class:list="socials"
-  {variant}
-  {...rest}
->
-  {
-    socials?.map((social) => (
-      <Social
-        {variant}
-        {size}
-        href={social}
-      />
-    ))
-  }
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .socials {
-      @apply flex gap-2;
-
-      &.variant-ghost {
-        @apply gap-0;
-      }
-    }
-  }
-</style>
+{
+  [social, ...(socials || [])].filter(Boolean).map((social) => (
+    <Social
+      {...rest}
+      {...(typeof social === 'string' ? { href: social } : social)}
+    />
+  ))
+}

package/src/components/Switch.astro

@@ -2,10 +2,10 @@
 import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Label from 'fulldev-ui/components/Label.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-interface Props extends GlobalProps, Omit<HTMLAttributes<'input'>, 'type'> {
+interface Props extends Omit<HTMLAttributes<'input'>, 'type'> {
   label?: ComponentProps<typeof Label>['text']
+  size?: 'sm' | 'md' | 'lg'
 }
 
 const { label, name = label, id = name, size = 'md', ...rest } = Astro.props
@@ -21,7 +21,7 @@ const { label, name = label, id = name, size = 'md', ...rest } = Astro.props
     class:list="switch-input"
     as="input"
     type="checkbox"
-    if={id}
+    show={id}
     {id}
     {name}
     {...rest}
@@ -29,7 +29,7 @@ const { label, name = label, id = name, size = 'md', ...rest } = Astro.props
   <Element
     as="label"
     for={id}
-    if={id}
+    show={id}
     class="switch-mark"
   />
   <Label
@@ -84,68 +84,3 @@ const { label, name = label, id = name, size = 'md', ...rest } = Astro.props
     }
   }
 </style>
-
-<!-- <style is:global>
-  @layer fulldev {
-    .switch {
-      display: flex;
-      position: relative;
-      align-items: center;
-      gap: var(--space-1);
-      width: 100%;
-
-      .switch-element {
-        display: block;
-        position: relative;
-        transition: all;
-        cursor: pointer;
-        box-sizing: border-box;
-        border: 1px solid var(--border);
-        border-radius: 999px;
-        background-color: var(--base-2);
-        padding: var(--space-1);
-        width: fit-content;
-        min-width: calc(
-          (var(--text-2) + 2 * var(--space-2) * 2) + 2 * var(--space-1)
-        );
-        height: calc(var(--text-2) + 2 * var(--space-2));
-
-        .checkbox {
-          position: absolute;
-          opacity: 0;
-          width: 0;
-          height: 0;
-        }
-
-        .checkmark {
-          transform: 0%;
-          transition: all;
-          border-radius: 999px;
-          background-color: var(--base-1);
-          width: 50%;
-          height: 100%;
-        }
-
-        .checkbox:checked ~ .checkmark {
-          transform: translateX(100%);
-          background-color: var(--color-12);
-        }
-
-        &:hover {
-          background-color: var(--base-3);
-        }
-
-        &:focus-visible {
-          outline: 2px solid var(--focus) !important;
-          outline-offset: 2px;
-        }
-
-        &:disabled {
-          opacity: 0.5;
-          cursor: not-allowed;
-          pointer-events: none;
-        }
-      }
-    }
-  }
-</style> -->

package/src/components/Table.astro

@@ -1,9 +1,8 @@
 ---
 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<'table'> {
+interface Props extends HTMLAttributes<'table'> {
   header?: string[] | undefined
   body?: string[][] | undefined
   footer?: string[] | undefined
@@ -41,7 +40,7 @@ const { header, body, footer, ...rest } = Astro.props
   </Element>
 </Element>
 
-<style is:global >
+<style is:global>
   @layer fulldev {
     .table {
       box-shadow: 0 0 0 1px var(--color-6);

package/src/components/Tagline.astro

@@ -1,20 +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 { TaglineSchema } from 'fulldev-ui/schemas/components/tagline'
 
-interface Props extends HTMLAttributes<'p'>, TaglineSchema {
-  as?: HTMLTag
-  muted?: boolean | undefined
+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="tagline"
-  {as}
+  as="p"
   {...rest}
 >
   <Fragment set:html={text} />

package/src/components/Textarea.astro

@@ -1,11 +1,11 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Label from 'fulldev-ui/components/Label.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-interface Props extends GlobalProps, HTMLAttributes<'textarea'> {
-  label?: ComponentProps<typeof Label>['text']
+interface Props extends HTMLAttributes<'textarea'> {
+  size?: 'sm' | 'md' | 'lg' | undefined
+  label?: string | undefined
 }
 
 const {
@@ -33,7 +33,7 @@ const {
   <Element
     class:list="textarea-textarea"
     as="textarea"
-    if={id}
+    show={id}
     {id}
     {name}
     {placeholder}

package/src/components/Themer.astro

@@ -1,9 +1,9 @@
 ---
-import Button from './Button.astro'
-import Icon from './Icon.astro'
+import Button from 'fulldev-ui/components/Button.astro'
+import Icon from 'fulldev-ui/components/Icon.astro'
 
 interface Props {
-  if?: any
+  show?: any
   size?: any
   variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | undefined
 }

package/src/components/Toc.astro

@@ -3,14 +3,14 @@ import type { MarkdownHeading } from 'astro'
 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 Link from './Link.astro'
+import Link from 'fulldev-ui/components/Link.astro'
 
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
+interface Props extends HTMLAttributes<'div'> {
   headings?: MarkdownHeading[] | undefined
+  heading?: string | undefined
 }
 
-const { headings, ...rest } = Astro.props
+const { headings, heading, ...rest } = Astro.props
 
 const filteredHeadings = headings?.filter(
   (heading: any) => heading.depth >= 2 && heading.depth <= 4
@@ -27,14 +27,10 @@ const links = filteredHeadings?.map((button: any) => ({
 
 <Element
   class:list="toc"
-  if={filteredHeadings?.length}
+  show={filteredHeadings?.length}
   {...rest}
 >
-  <Heading
-    as="a"
-    href="#"
-    {...h1}
-  />
+  <Heading text={h1?.text || heading} />
   {
     links?.map((link) => (
       <Link
@@ -49,7 +45,7 @@ const links = filteredHeadings?.map((button: any) => ({
 <style is:global>
   @layer fulldev {
     .toc {
-      @apply lg:top-sticky-16 sticky bottom-0 z-10 hidden w-48 shrink-0 flex-col items-start justify-start gap-3 overflow-y-auto md:flex;
+      @apply sticky bottom-0 top-sticky-16 z-10 hidden w-48 shrink-0 flex-col items-start justify-start gap-3 overflow-y-auto md:flex;
       @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
 
       .depth-3 {

package/src/components/Toggle.astro

@@ -0,0 +1,45 @@
+---
+import type { Polymorphic } from 'astro/types'
+import { uid } from 'radash'
+import Button from './Button.astro'
+
+type Props<As extends 'label'> = Polymorphic<{ as: As }> & {
+  color?: 'base' | 'brand' | undefined
+  id?: string | undefined
+  name?: string | undefined
+  icon?: string | undefined
+  html?: string | undefined
+  text?: string | undefined
+  toggled: boolean | undefined
+}
+
+const { id = uid(7), toggled, name, ...rest } = Astro.props
+---
+
+<input
+  class="toggle-checkbox"
+  checked={toggled}
+  type="checkbox"
+  id={id}
+  name={name ?? id}
+/>
+
+<Button
+  class:list="toggle"
+  variant="tertiary"
+  as="label"
+  for={id}
+  {...rest}
+/>
+
+<style is:global>
+  @layer fulldev {
+    .toggle-checkbox {
+      @apply hidden;
+
+      &:checked + .toggle {
+        @apply bg-accent text-foreground;
+      }
+    }
+  }
+</style>

package/src/components/{Breadcrumb.astro → _Breadcrumb.astro}

@@ -1,5 +1,5 @@
----
-import type { HTMLAttributes, HTMLTag } from 'astro/types'
+<!-- ---
+import type { HTMLAttributes,HTMLTag } from 'astro/types'
 import type { CollectionEntry } from 'astro:content'
 import Element from 'fulldev-ui/components/Element.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
@@ -55,4 +55,4 @@ const { size = 'sm', slug, ...rest } = Astro.props
       }
     }
   }
-</style>
+</style> -->

package/src/components/_Image.astro

@@ -1,4 +1,4 @@
----
+<!-- ---
 // @ts-nocheck
 import type { ImageMetadata } from 'astro'
 import type { HTMLAttributes } from 'astro/types'
@@ -76,4 +76,4 @@ const image = images[src as keyof typeof images]
       }
     }
   }
-</style>
+</style> -->

package/src/components/docs/Props.astro

@@ -0,0 +1,21 @@
+---
+import Link from 'fulldev-ui/components/Link.astro'
+
+const slug = Astro.params.page
+const folder = slug?.split('/').slice(-2, -1)[0]
+const component = slug
+  ?.split('/')
+  .pop()
+  ?.replace(/^\w/, (c) => c.toUpperCase())
+const path = `src/${folder}/${component}.astro`
+---
+
+<p>
+  Please reference
+  <Link
+    target="_blank"
+    href={`https://github.com/fulldotdev/ui/blob/main/${path}`}
+  >
+    {path}
+  </Link> for now.
+</p>