@kalink-ui/seedly 0.24.0 → 0.26.0

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,
+});

package/src/components/stack/stack.tsx

@@ -2,10 +2,17 @@ import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { stackRecipe, StackVariants } from './stack.css';
+import { StackVariants } from './stack.css';
+import { stackResponsive } from './stack.responsive';
+
+import type { Responsive } from '../../styles/responsive';
 
 export type StackProps<TUse extends ElementType> =
-  PolymorphicComponentProps<TUse> & StackVariants;
+  PolymorphicComponentProps<TUse> &
+    Omit<StackVariants, 'spacing' | 'align'> & {
+      spacing?: Responsive<NonNullable<StackVariants['spacing']>>;
+      align?: Responsive<NonNullable<StackVariants['align']>>;
+    };
 
 /**
  * A custom element for injecting white space (margin) between flow
@@ -27,7 +34,7 @@ export function Stack<TUse extends ElementType = 'div'>({
 
   return (
     <Comp
-      className={clsx(stackRecipe({ spacing, align }), className)}
+      className={clsx(stackResponsive({ spacing, align }), className)}
       {...rest}
     />
   );

package/src/components/switcher/index.ts

@@ -1,2 +1,2 @@
-export { Switcher } from './switcher';
+export { Switcher, type SwitcherProps } from './switcher';
 export { switcherRecipe, type SwitcherVariants } from './switcher.css';

package/src/components/switcher/switcher.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 thresholdVar = createVar();
 export const limitVar = createVar();
 
+// Shared variant styles to support responsive overrides
+export const switcherSpacingStyles = mapContractVars(sys.spacing, (key) => ({
+  '@layer': {
+    [components]: {
+      gap: sys.spacing[key],
+    },
+  },
+}));
+
 export const switcherRecipe = recipe({
   base: {
     '@layer': {
@@ -25,13 +39,7 @@ export const switcherRecipe = recipe({
     /**
      * The space (margin) between the child elements
      */
-    spacing: mapContractVars(sys.spacing, (key) => ({
-      '@layer': {
-        [components]: {
-          gap: sys.spacing[key],
-        },
-      },
-    })),
+    spacing: switcherSpacingStyles,
 
     /**
      * The maximum number of elements allowed to appear in the horizontal configuration
@@ -123,3 +131,8 @@ globalStyle(
 export type SwitcherVariants = NonNullable<
   RecipeVariants<typeof switcherRecipe>
 >;
+
+export const spacingAt = createResponsiveVariants({
+  styles: switcherSpacingStyles,
+  media: defaultMedia,
+});

package/src/components/switcher/switcher.responsive.ts

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

package/src/components/switcher/switcher.tsx

@@ -5,15 +5,20 @@ import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { switcherRecipe, SwitcherVariants, thresholdVar } from './switcher.css';
+import { SwitcherVariants, thresholdVar } from './switcher.css';
+import { switcherResponsive } from './switcher.responsive';
 
-type SwitcherProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
-  SwitcherVariants & {
-    /**
-     * The threshold at which to switch between horizontal and vertical layouts
-     */
-    threshold?: string;
-  };
+import type { Responsive } from '../../styles/responsive';
+
+export type SwitcherProps<TUse extends ElementType> =
+  PolymorphicComponentProps<TUse> &
+    Omit<SwitcherVariants, 'spacing'> & {
+      /**
+       * The threshold at which to switch between horizontal and vertical layouts
+       */
+      threshold?: string;
+      spacing?: Responsive<NonNullable<SwitcherVariants['spacing']>>;
+    };
 
 /**
  * Switch directly between horizontal and vertical layouts
@@ -32,7 +37,7 @@ export function Switcher<TUse extends ElementType>({
 
   return (
     <Comp
-      className={clsx(switcherRecipe({ spacing, limit }), className)}
+      className={clsx(switcherResponsive({ spacing, limit }), className)}
       style={assignInlineVars({
         ...(threshold && { [thresholdVar]: threshold }),
       })}

package/src/components/text/text.css.ts

@@ -1,6 +1,7 @@
-import { createVar, style } from '@vanilla-extract/css';
+import { createVar, style, type StyleRule } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { createResponsiveVariants, defaultMedia, sys } from '../../styles';
 import { components } from '../../styles/layers.css';
 
 export const lineClampNumber = createVar();
@@ -17,6 +18,46 @@ const lineClamp = style({
   },
 });
 
+// Extract align styles for responsive overrides
+export const textAlignStyles = {
+  start: {
+    '@layer': {
+      [components]: {
+        vars: {
+          [textAlign]: 'start',
+        },
+      },
+    },
+  },
+  center: {
+    '@layer': {
+      [components]: {
+        vars: {
+          [textAlign]: 'center',
+        },
+      },
+    },
+  },
+  end: {
+    '@layer': {
+      [components]: {
+        vars: {
+          [textAlign]: 'end',
+        },
+      },
+    },
+  },
+  justify: {
+    '@layer': {
+      [components]: {
+        vars: {
+          [textAlign]: 'justify',
+        },
+      },
+    },
+  },
+} as const;
+
 export const textRecipe = recipe({
   base: {
     '@layer': {
@@ -139,44 +180,7 @@ export const textRecipe = recipe({
     /**
      * Controls the alignment of the text.
      */
