fulldev-ui 0.1.64 → 0.2.10

package/src/components/utility/DecorativeBox.astro

@@ -1,22 +0,0 @@
----
-type Props = {
-  height: string
-  width: string
-}
-
-const { height = '100%', width = '100%' } = Astro.props
----
-
-<div class="full-placeholder"></div>
-
-<style is:global define:vars={{ height, width }}>
-  .full-placeholder {
-    border: 1px solid var(--raised-border);
-    border-radius: var(--full-border-radius-1);
-    background-color: var(--raised-background);
-    width: var(--width) !important;
-    min-width: 100px;
-    height: var(--height) !important;
-    min-height: 100px;
-  }
-</style>

package/src/components/wrapper/Card.astro

@@ -1,144 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Wrapper from './_Wrapper.astro'
-
-type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Wrapper> & {
-    variant?: 'ghost' | 'soft' | 'solid'
-    frame?: 'fill' | 'panel' | 'screen'
-    ratio?: 'landscape' | 'portrait' | 'square' | number
-  }
-
-const {
-  href,
-  as = Astro.props.href ? 'a' : 'div',
-  density = 'compact',
-  variant,
-  frame,
-  ratio,
-  ...rest
-} = Astro.props
----
-
-<Wrapper
-  {as}
-  {href}
-  class:list={[
-    'full-card',
-    {
-      [`full-frame-${frame}`]: frame,
-      [`full-variant-${variant}`]: variant,
-      [`full-ratio-${ratio}`]: ratio,
-    },
-  ]}
-  {density}
-  {...rest}
->
-  <slot name="before" />
-  <slot />
-</Wrapper>
-
-<style is:global lang="scss">
-  .full-card {
-    position: relative;
-    overflow: hidden;
-    text-decoration: none;
-
-    /* &:is(a) */
-    &[href] {
-      cursor: pointer;
-
-      > .full-image {
-        transition: var(--full-transition);
-      }
-
-      &:hover {
-        > .full-image {
-          opacity: 0.85;
-        }
-      }
-    }
-
-    /* TODO add child paddings/margin */
-    /* padding all side with negative padding/margin on image/media? */
-    /* or only padding bottom and side apdding on children? */
-    /* I prefer negative margin (inset) on media if this works */
-    &.full-frame-panel {
-      gap: 0;
-      border: 1px solid var(--border);
-      border-radius: var(--full-border-radius-3);
-      background-color: var(--background);
-      padding: var(--space-5);
-      overflow: hidden;
-      color: var(--foreground);
-
-      // > .full-tag:not(.full-image) {
-      //   margin-right: var(--space-5);
-      //   margin-left: var(--space-5);
-
-      //   &:first-child {
-      //     margin-top: var(--space-5);
-      //   }
-
-      //   &:last-child {
-      //     margin-bottom: var(--space-5);
-      //   }
-      // }
-    }
-
-    /* &.subtle,
-      &.surface {
-        background-color: var(--2);
-
-        &:is(a) {
-          border-color: var(--7);
-          background: var(--2);
-
-          &:hover {
-            border-color: var(--8);
-            background: var(--3);
-          }
-
-          &:active {
-            background: var(--4);
-          }
-        }
-
-        .full-image {
-          border-bottom-right-radius: 0;
-          border-bottom-left-radius: 0;
-        }
-      }
-
-      &.solid {
-        border-color: var(--9);
-        background: var(--9);
-
-        * {
-          color: var(--fg);
-        }
-
-        &:is(a):hover {
-          background: var(--10);
-        }
-
-        .full-image {
-          border-bottom-right-radius: 0;
-          border-bottom-left-radius: 0;
-        }
-      }
-    } */
-
-    &.full-ratio-landscape {
-      aspect-ratio: 4/3;
-    }
-
-    &.full-ratio-square {
-      aspect-ratio: 1/1;
-    }
-
-    &.full-ratio-portrait {
-      aspect-ratio: 3/4;
-    }
-  }
-</style>

package/src/components/wrapper/Cards.astro

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

package/src/components/wrapper/Deck.astro

