fulldev-ui 0.4.29 → 0.5.0-beta.1

package/src/components/Cards.astro

@@ -0,0 +1,135 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Card from 'fulldev-ui/components/Card.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  level?: ComponentProps<typeof Card>['level']
+  panel?: ComponentProps<typeof Card>['panel']
+  position?: ComponentProps<typeof Card>['position']
+  cards?: ComponentProps<typeof Card>[] | undefined
+  structure?: 'grid' | 'masonry' | 'stack' | 'carousel' | 'bento' | undefined
+}
+
+const { level, panel, position, cards, ...rest } = Astro.props
+---
+
+<Element
+  class:list="cards"
+  {panel}
+  {...rest}
+>
+  {
+    cards?.map((card: any) => (
+      <Card
+        {level}
+        {panel}
+        {position}
+        {...card}
+      />
+    ))
+  }
+</Element>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .cards {
+      --column-width: calc(21 * var(--space-4));
+      --gap: var(--space-5);
+
+      position: relative;
+      width: 100%;
+
+      &.panel {
+        --gap: var(--space-4);
+      }
+
+      &.position-inset {
+        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));
+      }
+
+      &.structure-grid {
+        display: grid;
+        grid-template-columns: repeat(
+          auto-fill,
+          minmax(var(--column-width), 1fr)
+        );
+        gap: var(--gap);
+        width: 100%;
+      }
+
+      &.structure-masonry {
+        column-gap: var(--gap);
+        column-fill: balance;
+        column-width: var(--column-width);
+        column-count: 6;
+        break-inside: avoid;
+        width: 100%;
+
+        & > .root + .root,
+        & > * + * {
+          break-inside: avoid;
+          margin-top: var(--gap);
+          margin-bottom: var(--gap);
+        }
+      }
+
+      &.structure-carousel {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--gap);
+        padding-bottom: var(--gap);
+        overflow-x: auto;
+        scroll-behavior: smooth;
+        scroll-snap-type: x mandatory;
+
+        > .root {
+          flex-grow: 0;
+          flex-shrink: 0;
+          width: var(--column-width);
+          scroll-snap-align: center;
+        }
+      }
+
+      &.structure-stack {
+        display: grid;
+        position: relative;
+        grid-template-columns: 1fr;
+        align-items: flex-start;
+        gap: var(--space-6);
+        width: 100%;
+
+        @media (min-width: 1024px) {
+          grid-auto-columns: 1fr;
+          grid-auto-flow: column;
+        }
+      }
+
+      &.structure-bento {
+        display: grid;
+        position: relative;
+        grid-template-columns: 1fr;
+        gap: var(--space-4);
+        width: 100%;
+
+        @media (min-width: 1024px) {
+          grid-template-columns: repeat(5, 1fr);
+
+          & > * {
+            grid-column: span 2;
+          }
+
+          & > *:nth-child(3n + 2),
+          & > *:nth-child(3n + 3) {
+            grid-column: span 3;
+          }
+        }
+      }
+    }
+  }
+</style>

package/src/components/Channel.astro

@@ -0,0 +1,70 @@
+---
+import type { ComponentProps } from 'astro/types'
+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 Text from 'fulldev-ui/components/Text.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, ComponentProps<typeof Button> {
+  variant?: ComponentProps<typeof Button>['variant']
+  icon?: ComponentProps<typeof Button>['icon']
+  href?: ComponentProps<typeof Button>['href']
+  heading?: ComponentProps<typeof Heading>['text']
+  text?: ComponentProps<typeof Text>['text']
+  structure?: 'row' | 'column' | undefined
+  align?: 'start' | 'center' | undefined
+}
+
+const {
+  variant = 'secondary',
+  structure = 'row',
+  color = 'brand',
+  align = 'start',
+  heading,
+  text,
+  icon,
+  href,
+  ...rest
+} = Astro.props
+---
+
+<Element
+  class:list={`channel ${structure}`}
+  {align}
+  {...rest}
+>
+  <Button
+    {variant}
+    {color}
+    {href}
+    {icon}
+  />
+  <Element class:list={'column'}>
+    <Heading
+      level={6}
+      text={heading}
+    />
+    <Text text={text} />
+  </Element>
+</Element>
+
+<style>
+  .channel {
+    gap: var(--space-4);
+
+    &.column {
+      display: flex;
+      flex-direction: column;
+      align-items: inherit;
+      gap: var(--space-1);
+    }
+
+    &.row {
+      display: flex;
+      flex-direction: row;
+      align-items: inherit;
+      gap: var(--space-1);
+    }
+  }
+</style>

package/src/components/Channels.astro

@@ -0,0 +1,37 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Channel from 'fulldev-ui/components/Channel.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  variant?: ComponentProps<typeof Channel>['variant']
+  channels?: ComponentProps<typeof Channel>[] | undefined
+}
+
+const { channels, variant, ...rest } = Astro.props
+---
+
+<Element
+  class:list="channels"
+  {...rest}
+>
+  {
+    channels?.map((channel) => (
+      <Channel
+        {variant}
+        {...channel}
+      />
+    ))
+  }
+</Element>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .channels {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-2);
+    }
+  }
+</style>

package/src/components/Checkbox.astro

@@ -1,21 +1,17 @@
 ---
