fulldev-ui 0.5.0-beta.9 → 0.6.0-beta-4

package/src/components/Sidebar.astro

@@ -1,100 +1,77 @@
 ---
-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/experimental/Logo.astro'
-import Menu from 'fulldev-ui/components/Menu.astro'
-import ThemeSelect from 'fulldev-ui/components/ThemeSelect.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import type { SidebarSchema } from 'fulldev-ui/schemas/components/sidebar'
 import Heading from './Heading.astro'
-import Toc from './Toc.astro'
+import Link from './Link.astro'
 
-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']
-  themeselect?: boolean | undefined
-}
+interface Props extends HTMLAttributes<'aside'>, SidebarSchema {}
 
-const {
-  size = 'sm',
-  logo,
-  company,
-  render,
-  themeselect,
-  menu,
-  toc,
-  heading,
-  ...rest
-} = Astro.props
+const { company, logo, menus, links, heading, themer, ...rest } = Astro.props
 ---
 
 <Element
   class:list="sidebar"
   as="aside"
-  {size}
   {...rest}
 >
-  <Element
-    class:list="sidebar-header"
-    as="header"
-  >
-    <Logo
-      {company}
-      {...logo}
-    />
-    <Heading
-      level={4}
-      text={heading}
-    />
-    <slot name="header" />
-  </Element>
-  <Element class:list="sidebar-content">
-    <Menu groups={menu} />
-    <ThemeSelect if={themeselect} />
-    <slot />
+  <Element class:list="sidebar-links">
+    {
+      links?.map((link) => (
+        <Link
+          variant="muted"
+          size="sm"
+          {...link}
+        />
+      ))
+    }
   </Element>
+  {
+    menus?.map(({ heading, links }) => (
+      <Element class:list="sidebar-menu">
+        <Heading
+          text={heading}
+          size="sm"
+          as="h6"
+        />
+        <Element class:list="sidebar-links">
+          {links?.map((link) => (
+            <Link
+              variant="muted"
+              size="sm"
+              {...link}
+            />
+          ))}
+        </Element>
+      </Element>
+    ))
+  }
 </Element>
 
