fulldev-ui 0.1.64

package/src/components/typography/List.astro

@@ -0,0 +1,42 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import { isObject } from 'radash'
+import ListItem from './ListItem.astro'
+import Typography from './_Typography.astro'
+
+type Props<As extends HTMLTag = 'ul'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Typography> & {
+    items?: (ComponentProps<typeof ListItem> | string)[]
+  }
+
+const { as = 'ul', items, ...rest } = Astro.props
+---
+
+<Typography
+  class:list={['full-list']}
+  {as}
+  {...rest}
+>
+  <slot name="before" />
+  {
+    items?.map((item) => {
+      if (isObject(item)) return <ListItem {...item} />
+      else return <ListItem html={item} />
+    })
+  }
+  <slot />
+</Typography>
+
+<style is:global lang="scss">
+  .full-list {
+    display: flex;
+    flex-direction: column;
+    padding-left: var(--space-4);
+    color: var(--foreground);
+    font-weight: var(--full-font-weight);
+    font-size: var(--text);
+    line-height: 1.625;
+    font-family: var(--full-font-family);
+    list-style-type: disc;
+  }
+</style>

package/src/components/typography/ListItem.astro

@@ -0,0 +1,30 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Typography from './_Typography.astro'
+
+type Props<As extends HTMLTag = 'li'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Typography>
+
+const { as = 'li', ...rest } = Astro.props
+---
+
+<Typography
+  class:list={['full-list-item']}
+  {as}
+  {...rest}
+>
+  <slot name="before" />
+  <slot />
+</Typography>
+
+<style is:global lang="scss">
+  .full-item {
+    align-items: center;
+    max-width: calc(var(--space-element-3) * 36);
+    color: var(--foreground);
+    font-weight: var(--full-font-weight);
+    font-size: var(--text);
+    line-height: 1.625;
+    font-family: var(--full-font-family);
+  }
+</style>

package/src/components/typography/Paragraph.astro

@@ -0,0 +1,38 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Typography from './_Typography.astro'
+
+type Props<As extends HTMLTag = 'p'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Typography>
+
+const { as = 'p', ...rest } = Astro.props
+---
+
+<Typography
+  class:list={['full-paragraph']}
+  {as}
+  {...rest}
+>
+  <slot name="before" />
+  <slot />
+</Typography>
+
+<style is:global lang="scss">
+  .full-paragraph {
+    max-width: calc(var(--space-element-3) * 36);
+    color: var(--foreground);
+    font-weight: var(--full-font-weight);
+    font-size: var(--text);
+    line-height: 1.625;
+    font-family: var(--full-font-family);
+
+    .full-tag + & {
+      --my-spacer: var(--space-5);
+    }
+
+    .full-heading + &,
+    .full-paragraph + & {
+      --my-spacer: var(--space-3);
+    }
+  }
+</style>

package/src/components/typography/Tagline.astro

@@ -0,0 +1,39 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Typography from './_Typography.astro'
+
+type Props<As extends HTMLTag = 'span'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Typography>
+
+const { as = 'span', variant, ...rest } = Astro.props
+---
+
+<Typography
+  class:list={['full-tagline']}
+  {as}
+  {variant}
+  {...rest}
+>
+  <slot name="before" />
+  <slot />
+</Typography>
+
+<style is:global lang="scss">
+  .full-tagline {
+    max-width: calc(var(--space-element-3) * 36);
+    color: var(--foreground);
+    font-weight: var(--full-font-weight);
+    font-size: var(--text-element);
+    line-height: 1.25;
+    font-family: var(--full-font-family);
+
+    .full-tag + & {
+      --my-spacer: var(--space-5);
+    }
+
+    .full-heading + &,
+    .full-paragraph + & {
+      --my-spacer: var(--space-3);
+    }
+  }
+</style>

package/src/components/typography/_Typography.astro

@@ -0,0 +1,28 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Children from '../_Children.astro'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag> & {
+    html?: string
+    text?: string
+    variant?: 'base' | 'muted'
+  }
+
+const { ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['full-typography']}
+  {...rest}
+>
+  <slot name="before" />
+  <Children {...rest} />
+  <slot />
+</Tag>
+
+<style is:global lang="scss">
+  .full-typography {
+  }
+</style>

package/src/components/typography/todo.md

@@ -0,0 +1,15 @@
+# Chores
+
+
+# New components
+- Highlight (for highlighint stuff in headings for example, with a primary background etc. Should accept same colors as badge)
+- Field (for form fields with label etc. Should adapt based on the element, like horizontal for checkboxes)
+
+## Low priority
+- Toast
+- Modal
+- Drawer
+- Alert
+- Tooltip
+- Legal
+- Banner

package/src/components/utility/DecorativeBox.astro

@@ -0,0 +1,22 @@
+---
+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/utility/Head.astro

@@ -0,0 +1,81 @@
+---
+import { SEO } from 'astro-seo'
+
+type Props = {
+  title?: string
+  description?: string
+  image?: string
+}
+
+const { title, description, image } = Astro.props
+---
+
+<head>
+  <meta charset="UTF-8" />
+  <meta
+    content="width=device-width, initial-scale=1, viewport-fit=cover"
+    name="viewport"
+  />
+  <meta
+    name="generator"
+    content={Astro.generator}
+  />
+
+  <SEO
+    title={title || undefined}
+    description={description || undefined}
+    openGraph={title && image
+      ? {
+          basic: {
+            title: title,
+            type: 'website',
+            image: image,
+          },
+          image: {
+            url: image,
+            alt: title,
+          },
+        }
+      : undefined}
+  />
+
+  <!-- Favicon -->
+  <link
+    rel="apple-touch-icon"
+    sizes="76x76"
+    href="/favicon/apple-touch-icon.png"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="32x32"
+    href="/favicon/favicon-32x32.png"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="16x16"
+    href="/favicon/favicon-16x16.png"
+  />
+  <link
+    rel="manifest"
+    href="/favicon/site.webmanifest"
+  />
+  <link
+    rel="mask-icon"
+    href="/favicon/safari-pinned-tab.svg"
+  />
+  <link
+    rel="shortcut icon"
+    href="/favicon/favicon.ico"
+  />
+  <meta
+    name="msapplication-config"
+    content="/favicon/browserconfig.xml"
+  />
+  <meta
+    name="theme-color"
+    content="#000000"
+  />
+  <slot />
+</head>

package/src/components/wrapper/Body.astro

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

package/src/components/wrapper/Card.astro

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

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

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

@@ -0,0 +1,14 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Wrapper from './_Wrapper.astro'
+
+type Props<As extends HTMLTag = 'footer'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Wrapper>
+
+const {
+  as = 'footer',
+  direction = 'horizontal',
+  density = 'compact',
+  ...rest
+} = Astro.props
+---

package/src/components/wrapper/Form.astro

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

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