fulldev-ui 0.3.36 → 0.4.0-beta.0

package/src/components/Select.astro

@@ -0,0 +1,144 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Icon from 'fulldev-ui/components/Icon.astro'
+import Label from 'fulldev-ui/components/Label.astro'
+import Root from 'fulldev-ui/components/Root.astro'
+
+type Props = HTMLAttributes<'select'> & {
+  color?: 'base' | 'brand'
+  label?: string
+  placeholder?: string
+  options?: string[]
+  value?: string
+  radius?: 'none' | 'auto' | 'full'
+  variant?: 'outline'
+}
+
+const {
+  label,
+  placeholder,
+  options,
+  value,
+  name,
+  required,
+  radius = 'auto',
+  disabled,
+  variant = 'outline',
+  ...rest
+} = Astro.props
+---
+
+<Root
+  class:list="select"
+  {variant}
+  {...rest}
+>
+  <Label
+    for={name}
+    html={label}
+  />
+  <Root
+    as="select"
+    if={name || options}
+    id={name}
+    {radius}
+    {name}
+    {required}
+    {disabled}
+  >
+    <Root
+      as="option"
+      value={placeholder}
+      set:html={placeholder}
+      disabled
+      selected
+    />
+    {
+      options?.map((option: any) => (
+        <Root
+          as="option"
+          selected={value === option}
+          set:html={option}
+          value={option}
+        />
+      ))
+    }
+    <slot />
+  </Root>
+  <Icon name="chevron-down" />
+</Root>
+
+<style is:global lang="scss">
+  .select {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    gap: var(--space-1);
+    width: 100%;
+
+    .icon {
+      position: absolute;
+      right: var(--space-4);
+      bottom: var(--space-4);
+      width: var(--text-2);
+      height: var(--text-2);
+      pointer-events: none;
+    }
+
+    select {
+      display: flex;
+      position: relative;
+      align-items: center;
+      appearance: none;
+      appearance: none;
+      outline: none;
+      border: 1px solid var(--color-6);
+      border-radius: var(--radius-1);
+      background-color: transparent;
+      padding-right: calc(var(--text-2) + 2 * var(--space-4));
+      padding-left: var(--space-4);
+      width: 100%;
+      min-width: var(--space-4);
+      height: calc(var(--text-2) + 2 * var(--space-4));
+      color: var(--color-11);
+      font-size: var(--text-2);
+      line-height: 1.25;
+
+      &:hover {
+        outline: none;
+      }
+
+      &:focus {
+        outline: none;
+        box-shadow: inset 0 0 0 2px var(--color-7);
+        border-color: var(--color-7);
+      }
+
+      &:disabled {
+        opacity: 50%;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      &.radius-none {
+        border-radius: 0;
+      }
+
+      &.radius-auto {
+        border-radius: var(--radius-1);
+      }
+
+      &.radius-full {
+        border-radius: 9999px;
+      }
+    }
+
+    option {
+      color: var(--text);
+      font-weight: var(--font-weight);
+      font-size: var(--text-2);
+      line-height: 1;
+      font-family: var(--font-family);
+    }
+  }
+</style>

package/src/components/Sidebar.astro

@@ -0,0 +1,71 @@
+---
+import { getCollection } from 'astro:content'
+import Column from 'fulldev-ui/components/Column.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Link from 'fulldev-ui/components/Link.astro'
+
+const { sidebar } = Astro.props
+const slug = Astro.url.pathname.replace(/^\/|\/$/g, '')
+const url = Astro.url.href
+---
+
+<Column
+  as="aside"
+  class:list="sidebar"
+>
+  {
+    sidebar?.length > 0 &&
+      sidebar.map((item: any) => (
+        <>
+          <Heading
+            level={6}
+            set:html={item.heading}
+          />
+          {item.links?.map((link: any) => (
+            <Link
+              {...link}
+              class="sidebar-link"
+              color={url.endsWith(link.href) ? 'brand' : undefined}
+            />
+          ))}
+          {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>
+
+<style lang="scss" is:global>
+  .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;
+    overflow-y: auto;
+
+    .sidebar-link {
+      font-size: var(--text-2);
+    }
+
+    @media (min-width: 1024px) {
+      display: flex !important;
+    }
+  }
+</style>

package/src/components/{structure/Split.astro → Split.astro}

@@ -1,11 +1,10 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
+import Root from 'fulldev-ui/components/Root.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
   color?: 'base' | 'brand'
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  compact?: boolean
+  size?: 'sm' | 'md' | 'lg'
   align?: 'start' | 'center' | 'end'
   space?: 'none' | 'auto'
 }
@@ -13,19 +12,17 @@ type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
 const { space = 'auto', align = 'center', ...rest } = Astro.props
 ---
 
-<Component
-  class:list={['split']}
+<Root
+  class:list="split"
   {align}
   {space}
   {...rest}
 >
   <slot />
-</Component>
+</Root>
 
 <style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('split') {
+  .split {
     display: grid;
     grid-template-columns: 1fr;
     column-gap: var(--space-6);

package/src/components/{structure/Spread.astro → Spread.astro}

@@ -1,29 +1,26 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
+import Root from 'fulldev-ui/components/Root.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
   color?: 'base' | 'brand'
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  compact?: boolean
+  size?: 'sm' | 'md' | 'lg'
   align?: 'start' | 'center' | 'end'
 }
 
 const { align = 'center', ...rest } = Astro.props
 ---
 
-<Component
-  class:list={['spread']}
+<Root
+  class:list="spread"
   {align}
   {...rest}
 >
   <slot />
-</Component>
+</Root>
 
 <style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('spread') {
+  .spread {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;

package/src/components/Switch.astro

@@ -0,0 +1,114 @@
+---
+import type { Polymorphic } from 'astro/types'
+import Label from 'fulldev-ui/components/Label.astro'
+import Root from 'fulldev-ui/components/Root.astro'
+
+type Props<As extends 'div'> = Polymorphic<{ as: As }> & {
+  color?: 'base' | 'brand'
+  true?: string
+  false?: string
+  trueLabel?: string
+  falseLabel?: string
+  name: string
+  checked: boolean
+}
+
+const {
+  as = 'div',
+  name,
+  checked,
+  trueLabel,
+  falseLabel,
+  ...rest
+} = Astro.props
+---
+
+<Root
+  structure="row"
+  class:list="switch"
+  {as}
+  {...rest}
+>
+  <Label
+    for={name}
+    set:html={falseLabel}
+  />
+  <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}
+  />
+</Root>
+
+<style is:global lang="scss">
+  .switch {
+    position: relative;
+    align-items: center;
+    gap: var(--space-1);
+    width: 100%;
+
+    .switch-element {
+      display: block;
+      position: relative;
+      transition: var(--transition);
+      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: var(--transition);
+        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

@@ -0,0 +1,121 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Root from 'fulldev-ui/components/Root.astro'
+
+type Props = HTMLAttributes<'table'> & {
+  color?: 'base' | 'brand'
+  size?: 'sm' | 'md' | 'lg'
+  header?: string[]
+  body?: string[][]
+  footer?: (string | { text: string; colspan?: string | number })[]
+  radius?: 'none' | 'auto'
+}
+
+const { header, body, footer, radius = 'auto', ...rest } = Astro.props
+---
+
+<Root
+  class="table"
+  as="table"
+  {radius}
+  {...rest}
+>
+  <Root as="thead">
+    <Root as="tr">
+      {header?.map((cell: string) => <Root as="th">{cell}</Root>)}
+    </Root>
+  </Root>
+  <Root as="tbody">
+    {
+      body?.map((row: string[]) => (
+        <Root as="tr">
+          {row.map((cell: string) => (
+            <Root as="td">{cell}</Root>
+          ))}
+        </Root>
+      ))
+    }
+  </Root>
+  <Root as="tfoot">
+    <Root as="tr">
+      {
+        footer?.map((cell) => {
+          if (typeof cell === 'string') {
+            return <Root as="td">{cell}</Root>
+          } else {
+            return (
+              <Root
+                as="td"
+                colspan={cell.colspan}
+              >
+                {cell.text}
+              </Root>
+            )
+          }
+        })
+      }
+    </Root>
+  </Root>
+</Root>
+
+<style is:global lang="scss">
+  .table {
+    display: table;
+    box-shadow: 0 0 0 1px var(--color-6);
+    border-radius: var(--radius-1);
+    border-collapse: collapse;
+    width: 100%;
+    caption-side: bottom;
+    overflow: hidden;
+
+    &.radius-none {
+      border-radius: 0;
+    }
+
+    &.radius-auto {
+      border-radius: var(--radius-1);
+    }
+
+    thead {
+      background-color: var(--color-3);
+
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--color-6);
+      }
+
+      th {
+        color: var(--color-12);
+        font-weight: 500;
+      }
+    }
+
+    tbody {
+      display: table-row-group;
+      vertical-align: middle;
+      background-color: var(--color-2);
+      unicode-bidi: isolate;
+    }
+
+    tfoot {
+      display: table-footer-group;
+      background-color: var(--color-3);
+      color: var(--color-12);
+
+      &:not(:last-child) {
+        border-top: 1px solid var(--color-6);
+      }
+    }
+
+    tr + tr {
+      border-top: 1px solid var(--color-6);
+    }
+
+    th,
+    td {
+      vertical-align: middle;
+      padding: var(--space-3) var(--space-4);
+      font-size: var(--text-2);
+      text-align: left;
+    }
+  }
+</style>

package/src/components/Tagline.astro

@@ -0,0 +1,35 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Root from 'fulldev-ui/components/Root.astro'
+
+type Props<As extends HTMLTag = 'span'> = Polymorphic<{ as: As }> & {
+  size?: 'sm' | 'md' | 'lg'
+  color?: 'base' | 'brand'
+  contrast?: boolean
+  html?: string
+  text?: string
+}
+
+const { as = 'span', html, text, ...rest } = Astro.props
+---
+
+<Root
+  class:list="tagline"
+  {as}
+  {...rest}
+>
+  <slot>
+    <Fragment set:html={html} />
+    <Fragment set:text={text} />
+  </slot>
+</Root>
+
+<style is:global lang="scss">
+  .tagline {
+    color: var(--color-11);
+    font-size: var(--text-2);
+    line-height: 1;
+    text-align: left;
+    white-space: nowrap;
+  }
+</style>

package/src/components/Text.astro

@@ -0,0 +1,43 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Root from 'fulldev-ui/components/Root.astro'
+
+type Props<As extends HTMLTag = 'p'> = Polymorphic<{ as: As }> & {
+  size?: 'sm' | 'md' | 'lg'
+  color?: 'base' | 'brand'
+  contrast?: boolean
+  lead?: boolean
+  html?: string
+  text?: string
+}
+
+const { as = 'p', color = 'base', html, text, ...rest } = Astro.props
+---
+
+<Root
+  class:list="text"
+  {as}
+  {html}
+  {color}
+  {...rest}
+>
+  <slot>
+    <Fragment set:html={html} />
+    <Fragment set:text={text} />
+  </slot>
+</Root>
+
+<style is:global lang="scss">
+  .text {
+    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);
+    }
+  }
+</style>

package/src/components/Textarea.astro

@@ -0,0 +1,105 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Label from 'fulldev-ui/components/Label.astro'
+import Root from 'fulldev-ui/components/Root.astro'
+
+type Props = HTMLAttributes<'textarea'> & {
+  radius?: 'none' | 'auto'
+  color?: 'base' | 'brand'
+  variant?: 'outline'
+  label?: string
+}
+
+const {
+  placeholder,
+  name = placeholder,
+  variant = 'outline',
+  radius = 'auto',
+  label,
+  rows,
+  value,
+  disabled,
+  required,
+  ...rest
+} = Astro.props
+---
+
+<Root
+  class:list="textarea"
+  {...rest}
+>
+  <Label
+    for={name}
+    set:html={label}
+  />
+  <Root
+    as="textarea"
+    if={name}
+    id={name}
+    {name}
+    {variant}
+    {placeholder}
+    {value}
+    {disabled}
+    {required}
+    {rows}
+    {radius}
+  />
+</Root>
+
+<style is:global lang="scss">
+  .textarea {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    gap: var(--space-1);
+    width: 100%;
+
+    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;
+
+      &.radius-none {
+        border-radius: 0;
+      }
+
+      &.radius-auto {
+        border-radius: var(--radius-1);
+      }
+
+      &::placeholder {
+        color: var(--color-11);
+      }
+
+      &:hover {
+        outline: none;
+      }
+
+      &:focus {
+        outline: none;
+        box-shadow: inset 0 0 0 2px var(--color-7);
+        border-color: var(--color-7);
+      }
+
+      &:disabled {
+        opacity: 50%;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    }
+  }
+</style>