fulldev-ui 0.1.64

package/src/components/base/Image.astro

@@ -0,0 +1,123 @@
+---
+import type { ComponentProps } from 'astro/types'
+import { isString } from 'remeda'
+import Tag from '../_Tag.astro'
+
+interface Props extends ComponentProps<typeof Tag> {
+  position?: 'background' | 'cover' | 'panel'
+  // frame?: 'mask' | 'mask-sm'
+}
+
+function getAltBySrc(): string {
+  if (!isString(Astro.props.src)) return ''
+  const filename = Astro.props.src?.split('/').pop()
+  const slug = filename && filename.split('.')[0]
+  const unslugged = slug?.replace(/-/g, ' ')
+  return unslugged || ''
+}
+
+const {
+  as = 'img',
+  loading = 'lazy',
+  alt = getAltBySrc(),
+  src = Astro.props.html,
+  position,
+  frame,
+  ...rest
+} = Astro.props
+
+// function getSrc() {
+//   if (src?.startsWith('http')) return src
+//   // TODO: add eager import
+//   const images = Astro.glob('/src/assets/**/*.{jpeg,jpg,png,webp,gif}', {
+//     eager: true,
+//   })
+//   const path = ('/src/assets/' + src).replace('//', '/')
+//   const image = images[path]
+//   if (!image) console.warn(`Image not found: ${path}`)
+//   else return image
+// }
+
+// function getSizes() {
+//   const mapped = Object.entries(sizes).map(([key, value]) => {
+//     if (key === 'base') return value
+//     if (key === 'sm') return `(min-width: 640px) ${value}`
+//     if (key === 'md') return `(min-width: 768px) ${value}`
+//     if (key === 'lg') return `(min-width: 1024px) ${value}`
+//     if (key === 'xl') return `(min-width: 1280px) ${value}`
+//     if (key === '2xl') return `(min-width: 1536px) ${value}`
+//   })
+//   const joined = mapped.join(', ')
+//   return joined
+// }
+---
+
+{
+  src && (
+    <Tag
+      class:list={[
+        'full-image',
+        {
+          [`full-position-${position}`]: position,
+        },
+      ]}
+      if={src}
+      {src}
+      {alt}
+      {as}
+      {...rest}
+    />
+  )
+}
+
+<style is:global lang="scss">
+  .full-image {
+    display: block;
+    border-radius: var(--full-border-radius-1);
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+
+    &.full-position-background {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      order: 1;
+      z-index: -1;
+
+      /* TODO manier fixen zodat dit met custom classes kan */
+      border-radius: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+
+      ~ .full-tag {
+        position: relative;
+        z-index: 1;
+      }
+    }
+
+    &.full-position-cover {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    &.full-position-panel {
+      height: 100%;
+      object-fit: cover;
+    }
+
+    &.mask-sm {
+      -webkit-mask-image: linear-gradient(to top, transparent 0%, black 30%);
+      mask-image: linear-gradient(to top, transparent 0%, black 30%);
+    }
+
+    &.mask {
+      -webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);
+      mask-image: linear-gradient(to top, transparent 0%, black 100%);
+    }
+  }
+</style>

package/src/components/base/Images.astro

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

package/src/components/base/Input.astro

