fulldev-ui 0.4.29 → 0.5.0-beta.1

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>

package/src/components/Toc.astro

@@ -1,74 +1,131 @@
 ---
-import Column from 'fulldev-ui/components/Column.astro'
-import Link from 'fulldev-ui/components/Link.astro'
-import Card from './Card.astro'
-import Heading from './Heading.astro'
+import type { HTMLAttributes } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import Button from 'fulldev-ui/components/Button.astro'
+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'
 
-const { toc, headings } = Astro.props
+interface Props extends GlobalProps, HTMLAttributes<'aside'> {
+  render?: CollectionEntry<'pages'>['render'] | undefined
+}
+
+const { size = 'sm', render } = Astro.props
+
+const headings = render ? (await render())?.headings : []
+const filteredHeadings = headings?.filter(
+  (heading: any) => heading.depth >= 2 && heading.depth <= 4
+)
 ---
 
-<Column
+<input
+  id="toc"
+  class="toc-checkbox"
+  type="checkbox"
+/>
+
+<Element
   class:list="toc"
   as="aside"
+  {size}
 >
   {
-    toc?.length && headings?.length > 0 && (
+    filteredHeadings?.length > 0 && (
       <>
         <Heading
           text="On this page"
           level={6}
         />
-        {headings.map(
-          (heading: { slug: string; depth: number; text: string }) => (
-            <Link
+        <nav class="toc-nav">
+          <Button
+            variant="link"
+            href={`#${filteredHeadings[0]?.slug}`}
+            text="Overview"
+            class="toc-link toc-link-h2"
+          />
+          {filteredHeadings.map((heading: any) => (
+            <Button
+              variant="link"
               href={`#${heading.slug}`}
-              class="toc-link"
               text={heading.text}
+              class={`toc-link toc-link-h${heading.depth}`}
             />
-          )
-        )}
-        <Card
-          size="sm"
-          frame="panel"
-          heading="Join our community Discord"
-          text="Get help, share your work and shape the future of fulldev-ui."
-          buttons={[
-            {
-              icon: 'brand-discord',
-              text: 'Join discord',
-              contrast: true,
-              href: '/discord',
-              size: 'sm',
-            },
-          ]}
-        />
+          ))}
+        </nav>
       </>
     )
   }
-</Column>
+</Element>
 
 <style lang="scss" is:global>
   @layer fulldev {
+    .toc-checkbox {
+      display: none;
+    }
+
+    @media (max-width: 1023.999px) {
+      body:has(.toc-checkbox:checked) {
+        overflow: hidden;
+      }
+    }
+
     .toc {
-      display: none !important;
-      box-sizing: border-box;
-      border-left: 1px solid var(--color-a6);
-      padding: var(--space-6) 0 var(--space-6)
-        min(var(--space-5), var(--gutter));
-      height: 100vh;
-      max-height: 100vh;
+      --toc-width: 240px;
+
+      display: none;
+      position: fixed;
+      top: var(--header-height, 0px);
+      right: 0;
+      flex-shrink: 0;
+      flex-direction: column;
+      justify-content: flex-start;
+      gap: calc(var(--space-4) + var(--space-1));
+      z-index: 10;
+      border-left-width: 1px;
+      border-style: solid;
+      border-color: var(--color-a6);
+      background-color: var(--color-background);
+      padding: var(--space-md-6) var(--gutter);
+      width: 100%;
+      max-height: calc(100vh - var(--header-height, 0px));
       overflow-y: auto;
 
-      .toc-link {
-        font-size: var(--text-2);
+      &:is(.toc-checkbox:checked + &) {
+        display: flex;
       }
 
       @media (min-width: 1024px) {
-        display: flex !important;
+        display: flex;
+        position: sticky;
+        border-left-width: 1px;
+        width: var(--toc-width);
+      }
+
+      .button + .heading {
+        margin-top: var(--space-5);
+      }
+
+      .toc-nav {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .toc-link {
+        text-align: left;
+      }
+
+      .toc-link-h2 {
+        margin-top: var(--space-3);
+      }
+
+      .toc-link-h3 {
+        margin-top: var(--space-3);
+        margin-left: var(--space-4);
       }
 
-      .card .icon {
-        color: var(--base-1);
+      .toc-link-h4 {
+        margin-top: var(--space-2);
+        margin-left: var(--space-5);
       }
     }
   }

package/src/components/Writeup.astro

@@ -0,0 +1,90 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Badge from 'fulldev-ui/components/Badge.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import List from 'fulldev-ui/components/List.astro'
+import Price from 'fulldev-ui/components/Price.astro'
+import Rating from 'fulldev-ui/components/Rating.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Text from 'fulldev-ui/components/Text.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  level?: ComponentProps<typeof Heading>['level']
+  badge?: ComponentProps<typeof Badge> | undefined
+  tagline?: ComponentProps<typeof Tagline>['text']
+  heading?: ComponentProps<typeof Heading>['text']
+  text?: ComponentProps<typeof Text>['text']
+  list?: ComponentProps<typeof List>['items']
+  align?: 'start' | 'center' | 'end' | undefined
+  price?: ComponentProps<typeof Price>['value']
+  rating?:
+    | ComponentProps<typeof Rating>
+    | ComponentProps<typeof Rating>['value']
+}
+
+const {
+  level = 2,
+  rating,
+  badge,
+  tagline,
+  heading,
+  text,
+  list,
+  price,
+  ...rest
+} = Astro.props
+---
+
+<Element
+  class:list="writeup"
+  {...rest}
+>
+  <slot>
+    <Rating
+      color="brand"
+      {...typeof rating === 'number' ? { value: rating } : rating}
+    />
+    <Tagline text={tagline} />
+    <Badge {...badge} />
+    <Heading
+      {level}
+      text={heading}
+    />
+    <Text
+      lead={level === 1}
+      text={text}
+    />
+    <List items={list} />
+    <Price value={price} />
+  </slot>
+</Element>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .writeup {
+      display: flex;
+      position: relative;
+      flex-direction: column;
+      align-items: inherit;
+      gap: var(--space-3);
+      text-align: inherit;
+
+      &.align-start {
+        align-items: flex-start;
+        text-align: left;
+      }
+
+      &.align-center {
+        align-items: center;
+        text-align: center;
+      }
+
+      &.align-end {
+        align-items: flex-end;
+        text-align: right;
+      }
+    }
+  }
+</style>