-<style lang="scss" is:global>
+<style is:global>
   @layer fulldev {
     .sidebar {
-      display: none;
+      @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 scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
 
-      @media (min-width: 1024px) {
-        display: flex;
-        position: sticky;
-        top: var(--header-height, 0px);
-        bottom: 0;
-        flex-shrink: 0;
-        flex-direction: column;
-        justify-content: flex-start;
-        z-index: 10;
-        border-right: 1px solid var(--color-a6);
-        width: calc(var(--space-7) * 4);
-        height: calc(100vh - var(--header-height, 0px));
+      --headers: calc(var(--header-height, 0px) + var(--subheader-height, 0px));
+      top: var(--headers);
+      width: var(--sidebar-width);
+      height: calc(100vh - var(--headers));
 
-        .sidebar-header {
-          display: flex;
-          position: sticky;
-          align-items: center;
-          border-bottom: 1px solid var(--color-a6);
-          padding: 0 var(--gutter);
-          width: 100%;
-          height: 56px;
+      &,
+      & ~ * {
+        @media (min-width: 1024px) {
+          --sidebar-width: 14rem;
         }
+      }
 
-        .sidebar-content {
-          display: flex;
-          top: 0;
-          flex: 1;
-          flex-direction: column;
-          padding: var(--space-md-6) var(--gutter);
-          width: 100%;
-          overflow-y: auto;
-        }
+      .sidebar-menu {
+        @apply flex flex-col gap-3;
+      }
+
+      .sidebar-links {
+        @apply flex flex-col gap-2;
       }
     }
   }

package/src/components/Social.astro

@@ -4,7 +4,13 @@ import Button from 'fulldev-ui/components/Button.astro'
 
 interface Props extends ComponentProps<typeof Button> {}
 
-const { variant = 'secondary', icon, href } = Astro.props
+const {
+  variant = 'secondary',
+  target = '_blank',
+  icon,
+  href,
+  ...rest
+} = Astro.props
 
 const platform = () => {
   if (typeof href !== 'string') return
@@ -16,20 +22,16 @@ const platform = () => {
   if (href.includes('tiktok')) return 'brand-tiktok'
   if (href.includes('twitch')) return 'brand-twitch'
   if (href.includes('github')) return 'brand-github'
+  if (href.includes('discord')) return 'brand-discord'
   return undefined
 }
 ---
 
 <Button
-  class:list={'social'}
+  class:list="social"
   icon={icon ?? platform()}
   {variant}
   {href}
+  {target}
+  {...rest}
 />
-
-<style is:global lang="scss">
-  .social {
-    padding: 0 var(--space-3);
-    height: calc(var(--text-2) + 2 * var(--space-3));
-  }
-</style>

package/src/components/Socials.astro

@@ -9,29 +9,33 @@ interface Props extends GlobalProps, HTMLAttributes<'div'> {
   socials?: ComponentProps<typeof Social>['href'][] | undefined
 }
 
-const { socials, variant, ...rest } = Astro.props
+const { variant = 'ghost', socials, size, ...rest } = Astro.props
 ---
 
 <Element
   class:list="socials"
+  {variant}
   {...rest}
 >
   {
     socials?.map((social) => (
       <Social
         {variant}
+        {size}
         href={social}
       />
     ))
   }
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .socials {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--space-2);
+      @apply flex gap-2;
+
+      &.variant-ghost {
+        @apply gap-0;
+      }
     }
   }
 </style>

package/src/components/Subheader.astro

@@ -0,0 +1,59 @@
+---
+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'> {
+  dark?: boolean | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
+  links?: ComponentProps<typeof Links>['links']
+}
+
+const { size = 'sm', links, ...rest } = Astro.props
+---
+
+<Element
+  class:list={['subheader']}
+  as="subheader"
+  {size}
+  {...rest}
+>
+  <Element class:list="subheader-container">
+    <Links
+      class:list="subheader-links"
+      {size}
+      {links}
+    />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .subheader {
+      @apply sticky left-0 top-0 z-20 flex h-11 items-center overflow-hidden bg-card max-lg:hidden;
+
+      top: var(--header-height);
+
+      .subheader-container {
+        @apply container flex w-full items-center gap-6;
+      }
+
+      .subheader-links {
+        @apply w-full justify-between;
+      }
+
+      &,
+      & ~ * {
+        --subheader-height: 2.75rem;
+      }
+
+      @media (max-width: 1023.999px) {
+        &,
+        & ~ * {
+          --subheader-height: 0px;
+        }
+      }
+    }
+  }
+</style>

package/src/components/Switch.astro

@@ -1,48 +1,91 @@
 ---
-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 type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  true?: string | undefined
-  false?: string | undefined
-  trueLabel?: string | undefined
-  falseLabel?: string | undefined
-  name: string
-  checked: boolean
+interface Props extends GlobalProps, Omit<HTMLAttributes<'input'>, 'type'> {
+  label?: ComponentProps<typeof Label>['text']
 }
 
-const { name, checked, trueLabel, falseLabel, ...rest } = Astro.props
+const { label, name = label, id = name, size = 'md', ...rest } = Astro.props
 ---
 
 <Element
   class:list="switch"
-  {...rest}
+  as="label"
+  for={id}
+  {size}
 >
-  <Label
-    for={name}
-    set:html={falseLabel}
+  <Element
+    class:list="switch-input"
+    as="input"
+    type="checkbox"
+    if={id}
+    {id}
+    {name}
+    {...rest}
+  />
+  <Element
+    as="label"
+    for={id}
+    if={id}
+    class="switch-mark"
   />
