fulldev-ui 0.3.6 → 0.3.8

package/package.json

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

package/src/components/_Component.astro

@@ -28,6 +28,7 @@ const {
   structure,
   text,
   html,
+  radius,
   level,
   ...rest
 } = Astro.props
@@ -62,6 +63,7 @@ const render =
           [`ratio-${ratio}`]: ratio,
           [`color-${color}`]: color,
           [`underline-${underline}`]: underline,
+          [`radius-${radius}`]: radius,
         },
       ]}
       {...rest}

package/src/components/_todo/Writeup.astro

@@ -1,5 +1,5 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+<!-- ---
+import type { ComponentProps,HTMLTag,Polymorphic } from 'astro/types'
 import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
@@ -21,4 +21,4 @@ const { as = 'div', ...rest } = Astro.props
 
   @include component('writeup') {
   }
-</style>
+</style> -->

package/src/components/base/Avatar.astro

@@ -0,0 +1,23 @@
+---
+import type { ComponentProps } from 'astro/types'
+import { Image } from 'fulldev-ui'
+
+type Props = Omit<ComponentProps<typeof Image>, 'position' | 'frame'> & {}
+
+const { ...rest } = Astro.props
+---
+
+<Image
+  class="avatar"
+  {...rest}
+/>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('avatar') {
+    border-radius: var(--radius-3);
+    max-width: calc(2.8 * var(--space-6));
+    height: auto;
+  }
+</style>

package/src/components/base/Button.astro

@@ -6,6 +6,7 @@ import Icon from './Icon.astro'
 type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
   size?: 'sm' | 'md' | 'lg'
   color?: 'base' | 'brand'
+  radius?: 'small' | 'medium' | 'large' | 'full'
   contrast?: boolean
   html?: string
   text?: string
@@ -77,5 +78,21 @@ const { as = 'a', variant = 'solid', contrast, icon, ...rest } = Astro.props
         color: var(--colo-12);
       }
     }
+
+    &.radius-small {
+      border-radius: var(--radius-1);
+    }
+
+    &.radius-medium {
+      border-radius: var(--radius-2);
+    }
+
+    &.radius-large {
+      border-radius: var(--radius-3);
+    }
+
+    &.radius-full {
+      border-radius: 9999px;
+    }
   }
 </style>

package/src/components/base/Image.astro

@@ -9,6 +9,7 @@ type Props = HTMLAttributes<'img'> & {
   frame?: 'inset'
   width?: number | 1920
   height?: number | 1920
+  radius?: 'small' | 'medium' | 'large' | 'full'
 }
 
 function getAltBySrc(): string {
@@ -27,6 +28,7 @@ const {
   frame,
   width,
   height,
+  radius,
   ...rest
 } = Astro.props
 ---
@@ -43,6 +45,7 @@ const {
           as="img"
           {frame}
           {position}
+          {radius}
           {...rest}
         />
       )}
@@ -79,6 +82,22 @@ const {
       mask-image: linear-gradient(to top, transparent 0%, black 100%);
     }
 
+    &.radius-small {
+      border-radius: var(--radius-1);
+    }
+
+    &.radius-medium {
+      border-radius: var(--radius-2);
+    }
+
+    &.radius-large {
+      border-radius: var(--radius-3);
+    }
+
+    &.radius-full {
+      border-radius: 9999px;
+    }
+
     &.position-background {
       position: absolute;
       top: 0;

package/src/components/base/Logo.astro

@@ -1,34 +1,23 @@
 ---
-import type { ComponentProps, HTMLTag } from 'astro/types'
-import Children from '../_Children.astro'
-import Component from '../_Component.astro'
+import type { ComponentProps } from 'astro/types'
+import { Image } from 'fulldev-ui'
 
-type Props<As extends HTMLTag = 'a'> = ComponentProps<typeof Children>
+type Props = Omit<ComponentProps<typeof Image>, 'position' | 'frame'> & {}
 
-const { as = 'a', href = '/', src, ...rest } = Astro.props
+const { ...rest } = Astro.props
 ---
 
-<Component
-  class:list={['logo']}
-  {href}
-  {as}
+<Image
+  class="logo"
   {...rest}
->
-  <slot name="before" />
-  <Children {...rest} />
-  <slot />
-</Component>
+/>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
 
   @include component('logo') {
-    .image {
-      display: block !important;
-      width: auto !important;
-      height: var(--space-6) !important;
-      object-fit: contain !important;
-      color: var(--12) !important;
-    }
+    max-width: calc(15 * var(--space-2));
+    height: 100%;
+    object-fit: contain;
   }
 </style>

package/src/components/base/Rating.astro

@@ -28,8 +28,6 @@ const getIcon = (count: number) => {
     [1, 2, 3, 4, 5].map((_, i) => (
       <>
         <Icon
-          size={size}
-          compact={compact}
           name={getIcon(i + 1)}
           class:list={'rating-icon-solid'}
         />

package/src/components/base/select/Select.astro

@@ -42,7 +42,7 @@ const {
 >
   <Label
     for={name}
-    {...typeof label === 'string' ? { text: label } : label}
+    text={label}
   />
   <SelectElement
     id={name}

package/src/components/segment/Header.astro

@@ -8,6 +8,7 @@ type Props<As extends HTMLTag = 'header'> = Polymorphic<{ as: As }> & {
   variant?: 'ghost' | 'subtle' | 'soft' | 'surface' | 'outline'
   frame?: 'fill' | 'panel'
   align?: 'start' | 'center' | 'end'
+  compact?: boolean
 }
 
 const {
@@ -43,8 +44,6 @@ const {
     top: 0;
     right: 0;
     left: 0;
-    justify-content: space-between;
-    align-items: center;
     z-index: 10;
     border-bottom: 1px solid var(--border);
     background-color: var(--background);
@@ -82,17 +81,5 @@ const {
     &.position-sticky {
       position: sticky;
     }
-
-    &.align-start {
-      align-items: flex-start;
-    }
-
-    &.align-center {
-      align-items: center;
-    }
-
-    &.align-end {
-      align-items: flex-end;
-    }
   }
 </style>