-    align: {
-      start: {
-        '@layer': {
-          [components]: {
-            vars: {
-              [textAlign]: 'start',
-            },
-          },
-        },
-      },
-      center: {
-        '@layer': {
-          [components]: {
-            vars: {
-              [textAlign]: 'center',
-            },
-          },
-        },
-      },
-      end: {
-        '@layer': {
-          [components]: {
-            vars: {
-              [textAlign]: 'end',
-            },
-          },
-        },
-      },
-      justify: {
-        '@layer': {
-          [components]: {
-            vars: {
-              [textAlign]: 'justify',
-            },
-          },
-        },
-      },
-    },
+    align: textAlignStyles,
   },
 });
 
@@ -189,3 +193,38 @@ export const textEllipsisWrapper = style({
 });
 
 export type TextVariants = NonNullable<RecipeVariants<typeof textRecipe>>;
+
+export const alignAt = createResponsiveVariants({
+  styles: textAlignStyles,
+  media: defaultMedia,
+});
+
+// Responsive typography overrides for variant+size combos
+const typographyComboEntries = Object.entries(sys.typography).flatMap(
+  ([variantKey, sizes]) => {
+    return Object.entries(sizes).map(([sizeKey, v]) => {
+      const k = `${variantKey}.${sizeKey}`;
+      const rule: StyleRule = {
+        '@layer': {
+          [components]: {
+            fontFamily: v.font,
+            fontWeight: v.weight,
+            lineHeight: v.lineHeight,
+            letterSpacing: v.tracking,
+            fontSize: v.size,
+          },
+        },
+      };
+
+      return [k, rule] as const;
+    });
+  },
+);
+
+export const typographyAt = createResponsiveVariants({
+  styles: Object.fromEntries(typographyComboEntries) as Record<
+    string,
+    StyleRule
+  >,
+  media: defaultMedia,
+});

package/src/components/text/text.responsive.ts

@@ -0,0 +1,62 @@
+import {
+  defaultOrder,
+  resolveResponsive,
+  responsiveRecipe,
+  TypographySize,
+  TypographyVariant,
+  type BreakpointWithBase,
+  type Responsive,
+} from '../../styles';
+
+import { alignAt, textRecipe, typographyAt } from './text.css';
+
+export const textResponsive = responsiveRecipe({
+  recipe: textRecipe,
+  at: { align: alignAt },
+  order: defaultOrder,
+});
+
+export function buildTypographyOverrides(opts: {
+  variant?: Responsive<TypographyVariant>;
+  size?: Responsive<TypographySize>;
+}) {
+  const { variant, size } = opts;
+  const varMap = resolveResponsive<TypographyVariant, BreakpointWithBase>(
+    variant,
+    defaultOrder,
+  );
+  const sizeMap = resolveResponsive<TypographySize, BreakpointWithBase>(
+    size,
+    defaultOrder,
+  );
+
+  const baseVariant = varMap.xs ?? variant;
+  const baseSize = sizeMap.xs ?? size;
+
+  const classes: string[] = [];
+
+  for (const bp of defaultOrder) {
+    if (bp === 'xs') {
+      continue;
+    }
+
+    const v = varMap[bp] ?? baseVariant;
+    const s = sizeMap[bp] ?? baseSize;
+
+    if (v && s) {
+      const key = `${String(v)}.${String(s)}`;
+      const cls = (
+        typographyAt as Record<
+          Exclude<BreakpointWithBase, 'xs'>,
+          Record<string, string>
+        >
+      )[bp]?.[key];
+
+      if (cls) {
+        classes.push(cls);
+      }
+    }
+  }
+
+  return classes;
+}

