fulldev-ui 0.3.13 → 0.3.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.3.13",
+  "version": "0.3.15",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",

package/src/components/base/Avatar.astro

@@ -2,13 +2,18 @@
 import type { ComponentProps } from 'astro/types'
 import { Image } from 'fulldev-ui'
 
-type Props = Omit<ComponentProps<typeof Image>, 'position' | 'frame'> & {}
+type Props = Omit<ComponentProps<typeof Image>, 'position' | 'frame'> & {
+  radius?: 'none' | 'auto' | 'full'
+  variant?: 'subtle' | 'outline' | 'ghost'
+}
 
-const { ...rest } = Astro.props
+const { radius = 'auto', variant = 'ghost', ...rest } = Astro.props
 ---
 
 <Image
   class="avatar"
+  {variant}
+  {radius}
   {...rest}
 />
 
@@ -16,8 +21,23 @@ const { ...rest } = Astro.props
   @import '../../css/utils.scss';
 
   @include component('avatar') {
+    display: block;
+    border: 1px solid var(--border);
     border-radius: var(--radius-3);
-    max-width: calc(2.8 * var(--space-6));
-    height: auto;
+    width: calc(var(--text-1) + 2 * var(--space-4));
+    height: calc(var(--text-1) + 2 * var(--space-4));
+    object-fit: cover;
+
+    &.radius-none {
+      border-radius: 0;
+    }
+
+    &.radius-auto {
+      border-radius: var(--radius-1);
+    }
+
+    &.radius-full {
+      border-radius: 9999px;
+    }
   }
 </style>

package/src/components/base/Image.astro

