fulldev-ui 0.3.36 → 0.4.0-beta.1

package/src/components/{structure/Carousel.astro → Carousel.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'
   position?: 'inset'
 }
 
 const { ...rest } = Astro.props
 ---
 
-<Component
-  class:list={['carousel']}
+<Root
+  class:list="carousel"
   {...rest}
 >
   <slot />
-</Component>
+</Root>
 
 <style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('carousel') {
-    --column-width: calc(16 * var(--space-4));
+  .carousel {
+    --column-width: calc(21 * var(--space-4));
 
     display: flex;
     position: relative;
@@ -37,7 +34,7 @@ const { ...rest } = Astro.props
     scroll-behavior: smooth;
     scroll-snap-type: x mandatory;
 
-    > .full {
+    > .root {
       flex-grow: 0;
       flex-shrink: 0;
       width: var(--column-width);
@@ -45,11 +42,11 @@ const { ...rest } = Astro.props
     }
 
     &.position-inset {
-      margin-right: calc(var(--inner-x) * -1);
-      margin-left: calc(var(--inner-x) * -1);
-      padding-right: var(--inner-x);
-      padding-left: var(--inner-x);
-      width: calc(100% + var(--inner-x) * 2);
+      margin-right: calc(var(--inset-right) * -1);
+      margin-left: calc(var(--inset-left) * -1);
+      padding-right: var(--inset-right);
+      padding-left: var(--inset-left);
+      width: calc(100% + var(--inset-left) + var(--inset-right));
     }
   }
 </style>

package/src/components/Checkbox.astro

@@ -0,0 +1,63 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Label from 'fulldev-ui/components/Label.astro'
+import Root from 'fulldev-ui/components/Root.astro'
+
+type Props = Omit<HTMLAttributes<'input'>, 'type'> & {
+  label?: string
+  color?: 'base' | 'brand'
+  contrast?: boolean
+  icon?: string
+}
+
+const {
+  label,
+  contrast,
+  icon,
+  name,
+  placeholder,
+  value,
+  disabled,
+  checked,
+  required,
+  ...rest
+} = Astro.props
+---
+
+<Root
+  structure="row"
+  class:list="checkbox"
+  {...rest}
+>
+  <Root
+    as="input"
+    type="checkbox"
+    id={name}
+    if={name}
+    {disabled}
+    {required}
+    {checked}
+    {name}
+    {...rest}
+  />
+  <Label
+    for={name}
+    html={label}
+    {contrast}
+  />
+</Root>
+
+<style>
+  .checkbox {
+    align-items: center;
+    gap: var(--space-1);
+
+    input {
+      display: block;
+      width: var(--text-2);
+      height: var(--text-2);
+      accent-color: var(--color-9);
+      color-scheme: dark;
+    }
+  }
+</style>

package/src/components/{structure/Column.astro → Column.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 = 'start', ...rest } = Astro.props
 ---
 
-<Component
-  class:list={['column']}
+<Root
+  class:list="column"
   {align}
   {space}
   {...rest}
 >
   <slot />
-</Component>
+</Root>
 
 <style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('column') {
+  .column {
     display: flex;
     position: relative;
     flex-direction: column;
@@ -48,10 +45,18 @@ const { space = 'auto', align = 'start', ...rest } = Astro.props
       align-items: flex-end;
     }
 
+    &.justify-start {
+      justify-content: center;
+    }
+
     &.justify-center {
       justify-content: center;
     }
 
+    &.justify-end {
+      justify-content: flex-end;
+    }
+
     &.space-auto {
       > * + * {
         margin-top: var(--space-auto);

package/src/components/Dialog.astro

@@ -0,0 +1,65 @@
+---
+import type { ComponentProps, HTMLTag } from 'astro/types'
+import Button from './Button.astro'
+import Card from './Card.astro'
+
+type Props<As extends HTMLTag = 'a'> = ComponentProps<typeof Card<As>> & {
+  label?: string
+  icon?: string
+}
+
+const {
+  variant = 'secondary',
+  label,
+  icon,
+  id = 'dialog',
+  ...rest
+} = Astro.props
+---
+
+<Button
+  as="button"
+  type="button"
+  id={`${id}-button`}
+  html={label}
+  icon={icon}
+  variant="secondary"
+  onclick={`document.getElementById('${id}').showModal()`}
+/>
+
+<dialog
+  class="dialog"
+  {id}
+  onclick={`event.target === this && this.close()`}
+>
+  <Card
+    as="div"
+    {...rest}
+  >
+    <slot />
+  </Card>
+</dialog>
+
+<style lang="scss" is:global>
+  .dialog {
+    margin: auto !important;
+    outline: 0;
+    border: 0;
+    background: none;
+    padding: var(--space-7) var(--gutter);
+    max-width: 768px;
+    max-height: 80vh;
+    overflow: hidden;
+
+    &::backdrop {
+      background: rgba(0, 0, 0, 0.5);
+    }
+
+    .card {
+      width: 100%;
+      height: 100%;
+      max-height: 80vh !important;
+      overflow: auto !important;
+    }
+  }
+</style>

package/src/components/Drawer.astro

@@ -0,0 +1,99 @@
+---
+import type { ComponentProps, HTMLTag } from 'astro/types'
+import Box from './Box.astro'
+import Button from './Button.astro'
+import Card from './Card.astro'
+import Root from './Root.astro'
+
+type Props<As extends HTMLTag = 'a'> = ComponentProps<typeof Card<As>> & {
+  label?: string
+  icon?: string
+  position?: 'left' | 'right'
+}
+
+const {
+  id = 'drawer',
+  frame = 'fill',
+  position = 'left',
+  label,
+  icon,
+  ...rest
+} = Astro.props
+---
+
+<Button
+  class:list="drawer-button"
+  as="button"
+  variant="secondary"
+  type="button"
+  id={`${id}-button`}
+  html={label}
+  icon={icon}
+  onclick={`document.getElementById('${id}').showModal()`}
+/>
+
+<Root
+  as="dialog"
+  class="drawer"
+  {id}
+  {position}
+  onclick={`event.target === this && this.close()`}
+>
+  <Box
+    class:list={[`frame-${frame}`, `position-${position}`]}
+    {...rest}
+  >
+    <slot />
+  </Box>
+</Root>
+
+<style lang="scss" is:global>
+  .drawer {
+    flex-shrink: 0;
+    align-items: stretch;
+    box-sizing: border-box;
+    margin: 0 !important;
+    outline: 0;
+    border: 0;
+    background: var(--color-2);
+    padding: 0;
+    padding: var(--space-7) var(--space-7) var(--space-7) var(--gutter);
+    max-width: 360px;
+    height: 100vh;
+    max-height: 100vh;
+
+    &::backdrop {
+      background: rgba(0, 0, 0, 0.5);
+    }
+
+    &.position-left {
+      margin-right: 0;
+    }
+
+    &.position-right {
+      right: 0;
+    }
+
+    .box {
+      padding: calc(var(--space-5) * 2) calc(var(--space-7) * 3);
+      min-width: calc(var(--space-7) * 14);
+      height: 100vh;
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      &.position-left {
+        border-right: 1px solid var(--color-a6);
+        padding-left: var(--gutter);
+      }
+
+      &.position-right {
+        border-left: 1px solid var(--color-a6);
+        padding-right: var(--gutter);
+      }
+
+      &.frame-fill {
+        background-color: var(--color-2);
+      }
+    }
+  }
+</style>

package/src/components/Footer.astro

@@ -0,0 +1,144 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Column from 'fulldev-ui/components/Column.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Link from 'fulldev-ui/components/Link.astro'
+import Root from 'fulldev-ui/components/Root.astro'
+import Text from 'fulldev-ui/components/Text.astro'
+import Logo from 'fulldev-ui/components/experimental/Logo.astro'
+
+type Props<As extends HTMLTag = 'footer'> = Polymorphic<{ as: As }> & {
+  structure?: 'spread' | 'row' | 'split' | 'column'
+  variant?: 'base' | 'ghost' | 'subtle' | 'soft' | 'surface' | 'outline'
+  frame?: 'fill' | 'panel' | 'contain'
+  align?: 'start' | 'center' | 'end'
+  size?: 'sm' | 'md' | 'lg'
+  theme?: 'light' | 'dark'
+  color?: 'base' | 'brand'
+  space?: 'none' | 'auto'
+  logo?: string
+  heading?: string
+  title?: string
+  description?: string
+  text?: string
+  html?: string
+  columns?: [
+    {
+      heading: string
+      links: ComponentProps<typeof Link<'a'>>[]
+    },
+  ]
+}
+
+const {
+  as = 'footer',
+  space = 'auto',
+  variant = 'subtle',
+  frame = 'fill',
+  structure = 'grid',
+  size = 'sm',
+  logo,
+  heading,
+  columns,
+  text,
+  title,
+  description,
+  html,
+  ...rest
+} = Astro.props
+---
+
+<Root
+  class:list="footer"
+  {structure}
+  {as}
+  {variant}
+  {frame}
+  {space}
+  {size}
+  {...rest}
+>
+  <Column>
+    <Column
+      style={{ textDecoration: 'none' }}
+      as="a"
+      href="/"
+    >
+      <Logo src={logo} />
+      <Heading
+        level={4}
+        color="base"
+        html={heading || title}
+      />
+    </Column>
+    <Text
+      color="base"
+      html={html || text || description}
+    />
+  </Column>
+
+  {
+    columns?.map(({ heading, links }) => (
+      <Column>
+        <Heading
+          html={heading}
+          level={4}
+        />
+        {links.map((link) => (
+          <Link {...link} />
+        ))}
+      </Column>
+    ))
+  }
+</Root>
+
+<style is:global lang="scss">
+  .footer {
+    --inset-top: var(--space-7);
+    --inset-left: var(--gutter-left);
+    --inset-right: var(--gutter-right);
+    --inset-bottom: var(--space-7);
+
+    margin-top: auto;
+    width: 100%;
+
+    &.frame-none {
+      border-top: 1px solid var(--base-a6);
+      padding: var(--space-7) var(--gutter);
+    }
+
+    &.frame-fill {
+      border-top: 1px solid var(--base-a6);
+      background-color: var(--color-2);
+      padding: var(--space-7) var(--gutter);
+    }
+
+    &.frame-panel {
+      margin: var(--space-7) var(--gutter);
+      border: 1px solid var(--base-a6);
+      border-radius: var(--radius-2);
+      background-color: var(--color-2);
+      padding: var(--space-6) min(var(--gutter), var(--space-7));
+      max-width: calc(100vw - 2 * var(--gutter));
+      overflow: hidden;
+
+      @media (min-width: 1024px) {
+        padding-top: var(--space-7);
+        padding-bottom: var(--space-7);
+      }
+    }
+
+    &.align-start {
+      align-items: flex-start;
+      text-align: left;
+    }
+
+    &.align-center {
+      align-items: center;
+    }
+
+    &.align-end {
+      align-items: flex-end;
+    }
+  }
+</style>

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

@@ -1,28 +1,25 @@
 ---
 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'
 }
 
 const { ...rest } = Astro.props
 ---
 
-<Component
-  class:list={['grid']}
+<Root
+  class:list="grid"
   {...rest}
 >
   <slot />
-</Component>
+</Root>
 
 <style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('grid') {
-    --column-width: calc(15 * var(--space-4));
+  .grid {
+    --column-width: calc(21 * var(--space-4));
 
     display: grid;
     position: relative;

package/src/components/Head.astro

@@ -0,0 +1,85 @@
+---
+import { AstroSeo } from '@astrolib/seo'
+import type { CollectionEntry } from 'astro:content'
+import { ViewTransitions } from 'astro:transitions'
+
+type Props = Partial<CollectionEntry<'pages'>>
+
+const { data, render } = Astro.props
+const { title, description, image, seo, code } = data || {}
+
+const renderTitle = render && (await render()).headings[0]?.text
+const mergedTitle = seo?.title || title || renderTitle
+const mergedDescription = seo?.description || description
+const mergedImage = (seo?.image || image)?.startsWith('/')
+  ? (Astro.url.origin ?? '' + (seo?.image || image) ?? '')
+  : seo?.image || image
+---
+
+<head>
+  <meta charset="utf-8" />
+  <meta
+    content="width=device-width, initial-scale=1, viewport-fit=cover"
+    name="viewport"
+  />
+  <meta
+    name="generator"
+    content={Astro.generator}
+  />
+  <ViewTransitions />
+  <AstroSeo
+    title={mergedTitle}
+    description={mergedDescription}
+    openGraph={{
+      title: mergedTitle,
+      description: mergedDescription,
+      images: mergedImage
+        ? [
+            {
+              url: mergedImage,
+              alt: mergedTitle,
+            },
+          ]
+        : undefined,
+    }}
+  />
+  <link
+    rel="apple-touch-icon"
+    sizes="76x76"
+    href="/favicon/apple-touch-icon.png"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="32x32"
+    href="/favicon/favicon-32x32.png"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="16x16"
+    href="/favicon/favicon-16x16.png"
+  />
+  <link
+    rel="manifest"
+    href="/favicon/site.webmanifest"
+  />
+  <link
+    rel="mask-icon"
+    href="/favicon/safari-pinned-tab.svg"
+  />
+  <link
+    rel="shortcut icon"
+    href="/favicon/favicon.ico"
+  />
+  <meta
+    name="msapplication-config"
+    content="/favicon/browserconfig.xml"
+  />
+  <meta
+    name="theme-color"
+    content="#000000"
+  />
+  <slot name="head" />
+  <Fragment set:html={code?.head} />
+</head>