auto spacing simplified, cleaned up and improved

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 />

package/src/components/segment/Box.astro

@@ -5,6 +5,7 @@ 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'
@@ -19,6 +20,7 @@ type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
 
 const {
   as = 'div',
+  space = 'auto',
   structure = 'column',
   align = 'start',
   ...rest
@@ -30,6 +32,7 @@ const {
   {as}
   {structure}
   {align}
+  {space}
   {...rest}
 >
   <slot />

package/src/components/segment/Card.astro

@@ -12,6 +12,7 @@ type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
   contrast?: boolean
   compact?: boolean
   ratio?: 'landscape' | 'portrait' | 'square' | number
+  space?: 'auto' | 'none'
   variant?:
     | 'base'
     | 'ghost'
@@ -26,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,
@@ -42,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 />

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 />
@@ -47,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,8 +29,6 @@ const { align = 'center', ...rest } = Astro.props
   @include component('row') {
     display: flex;
 
-    @include space-x;
-
     &.align-start {
       align-items: flex-start;
       text-align: left;
@@ -41,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) {

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);
+// }