@@ -10,6 +10,7 @@ type Props = HTMLAttributes<'img'> & {
   width?: number | 1920
   height?: number | 1920
   radius?: 'none' | 'auto' | 'full'
+  mask?: 'sm' | 'md' | 'lg'
 }
 
 function getAltBySrc(): string {
@@ -77,11 +78,13 @@ const {
       mask-image: linear-gradient(to top, transparent 0%, black 30%);
     }
 
-    &.mask {
+    &.mask-md {
       -webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);
       mask-image: linear-gradient(to top, transparent 0%, black 100%);
     }
 
+    
+
     &.radius-none {
       border-radius: 0;
     }

package/src/components/base/input/InputElement.astro

@@ -22,6 +22,7 @@ const {
   {variant}
   {placeholder}
   {name}
+  {type}
   {...rest}
 />
 

package/src/components/experimental/Channel.astro

@@ -0,0 +1,50 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import { Box, Button, Column, Heading, Text } from 'fulldev-ui'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
+  if?: any
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  color?: 'base' | 'brand'
+  variant?: 'solid' | 'surface' | 'soft' | 'outline'
+  structure?: 'row' | 'column'
+  level?: 1 | 2 | 3 | 4 | 5 | 6
+  compact?: boolean
+  heading?: string
+  text?: string
+  icon?: string
+  href?: string
+}
+
+const {
+  variant = 'soft',
+  structure = 'row',
+  color = 'brand',
+  compact = true,
+  level = 5,
+  heading,
+  text,
+  icon,
+  href,
+  ...rest
+} = Astro.props
+---
+
+<Box
+  {structure}
+  {...rest}
+>
+  <Button
+    {variant}
+    {color}
+    {href}
+    {icon}
+  />
+  <Column>
+    <Heading
+      {level}
+      html={heading}
+    />
+    <Text html={text} />
+  </Column>
+</Box>

package/src/components/experimental/Price.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Component from '../_Component.astro'
+
+type Props<As extends HTMLTag = 'p'> = Polymorphic<{ as: As }> & {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  color?: 'base' | 'brand'
+  contrast?: boolean
+  value?: number
+}
+
+const { as = 'p', value, ...rest } = Astro.props
+---
+
+<Component
+  if={value}
+  class:list={['price']}
+  {as}
+  {...rest}
+>
+  €{value?.toFixed(2).replace('.', ',')}
+</Component>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('price') {
+    margin: 0;
+    max-width: calc(var(--space-4) * 36);
+    color: var(--text, var(--color-11));
+    font-weight: var(--font-weight);
+    font-size: var(--text-5);
+    line-height: 1.25;
+    font-family: var(--font-family);
+  }
+</style>

package/src/components/segment/Footer.astro

@@ -60,6 +60,7 @@ const {
       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);

package/src/components/segment/Header.astro

@@ -42,33 +42,40 @@ const {
     --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
 
     display: flex;
+    position: relative;
     top: 0;
     right: 0;
     left: 0;
     z-index: 10;
+    margin: var(--outer-y) var(--outer-x);
     border-bottom: 1px solid var(--border);
     background-color: var(--background);
-    padding-top: var(--space-4);
-    padding-bottom: var(--space-4);
+    padding: var(--inner-y) var(--inner-x);
     width: 100%;
+    max-width: calc(100% - (2 * var(--outer-x)));
 
     &.frame-fill {
-      padding-top: var(--space-4);
-      padding-right: var(--gutter);
-      padding-bottom: var(--space-4);
-      padding-left: var(--gutter);
+      --inner-x: var(--gutter);
+      --outer-x: 0;
+      --inner-y: var(--space-3);
+      --outer-y: 0;
+    }
+
+    &.frame-contain {
+      --inner-x: max(4vw, var(--space-3));
+      --outer-x: max(0px, calc(var(--gutter) - var(--inner-x)));
+      --inner-y: var(--space-3);
+      --outer-y: 0;
     }
 
     &.frame-panel {
-      margin-top: var(--space-2);
-      margin-right: var(--gutter);
-      margin-left: var(--gutter);
+      --inner-x: min(4vw, var(--space-3));
+      --outer-x: var(--gutter);
+      --inner-y: var(--space-3);
+      --outer-y: var(--space-3);
+
       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 {

package/src/components/structure/Bento.astro

@@ -25,13 +25,19 @@ const { ...rest } = Astro.props
     display: grid;
     position: relative;
     grid-template-columns: 1fr;
+    gap: var(--space-4);
     width: 100%;
 
     @media (min-width: 1024px) {
-      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-columns: repeat(5, 1fr);
 
-      & > *:nth-child(2n) {
-        grid-column-start: span 2;
+      & > * {
+        grid-column: span 2;
+      }
+
+      & > *:nth-child(3n + 2),
+      & > *:nth-child(3n + 3) {
+        grid-column: span 3;
       }
     }
   }

package/src/components/structure/Column.astro

@@ -37,7 +37,7 @@ const { align = 'start', ...rest } = Astro.props
       align-items: center;
       text-align: center;
 
-      & > * > * {
+      & > *:not(.align-center) > *:not(.align-center) {
         text-align: left;
       }
     }

package/src/components/typography/Label.astro

@@ -33,5 +33,6 @@ const { as = 'label', ...rest } = Astro.props
     line-height: 1;
     font-family: var(--font-family);
     text-align: left;
+    white-space: nowrap;
   }
 </style>

package/src/css/space.scss

@@ -45,7 +45,9 @@
 
 @mixin space-y {
   > {
-    .full + .full {
+    .full + .full,
+    .full + .box,
+    .full + .masonry {
       margin-top: var(--space-6);
     }
 
@@ -53,6 +55,7 @@
     .full + .row,
     .full + .wrap,
     .full + .button,
+    .full + .price,
     .full + .switch {
       margin-top: var(--space-5);
     }
@@ -86,6 +89,11 @@
       margin-top: var(--space-2);
     }
 
+    .rating + .text,
+    .text + .rating {
+      margin-top: var(--space-1);
+    }
+
     .image + .full,
     .icon + .full {
       margin-top: var(--space-6);

package/src/index.ts

@@ -59,6 +59,10 @@ export { default as Split } from './components/structure/Split.astro'
 export { default as Spread } from './components/structure/Spread.astro'
 export { default as Wrap } from './components/structure/Wrap.astro'
 
+// Experimental components
+export { default as Channel } from './components/experimental/Channel.astro'
+export { default as Price } from './components/experimental/Price.astro'
+
 // Utility components
 export { default as Block } from './components/_Block.astro'
 export { default as Blocks } from './components/_Blocks.astro'