@kalink-ui/seedly 0.25.0 → 0.26.0

package/src/components/center/center.responsive.ts

@@ -0,0 +1,9 @@
+import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
+
+import { centerRecipe, guttersAt } from './center.css';
+
+export const centerResponsive = responsiveRecipe({
+  recipe: centerRecipe,
+  at: { gutters: guttersAt },
+  order: defaultOrder,
+});

package/src/components/center/center.tsx

@@ -2,10 +2,16 @@ import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { centerRecipe, CenterVariants } from './center.css';
+import { CenterVariants } from './center.css';
+import { centerResponsive } from './center.responsive';
+
+import type { Responsive } from '../../styles/responsive';
 
 export type CenterProps<TUse extends ElementType> =
-  PolymorphicComponentProps<TUse> & CenterVariants;
+  PolymorphicComponentProps<TUse> &
+    Omit<CenterVariants, 'gutters'> & {
+      gutters?: Responsive<NonNullable<CenterVariants['gutters']>>;
+    };
 
 /**
  * A custom element for centering a block-level element horizontally,
@@ -24,7 +30,10 @@ export function Center<TUse extends ElementType>({
 
   return (
     <Comp
-      className={clsx(centerRecipe({ andText, gutters, intrinsic }), className)}
+      className={clsx(
+        centerResponsive({ andText, gutters, intrinsic }),
+        className,
+      )}
       {...rest}
     />
   );

package/src/components/cluster/cluster.css.ts

@@ -1,8 +1,105 @@
 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';
 
+// Shared variant style maps so we can reuse them for responsive overrides
+export const clusterSpacingStyles = mapContractVars(sys.spacing, (key) => ({
+  '@layer': {
+    [components]: {
+      gap: sys.spacing[key],
+    },
+  },
+}));
+
+export const clusterJustifyStyles = {
+  start: {
+    '@layer': {
+      [components]: {
+        justifyContent: 'flex-start',
+      },
+    },
+  },
+  end: {
+    '@layer': {
+      [components]: {
+        justifyContent: 'flex-end',
+      },
+    },
+  },
+  center: {
+    '@layer': {
+      [components]: {
+        justifyContent: 'center',
+      },
+    },
+  },
+  spaceBetween: {
+    '@layer': {
+      [components]: {
+        justifyContent: 'space-between',
+      },
+    },
+  },
+  spaceAround: {
+    '@layer': {
+      [components]: {
+        justifyContent: 'space-around',
+      },
+    },
+  },
+  spaceEvenly: {
+    '@layer': {
+      [components]: {
+        justifyContent: 'space-evenly',
+      },
+    },
+  },
+} as const;
+
+export const clusterAlignStyles = {
+  start: {
+    '@layer': {
+      [components]: {
+        alignItems: 'flex-start',
+      },
+    },
+  },
+  end: {
+    '@layer': {
+      [components]: {
+        alignItems: 'flex-end',
+      },
+    },
+  },
+  center: {
+    '@layer': {
+      [components]: {
+        alignItems: 'center',
+      },
+    },
+  },
+  stretch: {
+    '@layer': {
+      [components]: {
+        alignItems: 'stretch',
+      },
+    },
+  },
+  baseline: {
+    '@layer': {
+      [components]: {
+        alignItems: 'baseline',
+      },
+    },
+  },
+} as const;
+
 export const clusterRecipe = recipe({
   base: {
     '@layer': {
@@ -19,102 +116,17 @@ export const clusterRecipe = recipe({
     /**
      * The spacing between items
      */
-    spacing: mapContractVars(sys.spacing, (key) => ({
-      '@layer': {
-        [components]: {
-          gap: sys.spacing[key],
-        },
-      },
-    })),
+    spacing: clusterSpacingStyles,
 
     /**
      * The alignment of items along the main axis
      */
-    justify: {
-      start: {
-        '@layer': {
-          [components]: {
-            justifyContent: 'flex-start',
-          },
-        },
-      },
-      end: {
-        '@layer': {
-          [components]: {
-            justifyContent: 'flex-end',
-          },
-        },
-      },
-      center: {
-        '@layer': {
-          [components]: {
-            justifyContent: 'center',
-          },
-        },
-      },
-      spaceBetween: {
-        '@layer': {
-          [components]: {
-            justifyContent: 'space-between',
-          },
-        },
-      },
-      spaceAround: {
-        '@layer': {
-          [components]: {
-            justifyContent: 'space-around',
-          },
-        },
-      },
-      spaceEvenly: {
-        '@layer': {
-          [components]: {
-            justifyContent: 'space-evenly',
-          },
-        },
-      },
-    },
+    justify: clusterJustifyStyles,
 
     /**
      * The alignment of items along the cross axis
      */
