fulldev-ui 0.3.36 → 0.4.0-beta.0

package/src/components/base/textarea/TextareaElement.astro

@@ -1,68 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Component from '../../_Component.astro'
-
-type Props = HTMLAttributes<'textarea'> & {
-  variant?: 'outline'
-}
-
-const {
-  placeholder,
-  name = placeholder,
-  variant = 'outline',
-  ...rest
-} = Astro.props
----
-
-<Component
-  if={name}
-  as="textarea"
-  class="textarea-element"
-  {variant}
-  {placeholder}
-  {name}
-  {...rest}
-/>
-
-<style is:global lang="scss">
-  @import '../../../css/utils.scss';
-
-  @include component('textarea-element') {
-    display: flex;
-    position: relative;
-    align-items: center;
-    outline: none;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-1);
-    background-color: var(--background);
-    padding: var(--space-3);
-    width: 100%;
-    height: calc((var(--text-1) + 2 * var(--space-4)) * 2);
-    min-height: calc((var(--text-1) + 2 * var(--space-4)) * 2);
-    resize: vertical;
-    color: var(--text);
-    font-weight: var(--font-weight);
-    font-size: var(--text-1);
-    line-height: 1.25;
-    font-family: var(--font-family);
-
-    &::placeholder {
-      color: var(--text);
-    }
-
-    &:hover {
-      outline: none;
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: inset 0 0 0 2px var(--border);
-    }
-
-    &:disabled {
-      opacity: 50%;
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-</style>

package/src/components/segment/Box.astro

@@ -1,46 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
-  align?: 'start' | 'center' | 'end'
-  position?: 'inset'
-  space?: 'none' | 'auto'
-  structure?:
-    | 'bento'
-    | 'carousel'
-    | 'column'
-    | 'grid'
-    | 'masonry'
-    | 'row'
-    | 'split'
-    | 'spread'
-    | 'wrap'
-}
-
-const {
-  as = 'div',
-  space = 'auto',
-  structure = 'column',
-  align = 'start',
-  ...rest
-} = Astro.props
----
-
-<Component
-  class:list={['box']}
-  {as}
-  {structure}
-  {align}
-  {space}
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('box') {
-  }
-</style>

package/src/components/segment/Card.astro

@@ -1,114 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-
-type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
-  structure?: 'column' | 'group' | 'split' | 'spread' | 'row'
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  align?: 'start' | 'center' | 'end' | 'stretch'
-  radius?: 'none' | 'auto'
-  frame?: 'panel' | 'none'
-  color?: 'base' | 'brand'
-  contrast?: boolean
-  compact?: boolean
-  ratio?: 'landscape' | 'portrait' | 'square' | number
-  space?: 'auto' | 'none'
-  variant?:
-    | 'base'
-    | 'ghost'
-    | 'subtle'
-    | 'surface'
-    | 'outline'
-    | 'soft'
-    | 'surface'
-    | 'solid'
-}
-
-const {
-  href,
-  as = href ? 'a' : 'div',
-  space = 'auto',
-  frame = 'panel',
-  structure = 'column',
-  compact = true,
-  radius = 'auto',
-  variant = 'subtle',
-  ...rest
-} = Astro.props
----
-
-<Component
-  class:list={['card']}
-  {compact}
-  {href}
-  {radius}
-  {structure}
-  {variant}
-  {space}
-  {frame}
-  {as}
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('card') {
-    position: relative;
-    text-decoration: none;
-
-    &[href] {
-      cursor: pointer;
-
-      > .full.image {
-        transition: var(--transition);
-      }
-
-      &:hover {
-        > .full.image {
-          opacity: 0.85;
-        }
-      }
-    }
-
-    &.ratio-landscape {
-      aspect-ratio: 4/3;
-    }
-
-    &.ratio-square {
-      aspect-ratio: 1/1;
-    }
-
-    &.ratio-portrait {
-      aspect-ratio: 3/4;
-    }
-
-    &.frame-fill {
-      border-radius: 0 !important;
-    }
-
-    &.frame-panel {
-      --inner-x: var(--space-7);
-      --inner-y: var(--space-7);
-
-      border: 1px solid var(--border);
-      background-color: var(--background);
-      padding: var(--inner-y) var(--inner-x);
-      overflow: hidden;
-
-      &[href]:hover {
-        border: 1px solid var(--border-hover);
-      }
-
-      &.radius-none {
-        border-radius: 0;
-      }
-
-      &.radius-auto {
-        border-radius: var(--radius-2);
-      }
-    }
-  }
-</style>

