fulldev-ui 0.5.0-beta.9 → 0.6.0-beta-5

package/src/components/Channel.astro

@@ -1,70 +1,79 @@
 ---
-import type { ComponentProps } from 'astro/types'
+import type { HTMLAttributes } 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'
+import type { ChannelSchema } from 'fulldev-ui/schemas/components/channel'
 
-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
-}
+interface Props extends HTMLAttributes<'div'>, ChannelSchema {}
 
 const {
   variant = 'secondary',
-  structure = 'row',
-  color = 'brand',
-  align = 'start',
+  size = 'md',
+  href,
+  icon,
   heading,
   text,
-  icon,
-  href,
   ...rest
 } = Astro.props
 ---
 
 <Element
-  class:list={`channel ${structure}`}
-  {align}
+  class:list="channel"
+  {size}
   {...rest}
 >
   <Button
     {variant}
-    {color}
+    {size}
     {href}
     {icon}
   />
-  <Element class:list={'column'}>
+  <Element class:list="channel-content">
     <Heading
-      level={6}
+      as="h6"
+      size="sm"
       text={heading}
     />
-    <Text text={text} />
+    <Fragment set:html={text} />
+    <slot />
   </Element>
 </Element>
 
-<style>
+<style is:global>
   .channel {
-    gap: var(--space-4);
+    @apply flex gap-3;
+
+    .channel-content {
+      @apply flex flex-col text-muted-foreground;
+
+      .heading {
+        @apply leading-snug;
+      }
+    }
+
+    &.size-sm {
+      @apply gap-2;
+
+      .channel-content {
+        @apply text-xs leading-tight;
+      }
+    }
+
+    &.size-md {
+      @apply gap-2.5;
 
-    &.column {
-      display: flex;
-      flex-direction: column;
-      align-items: inherit;
-      gap: var(--space-1);
+      .channel-content {
+        @apply text-sm leading-tight;
+      }
     }
 
-    &.row {
-      display: flex;
-      flex-direction: row;
-      align-items: inherit;
-      gap: var(--space-1);
+    &.size-lg {
+      @apply gap-3;
+
+      .channel-content {
+        @apply text-base leading-tight;
+      }
     }
   }
 </style>

package/src/components/Channels.astro

@@ -6,32 +6,46 @@ import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
 interface Props extends GlobalProps, HTMLAttributes<'div'> {
   variant?: ComponentProps<typeof Channel>['variant']
+  size?: ComponentProps<typeof Channel>['size']
+  channel?: ComponentProps<typeof Channel> | undefined
   channels?: ComponentProps<typeof Channel>[] | undefined
 }
 
-const { channels, variant, ...rest } = Astro.props
+const { channels = [], channel, variant, size, ...rest } = Astro.props
 ---
 
 <Element
   class:list="channels"
+  {size}
   {...rest}
 >
   {
-    channels?.map((channel) => (
+    [channel, ...channels].filter(Boolean).map((channel) => (
       <Channel
         {variant}
+        {size}
         {...channel}
       />
     ))
   }
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .channels {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-2);
+      @apply flex flex-col gap-2.5;
+
+      &.size-sm {
+        @apply gap-2;
+      }
+
+      &.size-md {
+        @apply gap-2.5;
+      }
+
+      &.size-lg {
+        @apply gap-3;
+      }
     }
   }
 </style>

package/src/components/Checkbox.astro

@@ -3,6 +3,7 @@ import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Label from 'fulldev-ui/components/Label.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Icon from './Icon.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'input'> {
   label?: ComponentProps<typeof Label>['text']
@@ -10,52 +11,76 @@ interface Props extends GlobalProps, HTMLAttributes<'input'> {
 
 const {
   label,
-  id,
-  name,
-  placeholder,
-  value,
-  disabled,
-  checked,
-  required,
+  name = label,
+  id = name,
+  type = 'text',
+  size = 'md',
   ...rest
 } = Astro.props
 ---
 
 <Element
   class:list="checkbox"
-  {...rest}
+  as="label"
+  for={id}
+  {size}
 >
   <Element
+    class:list="checkbox-input"
     as="input"
     type="checkbox"
-    id={id ?? name ?? label}
-    if={id ?? name ?? label}
-    name={name ?? label ?? id}
-    {disabled}
-    {placeholder}
-    {required}
-    {checked}
+    if={id}
+    {id}
+    {name}
     {...rest}
   />
+  <Icon
+    class="checkbox-icon"
+    name="check"
+  />
   <Label
-    for={id ?? name ?? label}
+    for={id}
     text={label}
+    {size}
   />
 </Element>
 
-<style lang="scss" is:global>
+<style is:global>
   @layer fulldev {
     .checkbox {
-      display: flex;
-      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;
+      @apply relative flex items-center gap-2;
+
+      .checkbox-input {
+        @apply size-[1em] cursor-pointer rounded-sm border border-primary bg-transparent accent-primary;
+        @apply appearance-none border border-primary bg-background checked:bg-primary;
+      }
+
+      .icon.checkbox-icon {
+        @apply absolute bg-transparent p-0.5 text-background;
+
+        * {
+          stroke-width: 3.5px !important;
+        }
+      }
+
+      &.size-sm {
+        .checkbox-input,
+        .icon.checkbox-icon {
+          @apply !size-3.5;
+        }
+      }
+      &.size-md {
+        .checkbox-input,
+        .checkbox-icon {
+          @apply !size-4;
+        }
+      }
+
+      &.size-lg {
+        .checkbox-input,
+        .checkbox-icon {
+          @apply !size-[1.125rem];
+        }
       }
     }
   }

package/src/components/Code.astro

@@ -0,0 +1,52 @@
+---
+import type { ComponentProps } from 'astro/types'
+import { Code as AstroCode } from 'astro:components'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends ComponentProps<typeof AstroCode> {}
+
+const { lang = 'astro', code, ...rest } = Astro.props
+---
+
+<Element class:list="code">
+  <div class="example">
+    <slot name="example" />
+    <Fragment set:html={code} />
+  </div>
+  <slot name="code" />
+  {
+    code && (
+      <AstroCode
+        class:list="code"
+        code={code}
+        {lang}
+        {...rest}
+      />
+    )
+  }
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .astro-code {
+      @apply mt-4 rounded-md p-4 text-sm first:mt-0;
+    }
+
+    .code {
+      @apply mt-8 overflow-hidden rounded-md border first:mt-0;
+
+      .example {
+        @apply flex flex-wrap items-center gap-8 p-8;
+
+        > *,
+        > slot > * {
+          @apply mt-0;
+        }
+      }
+
+      .astro-code {
+        @apply mt-0 rounded-none border-none p-4;
+      }
+    }
+  }
+</style>

package/src/components/Container.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+}
+
+const { ...rest } = Astro.props
+---
+
+<Element
+  class:list="container"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .container {
+      @apply mx-auto w-full max-w-screen-2xl px-gutter;
+    }
+  }
+</style>

package/src/components/Dialog.astro

@@ -20,6 +20,7 @@ const {
 ---
 
 <Button
+  size="sm"
   id={`${id}-button`}
   variant="secondary"
   onclick={`document.getElementById('${id}').showModal()`}
@@ -28,7 +29,7 @@ const {
 
 <dialog
   class="dialog"
-  {id}
+  id={id as string}
   onclick={`event.target === this && this.close()`}
 >
   <Card
@@ -39,7 +40,7 @@ const {
   </Card>
 </dialog>
 
-<style lang="scss" is:global>
+<style is:global>
   @layer fulldev {
     .dialog {
       margin: auto !important;

package/src/components/Drawer.astro

@@ -1,171 +1,80 @@
 ---
 import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
 import Element from 'fulldev-ui/components/Element.astro'
-import Logo from 'fulldev-ui/components/experimental/Logo.astro'
-import Menu from 'fulldev-ui/components/Menu.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Buttons from './Buttons.astro'
-import Heading from './Heading.astro'
+import Button from './Button.astro'
 
-interface Props extends GlobalProps, HTMLAttributes<'aside'> {
-  variant?: ComponentProps<typeof Button>['variant']
-  text?: ComponentProps<typeof Button>['text']
-  icon?: ComponentProps<typeof Button>['icon']
-  heading?: ComponentProps<typeof Heading>['text']
-  logo?: ComponentProps<typeof Logo> | undefined
-  company?: ComponentProps<typeof Logo>['company']
-  menu?: ComponentProps<typeof Menu>['groups']
-  buttons?: ComponentProps<typeof Buttons>['buttons']
+interface Props
+  extends HTMLAttributes<'aside'>,
+    Pick<ComponentProps<typeof Button>, 'variant' | 'size' | 'text' | 'icon'> {
+  id: string
+  icon: string
 }
 
-const {
-  id = 'drawer',
-  size = 'sm',
-  icon = 'menu-2',
-  color,
-  variant,
-  text,
-  buttons,
-  heading,
-  logo,
-  company,
-  menu,
-  if: ifProp,
-  ...rest
-} = Astro.props
+const { id, variant = 'ghost', size = 'md', icon, text, ...rest } = Astro.props
 
-const buttonsGroup = { heading: '', buttons: buttons }
-const mergedMenu = [buttonsGroup, ...(menu || [])] as typeof menu
+const slot = await Astro.slots.render('default')
+const render = slot?.trim().length > 0
 ---
 
-<Button
-  if={ifProp}
-  variant="secondary"
-  class:list={['drawer-button', `${id}-button`]}
-  onclick={`document.getElementById('${id}').showModal()`}
-  {variant}
-  {text}
-  {icon}
-  {color}
-/>
-
-<Element
-  if={ifProp}
-  onclick={`event.target === this && this.close()`}
-  class:list="drawer"
-  as="dialog"
-  {id}
-  {text}
-  {icon}
-  {...rest}
->
-  <Element class:list="drawer-body">
-    <Element
-      class:list="drawer-header"
-      as="header"
-    >
-      <Logo
-        {company}
-        {...logo}
+{
+  render && (
+    <Element class:list="drawer">
+      <Button
+        class="drawer-button"
+        as="label"
+        for={id}
+        {variant}
+        {size}
+        {text}
+        {icon}
       />
-      <Heading
-        level={4}
-        text={heading}
+
+      <input
+        type="checkbox"
+        class="drawer-checkbox"
+        name={id}
+        {id}
       />
-      <Button
-        variant="secondary"
-        icon="x"
-        onclick={`document.getElementById('${id}').close()`}
+
+      <Element
+        class:list="drawer-body"
+        as="aside"
+        {...rest}
+      >
+        <Fragment set:html={slot} />
+      </Element>
+
+      <label
+        for={id}
+        class="drawer-backdrop"
       />
-      <slot name="header" />
-    </Element>
-    <Element class:list="drawer-content">
-      <Menu groups={mergedMenu} />
-      <slot />
     </Element>
-    <Element
-      class:list="drawer-footer"
-      as="footer"
-    >
-      <slot name="footer" />
-    </Element>
-  </Element>
-</Element>
+  )
+}
 
-<style lang="scss" is:global>
+<style is:global>
   @layer fulldev {
-    body:has(dialog[open]) {
-      overflow: hidden;
-
-      @media (min-width: 768px) {
-        overflow: auto;
-      }
-    }
-
     .drawer {
-      top: 0;
-      bottom: 0;
-      margin: 0;
-      padding: 0;
-      width: 100%;
-      max-width: 100%;
-      height: 100%;
-      max-height: 100%;
-
-      @media (min-width: 768px) {
-        width: 440px;
-      }
-
-      &::backdrop {
-        cursor: pointer;
-        background: rgba(0, 0, 0, 0.5);
-      }
+      @apply contents;
+    }
 
-      .drawer-body {
-        display: flex;
-        flex-shrink: 1;
-        flex-direction: column;
-        border-right: 1px solid var(--color-a6);
-        height: 100%;
-        overflow: auto;
-      }
+    .drawer-checkbox {
+      @apply invisible hidden;
+    }
 
-      .drawer-content {
-        display: flex;
-        flex-direction: column;
-        padding: var(--space-6) var(--gutter);
-      }
+    .drawer-backdrop {
+      @apply pointer-events-none invisible fixed left-0 top-0 z-30 h-full w-full bg-black opacity-0 transition-opacity;
 
-      .drawer-header,
-      .drawer-footer {
-        display: flex;
-        position: sticky;
-        flex-shrink: 0;
-        z-index: 1;
-        border-style: solid;
-        border-color: var(--color-a6);
-        background-color: var(--base-background);
+      &:is(.drawer-checkbox:checked ~ &) {
+        @apply pointer-events-auto visible opacity-50;
       }
+    }
 
-      .drawer-header {
-        top: 0;
-        align-items: center;
-        border-bottom-width: 1px;
-        padding: 0 var(--gutter);
-        height: 56px;
-
-        .button {
-          margin-left: auto;
-        }
-      }
+    .drawer-body {
+      @apply fixed bottom-0 left-0 top-0 z-40 h-full w-80 max-w-[75vw] -translate-x-full rounded-r-lg border border-l-0 bg-background shadow-2xl transition-transform;
 
-      .drawer-footer {
-        bottom: 0;
-        flex-direction: column;
-        margin-top: auto;
-        border-top-width: 1px;
-        padding: var(--space-5) var(--gutter);
+      &:is(.drawer-checkbox:checked ~ &) {
+        @apply translate-x-0;
       }
     }
   }