@kalink-ui/seedly 0.17.0 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @kalink-ui/seedly
 
+## 0.19.0
+
+### Minor Changes
+
+- e73d11a: [Center] Use a custom property to define gutters value
+
+## 0.18.0
+
+### Minor Changes
+
+- a81dae0: [Skeleton] Correctly reexport component
+
 ## 0.17.0
 
 ### Minor Changes

package/package.json

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

package/src/components/center/center.css.ts

@@ -1,8 +1,11 @@
+import { createVar } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import { mapContractVars, sys } from '../../styles';
 import { components } from '../../styles/layers.css';
 
+export const gutterSize = createVar();
+
 export const centerRecipe = recipe({
   base: {
     '@layer': {
@@ -11,6 +14,7 @@ export const centerRecipe = recipe({
         boxSizing: 'content-box',
         marginInline: 'auto',
         maxInlineSize: sys.layout.measure,
+        paddingInline: gutterSize,
       },
     },
   },
@@ -50,7 +54,9 @@ export const centerRecipe = recipe({
     gutters: mapContractVars(sys.spacing, (key) => ({
       '@layer': {
         [components]: {
-          paddingInline: sys.spacing[key],
+          vars: {
+            [gutterSize]: sys.spacing[key],
+          },
         },
       },
     })),

package/src/components/center/index.ts

@@ -1,2 +1,2 @@
 export { Center, type CenterProps } from './center';
-export { centerRecipe, type CenterVariants } from './center.css';
+export { centerRecipe, gutterSize, type CenterVariants } from './center.css';

package/src/components/index.ts

@@ -22,6 +22,7 @@ export * from './seed';
 export * from './select';
 export * from './sheet';
 export * from './sidebar';
+export * from './skeleton';
 export * from './stack';
 export * from './switcher';
 export * from './text';