package/src/components/segment/Footer.astro

@@ -1,94 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-
-type Props<As extends HTMLTag = 'footer'> = Polymorphic<{ as: As }> & {
-  structure?: 'spread' | 'row' | 'split' | 'column'
-  variant?: 'base' | 'ghost' | 'subtle' | 'soft' | 'surface' | 'outline'
-  frame?: 'fill' | 'panel' | 'contain'
-  align?: 'start' | 'center' | 'end'
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  scheme?: 'light' | 'dark'
-  color?: 'base' | 'brand'
-  space?: 'none' | 'auto'
-
-  compact?: boolean
-}
-
-const {
-  as = 'footer',
-  space = 'auto',
-  structure = 'spread',
-  variant = 'subtle',
-  frame = 'fill',
-  ...rest
-} = Astro.props
----
-
-<Component
-  class:list={['footer']}
-  {structure}
-  {as}
-  {variant}
-  {frame}
-  {space}
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('footer') {
-    --screen: 1536px;
-    --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
-
-    margin: var(--outer-y) var(--outer-x);
-    background: var(--background);
-    padding: var(--inner-y) var(--inner-x);
-    width: 100%;
-    max-width: calc(100% - (2 * var(--outer-x)));
-
-    &.frame-fill {
-      border-top: 1px solid var(--border);
-      --inner-x: var(--gutter);
-      --outer-x: 0;
-      --inner-y: var(--space-7);
-      --outer-y: 0;
-    }
-
-    &.frame-panel {
-      margin-top: var(--space-2);
-      margin-right: var(--gutter);
-      margin-left: var(--gutter);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-3);
-
-      --inner-x: var(--gutter);
-      --outer-x: 0;
-      --inner-y: var(--space-7);
-      --outer-y: 0;
-    }
-
-    &.frame-contain {
-      --inner-x: max(4vw, var(--space-7));
-      --outer-x: max(0px, calc(var(--gutter) - var(--inner-x)));
-      --inner-y: var(--space-7);
-      --outer-y: 0;
-    }
-
-    &.align-start {
-      align-items: flex-start;
-      text-align: left;
-    }
-
-    &.align-center {
-      align-items: center;
-    }
-
-    &.align-end {
-      align-items: flex-end;
-    }
-  }
-</style>

package/src/components/segment/Header.astro

@@ -1,100 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-
-type Props<As extends HTMLTag = 'header'> = Polymorphic<{ as: As }> & {
-  structure?: 'spread' | 'row' | 'column'
-  position?: 'relative' | 'sticky' | 'fixed' | 'absolute'
-  variant?: 'ghost' | 'subtle' | 'soft' | 'surface' | 'outline'
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  frame?: 'fill' | 'panel'
-  align?: 'start' | 'center' | 'end'
-  space?: 'none' | 'auto'
-  compact?: boolean
-}
-
-const {
-  as = 'header',
-  space = 'auto',
-  structure = 'spread',
-  frame = 'fill',
-  variant = 'subtle',
-  compact = true,
-  ...rest
-} = Astro.props
----
-
-<Component
-  class:list={['header']}
-  {as}
-  {frame}
-  {compact}
-  {structure}
-  {variant}
-  {space}
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  :root {
-    --header-height: calc(
-      var(--text-1) + 2 * var(--space-4) + 2 * var(--space-3)
-    );
-  }
-
-  @include component('header') {
-    --screen: 1536px;
-    --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
-
-    display: flex;
-    position: relative;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: 10;
-    margin: var(--outer-y) var(--outer-x);
-    border-bottom: 1px solid var(--border);
-    background-color: var(--background);
-    padding: 0 var(--inner-x);
-    width: 100%;
-    max-width: calc(100% - (2 * var(--outer-x)));
-    height: var(--header-height);
-
-    &.frame-fill {
-      --inner-x: var(--gutter);
-      --outer-y: 0;
-    }
-
-    &.frame-contain {
-      --inner-x: max(4vw, var(--space-3));
-      --outer-x: max(0px, calc(var(--gutter) - var(--inner-x)));
-      --outer-y: 0;
-    }
-
-    &.frame-panel {
-      --inner-x: min(4vw, var(--space-3));
-      --outer-x: var(--gutter);
-      --outer-y: var(--space-3);
-
-      border: 1px solid var(--border);
-      border-radius: var(--radius-3);
-    }
-
-    &.position-fixed {
-      position: fixed;
-    }
-
-    &.position-absolute {
-      position: absolute;
-    }
-
-    &.position-sticky {
-      position: sticky;
-      top: -1px;
-    }
-  }
-</style>

