@kalink-ui/seedly 0.11.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @kalink-ui/seedly
 
+## 0.13.0
+
+### Minor Changes
+
+- 89fae2d: [loader] Correctly center element with text
+
+## 0.12.0
+
+### Minor Changes
+
+- 0f1ff4b: [loader] Correctly use layers to define component styles
+
 ## 0.11.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "A set of components for building UIs with React and TypeScript",
   "sideEffects": false,
   "license": "MIT",
@@ -47,9 +47,9 @@
     "vite": "^6.2.1",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.0.8",
+    "@kalink-ui/dibbly": "0.4.0",
     "@kalink-ui/eslint-config": "0.9.0",
-    "@kalink-ui/typescript-config": "0.4.0",
-    "@kalink-ui/dibbly": "0.4.0"
+    "@kalink-ui/typescript-config": "0.4.0"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "^1.17.1",

package/src/components/button/button.css.ts

@@ -2,8 +2,10 @@ import {
   assignVars,
   createThemeContract,
   fallbackVar,
+  globalStyle,
   style,
 } from '@vanilla-extract/css';
+import { calc } from '@vanilla-extract/css-utils';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import { sys, typography } from '../../styles';
@@ -365,4 +367,49 @@ export const buttonSlotStart = style([buttonSlot]);
 
 export const buttonSlotEnd = style([buttonSlot]);
 
+globalStyle(`${buttonRecipe.classNames.variants.size.sm} svg`, {
+  '@layer': {
+    [components]: {
+      width: calc.multiply(
+        sys.typography.label.small.lineHeight,
+        sys.typography.label.small.size,
+      ),
+      height: calc.multiply(
+        sys.typography.label.small.lineHeight,
+        sys.typography.label.small.size,
+      ),
+    },
+  },
+});
+
+globalStyle(`${buttonRecipe.classNames.variants.size.md} svg`, {
+  '@layer': {
+    [components]: {
+      width: calc.multiply(
+        sys.typography.label.medium.lineHeight,
+        sys.typography.label.medium.size,
+      ),
+      height: calc.multiply(
+        sys.typography.label.medium.lineHeight,
+        sys.typography.label.medium.size,
+      ),
+    },
+  },
+});
+
+globalStyle(`${buttonRecipe.classNames.variants.size.lg} svg`, {
+  '@layer': {
+    [components]: {
+      width: calc.multiply(
+        sys.typography.label.large.lineHeight,
+        sys.typography.label.large.size,
+      ),
+      height: calc.multiply(
+        sys.typography.label.large.lineHeight,
+        sys.typography.label.large.size,
+      ),
+    },
+  },
+});
+
 export type ButtonVariants = NonNullable<RecipeVariants<typeof buttonRecipe>>;

package/src/components/button-icon/button-icon.css.ts

@@ -1,5 +1,4 @@
-import { assignVars, globalStyle } from '@vanilla-extract/css';
-import { calc } from '@vanilla-extract/css-utils';
+import { assignVars } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
 import { sys } from '../../styles';
@@ -12,39 +11,48 @@ export const buttonIcon = recipe({
   variants: {
     variant: buttonRecipe.classNames.variants.variant,
     size: {
-      sm: {
-        '@layer': {
-          [components]: {
-            vars: assignVars(buttonVars.spacing, {
-              block: sys.spacing[2],
-              inline: sys.spacing[2],
-              inner: sys.spacing[2],
-            }),
+      sm: [
+        buttonRecipe.classNames.variants.size.sm,
+        {
+          '@layer': {
+            [components]: {
+              vars: assignVars(buttonVars.spacing, {
+                block: sys.spacing[2],
+                inline: sys.spacing[2],
+                inner: sys.spacing[2],
+              }),
+            },
           },
         },
-      },
-      md: {
-        '@layer': {
-          [components]: {
-            vars: assignVars(buttonVars.spacing, {
-              block: sys.spacing[2],
-              inline: sys.spacing[2],
-              inner: sys.spacing[2],
-            }),
+      ],
+      md: [
+        buttonRecipe.classNames.variants.size.md,
+        {
+          '@layer': {
+            [components]: {
+              vars: assignVars(buttonVars.spacing, {
+                block: sys.spacing[2],
+                inline: sys.spacing[2],
+                inner: sys.spacing[2],
+              }),
+            },
           },
         },
-      },
-      lg: {
-        '@layer': {
-          [components]: {
-            vars: assignVars(buttonVars.spacing, {
-              block: sys.spacing[3],
-              inline: sys.spacing[3],
-              inner: sys.spacing[3],
-            }),
+      ],
+      lg: [
+        buttonRecipe.classNames.variants.size.lg,
+        {
+          '@layer': {
+            [components]: {
+              vars: assignVars(buttonVars.spacing, {
+                block: sys.spacing[3],
+                inline: sys.spacing[3],
+                inner: sys.spacing[3],
+              }),
+            },
           },
         },
-      },
+      ],
     },
   },
 
@@ -54,37 +62,4 @@ export const buttonIcon = recipe({
   },
 });
 
-globalStyle(`${buttonIcon.classNames.variants.size.sm} > svg`, {
-  width: calc.multiply(
-    sys.typography.label.small.lineHeight,
-    sys.typography.label.small.size,
-  ),
-  height: calc.multiply(
-    sys.typography.label.small.lineHeight,
-    sys.typography.label.small.size,
-  ),
-});
-
-globalStyle(`${buttonIcon.classNames.variants.size.md} > svg`, {
-  width: calc.multiply(
-    sys.typography.label.medium.lineHeight,
-    sys.typography.label.medium.size,
-  ),
-  height: calc.multiply(
-    sys.typography.label.medium.lineHeight,
-    sys.typography.label.medium.size,
-  ),
-});
-
-globalStyle(`${buttonIcon.classNames.variants.size.lg} > svg`, {
-  width: calc.multiply(
-    sys.typography.label.large.lineHeight,
-    sys.typography.label.large.size,
-  ),
-  height: calc.multiply(
-    sys.typography.label.large.lineHeight,
-    sys.typography.label.large.size,
-  ),
-});
-
 export type ButtonIconVariants = NonNullable<RecipeVariants<typeof buttonIcon>>;

package/src/components/input/input.css.ts

@@ -211,6 +211,7 @@ export const input = style({
 
       flexGrow: 1,
       flexBasis: 1,
+      width: '100%',
 
       paddingTop: 0,
       paddingBottom: 0,

package/src/components/loader-overlay/loader-overlay.css.ts

@@ -1,30 +1,43 @@
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
 import { sys } from '../../styles';
+import { components } from '../../styles/layers.css';
 
 export const loaderOverlay = recipe({
   base: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
 
-    height: '100%',
-    width: '100%',
+        height: '100%',
+        width: '100%',
 
-    zIndex: 1000,
+        zIndex: 1000,
 
-    backgroundColor: `color-mix(in srgb, ${sys.color.foreground} 10%, transparent)`,
+        backgroundColor: `color-mix(in srgb, ${sys.color.foreground} 10%, transparent)`,
+      },
+    },
   },
 
   variants: {
     position: {
       absolute: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
+        '@layer': {
+          [components]: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+          },
+        },
       },
       relative: {
-        position: 'relative',
+        '@layer': {
+          [components]: {
+            position: 'relative',
+          },
+        },
       },
     },
   },

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>