fulldev-ui 0.3.0-beta.2 → 0.3.2

package/.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1718391483085
+		"lastUpdateCheck": 1719579657106
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.3.0-beta.2",
+  "version": "0.3.2",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",
@@ -23,22 +23,27 @@
   "type": "module",
   "exports": {
     ".": "./src/index.ts",
-    "./color": "./src/css/color.css",
-    "./radix": "./src/css/radix.css",
-    "./integration": "./src/integration/integration.ts"
+    "./color": "./src/css/color.scss",
+    "./integration": "./src/integration/integration.ts",
+    "./tailwind": "./src/integration/tailwind.ts",
+    "./unocss": "./src/integration/unocss.ts"
   },
   "devDependencies": {
     "@astrojs/check": "^0.5.9",
     "@types/flat": "^5.0.5",
-    "astro": "^4.5.5"
+    "astro": "^4.5.5",
+    "unocss": "^0.61.0"
   },
   "dependencies": {
     "@iconify-json/tabler": "^1.1.109",
     "astro-seo": "^0.8.3",
     "flat": "^6.0.1",
+    "html-element-attributes": "^3.4.0",
     "radash": "^12.1.0",
     "remeda": "1.61.0",
     "sass": "^1.77.0",
+    "tailwindcss": "^3.4.4",
+    "tailwindcss-themer": "^4.0.0",
     "typescript": "^5.4.3",
     "vite-plugin-virtual": "^0.3.0"
   }

package/src/components/_Block.astro

@@ -15,11 +15,6 @@ const Component = components.find((component) => {
   const componentName = fileName?.split('.')[0]
   return componentName === _block
 })?.default
-
-console.log({
-  _block,
-  Component,
-})
 ---
 
 {Component && <Component {...rest} />}

package/src/components/_Component.astro

@@ -5,15 +5,18 @@ type Props<As extends HTMLTag> = {
   as?: As
   slot?: any
   if?: 'content' | any
+  wrapper?: any
   [key: string | number | symbol]: any
 }
 
 const {
   as: As = 'div',
   if: ifProp = 'content',
+  wrapper = true,
   theme,
   compact,
   variant,
+  underline,
   density,
   size,
   align,
@@ -25,6 +28,7 @@ const {
   structure,
   text,
   html,
+  level,
   ...rest
 } = Astro.props
 
@@ -42,10 +46,12 @@ const render =
     <As
       class:list={[
         'full',
+        structure,
         {
           compact,
           contrast,
           [`theme-${theme}`]: theme,
+          [`level-${level}`]: level,
           [`variant-${variant}`]: variant,
           [`density-${density}`]: density,
           [`structure-${structure}`]: structure,
@@ -55,6 +61,7 @@ const render =
           [`frame-${frame}`]: frame,
           [`ratio-${ratio}`]: ratio,
           [`color-${color}`]: color,
+          [`underline-${underline}`]: underline,
         },
       ]}
       {...rest}
@@ -68,17 +75,12 @@ const render =
 
 <style is:global lang="scss">
   @import '../css/utils.scss';
-  @import '../css/color.css';
+  @import '../css/color.scss';
   @import '../css/styles.css';
-  @import '../css/size.css';
-  @import '../css/props/frame.scss';
-  @import '../css/props/variant.scss';
-  @import '../css/props/structure.scss';
-  @import '../css/props/align.scss';
-  @import '../css/props/position.scss';
+  @import '../css/size.scss';
+  @import '../css/space.scss';
 
   @include component('full') {
-    z-index: 0;
     box-sizing: border-box;
   }
 </style>

package/src/components/_archive/Body.astro

@@ -29,8 +29,8 @@ const { as = 'body', ...rest } = Astro.props
       max-width: 100vw;
       height: 100%;
       min-height: 100vh;
-      color: var(--foreground);
-      font-size: var(--text-body);
+      color: var(--text);
+      font-size: var(--text-2);
       font-family: var(--font-family);
     }
   </style>

package/src/components/_archive/Nav.astro

@@ -26,5 +26,17 @@ const { as = 'nav', structure = 'spread', ...rest } = Astro.props
   @include component('nav') {
     margin-left: auto;
     width: max-content;
+
+    &.align-start {
+      align-items: flex-start;
+    }
+
+    &.align-center {
+      align-items: center;
+    }
+
+    &.align-end {
+      align-items: flex-end;
+    }
   }
 </style>

package/src/components/_todo/Form.astro