-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 = Omit<HTMLAttributes<'input'>, 'type'> & {
-  label?: string
-  color?: 'base' | 'brand'
-  contrast?: boolean
-  icon?: string
+interface Props extends GlobalProps, HTMLAttributes<'input'> {
+  label?: ComponentProps<typeof Label>['text']
 }
 
 const {
   label,
-  contrast,
-  icon,
-  name,
   id,
+  name,
   placeholder,
   value,
   disabled,
@@ -25,32 +21,32 @@ const {
 } = Astro.props
 ---
 
-<Root
-  structure="row"
+<Element
   class:list="checkbox"
   {...rest}
 >
-  <Root
+  <Element
     as="input"
     type="checkbox"
     id={id ?? name ?? label}
     if={id ?? name ?? label}
     name={name ?? label ?? id}
     {disabled}
+    {placeholder}
     {required}
     {checked}
     {...rest}
   />
   <Label
     for={id ?? name ?? label}
-    html={label}
-    {contrast}
+    text={label}
   />
-</Root>
+</Element>
 
 <style lang="scss" is:global>
   @layer fulldev {
     .checkbox {
+      display: flex;
       align-items: center;
       gap: var(--space-1);
 

package/src/components/Dialog.astro

@@ -1,11 +1,13 @@
 ---
-import type { ComponentProps, HTMLTag } from 'astro/types'
-import Button from './Button.astro'
-import Card from './Card.astro'
+import type { ComponentProps } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Card from 'fulldev-ui/components/Card.astro'
+import type Icon from './Icon.astro'
+import type Label from './Label.astro'
 
-type Props<As extends HTMLTag = 'a'> = ComponentProps<typeof Card<As>> & {
-  label?: string
-  icon?: string
+interface Props extends ComponentProps<typeof Card> {
+  icon?: ComponentProps<typeof Icon>['name']
+  label?: ComponentProps<typeof Label>['text']
 }
 
 const {
@@ -18,13 +20,10 @@ const {
 ---
 
 <Button
-  as="button"
-  type="button"
   id={`${id}-button`}
-  html={label}
-  icon={icon}
   variant="secondary"
   onclick={`document.getElementById('${id}').showModal()`}
+  {icon}
 />
 
 <dialog
@@ -33,8 +32,7 @@ const {
   onclick={`event.target === this && this.close()`}
 >
   <Card
-    as="div"
-    frame="panel"
+    panel
     {...rest}
   >
     <slot />

package/src/components/Drawer.astro

@@ -1,20 +1,20 @@
 ---
-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'
+import type { ComponentProps } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Card from 'fulldev-ui/components/Card.astro'
+import Element from 'fulldev-ui/components/Element.astro'
 
-type Props<As extends HTMLTag = 'a'> = ComponentProps<typeof Card<As>> & {
-  label?: string
-  icon?: string
-  position?: 'left' | 'right'
+interface Props extends Omit<ComponentProps<typeof Card>, 'position'> {
+  label?: string | undefined
+  icon?: string | undefined
+  position?: 'left' | 'right' | undefined
+  panel?: boolean | undefined
 }
 
 const {
   id = 'drawer',
-  frame = 'fill',
   position = 'left',
+  panel,
   label,
   icon,
   ...rest
@@ -23,29 +23,27 @@ const {
 
 <Button
   class:list="drawer-button"
-  as="button"
   variant="secondary"
-  type="button"
   id={`${id}-button`}
-  html={label}
+  text={label}
   icon={icon}
   onclick={`document.getElementById('${id}').showModal()`}
 />
 
-<Root
+<Element
   as="dialog"
   class="drawer"
   {id}
   {position}
   onclick={`event.target === this && this.close()`}
 >
-  <Box
-    class:list={[`frame-${frame}`, `position-${position}`]}
+  <Element
+    class:list={[panel, `position-${position}`]}
     {...rest}
   >
     <slot />
-  </Box>
-</Root>
+  </Element>
+</Element>
 
 <style lang="scss" is:global>
   @layer fulldev {
@@ -92,10 +90,6 @@ const {
           border-left: 1px solid var(--color-a6);
           padding-right: var(--gutter);
         }
-
-        &.frame-fill {
-          background-color: var(--color-2);
-        }
       }
     }
   }

package/src/components/Element.astro

@@ -0,0 +1,58 @@
+---
+const {
+  as: As = 'div',
+  theme,
+  variant,
+  size,
+  align,
+  color,
+  position,
+  panel,
+  contrast,
+  structure,
+  level,
+  placement,
+  reverse,
+  open,
+  lead,
+  ...rest
+} = Astro.props
+
+const slot = await Astro.slots.render('default')
+const render = 'if' in rest ? rest.if : slot?.trim().length > 0
+---
+
+{
+  render && (
+    <As
+      class:list={[
+        'root',
+        {
+          contrast,
+          panel,
+          open,
+          reverse,
+          lead,
+          [`size-${size}`]: size,
+          [`color-${color}`]: color,
+          [`theme-${theme}`]: theme,
+          [`level-${level}`]: level,
+          [`variant-${variant}`]: variant,
+          [`structure-${structure}`]: structure,
+          [`align-${align}`]: align,
+          [`position-${position}`]: position,
+          [`position-${position}`]: position,
+        },
+      ]}
+      {...rest}
+    >
+      <Fragment set:html={slot} />
+    </As>
+  )
+}
+
+<style is:global lang="scss">
+  @import '@unocss/reset/tailwind.css' layer(fulldev);
+  @import 'fulldev-ui/css/color.css';
+  @import 'fulldev-ui/css/size.css';
+</style>