-  <label
-    for={name}
-    class="switch-element"
-  >
-    <input
-      {checked}
-      name={name}
-      type="checkbox"
-      class="checkbox"
-    />
-    <div class="checkmark"></div>
-  </label>
   <Label
-    for={name}
-    set:html={trueLabel}
+    for={id}
+    text={label}
+    {size}
   />
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
+  @layer fulldev {
+    .switch {
+      @apply flex items-center gap-2;
+
+      .switch-input {
+        @apply hidden opacity-0;
+      }
+
+      .switch-mark {
+        @apply relative block cursor-pointer rounded-full bg-input transition;
+
+        &::before {
+          @apply block h-full w-1/2 rounded-full border-2 border-input bg-background transition content-[''];
+        }
+      }
+
+      .switch-input:checked ~ .switch-mark {
+        @apply bg-primary;
+
+        &::before {
+          @apply translate-x-full border-primary;
+        }
+      }
+
+      &.size-sm {
+        .switch-mark {
+          @apply h-5 w-10;
+        }
+      }
+
+      &.size-md {
+        .switch-mark {
+          @apply h-6 w-12;
+        }
+      }
+
+      &.size-lg {
+        .switch-mark {
+          @apply h-7 w-14;
+        }
+      }
+    }
+  }
+</style>
+
+<!-- <style is:global>
   @layer fulldev {
     .switch {
       display: flex;
@@ -105,4 +148,4 @@ const { name, checked, trueLabel, falseLabel, ...rest } = Astro.props
       }
     }
   }
-</style>
+</style> -->

package/src/components/Table.astro

@@ -41,7 +41,7 @@ const { header, body, footer, ...rest } = Astro.props
   </Element>
 </Element>
 
