@kalink-ui/seedly 0.25.0 → 0.26.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @kalink-ui/seedly
 
+## 0.26.0
+
+### Minor Changes
+
+- c0f588b: Enable responsive variants across layout components:
+  - Cluster: responsive `spacing`, `justify`, and `align`.
+  - Center: responsive `gutters`.
+  - Cover: responsive `spacing`.
+  - Grid: responsive `spacing`.
+  - Sidebar: responsive `spacing`.
+  - Switcher: responsive `spacing`.
+
+  These use `createResponsiveVariants` + `responsiveRecipe` to generate media-specific overrides.
+
+- e451989: Typography + layout: enable responsive `variant` and `size` for `Text` and `Heading`. Also extend responsive recipes across supporting components (Button size/variant, MenuSeparator spacing, MoonLoader size).
+- 29ce292: Stack: add responsive variants support and align with vanilla-extract recipes. Introduces responsive `spacing` and `align` props via `responsiveRecipe` utilities.
+
 ## 0.25.0
 
 ### Minor Changes
@@ -104,7 +121,6 @@
 ### Minor Changes
 
 - 84903c1: Add multiple components
-
   - ButtonIcon
   - TextField
   - Select

package/package.json

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

package/src/components/box/box.css.ts

@@ -1,8 +1,22 @@
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { mapContractVars, sys } from '@kalink-ui/seedly/styles';
+import {
+  createResponsiveVariants,
+  defaultMedia,
+  mapContractVars,
+  sys,
+} from '@kalink-ui/seedly/styles';
 import { components } from '@kalink-ui/seedly/styles/layers';
 