package/src/components/segment/Section.astro

@@ -1,103 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-
-type Props<As extends HTMLTag = 'section'> = Polymorphic<{ as: As }> & {
-  scheme?: 'light' | 'dark'
-  color?: 'base' | 'brand'
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  frame?: 'fill' | 'viewport' | 'contain' | 'panel'
-  variant?: 'ghost' | 'subtle' | 'outline' | 'soft' | 'solid' | 'surface'
-  align?: 'start' | 'center' | 'end'
-  structure?: 'column' | 'split' | 'spread'
-  // order?: 'reverse' | 'switch'
-  space?: 'auto' | 'none'
-  compact?: boolean
-}
-
-const {
-  as = 'div',
-  space = 'auto',
-  frame = 'fill',
-  structure = 'column',
-  variant = 'ghost',
-  align = 'start',
-  ...rest
-} = Astro.props
----
-
-<Component
-  class:list={['section']}
-  {as}
-  {frame}
-  {variant}
-  {align}
-  {space}
-  {structure}
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('section') {
-    --screen: 1536px;
-    --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
-
-    position: relative;
-    margin: var(--outer-y) var(--outer-x);
-    background-color: var(--background);
-    padding: var(--inner-y) var(--inner-x);
-    width: 100%;
-    max-width: calc(100% - (2 * var(--outer-x)));
-    height: auto;
-
-    &.frame-fill {
-      --inner-x: var(--gutter);
-      --outer-x: 0;
-      --inner-y: var(--space-7);
-      --outer-y: 0;
-    }
-
-    &.frame-viewport {
-      --inner-x: var(--gutter);
-      --outer-x: 0;
-      --inner-y: var(--space-7);
-      --outer-y: 0;
-
-      min-height: 100vh;
-    }
-
-    &.frame-contain {
-      --inner-x: max(4vw);
-      --outer-x: max(0px, calc(var(--gutter) - var(--inner-x)));
-      --inner-y: var(--space-7);
-      --outer-y: 0;
-    }
-
-    &.frame-panel {
-      --inner-x: min(4vw, var(--space-7));
-      --outer-x: var(--gutter);
-      --inner-y: var(--space-7);
-      --outer-y: var(--space-7);
-
-      border: 1px solid var(--border);
-      border-radius: var(--radius-2);
-      overflow: hidden;
-    }
-
-    // &.order-reverse {
-    //   --is-reverse: initial;
-
-    //   > *:first-child {
-    //     order: 999;
-    //   }
-
-    //   & > *:last-child {
-    //     order: -999;
-    //   }
-    // }
-  }
-</style>

package/src/components/segment/_regels.md

