fulldev-ui 0.3.27 → 0.3.28

package/package.json

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

package/src/components/_Component.astro

@@ -13,6 +13,7 @@ const {
   as: As = 'div',
   if: ifProp = 'content',
   wrapper = true,
+  space,
   theme,
   compact,
   variant,
@@ -66,6 +67,7 @@ const render =
           [`underline-${underline}`]: underline,
           [`radius-${radius}`]: radius,
           [`mask-${mask}`]: mask,
+          [`space-${space}`]: space,
         },
       ]}
       {...rest}
@@ -82,7 +84,7 @@ const render =
   @import '../css/color.css';
   @import '../css/styles.css';
   @import '../css/size.scss';
-  @import '../css/space.scss';
+  @import '../css/space.css';
 
   @include component('full') {
     z-index: 1;

package/src/components/_archive/Nav.astro

@@ -6,15 +6,22 @@ type Props<As extends HTMLTag = 'nav'> = Polymorphic<{ as: As }> &
   ComponentProps<typeof Component> & {
     structure?: 'spread' | 'group' | 'row'
     align?: 'start' | 'center' | 'end'
+    space?: 'none' | 'auto'
   }
 
-const { as = 'nav', structure = 'spread', ...rest } = Astro.props
+const {
+  as = 'nav',
+  space = 'auto',
+  structure = 'spread',
+  ...rest
+} = Astro.props
 ---
 
 <Component
   class:list={['nav']}
   {as}
   {structure}
+  {space}
   {...rest}
 >
   <slot />
@@ -29,6 +36,7 @@ const { as = 'nav', structure = 'spread', ...rest } = Astro.props
 
     &.align-start {
       align-items: flex-start;
+      text-align: left;
     }
 
     &.align-center {

package/src/components/base/Rating.astro

@@ -1,34 +1,16 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
 import Component from '../_Component.astro'
-import Column from '../structure/Column.astro'
-import Row from '../structure/Row.astro'
-import Heading from '../typography/Heading.astro'
-import Label from '../typography/Label.astro'
-import Avatar from './Avatar.astro'
 import Icon from './Icon.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
   color?: 'base' | 'brand'
-  radius?: 'none' | 'auto' | 'full'
   value?: number
   size?: string
   compact?: boolean
-  avatars?: string[]
-  label?: string
-  heading: string
 }
 
-const {
-  color = 'brand',
-  radius = 'full',
-  compact = true,
-  value,
-  heading,
-  avatars,
-  label,
-  ...rest
-} = Astro.props
+const { value, ...rest } = Astro.props
 
 const getIcon = (count: number) => {
   if (!value) return
@@ -40,64 +22,26 @@ const getIcon = (count: number) => {
 ---
 
 <Component
-  class:list={['rating']}
-  {compact}
+  class:list={'rating'}
   {...rest}
 >
   {
-    avatars?.map((avatar) => (
-      <Avatar
-        {radius}
-        src={avatar}
-      />
-    ))
+    value &&
+      [1, 2, 3, 4, 5].map((_, i) => (
+        <Icon
+          name={getIcon(i + 1)}
+          class:list={'rating-icon-solid'}
+        />
+      ))
   }
-  <Column>
-    <Row>
-      {
-        value &&
-          [1, 2, 3, 4, 5].map((_, i) => (
-            <Icon
-              {color}
-              name={getIcon(i + 1)}
-              class:list={'rating-icon-solid'}
-            />
-          ))
-      }
-    </Row>
-    <Label
-      color="base"
-      html={label}
-    />
-    <Heading
-      level={6}
-      html={heading}
-    />
-  </Column>
 </Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
 
   @include component('rating') {
-    display: inline-flex;
+    display: flex;
     align-items: center;
-
-    .avatar {
-      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
-    }
-
-    * + .column {
-      margin-left: var(--space-4);
-    }
-
-    .label,
-    .heading {
-      margin-top: var(--space-2) !important;
-    }
-
-    .avatar + .avatar {
-      margin-left: calc(-1 * var(--space-5));
-    }
+    gap: var(--space-2);
   }
 </style>

package/src/components/segment/Box.astro

@@ -4,6 +4,8 @@ import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
   align?: 'start' | 'center' | 'end'
+  position?: 'inset'
+  space?: 'none' | 'auto'
   structure?:
     | 'bento'
     | 'carousel'
@@ -18,6 +20,7 @@ type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
 
 const {
   as = 'div',
+  space = 'auto',
   structure = 'column',
   align = 'start',
   ...rest
@@ -29,6 +32,7 @@ const {
   {as}
   {structure}
   {align}
+  {space}
   {...rest}
 >
   <slot />

package/src/components/segment/Card.astro

@@ -12,7 +12,9 @@ type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
   contrast?: boolean
   compact?: boolean
   ratio?: 'landscape' | 'portrait' | 'square' | number
+  space?: 'auto' | 'none'
   variant?:
+    | 'base'
     | 'ghost'
     | 'subtle'
     | 'surface'
@@ -25,6 +27,7 @@ type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
 const {
   href,
   as = href ? 'a' : 'div',
+  space = 'auto',
   frame = 'panel',
   structure = 'column',
   compact = true,
@@ -41,6 +44,7 @@ const {
   {radius}
   {structure}
   {variant}
+  {space}
   {frame}
   {as}
   {...rest}

package/src/components/segment/Footer.astro

@@ -10,11 +10,14 @@ type Props<As extends HTMLTag = 'footer'> = Polymorphic<{ as: As }> & {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   scheme?: 'light' | 'dark'
   color?: 'base' | 'brand'
+  space?: 'none' | 'auto'
+
   compact?: boolean
 }
 
 const {
   as = 'footer',
+  space = 'auto',
   structure = 'spread',
   variant = 'subtle',
   frame = 'fill',
@@ -28,6 +31,7 @@ const {
   {as}
   {variant}
   {frame}
+  {space}
   {...rest}
 >
   <slot />
@@ -76,6 +80,7 @@ const {
 
     &.align-start {
       align-items: flex-start;
+      text-align: left;
     }
 
     &.align-center {

package/src/components/segment/Header.astro

@@ -9,11 +9,13 @@ type Props<As extends HTMLTag = 'header'> = Polymorphic<{ as: As }> & {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   frame?: 'fill' | 'panel'
   align?: 'start' | 'center' | 'end'
+  space?: 'none' | 'auto'
   compact?: boolean
 }
 
 const {
   as = 'header',
+  space = 'auto',
   structure = 'spread',
   frame = 'fill',
   variant = 'subtle',
@@ -29,6 +31,7 @@ const {
   {compact}
   {structure}
   {variant}
+  {space}
   {...rest}
 >
   <slot />

package/src/components/segment/Section.astro

@@ -10,11 +10,14 @@ type Props<As extends HTMLTag = 'section'> = Polymorphic<{ as: As }> & {
   variant?: 'ghost' | 'subtle' | 'outline' | 'soft' | 'solid' | 'surface'
   align?: 'start' | 'center' | 'end'
   structure?: 'column' | 'split' | 'spread'
+  // order?: 'reverse' | 'switch'
+  space?: 'auto' | 'none'
   compact?: boolean
 }
 
 const {
   as = 'div',
+  space = 'auto',
   frame = 'fill',
   structure = 'column',
   variant = 'ghost',
@@ -29,6 +32,7 @@ const {
   {frame}
   {variant}
   {align}
+  {space}
   {structure}
   {...rest}
 >
@@ -82,5 +86,17 @@ const {
       border-radius: var(--radius-3);
       overflow: hidden;
     }
+
+    // &.order-reverse {
+    //   --is-reverse: initial;
+
+    //   > *:first-child {
+    //     order: 999;
+    //   }
+
+    //   & > *:last-child {
+    //     order: -999;
+    //   }
+    // }
   }
 </style>

package/src/components/structure/Column.astro

@@ -7,14 +7,16 @@ type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   compact?: boolean
   align?: 'start' | 'center' | 'end'
+  space?: 'none' | 'auto'
 }
 
-const { align = 'start', ...rest } = Astro.props
+const { space = 'auto', align = 'start', ...rest } = Astro.props
 ---
 
 <Component
   class:list={['column']}
   {align}
+  {space}
   {...rest}
 >
   <slot />
@@ -31,6 +33,7 @@ const { align = 'start', ...rest } = Astro.props
 
     &.align-start {
       align-items: flex-start;
+      text-align: left;
     }
 
     &.align-center {
@@ -46,6 +49,10 @@ const { align = 'start', ...rest } = Astro.props
       align-items: flex-end;
     }
 
-    @include space-y;
+    &.space-auto {
+      > * + * {
+        margin-top: var(--space-auto);
+      }
+    }
   }
 </style>

package/src/components/structure/Row.astro

@@ -7,14 +7,16 @@ type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   compact?: boolean
   align?: 'start' | 'center' | 'end'
+  space?: 'none' | 'auto'
 }
 
-const { align = 'center', ...rest } = Astro.props
+const { space = 'auto', align = 'center', ...rest } = Astro.props
 ---
 
 <Component
   class:list={['row']}
   {align}
+  {space}
   {...rest}
 >
   <slot />
@@ -27,10 +29,9 @@ const { align = 'center', ...rest } = Astro.props
   @include component('row') {
     display: flex;
 
-    @include space-x;
-
     &.align-start {
       align-items: flex-start;
+      text-align: left;
     }
 
     &.align-center {
@@ -40,5 +41,11 @@ const { align = 'center', ...rest } = Astro.props
     &.align-end {
       align-items: flex-end;
     }
+
+    &.space-auto {
+      > * + * {
+        margin-left: var(--space-auto);
+      }
+    }
   }
 </style>

package/src/components/structure/Split.astro

@@ -7,14 +7,16 @@ type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   compact?: boolean
   align?: 'start' | 'center' | 'end'
+  space?: 'none' | 'auto'
 }
 
-const { align = 'center', ...rest } = Astro.props
+const { space = 'auto', align = 'center', ...rest } = Astro.props
 ---
 
 <Component
   class:list={['split']}
   {align}
+  {space}
   {...rest}
 >
   <slot />
@@ -31,7 +33,11 @@ const { align = 'center', ...rest } = Astro.props
     width: 100%;
 
     @media (max-width: 1023.9999px) {
-      @include space-y;
+      &.space-auto {
+        > * + * {
+          margin-top: var(--space-auto);
+        }
+      }
     }
 
     @media (min-width: 1024px) {
@@ -41,6 +47,7 @@ const { align = 'center', ...rest } = Astro.props
 
     &.align-start {
       align-items: flex-start;
+      text-align: left;
     }
 
     &.align-center {

package/src/components/structure/Spread.astro

@@ -32,6 +32,7 @@ const { align = 'center', ...rest } = Astro.props
 
     &.align-start {
       align-items: flex-start;
+      text-align: left;
     }
 
     &.align-center {

package/src/components/structure/Wrap.astro

@@ -31,6 +31,7 @@ const { align = 'center', ...rest } = Astro.props
 
     &.align-start {
       align-items: flex-start;
+      text-align: left;
     }
 
     &.align-center {

package/src/css/space.css

@@ -0,0 +1,64 @@
+.full + .full,
+.full + .box,
+.full + .masonry,
+.full + .carousel,
+.image + .full,
+.icon + .full {
+  --space-auto: var(--space-6);
+}
+
+.full + .group,
+.full + .row,
+.full + .wrap,
+.full + .button,
+.full + .price,
+.full + .switch {
+  --space-auto: var(--space-5);
+}
+
+.full + .heading,
+.full + .link,
+.full + .list,
+.full + .paragraph,
+.full + .text,
+.full + .tagline,
+.full + .input,
+.full + .textarea,
+.full + .select,
+.full + .badge,
+.full + .rating {
+  --space-auto: var(--space-4);
+}
+
+.paragraph + .paragraph,
+.text + .text,
+.button + .button,
+.input + .button {
+  --space-auto: var(--space-3);
+}
+
+.full + .label,
+.label + .input,
+.label + .textarea,
+.label + .select,
+.icon + .icon {
+  --space-auto: var(--space-2);
+}
+
+.rating + .text,
+.text + .rating {
+  --space-auto: var(--space-1);
+}
+
+.image + .full,
+.icon + .full {
+  --space-auto: var(--space-6);
+}
+
+// .button:not(.variant-link) + .button:not(.variant-link) {
+//   margin-top: var(--space-3);
+// }
+
+// .variant-link + .variant-link{
+//   margin-top: var(--space-2);
+// }

package/src/css/space.scss

@@ -1,107 +0,0 @@
-@mixin space-x {
-  > {
-    .full + .full {
-      margin-left: var(--space-6);
-    }
-
-    .full + .group,
-    .full + .row,
-    .full + .wrap,
-    .full + .button,
-    .full + .switch {
-      margin-left: var(--space-5);
-    }
-
-    .full + .heading,
-    .full + .link,
-    .full + .list,
-    .full + .paragraph,
-    .full + .text,
-    .full + .tagline,
-    .full + .input,
-    .full + .badge,
-    .full + .rating {
-      margin-left: var(--space-4);
-    }
-
-    .paragraph + .paragraph,
-    .text + .text,
-    .button + .button,
-    .input + .button {
-      margin-left: var(--space-3);
-    }
-
-    .full + .label,
-    .icon + .icon,
-    .label + .full {
-      margin-left: var(--space-2);
-    }
-
-    .image + .full {
-      margin-left: var(--space-6);
-    }
-  }
-}
-
-@mixin space-y {
-  > {
-    .full + .full,
-    .full + .box,
-    .full + .masonry {
-      margin-top: var(--space-6);
-    }
-
-    .full + .carousel {
-      margin-top: 0;
-      padding-top: var(--space-6);
-    }
-
-    .full + .group,
-    .full + .row,
-    .full + .wrap,
-    .full + .button,
-    .full + .price,
-    .full + .switch {
-      margin-top: var(--space-5);
-    }
-
-    .full + .heading,
-    .full + .link,
-    .full + .list,
-    .full + .paragraph,
-    .full + .text,
-    .full + .tagline,
-    .full + .input,
-    .full + .textarea,
-    .full + .select,
-    .full + .badge,
-    .full + .rating {
-      margin-top: var(--space-4);
-    }
-
-    .paragraph + .paragraph,
-    .text + .text,
-    .button:not(.variant-link) + .button:not(.variant-link),
-    .input + .button {
-      margin-top: var(--space-3);
-    }
-
-    .label + .input,
-    .variant-link + .variant-link,
-    .label + .textarea,
-    .full + .label,
-    .label + .select {
-      margin-top: var(--space-2);
-    }
-
-    .rating + .text,
-    .text + .rating {
-      margin-top: var(--space-1);
-    }
-
-    .image + .full,
-    .icon + .full {
-      margin-top: var(--space-6);
-    }
-  }
-}