fulldev-ui 0.6.0-beta.11 → 0.6.0-beta.13

package/package.json

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

package/src/blocks/Header.astro

@@ -107,7 +107,7 @@ const {
 <style is:global>
   @layer fulldev {
     .header {
-      @apply sticky left-0 top-0 z-20 flex h-14 w-full items-center overflow-hidden border-b bg-background;
+      @apply sticky left-0 top-0 z-20 flex h-14 w-full items-center border-b bg-background;
       height: var(--header-height);
 
       &,

package/src/blocks/Hero1.astro

@@ -2,17 +2,33 @@
 import type { ComponentProps } from 'astro/types'
 import Badge from 'fulldev-ui/components/Badge.astro'
 import Buttons from 'fulldev-ui/components/Buttons.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 Label from 'fulldev-ui/components/Label.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Rating from 'fulldev-ui/components/Rating.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
-import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Group from 'fulldev-ui/structures/Group.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
-import Writeup from 'fulldev-ui/structures/Writeup.astro'
 
-interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+interface Props {
+  depth?: 1 | 2 | undefined
+  badge?: ComponentProps<typeof Badge> | undefined
+  tagline?: string | undefined
+  heading?: string | undefined
+  paragraph?: string | undefined
+  content?: string | undefined
+  image?: ComponentProps<typeof Image> | undefined
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+  proof?: {
+    rating?: number | undefined
+    images?: ComponentProps<typeof Image>[] | undefined
+    text?: string | undefined
+  }
+}
 
 const {
   badge,
@@ -20,9 +36,9 @@ const {
   heading,
   paragraph,
   content,
-  button,
   buttons,
   image,
+  proof,
   ...rest
 } = Astro.props
 ---
@@ -32,7 +48,27 @@ const {
   {...rest}
 >
   <Container>
-    <Writeup align="center">
+    <Prose class="flex flex-col items-center text-center">
+      <Element class="flex items-center">
+        {
+          proof?.images?.map((image) => (
+            <Image
+              class="-mr-5 h-11 w-11 rounded-full object-cover last-of-type:mr-2"
+              {...image}
+            />
+          ))
+        }
+        <Element class="flex flex-col gap-1">
+          <Rating
+            score={proof?.rating}
+            size="sm"
+          />
+          <Label
+            size="md"
+            text={proof?.text}
+          />
+        </Element>
+      </Element>
       <Badge
         size="lg"
         {...badge}
@@ -54,11 +90,10 @@ const {
       <Group>
         <Buttons
           size="lg"
-          {button}
           {buttons}
         />
       </Group>
-    </Writeup>
+    </Prose>
     <Image {...image} />
   </Container>
 </Section>

package/src/schemas/block.ts

@@ -53,6 +53,13 @@ export const blockSchema = z
       .strict()
       .array()
       .optional(),
+    proof: z
+      .object({
+        rating: z.number().optional(),
+        images: imageSchema.array().optional(),
+        text: z.string().optional(),
+      })
+      .optional(),
   })
   .strict()
 

package/src/structures/Drawer.astro

@@ -42,7 +42,6 @@ const render = slot?.trim().length > 0
       >
         <Fragment set:html={slot} />
       </Element>
-
       <label
         for={id}
         class="drawer-backdrop"
@@ -62,7 +61,7 @@ const render = slot?.trim().length > 0
     }
 
     .drawer-backdrop {
-      @apply pointer-events-none invisible fixed left-0 top-0 z-30 h-full w-full bg-black opacity-0 transition-opacity;
+      @apply pointer-events-none invisible fixed left-0 top-0 z-30 h-screen w-full bg-black opacity-0 transition-opacity;
 
       &:is(.drawer-checkbox:checked ~ &) {
         @apply pointer-events-auto visible opacity-50;
@@ -70,7 +69,7 @@ const render = slot?.trim().length > 0
     }
 
     .drawer-body {
-      @apply fixed bottom-0 left-0 top-0 z-40 h-full w-80 max-w-[75vw] -translate-x-full overflow-y-auto rounded-r-lg border border-l-0 bg-background shadow-2xl transition-transform;
+      @apply fixed bottom-0 left-0 top-0 z-40 h-screen w-80 max-w-[75vw] -translate-x-full overflow-y-auto rounded-r-lg border border-l-0 bg-background shadow-2xl transition-transform;
       @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
 
       &:is(.drawer-checkbox:checked ~ &) {

package/src/structures/Prose.astro

@@ -85,7 +85,7 @@ const { ...rest } = Astro.props
       }
 
       > img,
-      > * > img {
+      > p > img {
         @apply my-12 rounded-md;
       }