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

package/src/components/Rating.astro

@@ -2,30 +2,17 @@
 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'
-import Avatars from './Avatars.astro'
 
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  align?: 'start' | 'center' | 'end' | undefined
-  value?: number | undefined
-  text?: string | undefined
-  avatars?: any
-  avatar?: any
+interface Props extends HTMLAttributes<'div'> {
+  size?: 'sm' | 'md' | 'lg' | undefined
+  score?: number | undefined
 }
 
-const {
-  size = 'md',
-  value,
-  text,
-  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'
@@ -34,71 +21,35 @@ const getIcon = (count: number) => {
 
 <Element
   class:list="rating"
-  {size}
   {...rest}
 >
-  <Avatars
-    {size}
-    {avatars}
-    {avatar}
-  />
-  <Element class:list="rating-content">
-    <Element
-      class:list="rating-stars"
-      {...rest}
-    >
-      {
-        value &&
-          [1, 2, 3, 4, 5].map((_, i) => (
-            <Icon
-              {size}
-              name={getIcon(i + 1)}
-              class:list={'rating-icon-solid'}
-            />
-          ))
-      }
-    </Element>
-    <Fragment set:html={text} />
-    <slot />
-  </Element>
+  {
+    score &&
+      [1, 2, 3, 4, 5].map((count) => (
+        <Icon
+          name={getIcon(count)}
+          {size}
+        />
+      ))
+  }
 </Element>
 
 <style is:global>
   @layer fulldev {
     .rating {
-      @apply flex items-center gap-3;
-
-      .rating-content {
-        @apply flex flex-col gap-1 text-muted-foreground;
-      }
-
-      .rating-stars {
-        @apply flex gap-1 text-primary;
-      }
-
-      &.size-sm {
-        @apply gap-2;
-
-        .rating-content {
-          @apply text-xs leading-none;
-        }
-      }
-
-      &.size-md {
-        @apply gap-2.5;
+      @apply flex gap-1 text-primary;
+    }
 
-        .rating-content {
-          @apply text-sm leading-none;
-        }
-      }
+    &.size-sm {
+      @apply text-xs;
+    }
 
-      &.size-lg {
-        @apply gap-3;
+    &.size-md {
+      @apply text-sm;
+    }
 
-        .rating-content {
-          @apply text-base leading-none;
-        }
-      }
+    &.size-lg {
+      @apply text-base;
     }
   }
 </style>

package/src/components/Search.astro

@@ -1,59 +1,118 @@
 ---
-import Dialog from 'fulldev-ui/components/Dialog.astro'
+import { getCollection } from 'astro:content'
+import { getHref } from 'fulldev-ui/utils/getHref'
+import Button from './Button.astro'
+import Element from './Element.astro'
+import Heading from './Heading.astro'
+import Input from './Input.astro'
+import Paragraph from './Paragraph.astro'
 
-const { variant = 'secondary', ...rest } = Astro.props
+const pages = await getCollection('pages')
 ---
 
-<Dialog
-  class:list="search"
-  id="search"
+<script>
+  document.addEventListener('astro:page-load', () => {
+    const input = document.querySelector('.search-input')
+    const items = document.querySelectorAll('.search-item')
+
+    input?.addEventListener('input', (e) => {
+      if (!(e.target instanceof HTMLInputElement)) return
+      const value = e.target.value.toLowerCase()
+      items.forEach((item) => {
+        if (!(item instanceof HTMLElement)) return
+
+        const title =
+          item.querySelector('.heading')?.textContent?.toLowerCase() || ''
+        const description =
+          item.querySelector('.paragraph')?.textContent?.toLowerCase() || ''
+
+        const isVisible = title.includes(value) || description.includes(value)
+        item.classList.toggle('hide', !isVisible)
+      })
+    })
+  })
+</script>
+
+<Button
+  class:list="search-button"
+  variant={Astro.props.variant}
+  size="sm"
   icon="search"
-  {variant}
-  {...rest}
+  onclick={`document.getElementById('search').showModal()`}
 />
 
-<style is:global >
-  :root {
-    --pagefind-ui-primary: var(--brand-11);
-    --pagefind-ui-text: var(--base-12);
-    --pagefind-ui-background: var(--base-2);
-    --pagefind-ui-border: var(--base-6);
-    --pagefind-ui-tag: var(--base-6);
-  }
+<dialog
+  class="search"
+  id="search"
+  onclick={`event.target === this && this.close()`}
+>
+  <Element class:list="search-container">
+    <Element class:list="search-content">
+      <Input
+        class:list="search-input"
+        placeholder="Search"
+        icon="search"
+      />
+      <Element class:list="search-list">
+        {
+          pages.map(({ slug, data }) => (
+            <Element
+              as="a"
+              href={getHref(slug)}
+              class="search-item hide"
+            >
+              <Heading
+                text={data.title}
+                as="h6"
+                size="md"
+              />
+              <Paragraph
+                set:text={'description' in data ? data.description : undefined}
+              />
+            </Element>
+          ))
+        }
+      </Element>
+    </Element>
+  </Element>
+</dialog>
 
-  @media (max-width: 1023.999px) {
-    .search,
-    #search,
-    #search-button {
-      display: none !important;
-    }
-  }
+<style is:global>
+  @layer fulldev {
+    .search {
+      @apply container h-full w-full max-w-screen-md rounded-lg !border-none bg-transparent py-24 outline-none backdrop:bg-black/50;
 
-  .dialog div {
-    width: 100%;
-  }
+      &:is(.dark &) {
+        color-scheme: dark;
+      }
 
-  .pagefind-ui__search-input {
-    outline: none !important;
-    border: 1px solid var(--base-7);
-    color: var(--base-11);
+      .search-container {
+        @apply w-full overflow-hidden rounded-lg border bg-background shadow-md;
+      }
 
-    &::placeholder {
-      color: var(--base-11);
-    }
+      .search-content {
+        @apply max-h-[400px] w-full overflow-y-auto;
+      }
 
-    &:hover {
-      outline: none;
-    }
+      .input {
+        @apply m-5;
+      }
 
-    &:focus {
-      outline: none;
-      box-shadow: inset 0 0 0 2px var(--base-8);
-      border-color: var(--base-8);
-    }
-  }
+      .search-list {
+        @apply flex h-full w-full shrink grow-0 flex-col;
+      }
+
+      .search-item {
+        @apply border-t p-5 transition-colors hover:bg-accent;
 
-  .pagefind-ui__search-clear {
-    background: transparent !important;
+        &.hide {
+          @apply hidden;
+        }
+      }
+
+      .paragraph {
+        @apply mt-2 truncate text-sm text-muted-foreground;
+      }
+    }
   }
 </style>

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
@@ -26,6 +26,7 @@ const {
 
 <Element
   class:list="select"
+  show={options}
   as="label"
   for={id}
   {size}
@@ -38,7 +39,6 @@ const {
   <Element
     class:list="select-select"
     as="select"
-    if={id}
     {id}
     {name}
     {...rest}

package/src/components/Sidebar.astro

@@ -1,94 +1,43 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import Logo from 'fulldev-ui/components/Logo.astro'
-import Menu from 'fulldev-ui/components/Menu.astro'
-import Themer from 'fulldev-ui/components/Themer.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Heading from './Heading.astro'
-import Toc from './Toc.astro'
+import Menus from 'fulldev-ui/components/Menus.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
 
-interface Props extends GlobalProps, HTMLAttributes<'aside'> {
-  menu?: ComponentProps<typeof Menu>['groups']
-  heading?: ComponentProps<typeof Heading>['text']
-  render?: ComponentProps<typeof Toc>['render']
-  logo?: ComponentProps<typeof Logo>
-  toc?: ComponentProps<typeof Toc>['heading']
-  company?: ComponentProps<typeof Logo>['company']
-  themer?: boolean | undefined
-  size?: 'sm' | 'md' | 'lg' | undefined
-}
+interface Props extends HTMLAttributes<'aside'>, BlockSchema {}
 
-const {
-  size = 'sm',
-  logo,
-  company,
-  render,
-  menu,
-  toc,
-  heading,
-  themer,
-  ...rest
-} = Astro.props
+const { menus, ...rest } = Astro.props
 ---
 
 <Element
   class:list="sidebar"
   as="aside"
-  {size}
   {...rest}
 >
-  <Element
-    class:list="sidebar-header"
-    as="header"
-  >
-    <Logo
-      {company}
-      {size}
-      {...logo}
-    />
-    <Heading
-      level={4}
-      text={heading}
-    />
-    <slot name="header" />
-  </Element>
-  <Element class:list="sidebar-content">
-    <Menu
-      groups={menu}
-      {size}
-    />
-    <Themer
-      if={themer}
-      {size}
-    />
-    <slot />
-  </Element>
+  <Menus
+    size="sm"
+    menu={rest}
+    {menus}
+  />
 </Element>
 
-<style is:global>
+<!-- <style is:global>
   @layer fulldev {
     .sidebar {
-      @apply sticky bottom-0 z-10 hidden h-full flex-col items-start justify-start bg-background 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;
 
-      --height: calc(var(--header-height, 0px) + var(--subheader-height, 0px));
-      top: var(--height);
+      --headers: calc(var(--header-height, 0px) + var(--subheader-height, 0px));
+      top: var(--headers);
       width: var(--sidebar-width);
-      max-height: calc(100vh - var(--height));
+      height: calc(100vh - var(--headers));
 
       &,
       & ~ * {
-        --sidebar-width: 13rem;
-      }
-
-      .sidebar-header {
-        @apply sticky flex h-14 w-full items-center px-gutter py-6;
-      }
-
-      .sidebar-content {
-        @apply flex w-full flex-1 flex-col items-start gap-7 overflow-y-auto px-gutter pb-14 pt-6 first:pt-14;
-        @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
+        @media (min-width: 1024px) {
+          --sidebar-width: 14rem;
+        }
       }
     }
   }
-</style>
+</style> -->

package/src/components/Social.astro

@@ -4,7 +4,14 @@ import Button from 'fulldev-ui/components/Button.astro'
 
 interface Props extends ComponentProps<typeof Button> {}
 
-const { variant = 'secondary', icon, href, ...rest } = Astro.props
+const {
+  variant = 'ghost',
+  target = '_blank',
+  size = 'sm',
+  icon,
+  href,
+  ...rest
+} = Astro.props
 
 const platform = () => {
   if (typeof href !== 'string') return
@@ -22,9 +29,11 @@ const platform = () => {
 ---
 
 <Button
-  class:list={'social'}
+  class:list="social"
   icon={icon ?? 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);