fulldev-ui 0.3.8 → 0.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "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/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,20 +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?: 'small' | 'medium' | 'large' | 'full'
+  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
@@ -22,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">
@@ -42,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);
@@ -79,16 +86,12 @@ const { as = 'a', variant = 'solid', contrast, icon, ...rest } = Astro.props
       }
     }
 
-    &.radius-small {
-      border-radius: var(--radius-1);
-    }
-
-    &.radius-medium {
-      border-radius: var(--radius-2);
+    &.radius-none {
+      border-radius: 0;
     }
 
-    &.radius-large {
-      border-radius: var(--radius-3);
+    &.radius-auto {
+      border-radius: var(--radius-1);
     }
 
     &.radius-full {

package/src/components/base/Image.astro

@@ -9,7 +9,7 @@ type Props = HTMLAttributes<'img'> & {
   frame?: 'inset'
   width?: number | 1920
   height?: number | 1920
-  radius?: 'small' | 'medium' | 'large' | 'full'
+  radius?: 'none' | 'auto' | 'full'
 }
 
 function getAltBySrc(): string {
@@ -27,8 +27,8 @@ const {
   position,
   frame,
   width,
+  radius = 'none',
   height,
-  radius,
   ...rest
 } = Astro.props
 ---
@@ -82,17 +82,14 @@ const {
       mask-image: linear-gradient(to top, transparent 0%, black 100%);
     }
 
-    &.radius-small {
-      border-radius: var(--radius-1);
+    &.radius-none {
+      border-radius: 0;
     }
 
-    &.radius-medium {
-      border-radius: var(--radius-2);
+    &.radius-auto {
+      border-radius: var(--radius-1);
     }
 
-    &.radius-large {
-      border-radius: var(--radius-3);
-    }
 
     &.radius-full {
       border-radius: 9999px;

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-2);
+    }
   }
 </style>

package/src/components/segment/Header.astro

@@ -6,6 +6,7 @@ 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

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()