@@ -25,6 +25,6 @@ const { as = 'form', structure = 'column', ...rest } = Astro.props
   @include component('form') {
     display: flex;
     width: 100%;
-    max-width: calc(var(--element-3) * 36);
+    max-width: calc(var(--space-4) * 36);
   }
 </style>

package/src/components/_todo/Prose.astro

@@ -32,9 +32,9 @@ const { as = 'div', ...rest } = Astro.props
 
   // Tables
   .full.prose {
-    color: var(--foreground);
+    color: var(--text);
     font-weight: var(--font-weight);
-    font-size: var(--text-body);
+    font-size: var(--text-2);
     line-height: 1.625;
     font-family: var(--font-family);
 
@@ -51,7 +51,7 @@ const { as = 'div', ...rest } = Astro.props
         h5,
         h6 {
           margin: var(--space-2) 0;
-          font: 600 var(--text-body) 'Saira';
+          font: 600 var(--text-2) 'Saira';
 
           & + p {
             color: var(--hue11);
@@ -65,7 +65,7 @@ const { as = 'div', ...rest } = Astro.props
     }
 
     table {
-      margin: var(--space-4) 0;
+      margin: var(--space-5) 0;
       border: 1px solid var(--border);
       border-radius: var(--radius-1) !important;
       border-collapse: collapse;
@@ -77,7 +77,7 @@ const { as = 'div', ...rest } = Astro.props
       background: var(--raised-background) !important;
       color: var(--muted-foreground) !important;
       font-weight: 500 !important;
-      font-size: var(--text-label) !important;
+      font-size: var(--text-1) !important;
     }
 
     td {
@@ -91,14 +91,14 @@ const { as = 'div', ...rest } = Astro.props
 
     table a {
       color: var(--solid) !important;
-      font-size: var(--text-label) !important;
+      font-size: var(--text-1) !important;
       line-height: 1 !important;
       white-space: nowrap;
     }
 
     h6 {
       margin: var(--space-2) 0;
-      font-size: var(--text-body) !important;
+      font-size: var(--text-2) !important;
     }
 
     table a:hover {

package/src/components/base/Badge.astro

@@ -1,25 +1,29 @@
 ---
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import type { HTMLTag, Polymorphic } from 'astro/types'
 import Component from '../_Component.astro'
 import Icon from './Icon.astro'
 
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component> & {
-    html?: string
-    text?: string
-    variant?: 'primary' | 'raised' | 'muted' | 'accent' | 'outline'
-    icon?: ComponentProps<typeof Icon> | ComponentProps<typeof Icon>['name']
-  }
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
+  variant?: 'solid' | 'surface' | 'soft' | 'outline' | 'ghost'
+  size?: 'sm' | 'md' | 'lg'
+  color?: 'base' | 'brand'
+  contrast?: boolean
+  compact?: boolean
+  html?: string
+  text?: string
+  icon?: string
+}
 
-const { icon, ...rest } = Astro.props
+const { variant = 'outline', icon, ...rest } = Astro.props
 ---
 
 <Component
   class:list={['badge']}
+  {variant}
   {...rest}
 >
   <slot />
-  {typeof icon === 'string' ? <Icon name={icon} /> : <Icon {...icon} />}
+  <Icon name={icon} />
 </Component>
 
 <style is:global lang="scss">
@@ -33,15 +37,15 @@ const { icon, ...rest } = Astro.props
     vertical-align: top;
     gap: var(--space-2);
     transition: var(--transition);
-    box-shadow: inset 0 0 0 1px var(--border);
+    border: 1px solid var(--border);
     border-radius: var(--radius-1);
     background-color: var(--background);
-    padding-right: var(--element-2);
-    padding-left: var(--element-2);
-    height: calc(var(--text-label) + 2 * var(--element-1));
-    color: var(--foreground);
+    padding-right: var(--space-3);
+    padding-left: var(--space-3);
+    height: calc(var(--text-1) + 2 * var(--space-2));
+    color: var(--text);
     font-weight: var(--button-font-weight);
-    font-size: var(--text-label);
+    font-size: var(--text-1);
     line-height: 1.625;
     font-family: var(--button-font-family);
     text-align: center;

package/src/components/base/Button.astro

@@ -3,30 +3,23 @@ import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
 import Component from '../_Component.astro'
 import Icon from './Icon.astro'
 
-type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component> & {
-    html?: string
-    text?: string
-    variant?: 'solid' | 'soft' | 'surface' | 'outline' | 'ghost' | 'link'
-    color?: 'base' | 'brand'
-    icon?: ComponentProps<typeof Icon> | ComponentProps<typeof Icon>['name']
-  }
+type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
+  size?: 'sm' | 'md' | 'lg'
+  color?: 'base' | 'brand'
+  contrast?: boolean
+  html?: string
+  text?: string
+  variant?: 'solid' | 'soft' | 'surface' | 'outline' | 'ghost' | 'link'
+  icon?: ComponentProps<typeof Icon> | ComponentProps<typeof Icon>['name']
+}
 
-const {
-  as = 'a',
-  variant = 'solid',
-  color = variant === 'solid' ? 'brand' : 'base',
-  contrast,
-  icon,
-  ...rest
-} = Astro.props
+const { as = 'a', variant = 'solid', contrast, icon, ...rest } = Astro.props
 ---
 
 <Component
   class:list={['button']}
   {as}
   {variant}
-  {color}
   {contrast}
   {...rest}
 >
@@ -38,8 +31,6 @@ const {
   @import '../../css/utils.scss';
 
   @include component('button') {
-    @import '../../css/props/variant.scss';
-
     display: inline-flex;
     flex-shrink: 0;
     justify-content: center;
@@ -49,14 +40,15 @@ const {
     transition: background-color var(--transition);
     cursor: pointer;
     outline: none !important;
-    border: none;
+    border: 1px solid var(--border);
     border-radius: var(--radius-1);
-    padding-right: var(--element-3);
-    padding-left: var(--element-3);
-    height: calc(var(--text-label) + 2 * var(--element-3));
-    color: var(--foreground);
+    background-color: var(--background);
+    padding-right: var(--space-4);
+    padding-left: var(--space-4);
+    height: calc(var(--text-1) + 2 * var(--space-4));
+    color: var(--text);
     font-weight: var(--button-font-weight);
-    font-size: var(--text-label);
+    font-size: var(--text-1);
     line-height: 1.625;
     font-family: var(--button-font-family);
     text-align: center;
@@ -68,10 +60,6 @@ const {
       outline-offset: 2px;
     }
 
-    &.variant-solid {
-      color: var(--background);
-    }
-
     &:disabled {
       opacity: 0.5;
       cursor: not-allowed;
@@ -80,14 +68,13 @@ const {
 
     &.variant-link {
       box-shadow: none;
+      border-color: transparent;
+      background-color: transparent;
       padding: 0;
+      height: auto;
 
       &:hover {
-        text-decoration: underline;
-      }
-
-      &.contrast {
-        color: var(--foreground-contrast);
+        color: var(--colo-12);
       }
     }
   }

package/src/components/base/Icon.astro

@@ -6,6 +6,7 @@ import Component from '../_Component.astro'
 type Props<As extends HTMLTag = 'i'> = Polymorphic<{ as: As }> &
   ComponentProps<typeof Component> & {
     name?: string
+    color?: 'base' | 'brand'
   }
 
 const { as = 'i', name, ...rest } = Astro.props
@@ -43,8 +44,8 @@ const icon = trimmedName
     align-items: center;
     width: 1em;
     height: 1em;
-    color: var(--foreground);
-    font-size: var(--text-body);
+    color: var(--text);
+    font-size: var(--text-2);
 
     svg {
       position: absolute;

package/src/components/base/Image.astro

@@ -1,11 +1,14 @@
 ---
-import type { ComponentProps } from 'astro/types'
+import type { HTMLAttributes } from 'astro/types'
+import { Image as AstroImage } from 'astro:assets'
 import { isString } from 'remeda'
 import Component from '../_Component.astro'
 
-interface Props extends ComponentProps<typeof Component> {
-  position?: 'background' | 'cover'
+type Props = HTMLAttributes<'img'> & {
+  position?: 'background' | 'cover' | 'inset'
   frame?: 'inset'
+  width?: number | 1920
+  height?: number | 1920
 }
 
 function getAltBySrc(): string {
@@ -17,53 +20,44 @@ function getAltBySrc(): string {
 }
 
 const {
-  as = 'img',
   loading = 'lazy',
   alt = getAltBySrc(),
-  src = Astro.props.html,
+  src = Astro.props.src,
   position,
   frame,
+  width,
+  height,
   ...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 && (
-    <Component
-      class:list={['image']}
-      if={src}
-      {src}
-      {alt}
-      {as}
-      {frame}
-      {position}
-      {...rest}
-    />
+    <>
+      {!width && !height && (
+        <Component
+          class:list={['image']}
+          if={src}
+          {src}
+          {alt}
+          as="img"
+          {frame}
+          {position}
+          {...rest}
+        />
+      )}
+      {width && height && (
+        <AstroImage
+          class:list={['image']}
+          {src}
+          {alt}
+          width={width}
+          height={height}
+          loading="eager"
+          {...rest}
+        />
+      )}
+    </>
   )
 }
 
@@ -72,10 +66,8 @@ const {
 
   @include component('image') {
     display: block;
-    border-radius: var(--radius-1);
     width: 100%;
     height: auto;
-    object-fit: cover;
 
     &.mask-sm {
       -webkit-mask-image: linear-gradient(to top, transparent 0%, black 30%);
@@ -86,5 +78,87 @@ const {
       -webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);
       mask-image: linear-gradient(to top, transparent 0%, black 100%);
     }
+
+    &.position-background {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: -1;
+      margin: 0 !important;
+      border-radius: 0;
+      width: 100%;
+      height: 100%;
+      max-height: 100%;
+      object-fit: cover;
+    }
+
+    &.position-cover {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    &.position-container {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      object-position: center;
+    }
+
+    &.position-inset {
+      object-fit: cover;
+
+      &:is(.structure-column > &) {
+        margin-right: calc(var(--inner-x) * -1);
+        margin-left: calc(var(--inner-x) * -1);
+        width: calc(100% + var(--inner-x) * 2);
+
+        &.image:first-child {
+          margin-top: calc(var(--inner-y) * -1);
+          height: calc(100% + var(--inner-y) * 1);
+        }
+
+        &.image:last-child {
+          margin-bottom: calc(var(--inner-y) * -1);
+          height: calc(100% + var(--inner-y) * 1);
+        }
+      }
+
+      &:is(.structure-split > &) {
+        @media (max-width: 1023.999px) {
+          margin-right: calc(var(--inner-x) * -1);
+          margin-left: calc(var(--inner-x) * -1);
+          width: calc(100% + var(--inner-x) * 2);
+
+          &.image:first-child {
+            margin-top: calc(var(--inner-y) * -1);
+            height: calc(100% + var(--inner-y) * 1);
+          }
+
+          &.image:last-child {
+            margin-bottom: calc(var(--inner-y) * -1);
+            height: calc(100% + var(--inner-y) * 1);
+          }
+        }
+
+        @media (min-width: 1024px) {
+          margin-top: calc(var(--inner-y) * -1);
+          margin-bottom: calc(var(--inner-y) * -1);
+          height: calc(100% + var(--inner-y) * 2);
+
+          &.image:first-child {
+            margin-left: calc(var(--inner-x) * -1);
+            width: calc(100% + var(--inner-x) * 1);
+          }
+
+          &.image:last-child {
+            margin-right: calc(var(--inner-x) * -1);
+            width: calc(100% + var(--inner-x) * 1);
+          }
+        }
+      }
+    }
   }
 </style>

package/src/components/base/Logo.astro

@@ -27,7 +27,7 @@ const { as = 'a', href = '/', src, ...rest } = Astro.props
     .image {
       display: block !important;
       width: auto !important;
-      height: var(--space-5) !important;
+      height: var(--space-6) !important;
       object-fit: contain !important;
       color: var(--12) !important;
     }

package/src/components/base/Rating.astro

@@ -5,44 +5,46 @@ import Icon from './Icon.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
   ComponentProps<typeof Component> & {
-    value?: number | string
+    color?: 'base' | 'brand'
+    value?: number
+    size?: string
+    compact?: boolean
   }
 
-const { value = Astro.props.html, ...rest } = Astro.props
+const { size, compact, value = 5, ...rest } = Astro.props
+
+const getIcon = (count: number) => {
+  const difference = value - count
+  if (difference >= -0.25) return 'star-filled'
+  if (difference >= -0.75) return 'star-half-filled'
+  return 'star'
+}
 ---
 
 <Component
   class:list={['rating']}
   {...rest}
 >
-  {value && [1, 2, 3, 4, 5].map(() => <Icon name="star-filled" />)}
+  {
+    [1, 2, 3, 4, 5].map((_, i) => (
+      <>
+        <Icon
+          size={size}
+          compact={compact}
+          name={getIcon(i + 1)}
+          class:list={'rating-icon-solid'}
+        />
+      </>
+    ))
+  }
 </Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
 
   @include component('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(--foreground);
-    }
+    display: inline-flex;
+    position: relative;
+    gap: var(--space-2);
   }
 </style>