-<style is:global lang="scss">
+<style is:global >
   @layer fulldev {
     .table {
       box-shadow: 0 0 0 1px var(--color-6);

package/src/components/Tagline.astro

@@ -1,32 +1,50 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import type { TaglineSchema } from 'fulldev-ui/schemas/components/tagline'
 
-interface Props extends GlobalProps, HTMLAttributes<'span'> {
-  text?: string | undefined
+interface Props extends HTMLAttributes<'p'>, TaglineSchema {
+  as?: HTMLTag
+  muted?: boolean | undefined
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined
 }
 
-const { text, ...rest } = Astro.props
+const { as = 'p', text, ...rest } = Astro.props
 ---
 
 <Element
-  class:list="tagline"
-  as="span"
+  class:list="text"
+  {as}
   {...rest}
 >
+  <Fragment set:html={text} />
   <slot />
-  <Fragment set:text={text} />
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .tagline {
-      color: var(--color-11);
-      font-size: var(--text-2);
-      line-height: 1;
-      text-align: left;
-      white-space: nowrap;
+      @apply font-semibold leading-tight text-primary;
+
+      &.size-xs {
+        @apply text-xs;
+      }
+
+      &.size-sm {
+        @apply text-sm;
+      }
+
+      &.size-md {
+        @apply text-base;
+      }
+
+      &.size-lg {
+        @apply text-lg;
+      }
+
+      &.size-xl {
+        @apply text-xl;
+      }
     }
   }
 </style>

package/src/components/Textarea.astro

@@ -9,83 +9,73 @@ interface Props extends GlobalProps, HTMLAttributes<'textarea'> {
 }
 
 const {
-  placeholder,
-  name = placeholder,
   label,
-  rows,
-  value,
-  disabled,
-  required,
+  placeholder,
+  name = label || placeholder,
+  id = name,
+  size = 'md',
+  rows = 3,
   ...rest
 } = Astro.props
 ---
 
 <Element
   class:list="textarea"
-  {...rest}
+  as="label"
+  for={id}
+  {size}
 >
   <Label
     for={name}
-    set:html={label}
+    text={label}
+    {size}
   />
   <Element
+    class:list="textarea-textarea"
     as="textarea"
-    if={name}
-    id={name}
+    if={id}
+    {id}
     {name}
     {placeholder}
-    {value}
-    {disabled}
-    {required}
     {rows}
+    {...rest}
   />
 </Element>
 
-<style is:global lang="scss">
-  @layer fulldev {
+<style is:global>
+  @layer textarea {
     .textarea {
-      display: flex;
-      position: relative;
-      flex-direction: column;
-      gap: var(--space-1);
-      width: 100%;
+      @apply relative flex flex-col gap-1.5;
 
-      textarea {
-        display: flex;
-        position: relative;
-        align-items: center;
-        outline: none;
-        border: 1px solid var(--color-6);
-        border-radius: var(--radius-1);
-        background-color: transparent;
-        padding: var(--space-4);
-        width: 100%;
-        height: calc((var(--text-2) + 2 * var(--space-4)) * 2);
-        min-height: calc((var(--text-2) + 2 * var(--space-4)) * 2);
-        resize: vertical;
-        color: var(--color-11);
-        font-weight: 400;
-        font-size: var(--text-2);
-        line-height: 1.25;
+      .textarea-textarea {
+        @apply flex w-full resize-y rounded-md border border-input bg-background text-sm ring-offset-background;
+        @apply file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground;
+        @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+        @apply disabled:pointer-events-none disabled:opacity-50;
+        @apply [&[readonly]]:pointer-events-none;
+      }
 
-        &::placeholder {
-          color: var(--color-11);
-        }
+      &.size-sm {
+        @apply gap-1;
 
-        &:hover {
-          outline: none;
+        .textarea-textarea {
+          @apply min-h-9 px-2.5 py-1.5 text-xs;
         }
+      }
+
+      &.size-md {
+        @apply gap-1.5;
 
-        &:focus {
-          outline: none;
-          box-shadow: inset 0 0 0 2px var(--color-7);
-          border-color: var(--color-7);
+        .textarea-textarea {
+          @apply min-h-10 px-3 py-2 text-sm;
         }
+      }
+
+      &.size-lg {
+        @apply gap-2;
 
-        &:disabled {
-          opacity: 50%;
-          cursor: not-allowed;
-          pointer-events: none;
+        .textarea-textarea {
+          @apply min-h-12 px-3.5 py-2.5 text-base;
         }
       }
     }

package/src/components/Themer.astro

@@ -0,0 +1,76 @@
+---
+import Button from './Button.astro'
+import Icon from './Icon.astro'
+
+interface Props {
+  if?: any
+  size?: any
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | undefined
+}
+
+const { variant = 'secondary', ...rest } = Astro.props
+---
+
+<Button
+  class="themer"
+  {variant}
+  {...rest}
+>
+  <Icon
+    class="themer-light-icon"
+    name="sun"
+  />
+  <Icon
+    class="themer-dark-icon"
+    name="moon"
+  />
+  <select class="themer-select">
+    <option value="light">Light</option>
+    <option value="dark">Dark</option>
+    <option
+      value="system"
+      selected
+    >
+      System
+    </option>
+  </select>
+</Button>
+
+<script>
+  import { navigate } from 'astro:transitions/client'
+
+  function init(document: Document) {
+    document.querySelectorAll('.themer select').forEach((select) => {
+      select.addEventListener('change', (event) => {
+        if (event.target instanceof HTMLSelectElement) {
+          localStorage.setItem('theme', event.target.value)
+          navigate(window.location.href)
+        }
+      })
+    })
+  }
+
+  init(document)
+
+  document.addEventListener('astro:before-swap', (event) => {
+    init(event.newDocument)
+  })
+</script>
+
+<style is:global>
+  .themer {
+    @apply relative px-0;
+
+    .themer-select {
+      @apply absolute inset-0 cursor-pointer appearance-none opacity-0;
+    }
+  }
+
+  html.dark .themer-light-icon {
+    display: none;
+  }
+
+  html:not(.dark) .themer-dark-icon {
+    display: none;
+  }
+</style>