fulldev-ui 0.1.64

package/src/components/wrapper/Header.astro

@@ -0,0 +1,76 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Wrapper from './_Wrapper.astro'
+
+type Props<As extends HTMLTag = 'header'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Wrapper> & {
+    frame?: 'screen' | 'panel'
+    position?: 'relative' | 'sticky' | 'fixed' | 'absolute'
+  }
+
+const {
+  as = 'header',
+  direction = 'horizontal',
+  y = 'center',
+  density = 'compact',
+  variant,
+  position,
+  frame,
+  ...rest
+} = Astro.props
+---
+
+<Wrapper
+  class:list={[
+    'full-header',
+    {
+      [`full-frame-${frame}`]: frame,
+      [`full-position-${position}`]: position,
+    },
+  ]}
+  {as}
+  {direction}
+  {y}
+  {density}
+  {variant}
+  {...rest}
+>
+  <slot name="before" />
+  <slot />
+</Wrapper>
+
+<style is:global lang="scss">
+  .full-header {
+    display: flex;
+    top: 0;
+    right: 0;
+    left: 0;
+    justify-content: space-between;
+    align-items: center;
+    z-index: 10;
+    background: var(--background);
+    padding: var(--space-3) var(--space-gutter);
+    width: 100%;
+
+    &.full-position-fixed {
+      position: fixed;
+    }
+
+    &.full-position-absolute {
+      position: absolute;
+    }
+
+    &.full-position-sticky {
+      position: sticky;
+    }
+
+    &.subtle {
+      border-color: var(--6);
+      background-color: var(--2);
+    }
+
+    &.bordered {
+      border-bottom: 1px solid var(--border);
+    }
+  }
+</style>

package/src/components/wrapper/Main.astro

@@ -0,0 +1,25 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Wrapper from './_Wrapper.astro'
+
+type Props<As extends HTMLTag = 'main'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Wrapper>
+
+const { as = 'main', x = 'fill', ...rest } = Astro.props
+---
+
+<Wrapper
+  class:list={['full-main']}
+  {as}
+  {x}
+  {...rest}
+>
+  <slot name="before" />
+  <slot />
+</Wrapper>
+
+<style is:global lang="scss">
+  .full-main {
+    width: 100%;
+  }
+</style>

package/src/components/wrapper/Nav.astro

@@ -0,0 +1,32 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Wrapper from './_Wrapper.astro'
+
+type Props<As extends HTMLTag = 'nav'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Wrapper>
+
+const {
+  as = 'nav',
+  direction = 'horizontal',
+  y = 'center',
+  ...rest
+} = Astro.props
+---
+
+<Wrapper
+  class:list={['full-nav']}
+  {as}
+  {direction}
+  {y}
+  {...rest}
+>
+  <slot name="before" />
+  <slot />
+</Wrapper>
+
+<style is:global lang="scss">
+  .full-nav {
+    margin-left: auto;
+    width: max-content;
+  }
+</style>

package/src/components/wrapper/Prose.astro

@@ -0,0 +1,108 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Section from './Section.astro'
+import { default as Layout } from './_Wrapper.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Layout>
+
+const { as = 'div', ...rest } = Astro.props
+---
+
+<Section
+  class:list={['full-prose']}
+  {as}
+  {...rest}
+>
+  <slot name="before" />
+  <slot />
+</Section>
+
+<style is:global lang="scss">
+  .full-prose {
+    @media (min-width: 768px) {
+      padding-right: 15vw;
+      padding-left: 15vw;
+    }
+    @media (min-width: 1024px) {
+      padding-right: 25vw;
+      padding-left: 25vw;
+    }
+  }
+
+  // Tables
+  .full-prose {
+    color: var(--foreground);
+    font-weight: var(--full-font-weight);
+    font-size: var(--text);
+    line-height: 1.625;
+    font-family: var(--full-font-family);
+
+    .display {
+      display: grid;
+      width: 100%;
+      max-width: none;
+
+      table {
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          margin: var(--space-2) 0;
+          font: 600 var(--text-2) 'Saira';
+
+          & + p {
+            color: var(--hue11);
+          }
+        }
+      }
+    }
+
+    @media (max-width: 640px) {
+      display: none;
+    }
+
+    table {
+      margin: var(--space-4) 0;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-1) !important;
+      border-collapse: collapse;
+      width: 100%;
+    }
+
+    th {
+      border-bottom: 1px solid var(--border);
+      background: var(--raised-background) !important;
+      color: var(--muted-foreground) !important;
+      font-weight: 500 !important;
+      font-size: var(--text-element) !important;
+    }
+
+    td {
+      color: var(--muted-foreground) !important;
+    }
+
+    th,
+    td {
+      padding: var(--space-2);
+    }
+
+    table a {
+      color: var(--primary-background) !important;
+      font-size: var(--text-element) !important;
+      line-height: 1 !important;
+      white-space: nowrap;
+    }
+
+    h6 {
+      margin: var(--space-2) 0;
+      font-size: var(--text) !important;
+    }
+
+    table a:hover {
+      text-decoration: underline;
+    }
+  }
+</style>