-    align: {
-      start: {
-        '@layer': {
-          [components]: {
-            alignItems: 'flex-start',
-          },
-        },
-      },
-      end: {
-        '@layer': {
-          [components]: {
-            alignItems: 'flex-end',
-          },
-        },
-      },
-      center: {
-        '@layer': {
-          [components]: {
-            alignItems: 'center',
-          },
-        },
-      },
-      stretch: {
-        '@layer': {
-          [components]: {
-            alignItems: 'stretch',
-          },
-        },
-      },
-      baseline: {
-        '@layer': {
-          [components]: {
-            alignItems: 'baseline',
-          },
-        },
-      },
-    },
+    align: clusterAlignStyles,
 
     direction: {
       row: {
@@ -136,3 +148,18 @@ export const clusterRecipe = recipe({
 });
 
 export type ClusterVariants = NonNullable<RecipeVariants<typeof clusterRecipe>>;
+
+export const spacingAt = createResponsiveVariants({
+  styles: clusterSpacingStyles,
+  media: defaultMedia,
+});
+
+export const justifyAt = createResponsiveVariants({
+  styles: clusterJustifyStyles,
+  media: defaultMedia,
+});
+
+export const alignAt = createResponsiveVariants({
+  styles: clusterAlignStyles,
+  media: defaultMedia,
+});

package/src/components/cluster/cluster.responsive.ts

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

package/src/components/cluster/cluster.tsx

@@ -2,10 +2,18 @@ import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { clusterRecipe, ClusterVariants } from './cluster.css';
+import { ClusterVariants } from './cluster.css';
+import { clusterResponsive } from './cluster.responsive';
+
+import type { Responsive } from '../../styles/responsive';
 
 export type ClusterProps<TUse extends ElementType> =
-  PolymorphicComponentProps<TUse> & ClusterVariants;
+  PolymorphicComponentProps<TUse> &
+    Omit<ClusterVariants, 'spacing' | 'justify' | 'align'> & {
+      spacing?: Responsive<NonNullable<ClusterVariants['spacing']>>;
+      justify?: Responsive<NonNullable<ClusterVariants['justify']>>;
+      align?: Responsive<NonNullable<ClusterVariants['align']>>;
+    };
 
 /**
  * A custom element for grouping items, with control over the margin between them
@@ -23,7 +31,10 @@ export function Cluster<TUse extends ElementType>({
 
   return (
     <Comp
-      className={clsx(clusterRecipe({ spacing, align, justify }), className)}
+      className={clsx(
+        clusterResponsive({ spacing, align, justify }),
+        className,
+      )}
       {...rest}
     />
   );

package/src/components/command/command-list.css.ts

@@ -1,11 +1,28 @@
 import { createVar, globalStyle } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
-import { mapContractVars, sys, transition } from '../../styles';
+import {
+  createResponsiveVariants,
+  defaultMedia,
+  mapContractVars,
+  sys,
+  transition,
+} from '../../styles';
 import { components } from '../../styles/layers.css';
 
 const spacingVar = createVar();
 
+// Shared variant style maps so we can reuse them for responsive overrides
+export const commandListSpacingStyles = mapContractVars(sys.spacing, (key) => ({
+  '@layer': {
+    [components]: {
+      vars: {
+        [spacingVar]: sys.spacing[key],
+      },
+    },
+  },
+}));
+
 export const commandList = recipe({
   base: {
     '@layer': {
@@ -27,15 +44,7 @@ export const commandList = recipe({
   },
 
   variants: {
-    spacing: mapContractVars(sys.spacing, (key) => ({
-      '@layer': {
-        [components]: {
-          vars: {
-            [spacingVar]: sys.spacing[key],
-          },
-        },
-      },
-    })),
+    spacing: commandListSpacingStyles,
   },
 });
 
@@ -48,3 +57,8 @@ globalStyle(`${commandList.classNames.base} [cmdk-list-sizer]`, {
     },
   },
 });
+
+export const spacingAt = createResponsiveVariants({
+  styles: commandListSpacingStyles,
+  media: defaultMedia,
+});

package/src/components/command/command-list.responsive.ts

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

package/src/components/command/command-list.tsx

@@ -6,7 +6,7 @@ import { ComponentPropsWithRef } from 'react';
 
 import { StackProps } from '../stack';
 
-import { commandList } from './command-list.css';
+import { commandListResponsive } from './command-list.responsive';
 
 type CommandListProps = ComponentPropsWithRef<typeof CommandPrimitive.List> & {
   spacing?: StackProps<'div'>['spacing'];
@@ -19,7 +19,7 @@ export function CommandList({
 }: CommandListProps) {
   return (
     <CommandPrimitive.List
-      className={clsx(commandList({ spacing }), className)}
+      className={clsx(commandListResponsive({ spacing }), className)}
       asChild
       {...props}
     />

package/src/components/command/command.tsx

@@ -4,10 +4,10 @@ import { clsx } from 'clsx';
 import { Command as CommandPrimitive } from 'cmdk';
 import { ComponentPropsWithRef } from 'react';
 
-import { Stack, StackVariants } from '../stack';
+import { Stack, StackProps } from '../stack';
 
 export type CommandProps = ComponentPropsWithRef<typeof CommandPrimitive> & {
-  spacing?: StackVariants['spacing'];
+  spacing?: StackProps<'div'>['spacing'];
 };
 
 export function Command({

package/src/components/cover/cover.css.ts

@@ -1,12 +1,28 @@
 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';
 
 const spaceVar = createVar();
 export const minSizeVar = createVar();
 
+// Shared variant style maps so we can reuse them for responsive overrides
+export const coverSpacingStyles = mapContractVars(sys.spacing, (key) => ({
+  '@layer': {
+    [components]: {
+      vars: {
+        [spaceVar]: sys.spacing[key],
+      },
+    },
+  },
+}));
+
 export const coverRecipe = recipe({
   base: {
     '@layer': {
@@ -27,15 +43,7 @@ export const coverRecipe = recipe({
     /**
      * The spacing between items
      */
-    spacing: mapContractVars(sys.spacing, (key) => ({
-      '@layer': {
-        [components]: {
-          vars: {
-            [spaceVar]: sys.spacing[key],
-          },
-        },
-      },
-    })),
+    spacing: coverSpacingStyles,
   },
 });
 