@@ -0,0 +1,52 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Tag from '../_Tag.astro'
+
+type Props = ComponentProps<typeof Tag>
+
+const { as = 'input', variant = 'outline', name, ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['full-input']}
+  if={name}
+  {name}
+  {as}
+  {variant}
+  {...rest}
+/>
+
+<style is:global lang="scss">
+  .full-input,
+  .full-textarea,
+  .full-select {
+    display: flex;
+    position: relative;
+    align-items: center;
+    outline: none;
+    box-shadow: inset 0 0 0 var(--full-border-width) var(--border);
+    border: 0px;
+    border-radius: var(--full-border-radius-2);
+    background-color: var(--input-background);
+    padding: var(--space-element-2);
+    width: 100%;
+    min-width: var(--element-2);
+    height: calc(var(--text-element) + 2 * var(--space-element-3));
+    color: var(--foreground);
+    font-weight: var(--full-font-weight);
+    font-size: var(--text-element);
+    line-height: 1.25;
+    font-family: var(--full-font-family);
+
+    &:focus {
+      outline: none;
+      box-shadow: inset 0 0 0 2px var(--focus);
+    }
+
+    &:disabled {
+      opacity: 50%;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+</style>

package/src/components/base/Logo.astro

@@ -0,0 +1,33 @@
+---
+import type { ComponentProps, HTMLTag } from 'astro/types'
+import Children from '../_Children.astro'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'a'> = ComponentProps<typeof Tag<As>> &
+  ComponentProps<typeof Children>
+
+const { as = 'a', href = '/', src, ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['full-logo']}
+  {href}
+  {as}
+  {...rest}
+>
+  <slot name="before" />
+  <Children {...rest} />
+  <slot />
+</Tag>
+
+<style is:global lang="scss">
+  .full-logo {
+    .full-image {
+      display: block !important;
+      width: auto !important;
+      height: var(--space-5) !important;
+      object-fit: contain !important;
+      color: var(--12) !important;
+    }
+  }
+</style>

package/src/components/base/Radio.astro

@@ -0,0 +1,38 @@
+---
+import type { ComponentProps, HTMLTag } from 'astro/types'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'input'> = ComponentProps<typeof Tag<As>>
+
+const { as = 'input', type = 'radio', name, ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['full-radio']}
+  if={name}
+  {name}
+  {as}
+  {type}
+  {...rest}
+/>
+
+<style is:global lang="scss">
+  .full-radio {
+    border-width: var(--border-width);
+    border-color: var(--border-color);
+    border-radius: var(--full-border-radius-2);
+    background: var(--background);
+    accent-color: var(--10);
+    font-size: var(--text);
+
+    &:hover {
+      border: var(--border-color-hover);
+      background: var(--background-hover);
+    }
+
+    &:active {
+      border: var(--border-color-active);
+      background: var(--background-active);
+    }
+  }
+</style>

package/src/components/base/Rating.astro

@@ -0,0 +1,45 @@
+---
+import type { ComponentProps, HTMLTag } 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
+}
+
+const { variant = 'accent', value = Astro.props.html, ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['full-rating']}
+  {...rest}
+>
+  {value && [1, 2, 3, 4, 5].map(() => <Icon name="star-filled" />)}
+</Tag>
+
+<style is:global lang="scss">
+  .full-rating {
+    display: flex;
+    gap: 0.75rem;
+    padding-left: 5px;
+
+    &.center {
+      padding-left: 0 !important;
+    }
+
+    i {
+      --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='m8.243 7.34l-6.38.925l-.113.023a1 1 0 0 0-.44 1.684l4.622 4.499l-1.09 6.355l-.013.11a1 1 0 0 0 1.464.944l5.706-3l5.693 3l.1.046a1 1 0 0 0 1.352-1.1l-1.091-6.355l4.624-4.5l.078-.085a1 1 0 0 0-.633-1.62l-6.38-.926l-2.852-5.78a1 1 0 0 0-1.794 0z'/%3E%3C/g%3E%3C/svg%3E");
+      -webkit-mask: var(--un-icon) no-repeat;
+      mask: var(--un-icon) no-repeat;
+      -webkit-mask-size: 100% 100%;
+      mask-size: 100% 100%;
+      margin-left: -0.4em;
+      background-color: currentColor;
+      width: 1em;
+      width: 1.25em;
+      height: 1em;
+      height: 1.25em;
+      color: var(--full-accent-foreground);
+    }
+  }
+</style>

package/src/components/base/Select.astro

@@ -0,0 +1,65 @@
+---
+import type { ComponentProps, Polymorphic } from 'astro/types'
+import { isObject } from 'radash'
+import Tag from '../_Tag.astro'
+import Icon from './Icon.astro'
+import SelectOption from './SelectOption.astro'
+
+type Props<As extends 'select'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag> & {
+    options?: (ComponentProps<typeof SelectOption> | string)[]
+  }
+
+const { options, ...rest } = Astro.props
+---
+
+<Tag
+  as="div"
+  class="full-select-wrapper"
+  {...rest}
+>
+  <Tag
+    as="select"
+    if={options}
+    class:list={['full-select full-input']}
+    {...rest}
+  >
+    <slot name="before" />
+    {
+      options?.map((option: any) => {
+        if (isObject(option)) return <SelectOption {...option} />
+        else return <SelectOption text={option} />
+      })
+    }
+    <slot />
+  </Tag>
+  <div class="full-select-icon-wrapper">
+    <Icon
+      class="full-select-icon"
+      name="chevron-down"
+    />
+  </div>
+</Tag>
+
+<style is:global lang="scss">
+  .full-select {
+    appearance: none;
+  }
+
+  .full-select-wrapper {
+    position: relative;
+    width: 100%;
+  }
+
+  .full-select-icon-wrapper {
+    display: flex;
+    position: absolute;
+    top: 0;
+    right: var(--space-element-2);
+    align-items: center;
+    margin: 0 !important;
+    padding: 0;
+    height: 100%;
+    pointer-events: none;
+  }
+</style>

package/src/components/base/SelectOption.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = Omit<HTMLAttributes<'option'>, 'slot'> & {
+  text?: string
+}
+
+const { text, ...rest } = Astro.props
+---
+
+<option
+  class:list={['full-option']}
+  {...rest}
+>
+  {text}
+  <slot />
+</option>
+
+<style>
+  .full-option {
+    color: var(--foreground);
+    font-weight: var(--full-font-weight);
+    font-size: var(--text-element);
+    line-height: 1;
+    font-family: var(--full-font-family);
+  }
+</style>

package/src/components/base/Switch.astro

@@ -0,0 +1,82 @@
+---
+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<{
+    name?: string
+  }>
+
+const { as = 'input', name, ...rest } = Astro.props
+---
+
+<Tag
+  if={true}
+  as="label"
+  class="full-switch"
+  {...rest}
+>
+  <input
+    name={name}
+    type="checkbox"
+    class="checkbox"
+  />
+  <div class="checkmark"></div>
+</Tag>
+
+<style is:global lang="scss">
+  .full-switch {
+    display: block;
+    position: relative;
+    transition: var(--full-transition);
+    cursor: pointer;
+    box-sizing: border-box;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    background-color: var(--background);
+    padding: var(--space-1);
+    min-width: calc(
+      (var(--text-element) + 2 * var(--space-element-1) * 2) + 2 *
+        var(--space-1)
+    );
+    height: calc(var(--text-element) + 2 * var(--space-element-1));
+
+    .checkbox {
+      position: absolute;
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    .checkmark {
+      transform: 0%;
+      transition: var(--full-transition);
+      border-radius: 999px;
+      background-color: var(--border);
+      width: 50%;
+      height: 100%;
+    }
+
+    .checkbox:checked ~ .checkmark {
+      transform: translateX(100%);
+      background-color: var(--primary-background);
+    }
+
+    &:hover {
+      background-color: var(--hover);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--focus) !important;
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+</style>

package/src/components/base/Textarea.astro

@@ -0,0 +1,31 @@
+---
+import type { ComponentProps, HTMLTag } from 'astro/types'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'textarea'> = ComponentProps<typeof Tag>
+
+const {
+  as = 'textarea',
+  rows = '5',
+  variant = 'outline',
+  name,
+  ...rest
+} = Astro.props
+---
+
+<Tag
+  class:list={['full-textarea']}
+  if={name}
+  {rows}
+  {name}
+  {variant}
+  {as}
+  {...rest}
+/>
+
+<style is:global lang="scss">
+  .full-textarea {
+    height: calc((var(--text-element) + 2 * var(--space-element-3)) * 2);
+    resize: vertical;
+  }
+</style>

package/src/components/base/Video.astro

@@ -0,0 +1,32 @@
+---
+type Props = any & {
+  src: string
+  thumbnail?: string
+}
+
+const { src, thumbnail } = Astro.props
+const youtubeId =
+  (src?.includes('youtube.com') || src?.includes('youtu.be')) &&
+  src.split('/').pop()?.split('?').shift()
+---
+
+{
+  youtubeId && !thumbnail && (
+    <iframe
+      class:list={['full-image full-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"
+      allowfullscreen
+    />
+  )
+}
+
+{
+  youtubeId && thumbnail && (
+    <img
+      src={`https://img.youtube.com/vi/${youtubeId}/0.jpg`}
+      alt=""
+    />
+  )
+}

package/src/components/base/todo.md

@@ -0,0 +1,8 @@
+# Chores
+
+# New components
+- Stat (for displaying a number with a label)
+- Spinner (for loading states)
+- Bubble (for whatsapp chat bubbles etc)
+
+## Low priority

package/src/components/typography/Heading.astro

@@ -0,0 +1,41 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Typography from './_Typography.astro'
+
+type Props<As extends HTMLTag = 'h2'> = Polymorphic<{ as: As }> &
+  Omit<ComponentProps<typeof Typography>, 'size'> & {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+  }
+
+const { as = 'h2', ...rest } = Astro.props
+---
+
+<Typography
+  class:list={['full-heading']}
+  {as}
+  {...rest as any}
+>
+  <slot name="before" />
+  <slot />
+</Typography>
+
+<style is:global lang="scss">
+  .full-heading {
+    max-width: calc(var(--space-element-3) * 36);
+    color: var(--foreground);
+    font-weight: var(--full-heading-font-weight);
+    font-size: var(--text-heading);
+    line-height: 1.1;
+    font-family: var(--full-heading-font-family);
+    letter-spacing: -0.025em;
+
+    .full-tag + & {
+      --my-spacer: var(--space-5);
+    }
+
+    .full-tagline,
+    .full-badge + & {
+      --my-spacer: var(--space-3);
+    }
+  }
+</style>

package/src/components/typography/Label.astro

@@ -0,0 +1,36 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Typography from './_Typography.astro'
+
+type Props<As extends HTMLTag = 'label'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Typography> & {
+    variant?: 'base' | 'muted'
+    text?: string
+    html?: string
+  }
+
+const { as = 'label', text, html, ...rest } = Astro.props
+---
+
+<Typography
+  class:list={['full-label']}
+  {as}
+  {...rest}
+>
+  <slot name="before" />
+  <Fragment set:html={html} />
+  {text}
+  <slot />
+</Typography>
+
+<style is:global lang="scss">
+  .full-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);
+    text-align: left;
+  }
+</style>

package/src/components/typography/Link.astro

@@ -0,0 +1,38 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Typography from './_Typography.astro'
+
+type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Typography>
+
+const { as = 'a', ...rest } = Astro.props
+---
+
+<Typography
+  class:list={['full-link']}
+  {as}
+  {...rest}
+>
+  <slot name="before" />
+  <slot />
+</Typography>
+
+<style is:global lang="scss">
+  .full-link {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+    color: var(--foreground);
+    font-weight: var(--full-font-weight);
+    font-size: var(--text);
+    font-family: var(--full-font-family);
+    text-decoration: none;
+    text-decoration-color: var(--border);
+    white-space: nowrap;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+</style>

package/src/components/typography/Links.astro

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