fulldev-ui 0.6.0-beta.7 → 0.6.0-beta.8

package/src/{components → structures}/Card.astro

@@ -21,10 +21,14 @@ const { href, as = href ? 'a' : 'div', ...rest } = Astro.props
 <style is:global>
   @layer fulldev {
     .card {
-      @apply w-full rounded-lg border bg-card p-4 text-card-foreground;
+      @apply w-full overflow-hidden rounded-lg border bg-card p-4 text-card-foreground;
 
       &:is(a[href]) {
         @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+
+        &:hover .image {
+          @apply opacity-75 transition-opacity;
+        }
       }
     }
   }

package/src/{components → structures}/Code.astro

@@ -28,12 +28,8 @@ const { lang = 'astro', code, ...rest } = Astro.props
 
 <style is:global>
   @layer fulldev {
-    .astro-code {
-      @apply mt-4 rounded-md p-4 text-sm first:mt-0;
-    }
-
     .code {
-      @apply mt-8 overflow-hidden rounded-md border first:mt-0;
+      @apply mt-8 rounded-md border first:mt-0;
 
       .example {
         @apply flex flex-wrap items-center gap-8 p-8;
@@ -42,10 +38,15 @@ const { lang = 'astro', code, ...rest } = Astro.props
         > slot > * {
           @apply mt-0;
         }
+
+        .heading,
+        .paragraph {
+          @apply w-full;
+        }
       }
 
       .astro-code {
-        @apply mt-0 rounded-none border-none p-4;
+        @apply mt-0 overflow-x-auto rounded-none border-none p-4 text-sm first:mt-0;
       }
     }
   }

package/src/{components → structures}/Container.astro

@@ -19,7 +19,7 @@ const { ...rest } = Astro.props
 <style is:global>
   @layer fulldev {
     .container {
-      @apply mx-auto w-full max-w-screen-2xl px-gutter;
+      @apply mx-auto w-full max-w-screen-2xl px-4 sm:px-8;
     }
   }
 </style>

package/src/{components → structures}/Drawer.astro

@@ -1,7 +1,7 @@
 ---
 import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
 import Element from 'fulldev-ui/components/Element.astro'
-import Button from './Button.astro'
 
 interface Props
   extends HTMLAttributes<'aside'>,
@@ -21,7 +21,6 @@ const render = slot?.trim().length > 0
     <Element class:list="drawer">
       <Button
         class="drawer-button"
-        as="label"
         for={id}
         {variant}
         {size}
@@ -55,7 +54,7 @@ const render = slot?.trim().length > 0
 <style is:global>
   @layer fulldev {
     .drawer {
-      @apply contents;
+      @apply contents h-screen;
     }
 
     .drawer-checkbox {
@@ -71,7 +70,8 @@ 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 rounded-r-lg border border-l-0 bg-background shadow-2xl transition-transform;
+      @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 scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
 
       &:is(.drawer-checkbox:checked ~ &) {
         @apply translate-x-0;

package/src/{components → structures}/Layout.astro

@@ -1,10 +1,9 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Head from 'fulldev-ui/components/Head.astro'
-import type { HeadSchema } from 'fulldev-ui/schemas/components/head'
 
 type Props = Omit<HTMLAttributes<'body'>, 'title'> & {
-  head?: HeadSchema
+  head?: ComponentProps<typeof Head>
 }
 
 const { head, ...rest } = Astro.props

package/src/structures/Matrix.astro

@@ -0,0 +1,39 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+  size?: 'sm' | 'md' | 'lg' | undefined
+}
+
+const { size = 'md', ...rest } = Astro.props
+---
+
+<Element
+  class:list="matrix"
+  {size}
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .matrix {
+      @apply relative grid w-full gap-5;
+
+      &.size-sm {
+        @apply grid-cols-[repeat(auto-fill,minmax(12rem,1fr))];
+      }
+
+      &.size-md {
+        @apply grid-cols-[repeat(auto-fill,minmax(16rem,1fr))];
+      }
+
+      &.size-lg {
+        @apply grid-cols-[repeat(auto-fill,minmax(20rem,1fr))];
+      }
+    }
+  }
+</style>

package/src/{components → structures}/Prose.astro

@@ -22,11 +22,21 @@ const { ...rest } = Astro.props
       @apply relative w-full max-w-screen-md;
 
       > * {
-        @apply mt-6;
-      }
+        & + * {
+          @apply mt-6;
+        }
 
-      p {
-        @apply mt-4;
+        &.tagline + .heading,
+        & + p,
+        & > p {
+          @apply mt-4;
+        }
+
+        & + .group,
+        & + .button,
+        & + .buttons {
+          @apply mt-8;
+        }
       }
 
       code:not(.astro-code code) {
@@ -74,8 +84,9 @@ const { ...rest } = Astro.props
         @apply rounded-md border border-destructive p-4 text-destructive;
       }
 
-      img {
-        @apply my-12 rounded-lg;
+      > img,
+      > * > img {
+        @apply my-12 rounded-md;
       }
 
       > *:first-child {

package/src/structures/Sidebar.astro

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'aside'> {}
+
+const { ...rest } = Astro.props
+---
+
+<Element
+  class:list="sidebar"
+  as="aside"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<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 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));
+
+      &,
+      & ~ * {
+        @media (min-width: 1024px) {
+          --sidebar-width: 16rem;
+        }
+      }
+    }
+  }
+</style>