@@ -1,32 +0,0 @@
-Kan je een collectie Section maken? Ja: Hero, Cta etc
-Kan je een collectie Cards maken? Ja: Product, Post etc
-
-Kan je een collectie ... maken? Zo ja = segment.
-Segments omschrijven super duidelijk de content.
-Group is een voorbeeld van een slechte segment, want niemand wat hier in zit. 
-
-Deze segments willen we uiteindelijk hebben:
-
-- Card
-- Section
-- Header
-- Banner
-- Sidebar
-- Layout
-- Deck
-- Footer
-
-Denk aan ProductCard, ProductSection, ProductLayout
-
-Denk aan een block library met Sections, Cards, Sidebars, Header, Banners, Footer
-
-Ze omschrijven ALLEMAAL duidelijk wat de content is.
-
-Beschrijft het niet duidelijk de content? Beschrijft het wel duidelijk de structuur? >> structure
-
-Waar structures 1 slot hebben, moeten segments meerdere slots krijgen. reden is dat de content hier bepalen is! Anders klopt de segment naam sws niet.
-
-Section heeft bijv segment, writeup, actions, media.
-Deck heeft bijv segment, writeup, actions, cards
-
-Een segment kan goed uit meerdere structures bestaan, waar iedere slot een eigen structure heeft. Als segction structure spread bijv heeft wordt niet perse de hele section spread, maar de segment wel. Of kan ook met align stretch ipv structure

package/src/components/typography/Heading.astro

@@ -1,66 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-
-type Props<As extends HTMLTag = 'h2'> = Polymorphic<{ as: As }> & {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'
-  color?: 'base' | 'brand'
-  level?: 1 | 2 | 3 | 4 | 5 | 6
-  contrast?: boolean
-  html?: string
-  text?: string
-}
-
-const { level = 2, as = `h${level}`, contrast = true, ...rest } = Astro.props
----
-
-<Component
-  class:list={['heading']}
-  {as}
-  {contrast}
-  {level}
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('heading') {
-    margin: 0;
-    max-width: calc(var(--space-4) * 36);
-    scroll-margin: var(--space-5);
-    color: var(--color-11);
-    font-weight: var(--heading-font-weight);
-    font-weight: 700;
-    line-height: 1.1;
-    font-family: var(--heading-font-family);
-    letter-spacing: -0.025em;
-    text-decoration: none;
-
-    &.level-1 {
-      font-size: var(--text-7);
-    }
-
-    &.level-2 {
-      font-size: var(--text-6);
-    }
-
-    &.level-3 {
-      font-size: var(--text-5);
-    }
-
-    &.level-4 {
-      font-size: var(--text-4);
-    }
-
-    &.level-5 {
-      font-size: var(--text-3);
-    }
-
-    &.level-6 {
-      font-size: var(--text-2);
-    }
-  }
-</style>

package/src/components/typography/List.astro

@@ -1,47 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-import ListItem from './ListItem.astro'
-
-type Props<As extends HTMLTag = 'ul'> = Polymorphic<{ as: As }> & {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  color?: 'base' | 'brand'
-  contrast?: boolean
-  items?: (
-    | ComponentProps<typeof ListItem>
-    | ComponentProps<typeof ListItem>['html']
-  )[]
-}
-
-const { as = 'ul', items, ...rest } = Astro.props
----
-
-<Component
-  class:list={['list']}
-  {as}
-  {...rest}
->
-  {
-    items?.map((item) => {
-      if (typeof item === 'string') return <ListItem html={item} />
-      else return <ListItem {...item} />
-    })
-  }
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('list') {
-    display: flex;
-    flex-direction: column;
-    padding-left: var(--space-5);
-    color: var(--text);
-    font-weight: var(--font-weight);
-    font-size: var(--text-2);
-    line-height: 1.625;
-    font-family: var(--font-family);
-    list-style-type: disc;
-  }
-</style>

package/src/components/typography/ListItem.astro

@@ -1,36 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-
-type Props<As extends HTMLTag = 'li'> = Polymorphic<{ as: As }> & {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  color?: 'base' | 'brand'
-  contrast?: boolean
-  html?: string
-  text?: string
-}
-
-const { as = 'li', ...rest } = Astro.props
----
-
-<Component
-  class:list={['list-item']}
-  {as}
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('list-item') {
-    align-items: center;
-    max-width: calc(var(--space-4) * 36);
-    color: var(--text);
-    font-weight: var(--font-weight);
-    font-size: var(--text-2);
-    line-height: 1.625;
-    font-family: var(--font-family);
-  }
-</style>