fulldev-ui 0.1.64 → 0.2.10

package/src/components/base/Rating.astro

@@ -1,24 +1,27 @@
 ---
-import type { ComponentProps, HTMLTag } from 'astro/types'
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
 import Tag from '../_Tag.astro'
 import Icon from './Icon.astro'
 
-type Props<As extends HTMLTag = 'div'> = ComponentProps<typeof Tag<As>> & {
-  value: number | string
-}
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag> & {
+    value: number | string
+  }
 
 const { variant = 'accent', value = Astro.props.html, ...rest } = Astro.props
 ---
 
 <Tag
-  class:list={['full-rating']}
+  class:list={['rating']}
   {...rest}
 >
   {value && [1, 2, 3, 4, 5].map(() => <Icon name="star-filled" />)}
 </Tag>
 
 <style is:global lang="scss">
-  .full-rating {
+  @import '../../css/utils.scss';
+
+  @include component('rating') {
     display: flex;
     gap: 0.75rem;
     padding-left: 5px;
@@ -39,7 +42,7 @@ const { variant = 'accent', value = Astro.props.html, ...rest } = Astro.props
       width: 1.25em;
       height: 1em;
       height: 1.25em;
-      color: var(--full-accent-foreground);
+      color: var(--foreground);
     }
   }
 </style>

package/src/components/base/Select.astro

@@ -1,4 +1,6 @@
 ---
+// TODO clean up the styling. Since before every component in Fullui was just one element, we should decide how we are going to handle situation like this where extra elements are needed.
+// I think we should split it up into multiple components, like SelectIcon etc. gr Sil
 import type { ComponentProps, Polymorphic } from 'astro/types'
 import { isObject } from 'radash'
 import Tag from '../_Tag.astro'
@@ -10,18 +12,18 @@ type Props<As extends 'select'> = Polymorphic<{ as: As }> &
     options?: (ComponentProps<typeof SelectOption> | string)[]
   }
 
-const { options, ...rest } = Astro.props
+const { as = 'select', options, ...rest } = Astro.props
 ---
 
 <Tag
   as="div"
-  class="full-select-wrapper"
+  class:list="select-wrapper"
   {...rest}
 >
   <Tag
     as="select"
     if={options}
-    class:list={['full-select full-input']}
+    class:list={['select input']}
     {...rest}
   >
     <slot name="before" />
@@ -33,33 +35,35 @@ const { options, ...rest } = Astro.props
     }
     <slot />
   </Tag>
-  <div class="full-select-icon-wrapper">
+  <div class="select-icon-wrapper">
     <Icon
-      class="full-select-icon"
+      class="select-icon"
       name="chevron-down"
     />
   </div>
 </Tag>
 
 <style is:global lang="scss">
-  .full-select {
-    appearance: none;
-  }
+  @import '../../css/utils.scss';
 