package/src/components/wrapper/Section.astro

@@ -0,0 +1,110 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Wrapper from './_Wrapper.astro'
+
+type Props<As extends HTMLTag = 'section'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Wrapper> & {
+    direction?: 'horizontal' | 'vertical'
+    variant?: 'base' | 'raised'
+    frame?: 'viewport' | 'panel'
+    // gutter?: 'viewport' | 'panel'
+    reverse?: true | 'odd' | 'even'
+  }
+
+const { as = 'section', reverse, variant, frame, ...rest } = Astro.props
+---
+
+<Wrapper
+  class:list={[
+    'full-section',
+    {
+      [`full-variant-${variant}`]: variant,
+      [`full-frame-${frame}`]: frame,
+      [`full-reverse-${reverse}`]: reverse,
+    },
+  ]}
+  {as}
+  {...rest}
+>
+  <slot name="before" />
+  <slot />
+</Wrapper>
+
+<style is:global lang="scss">
+  :root,
+  .full-tag {
+    --media: 1536px;
+    --space-gutter: max(4vw, calc((100vw - var(--media)) / 2));
+    --space-spacer: calc(var(--space-5) + 4vw);
+  }
+
+  .full-section {
+    position: relative;
+    background: var(--background);
+    padding: var(--space-spacer) var(--space-gutter);
+    width: 100%;
+    overflow-x: hidden;
+
+    &.full-frame-panel {
+      margin: var(--space-5) var(--space-gutter);
+      border: 1px solid var(--border);
+      border-radius: var(--full-border-radius-3);
+      background-color: var(--background);
+      padding: var(--space-5) var(--space-gutter);
+      width: auto;
+      overflow: hidden;
+    }
+  }
+
+  .full-layout-split {
+    display: grid;
+    column-gap: var(--space-gutter);
+    row-gap: var(--space-5);
+    justify-content: var(--full-x);
+    align-items: var(--full-y);
+
+    @media (min-width: 1024px) {
+      grid-auto-columns: 1fr;
+      grid-auto-flow: column;
+    }
+
+    & > * {
+      margin: 0;
+    }
+  }
+
+  .full-reverse-true {
+    --full-reverse: 1;
+  }
+
+  .full-reverse-even:nth-child(even) {
+    --full-reverse: 1;
+  }
+
+  .full-reverse-odd:nth-child(odd) {
+    --full-reverse: 1;
+  }
+
+  .full-reverse-even,
+  .full-reverse-odd,
+  .full-reverse-true {
+    @media (min-width: 1024px) {
+      > .full-tag {
+        order: 0;
+
+        &:first-child {
+          order: var(--full-reverse, 0);
+        }
+
+        &:last-child {
+          order: calc(var(--full-reverse, 0) * -1);
+        }
+      }
+    }
+  }
+
+  .full-frame-viewport {
+    height: auto;
+    min-height: 100vh;
+  }
+</style>

package/src/components/wrapper/Sections.astro

@@ -0,0 +1,15 @@
+---
+import type { ComponentProps } from 'astro/types'
+import type { Pluralmorphic } from '../../types/Pluralmorphic'
+import Plural from '../_Plural.astro'
+import Section from './Section.astro'
+
+type Props = Pluralmorphic<ComponentProps<typeof Section>>
+
+const { props } = Astro
+---
+
+<Plural
+  component={Section}
+  {...props}
+/>

package/src/components/wrapper/Writeup.astro

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

package/src/components/wrapper/_Wrapper.astro