package/src/{components → structures}/Stack.astro

@@ -19,7 +19,7 @@ const { ...rest } = Astro.props
 <style is:global>
   @layer fulldev {
     .stack {
-      @apply relative grid w-full auto-cols-fr items-start gap-x-16 gap-y-8 lg:grid-flow-col;
+      @apply relative grid w-full auto-cols-fr items-start gap-x-8 gap-y-8 lg:grid-flow-col lg:gap-x-16;
     }
   }
 </style>

package/src/{components → structures}/Writeup.astro

@@ -29,6 +29,10 @@ const { align = 'start', ...rest } = Astro.props
 
       &.align-center {
         @apply mx-auto flex flex-col items-center text-center;
+
+        .paragraph {
+          @apply text-balance;
+        }
       }
 
       &.align-right {
@@ -40,11 +44,15 @@ const { align = 'start', ...rest } = Astro.props
       }
 
       .paragraph {
-        @apply max-w-screen-md text-balance;
+        @apply max-w-screen-md;
       }
 
       > * {
         & + * {
+          @apply mt-2;
+        }
+
+        &:is(h1, h2) + * {
           @apply mt-4;
         }
 

package/src/structures/_Bento.astro

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+}
+
+const { ...rest } = Astro.props
+---
+
+<Element
+  class:list="bento"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .bento {
+      @apply relative grid w-full grid-cols-1 gap-4 lg:grid-cols-5;
+
+      & > * {
+        @apply lg:grid-col-span-2;
+      }
+
+      & > *:nth-child(3n + 2),
+      & > *:nth-child(3n + 3) {
+        @apply lg:grid-col-span-3;
+      }
+    }
+  }
+</style>

package/src/utils/cart.ts

