fulldev-ui 0.3.7 → 0.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",
@@ -31,9 +31,12 @@
   "devDependencies": {
     "@astrojs/check": "^0.5.9",
     "@types/flat": "^5.0.5",
-    "astro": "^4.5.5",
     "unocss": "^0.61.0"
   },
+  "peerDependencies": {
+    "astro": "^4.5.5",
+    "typescript": "^5.4.3"
+  },
   "dependencies": {
     "@iconify-json/tabler": "^1.1.109",
     "astro-seo": "^0.8.3",

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/Badge.astro

@@ -5,21 +5,22 @@ import Icon from './Icon.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
   variant?: 'solid' | 'surface' | 'soft' | 'outline' | 'ghost'
+  radius?: 'none' | 'auto' | 'full'
   size?: 'sm' | 'md' | 'lg'
   color?: 'base' | 'brand'
   contrast?: boolean
-  compact?: boolean
   html?: string
   text?: string
   icon?: string
 }
 
-const { variant = 'outline', icon, ...rest } = Astro.props
+const { variant = 'outline', radius = 'auto', icon, ...rest } = Astro.props
 ---
 
 <Component
   class:list={['badge']}
   {variant}
+  {radius}
   {...rest}
 >
   <slot />
@@ -38,7 +39,6 @@ const { variant = 'outline', icon, ...rest } = Astro.props
     gap: var(--space-2);
     transition: var(--transition);
     border: 1px solid var(--border);
-    border-radius: var(--radius-1);
     background-color: var(--background);
     padding-right: var(--space-3);
     padding-left: var(--space-3);
@@ -51,5 +51,17 @@ const { variant = 'outline', icon, ...rest } = Astro.props
     text-align: center;
     text-decoration: none;
     white-space: nowrap;
+
+    &.radius-none {
+      border-radius: 0;
+    }
+
+    &.radius-auto {
+      border-radius: var(--radius-1);
+    }
+
+    &.radius-full {
+      border-radius: 9999px;
+    }
   }
 </style>

package/src/components/base/Button.astro

@@ -1,19 +1,27 @@
 ---
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import type { HTMLTag, Polymorphic } from 'astro/types'
 import Component from '../_Component.astro'
 import Icon from './Icon.astro'
 
 type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
+  variant?: 'solid' | 'soft' | 'surface' | 'outline' | 'ghost' | 'link'
   size?: 'sm' | 'md' | 'lg'
   color?: 'base' | 'brand'
+  radius?: 'none' | 'auto' | 'full'
   contrast?: boolean
   html?: string
   text?: string
-  variant?: 'solid' | 'soft' | 'surface' | 'outline' | 'ghost' | 'link'
-  icon?: ComponentProps<typeof Icon> | ComponentProps<typeof Icon>['name']
+  icon?: string
 }
 
-const { as = 'a', variant = 'solid', contrast, icon, ...rest } = Astro.props
+const {
+  as = 'a',
+  variant = 'solid',
+  radius = 'auto',
+  contrast,
+  icon,
+  ...rest
+} = Astro.props
 ---
 
 <Component
@@ -21,10 +29,11 @@ const { as = 'a', variant = 'solid', contrast, icon, ...rest } = Astro.props
   {as}
   {variant}
   {contrast}
+  {radius}
   {...rest}
 >
   <slot />
-  {typeof icon === 'string' ? <Icon name={icon} /> : <Icon {...icon} />}
+  <Icon name={icon} />
 </Component>
 
 <style is:global lang="scss">
@@ -41,7 +50,6 @@ const { as = 'a', variant = 'solid', contrast, icon, ...rest } = Astro.props
     cursor: pointer;
     outline: none !important;
     border: 1px solid var(--border);
-    border-radius: var(--radius-1);
     background-color: var(--background);
     padding-right: var(--space-4);
     padding-left: var(--space-4);
@@ -77,5 +85,17 @@ const { as = 'a', variant = 'solid', contrast, icon, ...rest } = Astro.props
         color: var(--colo-12);
       }
     }
