fulldev-ui 0.3.0-beta.3 → 0.3.2

package/src/components/base/table/TableBody.astro

@@ -0,0 +1,39 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Component from '../../_Component.astro'
+
+import TableRow from './TableRow.astro'
+
+type Props = HTMLAttributes<'tbody'> & {
+  rows?: (
+    | ComponentProps<typeof TableRow>
+    | ComponentProps<typeof TableRow>['cells']
+  )[]
+}
+
+const { rows, ...rest } = Astro.props
+---
+
+<Component
+  class:list={['table-body']}
+  as="tbody"
+  {...rest}
+>
+  {
+    rows?.map((row) => {
+      if (Array.isArray(row)) return <TableRow cells={row} />
+      else return <TableRow {...row} />
+    })
+  }
+  <slot />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../../css/utils.scss';
+
+  @include component('table-body') {
+    display: table-row-group;
+    vertical-align: middle;
+    unicode-bidi: isolate;
+  }
+</style>

package/src/components/base/table/TableCell.astro

@@ -0,0 +1,30 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Component from '../../_Component.astro'
+
+type Props = HTMLAttributes<'td'> & {
+  html?: string
+  text?: string
+}
+
+const { ...rest } = Astro.props
+---
+
+<Component
+  class:list={['table-cell']}
+  as="td"
+  {...rest}
+>
+  <slot />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../../css/utils.scss';
+
+  @include component('table-cell') {
+    vertical-align: middle;
+    padding: var(--space-3) var(--space-4);
+    color: var(--color-11);
+    font-size: var(--text-1);
+  }
+</style>

package/src/components/base/table/TableFooter.astro

