@kalink-ui/seedly 0.24.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,59 +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',
-          },
-        },
-      },
-    },
+    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

@@ -1,47 +1,57 @@
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
 import { ElementType, ReactElement, ReactNode } from 'react';
 
 import { Spacing, TypographySize, TypographyVariant } from '../../styles';
 import { ConditionalWrapper } from '../conditional-wrapper';
-import { Text, TextProps } from '../text';
+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'> = Omit<
-  TextProps<TUse>,
-  'variant' | 'children' | 'align'
-> & {
-  align?: Extract<
-    Pick<TextProps<TUse>, 'align'>['align'],
-    'start' | 'center' | 'end'
-  >;
-  /**
-   * The typography used to render the text.
-   */
-  variant: Extract<TypographyVariant, 'display' | 'headline' | 'title'>;
-
-  /**
-   * If provided, the text will be rendered before the title.
-   */
-  pretitle?: ReactElement<TextProps<'p'>>;
-
-  /**
-   * If provided, the text will be rendered after the title.
-   */
-  subtitle?: ReactElement<TextProps<'p'>>;
-
-  /**
-   * The text to render.
-   */
-  children: ReactNode;
-
-  /**
-   * The class to pass to the root element.
-   */
-  rootClassName?: string;
-};
+export type HeadingProps<TUse extends ElementType = 'h2'> =
+  PolymorphicComponentProps<TUse> &
+    Omit<TextVariants, 'align'> & {
+      /**
+       * The typography used to render the text.
+       */
+      variant?: Responsive<
+        Extract<TypographyVariant, 'display' | 'headline' | 'title'>
+      >;
+
+      /**
+       * The size of the typography used to render the text.
+       */
+      size?: Responsive<TypographySize>;
+
+      /**
+       * If provided, the text will be rendered before the title.
+       */
+      pretitle?: ReactElement<TextProps<'p'>>;
+
+      /**
+       * If provided, the text will be rendered after the title.
+       */
+      subtitle?: ReactElement<TextProps<'p'>>;
+
+      /**
+       * The text to render.
+       */
+      children: ReactNode;
+
+      /**
+       * The class to pass to the root element.
+       */
+      rootClassName?: string;
+      align?: Responsive<NonNullable<TextVariants['align']>>;
+    };
 
 const headingMapping: Record<
   HeadingTypes,
@@ -55,30 +65,32 @@ const headingMapping: Record<
   h6: { variant: 'headline', size: 'small' },
 };
 
-export function Heading<TUse extends HeadingTypes>({
-  children,
-  use = 'h2',
-  size,
-  variant,
-  align,
-  pretitle,
-  subtitle,
-  rootClassName,
-  ref,
-  ...rest
-}: HeadingProps<TUse>) {
+export function Heading<TUse extends HeadingTypes>(props: HeadingProps<TUse>) {
+  const {
+    children,
+    use = 'h2',
+    size,
+    variant,
+    align,
+    pretitle,
+    subtitle,
+    rootClassName,
+    ref,
+    ...rest
+  } = props;
+
   return (
     <ConditionalWrapper
       ref={ref}
       use={'hgroup'}
       condition={!!pretitle || !!subtitle}
-      className={clsx(headingRoot({ align }), rootClassName)}
+      className={clsx(headingRootResponsive({ align }), rootClassName)}
     >
       {pretitle}
 
       <Text
         {...(!pretitle && !subtitle && { ref })}
-        use={use}
+        use={use as HeadingProps<TUse>['use']}
         align={align}
         variant={variant ?? headingMapping[use].variant}
         size={size ?? headingMapping[use].size}
@@ -94,7 +106,7 @@ export function Heading<TUse extends HeadingTypes>({
 
 export type HeadingPretitleProps = Omit<TextProps<'p'>, 'children'> & {
   children?: string | null;
-  spacing?: Spacing;
+  spacing?: Responsive<Spacing>;
 };
 
 Heading.Pretitle = function HeadingPretitle({
@@ -111,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}
@@ -122,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({
@@ -139,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/sheet/sheet-title.tsx

@@ -13,7 +13,18 @@ type SheetTitleProps<TUse extends HeadingTypes> = ComponentPropsWithRef<
 export function SheetTitle<TUse extends HeadingTypes>(
   props: SheetTitleProps<TUse>,
 ) {
-  const { use = 'h2', className, children, variant, size, ...rest } = props;
+  const {
+    use = 'h2',
+    className,
+    children,
+    variant,
+    size,
+    align,
+    subtitle,
+    pretitle,
+    rootClassName,
+    ...rest
+  } = props;
 
   return (
     <Title asChild {...rest}>
@@ -22,6 +33,10 @@ export function SheetTitle<TUse extends HeadingTypes>(
         variant={variant}
         size={size}
         className={className}
+        align={align}
+        pretitle={pretitle}
+        subtitle={subtitle}
+        rootClassName={rootClassName}
       >
         {children}
       </Heading>

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({