@kalink-ui/seedly 0.25.0 → 0.26.0

package/src/components/heading/heading.css.ts

@@ -1,8 +1,48 @@
 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 headingAlignStyles = {
+  start: {
+    '@layer': {
+      [components]: {
+        alignItems: 'flex-start',
+        textAlign: 'start',
+      },
+    },
+  },
+  center: {
+    '@layer': {
+      [components]: {
+        alignItems: 'center',
+        textAlign: 'center',
+      },
+    },
+  },
+  end: {
+    '@layer': {
+      [components]: {
+        alignItems: 'flex-end',
+        textAlign: 'end',
+      },
+    },
+  },
+  justify: {
+    '@layer': {
+      [components]: {
+        alignItems: 'stretch',
+        textAlign: 'justify',
+      },
+    },
+  },
+} as const;
+
 export const headingRoot = recipe({
   base: {
     '@layer': {
@@ -14,67 +54,53 @@ export const headingRoot = recipe({
   },
 
   variants: {
-    align: {
-      start: {
-        '@layer': {
-          [components]: {
-            alignItems: 'flex-start',
-            textAlign: 'start',
-          },
-        },
-      },
-      center: {
-        '@layer': {
-          [components]: {
-            alignItems: 'center',
-            textAlign: 'center',
-          },
-        },
-      },
-      end: {
-        '@layer': {
-          [components]: {
-            alignItems: 'flex-end',
-            textAlign: 'end',
-          },
-        },
-      },
-      justify: {
-        '@layer': {
-          [components]: {
-            alignItems: 'stretch',
-            textAlign: 'justify',
-          },
-        },
-      },
-    },
+    align: headingAlignStyles,
   },
 });
 
+export const pretitleSpacingStyles = mapContractVars(sys.spacing, (key) => ({
+  '@layer': {
+    [components]: {
+      marginBlockEnd: sys.spacing[key],
+    },
+  },
+}));
+
 export const pretitle = recipe({
   variants: {
-    spacing: mapContractVars(sys.spacing, (key) => ({
-      '@layer': {
-        [components]: {
-          marginBlockEnd: sys.spacing[key],
-        },
-      },
-    })),
+    spacing: pretitleSpacingStyles,
   },
 });
 
+export const subtitleSpacingStyles = mapContractVars(sys.spacing, (key) => ({
+  '@layer': {
+    [components]: {
+      marginBlockStart: sys.spacing[key],
+    },
+  },
+}));
+
 export const subtitle = recipe({
   variants: {
-    spacing: mapContractVars(sys.spacing, (key) => ({
-      '@layer': {
-        [components]: {
-          marginBlockStart: sys.spacing[key],
-        },
-      },
-    })),
+    spacing: subtitleSpacingStyles,
   },
 });
 
 export type HeadingRootVariants = NonNullable<
   RecipeVariants<typeof headingRoot>
 >;
+
+export const alignAt = createResponsiveVariants({
+  styles: headingAlignStyles,
+  media: defaultMedia,
+});
+
+export const pretitleSpacingAt = createResponsiveVariants({
+  styles: pretitleSpacingStyles,
+  media: defaultMedia,
+});
+
+export const subtitleSpacingAt = createResponsiveVariants({
+  styles: subtitleSpacingStyles,
+  media: defaultMedia,
+});

package/src/components/heading/heading.responsive.ts

@@ -0,0 +1,28 @@
+import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
+
+import {
+  alignAt,
+  headingRoot,
+  pretitle,
+  pretitleSpacingAt,
+  subtitle,
+  subtitleSpacingAt,
+} from './heading.css';
+
+export const headingRootResponsive = responsiveRecipe({
+  recipe: headingRoot,
+  at: { align: alignAt },
+  order: defaultOrder,
+});
+
+export const pretitleResponsive = responsiveRecipe({
+  recipe: pretitle,
+  at: { spacing: pretitleSpacingAt },
+  order: defaultOrder,
+});
+
+export const subtitleResponsive = responsiveRecipe({
+  recipe: subtitle,
+  at: { spacing: subtitleSpacingAt },
+  order: defaultOrder,
+});

package/src/components/heading/heading.tsx

@@ -6,22 +6,30 @@ import { Spacing, TypographySize, TypographyVariant } from '../../styles';
 import { ConditionalWrapper } from '../conditional-wrapper';
 import { Text, TextProps, TextVariants } from '../text';
 
-import { headingRoot, pretitle, subtitle } from './heading.css';
+import {
+  headingRootResponsive,
+  pretitleResponsive,
+  subtitleResponsive,
+} from './heading.responsive';
+
+import type { Responsive } from '../../styles/responsive';
 
 export type HeadingTypes = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
 export type HeadingProps<TUse extends ElementType = 'h2'> =
   PolymorphicComponentProps<TUse> &
-    TextVariants & {
+    Omit<TextVariants, 'align'> & {
       /**
        * The typography used to render the text.
        */
-      variant: Extract<TypographyVariant, 'display' | 'headline' | 'title'>;
+      variant?: Responsive<
+        Extract<TypographyVariant, 'display' | 'headline' | 'title'>
+      >;
 
       /**
        * The size of the typography used to render the text.
        */
-      size?: TypographySize;
+      size?: Responsive<TypographySize>;
 
       /**
        * If provided, the text will be rendered before the title.
@@ -42,6 +50,7 @@ export type HeadingProps<TUse extends ElementType = 'h2'> =
        * The class to pass to the root element.
        */
       rootClassName?: string;
+      align?: Responsive<NonNullable<TextVariants['align']>>;
     };
 
 const headingMapping: Record<
@@ -75,7 +84,7 @@ export function Heading<TUse extends HeadingTypes>(props: HeadingProps<TUse>) {
       ref={ref}
       use={'hgroup'}
       condition={!!pretitle || !!subtitle}
-      className={clsx(headingRoot({ align }), rootClassName)}
+      className={clsx(headingRootResponsive({ align }), rootClassName)}
     >
       {pretitle}
 
@@ -97,7 +106,7 @@ export function Heading<TUse extends HeadingTypes>(props: HeadingProps<TUse>) {
 
 export type HeadingPretitleProps = Omit<TextProps<'p'>, 'children'> & {
   children?: string | null;
-  spacing?: Spacing;
+  spacing?: Responsive<Spacing>;
 };
 
 Heading.Pretitle = function HeadingPretitle({
@@ -114,7 +123,7 @@ Heading.Pretitle = function HeadingPretitle({
         use="p"
         variant={variant}
         size={size}
-        className={clsx(pretitle({ spacing }), className)}
+        className={clsx(pretitleResponsive({ spacing }), className)}
         {...rest}
       >
         {children}
@@ -125,7 +134,7 @@ Heading.Pretitle = function HeadingPretitle({
 
 export type HeadingSubtitleProps = Omit<TextProps<'p'>, 'children'> & {
   children?: string | null;
-  spacing?: Spacing;
+  spacing?: Responsive<Spacing>;
 };
 
 Heading.Subtitle = function HeadingSubtitle({
@@ -142,7 +151,7 @@ Heading.Subtitle = function HeadingSubtitle({
         use="p"
         variant={variant}
         size={size}
-        className={clsx(subtitle({ spacing }), className)}
+        className={clsx(subtitleResponsive({ spacing }), className)}
         {...rest}
       >
         {children}

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

@@ -2,7 +2,12 @@ import { createVar, keyframes, style } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
-import { sys, transition } from '../../styles';
+import {
+  createResponsiveVariants,
+  defaultMedia,
+  sys,
+  transition,
+} from '../../styles';
 
 export const loader = recipe({
   variants: {
@@ -32,6 +37,25 @@ const loaderAnimation = keyframes({
   },
 });
 
+// Shared size variant styles for responsive overrides
+const loaderWrapperSizeStyles = {
+  sm: {
+    vars: {
+      [size]: sys.spacing[4],
+    },
+  },
+  md: {
+    vars: {
+      [size]: sys.spacing[5],
+    },
+  },
+  lg: {
+    vars: {
+      [size]: sys.spacing[6],
+    },
+  },
+} as const;
+
 export const loaderWrapper = recipe({
   base: {
     overflow: 'hidden',
@@ -53,23 +77,7 @@ export const loaderWrapper = recipe({
   },
 
   variants: {
-    size: {
-      sm: {
-        vars: {
-          [size]: sys.spacing[4],
-        },
-      },
-      md: {
-        vars: {
-          [size]: sys.spacing[5],
-        },
-      },
-      lg: {
-        vars: {
-          [size]: sys.spacing[6],
-        },
-      },
-    },
+    size: loaderWrapperSizeStyles,
   },
 });
 
@@ -107,3 +115,8 @@ export type LoaderVariants = NonNullable<RecipeVariants<typeof loader>>;
 export type MoonLoaderVariants = NonNullable<
   RecipeVariants<typeof loaderWrapper>
 >;
+
+export const sizeAt = createResponsiveVariants({
+  styles: loaderWrapperSizeStyles,
+  media: defaultMedia,
+});

package/src/components/loader/moon-loader.responsive.ts

@@ -0,0 +1,9 @@
+import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
+
+import { loaderWrapper, sizeAt } from './loader.css';
+
+export const moonLoaderResponsive = responsiveRecipe({
+  recipe: loaderWrapper,
+  at: { size: sizeAt },
+  order: defaultOrder,
+});

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

@@ -6,11 +6,13 @@ import { Box, BoxProps } from '../box';
 import {
   ellipse,
   moon,
-  loaderWrapper,
   loader,
   LoaderVariants,
   MoonLoaderVariants,
 } from './loader.css';
+import { moonLoaderResponsive } from './moon-loader.responsive';
+
+import type { Responsive } from '../../styles/responsive';
 
 export type LoaderProps<TUse extends ElementType> = BoxProps<TUse> & {
   forceMount?: boolean;
@@ -26,14 +28,21 @@ export function MoonLoader<TUse extends ElementType>({
   forceMount = false,
   className,
   ...props
-}: LoaderProps<TUse> & MoonLoaderVariants) {
+}: LoaderProps<TUse> &
+  Omit<MoonLoaderVariants, 'size'> & {
+    size?: Responsive<NonNullable<MoonLoaderVariants['size']>>;
+  }) {
   if (!active && !forceMount) {
     return null;
   }
 
   return (
     <Box
-      className={clsx(loaderWrapper({ size }), loader({ active }), className)}
+      className={clsx(
+        moonLoaderResponsive({ size }),
+        loader({ active }),
+        className,
+      )}
       {...props}
     >
       <span className={ellipse} />

package/src/components/menu/menu-separator.css.ts

@@ -2,11 +2,30 @@ import { createVar } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
-import { mapContractVars, sys } from '../../styles';
+import {
+  createResponsiveVariants,
+  defaultMedia,
+  mapContractVars,
+  sys,
+} from '../../styles';
 import { components } from '../../styles/layers.css';
 
 const spaceVar = createVar();
 
+// Shared spacing styles for responsive overrides
+export const menuSeparatorSpacingStyles = mapContractVars(
+  sys.spacing,
+  (key) => ({
+    '@layer': {
+      [components]: {
+        vars: {
+          [spaceVar]: sys.spacing[key],
+        },
+      },
+    },
+  }),
+);
+
 export const menuSeparator = recipe({
   base: {
     paddingBlock: spaceVar,
@@ -37,18 +56,15 @@ export const menuSeparator = recipe({
       },
     },
 
-    spacing: mapContractVars(sys.spacing, (key) => ({
-      '@layer': {
-        [components]: {
-          vars: {
-            [spaceVar]: sys.spacing[key],
-          },
-        },
-      },
-    })),
+    spacing: menuSeparatorSpacingStyles,
   },
 });
 
 export type MenuSeparatorVariants = NonNullable<
   RecipeVariants<typeof menuSeparator>
 >;
+
+export const spacingAt = createResponsiveVariants({
+  styles: menuSeparatorSpacingStyles,
+  media: defaultMedia,
+});

package/src/components/menu/menu-separator.responsive.ts

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

package/src/components/sidebar/sidebar.css.ts

@@ -1,12 +1,26 @@
 import { createVar, globalStyle } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { sys, mapContractVars } from '../../styles';
+import {
+  createResponsiveVariants,
+  defaultMedia,
+  sys,
+  mapContractVars,
+} from '../../styles';
 import { components } from '../../styles/layers.css';
 
 export const sideWidthVar = createVar();
 export const contentMinWidthVar = createVar();
 
+// Shared variant styles to support responsive overrides
+export const sidebarSpacingStyles = mapContractVars(sys.spacing, (key) => ({
+  '@layer': {
+    [components]: {
+      gap: sys.spacing[key],
+    },
+  },
+}));
+
 export const sidebarRecipe = recipe({
   base: {
     '@layer': {
@@ -25,13 +39,7 @@ export const sidebarRecipe = recipe({
     /**
      * The spacing between the sidebar and main content elements
      */
-    spacing: mapContractVars(sys.spacing, (key) => ({
-      '@layer': {
-        [components]: {
-          gap: sys.spacing[key],
-        },
-      },
-    })),
+    spacing: sidebarSpacingStyles,
 
     /**
      * Whether the sidebar should stretch to fill the available space
@@ -100,3 +108,8 @@ globalStyle(`${sidebarRecipe.classNames.variants.side.right} > :first-child`, {
 });
 
 export type SidebarVariants = NonNullable<RecipeVariants<typeof sidebarRecipe>>;
+
+export const spacingAt = createResponsiveVariants({
+  styles: sidebarSpacingStyles,
+  media: defaultMedia,
+});

package/src/components/sidebar/sidebar.responsive.ts

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

package/src/components/sidebar/sidebar.tsx

@@ -7,13 +7,15 @@ import { ElementType } from 'react';
 
 import {
   contentMinWidthVar,
-  sidebarRecipe,
   SidebarVariants,
   sideWidthVar,
 } from './sidebar.css';
+import { sidebarResponsive } from './sidebar.responsive';
+
+import type { Responsive } from '../../styles/responsive';
 
 type SidebarProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
-  Omit<SidebarVariants, 'sideWidth'> & {
+  Omit<SidebarVariants, 'sideWidth' | 'spacing'> & {
     /**
      * The size of the side element
      */
@@ -24,6 +26,7 @@ type SidebarProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
      * Should be a percentage.
      */
     contentMinWidth?: string;
+    spacing?: Responsive<NonNullable<SidebarVariants['spacing']>>;
   };
 
 /**
@@ -48,7 +51,7 @@ export function Sidebar<TUse extends ElementType>({
   return (
     <Comp
       className={clsx(
-        sidebarRecipe({ side, sideWidth: !!sideWidth, spacing, noStretch }),
+        sidebarResponsive({ side, sideWidth: !!sideWidth, spacing, noStretch }),
         className,
       )}
       style={assignInlineVars({

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

@@ -3,6 +3,10 @@ import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import { sys, mapContractVars } from '../../styles';
 import { components } from '../../styles/layers.css';
+import {
+  createResponsiveVariants,
+  defaultMedia,
+} from '../../styles/responsive';
 
 const spacing = createVar({
   syntax: '<length>',
@@ -10,6 +14,48 @@ const spacing = createVar({
   inherits: false,
 });
 
+// Shared variant style maps so we can reuse them for responsive overrides
+export const stackSpacingStyles = mapContractVars(sys.spacing, (key) => ({
+  '@layer': {
+    [components]: {
+      vars: {
+        [spacing]: sys.spacing[key],
+      },
+    },
+  },
+}));
+
+export const stackAlignStyles = {
+  start: {
+    '@layer': {
+      [components]: {
+        alignItems: 'flex-start',
+      },
+    },
+  },
+  center: {
+    '@layer': {
+      [components]: {
+        alignItems: 'center',
+      },
+    },
+  },
+  end: {
+    '@layer': {
+      [components]: {
+        alignItems: 'flex-end',
+      },
+    },
+  },
+  stretch: {
+    '@layer': {
+      [components]: {
+        alignItems: 'stretch',
+      },
+    },
+  },
+} as const;
+
 export const stackRecipe = recipe({
   base: {
     '@layer': {
@@ -26,47 +72,23 @@ export const stackRecipe = recipe({
     /**
      * The spacing between items
      */
-    spacing: mapContractVars(sys.spacing, (key) => ({
-      '@layer': {
-        [components]: {
-          vars: {
-            [spacing]: sys.spacing[key],
-          },
-        },
-      },
-    })),
+    spacing: stackSpacingStyles,
 
-    align: {
-      start: {
-        '@layer': {
-          [components]: {
-            alignItems: 'flex-start',
-          },
-        },
-      },
-      center: {
-        '@layer': {
-          [components]: {
-            alignItems: 'center',
-          },
-        },
-      },
-      end: {
-        '@layer': {
-          [components]: {
-            alignItems: 'flex-end',
-          },
-        },
-      },
-      stretch: {
-        '@layer': {
-          [components]: {
-            alignItems: 'stretch',
-          },
-        },
-      },
-    },
+    /**
+     * The alignment of items along the cross axis
+     */
+    align: stackAlignStyles,
   },
 });
 
 export type StackVariants = NonNullable<RecipeVariants<typeof stackRecipe>>;
+
+export const spacingAt = createResponsiveVariants({
+  styles: stackSpacingStyles,
+  media: defaultMedia,
+});
+
+export const alignAt = createResponsiveVariants({
+  styles: stackAlignStyles,
+  media: defaultMedia,
+});

package/src/components/stack/stack.responsive.ts

@@ -0,0 +1,9 @@
+import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
+
+import { alignAt, spacingAt, stackRecipe } from './stack.css';
+
+export const stackResponsive = responsiveRecipe({
+  recipe: stackRecipe,
+  at: { spacing: spacingAt, align: alignAt },
+  order: defaultOrder,
+});