fulldev-ui 0.6.0-beta.9 → 0.6.0

package/src/schemas/page.ts

@@ -1,36 +1,22 @@
 import { z } from 'astro:content'
 import { blockSchema } from 'fulldev-ui/schemas/block.ts'
-import { buttonSchema } from 'fulldev-ui/schemas/button.ts'
 import { headSchema } from 'fulldev-ui/schemas/head.ts'
-import { imageSchema } from 'fulldev-ui/schemas/image.ts'
-import { pathSchema } from 'fulldev-ui/schemas/path.ts'
+import { menuSchema } from 'fulldev-ui/schemas/menu.ts'
 
-export const pageSchema = z
-  .object({
+export const pageSchema = blockSchema
+  .extend({
     _layout: z.string().optional(),
     _schema: z.string().optional(),
-    href: z.string().optional(),
-    draft: z.boolean().optional(),
     title: z.string().optional(),
     description: z.string().optional(),
-    list: z.string().array().optional(),
-    price: z.number().optional(),
-    soldout: z.boolean().optional(),
-    order: z.number().optional(),
-    variants: z.record(z.string(), z.string().array()).optional(),
-    image: imageSchema.optional(),
-    images: imageSchema.array().optional(),
     head: headSchema.optional(),
-    button: buttonSchema.optional(),
-    buttons: buttonSchema.array().optional(),
     banner: blockSchema.optional(),
     navigation: blockSchema.optional(),
     header: blockSchema.optional(),
     sections: blockSchema.array().optional(),
     subheader: blockSchema.array().optional(),
-    sidebar: blockSchema.optional(),
+    sidebar: menuSchema.array().optional(),
     footer: blockSchema.optional(),
-    parents: pathSchema('pages').array().optional(),
   })
   .strict()
 

package/src/schemas/proof.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'astro/types'
+import { z } from 'astro:content'
+import type Proof from 'fulldev-ui/components/Proof.astro'
+import { imageSchema } from 'fulldev-ui/schemas/image.ts'
+
+export const proofSchema = z
+  .object({
+    rating: z.number().optional(),
+    avatars: imageSchema.array().optional(),
+    text: z.string().optional(),
+  })
+  .strict() satisfies z.ZodType<ComponentProps<typeof Proof>>

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

@@ -4,6 +4,7 @@ import Element from 'fulldev-ui/components/Element.astro'
 
 interface Props extends HTMLAttributes<'div'> {
   as?: HTMLTag
+  align?: 'center' | 'middle' | 'columns'
 }
 
 const { ...rest } = Astro.props
@@ -19,65 +20,51 @@ const { ...rest } = Astro.props
 <style is:global>
   @layer fulldev {
     .prose {
-      @apply relative w-full max-w-screen-md;
+      @apply w-full max-w-screen-md;
 
-      > * {
-        & + * {
-          @apply mt-6;
-        }
+      &.align-middle {
+        @apply mx-auto max-w-screen-md items-center;
+      }
 
-        &.tagline + .heading,
-        & + p,
-        & > p {
-          @apply mt-4;
-        }
+      &.align-center {
+        @apply mx-auto flex max-w-screen-md;
 
-        & + .group,
-        & + .button,
-        & + .buttons {
-          @apply mt-8;
+        > *:not(* > *) {
+          @apply text-center;
         }
       }
 
-      code:not(.astro-code code) {
-        @apply rounded bg-muted px-1.5 py-0.5 font-mono text-sm font-medium;
+      &.align-columns {
+        @apply max-w-none break-inside-avoid gap-x-8 lg:columns-2;
       }
 
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        @apply scroll-m-20 font-bold;
-
-        code {
-          font-size: inherit !important;
-        }
+      > *,
+      .tagline + * {
+        @apply mt-4;
       }
 
-      > h1 {
-        @apply text-4xl;
+      > .group,
+      > .button,
+      > .buttons {
+        @apply mt-8;
       }
 
       > h2 {
-        @apply mt-10 text-2xl;
+        @apply mt-10;
       }
 
       > h3 {
-        @apply mt-8 text-xl;
+        @apply mt-8;
       }
 
-      > h4 {
-        @apply text-lg;
-      }
-
-      > h5 {
-        @apply text-base;
+      > h4,
+      > h5,
+      > h6 {
+        @apply mt-6;
       }
 
-      > h6 {
-        @apply text-sm;
+      code:not(:is(.astro-code, h1, h2, h3, h4, h5, h6) code) {
+        @apply rounded bg-muted px-1.5 py-0.5 font-mono text-sm font-medium;
       }
 
       > aside {
@@ -85,10 +72,14 @@ const { ...rest } = Astro.props
       }
 
       > img,
-      > * > img {
+      > p > img {
         @apply my-12 rounded-md;
       }
 
+      blockquote > p + p {
+        @apply !mt-1;
+      }
+
       > *:first-child {
         @apply mt-0;
       }

package/src/structures/Section.astro

@@ -20,7 +20,7 @@ const { as = 'section', ...rest } = Astro.props
 <style is:global>
   @layer fulldev {
     .section {
-      @apply relative w-full bg-background py-20 first:pt-20 lg:py-32;
+      @apply relative w-full py-20 first:pt-20 lg:py-32;
     }
   }
 </style>

package/src/structures/Sidebar.astro

@@ -18,18 +18,17 @@ const { ...rest } = Astro.props
 <style is:global>
   @layer fulldev {
     .sidebar {
-      @apply top-header sticky shrink-0 grow flex-col items-start gap-8 overflow-y-auto bg-background p-8 first:border-r last:border-l lg:flex;
+      @apply sticky top-header hidden shrink-0 grow flex-col items-start gap-8 overflow-y-auto bg-background p-8 lg:flex;
       @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
 
-      top: var(--header-height);
       width: var(--sidebar-width);
       max-width: var(--sidebar-width);
-      height: calc(100vh - var(--header-height, 0px));
+      max-height: calc(100vh - var(--header-height, 0px));
 
       &,
       & ~ * {
         @media (min-width: 1024px) {
-          --sidebar-width: 16rem;
+          --sidebar-width: 14rem;
         }
       }
     }

package/src/structures/Split.astro

@@ -0,0 +1,38 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+  align?: 'start' | 'center' | 'sticky'
+}
+
+const { ...rest } = Astro.props
+---
+
+<Element
+  class:list="split"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .split {
+      @apply grid gap-x-4 gap-y-16 sm:gap-x-8 lg:grid-cols-2;
+    }
+
+    .align-start {
+      @apply items-start;
+    }
+
+    .align-center {
+      @apply items-center;
+    }
+
+    .align-sticky {
+      @apply items-start lg:[&>*]:sticky lg:[&>*]:top-sticky-16;
+    }
+  }
+</style>

package/tailwind.config.ts

@@ -4,7 +4,10 @@ import tailwindcssAnimate from 'tailwindcss-animate'
 
 export default {
   darkMode: ['class'],
-  content: ['src/**/*.{ts,tsx,astro,css,mdx}'],
+  content: [
+    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
+    'node_modules/fulldev-ui/src/**/*.astro',
+  ],
   theme: {
     container: {
       screens: ['1536px'],