fulldev-ui 0.4.28 → 0.5.0-beta.0

package/src/components/Sidebar.astro

@@ -1,73 +1,139 @@
 ---
-import { getCollection } from 'astro:content'
-import Column from 'fulldev-ui/components/Column.astro'
+import type { HTMLAttributes } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Logo from 'fulldev-ui/components/experimental/Logo.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
-import Link from 'fulldev-ui/components/Link.astro'
+import Search from 'fulldev-ui/components/Search.astro'
+import ThemeSelect from 'fulldev-ui/components/ThemeSelect.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-const { sidebar } = Astro.props
-const slug = Astro.url.pathname.replace(/^\/|\/$/g, '')
-const url = Astro.url.href
+interface Props extends GlobalProps, HTMLAttributes<'aside'> {
+  size?: 'sm' | 'md' | 'lg' | undefined
+  search?: boolean | undefined
+  logo?: string | undefined
+  buttons?: any[] | undefined
+  open?: boolean | undefined
+}
+
+const { size = 'sm', open = false, logo, buttons, search } = Astro.props
 ---
 
-<Column
-  as="aside"
+<input
+  id="sidebar"
+  class="sidebar-checkbox"
+  type="checkbox"
+/>
+
+<Element
   class:list="sidebar"
+  as="aside"
+  {size}
+  {open}
 >
-  {
-    sidebar?.length > 0 &&
-      sidebar.map((item: any) => (
+  <Logo {logo} />
+  {search && <Search />}
+  <Element class:list="buttons">
+    {
+      buttons?.map(({ heading, slug, href, text, buttons }) => (
         <>
           <Heading
             level={6}
-            set:html={item.heading}
+            text={heading}
+          />
+          <Button
+            variant="link"
+            {slug}
+            {href}
+            {text}
           />
-          {item.links?.map((link: any) => (
-            <Link
-              {...link}
-              class="sidebar-link"
-              color={url.endsWith(link.href) ? 'brand' : undefined}
+          {buttons?.map((button: any) => (
+            <Button
+              variant="link"
+              {...button}
             />
           ))}
-          {item.folder &&
-            (async () => {
-              const pages = await getCollection(
-                'pages',
-                (entry: any) =>
-                  entry.slug.startsWith(item.folder) &&
-                  !entry.slug.endsWith(item.folder)
-              )
-              return pages.map((page: any) => (
-                <Link
-                  href={`/${page.slug}`}
-                  class="sidebar-link"
-                  color={slug === page.slug ? 'brand' : undefined}
-                  set:html={page.data.title}
-                />
-              ))
-            })()}
         </>
       ))
-  }
-</Column>
+    }
+    <ThemeSelect />
+  </Element>
+</Element>
 
 <style lang="scss" is:global>
   @layer fulldev {
+    .sidebar-checkbox {
+      display: none;
+    }
+
+    @media (max-width: 1023.999px) {
+      body:has(.sidebar-checkbox:checked) {
+        overflow: hidden;
+      }
+    }
+
     .sidebar {
-      display: none !important;
-      box-sizing: border-box;
-      border-right: 1px solid var(--color-a6);
-      padding: var(--space-6) min(var(--space-5), var(--gutter)) var(--space-6)
-        0;
-      height: 100vh;
-      max-height: 100vh;
+      --sidebar-width: 240px;
+
+      display: none;
+      position: fixed;
+      top: var(--header-height, 0px);
+      bottom: 0;
+      left: 0;
+      flex-shrink: 0;
+      flex-direction: column;
+      justify-content: flex-start;
+      z-index: 10;
+      border-style: solid;
+      border-color: var(--color-a6);
+      background-color: var(--base-2);
+      padding: var(--space-md-5) var(--gutter);
+      width: 100%;
+      height: calc(100vh - var(--header-height, 0px));
       overflow-y: auto;
 
-      .sidebar-link {
-        font-size: var(--text-2);
+      &:is(.sidebar-checkbox:checked + &) {
+        display: flex;
       }
 
       @media (min-width: 1024px) {
-        display: flex !important;
+        border-right-width: 1px;
+        padding: var(--space-md-6) var(--gutter);
+        width: var(--sidebar-width);
+
+        &.open {
+          display: flex;
+          position: sticky;
+        }
+      }
+
+      .buttons {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--space-4) + var(--space-1));
+
+        .theme-select {
+          margin-top: var(--space-5);
+        }
+
+        .button + .heading {
+          margin-top: var(--space-5);
+        }
+      }
+
+      .logo {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: var(--gutter);
+        align-items: center;
+        height: 56px;
+      }
+    }
+
+    @media (min-width: 1024px) {
+      .header:not(.open) ~ .core .sidebar .logo {
+        display: flex;
       }
     }
   }

package/src/components/Social.astro

@@ -0,0 +1,28 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+
+interface Props extends ComponentProps<typeof Button> {}
+
+const { variant = 'secondary', icon, href } = Astro.props
+
+const platform = () => {
+  if (typeof href !== 'string') return
+  if (href.includes('x.com')) return 'brand-x'
+  if (href.includes('facebook')) return 'brand-facebook'
+  if (href.includes('instagram')) return 'brand-instagram'
+  if (href.includes('linkedin')) return 'brand-linkedin'
+  if (href.includes('youtube')) return 'brand-youtube'
+  if (href.includes('tiktok')) return 'brand-tiktok'
+  if (href.includes('twitch')) return 'brand-twitch'
+  if (href.includes('github')) return 'brand-github'
+  return undefined
+}
+---
+
+<Button
+  class:list={'social'}
+  icon={icon ?? platform()}
+  {variant}
+  {href}
+/>

package/src/components/Socials.astro

@@ -0,0 +1,37 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+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
+}
+
+const { socials, variant, ...rest } = Astro.props
+---
+
+<Element
+  class:list="socials"
+  {...rest}
+>
+  {
+    socials?.map((social) => (
+      <Social
+        {variant}
+        href={social}
+      />
+    ))
+  }
+</Element>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .socials {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--space-2);
+    }
+  }
+</style>

package/src/components/Switch.astro

@@ -1,32 +1,23 @@
 ---
-import type { Polymorphic } 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 Root from 'fulldev-ui/components/Root.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-type Props<As extends 'div'> = Polymorphic<{ as: As }> & {
-  color?: 'base' | 'brand'
-  true?: string
-  false?: string
-  trueLabel?: string
-  falseLabel?: string
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  true?: string | undefined
+  false?: string | undefined
+  trueLabel?: string | undefined
+  falseLabel?: string | undefined
   name: string
   checked: boolean
 }
 