@@ -0,0 +1,48 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Component from '../../_Component.astro'
+import TableCell from './TableCell.astro'
+import TableRow from './TableRow.astro'
+
+type Props = HTMLAttributes<'tfoot'> & {
+  cells?: (
+    | ComponentProps<typeof TableCell>
+    | ComponentProps<typeof TableCell>['html']
+  )[]
+}
+
+const { cells, ...rest } = Astro.props
+---
+
+<Component
+  class:list={['table-footer']}
+  as="tfoot"
+  {...rest}
+>
+  {
+    cells && (
+      <TableRow>
+        {cells?.map((cell) => {
+          if (typeof cell === 'string') return <TableCell html={cell} />
+          else return <TableCell {...cell} />
+        })}
+      </TableRow>
+    )
+  }
+  <slot />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../../css/utils.scss';
+
+  @include component('table-footer') {
+    display: table-footer-group;
+    border-top: 1px solid var(--border);
+    background-color: var(--color-3);
+    color: var(--color-12);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+</style>

package/src/components/base/table/TableHead.astro

@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Component from '../../_Component.astro'
+
+type Props = HTMLAttributes<'th'> & {
+  html?: string
+  text?: string
+}
+
+const { ...rest } = Astro.props
+---
+
+<Component
+  class:list={['table-head']}
+  as="th"
+  {...rest}
+>
+  <slot />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../../css/utils.scss';
+
+  @include component('table-head') {
+    vertical-align: middle;
+    padding: var(--space-3) var(--space-4);
+    color: var(--color-12);
+    font-size: var(--text-1);
+    text-align: left;
+  }
+</style>

package/src/components/base/table/TableHeader.astro

@@ -0,0 +1,44 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Component from '../../_Component.astro'
+import TableHead from './TableHead.astro'
+import TableRow from './TableRow.astro'
+
+type Props = HTMLAttributes<'thead'> & {
+  cells?: (
+    | ComponentProps<typeof TableHead>
+    | ComponentProps<typeof TableHead>['html']
+  )[]
+}
+
+const { cells, ...rest } = Astro.props
+---
+
+<Component
+  class:list={['table-header']}
+  as="thead"
+  {...rest}
+>
+  <TableRow>
+    {
+      cells?.map((cell) => {
+        if (typeof cell === 'string') return <TableHead html={cell} />
+        else return <TableHead {...cell} />
+      })
+    }
+  </TableRow>
+  <slot />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../../css/utils.scss';
+
+  @include component('table-header') {
+    border-bottom: 1px solid var(--color-6);
+    background-color: var(--color-3);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+</style>

package/src/components/base/table/TableRow.astro

@@ -0,0 +1,46 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Component from '../../_Component.astro'
+import TableCell from './TableCell.astro'
+
+type Props = HTMLAttributes<'tr'> & {
+  cells?: (
+    | ComponentProps<typeof TableCell>
+    | ComponentProps<typeof TableCell>['text']
+  )[]
+}
+
+const { cells, ...rest } = Astro.props
+---
+
+<Component
+  class:list={['table-row']}
+  {...rest}
+  as="tr"
+>
+  {
+    cells?.map((cel) => {
+      if (typeof cel === 'string') return <TableCell text={cel} />
+      else return <TableCell {...cel} />
+    })
+  }
+  <slot />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../../css/utils.scss';
+
+  @include component('table-row') {
+    border-bottom: 1px solid var(--color-6);
+    background-color: var(--color-2);
+
+    &:is(.table-header > &),
+    &:is(.table-footer > &) {
+      background-color: var(--color-3);
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+</style>

package/src/components/base/textarea/Textarea.astro

@@ -0,0 +1,79 @@
+---
+import type { ComponentProps, Polymorphic } from 'astro/types'
+import Component from '../../_Component.astro'
+import Label from '../../typography/Label.astro'
+import Icon from '../Icon.astro'
+import TextareaElement from './TextareaElement.astro'
+
+type Props<As extends 'div'> = Polymorphic<{ as: As }> &
+  Pick<
+    ComponentProps<typeof TextareaElement>,
+    | 'variant'
+    | 'placeholder'
+    | 'name'
+    | 'value'
+    | 'disabled'
+    | 'required'
+    | 'rows'
+  > & {
+    color?: 'base' | 'brand'
+    label?: string
+    icon?: string
+  }
+
+const {
+  as = 'div',
+  label,
+  icon,
+  variant,
+  // textarea attributes
+  name,
+  rows,
+  placeholder,
+  value,
+  disabled,
+  required,
+  ...rest
+} = Astro.props
+---
+
+<Component
+  class:list={['textarea']}
+  {as}
+  {...rest}
+>
+  <Label
+    for={name}
+    text={label}
+  />
+  <TextareaElement
+    id={name}
+    {name}
+    {variant}
+    {placeholder}
+    {value}
+    {disabled}
+    {required}
+    {rows}
+  />
+  <Icon name={icon} />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../../css/utils.scss';
+
+  @include component('textarea') {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    gap: var(--space-1);
+    width: 100%;
+
+    .icon {
+      position: absolute;
+      top: 50%;
+      right: var(--space-3);
+      transform: translateY(-50%);
+    }
+  }
+</style>

package/src/components/base/textarea/TextareaElement.astro

@@ -0,0 +1,61 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Component from '../../_Component.astro'
+
+type Props = HTMLAttributes<'textarea'> & {
+  variant?: 'outline'
+}
+
+const { variant = 'outline', ...rest } = Astro.props
+---
+
+<Component
+  as="textarea"
+  class="textarea-element"
+  if={true}
+  {variant}
+  {...rest}
+/>
+
+<style is:global lang="scss">
+  @import '../../../css/utils.scss';
+
+  @include component('textarea-element') {
+    display: flex;
+    position: relative;
+    align-items: center;
+    outline: none;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-1);
+    background-color: var(--background);
+    padding: var(--space-3);
+    width: 100%;
+    height: calc((var(--text-1) + 2 * var(--space-4)) * 2);
+    min-height: calc((var(--text-1) + 2 * var(--space-4)) * 2);
+    resize: vertical;
+    color: var(--text);
+    font-weight: var(--font-weight);
+    font-size: var(--text-1);
+    line-height: 1.25;
+    font-family: var(--font-family);
+
+    &::placeholder {
+      color: var(--text);
+    }
+
+    &:hover {
+      outline: none;
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: inset 0 0 0 2px var(--border);
+    }
+
+    &:disabled {
+      opacity: 50%;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+</style>

package/src/components/segment/Card.astro

@@ -6,7 +6,9 @@ type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> &
   ComponentProps<typeof Component> & {
     structure?: 'column' | 'group' | 'split' | 'spread' | 'row'
     align?: 'start' | 'center' | 'end' | 'stretch'
-    frame?: 'fill' | 'panel' | 'none'
+    frame?: 'panel' | 'none'
+    color?: 'base' | 'brand'
+    contrast?: boolean
     ratio?: 'landscape' | 'portrait' | 'square' | number
     variant?:
       | 'ghost'
@@ -21,10 +23,10 @@ type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> &
 const {
   href,
   as = href ? 'a' : 'div',
+  frame = 'panel',
   structure = 'column',
   compact = true,
-  frame = 'panel',
-  variant = frame === 'panel' ? 'subtle' : undefined,
+  variant = 'subtle',
   ...rest
 } = Astro.props
 ---
@@ -34,8 +36,8 @@ const {
   {compact}
   {href}
   {structure}
-  {frame}
   {variant}
+  {frame}
   {as}
   {...rest}
 >
@@ -75,5 +77,27 @@ const {
     &.ratio-portrait {
       aspect-ratio: 3/4;
     }
+
+    &.frame-panel {
+      --inner-x: var(--space-7);
+      --inner-y: var(--space-7);
+
+      border: 1px solid var(--border);
+      border-radius: var(--radius-3);
+      background-color: var(--background);
+      padding: var(--inner-y) var(--inner-x);
+    }
+
+    &.align-start {
+      align-items: flex-start;
+    }
+
+    &.align-center {
+      align-items: center;
+    }
+
+    &.align-end {
+      align-items: flex-end;
+    }
   }
 </style>

package/src/components/segment/Footer.astro

@@ -0,0 +1,88 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Component from '../_Component.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?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  scheme?: 'light' | 'dark'
+  color?: 'base' | 'brand'
+  compact?: boolean
+}
+
+const {
+  as = 'footer',
+  structure = 'spread',
+  variant = 'subtle',
+  frame = 'fill',
+  ...rest
+} = Astro.props
+---
+
+<Component
+  class:list={['footer']}
+  {structure}
+  {as}
+  {variant}
+  {frame}
+  {...rest}
+>
+  <slot />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('footer') {
+    --screen: 1536px;
+    --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
+
+    margin: var(--outer-y) var(--outer-x);
+    background: var(--background);
+    padding: var(--inner-y) var(--inner-x);
+    width: 100%;
+    max-width: calc(100% - (2 * var(--outer-x)));
+
+    &.frame-fill {
+      border-top: 1px solid var(--border);
+      --inner-x: var(--gutter);
+      --outer-x: 0;
+      --inner-y: var(--space-7);
+      --outer-y: 0;
+    }
+
+    &.frame-panel {
+      margin-top: var(--space-2);
+      margin-right: var(--gutter);
+      margin-left: var(--gutter);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-3);
+      --inner-x: var(--gutter);
+      --outer-x: 0;
+      --inner-y: var(--space-7);
+      --outer-y: 0;
+    }
+
+    &.frame-contain {
+      --inner-x: max(4vw, var(--space-7));
+      --outer-x: max(0px, calc(var(--gutter) - var(--inner-x)));
+      --inner-y: var(--space-7);
+      --outer-y: 0;
+    }
+
+    &.align-start {
+      align-items: flex-start;
+    }
+
+    &.align-center {
+      align-items: center;
+    }
+
+    &.align-end {
+      align-items: flex-end;
+    }
+  }
+</style>

package/src/components/segment/Header.astro

@@ -4,18 +4,18 @@ import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'header'> = Polymorphic<{ as: As }> &
   ComponentProps<typeof Component> & {
-    structure?: 'spread' | 'group' | 'column'
+    structure?: 'spread' | 'row' | 'column'
     position?: 'relative' | 'sticky' | 'fixed' | 'absolute'
-    variant?: 'base' | 'raised'
-    frame?: 'wrapper' | 'container' | 'panel'
+    variant?: 'ghost' | 'subtle' | 'soft' | 'surface' | 'outline'
+    frame?: 'fill' | 'panel'
     align?: 'start' | 'center' | 'end'
   }
 
 const {
   as = 'header',
   structure = 'spread',
-  density = 'compact',
-  frame = 'wrapper',
+  frame = 'fill',
+  variant = 'subtle',
   compact = true,
   ...rest
 } = Astro.props
@@ -24,9 +24,10 @@ const {
 <Component
   class:list={['header']}
   {as}
-  {density}
   {frame}
   {compact}
+  {structure}
+  {variant}
   {...rest}
 >
   <slot />
@@ -36,7 +37,8 @@ const {
   @import '../../css/utils.scss';
 
   @include component('header') {
-    --inner: var(--element-3);
+    --screen: 1536px;
+    --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
 
     display: flex;
     top: 0;
@@ -45,14 +47,30 @@ const {
     justify-content: space-between;
     align-items: center;
     z-index: 10;
-    background: var(--background);
-    padding-top: var(--element-3);
-    padding-bottom: var(--element-3);
+    border-bottom: 1px solid var(--border);
+    background-color: var(--background);
+    padding-top: var(--space-4);
+    padding-bottom: var(--space-4);
     width: 100%;
 
-    // &.panel {
-    //   margin-top: var(--inner);
-    // }
+    &.frame-fill {
+      padding-top: var(--space-4);
+      padding-right: var(--gutter);
+      padding-bottom: var(--space-4);
+      padding-left: var(--gutter);
+    }
+
+    &.frame-panel {
+      margin-top: var(--space-2);
+      margin-right: var(--gutter);
+      margin-left: var(--gutter);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-3);
+      padding-top: var(--space-2);
+      padding-right: var(--space-4);
+      padding-bottom: var(--space-2);
+      padding-left: var(--space-4);
+    }
 
     &.position-fixed {
       position: fixed;
@@ -65,5 +83,17 @@ const {
     &.position-sticky {
       position: sticky;
     }
+
+    &.align-start {
+      align-items: flex-start;
+    }
+
+    &.align-center {
+      align-items: center;
+    }
+
+    &.align-end {
+      align-items: flex-end;
+    }
   }
 </style>