@@ -1,4 +1,4 @@
-import { slugify } from './slugify'
+import { slugify } from './slugify.ts'
 
 export const generateProductId = (
   slug: string,

package/tailwind.config.ts

@@ -7,8 +7,6 @@ export default {
   content: ['src/**/*.{ts,tsx,astro,css,mdx}'],
   theme: {
     container: {
-      center: true,
-      padding: 'clamp(16px, 4vw, 32px)',
       screens: ['1536px'],
     },
     extend: {
@@ -16,10 +14,9 @@ export default {
         gutter: 'clamp(16px, 4vw, 32px)',
         container: 'var(--container, 1536px)',
         hero: 'calc(100vh - var(--header-height, 0px) - var(--subheader-height, 0px) - var(--banner-height, 0px))',
-        'sticky-8':
-          'calc(var(--header-height, 0px) + var(--subheader-height, 0px) + 2rem)',
-        'sticky-16':
-          'calc(var(--header-height, 0px) + var(--subheader-height, 0px) + 4rem)',
+        header: 'var(--header-height, 0px)',
+        'sticky-8': 'calc(var(--header-height, 0px)  + 2rem)',
+        'sticky-16': 'calc(var(--header-height, 0px)  + 4rem)',
       },
       colors: {
         border: 'hsl(var(--border))',
@@ -30,7 +27,8 @@ export default {
         primary: {
           DEFAULT: 'hsl(var(--primary))',
           foreground: 'hsl(var(--primary-foreground))',
-          hover: 'hsl(var(--primary) / 85%)',
+          // hover: 'hsl(var(--primary) / 85%)',
+          hover: 'hsl(var(--primary) / 75%)',
         },
         secondary: {
           DEFAULT: 'hsl(var(--secondary))',

package/tsconfig.json

@@ -1,7 +1,9 @@
 {
   "extends": "astro/tsconfigs/strictest",
-  "include": ["src", "astro.config.ts"],
+  "include": ["src", "astro.config.ts", "virtual.d.ts"],
   "compilerOptions": {
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
     "baseUrl": ".",
     "paths": {
       "fulldev-ui/*": ["src/*"],

package/src/blocks/Feature1.astro

@@ -1,61 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import Buttons from 'fulldev-ui/components/Buttons.astro'
-import Container from 'fulldev-ui/components/Container.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import Section from 'fulldev-ui/components/Section.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-import Writeup from 'fulldev-ui/components/Writeup.astro'
-import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
-
-interface Props extends ComponentProps<typeof Section>, BlockSchema {}
-
-const { tagline, heading, paragraph, buttons, image, ...rest } = Astro.props
----
-
-<Section
-  class:list="feature-1"
-  {...rest}
->
-  <Container>
-    <Writeup>
-      <Tagline
-        size="sm"
-        text={tagline}
-      />
-      <Heading
-        size="3xl"
-        text={heading}
-      />
-      <Paragraph
-        size="lg"
-        text={paragraph}
-      />
-      <Buttons
-        variant="secondary"
-        {buttons}
-      />
-    </Writeup>
-    <Image {...image} />
-  </Container>
-</Section>
-
-<style is:global>
-  @layer fulldev {
-    .feature-1 {
-      .container {
-        @apply gap-x-gutter gap-y-12 lg:grid lg:grid-cols-2 lg:items-center;
-      }
-
-      .writeup {
-        @apply lg:max-w-xl;
-      }
-
-      .image {
-        @apply rounded-lg;
-      }
-    }
-  }
-</style>

package/src/components/Avatar.astro

@@ -1,45 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import Image from 'fulldev-ui/components/Image.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-
-interface Props extends GlobalProps, ComponentProps<typeof Image> {
-  size?: 'sm' | 'md' | 'lg' | undefined
-}
-
-const { size = 'md', ...rest } = Astro.props
-
-const sizeMap = {
-  sm: 36,
-  md: 40,
-  lg: 44,
-}
----
-
-<Image
-  class:list={'avatar'}
-  width={sizeMap[size]}
-  height={sizeMap[size]}
-  {size}
-  {...rest}
-/>
-
-<style is:global>
-  @layer fulldev {
-    .avatar {
-      @apply aspect-square shrink-0 rounded-full bg-muted object-cover;
-
-      &.size-sm {
-        @apply size-9;
-      }
-
-      &.size-md {
-        @apply size-10;
-      }
-
-      &.size-lg {
-        @apply size-11;
-      }
-    }
-  }
-</style>

package/src/components/Avatars.astro

@@ -1,36 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-import Avatar from './Avatar.astro'
-
-interface Props extends HTMLAttributes<'div'> {
-  size?: any
-  avatars?: ComponentProps<typeof Avatar>[] | undefined
-  avatar?: ComponentProps<typeof Avatar>['id'] | undefined
-}
-
-const { size = 'md', avatars = [], avatar, ...rest } = Astro.props
----
-
-<Element
-  class:list="avatars"
-  {size}
-  {...rest}
->
-  {
-    [avatar, ...avatars].filter(Boolean).map((id) => (
-      <Avatar
-        {size}
-        {id}
-      />
-    ))
-  }
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .avatars {
-      @apply inline-flex -space-x-3;
-    }
-  }
-</style>

package/src/components/Cards.astro

@@ -1,133 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Card from 'fulldev-ui/components/Card.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  level?: ComponentProps<typeof Card>['level']
-  panel?: ComponentProps<typeof Card>['panel']
-  position?: ComponentProps<typeof Card>['position']
-  cards?: ComponentProps<typeof Card>[] | undefined
-  structure?: 'grid' | 'masonry' | 'stack' | 'carousel' | 'bento' | undefined
-}
-
-const {
-  structure = 'grid',
-  level,
-  panel,
-  position,
-  cards,
-  size,
-  ...rest
-} = Astro.props
----
-
-<Element
-  class:list="cards"
-  {panel}
-  {size}
-  {structure}
-  {...rest}
->
-  {
-    cards?.map((card: any) => (
-      <Card
-        level={level + 3}
-        {panel}
-        {size}
-        {position}
-        {...card}
-      />
-    ))
-  }
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .cards {
-      --column-width: 20rem;
-      @apply relative w-full;
-
-      &.structure-grid {
-        @apply grid w-full grid-cols-[repeat(auto-fill,minmax(var(--column-width),1fr))] gap-5;
-      }
-
-      &.structure-masonry {
-        @apply w-full columns-6 break-inside-avoid gap-5 space-y-5;
-        column-fill: balance;
-        column-width: var(--column-width);
-
-        /* & > * + * {
-          break-inside: avoid;
-          margin-top: var(--gap);
-          margin-bottom: var(--gap);
-        } */
-      }
-
-      &.structure-carousel {
-        display: flex;
-        align-items: flex-start;
-        gap: var(--gap);
-        padding-bottom: var(--gap);
-        overflow-x: auto;
-        scroll-behavior: smooth;
-        scroll-snap-type: x mandatory;
-
-        > * {
-          flex-grow: 0;
-          flex-shrink: 0;
-          width: var(--column-width);
-          scroll-snap-align: center;
-        }
-      }
-
-      &.structure-stack {
-        display: grid;
-        position: relative;
-        grid-template-columns: 1fr;
-        align-items: flex-start;
-        gap: var(--space-6);
-        width: 100%;
-
-        @media (min-width: 1024px) {
-          grid-auto-columns: 1fr;
-          grid-auto-flow: column;
-        }
-      }
-
-      &.structure-bento {
-        display: grid;
-        position: relative;
-        grid-template-columns: 1fr;
-        gap: var(--space-4);
-        width: 100%;
-
-        @media (min-width: 1024px) {
-          grid-template-columns: repeat(5, 1fr);
-
-          & > * {
-            grid-column: span 2;
-          }
-
-          & > *:nth-child(3n + 2),
-          & > *:nth-child(3n + 3) {
-            grid-column: span 3;
-          }
-        }
-      }
-
-      &.size-sm {
-        --column-width: 16rem;
-      }
-
-      &.size-md {
-        --column-width: 20rem;
-      }
-
-      &.size-lg {
-        --column-width: 26rem;
-      }
-    }
-  }
-</style>