+
+    &.radius-none {
+      border-radius: 0;
+    }
+
+    &.radius-auto {
+      border-radius: var(--radius-1);
+    }
+
+    &.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?: 'none' | 'auto' | 'full'
 }
 
 function getAltBySrc(): string {
@@ -26,6 +27,7 @@ const {
   position,
   frame,
   width,
+  radius = 'none',
   height,
   ...rest
 } = Astro.props
@@ -43,6 +45,7 @@ const {
           as="img"
           {frame}
           {position}
+          {radius}
           {...rest}
         />
       )}
@@ -79,6 +82,19 @@ const {
       mask-image: linear-gradient(to top, transparent 0%, black 100%);
     }
 
+    &.radius-none {
+      border-radius: 0;
+    }
+
+    &.radius-auto {
+      border-radius: var(--radius-1);
+    }
+
+
+    &.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/segment/Card.astro

@@ -5,6 +5,7 @@ import Component from '../_Component.astro'
 type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
   structure?: 'column' | 'group' | 'split' | 'spread' | 'row'
   align?: 'start' | 'center' | 'end' | 'stretch'
+  radius?: 'none' | 'auto'
   frame?: 'panel' | 'none'
   color?: 'base' | 'brand'
   contrast?: boolean
@@ -25,6 +26,7 @@ const {
   frame = 'panel',
   structure = 'column',
   compact = true,
+  radius = 'auto',
   variant = 'subtle',
   ...rest
 } = Astro.props
@@ -34,6 +36,7 @@ const {
   class:list={['card']}
   {compact}
   {href}
+  {radius}
   {structure}
   {variant}
   {frame}
@@ -82,9 +85,16 @@ const {
       --inner-y: var(--space-7);
 
       border: 1px solid var(--border);
-      border-radius: var(--radius-3);
       background-color: var(--background);
       padding: var(--inner-y) var(--inner-x);
     }
+
+    &.radius-none {
+      border-radius: 0;
+    }
+
+    &.radius-auto {
+      border-radius: var(--radius-1);
+    }
   }
 </style>

package/src/components/segment/Header.astro