@@ -0,0 +1,333 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Children from '../_Children.astro'
+import Tag from '../_Tag.astro'
+
+interface Props extends ComponentProps<typeof Tag> {
+  html?: string
+  x?: 'start' | 'center' | 'end' | 'between' | 'stretch' | 'fraction'
+  y?: 'start' | 'center' | 'end' | 'between' | 'stretch' | 'fraction'
+}
+
+const {
+  direction = 'vertical',
+  x = 'left',
+  y = 'top',
+  layout,
+  ...rest
+} = Astro.props
+---
+
+<Tag
+  class:list={[
+    'full-wrapper',
+    {
+      [`full-direction-${direction}`]: direction,
+      [`full-layout-${layout}`]: layout,
+      [`full-x-${x}`]: x,
+      [`full-y-${y}`]: y,
+    },
+  ]}
+  {...rest}
+>
+  <slot name="before" />
+  <Children {...rest} />
+  <slot />
+</Tag>
+
+<style is:global lang="scss">
+  .full-wrapper {
+    * {
+      margin: 0;
+    }
+  }
+
+  .full-direction-horizontal:not(.full-x-fill) {
+    display: flex;
+    flex-direction: row;
+
+    > {
+      .full-tag {
+        + .full-deck,
+        + .full-image:not(.full-position-background),
+        + .full-icon {
+          margin-left: var(--space-5);
+        }
+      }
+
+      .full-deck,
+      .full-image:not(.full-position-background),
+      .full-icon {
+        + .full-tag {
+          margin-left: var(--space-5);
+        }
+      }
+
+      .full-tag {
+        + .full-group,
+        + .full-form {
+          margin-left: var(--space-4);
+        }
+      }
+
+      .full-tag {
+        + .full-paragraph,
+        + .full-link,
+        + .full-heading,
+        + .full-switch {
+          margin-left: var(--space-3);
+        }
+      }
+
+      .full-tag {
+        + .full-link {
+          margin-left: var(--space-4);
+        }
+      }
+
+      .full-tag {
+        + .full-button {
+          margin-left: var(--space-5);
+        }
+      }
+
+      .full-position-background + .full-tag {
+        margin-left: 0;
+      }
+
+      .full-button {
+        + .full-button {
+          margin-left: var(--space-2);
+        }
+      }
+
+      .full-placeholder + .full-placeholder {
+        margin-left: var(--space-4);
+      }
+
+      .full-position-background + .full-tag {
+        margin-left: 0;
+      }
+    }
+  }
+
+  .full-direction-vertical {
+    display: flex;
+    flex-direction: column;
+
+    > {
+      .full-tag {
+        + .full-deck,
+        + .full-image:not(.full-position-background),
+        + .full-icon {
+          margin-top: var(--space-5);
+        }
+      }
+
+      .full-placeholder + .full-placeholder {
+        margin-top: var(--space-4);
+      }
+
+      .full-tag {
+        + .full-group,
+        + .full-card,
+        + .full-form,
+        + .full-button,
+        + .full-list {
+          margin-top: var(--space-4);
+        }
+      }
+
+      .full-list {
+        + .full-tag {
+          margin-top: var(--space-4);
+        }
+      }
+
+      .full-tag {
+        + .full-heading {
+          margin-top: var(--space-3);
+        }
+      }
+
+      .full-rating {
+        + .full-tag {
+          margin-top: var(--space-4);
+        }
+      }
+
+      .full-deck,
+      .full-image:not(.full-position-background),
+      .full-icon {
+        + .full-tag {
+          margin-top: var(--space-5);
+        }
+      }
+
+      .full-button {
+        + .full-button {
+          margin-top: var(--space-2);
+        }
+      }
+
+      .full-paragraph {
+        + .full-paragraph,
+        + .full-label,
+        + .full-input {
+          margin-top: var(--space-2);
+        }
+      }
+
+      .full-tagline {
+        + .full-paragraph,
+        + .full-heading,
+        + .full-label,
+        + .full-input {
+          margin-top: var(--space-3);
+        }
+      }
+
+      .full-heading {
+        + .full-paragraph {
+          margin-top: var(--space-3);
+        }
+      }
+
+      .full-paragraph {
+        + .full-heading {
+          margin-top: var(--space-3);
+        }
+      }
+
+      .full-label {
+        + .full-input,
+        + .full-textarea,
+        + .full-select {
+          margin-top: var(--space-1);
+        }
+      }
+
+      .full-input {
+        + .full-input,
+        + .full-button,
+        + .full-label {
+          margin-top: var(--space-3);
+        }
+      }
+    }
+  }
+
+  .full-direction-vertical {
+    display: flex;
+    flex-direction: column;
+
+    // & > .full-tag:not(:first-child) {
+    //   margin-top: var(--my-spacer);
+    // }
+
+    &.full-x-left {
+      align-items: flex-start;
+    }
+
+    &.full-x-center {
+      align-items: center;
+      text-align: center;
+
+      > .full-tag > .full-tag {
+        text-align: left;
+      }
+    }
+
+    &.full-x-right {
+      align-items: flex-end;
+      text-align: right;
+
+      > .full-tag > .full-tag {
+        text-align: left;
+      }
+    }
+
+    &.full-x-fill {
+      align-items: stretch;
+    }
+
+    &.full-y-top {
+      justify-content: flex-start;
+    }
+
+    &.full-y-center {
+      justify-content: center;
+    }
+
+    &.full-y-bottom {
+      justify-content: flex-end;
+    }
+
+    &.full-y-spread {
+      justify-content: space-between;
+    }
+
+    &.full-y-fill {
+      justify-content: stretch;
+    }
+  }
+
+  .full-direction-horizontal {
+    display: flex;
+    flex-direction: row;
+
+    // & > .full-tag:not(:first-child) {
+    //   margin-left: var(--my-spacer);
+    // }
+
+    &.full-x-left {
+      justify-content: flex-start;
+    }
+
+    &.full-x-center {
+      justify-content: center;
+    }
+
+    &.full-x-right {
+      justify-content: flex-end;
+    }
+
+    &.full-x-spread {
+      justify-content: space-between;
+    }
+
+    &.full-x-fill {
+      display: grid;
+      row-gap: var(--space-5);
+
+      @media (min-width: 1024px) {
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
+      }
+
+      & > .full-tag {
+        margin-left: 0;
+      }
+    }
+
+    &.full-y-top {
+      align-items: flex-start;
+    }
+
+    &.full-y-center {
+      align-items: center;
+    }
+
+    &.full-y-bottom {
+      align-items: flex-end;
+    }
+
+    &.full-y-stretch {
+      align-items: stretch;
+    }
+
+    &.full-y-fill {
+      align-items: stretch;
+    }
+  }
+</style>