-  .full-select-wrapper {
-    position: relative;
-    width: 100%;
+  @include component('select') {
+    appearance: none;
   }
 
-  .full-select-icon-wrapper {
+  .select-icon-wrapper {
     display: flex;
     position: absolute;
     top: 0;
-    right: var(--space-element-2);
+    right: var(--element-2);
     align-items: center;
     margin: 0 !important;
     padding: 0;
     height: 100%;
     pointer-events: none;
   }
+
+  .full.select-wrapper {
+    position: relative;
+    width: 100%;
+  }
 </style>

package/src/components/base/SelectOption.astro

@@ -9,7 +9,7 @@ const { text, ...rest } = Astro.props
 ---
 
 <option
-  class:list={['full-option']}
+  class:list={['option']}
   {...rest}
 >
   {text}
@@ -17,11 +17,11 @@ const { text, ...rest } = Astro.props
 </option>
 
 <style>
-  .full-option {
+  .full.option {
     color: var(--foreground);
-    font-weight: var(--full-font-weight);
-    font-size: var(--text-element);
+    font-weight: var(--font-weight);
+    font-size: var(--text-1);
     line-height: 1;
-    font-family: var(--full-font-family);
+    font-family: var(--font-family);
   }
 </style>

package/src/components/base/Switch.astro

@@ -1,21 +1,19 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import type { Childmorphic } from '../../types/Childmorphic'
 import Tag from '../_Tag.astro'
 
 type Props<As extends HTMLTag = 'span'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> &
-  Childmorphic<{
+  ComponentProps<typeof Tag> & {
     name?: string
-  }>
+  }
 
 const { as = 'input', name, ...rest } = Astro.props
 ---
 
 <Tag
-  if={true}
   as="label"
-  class="full-switch"
+  class:list="switch"
+  if={true}
   {...rest}
 >
   <input
@@ -27,10 +25,12 @@ const { as = 'input', name, ...rest } = Astro.props
 </Tag>
 
 <style is:global lang="scss">
-  .full-switch {
+  @import '../../css/utils.scss';
+
+  @include component('switch') {
     display: block;
     position: relative;
-    transition: var(--full-transition);
+    transition: var(--transition);
     cursor: pointer;
     box-sizing: border-box;
     border: 1px solid var(--border);
@@ -38,10 +38,9 @@ const { as = 'input', name, ...rest } = Astro.props
     background-color: var(--background);
     padding: var(--space-1);
     min-width: calc(
-      (var(--text-element) + 2 * var(--space-element-1) * 2) + 2 *
-        var(--space-1)
+      (var(--text-1) + 2 * var(--element-1) * 2) + 2 * var(--space-1)
     );
-    height: calc(var(--text-element) + 2 * var(--space-element-1));
+    height: calc(var(--text-1) + 2 * var(--element-1));
 
     .checkbox {
       position: absolute;
@@ -52,7 +51,7 @@ const { as = 'input', name, ...rest } = Astro.props
 
     .checkmark {
       transform: 0%;
-      transition: var(--full-transition);
+      transition: var(--transition);
       border-radius: 999px;
       background-color: var(--border);
       width: 50%;

package/src/components/base/Textarea.astro

@@ -1,8 +1,9 @@
 ---
-import type { ComponentProps, HTMLTag } from 'astro/types'
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
 import Tag from '../_Tag.astro'
 
-type Props<As extends HTMLTag = 'textarea'> = ComponentProps<typeof Tag>
+type Props<As extends HTMLTag = 'textarea'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag>
 
 const {
   as = 'textarea',
@@ -14,18 +15,19 @@ const {
 ---
 
 <Tag
-  class:list={['full-textarea']}
-  if={name}
+  class:list={['textarea input']}
+  if={true}
   {rows}
-  {name}
   {variant}
   {as}
   {...rest}
 />
 
 <style is:global lang="scss">
-  .full-textarea {
-    height: calc((var(--text-element) + 2 * var(--space-element-3)) * 2);
+  @import '../../css/utils.scss';
+
+  @include component('textarea') {
+    height: calc((var(--text-1) + 2 * var(--element-3)) * 2);
     resize: vertical;
   }
 </style>

package/src/components/base/Video.astro

@@ -1,4 +1,5 @@
----
+<!-- ---
+// 
 type Props = any & {
   src: string
   thumbnail?: string
@@ -13,7 +14,7 @@ const youtubeId =
 {
   youtubeId && !thumbnail && (
     <iframe
-      class:list={['full-image full-video']}
+      class:list={['image video']}
       src={`https://www.youtube.com/embed/${youtubeId}?controls=0&showinfo=0&rel=0&modestbranding=1&loop=1`}
       title="YouTube video player"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
@@ -21,7 +22,6 @@ const youtubeId =
     />
   )
 }
-
 {
   youtubeId && thumbnail && (
     <img
@@ -29,4 +29,4 @@ const youtubeId =
       alt=""
     />
   )
-}
+} -->

package/src/components/base/todo.md

@@ -4,5 +4,4 @@
 - Stat (for displaying a number with a label)
 - Spinner (for loading states)
 - Bubble (for whatsapp chat bubbles etc)
-
-## Low priority
+- Divider (for separating with a light border)

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

@@ -1,32 +1,35 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Wrapper from './_Wrapper.astro'
+import Tag from '../_Tag.astro'
 
 type Props<As extends HTMLTag = 'body'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Wrapper>
+  ComponentProps<typeof Tag>
 
-const { as = 'body', x = 'fill', ...rest } = Astro.props
+const { as = 'body', ...rest } = Astro.props
 ---
 
-<Wrapper
-  class:list={['full-body']}
+<Tag
+  class:list={['body']}
   {as}
-  {x}
   {...rest}
 >
-  <slot name="before" />
   <slot />
 
   <style is:global lang="scss">
-    .full-body {
+    @import '../../css/utils.scss';
+
+    @include component('body') {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
       margin: 0;
       background: var(--background);
       padding: 0;
       height: 100%;
       min-height: 100vh;
       color: var(--foreground);
-      font-size: var(--text);
+      font-size: var(--text-2);
       font-family: var(--font-family);
     }
   </style>
-</Wrapper>
+</Tag>

package/src/components/segment/Card.astro

@@ -0,0 +1,94 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag> & {
+    structure?: 'stack' | 'group' | 'split' | 'spread'
+    align?: 'start' | 'center' | 'end' | 'stretch'
+    variant?: 'base' | 'raised' | 'primary'
+    frame?: 'fill' | 'panel'
+    ratio?: 'landscape' | 'portrait' | 'square' | number
+  }
+
+const {
+  as = Astro.props.href ? 'a' : 'div',
+  structure = 'stack',
+  density = 'compact',
+  frame = 'panel',
+  variant = 'raised',
+  ...rest
+} = Astro.props
+---
+
+<Tag
+  class:list={['card']}
+  {structure}
+  {density}
+  {frame}
+  {variant}
+  {as}
+  {...rest}
+>
+  <slot />
+</Tag>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('card') {
+    position: relative;
+    overflow: hidden;
+    text-decoration: none;
+
+    &[href] {
+      cursor: pointer;
+
+      > .full.image {
+        transition: var(--transition);
+      }
+
+      &:hover {
+        > .full.image {
+          opacity: 0.85;
+        }
+      }
+    }
+
+    &.frame-panel {
+      gap: 0;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-2);
+      background-color: var(--background);
+      padding: var(--space-5);
+      overflow: hidden;
+      color: var(--foreground);
+    }
+
+    &.ratio-landscape {
+      aspect-ratio: 4/3;
+    }
+
+    &.ratio-square {
+      aspect-ratio: 1/1;
+    }
+
+    &.ratio-portrait {
+      aspect-ratio: 3/4;
+    }
+
+    & > .frame-inset {
+      margin-right: calc(var(--space-5) * -1);
+      margin-left: calc(var(--space-5) * -1);
+      width: calc(100% + var(--space-5) * 2);
+
+      &:first-child {
+        margin-top: calc(var(--space-5) * -1);
+      }
+
+      &:last-child {
+        margin-bottom: calc(var(--space-5) * -1);
+      }
+    }
+  }
+</style>

package/src/components/segment/Deck.astro

@@ -0,0 +1,36 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag> & {
+    structure?: 'grid' | 'carousel' | 'masonry' | 'bento'
+    frame?: 'none' | 'fill' | 'inset'
+  }
+
+const { structure = 'grid', ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['deck']}
+  {structure}
+  {...rest}
+>
+  <slot />
+</Tag>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('deck') {
+    position: relative;
+    width: 100%;
+
+    &.frame-fill {
+      margin-right: calc(var(--space-gutter) * -1);
+      margin-left: calc(var(--space-gutter) * -1);
+      padding: 0 var(--space-gutter) var(--space-3);
+      width: calc(100% + var(--space-gutter) * 2);
+    }
+  }
+</style>

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

@@ -1,9 +1,9 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Wrapper from './_Wrapper.astro'
+import type Tag from '../_Tag.astro'
 
 type Props<As extends HTMLTag = 'footer'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Wrapper>
+  ComponentProps<typeof Tag>
 
 const {
   as = 'footer',

package/src/components/segment/Form.astro

@@ -0,0 +1,30 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'form'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag> & {
+    structure?: 'stack' | 'group'
+  }
+
+const { as = 'form', structure = 'stack', ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['form']}
+  {as}
+  {structure}
+  {...rest}
+>
+  <slot />
+</Tag>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('form') {
+    display: flex;
+    width: 100%;
+    max-width: calc(var(--element-3) * 36);
+  }
+</style>

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

@@ -1,46 +1,37 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Wrapper from './_Wrapper.astro'
+import Tag from '../_Tag.astro'
 
 type Props<As extends HTMLTag = 'header'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Wrapper> & {
-    frame?: 'screen' | 'panel'
+  ComponentProps<typeof Tag> & {
+    structure?: 'spread' | 'group' | 'stack'
     position?: 'relative' | 'sticky' | 'fixed' | 'absolute'
+    variant?: 'base' | 'raised'
+    frame?: 'fill' | 'panel'
+    align?: 'start' | 'center' | 'end'
   }
 
 const {
   as = 'header',
-  direction = 'horizontal',
-  y = 'center',
+  structure = 'spread',
   density = 'compact',
-  variant,
-  position,
-  frame,
   ...rest
 } = Astro.props
 ---
 
-<Wrapper
-  class:list={[
-    'full-header',
-    {
-      [`full-frame-${frame}`]: frame,
-      [`full-position-${position}`]: position,
-    },
-  ]}
+<Tag
+  class:list={['header']}
   {as}
-  {direction}
-  {y}
   {density}
-  {variant}
   {...rest}
 >
-  <slot name="before" />
   <slot />
-</Wrapper>
+</Tag>
 
 <style is:global lang="scss">
-  .full-header {
+  @import '../../css/utils.scss';
+
+  @include component('header') {
     display: flex;
     top: 0;
     right: 0;
@@ -52,25 +43,16 @@ const {
     padding: var(--space-3) var(--space-gutter);
     width: 100%;
 
-    &.full-position-fixed {
+    &.position-fixed {
       position: fixed;
     }
 
-    &.full-position-absolute {
+    &.position-absolute {
       position: absolute;
     }
 
-    &.full-position-sticky {
+    &.position-sticky {
       position: sticky;
     }
-
-    &.subtle {
-      border-color: var(--6);
-      background-color: var(--2);
-    }
-
-    &.bordered {
-      border-bottom: 1px solid var(--border);
-    }
   }
 </style>

package/src/components/segment/Main.astro

@@ -0,0 +1,28 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'main'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag>
+
+const { as = 'main', ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['main']}
+  {as}
+  {...rest}
+>
+  <slot />
+</Tag>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('main') {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+  }
+</style>

package/src/components/segment/Nav.astro

@@ -0,0 +1,30 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'nav'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag> & {
+    structure?: 'spread' | 'group'
+    align?: 'start' | 'center' | 'end'
+  }
+
+const { as = 'nav', structure = 'spread', ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['nav']}
+  {as}
+  {structure}
+  {...rest}
+>
+  <slot />
+</Tag>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('nav') {
+    margin-left: auto;
+    width: max-content;
+  }
+</style>