@@ -78,3 +86,8 @@ globalStyle(`${coverRecipe.classNames.base} > [data-cover-center]`, {
 });
 
 export type CoverVariants = NonNullable<RecipeVariants<typeof coverRecipe>>;
+
+export const spacingAt = createResponsiveVariants({
+  styles: coverSpacingStyles,
+  media: defaultMedia,
+});

package/src/components/cover/cover.responsive.ts

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

package/src/components/cover/cover.tsx

@@ -5,14 +5,18 @@ import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { coverRecipe, CoverVariants, minSizeVar } from './cover.css';
+import { CoverVariants, minSizeVar } from './cover.css';
+import { coverResponsive } from './cover.responsive';
+
+import type { Responsive } from '../../styles/responsive';
 
 type CoverProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
-  CoverVariants & {
+  Omit<CoverVariants, 'spacing'> & {
     /**
      * The minimum height of the cover
      */
     minSize?: string;
+    spacing?: Responsive<NonNullable<CoverVariants['spacing']>>;
   };
 
 /**
@@ -34,7 +38,7 @@ export function Cover<TUse extends ElementType>({
 
   return (
     <Comp
-      className={clsx(coverRecipe({ spacing }), className)}
+      className={clsx(coverResponsive({ spacing }), className)}
       style={assignInlineVars({
         ...(minSize && { [minSizeVar]: minSize }),
       })}

package/src/components/grid/grid.css.ts

@@ -1,11 +1,25 @@
 import { createVar } 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 minSizeVar = createVar();
 
+// Shared variant style maps so we can reuse them for responsive overrides
+export const gridSpacingStyles = mapContractVars(sys.spacing, (key) => ({
+  '@layer': {
+    [components]: {
+      gridGap: sys.spacing[key],
+    },
+  },
+}));
+
 export const gridRecipe = recipe({
   base: {
     '@layer': {
@@ -24,14 +38,13 @@ export const gridRecipe = recipe({
     /**
      * The spacing between the grid cell
      */
-    spacing: mapContractVars(sys.spacing, (key) => ({
-      '@layer': {
-        [components]: {
-          gridGap: sys.spacing[key],
-        },
-      },
-    })),
+    spacing: gridSpacingStyles,
   },
 });
 
 export type GridVariants = NonNullable<RecipeVariants<typeof gridRecipe>>;
+
+export const spacingAt = createResponsiveVariants({
+  styles: gridSpacingStyles,
+  media: defaultMedia,
+});

package/src/components/grid/grid.responsive.ts

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

package/src/components/grid/grid.tsx

@@ -5,14 +5,18 @@ import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { gridRecipe, GridVariants, minSizeVar } from './grid.css';
+import { GridVariants, minSizeVar } from './grid.css';
+import { gridResponsive } from './grid.responsive';
+
+import type { Responsive } from '../../styles/responsive';
 
 type GridProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
-  GridVariants & {
+  Omit<GridVariants, 'spacing'> & {
     /**
      * The minimum size of a grid cell
      */
     minSize?: string;
+    spacing?: Responsive<NonNullable<GridVariants['spacing']>>;
   };
 
 /**
@@ -33,7 +37,7 @@ export function Grid<TUse extends ElementType>({
 
   return (
     <Comp
-      className={clsx(gridRecipe({ spacing }), className)}
+      className={clsx(gridResponsive({ spacing }), className)}
       style={assignInlineVars({
         ...(minSize && { [minSizeVar]: minSize }),
       })}