fulldev-ui 0.5.0-beta.8 → 0.6.0-beta.0

package/src/components/Section.astro

@@ -1,56 +1,86 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import type Card from 'fulldev-ui/components/Card.astro'
 import Cards from 'fulldev-ui/components/Cards.astro'
 import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
-import Writeup from 'fulldev-ui/components/Writeup.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props.js'
+import Badge from './Badge.astro'
+import Lead from './Lead.astro'
+import List from './List.astro'
+import Paragraph from './Paragraph.astro'
+import Price from './Price.astro'
+import Rating from './Rating.astro'
+import Tagline from './Tagline.astro'
 
-interface Props
-  extends GlobalProps,
-    ComponentProps<typeof Writeup>,
-    HTMLAttributes<'section'> {
+interface Props extends HTMLAttributes<'section'> {
+  as?: HTMLTag
+  size?: 'sm' | 'md' | 'lg' | undefined
   image?: ComponentProps<typeof Image>
-  position?: ComponentProps<typeof Image>['position']
   buttons?: ComponentProps<typeof Buttons>['buttons']
   button?: ComponentProps<typeof Button> | undefined
   variant?: ComponentProps<typeof Button>['variant']
   cards?: ComponentProps<typeof Cards>['cards']
   panel?: ComponentProps<typeof Card>['panel']
   component?: string
+  heading?: any
+  background?: any
+  lead?: any
+  rating?: any
+  tagline?: any
+  badge?: any
+  level?: any
+  paragraph?: any
+  dark?: boolean
+  list?: any
+  price?: any
+  center?: boolean
+  inset?: boolean
+  reverse?: boolean
+  frame?: 'fill' | 'panel' | 'viewport' | undefined
+  position?: 'contain' | 'inset' | 'background' | undefined
   structure?:
-    | ComponentProps<typeof Cards>['structure']
-    | 'column'
-    | 'split'
+    | 'left'
+    | 'center'
     | 'spread'
+    | 'split'
+    | 'grid'
+    | 'masonry'
+    | 'carousel'
+    | 'stack'
+    | undefined
 }
 
+const { component, ...props } = Astro.props
+
 const {
-  cards,
-  structure = cards ? 'grid' : 'column',
-  align = 'start',
-  level = 2,
+  as = 'section',
   size = 'md',
-  badge,
-  tagline,
+  variant = 'secondary',
+  structure = 'left',
+  inset = false,
+  panel = false,
+  reverse = false,
+  dark = false,
+  frame = 'viewport',
+  position = 'background',
+  level = 2,
   rating,
+  tagline,
+  badge,
   heading,
-  text,
+  lead,
+  paragraph,
   list,
-  button,
+  price,
   buttons,
-  variant,
-  panel,
   image,
-  theme,
-  position,
+  background,
+  cards,
   ...rest
-} = Astro.props
-
-const { component, ...props } = Astro.props
+} = props
 
 const allComponents = {
   ...import.meta.glob('/src/**/*.astro'),
@@ -63,6 +93,8 @@ const componentPath = Object.keys(allComponents).find(
 
 const Component =
   componentPath && (await (allComponents[componentPath] as any)()).default
+
+const hasCards = cards && cards.length > 0
 ---
 
 {
@@ -71,182 +103,188 @@ const Component =
   ) : (
     <Element
       class:list="section"
-      as="section"
-      panel={!cards && panel}
-      theme={cards ? undefined : theme}
-      structure={
-        structure === 'grid' ||
-        structure === 'carousel' ||
-        structure === 'stack'
-          ? text
-            ? 'column'
-            : 'spread'
-          : structure
-      }
-      {align}
+      panel={hasCards ? undefined : panel}
+      {as}
       {size}
+      {structure}
+      {inset}
+      {reverse}
+      {dark}
+      {position}
+      {frame}
       {...rest}
     >
-      <Element class:list="segment">
-        <slot name="segment">
-          <slot name="writeup">
-            <Writeup
+      <Element class:list="section-container">
+        <Element class:list="section-segment">
+          <Element class:list="section-content">
+            <Rating
+              {size}
+              {...rating}
+            />
+            <Tagline
+              text={tagline}
+              {size}
+            />
+            <Badge
+              {size}
+              {...badge}
+            />
+            <Heading
+              text={heading}
+              {size}
               {level}
-              {rating}
-              {badge}
-              {tagline}
-              {heading}
-              {text}
-              {list}
             />
-          </slot>
-          <slot name="buttons">
-            <Button
-              {variant}
-              {...button}
+            <Lead
+              text={lead}
+              {size}
             />
-            <Buttons
-              {variant}
-              {buttons}
+            <Paragraph
+              text={paragraph}
+              {size}
             />
-          </slot>
-        </slot>
-      </Element>
-      <slot>
+            <List
+              items={list}
+              {size}
+            />
+            <Price
+              value={price}
+              {size}
+            />
+            <slot name="content" />
+          </Element>
+          <Buttons
+            {size}
+            {variant}
+            {buttons}
+          />
+          <slot name="segment" />
+        </Element>
+        <Image {...image} />
         <Cards
-          level={(level + 2) as any}
-          size={size === 'lg' ? 'md' : 'sm'}
-          structure={
-            structure === 'grid' ||
-            structure === 'masonry' ||
-            structure === 'stack' ||
-            structure === 'carousel' ||
-            structure === 'bento'
-              ? structure
-              : undefined
-          }
-          position={cards ? position : undefined}
-          {theme}
+          {size}
+          {level}
           {cards}
-          {panel}
-          {position}
-        />
-        <Image
-          position={cards ? undefined : position}
-          {...image}
         />
-      </slot>
+        <slot />
+      </Element>
     </Element>
   )
 }
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .section {
-      --inset-top: 0px;
-      --inset-left: var(--gutter);
-      --inset-right: var(--gutter);
-      --inset-bottom: var(--spacer);
-
-      display: flex;
-      position: relative;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--space-6) var(--space-7);
-      padding: var(--spacer) var(--gutter);
-
-      .segment {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: var(--space-5);
-        z-index: 1;
+      @apply relative flex w-full items-center pb-28 pt-14 first:pt-0;
+
+      .section-container {
+        @apply container z-10 w-full;
       }
 
-      &.panel {
-        margin: var(--spacer) var(--gutter);
-        border: 1px solid var(--base-a6);
-        border-radius: var(--radius-2);
-        background-color: var(--base-2);
-        padding: min(var(--gutter), var(--spacer));
-        overflow: hidden;
+      .section-segment {
+        @apply z-10 gap-8 py-16;
       }
 
-      &.reverse {
-        --inset-top: var(--spacer);
-        --inset-left: var(--gutter);
-        --inset-right: var(--gutter);
-        --inset-bottom: 0px;
+      .section-content {
+        @apply max-w-screen-md gap-6;
+      }
 
-        &:not(.structure-split) {
-          .segment {
-            order: 999;
-          }
+      &.frame-fill {
+        @apply pb-28 pt-14 first:pt-0;
+      }
+
+      &.frame-viewport {
+        @apply min-h-screen pb-28 pt-14;
+
+        .section-container {
+          @apply justify-center;
         }
+      }
 
-        @media (min-width: 1024px) {
-          .segment {
-            order: 999;
-          }
+      &.frame-panel {
+        @apply px-gutter first:pt-gutter;
+
+        .section-container {
+          @apply relative overflow-hidden rounded-lg border bg-card;
+        }
+      }
+
+      &.position-contain {
+        .image {
+          @apply h-auto w-full object-contain;
+        }
+      }
+
+      &.position-background {
+        .image {
+          @apply absolute inset-0 h-full max-h-none w-full max-w-none object-cover opacity-30;
         }
       }
 
-      &.structure-column {
-        display: flex;
-        flex-direction: column;
+      &.position-inset {
+        .section-container {
+          @apply px-0;
+        }
 
-        &.align-center {
-          align-items: center;
+        .section-segment {
+          @apply px-gutter;
+        }
 
-          .segment {
-            align-items: center;
-            text-align: center;
-          }
+        .image {
+          @apply h-auto w-full object-cover;
         }
       }
 
-      &.structure-split {
-        display: grid;
-        grid-template-columns: 1fr;
-        width: 100%;
+      &.dark {
+        @apply bg-background;
+      }
 
-        @media (min-width: 1024px) {
-          --inset-top: var(--spacer);
-          --inset-left: 0px;
-          --inset-right: var(--gutter);
-          --inset-bottom: var(--spacer);
+      &.structure-left {
+        .section-container,
+        .section-segment,
+        .section-content {
+          @apply flex flex-col items-start;
+        }
+      }
 
-          grid-auto-columns: 1fr;
-          grid-auto-flow: column;
+      &.structure-center {
+        .section-container,
+        .section-segment,
+        .section-content {
+          @apply flex flex-col items-center text-center;
+        }
+      }
 
-          &.reverse {
-            --inset-right: 0px;
-            --inset-left: var(--gutter);
-          }
+      &.structure-split {
+        .section-container {
+          @apply grid auto-cols-fr gap-x-14 lg:grid-flow-col lg:items-center;
         }
 
-        &.align-center {
-          align-items: center;
+        .section-segment,
+        .section-content {
+          @apply flex flex-col items-start;
         }
       }
 
       &.structure-spread {
-        display: flex;
-        flex-direction: column;
+        .section-container {
+          @apply flex flex-col;
+        }
 
-        .segment {
-          flex-direction: row;
-          justify-content: space-between;
-          width: 100%;
+        .section-segment {
+          @apply flex w-full flex-row flex-wrap items-end justify-between;
         }
+      }
 
-        &.align-center {
-          .segment {
-            align-items: center;
+      &.reverse {
+        &:not(.structure-split) {
+          .section-segment {
+            @apply order-last;
+          }
+        }
 
-            .writeup {
-              align-items: flex-start;
-            }
+        @media (min-width: 1024px) {
+          .section-segment {
+            @apply order-last;
           }
         }
       }

package/src/components/Select.astro

@@ -15,34 +15,36 @@ interface Props extends GlobalProps, HTMLAttributes<'select'> {
 const {
   label,
   placeholder,
+  name = label || placeholder,
+  id = name,
+  size = 'md',
   options,
   value,
-  name,
-  required,
-  disabled,
-  onchange,
   ...rest
 } = Astro.props
 ---
 
 <Element
   class:list="select"
-  {...rest}
+  as="label"
+  for={id}
+  {size}
 >
   <Label
     for={name}
     text={label}
   />
+  <Icon name="chevron-down" />
   <Element
+    class:list="select-select"
     as="select"
-    if={name || options}
-    id={name}
+    if={id}
+    {id}
     {name}
-    {required}
-    {disabled}
-    {onchange}
+    {...rest}
   >
     <Element
+      class:list="select-option"
       as="option"
       value={placeholder}
       set:html={placeholder}
@@ -52,6 +54,7 @@ const {
     {
       options?.map((option: any) => (
         <Element
+          class:list="select-option"
           as="option"
           selected={value === option}
           set:html={option}
@@ -61,67 +64,53 @@ const {
     }
     <slot />
   </Element>
-  <Icon name="chevron-down" />
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .select {
-      display: flex;
-      position: relative;
-      flex-direction: column;
-      gap: var(--space-1);
-      width: 100%;
+      @apply relative flex flex-col gap-1.5;
 
       .icon {
-        position: absolute;
-        right: var(--space-4);
-        bottom: var(--space-4);
-        width: var(--text-2);
-        height: var(--text-2);
-        pointer-events: none;
+        @apply pointer-events-none absolute;
       }
 
-      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;
+      .select-select {
+        @apply flex w-full appearance-none rounded-md border border-input bg-background pr-10 text-sm ring-offset-background;
+        @apply file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground;
+        @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+        @apply disabled:pointer-events-none disabled:opacity-50;
+        @apply [&[readonly]]:pointer-events-none;
+      }
 
-        &:hover {
-          outline: none;
+      &.size-sm {
+        .select-select {
+          @apply h-9 px-2.5 py-1.5 pr-9 text-xs;
         }
 
-        &:focus {
-          outline: none;
-          box-shadow: inset 0 0 0 2px var(--color-7);
-          border-color: var(--color-7);
+        .icon {
+          @apply bottom-2 right-2;
         }
+      }
 
-        &:disabled {
-          opacity: 50%;
-          cursor: not-allowed;
-          pointer-events: none;
+      &.size-md {
+        .select-select {
+          @apply h-10 px-3 py-2 pr-10 text-sm;
+        }
+
+        .icon {
+          @apply bottom-2.5 right-2.5;
         }
       }
 
-      option {
-        color: var(--text);
-        font-size: var(--text-2);
-        line-height: 1;
+      &.size-lg {
+        .select-select {
+          @apply h-12 px-3.5 py-2.5 pr-11 text-base;
+        }
+
+        .icon {
+          @apply bottom-3.5 right-3.5;
+        }
       }
     }
   }