fulldev-ui 0.1.65 → 0.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.1.65",
+  "version": "0.2.10",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",
@@ -23,7 +23,8 @@
   "exports": {
     ".": "./src/index.ts",
     "./css": "./src/css/main.css",
-    "./colors": "./src/css/colors.css"
+    "./colors": "./src/css/colors.css",
+    "./integration": "./src/integration/integration.ts"
   },
   "devDependencies": {
     "@astrojs/check": "^0.5.9",
@@ -40,6 +41,7 @@
     "radash": "^12.1.0",
     "remeda": "1.61.0",
     "sass": "^1.77.0",
+    "tailwindcss": "^3.4.4",
     "typescript": "^5.4.3",
     "vite-plugin-virtual": "^0.3.0"
   }

package/src/components/_Children.astro

@@ -3,13 +3,10 @@ import { isObject, pascal } from 'radash'
 import { isArray, isString } from 'remeda'
 
 interface Props {
-  render?: () => any
   [key: string]: any
 }
 
 const components = await Astro.glob('../**/*.astro')
-// const userComponents = await Astro.glob('/src/**/*.astro')
-// const components = [...userComponents, ...libraryComponents]
 ---
 
 {
@@ -20,10 +17,6 @@ const components = await Astro.glob('../**/*.astro')
 
     if (part === 'Text' && isString(value)) return value
     if (part === 'Html') return <Fragment set:html={value} />
-    if (part === 'Content' && Astro.props.render) {
-      const { Content } = Astro.props.render()
-      return <Content />
-    }
 
     const Component: any = components.find((component) => {
       const fileName = component.default.moduleId?.split('/').pop()

package/src/components/_Tag.astro

@@ -1,52 +1,73 @@
 ---
 interface Props {
   theme?: 'light' | 'dark' | string
-  size?: 'sm' | 'md' | 'lg' | string
+  size?: 'sm' | 'md' | 'lg'
   density?: 'base' | 'compact' | string
   slot?: any
-  if?: 'slot' | any
+  if?: 'content' | any
   [key: string | number | symbol]: any
 }
 
 const {
   as: As = 'div',
-  if: ifProp = 'slot',
+  if: ifProp = 'content',
   theme,
   variant,
   density,
   size,
+  align,
+  position,
+  level,
+  frame,
+  ratio,
+  structure,
+  text,
+  html,
   ...rest
 } = Astro.props
 
 const slot = await Astro.slots.render('default')
-const render = ifProp === 'slot' ? slot?.trim().length > 0 : ifProp
+const hasContent = (str?: string) => str && str.trim().length > 0
+const render =
+  ifProp == 'content'
+    ? hasContent(slot) || hasContent(html) || hasContent(text)
+    : ifProp
 ---
 
 {
   render && (
     <As
       class:list={[
-        'full-tag',
+        'full',
+        structure,
         {
-          [`full-theme-${theme}`]: theme,
-          [`full-variant-${variant}`]: variant,
-          [`full-density-${density}`]: density,
-          [`full-size-${size}`]: size,
+          [`theme-${theme}`]: theme,
+          [`variant-${variant}`]: variant,
+          [`density-${density}`]: density,
+          [`size-${size}`]: size,
+          [`align-${align}`]: align,
+          [`level-${level}`]: level,
+          [`position-${position}`]: position,
+          [`frame-${frame}`]: frame,
+          [`ratio-${ratio}`]: ratio,
         },
       ]}
       {...rest}
     >
+      <Fragment set:text={text} />
+      <Fragment set:html={html} />
       <Fragment set:html={slot} />
     </As>
   )
 }
 
-<style is:global>
-  @import '../css/main.css';
-</style>
+<style is:global lang="scss">
+  @import '../css/utils.scss';
+  @import '../css/colors.css';
+  @import '../css/styles.css';
+  @import '../css/sizes.css';
 
-<style is:global>
-  .full-tag {
+  @include component('full') {
     z-index: 0;
     box-sizing: border-box;
   }

package/src/components/base/Badge.astro

@@ -1,50 +1,49 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import type { Childmorphic } from '../../types/Childmorphic'
-import Children from '../_Children.astro'
 import Tag from '../_Tag.astro'
+import Icon from './Icon.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> &
-  Childmorphic<{
-    html: string
-    text: string
-  }>
+  ComponentProps<typeof Tag> & {
+    html?: string
+    text?: string
+    variant?: 'primary' | 'raised' | 'muted' | 'accent' | 'outline'
+    icon?: ComponentProps<typeof Icon> | ComponentProps<typeof Icon>['name']
+  }
 
-const { as = 'div', variant, ...rest } = Astro.props
+const { icon, ...rest } = Astro.props
 ---
 
 <Tag
-  class:list={['full-badge']}
-  {as}
-  {variant}
+  class:list={['badge']}
   {...rest}
 >
-  <slot name="before" />
-  <Children {...rest} />
   <slot />
+  {typeof icon === 'string' ? <Icon name={icon} /> : <Icon {...icon} />}
 </Tag>
 
 <style is:global lang="scss">
-  .full-badge {
+  @import '../../css/utils.scss';
+
+  @include component('badge') {
     display: inline-flex;
     flex-shrink: 0;
     justify-content: center;
     align-items: center;
     vertical-align: top;
     gap: var(--space-2);
-    transition: var(--full-transition);
+    transition: var(--transition);
     box-shadow: inset 0 0 0 1px var(--border);
-    border-radius: var(--full-border-radius-2);
+    border-radius: var(--radius-1);
     background-color: var(--background);
-    padding-right: var(--space-element-2);
-    padding-left: var(--space-element-2);
-    height: calc(var(--text-element) + 2 * var(--space-element-1));
+    padding-right: var(--element-2);
+    padding-left: var(--element-2);
+    height: calc(var(--text-1) + 2 * var(--element-1));
     color: var(--foreground);
-    font-weight: var(--full-button-font-weight);
-    font-size: var(--text-element);
+    font-weight: var(--button-font-weight);
+    font-size: var(--text-1);
     line-height: 1.625;
-    font-family: var(--full-button-font-family);
+    font-family: var(--button-font-family);
     text-align: center;
     text-decoration: none;
     white-space: nowrap;

package/src/components/base/Button.astro

@@ -1,60 +1,54 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import type { Childmorphic } from '../../types/Childmorphic'
-import Children from '../_Children.astro'
 import Tag from '../_Tag.astro'
-import type Icon from './Icon.astro'
+import Icon from './Icon.astro'
 
 type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> &
-  Childmorphic<{
-    html: string
-    text: string
-    variant?: 'primary' | 'secondary' | 'ghost'
-    icon: ComponentProps<typeof Icon> | ComponentProps<typeof Icon>['name']
-  }>
-
-// TODO: variants: link, filled, outline, ghost. Deze zijn independent van de color prop. Betekent dus dat je een outline variant hebt van elke color.
-// Let wel op, dit werkt niet met de Primary variant, omdat deze kleuren dan niet kloppen.
+  ComponentProps<typeof Tag> & {
+    html?: string
+    text?: string
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost'
+    icon?: ComponentProps<typeof Icon> | ComponentProps<typeof Icon>['name']
+  }
 
-const { as = 'a', variant = 'primary', ...rest } = Astro.props
+const { as = 'a', variant = 'primary', icon, ...rest } = Astro.props
 ---
 
 <Tag
-  class:list={['full-button']}
+  class:list={['button']}
   {as}
   {variant}
   {...rest}
 >
-  <slot name="before" />
-  <Children {...rest} />
   <slot />
+  {typeof icon === 'string' ? <Icon name={icon} /> : <Icon {...icon} />}
 </Tag>
 
 <style is:global lang="scss">
-  .full-button {
+  @import '../../css/utils.scss';
+
+  @include component('button') {
     display: inline-flex;
     flex-shrink: 0;
     justify-content: center;
     align-items: center;
     vertical-align: top;
     gap: var(--space-2);
-    transition: background-color var(--full-transition);
+    transition: background-color var(--transition);
     cursor: pointer;
     outline: none !important;
     box-shadow: inset 0 0 0 1px var(--border);
     border: none;
-    border-radius: var(--full-border-radius-2);
+    border-radius: var(--radius-1);
     background-color: var(--background);
-    padding-right: var(--space-element-3);
-    padding-left: var(--space-element-3);
-    height: calc(var(--text-element) + 2 * var(--space-element-3));
+    padding-right: var(--element-3);
+    padding-left: var(--element-3);
+    height: calc(var(--text-1) + 2 * var(--element-3));
     color: var(--foreground);
-    font-weight: var(--full-button-font-weight);
-    font-size: var(--text-element);
+    font-weight: var(--button-font-weight);
+    font-size: var(--text-1);
     line-height: 1.625;
-    font-family: var(--full-button-font-family);
-    user-select: none;
+    font-family: var(--button-font-family);
     text-align: center;
     text-decoration: none;
     white-space: nowrap;
@@ -73,13 +67,5 @@ const { as = 'a', variant = 'primary', ...rest } = Astro.props
       cursor: not-allowed;
       pointer-events: none;
     }
-
-    .full-tag + & {
-      --my-spacer: var(--space-4);
-    }
-
-    & + & {
-      --my-spacer: var(--space-2);
-    }
   }
 </style>

package/src/components/base/Checkbox.astro

@@ -1,27 +1,30 @@
 ---
-import type { ComponentProps, HTMLTag } from 'astro/types'
+import type { ComponentProps } from 'astro/types'
 import Tag from '../_Tag.astro'
 
-type Props<As extends HTMLTag = 'input'> = ComponentProps<typeof Tag<As>>
+type Props = ComponentProps<typeof Tag>
 
 const { as = 'input', type = 'checkbox', name, ...rest } = Astro.props
 ---
 
 <Tag
   class:list={['full-checkbox']}
-  if={name}
-  {name}
+  if={true}
   {as}
-  {type}
+  type="checkbox"
   {...rest}
 />
 
 <style is:global lang="scss">
-  .full-checkbox {
+  @import '../../css/utils.scss';
+
+  @include component('checkbox') {
+    display: block;
     border-width: var(--border-width);
     border-color: var(--border-color);
     border-radius: var(--full-border-radius-2);
     background: var(--background);
+    min-width: var(--element-2);
     color: var(--color);
     accent-color: var(--10);
     font-size: var(--text);

package/src/components/base/Icon.astro

@@ -1,33 +1,42 @@
 ---
 import tablerIcons from '@iconify-json/tabler/icons.json'
-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 = 'i'> = ComponentProps<typeof Tag> & {
-  name?: string
-}
+type Props<As extends HTMLTag = 'i'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag> & {
+    name?: string
+  }
 
-const { as = 'i', name = Astro.props.html, ...rest } = Astro.props
+const { as = 'i', name, ...rest } = Astro.props
 
 const trimmedName = name?.trim() as string | undefined
-const icon = trimmedName && (tablerIcons as any)?.icons[trimmedName]?.body
+const icon = trimmedName
+  ? (tablerIcons as any)?.icons[trimmedName]?.body
+  : undefined
 ---
 
 <Tag
-  class:list={['full-icon']}
+  class:list={['icon']}
   if={icon}
   {as}
   {...rest}
 >
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    set:html={icon}
-  />
+  {
+    icon && (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        set:html={icon}
+      />
+    )
+  }
 </Tag>
 
 <style is:global lang="scss">
-  .full-icon {
+  @import '../../css/utils.scss';
+
+  @include component('icon') {
     display: inline-flex;
     position: relative;
     justify-content: center;
@@ -35,7 +44,7 @@ const icon = trimmedName && (tablerIcons as any)?.icons[trimmedName]?.body
     width: 1em;
     height: 1em;
     color: var(--foreground);
-    font-size: var(--text);
+    font-size: var(--text-2);
 
     svg {
       position: absolute;

package/src/components/base/Image.astro

@@ -5,7 +5,7 @@ import Tag from '../_Tag.astro'
 
 interface Props extends ComponentProps<typeof Tag> {
   position?: 'background' | 'cover' | 'panel'
-  // frame?: 'mask' | 'mask-sm'
+  frame?: 'inset'
 }
 
 function getAltBySrc(): string {
@@ -55,69 +55,69 @@ const {
 {
   src && (
     <Tag
-      class:list={[
-        'full-image',
-        {
-          [`full-position-${position}`]: position,
-        },
-      ]}
+      class:list={['image']}
       if={src}
       {src}
       {alt}
       {as}
+      {frame}
+      {position}
       {...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;
+  @import '../../css/utils.scss';
+
+  @include component('image') {
+      display: block;
+      border-radius: var(--radius-1);
       width: 100%;
-      height: 100%;
+      height: auto;
       object-fit: cover;
 
-      ~ .full-tag {
-        position: relative;
-        z-index: 1;
+      &.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 {
+          position: relative;
+          z-index: 1;
+        }
       }
-    }
 
-    &.full-position-cover {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
+      &.position-cover {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
 
-    &.full-position-panel {
-      height: 100%;
-      object-fit: cover;
-    }
+      &.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-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%);
+      }
 
-    &.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/Input.astro

@@ -1,42 +1,44 @@
 ---
-import type { ComponentProps } from 'astro/types'
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
 import Tag from '../_Tag.astro'
 
-type Props = ComponentProps<typeof Tag>
+type Props<As extends HTMLTag = 'input'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag> & {
+    variant?: 'outline'
+  }
 
-const { as = 'input', variant = 'outline', name, ...rest } = Astro.props
+const { as = 'input', variant = 'outline', ...rest } = Astro.props
 ---
 
 <Tag
-  class:list={['full-input']}
-  if={name}
-  {name}
+  class:list={['input']}
+  if={true}
   {as}
   {variant}
   {...rest}
 />
 
 <style is:global lang="scss">
-  .full-input,
-  .full-textarea,
-  .full-select {
+  @import '../../css/utils.scss';
+
+  @include component('input') {
     display: flex;
     position: relative;
     align-items: center;
     outline: none;
-    box-shadow: inset 0 0 0 var(--full-border-width) var(--border);
+    box-shadow: inset 0 0 0 var(--border-width) var(--border);
     border: 0px;
-    border-radius: var(--full-border-radius-2);
+    border-radius: var(--radius-1);
     background-color: var(--input-background);
-    padding: var(--space-element-2);
+    padding: var(--element-2);
     width: 100%;
     min-width: var(--element-2);
-    height: calc(var(--text-element) + 2 * var(--space-element-3));
+    height: calc(var(--text-1) + 2 * var(--element-3));
     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.25;
-    font-family: var(--full-font-family);
+    font-family: var(--font-family);
 
     &:focus {
       outline: none;

package/src/components/base/Logo.astro

@@ -3,14 +3,14 @@ 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>> &
+type Props<As extends HTMLTag = 'a'> = ComponentProps<typeof Tag> &
   ComponentProps<typeof Children>
 
 const { as = 'a', href = '/', src, ...rest } = Astro.props
 ---
 
 <Tag
-  class:list={['full-logo']}
+  class:list={['logo']}
   {href}
   {as}
   {...rest}
@@ -21,8 +21,10 @@ const { as = 'a', href = '/', src, ...rest } = Astro.props
 </Tag>
 
 <style is:global lang="scss">
-  .full-logo {
-    .full-image {
+  @import '../../css/utils.scss';
+
+  @include component('logo') {
+    .image {
       display: block !important;
       width: auto !important;
       height: var(--space-5) !important;

package/src/components/base/Radio.astro

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