@@ -6,8 +6,10 @@ type Props<As extends HTMLTag = 'header'> = Polymorphic<{ as: As }> & {
   structure?: 'spread' | 'row' | 'column'
   position?: 'relative' | 'sticky' | 'fixed' | 'absolute'
   variant?: 'ghost' | 'subtle' | 'soft' | 'surface' | 'outline'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   frame?: 'fill' | 'panel'
   align?: 'start' | 'center' | 'end'
+  compact?: boolean
 }
 
 const {
@@ -43,8 +45,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 +82,5 @@ const {
     &.position-sticky {
       position: sticky;
     }
-
-    &.align-start {
-      align-items: flex-start;
-    }
-
-    &.align-center {
-      align-items: center;
-    }
-
-    &.align-end {
-      align-items: flex-end;
-    }
   }
 </style>

package/src/components/structure/Column.astro

@@ -25,8 +25,6 @@ const { align = 'start', ...rest } = Astro.props
   @import '../../css/space.scss';
 
   @include component('column') {
-    @include space-y;
-
     display: flex;
     position: relative;
     flex-direction: column;
@@ -47,5 +45,7 @@ const { align = 'start', ...rest } = Astro.props
     &.align-end {
       align-items: flex-end;
     }
+
+    @include space-y;
   }
 </style>

package/src/components/structure/Row.astro

@@ -25,10 +25,10 @@ const { align = 'center', ...rest } = Astro.props
   @import '../../css/space.scss';
 
   @include component('row') {
-    @include space-x;
-
     display: flex;
 
+    @include space-x;
+
     &.align-start {
       align-items: flex-start;
     }

package/src/index.ts

@@ -1,6 +1,3 @@
-// Schemas and utils
-export * from './schemas/schemas'
-
 // Base components
 export { default as Badge } from './components/base/Badge.astro'
 export { default as Button } from './components/base/Button.astro'
@@ -13,6 +10,7 @@ export { default as Checkbox } from './components/base/checkbox/Checkbox.astro'
 export { default as Input } from './components/base/input/Input.astro'
 export { default as InputElement } from './components/base/input/InputElement.astro'
 // export { default as Radio } from './components/base/radio/Radio.astro'
+export { default as Avatar } from './components/base/Avatar.astro'
 export { default as Select } from './components/base/select/Select.astro'
 export { default as SelectElement } from './components/base/select/SelectElement.astro'
 export { default as SelectOption } from './components/base/select/SelectOption.astro'

package/src/schemas/collection-old-schemas.ts

@@ -1,90 +0,0 @@
-import type { ZodRawShape } from 'astro/zod'
-import {
-  reference,
-  z,
-  type AnyEntryMap,
-  type ContentEntryMap,
-  type DataEntryMap,
-  type ValidContentEntrySlug,
-} from 'astro:content'
-
-export const pathSchema = <C extends keyof AnyEntryMap>(collection: C) =>
-  z
-    .string()
-    .transform((value) => {
-      const fullpath = value.split(`${collection}/`).pop()
-      const slug = fullpath?.split('.').shift()
-      return slug
-    })
-    .pipe(reference(collection))
-
-const buttonSchema = z
-  .object({
-    text: z.string(),
-    html: z.string(),
-    href: z.string(),
-  })
-  .partial()
-  .passthrough()
-
-const baseSchema = z
-  .object({
-    image: z.string(),
-    images: z.string().array(),
-    rating: z.number(),
-    badge: z.string(),
-    tagline: z.string(),
-    heading: z.string(),
-    paragraph: z.string(),
-    list: z.string().array(),
-    price: z.string().or(z.number()),
-    button: buttonSchema,
-    buttons: buttonSchema.array(),
-  })
-  .partial()
-  .passthrough()
-
-const blockSchema = <R extends ZodRawShape>(references: R) =>
-  baseSchema
-    .extend({
-      card: baseSchema,
-      cards: baseSchema.array(),
-    })
-    .extend(references)
-    .partial()
-    .passthrough()
-
-export const pageSchema = <R extends ZodRawShape>(references: R) =>
-  baseSchema
-    .extend({
-      title: z.string(),
-      description: z.string(),
-      block: blockSchema(references),
-      hero: blockSchema(references),
-      cta: blockSchema(references),
-      blocks: blockSchema(references).array(),
-      main: z.object({}).catchall(blockSchema(references)).partial(),
-      head: z
-        .object({
-          title: z.string(),
-          description: z.string(),
-          image: z.string().optional(),
-        })
-        .partial(),
-    })
-    .extend(references)
-    .partial()
-    .passthrough()
-
-export type Reference<C extends keyof AnyEntryMap> =
-  C extends keyof ContentEntryMap
-    ? {
-        collection: C
-        slug: ValidContentEntrySlug<C>
-      }
-    : C extends keyof DataEntryMap
-      ? {
-          collection: C
-          id: keyof DataEntryMap[C]
-        }
-      : never

package/src/schemas/schemas.ts

@@ -1,57 +0,0 @@
-import { z } from 'astro/zod'
-
-export const pathSchema = z.string().transform((value) => {
-  const path = value.split(`content`).pop()
-  const slug = path?.split('/').pop()?.split('.').shift()
-  return slug
-})
-
-export const buttonSchema = z
-  .object({
-    text: z.string(),
-    html: z.string(),
-    href: z.string(),
-  })
-  .partial()
-  .passthrough()
-
-const baseSchema = z
-  .object({
-    image: z.string(),
-    images: z.string().array(),
-    icon: z.string(),
-    rating: z.number(),
-    badge: z.string(),
-    tagline: z.string(),
-    heading: z.string(),
-    text: z.string(),
-    list: z.string().array(),
-    price: z.string().or(z.number()),
-    button: buttonSchema,
-    buttons: buttonSchema.array(),
-  })
-  .partial()
-  .passthrough()
-
-export const blockSchema = baseSchema
-  .extend({
-    card: baseSchema,
-    cards: baseSchema.array(),
-  })
-  .partial()
-  .passthrough()
-
-export const pageSchema = baseSchema
-  .extend({
-    title: z.string(),
-    description: z.string(),
-    head: z
-      .object({
-        title: z.string(),
-        description: z.string(),
-        image: z.string().optional(),
-      })
-      .partial(),
-  })
-  .partial()
-  .passthrough()