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

package/src/components/Sidebar.astro

@@ -1,9 +1,9 @@
 ---
 import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import Logo from 'fulldev-ui/components/experimental/Logo.astro'
+import Logo from 'fulldev-ui/components/Logo.astro'
 import Menu from 'fulldev-ui/components/Menu.astro'
-import ThemeSelect from 'fulldev-ui/components/ThemeSelect.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'
@@ -15,7 +15,8 @@ interface Props extends GlobalProps, HTMLAttributes<'aside'> {
   logo?: ComponentProps<typeof Logo>
   toc?: ComponentProps<typeof Toc>['heading']
   company?: ComponentProps<typeof Logo>['company']
-  themeselect?: boolean | undefined
+  themer?: boolean | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
 }
 
 const {
@@ -23,10 +24,10 @@ const {
   logo,
   company,
   render,
-  themeselect,
   menu,
   toc,
   heading,
+  themer,
   ...rest
 } = Astro.props
 ---
@@ -43,6 +44,7 @@ const {
   >
     <Logo
       {company}
+      {size}
       {...logo}
     />
     <Heading
@@ -52,49 +54,40 @@ const {
     <slot name="header" />
   </Element>
   <Element class:list="sidebar-content">
-    <Menu groups={menu} />
-    <ThemeSelect if={themeselect} />
+    <Menu
+      groups={menu}
+      {size}
+    />
+    <Themer
+      if={themer}
+      {size}
+    />
     <slot />
   </Element>
 </Element>
 
-<style lang="scss" is:global>
+<style is:global>
   @layer fulldev {
     .sidebar {
-      display: none;
+      @apply sticky bottom-0 z-10 hidden h-full flex-col items-start justify-start bg-background lg:flex;
 
-      @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));
+      --height: calc(var(--header-height, 0px) + var(--subheader-height, 0px));
+      top: var(--height);
+      width: var(--sidebar-width);
+      max-height: calc(100vh - var(--height));
 
-        .sidebar-header {
-          display: flex;
-          position: sticky;
-          align-items: center;
-          border-bottom: 1px solid var(--color-a6);
-          padding: 0 var(--gutter);
-          width: 100%;
-          height: 56px;
-        }
+      &,
+      & ~ * {
+        --sidebar-width: 13rem;
+      }
+
+      .sidebar-header {
+        @apply sticky flex h-14 w-full items-center px-gutter py-6;
+      }
 
-        .sidebar-content {
-          display: flex;
-          top: 0;
-          flex: 1;
-          flex-direction: column;
-          padding: var(--space-md-6) var(--gutter);
-          width: 100%;
-          overflow-y: auto;
-        }
+      .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;
       }
     }
   }

package/src/components/Social.astro

@@ -4,7 +4,7 @@ import Button from 'fulldev-ui/components/Button.astro'
 
 interface Props extends ComponentProps<typeof Button> {}
 
-const { variant = 'secondary', icon, href } = Astro.props
+const { variant = 'secondary', icon, href, ...rest } = Astro.props
 
 const platform = () => {
   if (typeof href !== 'string') return
@@ -16,6 +16,7 @@ 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
 }
 ---
@@ -25,11 +26,5 @@ const platform = () => {
   icon={icon ?? platform()}
   {variant}
   {href}
+  {...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,60 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import { getEntry } from 'astro:content'
+import Avatar from 'fulldev-ui/components/Avatar.astro'
 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'
 
-interface Props extends GlobalProps, HTMLAttributes<'span'> {
+interface Props
+  extends GlobalProps,
+    HTMLAttributes<'span'>,
+    HTMLAttributes<'a'> {
+  as?: HTMLTag
+  icon?: ComponentProps<typeof Icon>['name']
+  avatar?: ComponentProps<typeof Avatar>['src']
+  slug?: CollectionEntry<'pages'>['slug'] | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
   text?: string | undefined
+  variant?: 'secondary' | 'outline' | 'link' | undefined
 }
 
-const { text, ...rest } = Astro.props
+const {
+  slug,
+  href = slug === 'index' ? '/' : slug ? `/${slug}/` : undefined,
+  text = slug ? (await getEntry('pages', slug)).data.title : undefined,
+  as = href ? 'a' : 'a',
+  target = href?.toString().startsWith('http') ? '_blank' : undefined,
+  icon,
+  ...rest
+} = Astro.props
 ---
 
 <Element
-  class:list="tagline"
-  as="span"
+  class:list={'tagline'}
+  {href}
+  {as}
+  {target}
   {...rest}
 >
   <slot />
-  <Fragment set:text={text} />
+  <Icon name={icon} />
+  <Fragment set:html={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 text-primary font-semibold;
+
+      &.size-sm {
+        @apply text-sm;
+      }
+
+      &.size-lg {
+        @apply text-lg;
+      }
     }
   }
 </style>

package/src/components/Text.astro

@@ -1,15 +1,15 @@
 ---
 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<'p'> {
+interface Props extends HTMLAttributes<'p'> {
   size?: 'sm' | 'md' | 'lg' | undefined
   color?: 'base' | 'brand' | undefined
   theme?: 'light' | 'dark' | undefined
   contrast?: boolean | undefined
   lead?: boolean | undefined
   text?: string | undefined
+  if?: any
 }
 
 const { color = 'base', text, ...rest } = Astro.props
@@ -22,10 +22,10 @@ const { color = 'base', text, ...rest } = Astro.props
   {...rest}
 >
   <slot />
-  <Fragment set:text={text} />
+  <Fragment set:html={text} />
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .text {
       margin: 0;

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>