@@ -1,133 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Wrapper from './_Wrapper.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  Omit<ComponentProps<typeof Wrapper>, 'layout'> & {
-    layout?:
-      | 'carousel'
-      | 'grid'
-      | 'masonry'
-      | 'row'
-      | 'column'
-      | 'split'
-      | 'panels'
-      | 'bento'
-  }
-
-const { layout = 'grid', direction = null, ...rest } = Astro.props
----
-
-<Wrapper
-  class:list={['full-deck']}
-  layout={layout as any}
-  {direction}
-  {...rest as any}
->
-  <slot name="before" />
-  <slot />
-</Wrapper>
-
-<style is:global lang="scss">
-  .full-deck {
-    position: relative;
-    width: 100%;
-
-    &.full-layout-row {
-      display: grid;
-      row-gap: var(--space-4);
-
-      @media (min-width: 1024px) {
-        grid-auto-columns: 6fr 1fr;
-        grid-auto-flow: column;
-
-        > * {
-          &:nth-child(2) {
-            grid-column-start: 3;
-          }
-          &:nth-child(3) {
-            grid-column-start: 5;
-          }
-          &:nth-child(4) {
-            grid-column-start: 7;
-          }
-          &:nth-child(5) {
-            grid-column-start: 9;
-          }
-          &:nth-child(6) {
-            grid-column-start: 11;
-          }
-        }
-      }
-    }
-
-    &.full-layout-carousel {
-      display: flex;
-      position: relative;
-      flex-direction: row;
-      align-items: flex-start;
-      gap: var(--space-3);
-      margin: 0 calc(var(--space-gutter) * -1);
-      padding: 0 var(--space-gutter) var(--space-3);
-      width: 100vw;
-      overflow-x: auto;
-      scroll-behavior: smooth;
-      scroll-snap-type: x mandatory;
-
-      > .full-card {
-        /* TODO add multiple sizes */
-        flex-grow: 0;
-        flex-shrink: 0;
-        width: calc(12 * var(--space-6));
-        scroll-snap-align: center;
-      }
-    }
-
-    &.full-layout-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-      column-gap: var(--space-3);
-      row-gap: var(--space-4);
-    }
-
-    &.full-layout-masonry {
-      column-gap: var(--space-3);
-      column-count: 1;
-
-      @media (min-width: 640px) {
-        column-count: 2;
-      }
-      @media (min-width: 768px) {
-        column-count: 3;
-      }
-
-      @media (min-width: 1024px) {
-        column-count: 4;
-      }
-
-      & > .card + .card {
-        margin-top: var(--space-4);
-        margin-bottom: var(--space-4);
-      }
-    }
-
-    &.full-layout-panels {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
-      gap: var(--space-3);
-    }
-
-    &.full-layout-bento {
-      display: grid;
-      grid-template-columns: 1fr;
-
-      @media (min-width: 1024px) {
-        grid-template-columns: 1fr 1fr 1fr;
-
-        & > *:nth-child(2n) {
-          grid-column-start: span 2;
-        }
-      }
-    }
-  }
-</style>

package/src/components/wrapper/Form.astro

@@ -1,26 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Wrapper from './_Wrapper.astro'
-
-type Props<As extends HTMLTag = 'form'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Wrapper>
-
-const { as = 'form', ...rest } = Astro.props
----
-
-<Wrapper
-  class:list={['full-form']}
-  {as}
-  {...rest}
->
-  <slot name="before" />
-  <slot />
-</Wrapper>
-
-<style is:global lang="scss">
-  .full-form {
-    display: flex;
-    width: 100%;
-    max-width: calc(var(--space-element-3) * 36);
-  }
-</style>

package/src/components/wrapper/Group.astro

@@ -1,26 +0,0 @@
----
-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-group']}
-  {as}
-  {...rest}
->
-  <slot name="before" />
-  <slot />
-</Wrapper>
-
-<style is:global lang="scss">
-  .full-group {
-    .full-tag + & {
-      --my-spacer: var(--space-4);
-    }
-  }
-</style>

package/src/components/wrapper/Main.astro

@@ -1,25 +0,0 @@
----
-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

@@ -1,32 +0,0 @@
----
-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/Section.astro

@@ -1,110 +0,0 @@
----
-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

@@ -1,15 +0,0 @@
----
-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}
-/>