fulldev-ui 0.1.64 → 0.2.10

package/src/components/{wrapper → segment}/Prose.astro

@@ -1,25 +1,25 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Section from './Section.astro'
-import { default as Layout } from './_Wrapper.astro'
+import Tag from '../_Tag.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Layout>
+  ComponentProps<typeof Tag>
 
 const { as = 'div', ...rest } = Astro.props
 ---
 
-<Section
-  class:list={['full-prose']}
+<Tag
+  class:list={['prose']}
   {as}
   {...rest}
 >
-  <slot name="before" />
   <slot />
-</Section>
+</Tag>
 
 <style is:global lang="scss">
-  .full-prose {
+  @import '../../css/utils.scss';
+
+  @include component('prose') {
     @media (min-width: 768px) {
       padding-right: 15vw;
       padding-left: 15vw;
@@ -31,12 +31,12 @@ const { as = 'div', ...rest } = Astro.props
   }
 
   // Tables
-  .full-prose {
+  .full.prose {
     color: var(--foreground);
-    font-weight: var(--full-font-weight);
-    font-size: var(--text);
+    font-weight: var(--font-weight);
+    font-size: var(--text-2);
     line-height: 1.625;
-    font-family: var(--full-font-family);
+    font-family: var(--font-family);
 
     .display {
       display: grid;
@@ -77,7 +77,7 @@ const { as = 'div', ...rest } = Astro.props
       background: var(--raised-background) !important;
       color: var(--muted-foreground) !important;
       font-weight: 500 !important;
-      font-size: var(--text-element) !important;
+      font-size: var(--text-1) !important;
     }
 
     td {
@@ -91,14 +91,14 @@ const { as = 'div', ...rest } = Astro.props
 
     table a {
       color: var(--primary-background) !important;
-      font-size: var(--text-element) !important;
+      font-size: var(--text-1) !important;
       line-height: 1 !important;
       white-space: nowrap;
     }
 
     h6 {
       margin: var(--space-2) 0;
-      font-size: var(--text) !important;
+      font-size: var(--text-2) !important;
     }
 
     table a:hover {

package/src/components/segment/Section.astro

@@ -0,0 +1,66 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'section'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag> & {
+    structure?: 'stack' | 'split' | 'spread' | 'group'
+    variant?: 'base' | 'raised' | 'primary'
+    frame?: 'fill' | 'viewport' | 'panel'
+    align?: 'start' | 'center' | 'end'
+  }
+
+const {
+  as = 'section',
+  structure = 'stack',
+  align = 'start',
+  ...rest
+} = Astro.props
+---
+
+<Tag
+  class:list={['section']}
+  {structure}
+  {align}
+  {as}
+  {...rest}
+>
+  <slot />
+</Tag>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  :root,
+  .full {
+    --media: 1536px;
+    --space-spacer: calc(var(--space-5) + 4vw);
+    --space-gutter: max(4vw, calc((100vw - var(--media)) / 2));
+  }
+
+  @include component('section') {
+    position: relative;
+    gap: var(--space-6) var(--space-5);
+    background: var(--background);
+    padding: var(--space-spacer) var(--space-gutter);
+    width: 100%;
+    overflow-x: hidden;
+
+    &.frame-panel {
+      margin: var(--space-5) var(--space-gutter);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-3);
+      background-color: var(--background);
+      padding-top: var(--space-5);
+      padding-right: min(var(--space-5), var(--space-gutter));
+      padding-bottom: var(--space-5);
+      padding-left: min(var(--space-5), var(--space-gutter));
+      overflow: hidden;
+    }
+
+    &.frame-viewport {
+      height: auto;
+      min-height: 100vh;
+    }
+  }
+</style>

package/src/components/{wrapper → segment}/Writeup.astro

@@ -1,23 +1,24 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Wrapper from './_Wrapper.astro'
+import Tag from '../_Tag.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Wrapper>
+  ComponentProps<typeof Tag>
 
 const { as = 'div', ...rest } = Astro.props
 ---
 
-<Wrapper
-  class:list={['full-writeup']}
+<Tag
+  class:list={['writeup']}
   {as}
   {...rest}
 >
-  <slot name="before" />
   <slot />
-</Wrapper>
+</Tag>
 
 <style is:global lang="scss">
-  .full-writeup {
+  @import '../../css/utils.scss';
+
+  @include component('writeup') {
   }
 </style>

package/src/components/segment/todo.md

@@ -0,0 +1,8 @@
+# Chores
+
+# New components
+- Footer
+- Header
+- Nav
+- Prose
+- Writeup

package/src/components/structure/Bento.astro

@@ -0,0 +1,35 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag>
+
+const { ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['bento']}
+  {...rest}
+>
+  <slot />
+</Tag>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('bento') {
+    display: grid;
+    position: relative;
+    grid-template-columns: 1fr;
+    width: 100%;
+
+    @media (min-width: 1024px) {
+      grid-template-columns: 1fr 1fr 1fr;
+
+      & > *:nth-child(2n) {
+        grid-column-start: span 2;
+      }
+    }
+  }
+</style>

package/src/components/structure/Carousel.astro

@@ -0,0 +1,43 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag>
+
+const { ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['carousel']}
+  {...rest}
+>
+  <slot />
+</Tag>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('carousel') {
+    --column-width: calc(16 * var(--element-3));
+
+    display: flex;
+    position: relative;
+    position: relative;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--space-3);
+    padding-bottom: var(--space-3);
+    width: 100%;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+
+    > .full {
+      flex-grow: 0;
+      flex-shrink: 0;
+      width: var(--column-width);
+      scroll-snap-align: center;
+    }
+  }
+</style>

package/src/components/structure/Grid.astro

@@ -0,0 +1,30 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag>
+
+const { ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['grid']}
+  {...rest}
+>
+  <slot />
+</Tag>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('grid') {
+    --column-width: calc(15 * var(--element-3));
+
+    display: grid;
+    position: relative;
+    grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
+    gap: var(--space-3);
+    width: 100%;
+  }
+</style>

package/src/components/structure/Group.astro

@@ -0,0 +1,28 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag>
+
+const { ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['group']}
+  {...rest}
+>
+  <slot />
+</Tag>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('group') {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: stretch;
+    align-items: center;
+    gap: var(--space-2);
+  }
+</style>

package/src/components/structure/Masonry.astro

@@ -0,0 +1,39 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag>
+
+const { ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['masonry']}
+  {...rest}
+>
+  <slot />
+</Tag>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('masonry') {
+    --column-width: calc(16 * var(--element-3));
+    --gap: var(--space-3);
+
+    position: relative;
+    column-gap: var(--gap);
+    column-fill: balance;
+    column-width: var(--column-width);
+    column-count: 6;
+    break-inside: avoid;
+    width: 100%;
+
+    & > .full + .full {
+      break-inside: avoid;
+      margin-top: var(--gap);
+      margin-bottom: var(--gap);
+    }
+  }
+</style>

package/src/components/structure/Split.astro

@@ -0,0 +1,41 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag> & {
+    align?: 'start' | 'center' | 'end'
+  }
+
+const { ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['split']}
+  {...rest}
+>
+  <slot />
+</Tag>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('split') {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: var(--space-5) var(--space-5);
+    width: 100%;
+
+    &.align-start {
+      align-items: flex-start;
+    }
+
+    &.align-center {
+      align-items: center;
+    }
+
+    &.align-end {
+      align-items: flex-end;
+    }
+  }
+</style>

package/src/components/structure/Spread.astro

@@ -0,0 +1,48 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag> & {
+    align?: 'start' | 'center' | 'end'
+  }
+
+const { align = 'center', ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['spread']}
+  {align}
+  {...rest}
+>
+  <slot />
+</Tag>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('spread') {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: stretch;
+    gap: var(--space-4);
+    width: 100%;
+
+    & > .full {
+      width: auto;
+    }
+
+    &.align-start {
+      align-items: flex-start;
+    }
+
+    &.align-center {
+      align-items: center;
+    }
+
+    &.align-end {
+      align-items: flex-end;
+    }
+  }
+</style>

package/src/components/structure/Stack.astro

@@ -0,0 +1,90 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag> & {
+    align?: 'start' | 'center' | 'end'
+  }
+
+const { align = 'start', ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['stack']}
+  {align}
+  {...rest}
+>
+  <slot />
+</Tag>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('stack') {
+    display: flex;
+    flex-direction: column;
+    gap: 0 !important;
+    width: 100%;
+
+    &.align-start {
+      align-items: flex-start;
+    }
+
+    &.align-center {
+      align-items: center;
+      text-align: center;
+
+      > * > * {
+        text-align: left;
+      }
+    }
+
+    &.align-end {
+      align-items: flex-end;
+    }
+
+    > {
+      .full {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+
+      .full + .full {
+        margin-top: var(--space-5);
+      }
+
+      .full + .group,
+      .full + .button,
+      .full + .switch {
+        margin-top: var(--space-4);
+      }
+
+      .full + .heading,
+      .full + .label,
+      .full + .link,
+      .full + .list,
+      .full + .paragraph,
+      .full + .tagline,
+      .full + .input,
+      .full + .badge,
+      .full + .rating {
+        margin-top: var(--space-3);
+      }
+
+      .paragraph + .paragraph,
+      .button + .button {
+        margin-top: var(--space-2);
+      }
+
+      .label + .input {
+        margin-top: var(--space-1);
+      }
+
+      .image + .full,
+      .icon + .full {
+        margin-top: var(--space-5);
+      }
+    }
+  }
+</style>

package/src/components/structure/todo.md

@@ -0,0 +1,5 @@
+# Components
+- Pile
+- Join
+
+# Chores

package/src/components/typography/Heading.astro

@@ -1,41 +1,59 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Typography from './_Typography.astro'
+import Tag from '../_Tag.astro'
 
 type Props<As extends HTMLTag = 'h2'> = Polymorphic<{ as: As }> &
-  Omit<ComponentProps<typeof Typography>, 'size'> & {
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+  ComponentProps<typeof Tag> & {
+    html?: string
+    text?: string
+    variant?: 'base' | 'muted' | 'accent'
+    level?: 1 | 2 | 3 | 4 | 5 | 6
   }
 
-const { as = 'h2', ...rest } = Astro.props
+const {
+  level = 2,
+  as = `h${level}`,
+  density = level > 3 ? 'compact' : undefined,
+  ...rest
+} = Astro.props
 ---
 
-<Typography
-  class:list={['full-heading']}
+<Tag
+  class:list={['heading']}
+  {level}
   {as}
-  {...rest as any}
+  {density}
+  {...rest}
 >
-  <slot name="before" />
   <slot />
-</Typography>
+</Tag>
 
 <style is:global lang="scss">
-  .full-heading {
-    max-width: calc(var(--space-element-3) * 36);
+  @import '../../css/utils.scss';
+
+  @include component('heading') {
+    margin: 0;
+    max-width: calc(var(--element-3) * 36);
     color: var(--foreground);
-    font-weight: var(--full-heading-font-weight);
-    font-size: var(--text-heading);
+    font-weight: var(--heading-font-weight);
     line-height: 1.1;
-    font-family: var(--full-heading-font-family);
+    font-family: var(--heading-font-family);
     letter-spacing: -0.025em;
+    text-decoration: none;
+
+    &.level-1,
+    &.level-4 {
+      font-size: var(--text-5);
+    }
 
-    .full-tag + & {
-      --my-spacer: var(--space-5);
+    &.level-2,
+    &.level-5 {
+      font-size: var(--text-4);
     }
 
-    .full-tagline,
-    .full-badge + & {
-      --my-spacer: var(--space-3);
+    &.level-3,
+    &.level-6 {
+      font-size: var(--text-3);
     }
   }
 </style>

package/src/components/typography/Label.astro

@@ -1,36 +1,35 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Typography from './_Typography.astro'
+import Tag from '../_Tag.astro'
 
 type Props<As extends HTMLTag = 'label'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Typography> & {
-    variant?: 'base' | 'muted'
-    text?: string
+  ComponentProps<typeof Tag> & {
     html?: string
+    text?: string
+    variant?: 'base' | 'muted' | 'accent'
   }
 
 const { as = 'label', text, html, ...rest } = Astro.props
 ---
 
-<Typography
-  class:list={['full-label']}
+<Tag
+  class:list={['label']}
   {as}
   {...rest}
 >
-  <slot name="before" />
-  <Fragment set:html={html} />
-  {text}
   <slot />
-</Typography>
+</Tag>
 
 <style is:global lang="scss">
-  .full-label {
+  @import '../../css/utils.scss';
+
+  @include component('label') {
     display: flex;
     flex-direction: column;
     color: var(--foreground);
-    font-weight: var(--full-font-weight);
-    font-size: var(--text-element);
-    font-family: var(--full-font-family);
+    font-weight: var(--font-weight);
+    font-size: var(--text-1);
+    font-family: var(--font-family);
     text-align: left;
   }
 </style>