@kalink-ui/seedly 0.27.0 → 0.28.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @kalink-ui/seedly
 
+## 0.28.0
+
+### Minor Changes
+
+- d38d956: feat(seedly/button-icon): add responsive variants for `size` and `variant`
+  - Introduce `buttonIconResponsive` with `sizeAt` and `variantAt`.
+  - Accept responsive values (object/array) for `size` and `variant` props.
+  - Keeps icon-only spacing consistent across breakpoints.
+
 ## 0.27.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "description": "A set of components for building UIs with React and TypeScript",
   "sideEffects": false,
   "license": "MIT",
@@ -43,8 +43,8 @@
     "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.3",
-    "@kalink-ui/typescript-config": "0.4.0",
-    "@kalink-ui/eslint-config": "0.10.0"
+    "@kalink-ui/eslint-config": "0.10.0",
+    "@kalink-ui/typescript-config": "0.4.0"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "^1.17.1",

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

@@ -1,9 +1,13 @@
 import { assignVars } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
-import { sys } from '../../styles';
+import { createResponsiveVariants, defaultMedia, sys } from '../../styles';
 import { components } from '../../styles/layers.css';
-import { buttonRecipe, buttonVars } from '../button/button.css';
+import {
+  buttonRecipe,
+  buttonVars,
+  buttonVariantStyles,
+} from '../button/button.css';
 
 export const buttonIcon = recipe({
   base: [buttonRecipe.classNames.base],
@@ -63,3 +67,50 @@ export const buttonIcon = recipe({
 });
 
 export type ButtonIconVariants = NonNullable<RecipeVariants<typeof buttonIcon>>;
+
+// Responsive variants
+const buttonIconSizeStyles = {
+  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],
+        }),
+      },
+    },
+  },
+  lg: {
+    '@layer': {
+      [components]: {
+        vars: assignVars(buttonVars.spacing, {
+          block: sys.spacing[3],
+          inline: sys.spacing[3],
+          inner: sys.spacing[3],
+        }),
+      },
+    },
+  },
+} as const;
+
+export const sizeAt = createResponsiveVariants({
+  styles: buttonIconSizeStyles,
+  media: defaultMedia,
+});
+
+export const variantAt = createResponsiveVariants({
+  styles: buttonVariantStyles,
+  media: defaultMedia,
+});

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

@@ -0,0 +1,9 @@
+import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
+
+import { buttonIcon, sizeAt, variantAt } from './button-icon.css';
+
+export const buttonIconResponsive = responsiveRecipe({
+  recipe: buttonIcon,
+  at: { size: sizeAt, variant: variantAt },
+  order: defaultOrder,
+});

package/src/components/button-icon/button-icon.tsx

@@ -3,10 +3,19 @@ import { clsx } from 'clsx';
 
 import { ButtonTypes } from '../button/button';
 
-import { buttonIcon, ButtonIconVariants } from './button-icon.css';
+import { ButtonIconVariants } from './button-icon.css';
+import { buttonIconResponsive } from './button-icon.responsive';
+
+import type { Responsive } from '../../styles/responsive';
+
+type ButtonIconVariantResponsive = {
+  [K in keyof ButtonIconVariants]?: Responsive<
+    NonNullable<ButtonIconVariants[K]>
+  >;
+};
 
 export type ButtonIconProps<TUse extends ButtonTypes> =
-  PolymorphicComponentProps<TUse> & ButtonIconVariants;
+  PolymorphicComponentProps<TUse> & ButtonIconVariantResponsive;
 
 export function ButtonIcon<TUse extends ButtonTypes>(
   props: ButtonIconProps<TUse>,
@@ -15,9 +24,8 @@ export function ButtonIcon<TUse extends ButtonTypes>(
 
   return (
     <Comp
-      className={clsx(buttonIcon({ variant, size }), className)}
-      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-      {...(rest as any)}
+      className={clsx(buttonIconResponsive({ variant, size }), className)}
+      {...(rest as Record<string, unknown>)}
     />
   );
 }