-const {
-  as = 'div',
-  name,
-  checked,
-  trueLabel,
-  falseLabel,
-  ...rest
-} = Astro.props
+const { name, checked, trueLabel, falseLabel, ...rest } = Astro.props
 ---
 
-<Root
-  structure="row"
+<Element
   class:list="switch"
-  {as}
   {...rest}
 >
   <Label
@@ -49,11 +40,12 @@ const {
     for={name}
     set:html={trueLabel}
   />
-</Root>
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
     .switch {
+      display: flex;
       position: relative;
       align-items: center;
       gap: var(--space-1);
@@ -62,7 +54,7 @@ const {
       .switch-element {
         display: block;
         position: relative;
-        transition: var(--transition);
+        transition: all;
         cursor: pointer;
         box-sizing: border-box;
         border: 1px solid var(--border);
@@ -84,7 +76,7 @@ const {
 
         .checkmark {
           transform: 0%;
-          transition: var(--transition);
+          transition: all;
           border-radius: 999px;
           background-color: var(--base-1);
           width: 50%;

package/src/components/Table.astro

@@ -1,50 +1,45 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
-import Root from 'fulldev-ui/components/Root.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-type Props = HTMLAttributes<'table'> & {
-  color?: 'base' | 'brand'
-  size?: 'sm' | 'md' | 'lg'
-  header?: string[]
-  body?: string[][]
-  footer?: string[]
-  radius?: 'none' | 'auto'
+interface Props extends GlobalProps, HTMLAttributes<'table'> {
+  header?: string[] | undefined
+  body?: string[][] | undefined
+  footer?: string[] | undefined
 }
 
-const { header, body, footer, radius = 'auto', ...rest } = Astro.props
+const { header, body, footer, ...rest } = Astro.props
 ---
 
-<Root
+<Element
   class:list="table"
   {...rest}
 >
-  <Root
-    as="table"
-    {radius}
-  >
-    <Root as="thead">
-      <Root as="tr">
+  <Element as="table">
+    <Element as="thead">
+      <Element as="tr">
         {header?.map((cell) => <th>{cell}</th>)}
-      </Root>
-    </Root>
-    <Root as="tbody">
+      </Element>
+    </Element>
+    <Element as="tbody">
       {
         body?.map((row: string[]) => (
-          <Root as="tr">
+          <Element as="tr">
             {row?.map((cell) => (
               <td>{cell}</td>
             ))}
-          </Root>
+          </Element>
         ))
       }
-    </Root>
-    <Root as="tfoot">
-      <Root as="tr">
+    </Element>
+    <Element as="tfoot">
+      <Element as="tr">
         {footer?.map((cell) => <td>{cell}</td>)}
-      </Root>
-    </Root>
-  </Root>
-</Root>
+      </Element>
+    </Element>
+  </Element>
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
@@ -61,14 +56,6 @@ const { header, body, footer, radius = 'auto', ...rest } = Astro.props
         caption-side: bottom;
         white-space: nowrap;
 
-        &.radius-none {
-          border-radius: 0;
-        }
-
-        &.radius-auto {
-          border-radius: var(--radius-1);
-        }
-
         thead {
           background-color: var(--color-3);
 

package/src/components/Tagline.astro

@@ -1,28 +1,23 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Root from 'fulldev-ui/components/Root.astro'
+import type { HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-type Props<As extends HTMLTag = 'span'> = Polymorphic<{ as: As }> & {
-  size?: 'sm' | 'md' | 'lg'
-  color?: 'base' | 'brand'
-  contrast?: boolean
-  html?: string
-  text?: string
+interface Props extends GlobalProps, HTMLAttributes<'span'> {
+  text?: string | undefined
 }
 
-const { as = 'span', html, text, ...rest } = Astro.props
+const { text, ...rest } = Astro.props
 ---
 
-<Root
+<Element
   class:list="tagline"
-  {as}
+  as="span"
   {...rest}
 >
-  <slot>
-    <Fragment set:html={html} />
-    <Fragment set:text={text} />
-  </slot>
-</Root>
+  <slot />
+  <Fragment set:text={text} />
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {

package/src/components/Text.astro

@@ -1,31 +1,29 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Root from 'fulldev-ui/components/Root.astro'
+import type { HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-type Props<As extends HTMLTag = 'p'> = Polymorphic<{ as: As }> & {
-  size?: 'sm' | 'md' | 'lg'
-  color?: 'base' | 'brand'
-  contrast?: boolean
-  lead?: boolean
-  html?: string
-  text?: string
+interface Props extends GlobalProps, HTMLAttributes<'p'> {
+  size?: 'sm' | 'md' | 'lg' | undefined
+  color?: 'base' | 'brand' | undefined
+  theme?: 'light' | 'dark' | undefined
+  contrast?: boolean | undefined
+  lead?: boolean | undefined
+  text?: string | undefined
 }
 
-const { as = 'p', color = 'base', html, text, ...rest } = Astro.props
+const { color = 'base', text, ...rest } = Astro.props
 ---
 
-<Root
+<Element
   class:list="text"
-  {as}
-  {html}
+  as="p"
   {color}
   {...rest}
 >
-  <slot>
-    <Fragment set:html={html} />
-    <Fragment set:text={text} />
-  </slot>
-</Root>
+  <slot />
+  <Fragment set:text={text} />
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
@@ -33,12 +31,12 @@ const { as = 'p', color = 'base', html, text, ...rest } = Astro.props
       margin: 0;
       max-width: calc(var(--space-4) * 44);
       color: var(--color-11);
-      font-weight: var(--font-weight);
       font-size: var(--text-3);
       line-height: 1.625;
 
       &.lead {
         font-size: var(--text-4);
+        text-wrap: balance;
       }
     }
   }

package/src/components/Textarea.astro

@@ -1,20 +1,16 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
 import Label from 'fulldev-ui/components/Label.astro'
-import Root from 'fulldev-ui/components/Root.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-type Props = HTMLAttributes<'textarea'> & {
-  radius?: 'none' | 'auto'
-  color?: 'base' | 'brand'
-  variant?: 'outline'
-  label?: string
+interface Props extends GlobalProps, HTMLAttributes<'textarea'> {
+  label?: ComponentProps<typeof Label>['text']
 }
 
 const {
   placeholder,
   name = placeholder,
-  variant = 'outline',
-  radius = 'auto',
   label,
   rows,
   value,
@@ -24,7 +20,7 @@ const {
 } = Astro.props
 ---
 
-<Root
+<Element
   class:list="textarea"
   {...rest}
 >
@@ -32,20 +28,18 @@ const {
     for={name}
     set:html={label}
   />
-  <Root
+  <Element
     as="textarea"
     if={name}
     id={name}
     {name}
-    {variant}
     {placeholder}
     {value}
     {disabled}
     {required}
     {rows}
-    {radius}
   />
-</Root>
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
@@ -74,14 +68,6 @@ const {
         font-size: var(--text-2);
         line-height: 1.25;
 
-        &.radius-none {
-          border-radius: 0;
-        }
-
-        &.radius-auto {
-          border-radius: var(--radius-1);
-        }
-
         &::placeholder {
           color: var(--color-11);
         }

package/src/components/ThemeSelect.astro

@@ -0,0 +1,38 @@
+---
+import Select from 'fulldev-ui/components/Select.astro'
+// const defaultTheme = fulldevConfig.colors.theme || 'light'
+---
+
+<Select
+  class:list="theme-select"
+  name="theme-select"
+  options={['light', 'dark']}
+  value="light"
+  onchange="localStorage.setItem('theme', this.value); window.location.reload();"
+/>
+
+<script>
+  const setOption = (document: Document) => {
+    const selects = document.querySelectorAll('.theme-select')
+    const theme = localStorage.getItem('theme') || ''
+    selects?.forEach((select) => {
+      const options = select?.querySelectorAll('option')
+      options?.forEach((option) => {
+        if (option.value === theme) option.selected = true
+        else option.selected = false
+      })
+    })
+  }
+
+  setOption(document)
+
+  document.addEventListener('astro:before-swap', (event) => {
+    setOption(event.newDocument)
+  })
+</script>
+
+<style is:global lang="scss">
+  .theme-select {
+    width: calc(1.4 * var(--space-7));
+  }
+</style>