fulldev-ui 0.3.12 → 0.3.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.3.12",
+  "version": "0.3.14",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",

package/src/components/_todo/Prose.astro

@@ -33,11 +33,46 @@ const { as = 'div', ...rest } = Astro.props
   // Tables
   .full.prose {
     color: var(--text);
+    color: var(--color-11);
     font-weight: var(--font-weight);
     font-size: var(--text-2);
-    line-height: 1.625;
+    line-height: 1.7;
     font-family: var(--font-family);
 
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: var(--color-12);
+      line-height: 1.2;
+    }
+
+    h1 {
+      font-size: var(--text-7);
+    }
+
+    h2 {
+      font-size: var(--text-6);
+    }
+
+    h3 {
+      font-size: var(--text-5);
+    }
+
+    h4 {
+      font-size: var(--text-4);
+    }
+
+    h5 {
+      font-size: var(--text-3);
+    }
+
+    h6 {
+      font-size: var(--text-2);
+    }
+
     .display {
       display: grid;
       width: 100%;

package/src/components/base/Image.astro

@@ -10,6 +10,7 @@ type Props = HTMLAttributes<'img'> & {
   width?: number | 1920
   height?: number | 1920
   radius?: 'none' | 'auto' | 'full'
+  mask?: 'sm' | 'md' | 'lg'
 }
 
 function getAltBySrc(): string {
@@ -77,11 +78,13 @@ const {
       mask-image: linear-gradient(to top, transparent 0%, black 30%);
     }
 
-    &.mask {
+    &.mask-md {
       -webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);
       mask-image: linear-gradient(to top, transparent 0%, black 100%);
     }
 
+    
+
     &.radius-none {
       border-radius: 0;
     }

package/src/components/base/input/InputElement.astro

@@ -22,6 +22,7 @@ const {
   {variant}
   {placeholder}
   {name}
+  {type}
   {...rest}
 />
 

package/src/components/experimental/Channel.astro

@@ -0,0 +1,50 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import { Box, Button, Column, Heading, Text } from 'fulldev-ui'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
+  if?: any
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  color?: 'base' | 'brand'
+  variant?: 'solid' | 'surface' | 'soft' | 'outline'
+  structure?: 'row' | 'column'
+  level?: 1 | 2 | 3 | 4 | 5 | 6
+  compact?: boolean
+  heading?: string
+  text?: string
+  icon?: string
+  href?: string
+}
+
+const {
+  variant = 'soft',
+  structure = 'row',
+  color = 'brand',
+  compact = true,
+  level = 5,
+  heading,
+  text,
+  icon,
+  href,
+  ...rest
+} = Astro.props
+---
+
+<Box
+  {structure}
+  {...rest}
+>
+  <Button
+    {variant}
+    {color}
+    {href}
+    {icon}
+  />
+  <Column>
+    <Heading
+      {level}
+      html={heading}
+    />
+    <Text html={text} />
+  </Column>
+</Box>

package/src/components/experimental/Price.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Component from '../_Component.astro'
+
+type Props<As extends HTMLTag = 'p'> = Polymorphic<{ as: As }> & {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  color?: 'base' | 'brand'
+  contrast?: boolean
+  value?: number
+}
+
+const { as = 'p', value, ...rest } = Astro.props
+---
+
+<Component
+  if={value}
+  class:list={['price']}
+  {as}
+  {...rest}
+>
+  €{value?.toFixed(2).replace('.', ',')}
+</Component>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('price') {
+    margin: 0;
+    max-width: calc(var(--space-4) * 36);
+    color: var(--text, var(--color-11));
+    font-weight: var(--font-weight);
+    font-size: var(--text-5);
+    line-height: 1.25;
+    font-family: var(--font-family);
+  }
+</style>

package/src/css/color.scss

@@ -1,5 +1,5 @@
-:root,
-.theme-light,
+:where(:root),
+:where(.theme-light),
 [data-theme='light'] {
   --brand-1: #fbf9f8;
   --brand-2: #fff1ec;
@@ -32,7 +32,7 @@
   color-scheme: light;
 }
 
-.theme-dark,
+:where(.theme-dark),
 [data-theme='dark'] {
   --brand-1: #160f0d;
   --brand-2: #201511;

package/src/index.ts

@@ -59,6 +59,10 @@ export { default as Split } from './components/structure/Split.astro'
 export { default as Spread } from './components/structure/Spread.astro'
 export { default as Wrap } from './components/structure/Wrap.astro'
 
+// Experimental components
+export { default as Channel } from './components/experimental/Channel.astro'
+export { default as Price } from './components/experimental/Price.astro'
+
 // Utility components
 export { default as Block } from './components/_Block.astro'
 export { default as Blocks } from './components/_Blocks.astro'