package/src/components/text/text.tsx

@@ -4,20 +4,42 @@ import { ElementType } from 'react';
 
 import { TypographySize, TypographyVariant, typography } from '../../styles';
 
-import { TextVariants, textRecipe, textEllipsisWrapper } from './text.css';
+import { TextVariants, textEllipsisWrapper } from './text.css';
+import { buildTypographyOverrides, textResponsive } from './text.responsive';
+
+import type { Responsive } from '../../styles/responsive';
+
+function getBase<T extends string | number>(value: Responsive<T> | undefined) {
+  if (value == null) {
+    return undefined;
+  }
+
+  if (Array.isArray(value)) {
+    return value[0] ?? undefined;
+  }
+
+  if (typeof value === 'object') {
+    const obj = value as Partial<Record<string, T>> & { xs?: T };
+
+    return obj.xs;
+  }
+
+  return value;
+}
 
 export type TextProps<TUse extends React.ElementType> =
   PolymorphicComponentProps<TUse> &
-    TextVariants & {
+    Omit<TextVariants, 'align'> & {
       /**
        * The size of the typography used to render the text.
        */
-      size?: TypographySize;
+      size?: Responsive<TypographySize>;
 
       /**
        * The typography variant used to render the text.
        */
-      variant?: TypographyVariant;
+      variant?: Responsive<TypographyVariant>;
+      align?: Responsive<NonNullable<TextVariants['align']>>;
     };
 
 export function Text<TUse extends ElementType>(props: TextProps<TUse>) {
@@ -26,19 +48,24 @@ export function Text<TUse extends ElementType>(props: TextProps<TUse>) {
     className,
     truncate,
     lineClamp,
-    size = 'medium',
+    size,
     use: Comp = 'span',
-    variant = 'body',
+    variant,
     wrap,
     align,
     ...rest
   } = props;
 
+  const typographyOverrides = buildTypographyOverrides({ variant, size });
+  const baseVariant = getBase(variant) ?? 'body';
+  const baseSize = getBase(size) ?? 'medium';
+
   return (
     <Comp
       className={clsx(
-        getProp(typography, `${variant}.${size}`),
-        textRecipe({ truncate, lineClamp, align, wrap }),
+        getProp(typography, `${baseVariant}.${baseSize}`),
+        typographyOverrides,
+        textResponsive({ truncate, lineClamp, align, wrap }),
         className,
       )}
       {...rest}

package/src/styles/breakpoints.ts

@@ -0,0 +1,25 @@
+export const breakpoints = {
+  sm: 568,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1600,
+  '3xl': 1920,
+} as const;
+
+export type BreakpointKey = keyof typeof breakpoints;
+
+export const screen = {
+  maxXs: `(max-width: ${breakpoints.sm - 1}px)`,
+  sm: `(min-width: ${breakpoints.sm}px)`,
+  maxSm: `(max-width: ${breakpoints.md - 1}px)`,
+  md: `(min-width: ${breakpoints.md}px)`,
+  maxMd: `(max-width: ${breakpoints.lg - 1}px)`,
+  lg: `(min-width: ${breakpoints.lg}px)`,
+  maxLg: `(max-width: ${breakpoints.xl - 1}px)`,
+  xl: `(min-width: ${breakpoints.xl}px)`,
+  maxXl: `(max-width: ${breakpoints['2xl'] - 1}px)`,
+  '2xl': `(min-width: ${breakpoints['2xl']}px)`,
+  max2xl: `(max-width: ${breakpoints['3xl'] - 1}px)`,
+  '3xl': `(min-width: ${breakpoints['3xl']}px)`,
+} as const;

package/src/styles/index.ts

@@ -22,3 +22,15 @@ export {
 export { transition, type CreateTransitionFn } from './transition';
 
 export { visuallyHidden } from './visually-hidden.css';
+
+export {
+  responsiveRecipe,
+  createResponsiveVariants,
+  resolveResponsive,
+  defaultMedia,
+  defaultOrder,
+  type Responsive,
+  type BreakpointWithBase,
+} from './responsive';
+
+export { breakpoints, screen, type BreakpointKey } from './breakpoints';