+// Shared variant styles to support responsive overrides
+export const boxSpacingStyles = mapContractVars(sys.spacing, (key) => ({
+  '@layer': {
+    [components]: {
+      padding: sys.spacing[key],
+    },
+  },
+}));
+
 export const boxRecipe = recipe({
   variants: {
     /**
@@ -35,13 +49,7 @@ export const boxRecipe = recipe({
     /**
      * The spacing between the box borders and its contents
      */
-    spacing: mapContractVars(sys.spacing, (key) => ({
-      '@layer': {
-        [components]: {
-          padding: sys.spacing[key],
-        },
-      },
-    })),
+    spacing: boxSpacingStyles,
 
     /**
      * The elevation of the box
@@ -68,3 +76,8 @@ export const boxRecipe = recipe({
 });
 
 export type BoxVariants = NonNullable<RecipeVariants<typeof boxRecipe>>;
+
+export const spacingAt = createResponsiveVariants({
+  styles: boxSpacingStyles,
+  media: defaultMedia,
+});

package/src/components/box/box.responsive.ts

@@ -0,0 +1,9 @@
+import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
+
+import { boxRecipe, spacingAt } from './box.css';
+
+export const boxResponsive = responsiveRecipe({
+  recipe: boxRecipe,
+  at: { spacing: spacingAt },
+  order: defaultOrder,
+});

package/src/components/box/box.tsx

@@ -2,10 +2,16 @@ import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { BoxVariants, boxRecipe } from './box.css';
+import { BoxVariants } from './box.css';
+import { boxResponsive } from './box.responsive';
+
+import type { Responsive } from '../../styles/responsive';
 
 export type BoxProps<TUse extends ElementType> =
-  PolymorphicComponentProps<TUse> & BoxVariants;
+  PolymorphicComponentProps<TUse> &
+    Omit<BoxVariants, 'spacing'> & {
+      spacing?: Responsive<NonNullable<BoxVariants['spacing']>>;
+    };
 
 /**
  * A evenly spaced container for grouping related elements. Can
@@ -26,7 +32,7 @@ export function Box<TUse extends ElementType = 'div'>({
   return (
     <Comp
       className={clsx(
-        boxRecipe({ variant, spacing, radius, elevation }),
+        boxResponsive({ variant, spacing, radius, elevation }),
         className,
       )}
       {...rest}

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

@@ -7,7 +7,12 @@ import {
 import { calc } from '@vanilla-extract/css-utils';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { sys, typography } from '../../styles';
+import {
+  createResponsiveVariants,
+  defaultMedia,
+  sys,
+  typography,
+} from '../../styles';
 import { components } from '../../styles/layers.css';
 import { transition } from '../../styles/transition';
 
@@ -33,6 +38,184 @@ export const buttonVars = createThemeContract({
   },
 });
 
+// Extracted variant style maps for responsive overrides
+export const buttonVariantStyles = {
+  /**
+   * The main variation of the button
+   */
+  bare: {},
+  plain: {
+    '@layer': {
+      [components]: {
+        vars: {
+          ...assignVars(buttonVars.color, {
+            text: sys.color.background,
+            background: sys.color.foreground,
+          }),
+          ...assignVars(buttonVars.border, {
+            width: '1px',
+            style: 'solid',
+            color: 'transparent',
+          }),
+        },
+        ':hover': {
+          vars: {
+            [buttonVars.color.background]:
+              `color-mix(in srgb, ${sys.color.foreground}, ${sys.color.background} calc(100% * ${sys.state.hovered.opacity}))`,
+            [buttonVars.shadow.level]: sys.elevation.minimal,
+          },
+        },
+        ':disabled': {
+          vars: {
+            ...assignVars(buttonVars.color, {
+              text: `color-mix(in srgb, ${sys.color.background} calc(100% * ${sys.state.muted.light}), transparent)`,
+              background: `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
+            }),
+            [buttonVars.shadow.level]: sys.elevation.none,
+            [buttonVars.border.color]: `transparent`,
+          },
+        },
+      },
+    },
+  },
+  outline: {
+    '@layer': {
+      [components]: {
+        vars: {
+          ...assignVars(buttonVars.color, {
+            text: sys.color.foreground,
+            background: 'unset',
+          }),
+          ...assignVars(buttonVars.border, {
+            width: '1px',
+            style: 'solid',
+            color: sys.color.foreground,
+          }),
+        },
+        selectors: {
+          '&:hover': {
+            vars: {
+              [buttonVars.color.background]:
+                `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.hovered.opacity}), transparent)`,
+            },
+          },
+          '&:disabled': {
+            vars: {
+              [buttonVars.color.background]: 'unset',
+              [buttonVars.color.text]:
+                `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
+              [buttonVars.border.color]:
+                `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
+            },
+          },
+        },
+      },
+    },
+  },
+  ghost: {
+    '@layer': {
+      [components]: {
+        vars: {
+          ...assignVars(buttonVars.color, {
+            text: sys.color.foreground,
+            background: 'unset',
+          }),
+          ...assignVars(buttonVars.border, {
+            width: '1px',
+            style: 'solid',
+            color: 'transparent',
+          }),
+        },
+        selectors: {
+          '&:hover': {
+            vars: {
+              [buttonVars.color.background]:
+                `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.hovered.opacity}), transparent)`,
+            },
+          },
+          '&:disabled': {
+            vars: {
+              [buttonVars.color.background]: 'unset',
+              [buttonVars.color.text]:
+                `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
+            },
+          },
+        },
+      },
+    },
+  },
+  link: {
+    '@layer': {
+      [components]: {
+        display: 'inline-flex',
+
+        textDecoration: 'none',
+
+        vars: {
+          ...assignVars(buttonVars.color, {
+            text: sys.color.foreground,
+            background: 'unset',
+          }),
+          ...assignVars(buttonVars.spacing, {
+            block: '0',
+            inline: '0',
+            inner: '0',
+          }),
+        },
+        selectors: {
+          '&:hover': {
+            textDecoration: 'underline',
+          },
+
+          '&:disabled': {
+            textDecoration: 'none',
+            vars: {
+              [buttonVars.color.text]:
+                `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
+            },
+          },
+        },
+      },
+    },
+  },
+} as const;
+
+export const buttonSizeStyles = {
+  sm: {
+    '@layer': {
+      [components]: {
+        vars: assignVars(buttonVars.spacing, {
+          block: sys.spacing[2],
+          inline: sys.spacing[3],
+          inner: sys.spacing[3],
+        }),
+      },
+    },
+  },
+  md: {
+    '@layer': {
+      [components]: {
+        vars: assignVars(buttonVars.spacing, {
+          block: sys.spacing[2],
+          inline: sys.spacing[4],
+          inner: sys.spacing[4],
+        }),
+      },
+    },
+  },
+  lg: {
+    '@layer': {
+      [components]: {
+        vars: assignVars(buttonVars.spacing, {
+          block: sys.spacing[3],
+          inline: sys.spacing[6],
+          inner: sys.spacing[6],
+        }),
+      },
+    },
+  },
+} as const;
+
 export const buttonRecipe = recipe({
   base: {
     '@layer': {
@@ -70,182 +253,8 @@ export const buttonRecipe = recipe({
   },
 
   variants: {
-    /**
-     * The main variation of the button
-     */
-    variant: {
-      bare: {},
-      plain: {
-        '@layer': {
-          [components]: {
-            vars: {
-              ...assignVars(buttonVars.color, {
-                text: sys.color.background,
-                background: sys.color.foreground,
-              }),
-              ...assignVars(buttonVars.border, {
-                width: '1px',
-                style: 'solid',
-                color: 'transparent',
-              }),
-            },
-            ':hover': {
-              vars: {
-                [buttonVars.color.background]:
-                  `color-mix(in srgb, ${sys.color.foreground}, ${sys.color.background} calc(100% * ${sys.state.hovered.opacity}))`,
-                [buttonVars.shadow.level]: sys.elevation.minimal,
-              },
-            },
-            ':disabled': {
-              vars: {
-                ...assignVars(buttonVars.color, {
-                  text: `color-mix(in srgb, ${sys.color.background} calc(100% * ${sys.state.muted.light}), transparent)`,
-                  background: `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
-                }),
-                [buttonVars.shadow.level]: sys.elevation.none,
-                [buttonVars.border.color]: `transparent`,
-              },
-            },
-          },
-        },
-      },
-      outline: {
-        '@layer': {
-          [components]: {
-            vars: {
-              ...assignVars(buttonVars.color, {
-                text: sys.color.foreground,
-                background: 'unset',
-              }),
-              ...assignVars(buttonVars.border, {
-                width: '1px',
-                style: 'solid',
-                color: sys.color.foreground,
-              }),
-            },
-            selectors: {
-              '&:hover': {
-                vars: {
-                  [buttonVars.color.background]:
-                    `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.hovered.opacity}), transparent)`,
-                },
-              },
-              '&:disabled': {
-                vars: {
-                  [buttonVars.color.background]: 'unset',
-                  [buttonVars.color.text]:
-                    `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
-                  [buttonVars.border.color]:
-                    `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
-                },
-              },
-            },
-          },
-        },
-      },
-      ghost: {
-        '@layer': {
-          [components]: {
-            vars: {
-              ...assignVars(buttonVars.color, {
-                text: sys.color.foreground,
-                background: 'unset',
-              }),
-              ...assignVars(buttonVars.border, {
-                width: '1px',
-                style: 'solid',
-                color: 'transparent',
-              }),
-            },
-            selectors: {
-              '&:hover': {
-                vars: {
-                  [buttonVars.color.background]:
-                    `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.hovered.opacity}), transparent)`,
-                },
-              },
-              '&:disabled': {
-                vars: {
-                  [buttonVars.color.background]: 'unset',
-                  [buttonVars.color.text]:
-                    `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
-                },
-              },
-            },
-          },
-        },
-      },
-      link: {
-        '@layer': {
-          [components]: {
-            display: 'inline-flex',
-
-            textDecoration: 'none',
-
-            vars: {
-              ...assignVars(buttonVars.color, {
-                text: sys.color.foreground,
-                background: 'unset',
-              }),
-              ...assignVars(buttonVars.spacing, {
-                block: '0',
-                inline: '0',
-                inner: '0',
-              }),
-            },
-            selectors: {
-              '&:hover': {
-                textDecoration: 'underline',
-              },
-
-              '&:disabled': {
-                textDecoration: 'none',
-                vars: {
-                  [buttonVars.color.text]:
-                    `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-
-    size: {
-      sm: {
-        '@layer': {
-          [components]: {
-            vars: assignVars(buttonVars.spacing, {
-              block: sys.spacing[2],
-              inline: sys.spacing[3],
-              inner: sys.spacing[3],
-            }),
-          },
-        },
-      },
-      md: {
-        '@layer': {
-          [components]: {
-            vars: assignVars(buttonVars.spacing, {
-              block: sys.spacing[2],
-              inline: sys.spacing[4],
-              inner: sys.spacing[4],
-            }),
-          },
-        },
-      },
-      lg: {
-        '@layer': {
-          [components]: {
-            vars: assignVars(buttonVars.spacing, {
-              block: sys.spacing[3],
-              inline: sys.spacing[6],
-              inner: sys.spacing[6],
-            }),
-          },
-        },
-      },
-    },
+    variant: buttonVariantStyles,
+    size: buttonSizeStyles,
   },
 
   compoundVariants: [
@@ -417,3 +426,16 @@ globalStyle(`${buttonRecipe.classNames.variants.size.lg} svg`, {
 });
 
 export type ButtonVariants = NonNullable<RecipeVariants<typeof buttonRecipe>>;
+
+export const sizeAt = createResponsiveVariants({
+  styles: buttonSizeStyles,
+  media: defaultMedia,
+});
+
+export const variantAt = createResponsiveVariants({
+  styles: buttonVariantStyles,
+  media: defaultMedia,
+});
+
+// Note: buttonLabel uses typography class composition. For responsive
+// behaviors on text, prefer driving size via the root button's size.

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

@@ -0,0 +1,11 @@
+import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
+
+import { buttonRecipe, sizeAt, variantAt } from './button.css';
+
+export const buttonResponsive = responsiveRecipe({
+  recipe: buttonRecipe,
+  at: { size: sizeAt, variant: variantAt },
+  order: defaultOrder,
+});
+
+// Button label uses typography classes; drive changes via root size.

package/src/components/button/button.tsx

@@ -2,22 +2,39 @@ import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
 import { ComponentType, ElementType, ReactNode } from 'react';
 
-import {
-  buttonLabel,
-  buttonRecipe,
-  buttonSlot,
-  ButtonVariants,
-} from './button.css';
+import { buttonLabel, buttonSlot, ButtonVariants } from './button.css';
+import { buttonResponsive } from './button.responsive';
+
+import type { Responsive } from '../../styles/responsive';
+
+function getBase<T extends string | number>(value: Responsive<T> | undefined) {
+  if (value == null) {
+    return undefined as T | undefined;
+  }
+
+  if (Array.isArray(value)) {
+    return (value[0] ?? undefined) as T | undefined;
+  }
+
+  if (typeof value === 'object') {
+    const obj = value as Partial<Record<string, T>> & { xs?: T };
+    return obj.xs as T | undefined;
+  }
+
+  return value as T;
+}
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export type ButtonTypes = 'button' | 'a' | ComponentType<any>;
 
 export type ButtonProps<TUse extends ButtonTypes> =
   PolymorphicComponentProps<TUse> &
-    ButtonVariants & {
+    Omit<ButtonVariants, 'size' | 'variant'> & {
       startSlot?: ReactNode;
       endSlot?: ReactNode;
       children?: string;
+      size?: Responsive<NonNullable<ButtonVariants['size']>>;
+      variant?: Responsive<NonNullable<ButtonVariants['variant']>>;
     };
 
 export function Button<TUse extends ButtonTypes>(props: ButtonProps<TUse>) {
@@ -31,7 +48,7 @@ export function Button<TUse extends ButtonTypes>(props: ButtonProps<TUse>) {
         </ButtonSlot>
       )}
       {children && (
-        <ButtonLabel use="span" size={size}>
+        <ButtonLabel use="span" size={getBase(size) ?? 'md'}>
           {children}
         </ButtonLabel>
       )}
@@ -45,7 +62,11 @@ export function Button<TUse extends ButtonTypes>(props: ButtonProps<TUse>) {
 }
 
 export type ButtonRootProps<TUse extends ButtonTypes> =
-  PolymorphicComponentProps<TUse> & ButtonVariants;
+  PolymorphicComponentProps<TUse> &
+    Omit<ButtonVariants, 'size' | 'variant'> & {
+      size?: Responsive<NonNullable<ButtonVariants['size']>>;
+      variant?: Responsive<NonNullable<ButtonVariants['variant']>>;
+    };
 
 export function ButtonRoot<TUse extends ButtonTypes>(
   props: ButtonRootProps<TUse>,
@@ -54,7 +75,7 @@ export function ButtonRoot<TUse extends ButtonTypes>(
 
   return (
     <Comp
-      className={clsx(buttonRecipe({ variant, size }), className)}
+      className={clsx(buttonResponsive({ variant, size }), className)}
       /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
       {...(rest as any)}
     />

package/src/components/card/card.tsx

@@ -10,11 +10,13 @@ import { ClusterProps } from '../cluster';
 
 import { card, cardBody, cardFooter, cardHeader } from './card.css';
 
+import type { Responsive } from '../../styles/responsive';
+
 export type CardRootElement = 'article' | 'div';
 
 export type CardProps<TUse extends CardRootElement = 'article'> =
   BoxProps<TUse> & {
-    verticalSpacing?: Spacing;
+    verticalSpacing?: Responsive<Spacing>;
   };
 
 export function Card<TUse extends CardRootElement = 'article'>(

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

@@ -1,11 +1,27 @@
 import { createVar } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { mapContractVars, sys } from '../../styles';
+import {
+  createResponsiveVariants,
+  defaultMedia,
+  mapContractVars,
+  sys,
+} from '../../styles';
 import { components } from '../../styles/layers.css';
 
 export const gutterSize = createVar();
 
+// Shared variant style maps to support responsive overrides
+export const centerGuttersStyles = mapContractVars(sys.spacing, (key) => ({
+  '@layer': {
+    [components]: {
+      vars: {
+        [gutterSize]: sys.spacing[key],
+      },
+    },
+  },
+}));
+
 export const centerRecipe = recipe({
   base: {
     '@layer': {
@@ -51,16 +67,13 @@ export const centerRecipe = recipe({
     /**
      * The minimum space on either side of the content
      */
-    gutters: mapContractVars(sys.spacing, (key) => ({
-      '@layer': {
-        [components]: {
-          vars: {
-            [gutterSize]: sys.spacing[key],
-          },
-        },
-      },
-    })),
+    gutters: centerGuttersStyles,
   },
 });
 
 export type CenterVariants = NonNullable<RecipeVariants<typeof centerRecipe>>;
+
+export const guttersAt = createResponsiveVariants({
+  styles: centerGuttersStyles,
+  media: defaultMedia,
+});