@kalink-ui/seedly 0.12.0 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @kalink-ui/seedly
 
+## 0.14.0
+
+### Minor Changes
+
+- 6d5d569: [Stack] Use flex-box instead of margin for spacing between elements
+
+## 0.13.0
+
+### Minor Changes
+
+- 89fae2d: [loader] Correctly center element with text
+
 ## 0.12.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "A set of components for building UIs with React and TypeScript",
   "sideEffects": false,
   "license": "MIT",

package/src/components/loader-overlay/loader-overlay.tsx

@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
 
 import { Center } from '../center';
 import { MoonLoader } from '../loader';
-import { Stack } from '../stack';
+import { Stack, StackProps } from '../stack';
 import { Text } from '../text';
 
 import { loaderOverlay, LoaderOverlayVariants } from './loader-overlay.css';
@@ -10,16 +10,18 @@ import { loaderOverlay, LoaderOverlayVariants } from './loader-overlay.css';
 interface LoaderOverlayProps extends LoaderOverlayVariants {
   text?: string;
   className?: string;
+  spacing?: StackProps<'div'>['spacing'];
 }
 
 export function LoaderOverlay({
   className,
   text,
   position,
+  spacing = 2,
 }: LoaderOverlayProps) {
   return (
     <div className={clsx(loaderOverlay({ position }), className)}>
-      <Stack use={Center}>
+      <Stack use={Center} spacing={spacing} intrinsic andText>
         <MoonLoader active forceMount />
         {text && <Text>{text}</Text>}
       </Stack>

package/src/components/stack/stack.css.ts

@@ -1,4 +1,4 @@
-import { createVar, globalStyle } from '@vanilla-extract/css';
+import { createVar } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import { sys, mapContractVars } from '../../styles';
@@ -16,19 +16,13 @@ export const stackRecipe = recipe({
       [components]: {
         display: 'flex',
         flexDirection: 'column',
-        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        gap: spacing,
       },
     },
   },
 
   variants: {
-    /**
-     * Whether the stack spacing should be applied recursively
-     */
-    recursive: {
-      true: {},
-    },
-
     /**
      * The spacing between items
      */
@@ -44,15 +38,4 @@ export const stackRecipe = recipe({
   },
 });
 
-globalStyle(
-  `${stackRecipe.classNames.base} > * + *, ${stackRecipe.classNames.variants.recursive.true} * + *`,
-  {
-    '@layer': {
-      [components]: {
-        marginBlockStart: spacing,
-      },
-    },
-  },
-);
-
 export type StackVariants = NonNullable<RecipeVariants<typeof stackRecipe>>;

package/src/components/stack/stack.tsx

@@ -18,7 +18,6 @@ export type StackProps<TUse extends ElementType> =
  * https://every-layout.dev/layouts/stack
  */
 export function Stack<TUse extends ElementType = 'div'>({
-  recursive,
   spacing,
   className,
   ...props
@@ -26,9 +25,6 @@ export function Stack<TUse extends ElementType = 'div'>({
   const { use: Comp = 'div', ...rest } = props;
 
   return (
-    <Comp
-      className={clsx(stackRecipe({ recursive, spacing }), className)}
-      {...rest}
-    />
+    <Comp className={clsx(stackRecipe({ spacing }), className)} {...rest} />
   );
 }

package/src/styles/define-responsive-properties.ts

@@ -61,11 +61,13 @@ export const defineResponsiveProperties = ({
       flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'],
 
       justifyContent: [
+        'stretch',
         'flex-start',
         'flex-end',
         'center',
         'space-between',
         'space-around',
+        'space-evenly',
       ],
       alignItems: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
       alignSelf: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],